/* ==========================================================================
   Brew Minigame kit - one stylesheet for every game (tone: teak, lacquer, ivory, gold leaf).
   Games add only board colours in public/game/game.css.
   Type scale (never other sizes): 12 / 14 / 16 / 20 / 28 px.
   ========================================================================== */

@font-face { font-family: "Plex Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-thai-400-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/plex-thai-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-thai-600-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/plex-thai-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Serif Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/serif-thai-600-thai.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Serif Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/serif-thai-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------------------------------------------------------- */
:root {
    color-scheme: light;
    --bg: #f4eee3;
    --bg-2: #ebe3d5;
    --surface: #fbf8f2;
    --surface-2: #f0e8db;
    --ink: #1f1a15;
    --ink-2: #5b5046;
    --ink-3: #6f6356;
    --line: #dccfbb;
    --line-strong: #c3b297;
    --gold: #b08a3e;
    --gold-ink: #7c5a17;
    --accent: #8f2d22;
    --primary-bg: #1f1a15;
    --primary-ink: #f7f1e6;
    --shadow-1: 0 1px 2px rgb(58 40 20 / .07), 0 6px 18px rgb(58 40 20 / .06);
    --shadow-2: 0 18px 50px rgb(40 26 12 / .22);
    --radius: 14px;
    --radius-s: 10px;
    --font: "Plex Thai", "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
    --font-head: "Serif Thai", "Noto Serif Thai", "Noto Serif", Georgia, serif;
    --fs-xs: 12px;
    --fs-s: 14px;
    --fs-m: 16px;
    --fs-l: 20px;
    --fs-xl: 28px;
    --gutter: 16px;
    --header-h: 60px;
    /* Chinese / Japanese characters on xiangqi and shogi pieces (system fonts, nothing is downloaded) */
    --font-cjk: "Noto Serif CJK SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "Noto Serif CJK JP", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;

    /* board (shared by every game; game.css may override the surface colours) */
    --frame-1: #6d4529;
    --frame-2: #452a16;
    --frame-inlay: #c9a55a;
    --frame-text: #eadcc2;
    --sq-light: #ead7b2;
    --sq-dark: #7d5536;
    --sq-plain: #e6cfa0;
    --board-line: #5a3d22;
    /* marks on the board (game.css overrides them for a dark surface, e.g. reversi's felt):
       the last move is a soft fill plus an edge, the selected square a frame, targets a dot with
       an edge, rings on pieces take --mark-on-light / --mark-on-dark from the piece under them */
    --mark-last: rgb(214 176 96 / .34);
    --mark-last-edge: #7c5a17;
    --mark-select: #7c5a17;
    --mark-target: #8a6420;
    --mark-target-edge: rgb(255 248 230 / .9);
    --mark-hint: #7c5a17;
    --mark-movable: #7c5a17;
    --mark-on-light: #6b4a12;
    --mark-on-dark: #f0d693;
    --mark-check: rgb(190 50 36 / .75);
    --mark-check-ring: #c8372a;
    --mark-taken: #c8372a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #14110e;
        --bg-2: #1a1612;
        --surface: #1f1b17;
        --surface-2: #29231d;
        --ink: #eee6d8;
        --ink-2: #bcb09f;
        --ink-3: #9a8e7d;
        --line: #362f27;
        --line-strong: #4b4136;
        --gold: #c9a55a;
        --gold-ink: #d9b86c;
        --accent: #e2806b;
        --primary-bg: #d9b86c;
        --primary-ink: #1a150f;
        --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .25);
        --shadow-2: 0 18px 50px rgb(0 0 0 / .55);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14110e;
    --bg-2: #1a1612;
    --surface: #1f1b17;
    --surface-2: #29231d;
    --ink: #eee6d8;
    --ink-2: #bcb09f;
    --ink-3: #9a8e7d;
    --line: #362f27;
    --line-strong: #4b4136;
    --gold: #c9a55a;
    --gold-ink: #d9b86c;
    --accent: #e2806b;
    --primary-bg: #d9b86c;
    --primary-ink: #1a150f;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px rgb(0 0 0 / .25);
    --shadow-2: 0 18px 50px rgb(0 0 0 / .55);
}

