/* Handy & Tablet v4 (27.09.2026) – Controller zum Bildschirm: Die Frage steht auf dem Spielbildschirm,
   am Handy nur A–D als große Rauten, darunter Hilfen/Fähigkeiten. „Weiter“ ist ein großer runder Knopf in der Mitte.
   Gleiche Formensprache wie die Bühne: dunkles Braun, Goldkante, Petrol-Rauten, gold = eigene Wahl, grün/rot = Auflösung. */
@font-face { font-family: 'Alegreya Sans'; font-weight: 500; src: url('/assets/ui/fonts/alegreya-sans-latin-500-normal.woff2') format('woff2'); font-display: swap }
@font-face { font-family: 'Alegreya Sans'; font-weight: 800; src: url('/assets/ui/fonts/alegreya-sans-latin-800-normal.woff2') format('woff2'); font-display: swap }
body.play { --v4gold: #e8c46a; --v4rim: linear-gradient(180deg, #f3e0a8, #b8914a 38%, #6e4f22 62%, #d6b56a); --v4gem: #2f93b4 }

/* ---------- Antwort-Pad: 2 × 2 Rauten ---------- */
.pad4 { display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; min-height: 0 }
.pad4 .pk { position: relative; display: grid !important; place-items: center; min-height: 118px; padding: 0 !important; border: 0 !important; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgb(47 147 180 / .18), transparent 70%), linear-gradient(180deg, #2c2016, #120d09) !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 1.5px rgb(214 176 104 / .55), 0 6px 14px rgb(0 0 0 / .55) !important; transition: transform .12s, box-shadow .25s, opacity .3s }
.pad4 .pk::before { content: ""; position: absolute; width: 58%; aspect-ratio: 1; max-width: 120px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--v4rim) }
.pad4 .pk::after { content: ""; position: absolute; width: calc(58% - 16px); aspect-ratio: 1; max-width: 104px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--g, var(--v4gem)) 78%, #fff), var(--g, var(--v4gem)) 55%, color-mix(in srgb, var(--g, var(--v4gem)) 70%, #000)) }
.pad4 .pk .kl { position: relative; z-index: 1; width: auto !important; height: auto !important; min-width: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important;
  font: 400 44px/1 Friz, 'Friz Quadrata', Georgia, serif !important; color: #f6ebcf !important; text-shadow: 0 2px 0 rgb(0 0 0 / .55), 0 0 14px rgb(0 0 0 / .4) }
.pad4 .pk:active:not(:disabled) { transform: scale(.96) }
.pad4 .pk.sel { --g: #d9a132; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px #f0d488, 0 0 22px rgb(240 200 100 / .45) !important; outline: 0 !important; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgb(240 200 100 / .25), transparent 70%), linear-gradient(180deg, #5e4516, #2e210a) !important }
.pad4 .pk.sel .kl { color: #2a1a04 !important; text-shadow: 0 1px 0 #fff8 }
.pad4 .pk.gone { opacity: .18; filter: grayscale(1) }
.pad4 .pk:disabled:not(.sel):not(.gone) { opacity: .55 }
/* Auflösung */
.pad4.rv .pk { opacity: 1; animation: none !important; outline: 0 !important }
.pad4.rv .pk.ok { --g: #2e9e4a; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgb(80 220 110 / .3), transparent 70%), linear-gradient(180deg, #1f6230, #0b2c15) !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px #8af0a4, 0 0 26px rgb(80 220 110 / .5) !important; animation: padok .8s .3s both !important }
.pad4.rv .pk.no { --g: #b8281e; background: linear-gradient(180deg, #5e1810, #2a0806) !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 2px #ff8a7a !important; animation: padno .6s .3s both !important }
.pad4.rv .pk.dim { opacity: .3; filter: saturate(.3) }
.pad4.rv .pk.sel::before { display: block }
@keyframes padok { 0% { transform: scale(.9) } 45% { transform: scale(1.05) } 100% { transform: none } }
@keyframes padno { 25% { transform: translateX(-7px) } 55% { transform: translateX(6px) } 100% { transform: none } }
.pq-look { margin-left: auto; font: 700 12px 'Alegreya Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #b9a787 }
.pq-look::before { content: "▲ "; opacity: .6 }
.ptext { display: none !important }
/* Frage-Modus: Pad füllt den freien Platz */
body.qmode .pad4 { flex: 1 1 auto; grid-auto-rows: 1fr }
body.qmode .pad4 .pk { min-height: 0; height: 100% }
.plocked { border-radius: 12px !important }
.presult .pr-bar { border-radius: 12px }

/* ---------- „Weiter“: großer runder Knopf in der Mitte ---------- */
.gate4 { display: grid; justify-items: center; gap: 10px; margin: 14px 0 }
.pgate { position: relative; width: 168px; height: 168px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #2a1a04;
  background: radial-gradient(circle at 50% 32%, #fff4c8, #f0c24a 42%, #a8741a 80%); box-shadow: 0 0 0 2px #000, 0 0 0 5px #6e4f22, 0 0 0 7px #000, 0 0 30px rgb(255 205 80 / .55), 0 10px 22px rgb(0 0 0 / .6); font: 400 30px/1 Friz, 'Friz Quadrata', Georgia, serif; -webkit-tap-highlight-color: transparent; animation: gatebreath 2.4s ease-in-out infinite }
.pgate b { position: relative; z-index: 1; font-weight: 400; text-shadow: 0 1px 0 #fff8 }
.pgate i { position: absolute; inset: -14px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(rgb(240 200 100 / .55) 0 2deg, transparent 2deg 15deg); mask: radial-gradient(circle, transparent 64%, #000 66%, #000 69%, transparent 71%); animation: gatespin 18s linear infinite }
.pgate:active { transform: scale(.95) }
.pgate[disabled], .pgate.wait { filter: grayscale(.6) brightness(.7) }
.pgate.ok { color: #06220e; background: radial-gradient(circle at 50% 32%, #d8ffe0, #5ee07a 45%, #1e7034 85%); box-shadow: 0 0 0 2px #000, 0 0 0 5px #1f6230, 0 0 0 7px #000, 0 0 26px rgb(90 230 120 / .45); animation: none; width: 128px; height: 128px; font-size: 24px }
.pgate.ok i { animation-duration: 40s; background: repeating-conic-gradient(rgb(140 255 170 / .5) 0 2deg, transparent 2deg 15deg) }
@keyframes gatebreath { 50% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #6e4f22, 0 0 0 7px #000, 0 0 46px rgb(255 205 80 / .85), 0 10px 22px rgb(0 0 0 / .6) } }
@keyframes gatespin { to { transform: rotate(360deg) } }
/* Solange nur „Weiter“ gefragt ist: Knopf steht mittig im Aktionsbereich */
body.gatemode .ppane[data-tab="act"] { min-height: calc(100dvh - 230px); display: flex; flex-direction: column }
body.gatemode .ppane[data-tab="act"] .gate4 { margin: auto 0 }
.presult + .gate4, .presult ~ .gate4 { margin-top: 18px }

/* ---------- Tablet / iPad: mehr Platz, Pad quadratischer, zweispaltig wo sinnvoll ---------- */
@media (min-width: 700px) {
  body.play .pbody { max-width: 860px; margin: 0 auto; padding-left: 28px; padding-right: 28px; font-size: 19px }
  body.play .phead { max-width: 860px; margin: 0 auto }
  .pad4 { gap: 18px }
  .pad4 .pk { min-height: 190px; border-radius: 18px } .pad4 .pk .kl { font-size: 64px !important } .pad4 .pk::before { max-width: 160px } .pad4 .pk::after { max-width: 140px }
  body.qmode .pbody { height: calc(100dvh - 96px - 110px) }
  .pgate { width: 220px; height: 220px; font-size: 38px } .pgate.ok { width: 160px; height: 160px }
  .hints { gap: 14px } .hb { min-height: 64px !important; font-size: 16px !important }
  .sk-bar { grid-template-columns: repeat(3, 1fr) !important }
}
@media (min-width: 1000px) and (orientation: landscape) {
  body.play .pbody, body.play .phead { max-width: 1100px }
  body.qmode .ppane[data-tab="act"] { display: grid !important; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 24px }
  body.qmode .ppane[data-tab="act"] > .pq-head { grid-column: 1 / -1 }
  body.qmode .ppane[data-tab="act"] > .pad4 { grid-row: 2 / 4 }
}
.pad4 .pk::before, .pad4 .pk::after { display: block !important; content: "" !important }

body[data-role="play"] .gm-banner { padding: 4px 12px; font-size: 11px; gap: 6px } body[data-role="play"] .gm-banner span { display: none }
.pad4 .pk .kl { position: relative; z-index: 1; display: block; margin: 0; padding: 0 }
.pad4 .pk.sel-optim { --g: #d9a132 }
/* Auflösung am Handy: Pad kompakt, „Weiter“ steht groß darunter, Einspruch klein am Ende */
.pad4.rv { gap: 8px } .pad4.rv .pk { min-height: 70px } .pad4.rv .pk::before { width: 44% } .pad4.rv .pk::after { width: calc(44% - 12px) } .pad4.rv .pk .kl { font-size: 30px !important }
.appeal4 { min-height: 44px !important; font-size: 15px !important; opacity: .8 }
.presult .pr-bar b { font-size: 26px }
@media (min-width: 700px) { .pad4.rv .pk { min-height: 110px } .pad4.rv .pk .kl { font-size: 42px !important } }
/* Gesperrte Knöpfe im Pad nicht grau filtern – die Farben tragen die Aussage */
.pad4 .pk[disabled] { filter: none; opacity: 1 }
.pad4 .pk[disabled]:not(.sel):not(.ok):not(.no) { opacity: .45 }
.pad4.rv .pk.dim[disabled] { opacity: .3; filter: saturate(.3) }
.pgate[disabled] { filter: saturate(.5) brightness(.8); opacity: 1 }

/* ============ Handy v4.1: Kopf = kleiner Einheitenrahmen wie auf der Bühne ============ */
.phead:has(.uf4) { padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important; background: linear-gradient(180deg, rgb(24 18 12 / .98), rgb(12 9 7 / .96)) !important; box-shadow: 0 1px 0 rgb(214 176 104 / .35), 0 6px 18px rgb(0 0 0 / .6) !important }
.phead:has(.uf4)::before, .phead:has(.uf4)::after { display: none !important }
.uf4 { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center }
.uf4-por { position: relative; width: 58px; height: 58px }
.uf4-por .face { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #b8914a, 0 0 0 4px #000, 0 3px 8px #000c }
.uf4-por .cls { position: absolute; left: -4px; top: -3px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px #b8914a }
.uf4-por .lvl { position: absolute; left: -5px; bottom: -3px; min-width: 22px; height: 22px; padding: 0 4px; display: grid; place-items: center; border-radius: 99px; font: 800 13px/1 'Alegreya Sans', sans-serif; color: #ffe7a0; background: #1a1208; box-shadow: 0 0 0 1.5px #000, 0 0 0 2.5px #b8914a }
.uf4-inf { display: grid; gap: 5px; min-width: 0 }
.uf4-nm { display: flex; align-items: center; gap: 8px } .uf4-nm b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 19px/1.1 'Alegreya Sans', sans-serif; color: color-mix(in srgb, var(--c) 70%, #fff); text-shadow: 0 1px 0 #000 }
.uf4-nm .rk { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 99px; font: 800 12px/1.3 'Alegreya Sans', sans-serif; color: #d8ccb2; background: #1a1410; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(214 176 104 / .35) }
.uf4-nm .rk.r1 { color: #3a2400; background: linear-gradient(#fff4c0, #f0c24a 50%, #a8741a) } .uf4-nm .rk.r2 { color: #20242a; background: linear-gradient(#fff, #c8d0da 50%, #7a8492) } .uf4-nm .rk.r3 { color: #2a1406; background: linear-gradient(#ffd8b0, #c9804a 50%, #7a4020) }
.uf4-xp { position: relative; height: 16px; border-radius: 3px; overflow: hidden; background: #0b0806; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgb(184 145 74 / .5) }
.uf4-xp i { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); background: url('/assets/ui/fx/v4/fill-arkan.png') center / 100% 100%; filter: saturate(.55) brightness(.8) } .uf4-xp i::after { content: ""; position: absolute; inset: 0; background: #5a2fa0; opacity: .45 }
.uf4-xp em { position: absolute; inset: 0; display: grid; place-items: center; font: 800 11.5px/1 'Alegreya Sans', sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000 }
.uf4-chips { display: flex; align-items: center; gap: 10px; font: 800 13px 'Alegreya Sans', sans-serif; color: #f3e2b0 } .uf4-chips .dkp { color: #8cc8ff } .uf4-chips .streak { color: #ffb35a }
.uf4-chips .moneybar img, .uf4-chips .moneybar .ico { width: 13px; height: 13px }
body.qmode .uf4 { grid-template-columns: 46px minmax(0, 1fr) } body.qmode .uf4-por { width: 46px; height: 46px } body.qmode .uf4-chips { display: none }

/* ============ Zweistufig: antippen = auswählen, nochmal antippen = einloggen ============ */
.pad4 .pk.pre { --g: #d9a132; background: radial-gradient(ellipse 70% 80% at 50% 50%, rgb(240 200 100 / .18), transparent 70%), linear-gradient(180deg, #2c2016, #120d09) !important; box-shadow: 0 0 0 1px #000, inset 0 0 0 2.5px #f0d488, 0 0 24px rgb(240 200 100 / .5) !important; animation: pkpre 1.1s ease-in-out infinite }
.pad4 .pk.pre em { position: absolute; z-index: 2; bottom: 8px; left: 0; right: 0; text-align: center; font: 800 11.5px/1.15 'Alegreya Sans', sans-serif; font-style: normal; letter-spacing: .04em; color: #ffe7a0; text-shadow: 0 1px 2px #000 }
.pad4.haspre .pk:not(.pre):not(.gone) { opacity: .6 }
@keyframes pkpre { 50% { box-shadow: 0 0 0 1px #000, inset 0 0 0 2.5px #fff4c8, 0 0 36px rgb(240 200 100 / .75) !important } }
.pad4 .pk.sel { animation: pklock .55s cubic-bezier(.34, 1.5, .64, 1) }
@keyframes pklock { 0% { transform: scale(1.12); filter: brightness(1.8) } 100% { transform: none } }
.pad4.locked .pk:not(.sel) { opacity: .28 !important }
.pad-help { margin: 4px 0 0; text-align: center; font: 600 14px 'Alegreya Sans', sans-serif; color: #b9a787 } .pad-help b { color: #ffe29a }
body.qmode .pad-help { flex: none }
/* Auflösung am Handy: neutral – das Ergebnis läuft auf dem Bildschirm, „Weiter“ steht im Mittelpunkt */
.presult4 { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgb(0 0 0 / .3); box-shadow: inset 0 0 0 1px rgb(214 176 104 / .3) }
.presult4 img { width: 38px; height: 38px } .presult4 b { display: block; font: 400 22px/1.1 Friz, Georgia, serif; color: #e8c46a } .presult4 span { font-size: 14px; color: #b9a787 }
.presult4 ~ .gate4 { margin-top: 28px }
.pbody .gate4 .pgate { margin-top: 4px }
/* Allgemein ruhiger: Abschnittstitel und Karten im v4-Stil */
body.play .pbody { background: radial-gradient(ellipse 90% 50% at 50% 0%, rgb(58 42 24 / .35), transparent 70%) }
body.play .mech { border-radius: 10px }