/* ── Game Board Default ──────────────────────────────────────────────────────
   A reusable layout shell for simple single-board games: one cohesive
   rounded card (.gb-frame) with a colored header band (.gb-frame-top) fused
   directly to a play area below it (.gb-play-wrap) — no detached header
   floating above an unrelated board. Optional pieces (mode tabs, a blurb
   line, a countdown bar) live in the header band; a result overlay
   (.gb-overlay) covers the play area itself on win/loss, instead of status
   text appearing underneath the game.

   This is a *shell* only — it supplies structure, not color. Each game still
   defines its own palette via the standard --accent/--card/--border/etc.
   custom properties (see games/ptf-bets/css/game.css or
   games/frostbite/css/game.css for the established per-game theme-class
   pattern) and its own board/tile/piece styling in its own css/game.css.

   This won't fit every game (a match-3 board like pop-swap's has a
   different shape) — it's meant to be one of potentially a few templates,
   not a mandate. Use it when a game is "type/click something, see
   feedback, win or lose," like Frostbite. */

/* Rapid taps on a button (e.g. mashing an on-screen Backspace key while
   deleting a word) read as a double-tap to mobile browsers, which zooms the
   page instead of registering the second tap. touch-action: manipulation
   tells the browser these are controls to tap repeatedly, not content to
   zoom into — applies to every button inside the game card, not just
   Frostbite's keyboard, so future games get this for free. */
.gb-frame button {
    touch-action: manipulation;
}

.gb-frame {
    max-width: 480px;
    margin: 0 auto;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.gb-frame-top {
    background: linear-gradient(160deg, var(--accent), var(--accent-dark));
    color: #fff;
    padding: 18px 18px 14px;
}

.gb-frame-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.gb-frame-title { margin: 0; font-size: 1.5em; font-weight: 700; line-height: 1.1; }

/* ── Mode toggle (omit entirely for games with only one mode) ─────────────── */

.gb-mode-toggle { display: flex; gap: 6px; }

.gb-mode-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.gb-mode-btn.is-active { background: #fff; border-color: #fff; color: var(--accent); }

.gb-blurb { color: rgba(255, 255, 255, 0.9); font-size: 0.88em; margin: 0 0 12px; }

/* ── Countdown bar (omit for un-timed games) ─────────────────────────────── */

.gb-time-bar {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.gb-time-bar-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    background: #fff;
    transition: width 200ms linear, background-color 300ms ease;
    transform-origin: left;
}

.gb-time-bar.is-critical .gb-time-bar-fill { background: #FFB35C; }

.gb-time-bar-label {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    line-height: 20px;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--accent-dark);
}

/* ── Play area ────────────────────────────────────────────────────────────
   `position: relative` so .gb-overlay can cover exactly this area (board +
   controls), not the colored header above it. The game's own board/piece
   markup goes inside here. ─────────────────────────────────────────────── */

.gb-play-wrap {
    position: relative;
    background: var(--card);
    padding: 18px;
}

.gb-controls { display: flex; justify-content: center; }

/* Result shown ON the board, not as text underneath it. */
.gb-overlay {
    position: absolute;
    inset: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 16px;
    z-index: 5;
}

.gb-overlay.hidden { display: none; }

.gb-overlay h3 { margin-bottom: 8px; }
.gb-overlay p  { color: var(--muted); margin-bottom: 16px; }