/* ---------- base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1100px 520px at 50% -140px, rgb(255 255 255 / .55), transparent 70%),
        var(--bg);
    color: var(--ink);
    font: 400 var(--fs-m) / 1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
:root[data-theme="dark"] body { background: radial-gradient(1100px 520px at 50% -140px, rgb(201 165 90 / .07), transparent 70%), var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background: radial-gradient(1100px 520px at 50% -140px, rgb(201 165 90 / .07), transparent 70%), var(--bg); } }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.3; margin: 0 0 .5em; letter-spacing: .01em; }
/* Thai has no capitals: the spaced small-caps labels are a Latin device, Thai text keeps its natural spacing */
:lang(th) .brand__name, :lang(th) .games-menu__title, :lang(th) .site-footer__label, :lang(th) .result__badge, :lang(th) .eyebrow, :lang(th) .kpi__label, :lang(th) h1, :lang(th) h2, :lang(th) h3 { letter-spacing: 0; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-l); }
h3 { font-size: var(--fs-m); }
p { margin: 0 0 1em; }
a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: var(--radius-s); background: var(--primary-bg); color: var(--primary-ink); font-size: var(--fs-s); }
.skip-link:focus { top: 8px; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-s); }
.noscript { max-width: 640px; margin: 24px auto; padding: 16px; text-align: center; }

/* ---------- header ---------------------------------------------------------- */
/* phones (< 640 px) fold the tools into a drawer under the bar; tap targets are 44 px everywhere */
/* solid lacquer, a hairline of gold leaf under it (no frosted glass over the board) */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 30%, transparent); }
.site-header__inner { max-width: 1180px; margin: 0 auto; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; color: var(--ink); }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand__name { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.brand__game { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-tools, .site-tools__inline { display: flex; align-items: center; gap: 4px; }
.tool-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radius-s); background: none; color: var(--ink); cursor: pointer; list-style: none; transition: background-color .15s, border-color .15s; }
.tool-btn::-webkit-details-marker { display: none; }
.tool-btn:hover { background: var(--surface-2); }

/* state shown by the toggles themselves (sound: aria-pressed · theme: the root's theme) */
[data-sound-toggle][aria-pressed="false"] .icon--sound, [data-sound-toggle][aria-pressed="true"] .icon--mute,
[data-sound-toggle][aria-pressed="false"] .state--on, [data-sound-toggle][aria-pressed="true"] .state--off { display: none; }
.icon--moon, .state--dark { display: none; }
:root[data-theme="dark"] .icon--sun, :root[data-theme="dark"] .state--light { display: none; }
:root[data-theme="dark"] .icon--moon { display: block; }
:root[data-theme="dark"] .state--dark { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .icon--sun, :root:not([data-theme="light"]) .state--light { display: none; }
    :root:not([data-theme="light"]) .icon--moon { display: block; }
    :root:not([data-theme="light"]) .state--dark { display: inline; }
}

.lang-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-s); line-height: 1.2; text-decoration: none; color: var(--ink-2); transition: background-color .15s, color .15s; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current] { background: var(--primary-bg); color: var(--primary-ink); }

.games-menu { position: relative; }
.games-menu .icon--menu, .games-menu .icon--close, .games-menu__backdrop, .games-menu__settings { display: none; }
.games-menu[open] > summary { background: var(--surface-2); border-color: var(--line); }
.games-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1; width: 240px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-2); animation: menu-in .18s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.games-menu__title { margin: 4px 0 4px; padding: 0 10px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.games-menu ul { list-style: none; margin: 0; padding: 0; }
.games-menu li a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.games-menu li a::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--line-strong); }
.games-menu li a:hover { background: var(--surface-2); }
.games-menu li a[aria-current] { color: var(--gold-ink); font-weight: 600; }
.games-menu li a[aria-current]::before { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.menu-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-radius: var(--radius-s); background: none; color: var(--ink); font-size: var(--fs-m); text-align: left; text-decoration: none; cursor: pointer; }
.menu-row:hover { background: var(--surface-2); color: var(--ink); }
.menu-row--static { cursor: default; }
.menu-row--static:hover { background: none; }
.menu-row__label { flex: 1; min-width: 0; }
.menu-row__state { padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2); }
.menu-row .lang-switch a { min-height: 44px; min-width: 56px; }

