/* ==========================================================================
   BoardVerse — app styles (mobile-first, dark, app-like)
   --------------------------------------------------------------------------
   Bootstrap 5 is loaded from a CDN for its reset/grid, but every layout
   utility this app relies on is (re)defined below so the interface stays
   correct even if the CDN is slow or blocked.
   ========================================================================== */

/* --- Self-contained utility layer (Bootstrap-compatible names) ----------- */
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.w-100 { width: 100% !important; }

.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.form-label { display: inline-block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; }
.form-control, .form-select { display: block; width: 100%; }
.form-text { margin-top: .25rem; font-size: .8rem; }

.alert { position: relative; padding: 12px 14px; margin-bottom: 1rem; border: 1px solid transparent; }
.alert-danger { color: #ffb3ae; background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .4); }
.alert-success { color: #a5e6b0; background: rgba(63, 185, 80, .12); border-color: rgba(63, 185, 80, .4); }

button { font-family: inherit; }
.btn-bv, .btn-ghost { display: inline-block; text-align: center; cursor: pointer; }
.w-100.btn-bv, .w-100.btn-ghost, .btn-bv.w-100, .btn-ghost.w-100 { display: block; }


:root {
    --bv-bg: #0d1117;
    --bv-surface: #161b22;
    --bv-surface-2: #1f2630;
    --bv-border: #2d333b;
    --bv-text: #e6edf3;
    --bv-muted: #8b949e;
    --bv-primary: #4f8cff;
    --bv-primary-2: #6f6bff;
    --bv-accent: #ffb020;
    --bv-win: #3fb950;
    --bv-loss: #f85149;
    --bv-draw: #d29922;
    --bv-nav-h: 64px;
    --bv-radius: 16px;
}

* { box-sizing: border-box; }

html, body {
    background: var(--bv-bg);
    color: var(--bv-text);
    -webkit-tap-highlight-color: transparent;
}

/* Touch: disable double-tap-to-zoom and the ~300ms tap delay on interactive
   elements. Without this, iOS Safari can zoom/pan the board on a quick second
   tap — making a tap land on the wrong column — and delays single taps. */
button, a, .btn-bv, .btn-ghost, .seg button, .game-card, .bottom-nav__item,
.ttt-cell, .c4-cell, .rv-cell, .gk-cell, .chess-sq, .ck-sq, .promo-choice, .die,
.ttt-board, .c4-board, .rv-board, .gk-board, .chess-board, .ck-board, .yz-card {
    touch-action: manipulation;
}

body {
    min-height: 100dvh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding-bottom: calc(var(--bv-nav-h) + env(safe-area-inset-bottom));
    overscroll-behavior-y: none;
}

.app-shell {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px 16px 8px;
}

a { color: var(--bv-primary); text-decoration: none; }

.text-muted-2 { color: var(--bv-muted) !important; }

/* --- App bar ------------------------------------------------------------- */
.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.app-bar__title { font-size: 1.4rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.app-bar__title .grad { background: linear-gradient(90deg, var(--bv-primary), var(--bv-primary-2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Cards --------------------------------------------------------------- */
.card-bv {
    background: var(--bv-surface);
    border: 1px solid var(--bv-border);
    border-radius: var(--bv-radius);
    padding: 16px;
}
.card-bv + .card-bv { margin-top: 14px; }

/* --- Stat pills ---------------------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
    background: var(--bv-surface-2);
    border: 1px solid var(--bv-border);
    border-radius: 14px;
    padding: 12px;
    text-align: center;
}
.stat__value { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.stat__label { font-size: .72rem; color: var(--bv-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }

/* --- Game grid ----------------------------------------------------------- */
.game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.game-card {
    background: linear-gradient(160deg, var(--bv-surface-2), var(--bv-surface));
    border: 1px solid var(--bv-border);
    border-radius: var(--bv-radius);
    padding: 18px 14px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 128px;
    transition: transform .12s ease, border-color .12s ease;
    color: var(--bv-text);
    position: relative;
}
.game-card:active { transform: scale(.97); }
.game-card.is-locked { opacity: .55; }
.game-card__icon { font-size: 2.2rem; }
.game-card__name { font-weight: 700; }
.game-card__desc { font-size: .78rem; color: var(--bv-muted); }
.badge-soon {
    position: absolute; top: 10px; right: 10px;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .05em;
    background: var(--bv-surface); color: var(--bv-accent);
    border: 1px solid var(--bv-border); padding: 3px 7px; border-radius: 999px;
}

/* --- Buttons ------------------------------------------------------------- */
.btn-bv {
    --bs-btn-color: #fff;
    background: linear-gradient(90deg, var(--bv-primary), var(--bv-primary-2));
    border: none; color: #fff; font-weight: 700; border-radius: 12px; padding: 12px 16px;
}
.btn-bv:hover, .btn-bv:focus { color: #fff; filter: brightness(1.05); }
.btn-ghost {
    background: var(--bv-surface-2); border: 1px solid var(--bv-border);
    color: var(--bv-text); border-radius: 12px; padding: 10px 14px; font-weight: 600;
}
.btn-ghost:hover { color: var(--bv-text); border-color: var(--bv-primary); }

/* --- Segmented control --------------------------------------------------- */
.seg {
    display: flex; background: var(--bv-surface-2); border: 1px solid var(--bv-border);
    border-radius: 12px; padding: 4px; gap: 4px;
}
.seg button {
    flex: 1; border: none; background: transparent; color: var(--bv-muted);
    padding: 8px 6px; border-radius: 9px; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.seg button.is-active { background: var(--bv-primary); color: #fff; }

/* --- Bottom navigation --------------------------------------------------- */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(var(--bv-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex; align-items: stretch;
    background: rgba(22, 27, 34, .92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--bv-border);
}
.bottom-nav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--bv-muted); font-size: .66rem; font-weight: 600;
}
.bottom-nav__item.is-active { color: var(--bv-primary); }
.bottom-nav__icon { font-size: 1.25rem; line-height: 1; }
.bottom-nav__item--cta .bottom-nav__icon {
    background: linear-gradient(90deg, var(--bv-primary), var(--bv-primary-2));
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: -18px; box-shadow: 0 6px 16px rgba(79,140,255,.4); color: #fff;
}

/* --- Auth screens -------------------------------------------------------- */
.auth-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .mark { font-size: 3rem; }
.auth-logo h1 { font-weight: 800; margin-top: 8px; }
.form-control, .form-select {
    background: var(--bv-surface-2); border: 1px solid var(--bv-border); color: var(--bv-text);
    border-radius: 12px; padding: 12px 14px;
}
.form-control:focus, .form-select:focus {
    background: var(--bv-surface-2); color: var(--bv-text);
    border-color: var(--bv-primary); box-shadow: 0 0 0 .2rem rgba(79,140,255,.2);
}

/* --- Alerts -------------------------------------------------------------- */
.bv-alert { border-radius: 12px; font-size: .88rem; }

/* --- Match history rows -------------------------------------------------- */
.history-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 4px;
    border-bottom: 1px solid var(--bv-border);
}
.history-row:last-child { border-bottom: none; }
.history-row__icon { font-size: 1.5rem; }
.history-row__main { flex: 1; min-width: 0; }
.history-row__title { font-weight: 600; }
.history-row__sub { font-size: .75rem; color: var(--bv-muted); }
.result-tag { font-weight: 800; font-size: .8rem; padding: 3px 10px; border-radius: 999px; }
.result-win  { color: var(--bv-win);  background: rgba(63,185,80,.12); }
.result-loss { color: var(--bv-loss); background: rgba(248,81,73,.12); }
.result-draw { color: var(--bv-draw); background: rgba(210,153,34,.12); }
.delta-pos { color: var(--bv-win); }
.delta-neg { color: var(--bv-loss); }

/* --- Leaderboard --------------------------------------------------------- */
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--bv-border); }
.lb-row:last-child { border-bottom: none; }
.lb-row.is-me { background: rgba(79,140,255,.08); border-radius: 10px; }
.lb-rank { width: 32px; text-align: center; font-weight: 800; color: var(--bv-muted); }
.lb-rank.top1 { color: #ffd54a; } .lb-rank.top2 { color: #c8d0dc; } .lb-rank.top3 { color: #e08a4b; }
.lb-name { flex: 1; font-weight: 600; }
.lb-rating { font-weight: 800; }

/* ==========================================================================
   Game boards
   ========================================================================== */
.game-stage { text-align: center; }
.turn-banner {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bv-surface-2); border: 1px solid var(--bv-border);
    border-radius: 999px; padding: 8px 16px; font-weight: 600; margin-bottom: 16px;
}
.turn-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bv-primary); }

/* Tic Tac Toe */
.ttt-board {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    width: min(100%, 360px); margin: 0 auto; aspect-ratio: 1;
}
.ttt-cell {
    background: var(--bv-surface-2); border: 1px solid var(--bv-border);
    border-radius: 14px; font-size: clamp(2.2rem, 14vw, 4rem); font-weight: 800;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    aspect-ratio: 1; user-select: none;
}
.ttt-cell.x { color: var(--bv-primary); }
.ttt-cell.o { color: var(--bv-accent); }
.ttt-cell.win { background: rgba(63,185,80,.18); border-color: var(--bv-win); }

/* Connect Four */
.c4-board {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
    background: #1b3a6b; border-radius: 16px; padding: 8px;
    width: min(100%, 420px); margin: 0 auto;
}
.c4-cell {
    aspect-ratio: 1; border-radius: 50%; background: var(--bv-bg);
    cursor: pointer; transition: transform .08s ease;
}
.c4-cell.p1 { background: radial-gradient(circle at 35% 30%, #ff8a8a, #e5484d); }
.c4-cell.p2 { background: radial-gradient(circle at 35% 30%, #ffe08a, #f2b705); }
.c4-cell.win { box-shadow: 0 0 0 3px var(--bv-win) inset; }
.c4-col-hint { transform: translateY(-3px); }

/* Reversi */
.rv-board {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px;
    background: #14612f; border: 3px solid #0d3d1e; border-radius: 12px; padding: 6px;
    width: min(100%, 440px); margin: 0 auto;
}
.rv-cell {
    aspect-ratio: 1; background: #1a7d3d; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.rv-disc { width: 78%; height: 78%; border-radius: 50%; }
.rv-disc.b { background: radial-gradient(circle at 34% 30%, #4a4a4a, #0b0b0b); }
.rv-disc.w { background: radial-gradient(circle at 34% 30%, #ffffff, #c9d1d9); }
.rv-cell.legal::after {
    content: ''; width: 26%; height: 26%; border-radius: 50%;
    background: rgba(255,255,255,.35);
}
.rv-score { display: flex; gap: 18px; justify-content: center; margin-bottom: 14px; }
.rv-score .chip { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.rv-score .dot { width: 18px; height: 18px; border-radius: 50%; }
.rv-score .dot.b { background: #111; border: 1px solid #555; }
.rv-score .dot.w { background: #f0f0f0; }

/* Gomoku */
.gk-board {
    display: grid; grid-template-columns: repeat(15, 1fr);
    width: min(100%, 460px); margin: 0 auto;
    background: #d9a441; border: 4px solid #b5822c; border-radius: 8px;
    padding: 3px; gap: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.gk-cell {
    aspect-ratio: 1; position: relative; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 0.5px rgba(90,60,10,.5);
}
.gk-stone {
    width: 82%; height: 82%; border-radius: 50%; z-index: 1;
}
.gk-stone.b { background: radial-gradient(circle at 34% 30%, #4a4a4a, #060606); }
.gk-stone.w { background: radial-gradient(circle at 34% 30%, #ffffff, #c2c2c2); }
.gk-cell.last::before {
    content: ''; position: absolute; inset: 12%; border-radius: 50%;
    box-shadow: 0 0 0 2px #4f8cff; z-index: 2;
}
.gk-cell.win .gk-stone { box-shadow: 0 0 0 3px var(--bv-win); }

/* Checkers */
.ck-board {
    display: grid; grid-template-columns: repeat(8, 1fr);
    width: min(100%, 440px); margin: 0 auto;
    border: 4px solid #6b4423; border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.ck-sq {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    position: relative;
}
.ck-sq.light { background: #e8d3b0; }
.ck-sq.dark  { background: #7a5230; cursor: pointer; }
.ck-sq.selected { background: #f2c14e; }
.ck-sq.last { box-shadow: inset 0 0 0 3px rgba(242,193,78,.6); }
.ck-sq.movable .ck-piece { box-shadow: 0 0 0 3px rgba(79,140,255,.7), 0 2px 4px rgba(0,0,0,.5); }
.ck-sq.target::after {
    content: ''; width: 34%; height: 34%; border-radius: 50%;
    background: rgba(79,140,255,.65); position: absolute;
}
.ck-piece {
    width: 76%; height: 76%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: rgba(255,255,255,.85);
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.ck-piece.r { background: radial-gradient(circle at 35% 30%, #ff6b6b, #c0392b); }
.ck-piece.b { background: radial-gradient(circle at 35% 30%, #4a4a4a, #101010); }
.ck-piece.king { box-shadow: 0 0 0 2px #ffd54a inset, 0 2px 4px rgba(0,0,0,.5); }

/* Chess */
.chess-board {
    display: grid; grid-template-columns: repeat(8, 1fr);
    width: min(100%, 440px); margin: 0 auto;
    border: 4px solid #0d3d1e; border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.chess-sq {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; user-select: none;
}
.chess-sq.light { background: #ced9e0; }
.chess-sq.dark  { background: #5f7a8a; }
.chess-sq.selected { background: #f2c14e !important; }
.chess-sq.last { box-shadow: inset 0 0 0 3px rgba(242,193,78,.7); }
.chess-sq.check { background: #e5484d !important; }
.chess-sq.target::after {
    content: ''; width: 30%; height: 30%; border-radius: 50%;
    background: rgba(20,97,47,.5); position: absolute;
}
.chess-sq.target-capture::after {
    content: ''; position: absolute; inset: 6%; border-radius: 50%;
    border: 4px solid rgba(20,97,47,.55);
}
.chess-pc {
    font-size: clamp(1.7rem, 8vw, 2.5rem); line-height: 1;
    position: relative; z-index: 1;
}
.chess-pc.w { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.5); }
.chess-pc.b { color: #1a1a1a; text-shadow: 0 1px 1px rgba(255,255,255,.25); }

.promo-picker {
    margin: 16px auto 0; max-width: 300px;
    background: var(--bv-surface-2); border: 1px solid var(--bv-border);
    border-radius: 14px; padding: 12px;
}
.promo-title { font-weight: 600; margin-bottom: 8px; }
.promo-row { display: flex; gap: 8px; justify-content: center; }
.promo-choice {
    flex: 1; background: #ced9e0; border: 1px solid var(--bv-border);
    border-radius: 10px; padding: 8px 0; cursor: pointer;
}
.promo-choice:active { transform: scale(.95); }

/* Yatzy (5-dice) */
.yz-stage { text-align: center; }
.yz-dice { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }
/* Pips are drawn with radial-gradient backgrounds (no child elements), so the
   die has zero min-content width and shrinks to fit — and the pips always
   render regardless of grid track sizing. */
.die {
    flex: 1 1 0; min-width: 0; max-width: 56px; aspect-ratio: 1;
    border-radius: 14px; cursor: pointer;
    background-color: #eef2f6; background-repeat: no-repeat;
    box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: transform .1s ease;
}
.die:active { transform: scale(.94); }
.die.held { outline: 3px solid var(--bv-primary); outline-offset: 2px; }
.die.blank { background-color: #2a313c; box-shadow: inset 0 0 0 1px var(--bv-border); cursor: default; }

/* Pip layouts. Positions: TL/TR/ML/MR/C/BL/BR. Pip radius ~5px. */
.die[data-val="1"] { background-image: radial-gradient(circle 5px at 50% 50%, #1b2430 86%, transparent 88%); }
.die[data-val="2"] { background-image:
    radial-gradient(circle 5px at 27% 27%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 73%, #1b2430 86%, transparent 88%); }
.die[data-val="3"] { background-image:
    radial-gradient(circle 5px at 27% 27%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 50% 50%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 73%, #1b2430 86%, transparent 88%); }
.die[data-val="4"] { background-image:
    radial-gradient(circle 5px at 27% 27%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 27%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 27% 73%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 73%, #1b2430 86%, transparent 88%); }
.die[data-val="5"] { background-image:
    radial-gradient(circle 5px at 27% 27%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 27%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 50% 50%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 27% 73%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 73%, #1b2430 86%, transparent 88%); }
.die[data-val="6"] { background-image:
    radial-gradient(circle 5px at 27% 25%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 25%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 27% 50%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 50%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 27% 75%, #1b2430 86%, transparent 88%),
    radial-gradient(circle 5px at 73% 75%, #1b2430 86%, transparent 88%); }

.yz-card { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .9rem; }
.yz-card th, .yz-card td { padding: 7px 8px; border-bottom: 1px solid var(--bv-border); }
.yz-card thead th { color: var(--bv-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.yz-card thead th.active { color: var(--bv-primary); }
.yz-cat { text-align: left; color: var(--bv-text); }
.yz-cell { text-align: center; width: 26%; font-weight: 700; }
.yz-cell.active { background: rgba(79,140,255,.06); }
.yz-cell.pickable { cursor: pointer; }
.yz-cell.pickable:active { background: rgba(79,140,255,.2); }
.yz-preview { color: var(--bv-primary); font-weight: 800; }
.yz-empty { color: var(--bv-muted); }
.yz-divider td { background: var(--bv-surface-2); font-size: .8rem; }
.yz-sub { text-align: center; color: var(--bv-accent); font-weight: 700; font-size: .8rem; }
.yz-totalrow td { border-top: 2px solid var(--bv-border); border-bottom: none; font-size: 1rem; }
.yz-total { text-align: center; font-weight: 800; color: var(--bv-text); }

/* Online multiplayer */
.room-code {
    font-size: 2.2rem; font-weight: 800; letter-spacing: .35em;
    padding: 14px 10px 14px 20px; margin-top: 8px;
    background: var(--bv-surface-2); border: 1px dashed var(--bv-border);
    border-radius: 12px; color: var(--bv-primary);
}
.join-row { display: flex; gap: 8px; }
.join-row input {
    text-transform: uppercase; letter-spacing: .2em; font-weight: 700; text-align: center;
}
.online-hint { font-size: .8rem; color: var(--bv-muted); }

/* Replay player */
.replay-controls { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; }
.replay-btn {
    background: var(--bv-surface-2); border: 1px solid var(--bv-border); color: var(--bv-text);
    border-radius: 10px; padding: 8px 12px; font-size: 1rem; cursor: pointer; min-width: 44px;
}
.replay-btn:active { transform: scale(.94); }
.replay-btn--play { background: linear-gradient(90deg, var(--bv-primary), var(--bv-primary-2)); border: none; color: #fff; }
.replay-slider { width: min(100%, 440px); margin: 14px auto 0; display: block; accent-color: var(--bv-primary); }
.replay-counter { text-align: center; color: var(--bv-muted); font-size: .85rem; margin-top: 8px; }

/* Result modal */
.result-emoji { font-size: 3.5rem; }

/* Admin backend */
.admin-body { padding-bottom: 0; }
.admin-topbar { position: sticky; top: 0; z-index: 20; background: var(--bv-surface); border-bottom: 1px solid var(--bv-border); }
.admin-topbar__inner { max-width: 1000px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.admin-brand { font-weight: 800; }
.admin-topbar__right { display: flex; align-items: center; gap: 12px; }
.admin-tabs { max-width: 1000px; margin: 0 auto; padding: 0 8px; display: flex; gap: 4px; overflow-x: auto; }
.admin-tab { padding: 10px 14px; color: var(--bv-muted); font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.admin-tab.is-active { color: var(--bv-primary); border-bottom-color: var(--bv-primary); }
.admin-main { max-width: 1000px; margin: 0 auto; padding: 18px 16px 60px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th, .admin-table td { padding: 10px 10px; border-bottom: 1px solid var(--bv-border); text-align: left; white-space: nowrap; }
.admin-table th { color: var(--bv-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.admin-table tr:hover td { background: rgba(255,255,255,.02); }
.admin-badge { font-size: .68rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bv-border); font-weight: 700; }
.admin-badge.on { color: var(--bv-win); border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.1); }
.admin-badge.off { color: var(--bv-muted); }
.admin-badge.premium { color: var(--bv-accent); border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.1); }
.admin-inline { display: inline; }
.btn-sm { padding: 5px 10px; font-size: .78rem; border-radius: 8px; }
.btn-danger { background: rgba(248,81,73,.14); border: 1px solid rgba(248,81,73,.4); color: #ff8a84; }
.admin-search { display: flex; gap: 8px; margin-bottom: 16px; max-width: 420px; }

/* Landing page */
.landing { max-width: 960px; margin: 0 auto; }
.hero { text-align: center; padding: 36px 0 20px; }
.hero__mark { font-size: 3.6rem; line-height: 1; }
.hero h1 { font-size: clamp(1.9rem, 6.5vw, 3rem); font-weight: 900; letter-spacing: -.02em; margin: 10px 0 0; }
.hero h1 .grad { background: linear-gradient(90deg, var(--bv-primary), var(--bv-primary-2));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: var(--bv-muted); max-width: 560px; margin: 14px auto 0; font-size: 1.02rem; line-height: 1.5; }
.hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero__cta .btn-bv, .hero__cta .btn-ghost { padding: 12px 22px; }
.hero__trust { margin-top: 16px; color: var(--bv-muted); font-size: .82rem; }

.landing-section { margin: 44px 0; }
.landing-section h2 { text-align: center; font-weight: 800; font-size: 1.4rem; margin-bottom: 6px; }
.landing-section .sub { text-align: center; color: var(--bv-muted); margin-bottom: 20px; font-size: .92rem; }

.landing-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.landing-game {
    background: linear-gradient(160deg, var(--bv-surface-2), var(--bv-surface));
    border: 1px solid var(--bv-border); border-radius: 14px; padding: 16px 10px; text-align: center;
}
.landing-game__icon { font-size: 2rem; }
.landing-game__name { font-weight: 700; font-size: .9rem; margin-top: 6px; }
.landing-game__soon { font-size: .68rem; color: var(--bv-accent); }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.feature { background: var(--bv-surface); border: 1px solid var(--bv-border); border-radius: var(--bv-radius); padding: 18px; }
.feature__icon { font-size: 1.9rem; }
.feature__title { font-weight: 700; margin: 8px 0 4px; }
.feature__text { color: var(--bv-muted); font-size: .86rem; line-height: 1.5; }

.landing-footer { text-align: center; padding: 30px 16px 40px; border-top: 1px solid var(--bv-border); color: var(--bv-muted); margin-top: 40px; font-size: .82rem; }
.landing-footer a { color: var(--bv-muted); }

/* Legal / content pages */
.legal { line-height: 1.6; }
.legal h2 { font-size: 1.05rem; font-weight: 700; margin: 18px 0 6px; }
.legal p, .legal li { color: var(--bv-muted); font-size: .9rem; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--bv-primary); }

/* Utility */
.fade-in { animation: bvFade .25s ease; }
@keyframes bvFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.disabled-board { pointer-events: none; opacity: .8; }