/* ══════════════════════════════════════════════════════════════
   Games — shared layout and pieces for the game pages
   Sits on cs42.css and arcade.css. Everything here reads the theme
   tokens, so the page around a board follows Night Owl, Snowy Owl
   and Midnight. The boards themselves stay dark, like a screen.
   Each page sets --gk-hue to its own colour.
   ══════════════════════════════════════════════════════════════ */

.gk-main { width: min(var(--wrap), 100% - 32px); margin: 0 auto; padding: 4px 0 56px; }
.gk-layout {
    display: grid; gap: 28px; align-items: start; justify-content: center;
    grid-template-columns: minmax(0, 600px) minmax(260px, 340px);
}
.gk-col { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (max-width: 960px) { .gk-layout { grid-template-columns: minmax(0, 600px); } }

/* ── Live numbers above the board ── */
.gk-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gk-stat {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 76px; padding: 8px 14px 9px;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-xs);
}
.gk-stat b {
    font-size: 1.28rem; font-weight: 700; line-height: 1.1; color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.gk-stat span {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--fg-3);
}
.gk-stat--hero { border-color: color-mix(in srgb, var(--gk-hue, var(--accent)) 45%, var(--line)); }
.gk-stat--hero b { color: var(--gk-hue, var(--accent)); }
.gk-stat small { font-size: 0.7rem; color: var(--fg-3); max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-bump { animation: gkBump 0.34s var(--ease); }

/* ── The playfield frame ── */
.gk-stage {
    position: relative; padding: 8px; border-radius: 18px;
    background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line-2);
    box-shadow: var(--shadow-1),
                0 26px 60px -34px color-mix(in srgb, var(--gk-hue, var(--accent)) 70%, transparent);
}
.gk-stage canvas {
    display: block; width: 100%; height: auto; border-radius: 11px;
    touch-action: none; background: #08121D; cursor: pointer;
}
.gk-stage { touch-action: none; container-type: inline-size; }
/* Keyboard hints mean little on a phone, and the board there is small */
:root.gk-touch .gk-card .gk-hint { display: none; }
@container (max-width: 440px) {
    .gk-card { padding: 14px 14px 12px; gap: 7px; }
    .gk-title { font-size: 1.7rem; }
    .gk-big { font-size: 2.1rem; }
    .gk-text { font-size: 0.84rem; }
    .gk-mini div { padding: 5px 2px; }
    .gk-field { padding: 8px 10px; }
}
@container (max-width: 560px) {
    .gk-stage--wide .gk-text { display: none; }
}
.gk-stage > .ar-overlay { inset: 8px; border-radius: 11px; }
.gk-card [hidden] { display: none !important; }
.gk-stage.is-hit { animation: gkShake 0.38s; }

/* Cards that sit on the board: start, pause, game over */
.gk-ov {
    position: absolute; inset: 8px; z-index: 15;
    display: none;
    padding: 16px; border-radius: 11px; overflow: auto; overscroll-behavior: contain;
    background: radial-gradient(ellipse at 50% 45%, rgba(5,12,22,0.5), rgba(5,12,22,0.84));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.gk-ov.is-open { display: flex; animation: gkFade 0.22s var(--ease); }
.gk-card {
    width: min(100%, 340px); padding: 22px 22px 20px; margin: auto;
    display: grid; gap: 12px; justify-items: center; text-align: center;
    background: color-mix(in srgb, var(--bg-2) 95%, transparent); color: var(--fg);
    border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    animation: gkPop 0.34s var(--ease);
}
.gk-kicker {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gk-hue, var(--accent));
}
.gk-title {
    font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 6vw, 2.5rem);
    line-height: 1; letter-spacing: -0.01em; margin: 0;
}
.gk-text { color: var(--fg-2); font-size: 0.92rem; line-height: 1.5; max-width: 32ch; margin: 0; }
.gk-big {
    font-size: clamp(2.4rem, 9vw, 3.2rem); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; color: var(--gk-hue, var(--accent));
}
.gk-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--tile-ink); background: var(--gold);
    animation: gkPop 0.4s var(--ease) 0.15s backwards;
}
.gk-badge[hidden] { display: none; }
.gk-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.gk-mini div { padding: 7px 4px; border-radius: var(--radius-xs); background: var(--bg-3); }
.gk-mini b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.gk-mini span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.gk-row { display: flex; gap: 8px; width: 100%; }
.gk-row > * { flex: 1; min-width: 0; }
.gk-field {
    width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--radius-xs);
    border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg);
    font: inherit; font-size: 0.95rem; text-align: center;
}
.gk-field::placeholder { color: var(--fg-4); }
.gk-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gk-msg { min-height: 1.2em; font-size: 0.8rem; color: var(--fg-3); margin: 0; }
.gk-msg.is-ok { color: var(--accent); }
.gk-msg.is-err { color: var(--rose); }
.gk-hint { font-size: 0.76rem; color: var(--fg-3); margin: 0; line-height: 1.6; }
.gk-hint kbd, .gk-keys kbd {
    font-family: var(--mono); font-size: 0.7rem; padding: 2px 6px; border-radius: 5px;
    background: var(--bg-3); border: 1px solid var(--line-2); color: var(--fg-2);
}