@media (max-width: 639px) {
    .site-header__inner { gap: 8px; }
    .site-tools__inline { display: none; }
    .brand { gap: 8px; }
    .brand__mark { width: 26px; height: 26px; }
    .brand__game { font-size: var(--fs-m); }
    /* the drawer hangs from the sticky header (its containing block), full width */
    .games-menu { position: static; }
    .games-menu .icon--grid { display: none; }
    .games-menu:not([open]) .icon--menu, .games-menu[open] .icon--close { display: block; }
    .games-menu__backdrop { display: block; position: absolute; top: 100%; left: 0; right: 0; height: 100lvh; background: rgb(20 14 8 / .42); animation: fade-in .2s ease-out; }
    .games-menu__panel { top: 100%; left: 0; right: 0; width: auto; max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-width: 0 0 1px; border-radius: 0 0 22px 22px; animation: drawer-in .2s ease-out; }
    .games-menu__games { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
    .games-menu__settings { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
    html:has(.games-menu[open]) { overflow: hidden; }
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- footer ---------------------------------------------------------- */
.site-main { flex: 1 0 auto; width: 100%; }
.site-footer { margin-top: 40px; border-top: 1px solid var(--line); background: var(--bg-2); }
.site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 32px; display: grid; gap: 12px; font-size: var(--fs-s); color: var(--ink-2); }
.site-footer__label { margin: 0 0 4px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer li a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.site-footer a { color: var(--ink); }
.site-footer__note { margin: 0; }

/* ---------- buttons & controls ---------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--fs-s); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s; }
.btn:hover:not(:disabled) { border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--primary { border-color: var(--primary-bg); background: var(--primary-bg); color: var(--primary-ink); }
.btn--primary:hover:not(:disabled) { border-color: var(--gold); color: var(--primary-ink); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--quiet:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.btn--small { min-height: 36px; padding: 4px 12px; }
.segmented { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.segmented label { flex: 1 1 0; min-width: 84px; position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
/* a label that has to wrap breaks into balanced lines (never one word dangling); on a narrow
   phone three or more choices stack, so each label gets the whole width */
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 9px; font-size: var(--fs-s); font-weight: 600; line-height: 1.3; text-align: center; color: var(--ink-2); text-wrap: balance; }
@media (max-width: 479px) {
    .segmented:has(> label:nth-child(3)) { flex-direction: column; }
    .segmented:has(> label:nth-child(3)) label { flex-basis: auto; }
}
.segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--gold), var(--shadow-1); }
.segmented input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }
.field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.field__label { margin-bottom: 8px; padding: 0; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.field__help { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.input { display: grid; gap: 6px; margin-bottom: 14px; font-size: var(--fs-s); color: var(--ink-2); }
.input input, .input textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--fs-m); }
.input textarea { resize: vertical; line-height: 1.5; }
.input--inline { margin: 0; flex: 1; }

