:root { color-scheme: dark; --page: #080b10; --text: #f6f6f4; --muted: #9298a7; --gold: #f5ce78; --gold-rgb: 245, 206, 120; --accent: 245, 206, 120; --ok: 90, 221, 173; --bad: 244, 104, 112; --neg: 177, 141, 248; --card: linear-gradient(160deg, #131a24, #0b1019 75%); }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; overflow: hidden; background: var(--page); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.55; }
body { isolation: isolate; }
/* A still arena backdrop stays off the input path and costs no animation frames. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('arena-background.svg') center bottom / cover no-repeat, radial-gradient(ellipse at 50% -15%, #a67e3b30, transparent 60%), radial-gradient(ellipse at 0% 50%, #287bb31c, transparent 45%), radial-gradient(ellipse at 100% 75%, #9b68231c, transparent 45%), #080b10; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; }
[tabindex="-1"]:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* One screen: header, the stage, footer. Only the panels inside scroll, if they must. */
.shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; max-width: 1360px; height: 100vh; height: 100dvh; margin: 0 auto; padding: 0 28px; }

/* Header (same brand treatment as Muka Depan MTA) */
.site-header { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 72px; border-bottom: 1px solid #ffffff12; }
.brand { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; width: clamp(240px, 34vw, 400px); height: 100%; isolation: isolate; text-decoration: none; }
.brand-location { color: #c7b78f; font: 600 9px/1.2 'DM Sans', sans-serif; letter-spacing: .28em; white-space: nowrap; }
.brand::before { content: ''; position: absolute; z-index: -1; inset: 4px -45px; pointer-events: none; background: radial-gradient(ellipse, #f5c76828, transparent 70%); }
.brand::after { content: ''; position: absolute; bottom: 0; left: -30px; right: -30px; height: 1px; background: linear-gradient(90deg, transparent, #f9d98bbf, transparent); box-shadow: 0 0 16px #f5ce7855; }
.brand-mark { position: relative; display: inline-block; color: var(--gold); font: italic 700 clamp(28px, 3.4vw, 42px)/1.1 'Barlow Condensed', sans-serif; letter-spacing: .045em; transform: scaleX(1.3); background: linear-gradient(110deg, #d69935 0%, #ffdc85 25%, #f6c65f 41%, #fffce9 48%, #fff 50%, #fff2b9 52%, #efb747 59%, #ffdc85 80%, #d69935 100%); background-size: 300% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px #ffd77966) drop-shadow(0 0 16px #eebf4544); animation: brand-shine 6s ease-in-out infinite; }
.brand-mark span { display: inline-block; margin-left: 2px; font-size: .72em; vertical-align: top; }
@keyframes brand-shine { 0%, 18% { background-position: 100% 50%; } 65%, 100% { background-position: 0% 50%; } }
.brand-name { color: #d4d5d5; font-size: 9px; font-weight: 600; line-height: 1.7; letter-spacing: .2em; }
.brand-name small { display: block; color: #8a8d96; font-size: 8px; letter-spacing: .16em; }
.head-tools { justify-self: end; display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; border: 1px solid #ffffff25; }
.lang button { min-width: 42px; padding: 8px 10px; border: 0; background: transparent; color: #a8adba; font: 600 11px/1 'Barlow Condensed', sans-serif; letter-spacing: .16em; cursor: pointer; }
.lang button[aria-pressed="true"] { background: rgba(var(--gold-rgb), .14); color: var(--gold); }

/* Shared type */
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
h1, h2 { margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border: 1px solid rgba(var(--accent), .42); border-radius: 0; background: rgba(var(--accent), .075); color: rgb(var(--accent)); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .25s, box-shadow .25s, border-color .25s, transform .08s; }
.btn svg { flex: none; width: 16px; height: 16px; transition: transform .25s; }
.btn:hover { background: rgba(var(--accent), .18); box-shadow: 0 0 20px rgba(var(--accent), .13); }
.btn:hover svg use[href="#arrow"] { transform: translateX(3px); }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.btn-gold { border-color: transparent; background: linear-gradient(110deg, #d69935, #ffdc85 45%, #efb747); color: #1a1205; font-weight: 700; }
.btn-gold:hover { background: linear-gradient(110deg, #e0a540, #ffe49a 45%, #f4c25a); box-shadow: 0 0 26px #f5ce7844; }
.btn-ghost { border-color: #ffffff22; background: transparent; color: #b4b9c5; }
.btn-ghost:hover { border-color: #ffffff44; background: #ffffff0a; box-shadow: none; }
.btn-wa { --accent: 37, 211, 102; }
.btn-big { min-height: 58px; padding: 14px 44px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.btn-big svg { width: 18px; height: 18px; }
.board-open, .board-close, .mobile-only { display: none; }

/* The stage: info | game | Top 100 */
.stage { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(290px, 350px); gap: 20px; min-height: 0; padding: 20px 0; }

/* Left: what this is */
.info { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.info h1 { font: 800 clamp(40px, 4vw, 58px)/.92 'Plus Jakarta Sans', sans-serif; letter-spacing: -.05em; }
.info h1 span { display: block; color: var(--gold); text-shadow: 0 0 40px #f5ce7833; }
.tagline { margin: 12px 0 0; color: #c9ccd4; font: 600 15px/1 'Barlow Condensed', sans-serif; letter-spacing: .3em; text-transform: uppercase; }
.my-best { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid #ffffff14; background: #0d121a; color: #8d94a3; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.my-best b { color: var(--text); font: 600 26px/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.cta { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 18px; border: 1px solid #f5ce7855; border-radius: 12px; background: radial-gradient(ellipse at 0% 0%, #f5ce7822, transparent 60%), linear-gradient(160deg, #18160f, #0d0f13 70%); color: inherit; text-decoration: none; transition: border-color .25s, box-shadow .25s; }
.cta .eyebrow { margin: 0; }
.cta b { font: 700 17px/1.25 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.cta-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--gold); font-size: 12px; font-weight: 700; }
.cta-link svg { width: 15px; height: 15px; transition: transform .25s; }
.cta:hover { border-color: #f5ce78aa; box-shadow: 0 0 30px #f5ce7818; }
.cta:hover .cta-link svg { transform: translateX(3px); }

/* Middle: the game */
.game { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; overflow-y: auto; padding: 22px clamp(18px, 3vw, 40px) 24px; border: 1px solid rgba(var(--gold-rgb), .32); border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb), .1), transparent 60%), var(--card); box-shadow: 0 8px 30px #0004; scrollbar-width: thin; scrollbar-color: #3a4152 transparent; transition: border-color .2s, box-shadow .2s; }
.game::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); box-shadow: 0 0 22px rgba(var(--gold-rgb), .9); }
.game.is-right { border-color: rgb(var(--ok)); box-shadow: 0 0 0 1px rgb(var(--ok)), 0 0 34px rgba(var(--ok), .22); }
.game.is-wrong { border-color: rgb(var(--bad)); box-shadow: 0 0 0 1px rgb(var(--bad)), 0 0 34px rgba(var(--bad), .22); }
/* HUD corners and a faint grid frame a quiet, opaque question area. */
.game { background: radial-gradient(ellipse at 50% 40%, #101620 30%, #10162000 85%), linear-gradient(#f5ce7806 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, #f5ce7806 1px, transparent 1px) 0 0 / 40px 40px, radial-gradient(ellipse at 50% 0%, #f5ce781a, transparent 65%), #0b1019; }
.game::after { content: ''; position: absolute; inset: 12px; pointer-events: none; background: linear-gradient(#f5ce7866, #f5ce7866) left top / 24px 2px, linear-gradient(#f5ce7866, #f5ce7866) left top / 2px 24px, linear-gradient(#f5ce7866, #f5ce7866) right top / 24px 2px, linear-gradient(#f5ce7866, #f5ce7866) right top / 2px 24px, linear-gradient(#f5ce7838, #f5ce7838) left bottom / 24px 2px, linear-gradient(#f5ce7838, #f5ce7838) left bottom / 2px 24px, linear-gradient(#f5ce7838, #f5ce7838) right bottom / 24px 2px, linear-gradient(#f5ce7838, #f5ce7838) right bottom / 2px 24px; background-repeat: no-repeat; }
.brand-mark { animation: none; }

.mt-top { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 620px; }
.mt-masa { display: inline-flex; align-items: center; gap: 6px; min-width: 66px; color: #e8eaee; font: 600 26px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; }
.mt-masa svg { width: 18px; height: 18px; color: var(--gold); }
.mt-masa small { color: var(--muted); font-size: 16px; }
.mt-bar { flex: 1; height: 6px; overflow: hidden; background: #ffffff14; }
.mt-bar > span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #d69935, #ffdc85); box-shadow: 0 0 12px rgba(var(--gold-rgb), .7); transition: width .1s linear; }
.game.is-last .mt-bar > span { background: rgb(var(--bad)); box-shadow: 0 0 12px rgba(var(--bad), .7); }
.game.is-last .mt-masa, .game.is-last .mt-masa svg { color: rgb(var(--bad)); }
.mt-skor { position: relative; display: inline-flex; align-items: baseline; gap: 8px; color: #8d94a3; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.mt-skor strong { min-width: 2ch; color: var(--gold); font: 600 32px/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; text-align: right; font-variant-numeric: tabular-nums; }
/* The points just earned rise from the score and fade. */
.mt-tambah { position: absolute; right: 0; top: -14px; color: rgb(var(--ok)); font: 700 17px/1 'Barlow Condensed', sans-serif; opacity: 0; pointer-events: none; }
.mt-tambah.is-up { animation: rise .7s ease-out; }
.mt-tambah.is-minus { color: rgb(var(--bad)); }
@keyframes rise { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-22px); } }
.mt-status { display: flex; flex: 0 0 28px; gap: 8px; align-items: center; justify-content: center; min-height: 28px; margin: 0; }
.mt-combo:not(:empty) { padding: 5px 11px; background: linear-gradient(110deg, #d69935, #ffdc85 45%, #efb747); color: #1a1205; font: 700 14px/1 'Barlow Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 0 18px #f5ce7844; }
.mt-neg { padding: 4px 10px; border: 1px solid rgba(var(--neg), .5); background: rgba(var(--neg), .14); color: rgb(var(--neg)); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

.mt-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 620px; text-align: center; }
.mt-ready { margin: 0; font: 800 clamp(48px, 6.5vw, 86px)/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.05em; }
.mt-ops { margin: -4px 0 0; color: var(--gold); font: 600 24px/1 'Barlow Condensed', sans-serif; letter-spacing: .5em; text-indent: .5em; text-shadow: 0 0 18px #f5ce7855; }
.mt-soalan { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 100%; height: clamp(64px, 12vh, 116px); margin: 0 0 clamp(16px, 4vh, 40px); font: 800 clamp(44px, 7vw, 96px)/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-soalan > span { display: inline-block; flex-shrink: 0; }
.mt-pilihan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.mt-pilih { position: relative; height: clamp(64px, 11vh, 92px); padding: 0 8px; border: 1px solid rgba(var(--gold-rgb), .38); background: rgba(var(--gold-rgb), .06); color: var(--text); font: 600 clamp(28px, 3.2vw, 40px)/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .08s; }
.mt-pilih kbd { position: absolute; left: 10px; top: 8px; color: #8d94a3; font: 600 11px/1 'DM Sans', sans-serif; }
@media (hover: hover) { .mt-pilih:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .14); box-shadow: 0 0 22px rgba(var(--gold-rgb), .15); } }
.mt-pilih:active { background: rgba(var(--gold-rgb), .22); }

/* Time up: the score remains visible after closing the details pop-up. */
.mt-end { gap: 22px; }
.end-score .eyebrow { margin-bottom: 4px; letter-spacing: .3em; }
.mt-besar { margin: 0; color: var(--gold); font: 700 clamp(64px, 10vh, 104px)/1 'Barlow Condensed', sans-serif; text-shadow: 0 0 40px #f5ce7844; }
.end-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.end-new { padding: 2px 8px; background: rgba(var(--ok), .14); border: 1px solid rgba(var(--ok), .45); color: rgb(var(--ok)); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.mt-stop { min-height: 38px; margin-top: 4px; padding: 8px 16px; }
.mt-stop svg { width: 14px; height: 14px; }
.end-note { max-width: 46ch; margin: 0; color: var(--muted); font-size: 14px; }
.end-note.is-ok { color: rgb(var(--ok)); font-weight: 600; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.finish-dialog { width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid #f5ce7866; border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, #f5ce7814, transparent 50%), #101620; color: var(--text); box-shadow: 0 24px 90px #0009; scrollbar-width: thin; }
.finish-dialog::backdrop { background: #03060bcc; }
.finish-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.finish-head .eyebrow { margin: 0; line-height: 1.8; }
.finish-head .eyebrow span { display: block; color: #b2a78c; font-size: 8px; letter-spacing: .2em; }
.finish-head .btn { padding: 8px; min-width: 40px; min-height: 40px; }
.finish-score { margin: 12px 0; text-align: center; }
.finish-score h2 { font: 800 28px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; }
.finish-score p { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.finish-score strong { color: var(--gold); font: 700 64px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; }
.join-intro { margin: 0 0 18px; color: #c2c6cf; font-size: 13px; text-align: center; }
.join-off { margin: 0 0 16px; color: var(--gold); font-size: 13px; text-align: center; }
.finish-later { width: 100%; margin-top: 10px; }
.field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.field label, .field legend { padding: 0; color: #c2c6cf; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.field legend { margin-bottom: 6px; }
.field input, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ffffff22; border-radius: 6px; background: #080c13; color: var(--text); font-size: 16px; transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 72px; max-height: 180px; }
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .15); }
.field-notes { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; }
.char-count { flex-shrink: 0; color: #9da5b5; font-size: 11px; }
.char-count.is-over { color: rgb(var(--bad)); font-weight: 600; }
#join-submit { width: 100%; }
.join-status:empty { display: none; }
.join-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.join-status p { margin: 0; }
.join-status.is-error { color: rgb(var(--bad)); font-weight: 600; }
.join-status.is-ok { margin-top: 0; padding: 12px 14px; border: 1px solid rgba(var(--ok), .4); background: rgba(var(--ok), .08); color: rgb(var(--ok)); font-weight: 600; }
.join-status .btn { --accent: var(--gold-rgb); min-height: 38px; padding: 8px 14px; }

/* Right: Top 100 */
.board-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .25); border-radius: 12px; background: var(--card); }
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid #ffffff14; }
.board-head .eyebrow { margin-bottom: 4px; }
.board-head h2 { font: 700 22px/1.1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; }
.board-close { min-height: 40px; padding: 8px 10px; }
.board-close svg { width: 18px; height: 18px; }
.board-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a4152 transparent; }
.board-empty { margin: 0; padding: 40px 22px; color: var(--muted); font-size: 13px; text-align: center; }
.board-list { margin: 0; padding: 4px 8px 8px; list-style: none; }
.board-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #ffffff0b; }
.board-list li:last-child { border-bottom: 0; }
.board-list li.is-me { background: rgba(var(--gold-rgb), .08); box-shadow: inset 2px 0 0 var(--gold); }
.b-pos { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff1a; color: #c2c6cf; font: 600 15px/1 'Barlow Condensed', sans-serif; }
.top-1 .b-pos { border-color: #f5ce78; background: #f5ce7826; color: #f5ce78; box-shadow: 0 0 16px #f5ce7844; }
.top-2 .b-pos { border-color: #cfd6e0; background: #cfd6e01c; color: #e3e8ef; }
.top-3 .b-pos { border-color: #d99a62; background: #d99a621f; color: #eab285; }
.b-who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.b-name { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.b-name b { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.b-name em { flex: none; padding: 1px 5px; background: var(--gold); color: #0a0d12; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.b-post { color: #aeb3bd; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.b-school { max-width: 100%; color: #c4ad7d; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.b-score { color: var(--gold); font: 600 24px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; }
.role-tag { display: inline-block; padding: 1px 6px; border: 1px solid rgba(var(--r), .35); background: rgba(var(--r), .1); color: rgb(var(--r)); font-size: 10px; font-weight: 600; white-space: nowrap; }
[data-role="tutor"] { --r: 244, 196, 96; }
[data-role="teacher"] { --r: 91, 205, 243; }
[data-role="smk"] { --r: 90, 221, 173; }
[data-role="uni"] { --r: 177, 141, 248; }
[data-role="public"] { --r: 246, 154, 102; }

/* Footer & toast */
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 2px 12px; border-top: 1px solid #ffffff0c; color: #6f788a; font-size: 10px; line-height: 1.5; }
.footer-motto { color: #a28d66; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; padding: 12px 18px; border: 1px solid #f5ce7866; background: #12161e; color: var(--gold); font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px #0008; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Narrower screens: the info column goes, the board becomes a drawer. */
@media (max-width: 1180px) {
  .stage { grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); }
  .info { display: none; }
  .mobile-only { display: inline-flex; }
}
@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
  .board-open, .board-close { display: inline-flex; }
  .board-panel { position: fixed; inset: 0; z-index: 20; border: 0; border-radius: 0; background: #0b1019; visibility: hidden; transform: translateY(100%); transition: transform .3s ease, visibility .3s; }
  .board-panel.is-open { visibility: visible; transform: none; }
  .board-head { padding: 16px 16px 12px; }
}
@media (max-width: 600px) {
  body { font-size: 14px; }
  .shell { padding-inline: 16px; }
  .site-header { grid-template-columns: 1fr auto; height: 62px; gap: 10px; }
  .brand-name { display: none; }
  .brand { justify-self: start; place-items: center start; width: auto; padding-left: 4px; }
  .brand::before { inset-inline: -20px; }
  .brand::after { left: 0; right: -10px; }
  .brand-mark { font-size: clamp(22px, 6.5vw, 30px); transform: scaleX(1.15); transform-origin: left center; }
  .brand-location { font-size: 7px; letter-spacing: .15em; }
  .board-open { min-height: 38px; padding: 8px 10px; }
  .lang button { min-width: 36px; padding: 8px; }
  .game { padding: 18px 14px 18px; gap: 10px; }
  .mt-top { gap: 10px; }
  .mt-pilihan { gap: 8px; }
  .finish-dialog { padding: 18px; }
  .end-actions .btn { flex: 1 1 calc(50% - 5px); }
  .site-footer { padding: 8px 2px 10px; font-size: 9px; }
  .footer-motto { display: none; }
}
@media (max-width: 380px) {
  .board-open span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}