/* Allgemeinwissen: Runden Zeitstrahl, Volltreffer und Paarlauf (classic-host.js, classic-play.js, pc-classic.js).
   Der Look des Modus ist der Grundlook (base.css, host.css, play.css) – hier stehen nur die Runden, ohne Modus-Klasse,
   damit sie auch in der Chaos-Show gleich aussehen. Show-Größen nach freiem Platz (--vq, --qbw). */

/* ================================================================ Show: Zeitstrahl */
.zswrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(2.2 * var(--vq)); justify-content: safe center; }
.zs-new { align-self: center; max-width: min(100%, 64rem); display: flex; flex-direction: column; gap: 0.3rem; box-shadow: 0 0 0 0.3rem var(--gold), var(--shadow); transition: opacity 0.5s, transform 0.5s var(--ease-back); }
.zs-new small { font-family: var(--font-body); font-weight: 900; font-size: 0.45em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.zs-new small .y { display: inline-block; margin-left: 0.3em; padding: 0 0.6em; border-radius: 99px; background: var(--ink); color: var(--gold); font-family: var(--font-head); font-size: 1.9em; letter-spacing: 0; vertical-align: middle; animation: stamp 0.5s var(--ease-back) both; }
.zs-new.solved { box-shadow: 0 0 0 0.3rem var(--green), var(--shadow); }
.zs-new.solved small { opacity: 1; }
.qbody:not(.readying) .zs-new { font-size: clamp(1.3rem, min(2.3vw, calc(4.4 * var(--vq))), 2.8rem); padding: 0.8rem 1.8rem; }
.zs-score .zs-pick { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--paper); color: var(--ink); font-family: var(--font-head); }
.zs-score .ss.ok .zs-pick { background: var(--green); color: #fff; }
.qbody.readying .zswrap { justify-content: center; }
.qbody.readying .zs-line { opacity: 0.35; }

.zs-line { --sw: clamp(2.2rem, calc(5.6 * var(--vq)), 3.6rem); --gap: calc(1.4 * var(--vq)); position: relative; display: grid; grid-template-columns: var(--sw) repeat(var(--n), minmax(0, 1fr) var(--sw)); grid-template-rows: auto var(--sw) auto; align-items: center; column-gap: 0.25rem; row-gap: var(--gap); width: 100%; max-width: 110rem; margin: 0 auto; transition: opacity 0.4s; }
.zs-axis { grid-row: 2; grid-column: 1 / -1; height: calc(0.8 * var(--vq) + 0.2rem); border-radius: 99px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)); }
.zs-tick { grid-row: 2; justify-self: center; width: calc(1.6 * var(--vq) + 0.4rem); aspect-ratio: 1; border-radius: 50%; background: var(--gold); border: 0.18rem solid var(--ink); z-index: 1; }
.zs-slot { grid-row: 2; z-index: 2; justify-self: center; position: relative; width: var(--sw); height: var(--sw); border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); border: var(--outline); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-weight: 700; font-size: calc(var(--sw) * 0.46); transition: transform 0.25s var(--ease-back), background 0.3s, opacity 0.3s; }
.zs-slot .cnt { position: absolute; top: -0.55rem; right: -0.75rem; min-width: 1.5em; padding: 0 0.3em; border-radius: 99px; background: var(--ink); color: #fff; font-size: 0.5em; line-height: 1.5; text-align: center; animation: pop 0.35s var(--ease-back) both; }
.zs-slot .cnt:empty { display: none; }
.zs-slot .who { display: none; }
.zs-line.open .zs-slot { animation: zsBreathe 1.6s ease-in-out infinite; }
.zs-line.open .zs-slot:nth-of-type(2n) { animation-delay: -0.8s; }
@keyframes zsBreathe { 50% { transform: scale(1.1); box-shadow: 0 0 0 0.25rem rgba(255, 197, 61, 0.6), var(--shadow-sm); } }
/* am PC: der Buchstabe der Lücke ist selbst die Taste – kein zusätzliches Tastenschild */
.zs-slot > .pc-key { display: none; }
.zs-line.pc-open .zs-slot { cursor: pointer; }
.zs-line.pc-open .zs-slot:hover { transform: scale(1.18); background: var(--gold); }
.zs-slot.pc-mine { background: var(--gold); box-shadow: 0 0 0 0.3rem #fff, var(--shadow-sm); }
.zs-slot.pc-mine::before { display: none; }
.zs-line.revealed .zs-slot.right { background: var(--green); color: #fff; transform: scale(1.25); box-shadow: 0 0 0 0.3rem #fff, 0 0 1.6rem rgba(34, 197, 94, 0.8); }
.zs-line.revealed .zs-slot.wrong { opacity: 0.55; }
.zs-line.revealed .zs-slot.wrong.picked { opacity: 1; background: #ffd9d9; }
.zs-card { position: relative; justify-self: center; width: calc(100% - 0.4rem); max-width: 30rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: calc(0.7 * var(--vq) + 0.2rem) 0.7rem; text-align: center; font-weight: 800; font-size: clamp(0.9rem, min(1.55vw, calc(2.9 * var(--vq))), 1.9rem); line-height: 1.15; overflow-wrap: anywhere; animation: popIn 0.45s var(--ease-back) both; }
.zs-card.hi { grid-row: 1; align-self: end; }
.zs-card.lo { grid-row: 3; align-self: start; }
.zs-card::after { content: ''; position: absolute; left: 50%; height: var(--gap); border-left: 0.2rem dashed rgba(255, 255, 255, 0.55); }
.zs-card.hi::after { top: 100%; }
.zs-card.lo::after { bottom: 100%; }
.zs-card .y { font-family: var(--font-head); font-weight: 700; font-size: 1.3em; line-height: 1.1; padding: 0 0.55em; border-radius: 99px; background: var(--ink); color: var(--gold); }
.zs-card .t { display: block; }
.zs-card.fresh { box-shadow: 0 0 0 0.3rem var(--gold), 0 0 2rem rgba(255, 197, 61, 0.7), var(--shadow); animation: zsLand 0.7s var(--ease-back) both; }
.zs-card.fresh .y { background: var(--gold); color: var(--ink); }
@keyframes zsLand { 0% { transform: translateY(-45%) scale(1.25); opacity: 0; } 100% { transform: none; opacity: 1; } }
.zs-line.grown .zs-card:not(.fresh) { animation: none; }
.zswrap .factcard { max-width: 70rem; align-self: center; }

/* ================================================================ Show: Volltreffer */
.vtwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(1.6 * var(--vq)); justify-content: safe center; }
.vt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.4 * var(--vq)) clamp(0.6rem, 1.2vw, 1.4rem); width: min(100%, 82rem); margin: 0 auto; }
.vt-tile { position: relative; min-height: clamp(3.4rem, calc(10.5 * var(--vq)), 7.5rem); display: grid; place-items: center; padding: 0.4rem 0.9rem; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, min(2.2vw, calc(3.6 * var(--vq))), 2.5rem); line-height: 1.1; overflow-wrap: anywhere; animation: popIn 0.4s var(--ease-back) both; transition: background 0.35s, color 0.35s, transform 0.35s var(--ease-back), filter 0.35s, opacity 0.35s; }
.vt-grid.veiled .vt-tile { visibility: hidden; }
.vt-tile .cnt { position: absolute; top: -0.7rem; right: -0.5rem; padding: 0.05rem 0.55rem; border-radius: 99px; background: var(--ink); color: #fff; font-size: 0.55em; animation: pop 0.35s var(--ease-back) both; }
.vt-tile .cnt:empty { display: none; }
.vt-grid.revealed .vt-tile.hit { background: var(--green); color: #fff; transform: scale(1.04); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); }
.vt-grid.revealed .vt-tile.hit::before { content: '✓'; position: absolute; left: 0.5rem; top: 0.2rem; font-size: 0.7em; }
.vt-grid.revealed .vt-tile.miss { filter: saturate(0.25) brightness(0.8); opacity: 0.75; }
.vt-grid.revealed .vt-tile.miss .cnt { background: var(--red); }
.vt-score { margin-top: calc(-0.4 * var(--vq)); }
.vtwrap .factcard { max-width: 70rem; align-self: center; }
.vt-grid.pc-open .vt-tile.pc-item { cursor: pointer; }
.vt-tile.pc-mine { background: #dcfce7; }

/* ================================================================ Show: Paarlauf */
.pawrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(1.4 * var(--vq)); }
.pa-board { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.55fr) minmax(0, 1fr); width: min(100%, 92rem); margin: 0 auto; }
.pa-col { display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(1 * var(--vq)); min-height: 0; }
.pa-head { text-align: center; font-family: var(--font-head); font-size: clamp(0.85rem, calc(2.1 * var(--vq)), 1.4rem); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.pa-item { padding: calc(1 * var(--vq) + 0.2rem) 1rem; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, min(2vw, calc(3.6 * var(--vq))), 2.4rem); line-height: 1.1; overflow-wrap: anywhere; animation: popIn 0.4s var(--ease-back) both; box-shadow: 0 0 0 0.25rem var(--lc, transparent), var(--shadow); transition: box-shadow 0.3s, transform 0.3s var(--ease-back); }
.pa-mid { position: relative; min-height: 0; }
.pa-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-svg path { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; animation: paDraw 0.7s ease-out both; filter: drop-shadow(0 0 6px rgba(255, 197, 61, 0.6)); }
.pa-svg.mine path { stroke-width: 5; stroke-dasharray: none; animation: none; opacity: 0.85; filter: none; }
.pa-svg text { fill: #fff; font-family: var(--font-head); font-size: 20px; paint-order: stroke; stroke: var(--ink); stroke-width: 4px; }
@keyframes paDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.pa-item.paired { transform: scale(1.03); }
.pa-item.paired.c0 { box-shadow: 0 0 0 0.3rem var(--opt-0), var(--shadow); }
.pa-item.paired.c1 { box-shadow: 0 0 0 0.3rem var(--opt-1), var(--shadow); }
.pa-item.paired.c2 { box-shadow: 0 0 0 0.3rem var(--opt-2), var(--shadow); }
.pa-item.paired.c3 { box-shadow: 0 0 0 0.3rem var(--opt-3), var(--shadow); }
.pa-item.pc-item { cursor: pointer; }
.pa-item.pc-mine { outline: 0.25rem dashed var(--gold); outline-offset: 0.2rem; }
.pawrap .factcard { max-width: 70rem; align-self: center; }

/* ================================================================ Show: Wissens-Sprint */
.spwrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(1.2 * var(--vq)); }
.sp-head { display: flex; align-items: baseline; justify-content: center; gap: 1.2rem; flex-wrap: wrap; font-family: var(--font-head); }
.sp-heat { font-size: clamp(1.3rem, calc(4 * var(--vq)), 2.6rem); padding: 0.1rem 1rem; border-radius: 99px; background: var(--paper); color: var(--ink); border: var(--outline); box-shadow: var(--shadow-sm); }
.sp-hint { font-size: clamp(0.9rem, calc(2.3 * var(--vq)), 1.4rem); opacity: 0.85; }
.sp-lanes { --lh: 3rem; flex: 1; min-height: 0; overflow: hidden; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), var(--lh)); grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-content: center; gap: calc(var(--lh) * 0.14) 1.6rem; width: min(100%, 100rem); margin: 0 auto; }
.sp-lane { --x: 0; height: var(--lh); min-width: 0; display: grid; grid-template-columns: minmax(4rem, 16%) 1fr auto; align-items: center; gap: 0.8rem; animation: slideLeft 0.4s var(--ease-out) both; }
.sp-name { font-family: var(--font-head); font-size: clamp(0.8rem, calc(var(--lh) * 0.36), 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.sp-name i { font-style: normal; opacity: 0.7; }
.sp-track { position: relative; height: 100%; border-radius: 99px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 2px, transparent 2px 10%), rgba(12, 3, 36, 0.35); border: 2px solid rgba(255, 255, 255, 0.25); }
.sp-trail { position: absolute; left: 0; top: 18%; bottom: 18%; width: calc(var(--x) * (100% - var(--lh))); border-radius: 99px; background: linear-gradient(90deg, rgba(225, 29, 72, 0.15), rgba(255, 197, 61, 0.85)); transition: width 0.5s var(--ease-out); }
.sp-runner { position: absolute; top: 50%; left: calc(var(--x) * (100% - var(--lh))); transform: translateY(-50%); transition: left 0.5s var(--ease-out); z-index: 1; }
.sp-runner .avatar { --size: calc(var(--lh) * 0.92) !important; }
.sp-lane.bump .sp-runner { animation: spHop 0.35s var(--ease-back); }
@keyframes spHop { 50% { transform: translateY(-80%) rotate(-8deg); } }
.sp-flag { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); font-size: max(0.9rem, calc(var(--lh) * 0.5)); opacity: 0.6; }
.sp-stats { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-size: clamp(0.8rem, calc(var(--lh) * 0.34), 1.5rem); white-space: nowrap; }
.sp-stats .ok { color: #86efac; }
.sp-stats .bad { color: #fca5a5; }
.sp-stats .pts { padding: 0 0.6em; border-radius: 99px; background: var(--paper); color: var(--ink); }
.sp-lanes.final .sp-lane.win .sp-track { border-color: var(--gold); box-shadow: 0 0 1.4rem rgba(255, 197, 61, 0.6); }
.sp-lanes.final .sp-lane.win .sp-name { color: var(--gold); }
.sp-none { align-self: center; padding: 1rem 2rem; font-family: var(--font-head); font-size: 1.6rem; }

/* ================================================================ Handy: Wissens-Sprint */
.spv { gap: 12px; }
.sp-pstat { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-size: 17px; }
.sp-pstat .ok { color: #86efac; }
.sp-pstat .bad { color: #fca5a5; }
.sp-pstat .pts { margin-left: auto; padding: 2px 12px; border-radius: 99px; background: var(--paper); color: var(--ink); }
.sp-pcard { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 16px; text-align: center; }
.sp-pcard.in { animation: popIn 0.25s var(--ease-back) both; }
.sp-pcard .t { font-family: var(--font-head); font-weight: 600; font-size: 28px; line-height: 1.1; overflow-wrap: break-word; }
.sp-pcard .q { font-weight: 900; font-size: 17px; color: var(--ink-soft); }
.sp-pcard.noterm .q { font-family: var(--font-head); font-weight: 600; font-size: 24px; color: var(--ink); }
.sp-pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 150px; }
.sp-pbtns .abtn { font-size: 21px; animation: none; }
.sp-pbtns .abtn.long { font-size: 16px; }
.sp-pbtns .abtn:nth-child(1) { --oc: var(--opt-1); }
.sp-pbtns .abtn:nth-child(2) { --oc: var(--opt-2); }
.spv.locked .sp-pbtns .abtn { opacity: 0.35; filter: saturate(0.3); }
.spv.locked .sp-pbtns .abtn.right { opacity: 1; filter: none; --oc: var(--green); box-shadow: 0 0 0 4px #fff, var(--shadow); }
.sp-pfb { position: relative; min-height: 36px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; font-weight: 900; font-size: 15px; text-align: center; }
.sp-pfb i { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.sp-pfb.ok span { color: #86efac; }
.sp-pfb.bad { background: rgba(239, 68, 68, 0.2); }

/* ================================================================ Handy: Zeitstrahl */
.zsv { gap: 10px; }
.zsv .zs-pq { display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 0 3px var(--gold), var(--shadow-sm); }
.zsv .zs-pq small { font-family: var(--font-body); font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.zs-plist { display: flex; flex-direction: column; gap: 3px; }
.zs-pslot { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px 4px 6px; border: var(--outline); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-size: 15px; text-align: left; touch-action: manipulation; transition: opacity 0.2s, transform 0.12s; }
.zs-pslot:active { transform: translateY(2px); }
.zs-pslot b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #0ea5e9; color: #fff; }
.zs-pslot span { flex: 1; }
.zs-pslot i { font-style: normal; font-family: var(--font-body); font-size: 12px; font-weight: 800; opacity: 0.55; }
.zs-prow { display: flex; align-items: baseline; gap: 10px; margin-left: 20px; padding: 3px 10px 3px 14px; border-left: 3px solid rgba(255, 255, 255, 0.45); font-size: 14px; font-weight: 700; line-height: 1.2; }
.zs-prow b { flex: none; min-width: 3.4em; font-family: var(--font-head); color: var(--gold); }
.zsv.dense .zs-pslot { min-height: 34px; padding: 2px 10px 2px 5px; font-size: 14px; }
.zsv.dense .zs-pslot b { width: 25px; height: 25px; }
.zsv.dense .zs-prow { padding: 1px 10px 1px 14px; font-size: 13px; }
.zsv.dense .zs-pq { padding: 10px 12px; font-size: 18px; }
.zs-plist.chosen .zs-pslot { opacity: 0.35; }
.zs-plist.chosen .zs-pslot.sel { opacity: 1; background: var(--gold); box-shadow: 0 0 0 3px #fff, var(--shadow-sm); }

/* ================================================================ Handy: Volltreffer */
.vtv { gap: 10px; }
.vt-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vt-pbtn { min-height: 62px; padding: 6px 5px; border: var(--outline); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; touch-action: manipulation; transition: transform 0.12s var(--ease-back), background 0.15s, color 0.15s; animation: popIn 0.3s var(--ease-back) both; }
.vt-pbtn.long { font-size: 13px; }
.vt-pbtn.xlong { font-size: 12px; }
.vt-pbtn.on { background: var(--green); color: #fff; transform: scale(1.03); box-shadow: 0 0 0 3px #fff, var(--shadow-sm); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.vt-pgrid.done { pointer-events: none; opacity: 0.7; }
.vt-prow { display: flex; align-items: center; gap: 10px; }
.vt-pcnt { flex: 1; font-size: 14px; font-weight: 800; opacity: 0.85; }
.vt-prow .btn { flex: none; min-width: 9rem; }

/* ================================================================ Handy: Paarlauf */
.pav { gap: 10px; }
.pa-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pa-pgrid.done { opacity: 0.5; pointer-events: none; }
.pa-pcol { display: flex; flex-direction: column; gap: 8px; }
.pa-phead { text-align: center; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.pa-pbtn { position: relative; min-height: 54px; padding: 6px 10px; border: var(--outline); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 3px var(--lc, transparent), var(--shadow-sm); font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; touch-action: manipulation; }
.pa-pbtn.long { font-size: 13px; }
.pa-pbtn.cur { outline: 3px dashed var(--gold); outline-offset: 2px; }
.pa-pbtn .tag { position: absolute; top: -7px; right: -6px; min-width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--lc); color: #fff; border: 2px solid var(--ink); font-style: normal; font-weight: 900; font-size: 12px; }
.pa-pcol.r .pa-pbtn .tag { right: auto; left: -6px; }
.pa-pbtn .tag:empty { display: none; }
.pa-prow { display: grid; grid-template-columns: auto 1fr; gap: 8px; }