/* Primary button: the shared pixel button, filled with the accent */
.ar-btn.gk-go { background: var(--accent); color: var(--accent-ink); }
.ar-btn.gk-go:hover { background: var(--accent-2); color: var(--accent-ink); }
.ar-btn.gk-wide { width: 100%; margin: 2px 0 5px; }
.ar-btn:focus-visible, .gk-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ar-btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ── Side panels ── */
.gk-panel {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 16px 16px 14px;
}
.gk-panel h2, .gk-lb-title {
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--fg-3); margin: 0 0 10px;
}
.gk-keys { display: grid; gap: 7px; font-size: 0.84rem; color: var(--fg-2); }
.gk-keys div { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.gk-keys span:last-child { color: var(--fg-3); text-align: right; }

/* ── Leaderboard ── */
.gk-lb { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 14px 12px; }
.gk-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gk-lb-head .gk-lb-title { margin: 0; }
.gk-tabs { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); }
.gk-tabs button {
    font: 500 0.74rem var(--font); color: var(--fg-3); background: transparent; border: 0;
    padding: 5px 10px; border-radius: 999px; cursor: pointer; transition: color 0.15s, background-color 0.15s;
}
.gk-tabs button:hover { color: var(--fg); }
.gk-tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.gk-lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-height: 120px; align-content: start; }
.gk-lb-row {
    display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: var(--radius-xs); font-size: 0.88rem; color: var(--fg-2);
    animation: gkFade 0.3s var(--ease) backwards;
}
.gk-lb-row:nth-child(2) { animation-delay: 0.03s; } .gk-lb-row:nth-child(3) { animation-delay: 0.06s; }
.gk-lb-row:nth-child(4) { animation-delay: 0.09s; } .gk-lb-row:nth-child(5) { animation-delay: 0.12s; }
.gk-lb-row:hover { background: var(--bg-3); }
.gk-lb-rank {
    width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
    font: 600 0.72rem var(--mono); color: var(--fg-3); background: var(--bg-3);
}
.gk-lb-row.is-1 .gk-lb-rank { background: #E8C079; color: #2A1E05; }
.gk-lb-row.is-2 .gk-lb-rank { background: #C9D3DC; color: #1B2630; }
.gk-lb-row.is-3 .gk-lb-rank { background: #D59A6A; color: #2B1607; }
.gk-lb-row.is-top { color: var(--fg); }
.gk-lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-lb-score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gk-hue, var(--accent)); }
.gk-lb-row.is-me { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.gk-lb-empty { padding: 26px 8px; text-align: center; font-size: 0.84rem; color: var(--fg-3); }
.gk-lb-note { margin: 8px 2px 0; font-size: 0.72rem; color: var(--fg-4); }

/* ── Touch pad: one disc, four directions ── */
.gk-touch-only { display: none; }
:root.gk-touch .gk-touch-only { display: flex; }
.gk-controls { justify-content: center; align-items: center; gap: 22px; user-select: none; -webkit-user-select: none; }
.gk-pad {
    --pad: 168px;
    position: relative; width: var(--pad); height: var(--pad); border-radius: 50%; flex-shrink: 0;
    background: radial-gradient(circle at 50% 40%, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line-2); box-shadow: var(--shadow-1);
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
.gk-pad [data-dir] {
    position: absolute; width: 33.4%; height: 33.4%; display: grid; place-items: center;
    border: 0; border-radius: 22%; background: transparent; color: var(--fg-2);
    pointer-events: none; transition: background-color 0.1s, color 0.1s, transform 0.1s;
}
.gk-pad [data-dir] svg { width: 40%; height: 40%; }
.gk-pad [data-dir="up"]    { top: 3.5%; left: 33.3%; }
.gk-pad [data-dir="down"]  { bottom: 3.5%; left: 33.3%; }
.gk-pad [data-dir="left"]  { left: 3.5%; top: 33.3%; }
.gk-pad [data-dir="right"] { right: 3.5%; top: 33.3%; }
.gk-pad [data-dir].is-down {
    background: color-mix(in srgb, var(--gk-hue, var(--accent)) 30%, transparent);
    color: var(--fg); transform: scale(0.94);
}
.gk-pad::after {
    content: ''; position: absolute; inset: 37%; border-radius: 50%;
    background: var(--bg-3); border: 1px solid var(--line);
}

/* A strip under the board to slide a thumb along (Brick Breaker) */
.gk-strip {
    flex: 1; height: 64px; display: grid; place-items: center; border-radius: 16px;
    border: 1px dashed var(--line-2); color: var(--fg-3); font-size: 0.8rem;
    background: repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in srgb, var(--fg) 5%, transparent) 22px 24px), var(--bg-2);
    touch-action: none; -webkit-tap-highlight-color: transparent;
}
.gk-strip.is-down { border-style: solid; border-color: var(--gk-hue, var(--accent)); color: var(--fg); }

/* The control bar stays on one line: in a narrow column the buttons
   drop their words and keep their icons (each still has a tooltip) */
#game-hud { container-type: inline-size; }
@container (max-width: 780px) {
    #game-hud .ar-btn-text { display: none; }
    #game-hud .ar-btn { padding: 9px 11px; }
    #game-hud .ar-bar { gap: 8px 12px; }
}
@container (max-width: 480px) {
    #game-hud .ar-seg-label { display: none; }
    #game-hud .ar-seg button { padding: 8px 9px; }
    #game-hud .ar-group + .ar-group::before { display: none; }
    #game-hud .ar-bar { gap: 6px 8px; }
    #game-hud .ar-group { gap: 4px; }
    #game-hud .ar-btn { margin: 2px 2px 5px 1px; padding: 9px 10px; }
}
/* A side column in phone landscape: a long mode switch folds into two rows */
@container (max-width: 260px) {
    #game-hud .ar-seg { display: grid; grid-template-columns: repeat(2, auto); }
    #game-hud .ar-seg button { white-space: nowrap; }
}
/* The keyboard list means nothing on a touch screen: save the room */
:root.gk-touch #game-hud .ar-btn[title^="How to play"] { display: none; }

/* Buttons never zoom the page on a double tap */
.ar-btn, .gk-tabs button, .ar-seg button, .gk-controls button { touch-action: manipulation; }

/* ── Fitting the window ──
   game-kit.js sizes .gk-stage so the board and everything in its
   column (.gk-play) fit the visible window together.              */
.gk-play { scroll-margin-top: calc(var(--nav-h) + 8px); }
.gk-play .gk-stage { margin-inline: auto; }

/* Full-screen play: the play column covers the page */
:root.gk-focus, :root.gk-focus body { overflow: hidden; overscroll-behavior: none; }
.gk-focus .gk-play {
    position: fixed; left: 0; right: 0; top: var(--gk-vt, 0px); height: var(--gk-vh, 100%); z-index: 500;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--bg); overflow-x: hidden; overflow-y: auto;
}
.gk-focus .gk-play > * { width: 100%; max-width: 920px; flex-shrink: 0; }
.gk-focus .gk-play .ar-bar { margin-bottom: 0; }
/* Numbers on one line, however many there are */
.gk-focus .gk-stats { flex-wrap: nowrap; gap: 6px; }
.gk-focus .gk-stat { flex: 1 1 0; min-width: 0; padding: 4px 4px 5px; }
.gk-focus .gk-stat b { font-size: 1.02rem; }
.gk-focus .gk-stat span { font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gk-focus .ar-toast { z-index: 600; }
@media (max-height: 720px) {
    .gk-focus .gk-pad { --pad: 138px; }
    .gk-focus .tk-fire { width: 86px; height: 86px; }
    .gk-focus .gk-strip { height: 52px; }
    .gk-focus .v2-effects { min-height: 30px; }
}
@media (max-height: 620px) {
    .gk-focus .gk-pad { --pad: 122px; }
    .gk-focus .tk-fire { width: 78px; height: 78px; }
}

/* A phone on its side: numbers on the left, controls on the right,
   the pad and fire button in the corners beside the board */
@media (orientation: landscape) and (max-height: 560px) {
    .gk-focus .gk-play {
        display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto auto 1fr auto;
        grid-template-areas: "stats stage hud" "fx stage hud" ". stage ." "pad stage fire";
        column-gap: 16px; row-gap: 8px; align-items: start;
    }
    .gk-focus .gk-play > * { width: auto; max-width: none; }
    .gk-focus .gk-play > .gk-stats {
        grid-area: stats; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    }
    .gk-focus .gk-play .gk-stat { padding: 4px 4px 5px; }
    .gk-focus .gk-play .gk-stat b { font-size: 0.98rem; }
    .gk-focus .gk-play > .v2-effects { grid-area: fx; justify-content: flex-start; min-height: 0; }
    .gk-focus .gk-play > .v2-effects:empty { display: none; }
    .gk-focus .gk-play > #game-hud { grid-area: hud; }
    .gk-focus .gk-play .ar-bar { flex-direction: column; align-items: flex-end; }
    .gk-focus .gk-play > .gk-stage { grid-area: stage; grid-row: 1 / -1; align-self: center; }
    .gk-focus .gk-play > .gk-controls { display: contents; }
    .gk-focus .gk-pad { grid-area: pad; align-self: end; justify-self: start; --pad: 148px; }
    .gk-focus .tk-fire { grid-area: fire; align-self: end; justify-self: end; }
    .gk-focus .gk-strip { display: none; }
}

/* ── Motion ── */
@keyframes gkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gkPop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes gkBump { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes gkShake {
    10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(3px, -1px); }
    30%, 50%, 70% { transform: translate(-5px, 2px); } 40%, 60% { transform: translate(5px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
    .gk-ov.is-open, .gk-card, .gk-badge, .gk-lb-row, .gk-bump, .gk-stage.is-hit { animation: none; }
}
@media (max-width: 520px) {
    .gk-main { width: calc(100% - 20px); }
    .gk-stat { min-width: 64px; padding: 7px 10px 8px; }
    .gk-stat b { font-size: 1.1rem; }
}