/* ==========================================================================
   Handy-App auf Tablet und iPad (10.10.2026, Sebastian: „iPad-Version, wenn jemand mit iPad teilnimmt“)
   Smartphone bleibt unverändert. Zwei Stufen:
   1) Tablet hoch (ab 700 px breit, ab 600 px hoch): eine ruhige Spalte mit Lesebreite, Leiste gleich breit.
   2) Tablet quer bzw. großes iPad (ab 1000 px breit, ab 600 px hoch, body.split aus client.js):
      links Charakter/Gemeinschaft als Seitenleiste mit eigenem Umschalter, rechts immer die Aktion.
      Beide Spalten scrollen für sich, der Mittelknopf steht unter der Aktion.
   ========================================================================== */

/* ---------- 1) Tablet hoch: Lesebreite statt Vollbreite ---------- */
@media (min-width: 700px) and (min-height: 600px) {
  body.play:not(.split) { --col10: min(700px, calc(100vw - 48px)) }
  body.play:not(.split) #phead, body.play:not(.split) #pbody { width: var(--col10); max-width: var(--col10); margin-left: auto; margin-right: auto; box-sizing: border-box }
  body.play:not(.split) #pbody { padding-left: 0; padding-right: 0 }
  /* Leiste läuft über die ganze Breite (sonst wirkt sie abgeschnitten), die Knöpfe stehen in der Spalte */
  body.play:not(.split) nav.ptabs { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; border-radius: 0;
    padding-left: calc((100vw - var(--col10)) / 2 + 10px) !important; padding-right: calc((100vw - var(--col10)) / 2 + 10px) !important }
  body.play:not(.split) .fan { left: max(0px, calc(50vw - var(--col10) / 2)); right: max(0px, calc(50vw - var(--col10) / 2)) }
}

