/* Game Sandi — Kiosk. Dibaca dari jarak 2–3 m: tipe besar, kontras tinggi. */
:root {
  --bg: #0d1712;
  --bg-2: #13221a;
  --panel: #182b21;
  --line: #2a4436;
  --paper: #efe6cf;
  --paper-ink: #1c241f;
  --ink: #f3eedf;
  --muted: #9fb3a6;
  --red: #e0383e;
  --yellow: #f6c445;
  --green: #4cc38a;
  --wrong: #ff6b5e;
  --smoke: #d9dde0;
  --radius: 1.1rem;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  font-size: clamp(14px, 0.95vw + 0.55vh, 34px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 90% at 80% -10%, #1d3628 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--ink);
  font-family: var(--display);
  overflow: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
body.debug { cursor: default; }
#app { position: fixed; inset: 0; }

.screen { position: absolute; inset: 0; padding: 3.2vh 3vw; display: none; flex-direction: column; }
.screen.active { display: flex; animation: enter .45s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { opacity: 0; transform: translateY(1.2vh); } }

.eyebrow { font-family: var(--mono); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin: 0 0 .8rem; }
.title { font-size: 5.6rem; line-height: .9; letter-spacing: -.035em; margin: 0 0 1.4rem; font-weight: 800; }
.h2 { font-size: 3.2rem; line-height: 1; letter-spacing: -.025em; margin: 0 0 1.2rem; font-weight: 800; }
.lede { font-size: 1.45rem; line-height: 1.35; color: var(--ink); max-width: 30ch; margin: 0 0 1.4rem; }
.lede b { color: var(--yellow); font-weight: 700; }
.muted { color: var(--muted); font-size: 1.05rem; }

/* ---------- IDLE ---------- */
.idle-grid { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 4vw; align-items: center; min-height: 0; }
.idle-hero { min-width: 0; }
.idle-side { display: flex; flex-direction: column; gap: 2.4vh; min-height: 0; }
.qr-card { background: var(--paper); color: var(--paper-ink); border-radius: var(--radius); padding: 1.4rem; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 1.4rem; align-items: start; box-shadow: 0 2rem 4rem -2rem #000a; }
.qr-card img { grid-row: 1 / 4; width: 13rem; height: 13rem; image-rendering: pixelated; border-radius: .5rem; background: #fff; }
.qr-cta { font-size: 2rem; font-weight: 800; margin: .2rem 0 .4rem; letter-spacing: -.02em; }
.qr-code { font-family: var(--mono); font-size: 1.05rem; margin: 0; }
.qr-code span { display: block; font-size: 2.3rem; font-weight: 700; letter-spacing: .14em; color: var(--red); }
.qr-url { font-family: var(--mono); font-size: .62rem; color: #5b6b60; word-break: break-all; margin: .8rem 0 0; align-self: end; }
.demo { display: flex; align-items: center; gap: 2rem; margin-top: 2.4rem; }
.demo-fig svg { width: 10rem; height: 11rem; }
.demo-letter { font-size: 6rem; font-weight: 800; line-height: 1; width: 1.1em; text-align: center; color: var(--yellow); }
.demo-text p { margin: .2rem 0; color: var(--muted); font-size: 1rem; }
.demo-text .morse { font-size: 1.6rem; }
.privacy { margin: 0; font-size: .85rem; color: var(--muted); text-align: center; }

/* ---------- Leaderboard ---------- */
.board { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.4rem; min-height: 0; overflow: hidden; }
.board h3 { font-size: 1.1rem; margin: 0 0 .6rem; display: flex; justify-content: space-between; align-items: baseline; }
.board h3 small { font-family: var(--mono); color: var(--muted); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.board li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: baseline; font-size: 1.05rem; padding: .25rem 0; border-bottom: 1px dashed var(--line); }
.board li:last-child { border-bottom: 0; }
.board li .rk { font-family: var(--mono); color: var(--muted); }
.board li .sc { font-family: var(--mono); font-weight: 700; }
.board li.me { color: var(--yellow); }
.board li:nth-child(1) .rk { color: var(--yellow); }
.board li.empty { display: block; color: var(--muted); font-size: 1rem; border: 0; }

/* ---------- Split layouts ---------- */
.split { flex: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 3.5vw; align-items: center; min-height: 0; }
.pane-text { min-width: 0; }
.pane-stage { height: 100%; min-height: 0; display: flex; align-items: center; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; font-size: 1.2rem; line-height: 1.3; }
.steps li::before { content: counter(s); font-family: var(--mono); font-weight: 700; background: var(--yellow); color: var(--paper-ink); border-radius: 50%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-size: 1rem; }
.tut-row { display: flex; gap: 1.2rem; align-items: center; margin: .6rem 0 1.2rem; flex-wrap: wrap; }
.tut-row .fig svg { width: 6rem; height: 6.6rem; }
.tut-row p { margin: 0; font-size: 1.1rem; color: var(--muted); max-width: 18ch; }

/* Pratinjau mode (saat pemain baru terhubung, sebelum memilih) */
.mode-preview { width: 100%; display: grid; gap: 1rem; align-content: center; }
.pane-stage:has(> .stage) .mode-preview { display: none; }
.mp-card { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 1.3rem; align-items: center; padding: 1.3rem 1.5rem; border-radius: calc(var(--radius) * 1.3); background: linear-gradient(135deg, #1d3528, var(--panel)); border: 1px solid var(--line); box-shadow: 0 1.2rem 2.4rem -1.4rem #000c; animation: mpIn .6s cubic-bezier(.2,.8,.2,1) both; }
.mp-card:nth-child(2) { animation-delay: .12s; } .mp-card:nth-child(3) { animation-delay: .24s; }
.mp-card b { font-size: 1.6rem; letter-spacing: -.01em; }
.mp-card p { margin: .25rem 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.35; }
.mp-ic { width: 4.6rem; height: 4.6rem; border-radius: 1.2rem; background: #0d1b14; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); }
.mp-ic svg { width: 2.8rem; height: 2.8rem; }
.mp-tag { font-family: var(--mono); font-weight: 700; color: var(--yellow); font-size: 1.1rem; padding: .35rem .7rem; border-radius: .6rem; border: 1px solid #f6c44555; }
@keyframes mpIn { from { opacity: 0; transform: translateX(2rem); } }

/* ---------- Countdown ---------- */
#screen-countdown { align-items: center; justify-content: center; }
.countdown { font-size: 22rem; font-weight: 800; line-height: 1; color: var(--yellow); }
.countdown.pop { animation: pop .9s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } }

/* ---------- Question ---------- */
.qbar { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; margin-bottom: 2.4vh; }
.qbar-meta { font-family: var(--mono); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; gap: .8rem; align-items: center; }
.qbar-meta #q-num { color: var(--ink); font-weight: 700; }
.dot-sep { width: .35rem; height: .35rem; background: var(--muted); border-radius: 50%; }
.qbar-score { font-size: 1.2rem; }
.qbar-score b { font-family: var(--mono); font-size: 1.6rem; color: var(--yellow); }
.timer-wrap { display: flex; align-items: center; gap: 1rem; }
.timer { flex: 1; position: relative; height: 1.5rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.timer-fill { position: absolute; inset: 0; transform-origin: left; background: var(--green); transition: background .3s; }
.timer.low .timer-fill { background: var(--red); }
.timer-num { font-family: var(--mono); font-weight: 700; font-size: 2rem; min-width: 2.4ch; text-align: right; }
.timer-wrap:has(.low) .timer-num { color: var(--red); }

.qgrid { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5vw; min-height: 0; }
.qmain { display: flex; flex-direction: column; min-height: 0; }
.question { font-size: 3rem; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 2.2vh; font-weight: 800; text-wrap: balance; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.opt { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; transition: border-color .2s, background .2s, transform .2s; }
.opt .lbl { font-size: 2.6rem; font-weight: 800; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; background: var(--bg); border-radius: .7rem; color: var(--yellow); }
.opt .txt { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.opt .fig svg { width: 6.4rem; height: 7rem; display: block; }
.opt .code { grid-column: 2 / 4; }
.opt.morse-only .txt { display: none; }
.opt.selected { border-color: var(--yellow); background: #2a3a1f; transform: scale(1.02); }
.opt.correct { border-color: var(--green); background: #173a29; }
.opt.wrong { border-color: var(--wrong); background: #3b1d1a; }
.opt-wide { grid-column: 1 / -1; }

.answer-row { margin-top: auto; padding-top: 2vh; display: flex; align-items: center; gap: 1.2rem; }
.answer-label { font-family: var(--mono); font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.answer-box { display: flex; gap: .6rem; }
.slot { width: 4.2rem; height: 5rem; border-radius: .8rem; background: var(--paper); color: var(--paper-ink); font-size: 3.2rem; font-weight: 800; display: grid; place-items: center; position: relative; }
.slot.empty { background: transparent; border: 3px dashed var(--line); color: transparent; }
.slot.fresh { animation: slotIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes slotIn { from { transform: translateY(-1.4rem) scale(1.3); opacity: 0; filter: blur(6px); } }
.answer-box.confirming .slot:not(.empty) { box-shadow: 0 0 0 .3rem var(--yellow); }
.answer-box.confirming::after { content: "mengunci…"; font-family: var(--mono); color: var(--yellow); align-self: center; font-size: .9rem; margin-left: .6rem; }
.answer-box.locked .slot:not(.empty) { box-shadow: 0 0 0 .3rem var(--ink); }

.qside { display: flex; flex-direction: column; gap: 1.4vh; min-height: 0; }
.stage-wrap { flex: 1; min-height: 0; display: flex; }
.guide { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; max-height: 42%; overflow: hidden; }
.guide:empty { display: none; }
.guide h4 { margin: 0 0 .5rem; font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 500; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .3rem .4rem; }
.guide-grid .g { text-align: center; font-size: .8rem; font-weight: 700; }
.guide-grid .g svg { width: 100%; height: 4rem; display: block; }
.mtable { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: .25rem .8rem; }
.mtable .morse { flex-wrap: nowrap; }
.mtable div { display: flex; gap: .5rem; align-items: center; font-size: .95rem; }
.mtable b { width: 1.1rem; }

/* Kode Morse visual */
.morse { display: inline-flex; gap: .28em; align-items: center; flex-wrap: wrap; row-gap: .4em; font-size: 1.2rem; vertical-align: middle; }
.morse i { display: inline-block; height: .42em; background: currentColor; border-radius: .21em; }
.morse i.d { width: .42em; }
.morse i.h { width: 1.3em; }
.morse .gap { width: .6em; }
.morse .wgap { width: 1.2em; border-left: 2px solid var(--muted); height: 1em; opacity: .6; margin: 0 .3em; }
.opt .morse { font-size: 1.5rem; color: var(--ink); }

/* ---------- Stage ---------- */
.stage { flex: 1; width: 100%; height: 100%; min-height: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: #0a120e; border: 1px solid var(--line); display: none; }
[data-stage-slot] > .stage { display: block; }
.stage > div { position: absolute; inset: 0; display: none; }
.stage.mode-flag .stage-flag, .stage.mode-smoke .stage-smoke, .stage.mode-morse_type .stage-morse { display: block; }
#flag-canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.pose-hud { position: absolute; left: 1rem; bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.ring { position: relative; width: 7rem; height: 7rem; background: #0d1712cc; border-radius: 50%; backdrop-filter: blur(6px); }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #ffffff22; stroke-width: 7; }
.ring-fg { fill: none; stroke: var(--yellow); stroke-width: 7; stroke-linecap: butt; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; }
.ring.locked .ring-fg { stroke: var(--green); }
.ring.del .ring-fg { stroke: var(--red); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; font-weight: 800; }
.ring span.small { font-size: 1.2rem; font-family: var(--mono); }
.pose-msg { margin: 0; background: #0d1712cc; padding: .5rem .9rem; border-radius: .6rem; font-size: 1.05rem; max-width: 22ch; backdrop-filter: blur(6px); }
#smoke-canvas { width: 100%; height: 100%; display: block; }
.smoke-code { position: absolute; top: 1rem; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 3rem; font-weight: 700; letter-spacing: .2em; color: var(--yellow); }
.smoke-msg { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; text-align: center; font-size: 1.15rem; margin: 0; }
.smoke-msg.warn { color: var(--wrong); font-weight: 700; }
.stage-morse { padding: 1.2rem 1.4rem; overflow: hidden; }
.stage-morse h4 { margin: 0 0 .8rem; font-family: var(--mono); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.stage-morse .locked-help { display: grid; place-items: center; height: 100%; text-align: center; color: var(--muted); font-size: 1.2rem; }
.stage-morse .locked-help b { display: block; font-size: 3.4rem; color: var(--ink); margin-bottom: .6rem; }
.stage-morse .mtable { font-size: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); row-gap: .5rem; }

/* ---------- Feedback ---------- */
.feedback { position: absolute; inset: 0; display: grid; place-items: center; background: #0d1712b0; backdrop-filter: blur(4px); }
.feedback[hidden] { display: none; }
.fb-card { text-align: center; animation: pop .6s cubic-bezier(.2,.8,.2,1); }
.fb-title { font-size: 8rem; font-weight: 800; margin: 0; line-height: 1; letter-spacing: -.04em; }
.fb-card.ok .fb-title { color: var(--green); }
.fb-card.no .fb-title { color: var(--wrong); }
.fb-points { font-family: var(--mono); font-size: 2.6rem; margin: 1rem 0 .4rem; color: var(--yellow); }
.fb-answer { font-size: 1.6rem; margin: 0; color: var(--ink); }

/* ---------- Result ---------- */
.res-score { font-size: 8rem; font-weight: 800; line-height: 1; margin: 0 0 1rem; color: var(--yellow); letter-spacing: -.04em; }
.res-score small { font-size: 1.6rem; color: var(--muted); margin-left: .6rem; letter-spacing: 0; }
.res-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .35rem; }
.res-list li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .8rem; font-size: 1.05rem; align-items: baseline; }
.res-list .ok { color: var(--green); }
.res-list .no { color: var(--wrong); }
.res-list .pts { font-family: var(--mono); }
#res-board { align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }

/* ---------- Banner & toast ---------- */
.banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; padding: .7rem 1.6rem; border-radius: 0 0 1rem 1rem; font-weight: 700; font-size: 1.1rem; z-index: 5; }
.toast { position: fixed; bottom: 4vh; left: 50%; transform: translateX(-50%); background: var(--paper); color: var(--paper-ink); padding: .9rem 1.6rem; border-radius: 1rem; font-weight: 700; font-size: 1.4rem; z-index: 6; box-shadow: 0 1rem 3rem #0008; animation: pop .4s; }
[hidden] { display: none !important; }

/* ---------- Portrait (layar tegak) ---------- */
@media (orientation: portrait) {
  :root { font-size: clamp(14px, 1.7vw + .3vh, 34px); }
  .idle-grid, .split { grid-template-columns: 1fr; align-content: center; }
  .qgrid { grid-template-columns: 1fr; align-content: start; }
  .split > .pane-stage:not(:has(> .stage)) { height: auto; }
  .split > .pane-stage { height: 50vh; }
  .qside { min-height: 45vh; }
  .title { font-size: 4.6rem; }
}