/* ---------- dialogs & toast ------------------------------------------------- */
.dialog { width: min(440px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 32px); overflow-x: hidden; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.dialog::backdrop { background: rgb(20 14 8 / .45); }
.dialog--small { width: min(360px, calc(100vw - 2 * var(--gutter))); }
/* phones: the small question (promote? resign?) sits at the bottom, clear of the square it is about */
@media (max-width: 639px) {
    .dialog--small { margin-top: auto; margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.dialog__body { padding: 24px; }
.dialog__title { margin-bottom: 18px; font-size: var(--fs-l); }
.dialog__text { margin-bottom: 20px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
/* a tall dialog on a small phone scrolls, but its buttons stay in reach at the bottom */
.dialog__actions:not(.dialog__actions--stack) { position: sticky; bottom: 0; z-index: 1; margin: 8px -24px -24px; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.dialog__actions--stack { flex-direction: column; align-items: stretch; }
.dialog[open] { animation: dialog-in .18s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.result { text-align: center; }
.result__badge { display: inline-block; margin: 0 0 12px; padding: 4px 14px; border: 1px solid var(--gold); border-radius: 999px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.result__reason { color: var(--ink-2); }
.result__record { padding: 12px; border-radius: var(--radius-s); background: var(--surface-2); font-size: var(--fs-s); color: var(--ink-2); }
.result__run { margin-top: 12px; text-align: left; }
.result__run .end-rank { justify-content: center; }
.result__run-all { margin: 8px 0 0; text-align: center; }
/* centred with left/right insets (not left: 50%), so it may use the whole width of a phone */
.toast { position: fixed; left: var(--gutter); right: var(--gutter); width: fit-content; max-width: calc(100vw - 2 * var(--gutter)); margin: 0 auto; pointer-events: none; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; padding: 10px 18px; border-radius: 22px; background: var(--primary-bg); color: var(--primary-ink); font-size: var(--fs-s); line-height: 1.4; text-align: center; box-shadow: var(--shadow-2); }
/* phones and tablets: under the header, away from the status line and the button bar; never over the open menu */
@media (max-width: 899px) {
    .toast { top: calc(var(--header-h) + 8px); bottom: auto; }
    html:has(.games-menu[open]) .toast { display: none; }
}

/* ---------- game layout ----------------------------------------------------- */
.game { max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter) 0; display: grid; gap: 16px; }
.game__board { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 8px; }
/* the board never pushes the players, the status and the buttons off a phone screen: the controller
   measures them and sets --board-max-h (kit/js/kit/controller.js fitBoard) */
.board-host { width: min(100%, calc(var(--board-max-h, 100svh) * var(--board-ratio, 1)), 720px); aspect-ratio: var(--board-ratio, 1); position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.board-host > svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
/* loading skeleton until the board is drawn · error state if the game could not load */
.board-host[aria-busy="true"] { border-radius: 18px; background: linear-gradient(110deg, var(--surface-2) 35%, var(--surface) 50%, var(--surface-2) 65%) 0 0 / 300% 100%; box-shadow: inset 0 0 0 1px var(--line); animation: skeleton 1.4s ease-in-out infinite; }
.game[data-phase="loading"] .player__name:empty, .game[data-phase="loading"] .player__meta:empty { display: block; width: 7em; max-width: 100%; height: .9em; margin: 3px 0; border-radius: 6px; background: var(--surface-2); }
.game[data-phase="loading"] .player__meta:empty { width: 4.5em; height: .7em; }
@keyframes skeleton { to { background-position: -150% 0; } }
.board-error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 24px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.board-error p { max-width: 28ch; color: var(--ink-2); }
.game__panel { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
    .game { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; padding-top: 24px; gap: 28px; }
    .board-host { width: min(100%, calc((100svh - var(--header-h) - 64px) * var(--board-ratio, 1)), 720px); }
    .game__panel { position: sticky; top: calc(var(--header-h) + 24px); }
}
/* phones in landscape: the board on the left uses the height, the panel scrolls beside it */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
    .game { grid-template-columns: minmax(0, 1fr) minmax(200px, 38%); gap: 12px; padding-top: 8px; align-items: start; }
    .game__panel { gap: 8px; }
    .players { grid-template-columns: 1fr; gap: 6px; }
    .player { padding: 6px 10px; }
    .player__meta { white-space: normal; }
}

.players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .players { grid-template-columns: 1fr; } }
.player { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.player.is-turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--shadow-1); }
.player__piece { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.player__piece svg { width: 28px; height: 28px; }
.player__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.player__name { font-weight: 600; font-size: var(--fs-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__meta { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phones: one line per player card, so the board keeps its height */
@media (max-width: 639px) {
    .player { padding: 6px 10px; }
    .player__text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
    .player__meta { white-space: normal; }
}
/* pieces in hand (shogi) sit next to their owner: the computer's row above the board, yours below;
   tap one of yours, then an empty square. Phones show only your row (the card says how many the
   computer holds) as one scrollable line */
.hands { display: grid; gap: 6px; width: 100%; max-width: 720px; }
.hand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 52px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.hand-row__label { margin-right: 4px; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 639px) {
    .hands--top { display: none; }
    .hand-row { flex-wrap: nowrap; overflow-x: auto; min-height: 48px; padding: 2px 8px; scrollbar-width: none; }
    .hand-row::-webkit-scrollbar { display: none; }
}
.hand-tile { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-s); background: none; color: var(--ink); }
button.hand-tile { cursor: pointer; transition: background-color .15s, border-color .15s; }
button.hand-tile:hover:not(:disabled) { background: var(--surface-2); }
button.hand-tile:disabled { cursor: default; opacity: .8; }
button.hand-tile[aria-pressed="true"] { border-color: var(--gold); background: var(--surface-2); box-shadow: 0 0 0 1px var(--gold); }
.hand-tile__count { position: absolute; right: 0; bottom: 0; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--primary-bg); color: var(--primary-ink); font-size: var(--fs-xs); font-weight: 600; line-height: 18px; text-align: center; }
.status { margin: 0; min-height: 1.6em; font-weight: 600; font-size: var(--fs-m); }
.status.is-thinking::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--gold); vertical-align: middle; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.extras { display: flex; flex-wrap: wrap; gap: 6px; }
/* phones: many move buttons (backgammon's 44 px buttons under the board) scroll inside the panel
   instead of pushing the button bar over the board */
@media (max-width: 639px) { .extras { max-height: 94px; overflow-y: auto; overscroll-behavior: contain; } }
/* very short screens (a phone's portal frame): one row of them at a time */
@media (max-width: 639px) and (max-height: 560px) { .extras { max-height: 50px; } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-xs); color: var(--ink-2); }
.chip strong { color: var(--ink); font-weight: 600; }
.chip-move { min-height: 44px; padding: 4px 14px; font-variant-numeric: tabular-nums; }
.chip--alert { border-color: var(--accent); color: var(--accent); }
.chip--alert strong { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
@media (min-width: 900px) {
    .actions .btn { flex: 1 1 auto; }
}
.actions .btn[data-action="new"], .actions .btn[data-action="score"], .actions .btn[data-action="retry"] { flex-basis: 100%; }
@media (max-width: 899px) {
    /* icon above a short label; a label that is still too long wraps instead of being cut */
    .actions .btn:not([data-action="new"]):not([data-action="score"]):not([data-action="retry"]) { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: var(--fs-xs); white-space: normal; line-height: 1.15; }
}
/* phones: the game buttons ride along the bottom edge in one row (thumb reach); sticky inside the
   panel, so it never covers the footer once the panel has scrolled past · solid, not frosted */
@media (max-width: 639px) {
    .actions { position: sticky; bottom: 0; z-index: 6; flex-wrap: nowrap; gap: 6px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 -1px 0 color-mix(in srgb, var(--gold) 30%, transparent); }
    .actions .btn, .actions .btn[data-action="new"], .actions .btn[data-action="score"], .actions .btn[data-action="retry"] { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 52px; padding: 6px 2px; font-size: var(--fs-xs); white-space: normal; line-height: 1.15; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) {
    .actions { position: static; flex-wrap: wrap; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    /* the narrow panel beside the board: the card's second line wraps instead of being cut */
    .player__meta { white-space: normal; overflow: visible; text-overflow: clip; }
}
.moves { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.moves summary { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: var(--fs-s); font-weight: 600; cursor: pointer; }
/* two columns in row order (move 1 | move 2, move 3 | move 4 ...): the newest move is always at the
   bottom where scrollTop finds it, never in a column that overflows to the right */
.moves__list { max-height: 220px; overflow: auto; margin: 0; padding: 0 14px 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; list-style: none; counter-reset: move; font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.moves__list:empty { display: block; }
.moves__list:empty::before { content: attr(data-empty); display: block; }
.moves__list li { min-width: 0; overflow-wrap: anywhere; counter-increment: move; }
.moves__list li::before { content: counter(move) ". "; color: var(--ink-3); }
.moves__list li.is-pass { font-style: italic; }
.moves__list li.is-last { color: var(--ink); font-weight: 600; }
.rules-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-s); }

/* ---------- board (SVG drawn by kit/js/kit/board.js) ------------------------ */
.bd-frame { fill: url(#bd-frame-grad); }
.bd-inlay { fill: none; stroke: var(--frame-inlay); stroke-width: 2; opacity: .8; }
/* the size comes from board.js (at least 12 CSS px, more on a big board) */
.bd-coord { fill: var(--frame-text); font-family: var(--font); font-weight: 600; opacity: .78; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.bd-sq-light { fill: var(--sq-light); }
.bd-sq-dark { fill: var(--sq-dark); }
.bd-sq-plain { fill: var(--sq-plain); }
.bd-line { stroke: var(--board-line); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
@media (max-width: 639px) { .bd-line { stroke-width: 1.25; } }
.bd-star { fill: var(--board-line); }
.bd-river { fill: var(--board-line); font: 600 44px var(--font-cjk); letter-spacing: .3em; text-anchor: middle; dominant-baseline: central; opacity: .55; pointer-events: none; }
.pc-glyph { font-family: var(--font-cjk); font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.pc-glyph--xq { font-size: 46px; }
.pc-glyph--shogi { font-size: 40px; }
.pc-shadow-tile { fill: #000; opacity: .28; }
.bd-hit { fill: transparent; cursor: default; }
.is-interactive .bd-hit.is-active { cursor: pointer; }
/* marks: strokes are in CSS pixels (non-scaling), so they stay visible on a phone; a ring drawn on a
   piece is dark on a light piece and gold on a dark one (board.js adds bd-on-light / bd-on-dark) */
.bd-mark-last { fill: var(--mark-last); }
.bd-mark-last-edge { fill: none; stroke: var(--mark-last-edge); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bd-mark-last-ring { fill: none; stroke: var(--mark-last-edge); stroke-width: 3; vector-effect: non-scaling-stroke; }
.bd-mark-last-dot { fill: var(--mark-last-edge); }
.bd-mark-last-stone { fill: none; stroke: var(--mark-on-light); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.bd-mark-select { fill: none; stroke: var(--mark-select); stroke-width: 3; vector-effect: non-scaling-stroke; }
.bd-mark-target { fill: var(--mark-target); stroke: var(--mark-target-edge); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .95; }
.bd-mark-capture { fill: none; stroke: var(--mark-target); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .95; }
.bd-mark-hint { fill: none; stroke: var(--mark-hint); stroke-width: 3; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; animation: hint-spin 3s linear infinite; }
@keyframes hint-spin { to { stroke-dashoffset: -48; } }
.bd-mark-movable { fill: none; stroke: var(--mark-movable); stroke-width: 2.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .9; }
.bd-mark-check { fill: url(#bd-check-grad); }
.bd-mark-check-ring { fill: none; stroke: var(--mark-check-ring); stroke-width: 3; vector-effect: non-scaling-stroke; }
.bd-mark-pending { stroke: var(--mark-target); stroke-width: 5; opacity: .7; }
.bd-mark-line { fill: none; stroke: var(--mark-on-light); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: .95; animation: line-in .25s ease-out; }
@keyframes line-in { from { opacity: 0; } }
.bd-mark-taken, .bd-mark-dead { fill: none; stroke: var(--mark-taken); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bd-mark-overline { fill: none; stroke: #8a8378; stroke-width: 2.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .9; }
.bd-on-light.bd-mark-last-stone, .bd-on-light.bd-mark-line, .bd-on-light.bd-mark-movable, .bd-on-light.bd-mark-hint, .bd-on-light.bd-mark-capture, .bd-on-light.bd-mark-last-ring { stroke: var(--mark-on-light); }
.bd-on-dark.bd-mark-last-stone, .bd-on-dark.bd-mark-line, .bd-on-dark.bd-mark-movable, .bd-on-dark.bd-mark-hint, .bd-on-dark.bd-mark-capture, .bd-on-dark.bd-mark-last-ring { stroke: var(--mark-on-dark); }
.bd-on-dark.bd-mark-dead { stroke: var(--mark-on-dark); }
.bd-mark-pending-0 { fill: #16120f; }
.bd-mark-pending-1 { fill: #f6efe2; }
.bd-ghost { opacity: .92; pointer-events: none; }
/* the keyboard cursor shows after an arrow key, not after a tap (board.js toggles has-keys) */
.bd-cursor { fill: none; stroke: var(--gold); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; }
.board-host:focus-visible { outline: none; }
.board-host.has-keys:focus-visible .bd-cursor { opacity: 1; }
.bd-territory-0 { fill: #16120f; opacity: .55; }
.bd-territory-1 { fill: #f6efe2; opacity: .75; }
.pc { transition: opacity .2s; }
.pc.is-dead { opacity: .5; }
.pc.is-dim { opacity: .35; }
.pc.is-selectable { cursor: pointer; }
.pc-shadow { fill: url(#pc-shadow-grad); }

/* ---------- prose (rules, privacy) ------------------------------------------ */
.prose { max-width: 760px; margin: 0 auto; padding: 32px var(--gutter) 8px; }
.prose h2 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: var(--fs-s); }
.prose .table th, .prose .table td { white-space: normal; vertical-align: top; }
.prose .table th { width: 7em; }
.prose th, .prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* a row header is a term ("ปานกลาง"): never broken in the middle on a narrow phone */
.prose table:not(.table) th { white-space: nowrap; }
/* the characters on xiangqi pieces in their ink colours (rules page) */
.ink-red { color: #a3241a; font-family: var(--font-cjk); font-weight: 700; }
.ink-black { color: #1c1714; font-family: var(--font-cjk); font-weight: 700; }
:root[data-theme="dark"] .ink-black { color: #eee6d8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ink-black { color: #eee6d8; } }
.prose figure { margin: 0 0 1em; }
.prose__cta { margin-top: 2em; }
.eyebrow { margin: 0 0 8px; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.note { padding: 12px 14px; border-left: 3px solid var(--gold); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--surface); font-size: var(--fs-s); }

/* ---------- error pages (resources/error-views) ----------------------------- */
.error-page { flex: 1 0 auto; display: grid; place-content: center; justify-items: center; gap: 4px; max-width: 520px; margin: 0 auto; padding: 48px var(--gutter) calc(48px + env(safe-area-inset-bottom)); text-align: center; }
.error-page__mark { width: 40px; height: 40px; margin-bottom: 12px; color: var(--ink); }
.error-page__code { margin: 0; font-family: var(--font-head); font-size: var(--fs-xl); letter-spacing: .2em; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.error-page__title { margin: 0 0 4px; font-size: var(--fs-l); }
.error-page__text { max-width: 36ch; margin: 0 0 20px; color: var(--ink-2); }

/* ---------- admin ----------------------------------------------------------- */
.admin { background: var(--bg); }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px var(--gutter); border-bottom: 1px solid var(--line); background: var(--surface); }
.admin-bar__brand { font-weight: 600; color: var(--ink); text-decoration: none; }
.admin-bar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-s); }
.admin-bar__nav a { display: inline-flex; align-items: center; min-height: 32px; }
.admin-bar__nav a[aria-current] { color: var(--ink); font-weight: 600; }
.admin-bar__nav form { margin: 0; }
.admin-main { max-width: 980px; margin: 0 auto; padding: 24px var(--gutter) 48px; }
.admin-title { font-size: var(--fs-xl); }
.card { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.card__title { font-size: var(--fs-l); }
.admin-login { max-width: 380px; margin: 40px auto; }
.form-error { color: var(--accent); font-size: var(--fs-s); }
.notice { padding: 10px 14px; border: 1px solid var(--gold); border-radius: var(--radius-s); background: var(--surface); font-size: var(--fs-s); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.table th, .table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-main a:not(.btn) { display: inline-flex; align-items: center; min-height: 28px; }
.search-row { display: flex; gap: 8px; margin-bottom: 8px; }
.text-row__key { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.text-row__key a { display: inline-flex; align-items: center; min-height: 28px; }
.text-row .input { margin-bottom: 10px; }
.text-row__restore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.subnav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); width: fit-content; max-width: 100%; }
.subnav a { padding: 6px 14px; border-radius: 9px; font-size: var(--fs-s); color: var(--ink-2); text-decoration: none; }
.subnav a[aria-current] { background: var(--primary-bg); color: var(--primary-ink); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 12px; }
.filters .input { margin: 0; min-width: 120px; flex: 0 1 160px; }
.input select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font-size: var(--fs-m); }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.kpi { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.kpi__label { margin: 0; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.kpi__value { margin: 4px 0 0; font-family: var(--font-head); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.kpi__delta { margin: 0; min-height: 1.4em; font-size: var(--fs-xs); color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card-grid .card { margin: 0; }
.dist { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--fs-s); }
.dist__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist__bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dist__bar span { display: block; height: 100%; border-radius: 999px; background: var(--gold); }
.dist__n { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.daily { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; overflow-x: auto; }
.daily__col { flex: 1 0 18px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 6px; }
.daily__bar { display: block; width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; background: var(--gold); min-height: 2px; }
.daily__label { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-xs); color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 0; }
.facts dt { font-size: var(--fs-xs); color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-size: var(--fs-s); overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 10px 0 10px 16px; border-left: 2px solid var(--line); }
.timeline__meta { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.timeline__change { margin: 4px 0 0; font-size: var(--fs-s); }
.timeline del { color: var(--ink-3); }
.timeline ins { text-decoration: none; }
.user-row.is-deleted { opacity: .7; }
.user-row__head { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.user-row__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 10px; }
.perm-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; border: 0; }
.check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-s); }
.pager { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.table td.audit-change { max-width: 420px; white-space: normal; overflow-wrap: anywhere; }
.audit-old { color: var(--ink-3); }

/* admin on phones: nav becomes a swipeable strip, tables become cards (labels from admin.js) */
@media (max-width: 639px) {
    .admin-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding-bottom: 0; }
    .admin-bar__brand { display: flex; align-items: center; min-height: 44px; }
    .admin-bar__nav { flex-wrap: nowrap; gap: 4px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; }
    .admin-bar__nav::-webkit-scrollbar { display: none; }
    .admin-bar__nav a { flex: none; padding: 0 12px; border-radius: 999px; white-space: nowrap; }
    .admin-bar__nav a[aria-current] { background: var(--primary-bg); color: var(--primary-ink); }
    .admin-bar__nav form { flex: none; margin-left: auto; }
    .admin-main { padding-top: 16px; }
    .card { padding: 14px; }
    .table-wrap:has(.table--cards) { overflow: visible; }
    .table--cards thead { display: none; }
    .table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; width: 100%; }
    .table--cards tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
    .table--cards tr:last-child { border-bottom: 0; }
    .table--cards td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
    .table--cards td[data-label]::before { content: attr(data-label); flex: none; max-width: 45%; font-size: var(--fs-xs); color: var(--ink-2); text-align: left; }
    .table--cards td:not([data-label]) { justify-content: flex-start; text-align: left; }
    .table--cards td:empty { display: none; }
    .table--cards td.audit-change { max-width: none; }
    /* a session's events: time · event · stay on one line, page and details below (no labels) */
    .table--timeline.table--cards tr { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; }
    .table--timeline.table--cards td { display: block; padding: 0; text-align: left; }
    .table--timeline.table--cards td[data-label]::before { display: none; }
    .table--timeline.table--cards td:nth-child(1) { grid-area: 1 / 1; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
    .table--timeline.table--cards td:nth-child(2) { grid-area: 1 / 2; font-weight: 600; }
    .table--timeline.table--cards td:nth-child(3) { grid-area: 2 / 1 / 3 / 4; font-size: var(--fs-xs); color: var(--ink-2); }
    .table--timeline.table--cards td:nth-child(4) { grid-area: 3 / 1 / 4 / 4; font-size: var(--fs-xs); color: var(--ink-3); }
    .table--timeline.table--cards td:nth-child(5) { grid-area: 1 / 3; font-size: var(--fs-xs); color: var(--ink-2); text-align: right; }
    .filters .input { flex: 1 1 140px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
    .kpi__value { font-size: var(--fs-l); }
}

/* ---------- touch: 44 px targets everywhere ---------------------------------- */
@media (pointer: coarse), (max-width: 639px) {
    .btn--small { min-height: 44px; }
    .lang-switch a { min-height: 44px; min-width: 52px; }
    .subnav a { display: inline-flex; align-items: center; min-height: 44px; }
    .admin-bar__nav a { display: inline-flex; align-items: center; min-height: 44px; }
    .check { min-height: 44px; }
    .admin-main a:not(.btn) { min-width: 44px; min-height: 44px; }
}

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

/* ---------- verified leaderboards (kit/src/Arcade: claim form, boards, scores page) -----------
   Shared by every game with a leaderboard; the game's game.css draws its own stage. */
.panel-card { width: min(460px, 100%); max-height: 100%; overflow-y: auto; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.panel-card--small { width: min(340px, 100%); text-align: center; }
.panel-card__title { margin-bottom: 14px; font-size: var(--fs-l); }
.panel-card__wait { margin: 0; color: var(--ink-2); }
.panel-card__wait::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--gold); vertical-align: middle; animation: pulse 1s ease-in-out infinite; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.panel-card--small .panel-actions { flex-direction: column; }
.panel-actions .btn { flex: 1 1 auto; }
.btn--wide { width: 100%; margin-top: 4px; }
.modes { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.mode-card { position: relative; display: block; cursor: pointer; }
.mode-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mode-card__body { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); transition: border-color .15s, box-shadow .15s; }
.mode-card input:checked + .mode-card__body { border-color: var(--gold); background: var(--surface); box-shadow: 0 0 0 1px var(--gold), var(--shadow-1); }
.mode-card input:focus-visible + .mode-card__body { outline: 2px solid var(--gold); outline-offset: 2px; }
.mode-card__name { font-weight: 600; }
.mode-card__desc { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.45; }
.mode-card__best { font-size: var(--fs-xs); color: var(--gold-ink); }
.mode-card__best:empty { display: none; }
.controls-hint { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.controls-hint--touch { display: none; }
@media (pointer: coarse) {
    .controls-hint--keys { display: none; }
    .controls-hint--touch { display: block; }
}
.end-badge { display: inline-block; margin: 0 0 6px; padding: 2px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; }
.end-badge--good { background: rgb(201 165 90 / .22); color: var(--gold-ink); }
.end-badge--bad { background: rgb(155 50 38 / .12); color: var(--accent); }
.end-score { margin: 0; font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.end-best { display: inline-block; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px; background: var(--primary-bg); color: var(--primary-ink); font-size: var(--fs-xs); font-weight: 600; }
.end-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 14px 0; }
.end-stats div { padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
.end-stats dt { font-size: var(--fs-xs); color: var(--ink-2); }
.end-stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.end-rank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 1.6em; }
.end-rank p { margin: 0; font-weight: 600; }
.claim { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.claim__title { margin: 0 0 10px; font-weight: 600; }
.claim__fields { display: grid; gap: 0 10px; }
@media (min-width: 480px) { .claim__fields { grid-template-columns: 1fr 1fr; } }
.claim .input { margin-bottom: 8px; }
.claim .field__help { margin: 0 0 10px; }
.claim__error { margin: 0 0 10px; color: var(--accent); font-size: var(--fs-s); }
.claim .btn { width: 100%; }
.board-list { margin: 12px 0 0; padding: 0; list-style: none; }
.board-list[aria-busy="true"] { min-height: 140px; border-radius: 10px; background: linear-gradient(110deg, var(--surface-2) 35%, var(--surface) 50%, var(--surface-2) 65%) 0 0 / 300% 100%; animation: skeleton 1.4s ease-in-out infinite; }
.board-list__row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.board-list__row:last-child { border-bottom: 0; }
.board-list__row.is-you { border-radius: 10px; background: rgb(201 165 90 / .2); }
.board-list__row--gap { position: relative; margin-top: 14px; }
.board-list__row--gap::before { content: "⋯"; position: absolute; left: 0; right: 0; top: -15px; color: var(--ink-3); text-align: center; line-height: 1; }
.board-list__rank { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.board-list__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-list__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; font-weight: 600; }
.board-list__score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-list__empty { padding: 12px 8px; color: var(--ink-2); font-size: var(--fs-s); }
.flag { flex: none; display: inline-block; min-width: 1.6em; font-size: var(--fs-xs); line-height: 1.4; text-align: center; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink-2); }
.flag--emoji { min-width: 0; border: 0; font-size: var(--fs-m); line-height: 1; }
.side-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.side-card__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: var(--fs-l); }
.side-card__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: var(--fs-s); }
.board-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.board-tabs__tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; cursor: pointer; }
.board-tabs__tab[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--gold), var(--shadow-1); }
.help-list { margin: 0 0 8px; padding-left: 1.2em; font-size: var(--fs-s); color: var(--ink-2); }
.help-list li { margin-bottom: 6px; }
.scores { max-width: 900px; margin: 0 auto; padding: 32px var(--gutter) 24px; }
.scores__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.scores__tabs a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 44px; padding: 4px 10px; border-radius: 9px; color: var(--ink-2); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
.scores__tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--gold), var(--shadow-1); }
.scores__filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 14px; }
.scores__filter .input { margin: 0; flex: 1 1 220px; }
.scores__table .is-you td { background: rgb(201 165 90 / .16); }
.scores__table .rank { width: 3em; color: var(--ink-2); text-align: right; }
.scores__who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.scores__note { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-2); }
.scores__empty { padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; color: var(--ink-2); }