:root {
  /* Layout: panggung studio. Header dengan tab mode, bar skor (Tim A | poin ronde | Tim B), plat pertanyaan,
     papan jawaban berbingkai lampu, lalu dek kontrol. Mode edit: daftar soal di kiri, editor di kanan. */
  color-scheme: dark;
  --bg: #04361b;
  --glow: #0ea955;
  --deep: #032713;
  --panel: #07552a;
  --panel-2: #0a763b;
  --line: #10c161;
  --fg: #f3fff8;
  --muted: #a1f7c8;
  --gold: #ffc530;
  --gold-2: #e8a000;
  --on-gold: #2b1d00;
  --strike: #51fb9e;
  --strike-2: #10c763;
  --t1: #58c8ff;
  --t2: #c79bff;
  --t3: #5fe3ae;
  --t4: #ff9f68;
  --t5: #ff7ac8;
  --t6: #c6e65c;
  --scrim: rgba(2,24,12,0.62);
  --stage: #053d1e;
  --front-1: #1ded7c;
  --front-2: #0ea955;
  --front-line: #7dfcb7;
  --font-display: 'Bowlby One', 'Arial Black', Impact, sans-serif;
  --font-cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(120% 80% at 50% -10%, var(--glow) 0%, transparent 62%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  padding-inline: 16px;
  padding-block: 12px 36px;
}
.app { max-width: 1200px; margin-inline: auto; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 6px 16px; }
.brand { font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 36px); line-height: 1; color: var(--gold); letter-spacing: 0.02em; text-shadow: 0 2px 0 var(--gold-2), 0 5px 0 var(--deep); margin: 0; font-weight: 400; }
.top-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tabs { display: flex; background: var(--deep); border: 2px solid var(--line); border-radius: 999px; padding: 3px; }
.tab { appearance: none; border: 0; background: none; color: var(--muted); font: 700 17px/1 var(--font-cond); letter-spacing: 0.06em; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; cursor: pointer; }
.tab[aria-current="page"] { background: var(--gold); color: var(--on-gold); }
.tabs a { display: inline-flex; align-items: center; text-decoration: none; }
.chip { appearance: none; font: 700 15px/1 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg); background: var(--deep); border: 2px solid var(--line); border-radius: 999px; padding: 9px 14px; min-height: 40px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.audio-enable { position: fixed; bottom: 16px; right: 16px; z-index: 100; background: var(--gold); color: var(--on-gold); box-shadow: 0 4px 16px #0004; }
#view-play { position: relative; }
.start-countdown { position: absolute; inset: 0; z-index: 70; display: grid; place-content: center; gap: 12px; text-align: center; border-radius: 16px; background: #032514f5; color: #fff; pointer-events: none; font: 700 clamp(16px,3cqh,32px)/1.2 var(--font-cond); }
.start-countdown strong { color: var(--gold); font: 400 clamp(100px,25cqh,240px)/1 var(--font-display); }

/* ---------- Buttons ---------- */
.btn { appearance: none; font: 700 17px/1 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg); background: var(--panel-2); border: 2px solid var(--line); border-radius: 10px; padding: 12px 16px; min-height: 44px; cursor: pointer; }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn-gold { background: linear-gradient(180deg, #ffd652, var(--gold-2)); color: var(--on-gold); border-color: #fff0b8; }
.btn-strike { background: linear-gradient(180deg, var(--strike), var(--strike-2)); border-color: #9efcc9; color: #ffffff; }
.btn-ghost { background: transparent; }
kbd { font: 600 12px/1 var(--font-body); padding: 2px 6px; border-radius: 5px; border: 1px solid currentColor; opacity: 0.75; margin-left: 6px; text-transform: none; letter-spacing: 0; }

/* ---------- Scorebar ---------- */
.scorebar { display: grid; gap: 12px; }
.bank { background: var(--deep); border: 2px solid var(--gold); border-radius: 14px; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; }
.bank-label { font: 700 14px/1 var(--font-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.bank output { font: 400 clamp(40px, 6vw, 60px)/1 var(--font-display); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; }
.mult { display: flex; gap: 6px; }
.mult .chip { padding: 7px 12px; min-height: 34px; }
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.team { --tc: var(--t1); background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
.team { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "score gain"; }
.gain { grid-area: gain; font: 700 clamp(16px, 2.2vw, 22px)/1 var(--font-cond); color: var(--gold); align-self: end; padding-bottom: 6px; font-variant-numeric: tabular-nums; }
.team-name { font: 700 20px/1.1 var(--font-cond); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); background: transparent; border: 0; border-bottom: 2px solid var(--tc); padding: 2px 0 4px; width: 100%; min-width: 0; }
.team-score { font: 400 clamp(30px, 4.5vw, 46px)/1.1 var(--font-display); color: var(--tc); background: transparent; border: 0; padding: 0; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.team-score::-webkit-outer-spin-button, .team-score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-lock { grid-area: lock; padding: 8px 12px; min-height: 38px; font-size: 15px; }
.team.locked .btn-lock:disabled { opacity: 1; }
.team:not(.locked) .btn-lock { background: var(--deep); color: var(--fg); border-color: var(--gold); }
.slot.is-open .back { box-shadow: inset 0.9cqh 0 0 var(--oc, transparent); }

/* ---------- Question ---------- */
.qcard { margin-top: 14px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px 20px 16px; display: grid; gap: 6px; }
.qmeta { font: 700 14px/1 var(--font-cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.qtext { margin: 0; font: 700 clamp(24px, 4vw, 40px)/1.12 var(--font-cond); text-wrap: balance; }
.qtext.is-empty { color: var(--muted); font-weight: 600; }

/* ---------- Board ---------- */
.board-frame { margin-top: 16px; padding: 18px; border-radius: 22px; background-color: var(--deep); background-image: radial-gradient(circle at center, #fff6c9 0 2px, var(--gold) 3px 5px, transparent 6px); background-size: 24px 24px; background-repeat: space; }
.board { --slot-h: clamp(58px, 10vh, 92px); background: linear-gradient(180deg, #096935, #054120); border-radius: 10px; padding: 14px; display: grid; gap: 12px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), var(--slot-h)); grid-auto-flow: column; }
.board-empty { grid-column: 1 / -1; grid-row: 1 / -1; margin: 0; padding: 28px 12px; text-align: center; color: var(--muted); font: 600 20px/1.3 var(--font-cond); }
.slot { appearance: none; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit; cursor: pointer; perspective: 900px; display: block; height: var(--slot-h); min-width: 0; text-align: left; }
.board.locked .slot { cursor: default; }
.slot-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1); }
.slot.is-open .slot-inner { transform: rotateX(180deg); }
.face { position: absolute; inset: 0; display: flex; align-items: center; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.front { justify-content: center; gap: 14px; padding-inline: 14px; background: linear-gradient(180deg, var(--front-1), var(--front-2)); border: 2px solid var(--front-line); }
.slot:not(.is-open):hover .front { filter: brightness(1.14); }
.num { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--deep); color: var(--gold); display: grid; place-items: center; font: 400 24px/1 var(--font-display); }
.back { transform: rotateX(180deg); justify-content: space-between; gap: 12px; padding: 0 10px 0 18px; background: linear-gradient(180deg, #ffd652, #f0a800); color: var(--on-gold); border: 2px solid #fff0b8; }
.ans { font: 800 clamp(20px, 2.7vw, 32px)/1 var(--font-cond); text-transform: uppercase; letter-spacing: 0.03em; min-width: 0; overflow-wrap: anywhere; }
.pts { flex: none; min-width: 60px; padding: 7px 10px; border-radius: 8px; background: var(--deep); color: var(--gold); font: 800 clamp(22px, 2.6vw, 32px)/1 var(--font-cond); text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Deck ---------- */
.deck { margin-top: 16px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.strikes { appearance: none; background: none; border: 0; padding: 0; display: flex; gap: 6px; cursor: pointer; }
.sb { width: 36px; height: 36px; border-radius: 7px; border: 2px solid var(--line); background: var(--deep); color: transparent; display: grid; place-items: center; }
.sb svg { width: 20px; height: 20px; }
.sb.on { background: var(--strike); border-color: var(--strike-2); color: #ffffff; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 14px; }

/* ---------- X overlay ---------- */
.xflash { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 28px); background: var(--scrim); color: var(--strike); opacity: 0; pointer-events: none; }
.xflash svg { width: clamp(88px, 20vw, 240px); height: clamp(88px, 20vw, 240px); filter: drop-shadow(0 8px 0 var(--strike-2)); }
.xflash.show { animation: xpop 1.1s ease-out forwards; }
@keyframes xpop { 0% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1.06); } 22% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Edit ---------- */
.edit { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; min-width: 0; }
.panel { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
.panel h2 { margin: 0 0 12px; font: 700 22px/1.1 var(--font-cond); letter-spacing: 0.04em; text-transform: uppercase; }
.qlist { display: grid; gap: 6px; max-height: 58vh; overflow: auto; margin-bottom: 12px; }
.qitem { appearance: none; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; color: var(--fg); background: var(--deep); border: 2px solid transparent; border-radius: 10px; padding: 10px; font: inherit; cursor: pointer; }
.qitem.is-sel { border-color: var(--gold); }
.qi-n { font: 700 18px/1 var(--font-cond); color: var(--gold); text-align: center; }
.qi-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; font-size: 15px; }
.qi-c { font: 600 14px/1 var(--font-cond); color: var(--muted); white-space: nowrap; }
.label { display: block; font: 700 14px/1 var(--font-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.field { width: 100%; min-width: 0; background: var(--deep); border: 2px solid var(--line); color: var(--fg); border-radius: 10px; padding: 10px 12px; font: 500 16px/1.3 var(--font-body); }
.field:focus { border-color: var(--gold); outline: none; }
textarea.field { resize: vertical; min-height: 76px; line-height: 1.35; }
.arow { display: grid; grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) 84px 42px; gap: 8px; align-items: center; margin-bottom: 8px; }
.arow.head { margin-bottom: 4px; }
.arow.head span { font: 700 13px/1 var(--font-cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.an { font: 700 18px/1 var(--font-cond); color: var(--gold); text-align: center; }
.a-p { text-align: right; }
.icon-btn { appearance: none; width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--line); background: var(--deep); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row + .row { margin-top: 12px; }
.help { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.msg { color: var(--gold); font-size: 14px; min-height: 1.4em; margin: 10px 0 0; }
details.panel > summary { cursor: pointer; font: 700 22px/1.1 var(--font-cond); letter-spacing: 0.04em; text-transform: uppercase; }
details.panel[open] > summary { margin-bottom: 12px; }
#ioText { min-height: 220px; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; }
.invite-card { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 14px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel-2); margin-top: 12px; }
.invite-qr { flex: none; display: block; background: #fff; border-radius: 8px; max-width: 100%; }
.invite-details { flex: 1 1 260px; min-width: 0; display: grid; gap: 10px; }
.invite-details strong { font: 700 22px/1.1 var(--font-cond); }
.invite-details .tl-in { width: 100%; font-size: 14px; }

/* ---------- Jawaban tim ---------- */
.answers { margin-top: 24px; display: grid; gap: 12px; }
.ans-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ans-top h2 { margin: 0; font: 700 26px/1.1 var(--font-cond); letter-spacing: 0.05em; text-transform: uppercase; }
.ans-status { margin: 0; color: var(--muted); font-size: 14px; }
.ans-status.warn { color: var(--gold); }
.sheetbar { background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.sheetbar .row .field { flex: 1 1 260px; width: auto; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.acols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acol { --tc: var(--t1); background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; display: grid; gap: 8px; align-content: start; }
.ahead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--tc); padding-bottom: 6px; }
.aname { font: 700 20px/1.1 var(--font-cond); text-transform: uppercase; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.acount { font: 700 16px/1 var(--font-cond); color: var(--tc); }
.alist { margin: 0; padding: 0; list-style: none; counter-reset: a; max-height: 230px; overflow: auto; display: grid; gap: 4px; }
.alist li { counter-increment: a; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; font: 600 19px/1.15 var(--font-cond); overflow-wrap: anywhere; }
.alist li::before { content: counter(a); color: var(--tc); font-weight: 800; text-align: right; }
.alist li.hit { color: var(--gold); }
.alist li.hit b { font-weight: 800; }
.alist .answer-result { display: block; margin-top: 4px; font: italic 400 0.72em/1.4 var(--font-body); color: var(--muted); letter-spacing: normal; text-transform: none; }
.alist .answer-result + br { display: none; }
.alist li.lost, .alist li.dup { opacity: 0.5; text-decoration: line-through; }
.alist li.late { opacity: 0.4; font-style: italic; }
.alock { font: 700 0.75em/1 var(--font-cond); color: var(--gold); margin-left: 0.6em; letter-spacing: 0.06em; }
.aempty { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Phone ---------- */
@media (max-width: 820px) {
  .edit { grid-template-columns: minmax(0, 1fr); }
  .qlist { max-height: 240px; }
}
@media (max-width: 640px) {
  .teams { gap: 8px; }
  .team { padding-inline: 10px; }
  .team-name { font-size: 17px; }
  .board-frame { padding: 16px 12px; }
  .board { --slot-h: 60px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-rows: var(--slot-h); padding: 10px; gap: 8px; }
  .num { width: 38px; height: 38px; font-size: 20px; }
  .deck { gap: 14px; }
  .group .btn { flex: 1 1 auto; }
  .tabs { width: 100%; }
  .tab { flex: 1; }
  .arow { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 0.8fr) 64px 36px; gap: 6px; }
}
@media (max-width: 860px) {
  .teams, .acols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Layar Main 16:9, satu layar tanpa gulir (semua ukuran dalam cqh) ---------- */
.mode-play { overflow: hidden; padding: 0; }
.mode-play .viewport { height: 100%; display: grid; place-items: center; container-type: size; }
.mode-play .app { width: min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; max-width: none; margin: 0; container-type: size; display: flex; flex-direction: column; gap: 1cqh; overflow: hidden; background: var(--stage); box-shadow: 0 0 0 2px var(--line); }
.mode-play .app > * { margin-inline: 2cqh; }
.mode-play #view-play { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "q score" "board score" "deck score" "ans ans"; gap: 1cqh 1.6cqh; padding-bottom: 1.4cqh; }
.mode-play .app > .top { flex: none; margin-top: 1.2cqh; padding: 0; gap: 1.6cqh; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
.mode-play .brand { font-size: 3.6cqh; text-shadow: 0 0.35cqh 0 var(--gold-2); white-space: nowrap; }
.mode-play .top-right { gap: 1.2cqh; flex-wrap: nowrap; flex: none; }
.mode-play .chip { font-size: 2.3cqh; padding: 1cqh 2cqh; min-height: 0; }
.mode-play .tabs { padding: 0.3cqh; }
.mode-play .tab { font-size: 2.4cqh; padding: 1.1cqh 2.6cqh; }
.mode-play kbd { font-size: 1.6cqh; padding: 0.2cqh 0.6cqh; margin-left: 1cqh; }

.mode-play .scorebar { grid-area: score; display: flex; flex-direction: column; gap: 1cqh; min-height: 0; }
.mode-play .bank { flex: none; height: 11cqh; flex-wrap: nowrap; padding: 0 2.4cqh; gap: 2cqh; border-radius: 14px; justify-content: space-between; }
.mode-play .bank-label { font-size: 2.2cqh; }
.mode-play .bank output { font-size: 4.6cqh; min-width: 2.4ch; }
.mode-play .mult { gap: 1cqh; }
.mode-play .mult .chip { padding: 0.9cqh 1.8cqh; font-size: 2.3cqh; }
.mode-play .teams { flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1cqh; }
.mode-play .team { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "score gain"; align-content: center; align-items: center; gap: 0.5cqh; padding: 1cqh 1.6cqh; border-radius: 14px; min-height: 0; overflow: hidden; }
.mode-play .team-name { grid-area: name; font-size: 2.6cqh; padding: 0 0 0.4cqh; }
.mode-play .gain { font-size: 3.6cqh; padding-bottom: 0; align-self: center; }
.mode-play .team-score { grid-area: score; font-size: 7.2cqh; line-height: 1.05; }
.mode-play .btn-lock-unused { white-space: nowrap; font-size: 2.5cqh; padding: 1cqh 1.4cqh; min-height: 0; border-radius: 10px; line-height: 1; }

.mode-play .qcard { grid-area: q; height: 14cqh; margin: 0; padding: 1cqh 2.4cqh; gap: 0.4cqh; justify-content: center; border-radius: 14px; overflow: hidden; }
.mode-play .qmeta { font-size: 2cqh; }
.mode-play .qtext { font-size: 3.9cqh; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.mode-play .board-frame { grid-area: board; margin: 0; min-height: 0; padding: 2.6cqh; display: flex; border-radius: 3cqh; background-size: 3.2cqh 3.2cqh; background-image: radial-gradient(circle at center, #fff6c9 0 0.32cqh, var(--gold) 0.46cqh 0.78cqh, transparent 0.9cqh); }
.mode-play .board { --fs: min(3.4cqh, calc(15cqh / var(--rows, 4))); flex: 1; min-height: 0; padding: 1.6cqh; gap: 1.2cqh 1.6cqh; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), minmax(0, 1fr)); grid-auto-flow: column; grid-auto-rows: auto; border-radius: 10px; }
.mode-play .slot { height: 100%; min-height: 0; }
.mode-play .front { padding-inline: 2cqh; gap: 2cqh; }
.mode-play .num { width: calc(var(--fs) * 1.7); height: calc(var(--fs) * 1.7); font-size: calc(var(--fs) * 1.1); }
.mode-play .peek { font-size: calc(var(--fs) * 0.85); }
.mode-play .back { padding: 0 1.2cqh 0 2.4cqh; gap: 1.6cqh; }
.mode-play .ans { font-size: var(--fs); line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mode-play .pts { font-size: var(--fs); min-width: calc(var(--fs) * 2.2); padding: 0.2em 0.5em; }
.mode-play .board-empty { font-size: 3cqh; padding: 3cqh; align-self: center; }

.mode-play .deck { grid-area: deck; margin: 0; padding: 1.1cqh 1.6cqh; gap: 1cqh 1.2cqh; border-radius: 14px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.mode-play .deck .group { display: contents; }
.mode-play .deck > .group > * { grid-column: span 4; }
.mode-play .deck .btn, .mode-play .deck .chip { font-size: 2.3cqh; letter-spacing: 0.03em; white-space: nowrap; padding: 1.4cqh 0.6cqh; min-height: 0; border-radius: 10px; line-height: 1; }


.mode-play #btnLockAll { order: 1; }
.mode-play #btnRevealAll { order: 2; }
.mode-play #btnCloseAll { order: 3; }
.mode-play #btnPrev { order: 4; }
.mode-play #btnPeek { order: 5; }
.mode-play #btnNext { order: 6; }
.mode-play .sb { width: 5cqh; height: 5cqh; }
.mode-play .sb svg { width: 3cqh; height: 3cqh; }

.mode-play .answers { grid-area: ans; margin: 0; height: 21cqh; min-height: 0; gap: 0.6cqh; display: flex; flex-direction: column; }
.mode-play .ans-top { flex: none; flex-wrap: nowrap; gap: 2cqh; align-items: center; }
.mode-play .ans-top h2 { font-size: 3cqh; white-space: nowrap; }
.mode-play .ans-status { flex: 1; min-width: 0; font-size: 2cqh; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-play .acols { flex: 1; min-height: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 1cqh; }
.mode-play .acol { grid-template-rows: auto minmax(0, 1fr); padding: 0.9cqh 1.4cqh; gap: 0.5cqh; border-radius: 12px; min-height: 0; overflow: hidden; }
.mode-play .aname { font-size: 2.3cqh; }
.mode-play .acount { font-size: 2.1cqh; }
.mode-play .alist { align-content: start; gap: 0.2cqh; max-height: none; min-height: 0; overflow: auto; }
.mode-play .alist li { grid-template-columns: 3cqh minmax(0, 1fr) auto; font-size: 2.4cqh; line-height: 1.15; }
.mode-play .aempty { font-size: 2cqh; }
@media (prefers-reduced-motion: reduce) {
  .slot-inner { transition: none; }
  .xflash.show { animation: none; opacity: 1; }
}

/* ===== Tema: Run Festival 2026 (merah menyala, tekstur butiran, huruf putih tebal) ===== */
:root {
  --bg: #10cb66; --glow: #33fa8e; --deep: #032b15; --panel: #064f27; --panel-2: #0a753b; --line: #1ded7c;
  --fg: #ffffff; --muted: #c8fee1;
  --gold: #ffffff; --gold-2: #e8e8e8; --on-gold: #03873f;
  --stage: #0c8f48; --front-1: #04361b; --front-2: #02170c; --front-line: #6cfbad;
  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
}
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150'%3E%3Cg fill='%23ffffff' fill-opacity='.07'%3E%3Cpath d='M0 150V105h40V80h50v30h30V60h45v50h40V90h60v60zM330 150V95h55V70h40v40h35V85h50v65zM640 150V110h45V75h40v35h30V95h55v55zM880 150V100h50V65h45v40h40V85h60v65zM1130 150V108h40v42z'/%3E%3Cpath d='M590 150V50h12V30h6V12h-4l4-10 4 10h-4v18h6v20h12v100z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(70% 38% at 12% -4%, #076b35 0 62%, transparent 63%), radial-gradient(60% 30% at 96% 36%, #0d9f4f 0 60%, transparent 61%), radial-gradient(75% 34% at 8% 104%, #076b35 0 62%, transparent 63%), radial-gradient(120% 80% at 50% -10%, var(--glow) 0%, transparent 62%);
  background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: bottom center, center, center, center, center;
  background-size: 1200px 150px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 6px; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(90deg, #ffffff 0 40px, #021a0d 40px 80px); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.9 -0.78'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 320px 320px; }
.brand { letter-spacing: 0.05em; text-transform: uppercase; transform: skewX(-8deg); transform-origin: left center; color: #ffffff; text-shadow: 0 2px 0 #037738, 0 5px 0 #032613; }
.btn-gold { background: linear-gradient(180deg, #ffffff, #ececec); border-color: #ffffff; color: var(--on-gold); }
.board-frame, .mode-play .board-frame { background-image: repeating-conic-gradient(#ffffff 0% 25%, #02130a 0% 50%) !important; }
.board { background: repeating-linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,0.4) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(180deg, #12e472, #0da753); }
.board[data-cols="1"] { background: linear-gradient(180deg, #12e472, #0da753); }
.peek { color: #d1fee5; }
.back { background: linear-gradient(180deg, #ffffff, #ececec); color: #032b15; border-color: #ffffff; }
.team-name, .aname { letter-spacing: 0.08em; }
.top { position: relative; }
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }
.mode-play .brand { text-shadow: 0 0.3cqh 0 rgba(0,0,0,.45); }

/* ---- JRF 2026 palette: merah #14ec76 + biru kobalt ---- */
:root { --bg:#00b050; --glow:#3be58a; --blue:#008a3e; --blue-2:#00a049; --on-gold:#00a049; --stage:#00b050; --line:#4fe08f; }
body::before { background: repeating-linear-gradient(90deg, #00b050 0 25%, #ffffff 25% 50%, #008a3e 50% 75%, #00b050 75% 100%); height: 7px; }
.logos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; pointer-events: none; }
.logos img { width: auto; image-rendering: high-quality; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); display: block; }
.logo-ptpn { height: 44px; }
.logo-jrf { height: 34px; }
.logo-sep { width: 2px; align-self: stretch; margin-block: 4px; background: rgba(255,255,255,.55); border-radius: 2px; }
.mode-play .logo-ptpn { height: 6.4cqh; }
.mode-play .logo-jrf { height: 5.8cqh; }
.mode-play .logos { gap: 1.6cqh; }
@media (max-width: 900px) { .logos { display: none; } }
.tab[aria-selected="true"] { background: linear-gradient(180deg, #14ec76, #0eae57) !important; color: #ffffff !important; border-color: #ffffff !important; }
.btn-gold { background: linear-gradient(180deg, #14ec76, #0eae57) !important; color: #ffffff !important; border-color: #ffffff !important; }
.back { background: linear-gradient(180deg, #ffffff, #e8fdf2) !important; color: #10c763 !important; }
.chip[aria-pressed="true"] { background: #ffffff; color: #10c763; }
.team-name, .aname { }
.board { background: repeating-linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(255,255,255,.45) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px) 100%), linear-gradient(180deg, #2bee84, #10cb65) !important; }
.board[data-cols="1"] { background: linear-gradient(180deg, #2bee84, #10cb65) !important; }
.qcard { box-shadow: inset 6px 0 0 #0eae57; }
body { background-image:
  radial-gradient(circle at 6% 96%, rgba(255,255,255,.16) 0 17%, transparent 17.4%),
  radial-gradient(circle at 98% 8%, rgba(255,255,255,.13) 0 14%, transparent 14.4%),
  radial-gradient(ellipse at 50% 0%, rgba(94,251,165,.45), transparent 60%),
  linear-gradient(180deg, #14ec76, #10c562) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: center !important; }

.logos { gap: 10px; }
.logos .logo-ptpn { height: 40px; } .logos .logo-jrf { height: 28px; } .logos .logo-team { height: 34px; }
.mode-play .logos { gap: 1.1cqh; }
.mode-play .logos .logo-ptpn { height: 6cqh; } .mode-play .logos .logo-jrf { height: 4.2cqh; } .mode-play .logos .logo-team { height: 5cqh; }
@media (max-width: 1100px) { .logos .logo-team, .logos .logo-team + .logo-sep { display: none; } .logos .logo-jrf + .logo-sep { display: none; } }

.mq { width: 220px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000000 10%, #000000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000000 10%, #000000 90%, transparent); }
.mq-track { display: flex; align-items: center; width: max-content; animation: mqmove 45s linear infinite; }
.mq-i { height: 30px; width: auto; margin-right: 22px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); image-rendering: high-quality; }
@keyframes mqmove { to { transform: translateX(-50%); } }
.mode-play .mq { width: auto; }
.top .logos { position: static; transform: none; flex: 1 1 0; min-width: 0; justify-content: flex-start; margin-inline: 22px 14px; }
.top .logos > * { flex: none; }
.top .logos > .mq { flex: 1 1 0; min-width: 0; width: auto; }
.mode-play .top .logos { margin-inline: 2.4cqh 1.6cqh; }
.mode-play .mq-i { height: 4.6cqh; margin-right: 3cqh; }
@media (max-width: 1100px) { .mq, .mq + .logo-sep, .logo-jrf + .logo-sep { display: none; } }
@media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

.logo-event { display: flex; align-items: center; gap: 0.5em; height: 30px; color: #ffffff; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; text-transform: uppercase; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.logos .logo-event { height: 30px; }
.logo-event .jrf-emblem { height: 100%; width: auto; filter: none; }
.logo-event .jrf-text { font-size: 10px; line-height: 1.05; letter-spacing: 0.02em; white-space: nowrap; }
.mode-play .logos .logo-event { height: 4.6cqh; }
.mode-play .logo-event .jrf-text { font-size: 1.62cqh; }
.chip#btnResetTop[data-armed="1"] { background: #ffffff; color: #10c361; border-color: #ffffff; }

.qcard { position: relative; }
.timer { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 4px; cursor: default; user-select: none; }
.timer.is-idle { cursor: pointer; }
.timer .tn { font: 800 40px/1 var(--font-cond); color: #ffffff; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.timer .tb { width: 64px; height: 6px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.28); }
.timer .tb b { display: block; height: 100%; width: 100%; background: #ffffff; transition: width .1s linear; }
.timer .tl { font: 700 11px/1 var(--font-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.timer.is-idle .tn { opacity: .65; }
.timer.is-warn .tn { color: #ffd23f; animation: tpulse .5s ease-in-out infinite alternate; }
.timer.is-warn .tb b { background: #ffd23f; }
.timer.is-lock .tn, .timer.is-done .tn { color: #ffd23f; }
.timer.is-lock .tb b, .timer.is-done .tb b { background: #ffd23f; }
@keyframes tpulse { to { transform: scale(1.12); } }
.mode-play .qcard { padding-right: 15cqh; }
.mode-play .timer { right: 2.2cqh; gap: 0.5cqh; }
.mode-play .timer .tn { font-size: 6.4cqh; }
.mode-play .timer .tb { width: 8.6cqh; height: 0.9cqh; }
.mode-play .timer .tl { font-size: 1.5cqh; }
@media (prefers-reduced-motion: reduce) { .timer.is-warn .tn { animation: none; } }

.atime { display: inline-block; font: 600 12px/1.1 var(--font-cond); letter-spacing: .06em; color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; margin-top: 1px; }
.ahid { font-style: italic; opacity: .85; }
.acol.is-hidden .acount { opacity: .6; }
.mode-play .atime { font-size: 1.55cqh; }
#btnStart { display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; padding: 10px 22px; }
.prestart #btnStart { display: block; }
.prestart .timer { display: none; }
.prestart .slot { visibility: hidden; }
.prestart .deck { opacity: .4; pointer-events: none; }
.prestart .qtext { opacity: .8; }
.mode-play #btnStart { right: 2.2cqh; font-size: 3.2cqh; padding: 1.3cqh 2.6cqh; line-height: 1; }
.mode-play .prestart .qcard, .mode-play.prestart .qcard { padding-right: 20cqh; }
.mode-play .alock { display: none; }
.mode-play .alist li { font-size: 2.1cqh; line-height: 1.08; }
.mode-play .atime { font-size: 1.4cqh; margin-top: 0; }
.mode-play .ahead { padding-bottom: 0.4cqh; }
.atime { font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #e7fef1; }
.mode-play .atime { font-size: 2.1cqh; line-height: 1.05; }
.atag { color: #ffd23f; text-transform: uppercase; letter-spacing: .08em; font-style: normal; }
.mode-play .atag { font-size: 1.5cqh; }

.app { position: relative; }
.ov { position: absolute; inset: 0; z-index: 80; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 75%, #4ffa9d 0%, #10c562 40%, #07592c 100%); }
.ov[hidden], .ov [hidden] { display: none !important; }
.ov-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.ov-rays { position: absolute; left: 50%; top: 70%; width: 260cqh; height: 260cqh; margin: -130cqh 0 0 -130cqh; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.17) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000000 12%, transparent 62%); mask-image: radial-gradient(circle, #000000 12%, transparent 62%); animation: ovspin 50s linear infinite; }
@keyframes ovspin { to { transform: rotate(360deg); } }
.ov-panel { position: relative; z-index: 3; width: 74cqh; max-width: 90%; background: rgba(3,43,21,.82); border: 0.5cqh solid #ffffff; border-radius: 2cqh; padding: 3.4cqh 4cqh; text-align: center; box-shadow: 0 2cqh 6cqh rgba(0,0,0,.5); }
.ov-kicker { font: 700 2cqh/1 var(--font-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ov-title { margin: 1cqh 0 1.2cqh; font: 400 7.6cqh/1 var(--font-display); text-transform: uppercase; color: #ffd23f; text-shadow: 0 0.6cqh 0 rgba(0,0,0,.45); }
.ov-sub { margin: 0 0 2cqh; font: 600 2.6cqh/1.25 var(--font-cond); color: #ffffff; }
.ov-rank { list-style: none; margin: 0 0 2.6cqh; padding: 0; display: grid; gap: 0.8cqh; text-align: left; }
.ov-rank li { display: grid; grid-template-columns: 4.5cqh 1fr auto; align-items: center; gap: 1.4cqh; background: rgba(255,255,255,.08); border-left: 0.8cqh solid var(--tc); border-radius: 1cqh; padding: 0.9cqh 1.6cqh; font: 700 3cqh/1 var(--font-cond); text-transform: uppercase; letter-spacing: .04em; }
.ov-rank li b { color: var(--tc); font-size: 3.4cqh; text-align: center; }
.ov-rank li em { font-style: normal; color: #ffd23f; font-variant-numeric: tabular-nums; }
.ov-rank li.tie em { color: #b0fdd3; }
.ov-actions { display: flex; gap: 1.6cqh; justify-content: center; flex-wrap: wrap; position: relative; z-index: 6; }
.ov-actions .btn { font-size: 2.6cqh; padding: 1.5cqh 3cqh; min-height: 0; }
.ov-podium { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 3.6cqh 4cqh 3cqh; }
.ov-win { position: relative; z-index: 4; margin: 0; font: 400 8.6cqh/1 var(--font-display); text-transform: uppercase; text-align: center; color: #ffd23f; text-shadow: 0 0.7cqh 0 #03873f, 0 1.4cqh 2cqh rgba(0,0,0,.45); animation: ovpop .8s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ovpop { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pod { position: relative; z-index: 4; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2.2cqh; margin-top: 1cqh; }
.pc { display: grid; justify-items: center; align-content: end; width: 40cqh; }
.crown { width: 10cqh; height: auto; margin-bottom: -0.6cqh; filter: drop-shadow(0 0.6cqh 0.8cqh rgba(0,0,0,.4)); animation: crownbob 1.4s ease-in-out infinite alternate 3.6s, ovpop .6s cubic-bezier(.2,1.4,.4,1) 3.2s both; }
@keyframes crownbob { to { transform: translateY(-1cqh) rotate(-3deg); } }
.pwho { display: grid; justify-items: center; gap: 0.5cqh; margin-bottom: 1.2cqh; animation: ovpop .6s cubic-bezier(.2,1.4,.4,1) both; }
.pw { max-width: 40cqh; padding: 0.8cqh 2.2cqh; border-radius: 1.2cqh; background: rgba(2,20,10,.8); border: 0.4cqh solid var(--tc, #ffffff); font: 400 4.2cqh/1.05 var(--font-display); text-transform: uppercase; text-align: center; color: #ffffff; text-shadow: 0 0.3cqh 0 rgba(0,0,0,.5); }
.pw.none { border-color: transparent; background: transparent; opacity: .5; }
.ps { font: 800 3.4cqh/1 var(--font-cond); letter-spacing: .06em; text-transform: uppercase; color: #ffffff; text-shadow: 0 0.3cqh 0 rgba(0,0,0,.45); }
.pstep { width: 100%; display: grid; place-items: center; transform-origin: bottom; border-radius: 1.4cqh 1.4cqh 0 0; box-shadow: inset 0 0.8cqh 0 rgba(255,255,255,.45), inset 0 -1cqh 0 rgba(0,0,0,.18), 0 1.6cqh 3cqh rgba(0,0,0,.4); animation: stepup .9s cubic-bezier(.2,1,.3,1) both; }
@keyframes stepup { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
.pstep b { font: 400 14cqh/1 var(--font-display); color: rgba(2,58,27,.78); text-shadow: 0 0.5cqh 0 rgba(255,255,255,.4); }
.r1 .pstep { height: 30cqh; background: linear-gradient(180deg, #ffe27a, #e8a000); }
.r2 .pstep { height: 21cqh; background: linear-gradient(180deg, #f1fef7, #7cf4b3); }
.r3 .pstep { height: 14cqh; background: linear-gradient(180deg, #f0b27a, #b9692b); }
.r3 .pstep b { font-size: 10cqh; } .r2 .pstep b { font-size: 12cqh; }
.ov-others { position: relative; z-index: 4; display: flex; gap: 2.4cqh; flex-wrap: wrap; justify-content: center; margin: 1.2cqh 0 1.4cqh; font: 700 2.2cqh/1 var(--font-cond); letter-spacing: .08em; text-transform: uppercase; color: #e7fef1; }
.ov-others:empty { display: none; }
.ov-podium .ov-actions .btn { opacity: .85; }
.ball { position: absolute; z-index: 2; bottom: -26cqh; width: 11cqh; height: 13.5cqh; border-radius: 50% 50% 48% 48%; animation: ovrise var(--d, 11s) linear infinite; animation-delay: var(--dl, 0s); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 32%), var(--bc, #ffd23f); box-shadow: inset -1.2cqh -1.4cqh 2cqh rgba(0,0,0,.22); }
.ball::after { content: ""; position: absolute; left: 50%; top: 99%; width: 0.25cqh; height: 12cqh; background: rgba(255,255,255,.6); }
@keyframes ovrise { 0% { transform: translateY(0) translateX(0) rotate(-4deg); } 50% { transform: translateY(-75cqh) translateX(2.4cqh) rotate(4deg); } 100% { transform: translateY(-160cqh) translateX(-1.6cqh) rotate(-4deg); } }
.ov-toast, #ovToast { position: absolute; left: 50%; bottom: 3cqh; transform: translate(-50%, 4cqh); z-index: 120; background: #ffffff; color: #03873f; font: 800 2.4cqh/1.2 var(--font-cond); letter-spacing: .04em; text-transform: uppercase; padding: 1.3cqh 2.6cqh; border-radius: 1.2cqh; box-shadow: 0 1cqh 3cqh rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 90%; text-align: center; }
#ovToast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ov-rays, .ball, .crown { animation: none; } .ball { display: none; } }

.logos .logo-ptpn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: auto; }
.logos .logo-ptpn .ptpn-swirl { height: 62%; width: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.logo-ptpn .ptpn-text { font: 800 12px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #ffffff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.mode-play .logos .logo-ptpn { gap: 0.25cqh; }
.mode-play .logo-ptpn .ptpn-text { font-size: 2.15cqh; }

.fx-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fx-i { position: absolute; bottom: -14cqh; width: 11cqh; height: 11cqh; opacity: 0; animation: fxRise var(--d, 7s) linear forwards; filter: drop-shadow(0 .6cqh 1cqh rgba(0,0,0,.45)); }
.fx-i svg { width: 100%; height: 100%; display: block; animation: fxSway 1.6s ease-in-out infinite alternate; }
.fx-i.big { width: 15cqh; height: 15cqh; }
@keyframes fxRise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(-125cqh) scale(1.05); opacity: 0; } }
@keyframes fxSway { from { transform: rotate(-12deg) translateX(-1.5cqh); } to { transform: rotate(12deg) translateX(1.5cqh); } }
@media (prefers-reduced-motion: reduce) { .fx-layer { display: none; } }

[hidden]{display:none!important}body{margin:0}.auth{max-width:460px;margin:8vh auto}.auth form{display:grid;gap:12px}.field:focus-visible{outline:3px solid var(--gold);outline-offset:2px}select.field{width:auto}#teamLinks .field{flex:1 1 220px;width:auto}#view-edit{padding-bottom:24px}button,input,select{touch-action:manipulation}@media(max-width:700px){.mode-play{overflow:auto;padding:12px}.mode-play .viewport{height:auto;display:block;container-type:normal}.mode-play .app{width:100%;aspect-ratio:auto;container-type:normal;display:block;overflow:visible}.mode-play .app>.top{flex-wrap:wrap;margin:0 0 14px}.mode-play .brand{font-size:24px}.mode-play .top-right{flex-wrap:wrap}.mode-play .chip,.mode-play .tab{font-size:15px;padding:10px;min-height:44px}.mode-play #view-play{display:flex;flex-direction:column;gap:12px}.mode-play .scorebar{order:2}.mode-play .qcard{height:auto;padding:16px}.mode-play .qmeta{font-size:14px}.mode-play .qtext{font-size:28px;display:block}.mode-play .board-frame{padding:16px}.mode-play .board{display:grid;grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:8px;padding:10px}.mode-play .slot{height:64px}.mode-play .num{width:38px;height:38px;font-size:22px}.mode-play .ans,.mode-play .pts{font-size:24px}.mode-play .peek{font-size:20px}.mode-play .deck{display:flex;padding:12px}.mode-play .deck .group{display:flex;flex-wrap:wrap}.mode-play .deck .btn,.mode-play .deck .chip{font-size:15px;padding:12px;min-height:44px}.mode-play .teams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.mode-play .team{padding:12px}.mode-play .team-name{font-size:18px;min-height:44px}.mode-play .team-score{font-size:38px;min-height:44px}.mode-play .gain{font-size:20px}.mode-play .answers{order:3;height:auto}.mode-play .ans-top{flex-wrap:wrap}.mode-play .ans-top h2{font-size:22px}.mode-play .ans-status{font-size:14px;white-space:normal;text-align:left}.mode-play .acols{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-play .acol{padding:12px}.mode-play .aname{font-size:18px}.mode-play .acount,.mode-play .aempty{font-size:14px}.mode-play .alist li{font-size:18px;grid-template-columns:24px 1fr auto}.arow{grid-template-columns:24px 1fr 70px 44px}.arow .a-al{grid-column:2/-1;grid-row:2}.arow.head{display:none}.icon-btn{height:44px;width:44px}.top-right{width:100%}.tabs{width:auto}}
.btn-strike{background:linear-gradient(180deg,#b81f2d,#8c1424)}

:root { --line: #67d69a; }
.peek { color: var(--deep); opacity: 1; }
.btn-strike { color: var(--fg); }
.ov { background: radial-gradient(circle at 50% 75%, #096331, #053b1e); }
.ov-rays { opacity: .3; }
.ov .pw { overflow-wrap: anywhere; }
.ov .ps { color: var(--fg); }
.ov .pwho { max-width: 100%; }
.auth { padding: 24px; }
.auth .brand { line-height: 1.2; }
@media (max-width: 700px) {
  .mode-play .qcard { padding-right: 100px; min-height: 140px; }
  .mode-play .timer { right: 16px; gap: 5px; }
  .mode-play .timer .tn { font-size: 40px; }
  .mode-play .timer .tb { width: 60px; height: 6px; }
  .mode-play .timer .tl { font-size: 12px; }
  .mode-play #btnStart { right: 12px; font-size: 18px; min-height: 44px; padding: 10px; }
  .mode-play .prestart .qcard { padding-right: 100px; }
  .mode-play .atime { font-size: 16px; }
  .mode-play .gain { font-size: 20px; }
  .ov { position: fixed; overflow: auto; min-height: 100dvh; container-type: normal; }
  .ov-rays, .ov .ball { display: none; }
  .ov-panel { width: calc(100% - 24px); max-width: 480px; padding: 20px; border-width: 3px; border-radius: 16px; margin: 12px; }
  .ov-kicker { font-size: 14px; }
  .ov-title { font-size: 32px; margin: 12px 0; }
  .ov-sub { font-size: 18px; }
  .ov-rank { gap: 8px; margin-bottom: 20px; }
  .ov-rank li { grid-template-columns: 24px minmax(0,1fr) auto; font-size: 18px; padding: 10px; gap: 10px; border-left-width: 5px; }
  .ov-rank li b { font-size: 20px; }
  .ov-actions { gap: 10px; }
  .ov-actions .btn { font-size: 18px; padding: 12px; min-height: 44px; }
  .ov-podium { position: relative; min-height: 100dvh; width: 100%; padding: 24px 12px; }
  .ov-win { font-size: 32px; }
  .pod { width: 100%; gap: 6px; margin-top: 20px; min-height: 300px; }
  .pc { width: 33%; min-width: 0; }
  .pw { max-width: 100%; font-size: 16px; padding: 8px; border-width: 2px; }
  .ps { font-size: 18px; }
  .pstep { width: 100%; }
  .r1 .pstep { height: 140px; }.r2 .pstep { height: 100px; }.r3 .pstep { height: 70px; }
  .pstep b { font-size: 38px; }
  .ov-others { font-size: 16px; margin: 16px 0; }
  .mode-play .peek { color: var(--deep); }
}
@media (prefers-reduced-motion: reduce) {
  .ov *, .mq-track { animation: none !important; transition: none !important; }
}

/* Green and white follow the supplied stage; deeper label greens preserve legibility. */
:root { --on-gold: #07552a; }
.btn-gold, .tab[aria-selected="true"] { color: #032713 !important; }
.back { color: #07552a !important; }
.chip[aria-pressed="true"] { color: #07552a; }
.timer.is-idle { cursor: default; }