/* ---------- 2) Tablet quer: Seitenleiste + Aktion ---------- */
@media (min-width: 1000px) and (min-height: 600px) {
  body.play.split {
    --sw: clamp(330px, 31vw, 400px); --sg: 28px; --pad: 28px;
    --mw: min(780px, calc(100vw - var(--sw) - var(--sg) - 2 * var(--pad)));
    --x0: calc((100vw - var(--sw) - var(--sg) - var(--mw)) / 2);
    --barh: 118px;
    height: 100dvh; overflow: hidden; display: block !important
  }
  body.play.split #app {
    display: grid !important; grid-template-columns: var(--sw) var(--mw); grid-template-rows: auto auto auto minmax(0, 1fr);
    column-gap: var(--sg); justify-content: center; align-content: stretch;
    width: 100vw; max-width: none; height: 100dvh; margin: 0; padding: env(safe-area-inset-top, 0px) 0 0; box-sizing: border-box
  }
  body.play.split #phead, body.play.split #pbody { display: contents !important }
  /* Kopf (Charakterrahmen, Ort) links oben */
  body.play.split #phead > * { grid-column: 1; min-width: 0 }
  body.play.split #phead > .uf5 { grid-row: 1; margin: 16px 0 0 !important; width: auto !important; max-width: none !important }
  body.play.split #phead > .kick5 { grid-row: 2; margin: 12px 0 2px !important; width: auto !important; max-width: none !important }
  body.play.split #phead > :not(.uf5):not(.kick5) { grid-row: 1; align-self: start; z-index: 3 }
  /* Umschalter Charakter | Gemeinschaft */
  body.play.split .p10-seg { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 10px 0 0; padding: 4px; border-radius: 12px;
    background: linear-gradient(180deg, #1b140c, #0d0906); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .28), 0 6px 16px rgb(0 0 0 / .45) }
  body.play.split .p10-seg button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 10px; border: 0; border-radius: 9px;
    background: transparent; color: #c9b48a; font: 700 14.5px/1 var(--u5, inherit); letter-spacing: .02em; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
  body.play.split .p10-seg button img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px #000, 0 0 0 2px #8a6a30; filter: saturate(.7) brightness(.85) }
  body.play.split .p10-seg button.on { background: linear-gradient(180deg, #3a2a12, #1c140a); color: #f3e0a8; box-shadow: inset 0 0 0 1px rgb(243 224 168 / .55), 0 0 14px rgb(232 196 106 / .18) }
  body.play.split .p10-seg button.on img { filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px #f3e0a8 }
  body.play.split .p10-seg button:focus-visible { outline: 2px solid #f3e0a8; outline-offset: 2px }
  body.play.split .p10-seg .badge { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c0392b; color: #fff; font: 800 11px/18px var(--u5, inherit); text-align: center; font-style: normal }
  body.play.split .p10-seg .badge[hidden] { display: none }
  /* Seitenleiste: Charakter bzw. Gemeinschaft, scrollt für sich */
  body.play.split .ppane[data-tab="char"], body.play.split .ppane[data-tab="gem"] {
    grid-column: 1; grid-row: 4; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 14px 2px calc(92px + env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; scrollbar-width: thin; scrollbar-color: rgb(214 176 104 / .35) transparent }
  /* Unterreiter der Seitenleiste sichtbar (am Handy kommen sie aus dem Aufklappmenü): die ursprüngliche Reiterleiste mit Symbol über Text */
  body.play.split .ppane .subnav { display: grid !important; margin: 0 0 12px !important }
  /* Aktion rechts über die ganze Höhe */
  body.play.split .ppane[data-tab="act"] {
    grid-column: 2; grid-row: 1 / -1; min-height: 0 !important; height: auto !important; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 18px 2px calc(var(--barh) + 16px + env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; scrollbar-width: none }
  body.play.split .ppane[data-tab="act"]::-webkit-scrollbar { display: none }
  body.play.split #pbody > :not(.ppane) { grid-column: 2; grid-row: 1 }
  /* Frage/Tor: Aktion füllt die Höhe wie am Handy, ohne die Seitenleiste zu verdrängen */
  body.play.split.qmode .ppane[data-tab="act"] { display: flex !important; flex-direction: column; gap: 10px; overflow: hidden; grid-template-columns: none !important }
  body.play.split.gatemode .ppane[data-tab="act"] { display: flex !important; flex-direction: column }
  body.play.split.gatemode .ppane[data-tab="act"] .gate4 { margin: auto 0 }
  /* Mittelknopf-Leiste nur unter der Aktion; Charakter/Gemeinschaft stehen links im Umschalter */
  /* Leiste über die ganze Breite, Mittelknopf mittig unter der Aktion */
  body.play.split nav.ptabs { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; border-radius: 0; translate: none;
    padding-left: calc(var(--x0) + var(--sw) + var(--sg)) !important; padding-right: var(--x0) !important }
  body.play.split .ptabs.p6.mk-f .p6-bar { background:
    radial-gradient(circle 50px at calc(var(--x0) + var(--sw) + var(--sg) + var(--mw) / 2) -1px, #0d0a08 0 44px, transparent 45px) top / 100% 100% no-repeat,
    linear-gradient(180deg, #2a221b, #15110d 38%, #0b0907) }
  body.play.split nav.ptabs > button[data-tab="char"], body.play.split nav.ptabs > button[data-tab="gem"] { visibility: hidden; pointer-events: none }
  body.play.split .fan { display: none !important }
  /* Hinweise unten rechts über der Aktion statt quer über beide Spalten */
  body.play.split .toasts { left: calc(var(--x0) + var(--sw) + var(--sg)) !important; right: auto !important; width: var(--mw) !important; max-width: none !important; translate: none; transform: none }
  /* Übergänge: nur die Aktion gleitet, Seitenleiste und Rahmen stehen */
  body.play.split #phead { view-transition-name: none }
  body.play.split #phead > .uf5 { view-transition-name: p-head }
  body.play.split #phead > .kick5 { view-transition-name: p-kick }
  body.play.split .p10-seg { view-transition-name: p-seg }
  body.play.split .ppane[data-tab="char"]:not([hidden]), body.play.split .ppane[data-tab="gem"]:not([hidden]) { view-transition-name: p-side }
}
::view-transition-group(p-side), ::view-transition-old(p-side), ::view-transition-new(p-side), ::view-transition-group(p-seg), ::view-transition-old(p-seg), ::view-transition-new(p-seg),
::view-transition-group(p-kick), ::view-transition-old(p-kick), ::view-transition-new(p-kick) { animation-duration: .14s }
.p10-seg { display: none }

/* Antwortkacheln füllen die Höhe des Tablets (am Handy unverändert) */
@media (min-width: 700px) and (min-height: 600px) {
  body.play:not(.split) .fa-answers { --fa-height: clamp(220px, calc((100dvh - 600px) / 2), 300px) }
  body.play.split .fa-answers { --fa-height: clamp(190px, calc((100dvh - 430px) / 2), 320px) }
}
/* Quer: Kopf bleibt in Frage-Phasen gleich groß (am Handy schrumpft er, hier stört nichts) */
@media (min-width: 1000px) and (min-height: 600px) {
  body.play.split.qmode .uf5 { grid-template-columns: 80px minmax(0, 1fr); padding: 10px 16px 10px 10px }
  body.play.split.qmode .uf5 .por { width: 80px; height: 80px }
  body.play.split.qmode .uf5 .cur { display: flex }
  body.play.split.qmode .uf5 .nm b { font-size: 26px }
  body.play.split.qmode .uf5 .rkbg { font-size: 64px }
  body.play.split.qmode .kick5 { margin-top: 12px }
}