/* ===== Brain Arcade — global styles ===== */
:root {
    --bg: #0B1020;
    --bg-2: #141B33;
    --card: #171F3A;
    --card-2: #1E2748;
    --text: #EEF2FF;
    --muted: #98A2C7;
    --line: rgba(255, 255, 255, 0.08);
    --accent: #7C5CFF;
    --accent-2: #22D3EE;
    --good: #34D399;
    --bad: #F87171;
    --warn: #FBBF24;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
    --bg: #F4F6FF;
    --bg-2: #E9ECFB;
    --card: #FFFFFF;
    --card-2: #F1F3FF;
    --text: #131832;
    --muted: #5A6488;
    --line: rgba(0, 0, 0, 0.08);
    --shadow: 0 10px 30px rgba(60, 70, 120, 0.15);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(124, 92, 255, 0.20), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(34, 211, 238, 0.16), transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    overflow-x: hidden;
}

/* ===== Top bar ===== */
#topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + var(--safe-top)) 14px 10px;
    background: linear-gradient(to bottom, rgba(11, 16, 32, 0.92), rgba(11, 16, 32, 0.55) 70%, transparent);
    backdrop-filter: blur(8px);
}
:root[data-theme="light"] #topbar {
    background: linear-gradient(to bottom, rgba(244, 246, 255, 0.94), rgba(244, 246, 255, 0.6) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: 0.2px; flex: 1; }
.brand-mark { font-size: 22px; }
.brand-text { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.icon-btn {
    width: 42px; height: 42px; flex: 0 0 auto;
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
    border-radius: 12px;
    font-size: 20px;
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s;
}
.icon-btn:active { transform: scale(0.92); }

/* ===== View / layout ===== */
#view { padding: 8px 14px calc(24px + var(--safe-bottom)); max-width: 720px; margin: 0 auto; }

.hero {
    margin: 6px 2px 16px;
    padding: 18px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(34, 211, 238, 0.20));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.hero h1 { margin: 0 0 4px; font-size: 22px; }
.hero p { margin: 0; color: var(--muted); font-size: 13.5px; }

.section-label { margin: 18px 4px 10px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

/* ===== Game grid ===== */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.game-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    box-shadow: var(--shadow);
    transition: transform 0.12s ease;
}
.game-card:active { transform: scale(0.96); }
.game-card .art {
    position: absolute; inset: 0;
    opacity: 0.92;
    z-index: 0;
}
.game-card .glass {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.45));
    z-index: 1;
}
.game-card .ico { position: relative; z-index: 2; font-size: 34px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.game-card .meta { position: relative; z-index: 2; }
.game-card .name { font-weight: 800; font-size: 15.5px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.game-card .best { font-size: 11.5px; opacity: 0.9; margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ===== Game host ===== */
.game-host {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.game-topline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.stat {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 12px;
    text-align: center;
    min-width: 74px;
    flex: 1;
}
.stat .k { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: 19px; font-weight: 800; }

.board-wrap {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
    max-width: 100%;
}
canvas { display: block; touch-action: none; border-radius: 10px; }

.btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--card-2);
    color: var(--text);
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.2s;
}
.btn:active { transform: scale(0.95); }
.btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; border: none; }
.btn.ghost { background: transparent; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pad {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 8px;
    justify-content: center;
}
.pad .btn { padding: 0; font-size: 24px; }

/* Overlay (game over / win) */
.overlay {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    background: rgba(5, 8, 18, 0.72);
    backdrop-filter: blur(4px);
    padding: 24px;
}
.overlay .panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 22px;
    text-align: center;
    max-width: 340px;
    width: 100%;
    box-shadow: var(--shadow);
}
.overlay .panel .big { font-size: 44px; margin-bottom: 6px; }
.overlay .panel h2 { margin: 0 0 6px; font-size: 24px; }
.overlay .panel p { margin: 0 0 16px; color: var(--muted); }

/* ===== Settings ===== */
.settings-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; box-shadow: var(--shadow); }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: none; }
.setting-row .s-ico { font-size: 20px; width: 26px; text-align: center; }
.setting-row .s-text { flex: 1; }
.setting-row .s-text .s-title { font-weight: 700; font-size: 15px; }
.setting-row .s-text .s-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; }
.switch input { display: none; }
.switch .track { position: absolute; inset: 0; background: var(--card-2); border: 1px solid var(--line); border-radius: 20px; transition: background 0.2s; }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; }
.switch input:checked + .track { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.switch input:checked + .track + .thumb { transform: translateX(20px); background: #fff; }

.seg { display: flex; background: var(--card-2); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: none; background: transparent; color: var(--muted); padding: 8px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button.active { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

.small-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }

/* ===== Toast ===== */
.toast {
    position: fixed;
    left: 50%; bottom: calc(28px + var(--safe-bottom));
    transform: translateX(-50%) translateY(20px);
    background: var(--card-2);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 60;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Utility grids used by several games */
.cells { display: grid; gap: 6px; }
.fade-in { animation: fade 0.25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pop { animation: pop 0.25s ease; }
@keyframes pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* ===== View transition ===== */
.view-enter { animation: viewIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }

/* ===== Staggered card entrance ===== */
.card-enter { animation: cardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }
.game-card { transition: transform 0.14s ease, box-shadow 0.2s ease; }
.game-card:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.42); }
.game-card .ico { transition: transform 0.2s ease; }
.game-card:active .ico { transform: scale(1.18) rotate(-6deg); }

/* Shimmer sweep on cards */
.game-card::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform 0.6s ease;
}
.game-card:active::after { transform: translateX(120%); }

/* ===== Bigger, easier controls ===== */
.btn { min-height: 48px; font-size: 15px; }
.icon-btn { width: 46px; height: 46px; font-size: 22px; }
.pad { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); }
.pad .btn { font-size: 26px; min-height: 0; }
.small-note { font-size: 13px; }
.stat .v { font-size: 21px; }

/* ===== Tablet scaling ===== */
.tablet #view { max-width: 900px; }
.tablet body { font-size: 18px; }
.tablet .brand { font-size: 23px; }
.tablet .hero h1 { font-size: 28px; }
.tablet .hero p { font-size: 16px; }
.tablet .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tablet .game-card { min-height: 156px; padding: 18px; }
.tablet .game-card .ico { font-size: 42px; }
.tablet .game-card .name { font-size: 18px; }
.tablet .btn { min-height: 56px; font-size: 17px; padding: 14px 20px; }
.tablet .pad { grid-template-columns: repeat(3, 78px); grid-template-rows: repeat(3, 78px); }
.tablet .stat { padding: 12px 16px; }
.tablet .stat .v { font-size: 26px; }
.tablet .icon-btn { width: 54px; height: 54px; font-size: 26px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tablet .grid { grid-template-columns: repeat(4, 1fr); } }

/* ===== Status dot ===== */
.status-dot { width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; vertical-align: middle; background: var(--muted); }
.status-dot.online { background: var(--good); box-shadow: 0 0 8px var(--good); animation: pulse 2s infinite; }
.status-dot.offline { background: var(--warn); }
.status-dot.local { background: #38BDF8; box-shadow: 0 0 8px #38BDF8; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== Text input rows ===== */
.setting-row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.setting-row.col .row-head { display: flex; align-items: center; gap: 12px; }
.text-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--card-2); color: var(--text); font-size: 15px;
    -webkit-user-select: text; user-select: text;
}
.text-input:focus { outline: none; border-color: var(--accent); }

/* ===== Lock screen ===== */
.lock-screen {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    background: radial-gradient(800px 500px at 50% 20%, rgba(124,92,255,0.25), transparent), rgba(6, 9, 20, 0.96);
    backdrop-filter: blur(8px); text-align: center; padding: 30px;
}
.lock-inner .lock-ico { font-size: 64px; margin-bottom: 10px; animation: pulse 2.4s infinite; }
.lock-inner h2 { margin: 0 0 8px; font-size: 30px; color: #fff; }
.lock-inner p { margin: 0; color: var(--muted); max-width: 320px; }

/* Confetti-ish celebration on overlay big emoji */
.overlay .panel .big { animation: bounce 0.6s ease; }
@keyframes bounce { 0% { transform: scale(0.3) rotate(-12deg); } 55% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

/* ===== How-to-Play ===== */
.help-fab {
    position: fixed; right: 16px; bottom: calc(18px + var(--safe-bottom)); z-index: 45;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    font-size: 26px; font-weight: 800; box-shadow: 0 8px 24px rgba(124,92,255,0.5);
    animation: fabIn 0.4s ease both, fabPulse 2.6s ease-in-out 1.2s infinite;
}
.help-fab:active { transform: scale(0.9); }
@keyframes fabIn { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes fabPulse { 0%,100% { box-shadow: 0 8px 24px rgba(124,92,255,0.5); } 50% { box-shadow: 0 8px 30px rgba(34,211,238,0.7); } }
.tablet .help-fab { width: 64px; height: 64px; font-size: 32px; }

.help-overlay .panel { animation: fade 0.25s ease both; }
.help-goal { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; color: var(--text); }
.help-steps { margin: 6px 0 0; padding-left: 22px; }
.help-steps li { margin: 9px 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.help-steps li::marker { color: var(--accent-2); font-weight: 800; }

/* Chess selected-piece name tag */
.piece-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 15px;
    border-bottom: 3px solid rgba(0,0,0,0.25); animation: pop 0.25s ease;
}

/* ===== Rush Hour vehicles ===== */
.rh-car.sel { transform: scale(1.06); z-index: 5; box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #22D3EE, 0 10px 18px rgba(0,0,0,0.55) !important; }
.rh-arrow {
    z-index: 6; border: none; border-radius: 50%;
    background: rgba(34,211,238,0.95); color: #062634; font-weight: 900; font-size: 22px;
    box-shadow: 0 0 16px #22D3EE; cursor: pointer; display: grid; place-items: center; padding: 0;
    animation: rhArrow 1s ease-in-out infinite;
}
.rh-arrow:active { transform: scale(0.88); }
@keyframes rhArrow { 0%,100% { box-shadow: 0 0 10px #22D3EE; } 50% { box-shadow: 0 0 22px #22D3EE, 0 0 6px #fff; } }

/* ===== PIN keypad ===== */
.pin-dots { display: flex; gap: 12px; justify-content: center; margin: 8px 0 16px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); transition: background 0.15s; }
.pin-dot.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key { padding: 16px 0; font-size: 24px; font-weight: 800; border: 1px solid var(--line); background: var(--card-2); color: var(--text); border-radius: 14px; cursor: pointer; }
.pin-key:active { transform: scale(0.92); }
.pin-key.alt { background: var(--card); color: var(--accent-2); }

/* ===== Difficulty / resume chooser ===== */
.chooser { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 12px; text-align: center; }
.chooser-ico { font-size: 54px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.chooser h2 { margin: 6px 0 0; font-size: 24px; }
.diff-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 360px; margin-top: 14px; }
.diff-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; text-align: left; transition: transform 0.1s, border-color 0.15s; box-shadow: var(--shadow); }
.diff-card.sel { border-color: var(--accent); }
.diff-card:active { transform: scale(0.97); }
.diff-emoji { font-size: 32px; flex: 0 0 auto; }
.diff-main { display: flex; flex-direction: column; }
.diff-label { font-weight: 800; font-size: 19px; }
.diff-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ===== Battery indicator (top-left) ===== */
.battery { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; padding: 7px 9px; border-radius: 11px; background: var(--card); border: 1px solid var(--line); flex: 0 0 auto; }
.battery .bat-ico { font-size: 15px; line-height: 1; }
.tablet .battery { font-size: 15px; padding: 9px 11px; }

/* ===== Game on/off manager ===== */
.gm-row { display: flex; align-items: center; gap: 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.gm-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; flex: 0 0 auto; color: #fff; }
.gm-name { flex: 1; font-weight: 700; font-size: 15px; }

/* ============================================================
   Remote / D-pad focus
   A visible selection ring so a TV remote or arrow keys are usable.
   ============================================================ */
.nav-focus { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.game-card.nav-focus {
    outline: 4px solid #fff;
    outline-offset: 2px;
    transform: scale(1.05);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
    z-index: 3;
}
.diff-card.nav-focus, .btn.nav-focus, .icon-btn.nav-focus { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.switch.nav-focus { outline: 3px solid var(--accent-2); outline-offset: 4px; border-radius: 20px; }
.pin-key.nav-focus { outline: 3px solid var(--accent-2); outline-offset: 2px; }

/* ============================================================
   TV mode — big screen, 10-foot layout, overscan-safe
   ============================================================ */
:root.tv body { font-size: 18px; }
:root.tv #topbar { padding: calc(2.6vh + var(--safe-top)) 5vw 1.4vh; }
:root.tv #view { max-width: 1500px; padding: 2vh 5vw calc(4vh + var(--safe-bottom)); }
:root.tv .brand { font-size: 30px; }
:root.tv .brand-mark { font-size: 34px; }
:root.tv .icon-btn { width: 62px; height: 62px; font-size: 28px; border-radius: 16px; }
:root.tv .battery { font-size: 19px; padding: 11px 14px; border-radius: 14px; }
:root.tv .battery .bat-ico { font-size: 21px; }

:root.tv .hero { padding: 26px 30px; }
:root.tv .hero h1 { font-size: 38px; }
:root.tv .hero p { font-size: 20px; }
:root.tv .section-label { font-size: 16px; margin: 24px 4px 14px; }

:root.tv .grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (min-width: 1500px) { :root.tv .grid { grid-template-columns: repeat(5, 1fr); } }
:root.tv .game-card { min-height: 200px; padding: 22px; border-radius: 22px; }
:root.tv .game-card .ico { font-size: 54px; }
:root.tv .game-card .name { font-size: 23px; }
:root.tv .game-card .best { font-size: 15px; }

:root.tv .btn { min-height: 62px; font-size: 20px; padding: 15px 28px; border-radius: 16px; }
:root.tv .settings-group { border-radius: 22px; }
:root.tv .setting-row { padding: 22px 24px; }
:root.tv .setting-row .s-ico { font-size: 28px; width: 38px; }
:root.tv .setting-row .s-text .s-title { font-size: 21px; }
:root.tv .setting-row .s-text .s-sub { font-size: 15px; }
:root.tv .seg button { font-size: 18px; padding: 14px; }
:root.tv .switch { width: 68px; height: 40px; }
:root.tv .switch .thumb { width: 32px; height: 32px; }
:root.tv .switch input:checked + .track + .thumb { transform: translateX(28px); }
:root.tv .text-input { font-size: 19px; padding: 14px 16px; }

:root.tv .overlay .panel { max-width: 620px; padding: 34px; border-radius: 26px; }
:root.tv .overlay .panel .big { font-size: 62px; }
:root.tv .overlay .panel h2 { font-size: 34px; }
:root.tv .overlay .panel p { font-size: 18px; }
:root.tv .help-steps li { font-size: 18px; }
:root.tv .chooser h2 { font-size: 34px; }
:root.tv .chooser-ico { font-size: 76px; }
:root.tv .diff-list { max-width: 520px; }
:root.tv .diff-card { padding: 22px 24px; }
:root.tv .diff-label { font-size: 24px; }
:root.tv .diff-sub { font-size: 16px; }
:root.tv .small-note { font-size: 16px; }
:root.tv .toast { font-size: 19px; padding: 16px 22px; }
:root.tv .help-fab { width: 66px; height: 66px; font-size: 30px; }
:root.tv .lock-inner h2 { font-size: 44px; }
:root.tv .lock-inner p { font-size: 20px; max-width: 520px; }

/* On a TV there is no touch — make the pointer disappear. */
:root.tv, :root.tv * { cursor: none; }

/* Keep in-game controls compact on TV: a 720p screen has to fit the board,
   the stat tiles and the buttons without scrolling. */
:root.tv .game-host .btn { min-height: 46px; font-size: 16px; padding: 10px 18px; border-radius: 12px; }
:root.tv .game-host .btn-row { gap: 8px; }
/* The on-screen D-pad is redundant on a TV — the remote already has one. */
:root.tv .game-host .pad { display: none; }

/* ===== Bubble Popper ===== */
.bp-question { text-align:center; font-size:30px; font-weight:800; letter-spacing:1px; margin-bottom:8px; color:var(--text); }
.bp-field { position:relative; width:100%; overflow:hidden; border-radius:14px;
    background:linear-gradient(180deg,#0d1b3a,#0b1020); border:1px solid var(--line); }
.bp-bubble { position:absolute; top:0; left:0; border:none; border-radius:50%; color:#08111f;
    font-weight:800; font-size:20px; cursor:pointer; padding:0;
    box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 -4px 10px rgba(0,0,0,.18);
    will-change:transform; }
.bp-bubble:active { filter:brightness(1.15); }
.bp-bubble.sel { outline:4px solid #fff; outline-offset:3px; }
.bp-burst { position:absolute; transform:translate(-50%,-50%); font-size:30px; pointer-events:none;
    animation:bpBurst .48s ease-out forwards; }
@keyframes bpBurst { from { transform:translate(-50%,-50%) scale(.5); opacity:1; }
                     to   { transform:translate(-50%,-50%) scale(1.7); opacity:0; } }
:root.tv .bp-question { font-size:40px; }
:root.tv .bp-bubble { font-size:26px; }

/* ===== Hero actions + time left ===== */
.hero-actions { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.hero-actions .btn { min-height:40px; padding:9px 16px; font-size:14px; }
.time-left { font-size:13px; color:var(--text); background:rgba(0,0,0,.25); border:1px solid var(--line);
    padding:7px 11px; border-radius:20px; font-weight:700; }

/* ===== Daily challenge ===== */
.daily-card { display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 2px 4px;
    border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow);
    background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(124,92,255,.20)); }
.daily-card.done { background:linear-gradient(135deg,rgba(52,211,153,.20),rgba(34,211,238,.16)); }
.daily-ico { font-size:34px; flex:0 0 auto; }
.daily-main { flex:1; min-width:0; }
.daily-label { font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:700; }
.daily-name { font-weight:800; font-size:18px; margin-top:1px; }
.daily-streak { font-size:12.5px; color:var(--muted); margin-top:2px; }
.daily-card .btn { min-height:42px; padding:10px 18px; flex:0 0 auto; }

/* ===== Favourite star on cards ===== */
.fav-btn { position:absolute; top:8px; right:8px; z-index:4; width:34px; height:34px; border-radius:50%;
    border:none; background:rgba(0,0,0,.35); color:#fff; font-size:17px; line-height:1; cursor:pointer;
    display:grid; place-items:center; padding:0; }
.fav-btn.on { background:rgba(0,0,0,.5); }
.fav-btn:active { transform:scale(.88); }

/* ===== Stats screen ===== */
.stat-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px) { .stat-tiles { grid-template-columns:repeat(4,1fr); } }
.stat-tile { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; text-align:center; box-shadow:var(--shadow); }
.stat-tile .st-v { font-size:24px; font-weight:800; }
.stat-tile .st-k { font-size:11.5px; color:var(--muted); margin-top:3px; }

.achv-grid { display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:560px) { .achv-grid { grid-template-columns:1fr 1fr; } }
.achv { display:flex; align-items:center; gap:12px; background:var(--card-2); border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; opacity:.55; }
.achv.got { opacity:1; border-color:var(--accent); background:var(--card); }
.achv-ico { font-size:24px; width:32px; text-align:center; flex:0 0 auto; }
.achv-name { font-weight:700; font-size:14.5px; }
.achv-desc { font-size:12px; color:var(--muted); }

.score-list { display:flex; flex-direction:column; gap:8px; }
.score-row { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:10px 12px; }
.sr-ico { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:21px; flex:0 0 auto; color:#fff; }
.sr-main { flex:1; min-width:0; }
.sr-name { font-weight:700; font-size:15px; }
.sr-sub { font-size:11.5px; color:var(--muted); margin-top:2px; }
.sr-best { text-align:right; flex:0 0 auto; }
.sr-bv { font-weight:800; font-size:17px; }
.sr-bk { font-size:10.5px; color:var(--muted); }

:root.tv .stat-tile .st-v { font-size:32px; }
:root.tv .stat-tile .st-k { font-size:15px; }
:root.tv .daily-name { font-size:24px; }
:root.tv .sr-name { font-size:19px; }
:root.tv .fav-btn { width:46px; height:46px; font-size:22px; }

/* ============================================================
   v1.9 visual refresh — extra themes + polished surfaces
   ============================================================ */
:root[data-theme="ocean"] {
    --bg:#07182A; --bg-2:#0B2438; --card:#0F2E47; --card-2:#143A57;
    --text:#EAF6FF; --muted:#8FB4CC; --line:rgba(255,255,255,.10);
    --accent:#22D3EE; --accent-2:#38BDF8;
}
:root[data-theme="candy"] {
    --bg:#1B0B23; --bg-2:#2A1136; --card:#331344; --card-2:#421A56;
    --text:#FFEEF9; --muted:#C79BD4; --line:rgba(255,255,255,.11);
    --accent:#F472B6; --accent-2:#C084FC;
}
:root[data-theme="forest"] {
    --bg:#071A14; --bg-2:#0B2A20; --card:#0F3527; --card-2:#154533;
    --text:#EAFFF4; --muted:#93C7AC; --line:rgba(255,255,255,.10);
    --accent:#34D399; --accent-2:#A3E635;
}
:root[data-theme="ocean"] body, :root[data-theme="candy"] body, :root[data-theme="forest"] body {
    background:
        radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%),
        var(--bg);
}
:root[data-theme="ocean"] #topbar, :root[data-theme="candy"] #topbar, :root[data-theme="forest"] #topbar {
    background:linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--bg) 55%, transparent) 70%, transparent);
}

/* --- surfaces get a touch more depth and rounder corners --- */
.hero { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent)); }
.game-card { border-radius:20px; }
.game-card .glass { background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.52)); }
.game-card .name { letter-spacing:.2px; }
.game-card:hover { transform:translateY(-2px); }
.btn { border-radius:14px; }
.btn.primary { box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.stat { border-radius:14px; }

/* --- level bar --- */
.level-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.level-badge { font-size:12.5px; font-weight:800; white-space:nowrap; }
.level-bar { flex:1; height:9px; border-radius:20px; background:rgba(0,0,0,.30); overflow:hidden; border:1px solid var(--line); }
.level-fill { display:block; height:100%; border-radius:20px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s cubic-bezier(.22,1,.36,1); }
.level-xp { font-size:11.5px; color:var(--muted); white-space:nowrap; font-weight:700; }

/* --- recently played strip --- */
.recent-strip { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.recent-strip::-webkit-scrollbar { display:none; }
.recent-chip { display:flex; align-items:center; gap:8px; flex:0 0 auto; border:none; cursor:pointer;
    color:#fff; padding:10px 14px; border-radius:14px; font-weight:700; font-size:13.5px;
    box-shadow:0 6px 16px rgba(0,0,0,.32); }
.recent-chip:active { transform:scale(.95); }
.rc-ico { font-size:18px; }

/* --- search + category chips --- */
.browse-tools { margin:6px 0 10px; }
.game-search { width:100%; background:var(--card); border:1px solid var(--line); color:var(--text);
    padding:12px 14px; border-radius:14px; font-size:15px; -webkit-appearance:none; }
.game-search:focus { outline:none; border-color:var(--accent); }
.game-search::placeholder { color:var(--muted); }
.cat-chips { display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:4px; scrollbar-width:none; }
.cat-chips::-webkit-scrollbar { display:none; }
.cat-chip { flex:0 0 auto; border:1px solid var(--line); background:var(--card); color:var(--muted);
    padding:9px 14px; border-radius:20px; font-size:13px; font-weight:700; cursor:pointer; }
.cat-chip.on { background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; }
.cat-chip:active { transform:scale(.95); }

/* --- theme picker --- */
.theme-picker { display:flex; gap:8px; flex-wrap:wrap; }
.theme-swatch { position:relative; flex:1 1 84px; min-height:52px; border-radius:14px; border:3px solid transparent;
    cursor:pointer; display:grid; place-items:end center; padding:6px; }
.theme-swatch.active { border-color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.ts-name { font-size:11.5px; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }

/* --- confetti on a new record --- */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden; }
.confetti i { position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:.95;
    animation:confFall 1.9s cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes confFall {
    0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
    100% { transform:translateY(105vh) rotate(720deg); opacity:.85; }
}

/* --- Word Search --- */
.ws-grid { display:grid; gap:2px; touch-action:none; user-select:none; }
.ws-cell { display:grid; place-items:center; border-radius:6px; background:var(--card-2);
    font-weight:800; color:var(--text); }
.ws-cell.sel { background:var(--accent); color:#fff; }
.ws-cell.found { background:color-mix(in srgb, var(--good) 75%, transparent); color:#04120C; }
.ws-words { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:12px; }
.ws-word { font-size:13px; font-weight:800; letter-spacing:.6px; padding:6px 11px; border-radius:20px;
    background:var(--card-2); border:1px solid var(--line); color:var(--text); }
.ws-word.got { opacity:.5; text-decoration:line-through; border-color:var(--good); }
:root.tv .ws-word { font-size:17px; }

/* --- Brain Race 3D (multiplayer) --- */
.mp-hero { text-align:center; padding:18px 14px 20px; margin-bottom:14px; border-radius:var(--radius);
    background:linear-gradient(150deg,rgba(244,63,94,.25),rgba(124,92,255,.28)); border:1px solid var(--line); }
.mp-hero-ico { font-size:46px; line-height:1; }
.mp-title { font-size:27px; font-weight:900; letter-spacing:-.7px; margin-top:4px; }
.mp-sub { font-size:13.5px; color:var(--muted); margin-top:6px; max-width:330px; margin-left:auto; margin-right:auto; }
.mp-you { font-size:12px; color:var(--muted); margin-top:10px; opacity:.85; }
.mp-invite { display:flex; flex-direction:column; gap:10px; padding:14px; margin-bottom:12px;
    border-radius:var(--radius); background:linear-gradient(135deg,rgba(244,63,94,.24),rgba(251,146,60,.18));
    border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.mp-invite-txt { font-size:15px; font-weight:700; text-align:center; }
.mp-peers { display:flex; flex-direction:column; gap:10px; }
.mp-peer { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--radius);
    background:var(--card); border:1px solid var(--line); }
.mp-peer-ico { font-size:24px; width:32px; text-align:center; }
.mp-peer-main { flex:1; min-width:0; }
.mp-peer-name { font-weight:800; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-peer-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.mp-empty { text-align:center; padding:26px 16px; border-radius:var(--radius); background:var(--card);
    border:1px dashed var(--line); }
.mp-empty-ico { font-size:38px; }
.mp-empty-txt { font-weight:800; margin-top:6px; }

/* the 3D track */
.mp-view { border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); line-height:0; }
.mp-canvas { display:block; width:100%; height:auto; }
.mp-status { text-align:center; font-weight:800; font-size:15.5px; margin:11px 0 9px; }

/* boost meter */
.mp-energy { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.mp-energy-k { font-size:11px; font-weight:900; letter-spacing:.9px; color:var(--muted); }
.mp-energy-bar { flex:1; height:12px; border-radius:8px; background:var(--card-2); border:1px solid var(--line); overflow:hidden; }
.mp-energy-fill { display:block; height:100%; width:0%; border-radius:8px;
    background:linear-gradient(90deg,#FBBF24,#F43F5E); transition:width .25s ease; }
.mp-energy-txt { font-size:13px; font-weight:900; min-width:14px; text-align:right; }

/* abilities */
.mp-abilities { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
.mp-ability { display:flex; flex-direction:column; align-items:center; gap:2px; padding:9px 4px;
    border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--text);
    opacity:.45; cursor:not-allowed; transition:transform .1s, opacity .2s, box-shadow .2s; }
.mp-ability.ready { opacity:1; cursor:pointer; border-color:color-mix(in srgb, var(--warn) 55%, transparent);
    box-shadow:0 0 14px color-mix(in srgb, var(--warn) 26%, transparent); }
.mp-ability.ready:active { transform:scale(.94); }
.mp-ability .ab-ico { font-size:20px; line-height:1.1; }
.mp-ability .ab-name { font-size:11px; font-weight:800; }
.mp-ability .ab-cost { font-size:10.5px; color:var(--muted); font-weight:800; }
.mp-ability.nav-here { outline:3px solid var(--accent-2); outline-offset:2px; }

/* the task */
.mp-task { text-align:center; }
.mp-prompt { font-size:16.5px; font-weight:800; margin-bottom:12px; }
.mp-word { font-size:44px; font-weight:900; letter-spacing:1px; margin:2px 0 14px; text-shadow:0 3px 14px rgba(0,0,0,.4); }
.mp-target, .mp-seq, .mp-flash { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; }
.mp-target-k { font-size:12px; color:var(--muted); font-weight:800; }
.mp-seq-q { font-size:30px; font-weight:900; color:var(--muted); }
.mp-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.mp-tile { padding:14px 8px; border-radius:18px; border:1px solid var(--line); background:var(--card-2);
    cursor:pointer; transition:transform .1s, background .15s, box-shadow .15s; min-height:104px;
    display:grid; place-items:center; }
.mp-tile:active { transform:scale(.96); }
.mp-tile.good { background:var(--good); box-shadow:0 0 18px color-mix(in srgb, var(--good) 45%, transparent); }
.mp-tile.bad { background:var(--bad); }
.mp-tile.nav-here { outline:3px solid var(--accent-2); outline-offset:2px; }
.mp-tile-in { display:grid; place-items:center; line-height:0; }
.mp-swatch { display:block; width:62px; height:62px; border-radius:14px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.mp-task.scrambled .mp-tiles { animation:mpJitter .7s ease-in-out infinite; }
@keyframes mpJitter { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }

@media (min-width:620px) { .mp-tiles { grid-template-columns:repeat(4,1fr); } }
:root.tv .mp-prompt { font-size:22px; }
:root.tv .mp-word { font-size:60px; }
:root.tv .mp-tile { min-height:130px; }
:root.tv .mp-peer-name { font-size:19px; }
:root.tv .mp-ability .ab-name { font-size:14px; }

/* --- adult PIN keypad --- */
.pin-panel { max-width:330px; }
.pin-dots { display:flex; justify-content:center; gap:12px; margin-bottom:16px; }
.pin-dots i { width:14px; height:14px; border-radius:50%; background:var(--card-2);
    border:1px solid var(--line); transition:background .15s, transform .15s; }
.pin-dots i.on { background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-color:transparent; transform:scale(1.15); }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pin-key { padding:16px 0; font-size:22px; font-weight:800; border-radius:14px;
    border:1px solid var(--line); background:var(--card-2); color:var(--text); cursor:pointer; }
.pin-key:active { transform:scale(.94); }
.pin-key:focus-visible, .pin-key.nav-focus { outline:3px solid var(--accent-2); outline-offset:2px; }
.pin-key.go { background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff; }
.pin-key.del { color:var(--muted); }
.pin-err { color:var(--bad); font-size:13px; font-weight:800; margin-top:12px; }
.shake { animation:pinShake .3s ease; }
@keyframes pinShake {
    0%,100% { transform:translateX(0); }
    20% { transform:translateX(-9px); } 40% { transform:translateX(8px); }
    60% { transform:translateX(-5px); } 80% { transform:translateX(4px); }
}
:root.tv .pin-key { padding:20px 0; font-size:26px; }

/* --- find my tablet --- */
.find-overlay { background:rgba(244,63,94,.35); backdrop-filter:blur(4px); z-index:120;
    animation:findPulse 1s ease-in-out infinite alternate; }
@keyframes findPulse { from { background:rgba(244,63,94,.28); } to { background:rgba(251,146,60,.45); } }
.find-panel { max-width:340px; text-align:center; }
.find-ico { font-size:60px; line-height:1; animation:findShake .55s ease-in-out infinite; }
@keyframes findShake {
    0%,100% { transform:rotate(-13deg); } 50% { transform:rotate(13deg); }
}
.find-stop { width:100%; font-size:24px; padding:20px 0; letter-spacing:1px; }
:root.tv .find-stop { font-size:30px; padding:26px 0; }

/* --- carry on: unfinished games --- */
.resume-strip { display:flex; flex-direction:column; gap:9px; margin-bottom:6px; }
.resume-card { display:flex; align-items:center; gap:12px; width:100%; padding:11px 13px; cursor:pointer;
    border-radius:16px; background:var(--card); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    color:var(--text); text-align:left; }
.resume-card:active { transform:scale(.98); }
.resume-card .rs-ico { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:21px; flex:0 0 auto; }
.resume-card .rs-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.resume-card .rs-name { font-weight:800; font-size:15px; }
.resume-card .rs-when { font-size:12px; color:var(--muted); margin-top:1px; }
.resume-card .rs-go { font-size:17px; opacity:.85; }
:root.tv .resume-card .rs-name { font-size:19px; }

/* --- Water Sort --- */
.ws-tubes { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-end; padding:6px 0; }
.ws-tube { display:flex; flex-direction:column; justify-content:flex-end; gap:2px; padding:4px;
    border:3px solid rgba(255,255,255,.28); border-top:none;
    border-radius:6px 6px 20px 20px; background:rgba(255,255,255,.05); cursor:pointer;
    transition:transform .12s, border-color .15s, box-shadow .15s; }
.ws-tube .ws-unit { flex:1; border-radius:4px; background:transparent; }
.ws-tube .ws-unit.empty { background:transparent; }
.ws-tube.sel { transform:translateY(-14px); border-color:var(--accent-2);
    box-shadow:0 0 16px color-mix(in srgb, var(--accent-2) 45%, transparent); }
.ws-tube.done { border-color:var(--good); }
.ws-tube.nav-here { outline:3px solid var(--accent-2); outline-offset:3px; }
.ws-tube:active { transform:scale(.97); }

/* --- Spelling Bee --- */
.bee-top { margin-bottom:10px; }
.bee-rank-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.bee-rank-name { font-weight:900; font-size:17px; }
.bee-score { font-weight:800; color:var(--muted); font-size:14px; }
.bee-rank-bar { height:10px; border-radius:6px; background:var(--card-2); border:1px solid var(--line); overflow:hidden; }
.bee-rank-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,#F59E0B,#FDE047); transition:width .4s ease; }
.bee-found { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:12px; }
.bee-found-head { font-size:12.5px; color:var(--muted); font-weight:700; margin-bottom:6px; }
.bee-found-list { display:flex; flex-wrap:wrap; gap:6px; max-height:96px; overflow-y:auto; }
.bee-word { font-size:13px; font-weight:700; padding:3px 9px; border-radius:12px; background:var(--card-2); text-transform:capitalize; }
.bee-word.pg { background:linear-gradient(90deg,#F59E0B,#FDE047); color:#1C1302; }
.bee-input { min-height:46px; display:flex; justify-content:center; align-items:center; gap:2px; font-size:30px; font-weight:900; letter-spacing:1px; margin-bottom:6px; }
.bee-ch.c { color:#FBBF24; }
.bee-ch.bad { color:var(--muted); }
.bee-caret { width:3px; height:32px; background:#FBBF24; animation:beeBlink 1s steps(2) infinite; }
@keyframes beeBlink { 50% { opacity:0; } }
.bee-hive { position:relative; width:252px; height:270px; margin:4px auto 12px; }
.bee-cell { position:absolute; width:86px; height:78px; border:none; cursor:pointer;
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    background:var(--card-2); color:var(--text); font-size:28px; font-weight:900; transition:transform .1s; }
.bee-cell.centre { background:linear-gradient(135deg,#F59E0B,#FDE047); color:#1C1302; }
.bee-cell:active, .bee-cell.tap { transform:scale(.9); }
.bee-cell[data-slot="0"] { left:83px;  top:96px; }
.bee-cell[data-slot="1"] { left:83px;  top:14px; }
.bee-cell[data-slot="2"] { left:154px; top:55px; }
.bee-cell[data-slot="3"] { left:154px; top:137px; }
.bee-cell[data-slot="4"] { left:83px;  top:178px; }
.bee-cell[data-slot="5"] { left:12px;  top:137px; }
.bee-cell[data-slot="6"] { left:12px;  top:55px; }
.bee-shuffle { font-size:20px; }

/* --- Speed Match & Switch Sort (shared feel) --- */
.sm-streak { height:6px; border-radius:4px; background:var(--card-2); overflow:hidden; margin:-4px 0 12px; }
.sm-streak-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,#22D3EE,#A78BFA); transition:width .2s; }
.sm-prompt { text-align:center; font-weight:800; font-size:17px; margin-bottom:12px; }
.sm-stage { position:relative; display:grid; place-items:center; height:190px; }
.sm-card { width:170px; height:170px; border-radius:24px; display:grid; place-items:center;
    background:var(--card); border:2px solid var(--line); box-shadow:var(--shadow); line-height:0; }
.sm-card.flip { animation:smFlip .22s ease; }
@keyframes smFlip { from { transform:rotateY(90deg) scale(.9); } to { transform:rotateY(0) scale(1); } }
.sm-card.good { border-color:var(--good); box-shadow:0 0 22px color-mix(in srgb, var(--good) 50%, transparent); }
.sm-card.bad { border-color:var(--bad); animation:smShake .3s; }
@keyframes smShake { 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }
.sm-pop { position:absolute; top:6px; font-size:24px; font-weight:900; color:var(--good); pointer-events:none;
    animation:smPop .65s ease-out forwards; }
.sm-pop.bad { color:var(--bad); font-size:18px; }
@keyframes smPop { from { transform:translateY(10px); opacity:1; } to { transform:translateY(-34px); opacity:0; } }
.sm-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.sm-buttons .btn { padding:20px 0; font-size:21px; font-weight:900; }
.sm-yes { background:color-mix(in srgb, var(--good) 28%, var(--card)); border-color:var(--good); }
.sm-no { background:color-mix(in srgb, var(--bad) 22%, var(--card)); border-color:var(--bad); }
.sm-hot { box-shadow:0 0 16px color-mix(in srgb, #F97316 55%, transparent); border-color:#F97316 !important; }
.sm-hurry .v { color:var(--bad); }

.ss-rule { text-align:center; font-size:19px; font-weight:800; padding:10px; border-radius:14px; margin-bottom:12px;
    background:var(--card); border:2px solid var(--line); transition:background .3s, border-color .3s; }
.ss-rule.colour { border-color:#60A5FA; }
.ss-rule.shape { border-color:#E5E7EB; }
.ss-rule.switch { animation:ssSwitch .6s ease; }
@keyframes ssSwitch { 0%,100% { transform:scale(1); } 40% { transform:scale(1.08); background:color-mix(in srgb, var(--warn) 35%, var(--card)); } }
.ss-stage { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; height:200px; }
.ss-bin { height:100%; border-radius:18px; border:2px dashed var(--line); background:var(--card); color:var(--text);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:800; cursor:pointer; }
.ss-bin:active { transform:scale(.97); background:var(--card-2); }
.ss-chip { width:34px; height:34px; border-radius:50%; display:block; }
.ss-card { width:140px; height:140px; border-radius:22px; display:grid; place-items:center; background:var(--card-2);
    border:2px solid var(--line); touch-action:none; line-height:0; cursor:grab; }
.ss-card.in { animation:smFlip .18s ease; }
.ss-card.fly-left { transform:translateX(-90px) rotate(-12deg); opacity:.2; transition:all .16s; }
.ss-card.fly-right { transform:translateX(90px) rotate(12deg); opacity:.2; transition:all .16s; }
.ss-card.good { border-color:var(--good); }
.ss-card.bad { border-color:var(--bad); }

/* --- Pipe Flow --- */
.pf-grid { display:grid; gap:4px; justify-content:center; }
.pf-tile { padding:0; border:none; border-radius:10px; background:var(--card-2); cursor:pointer; overflow:hidden; }
.pf-tile:active { filter:brightness(1.2); }
.pf-tile.nav-here { outline:3px solid var(--accent-2); outline-offset:1px; }
.pf-spin { width:100%; height:100%; transition:transform .16s ease-out; }
.pf-svg { width:100%; height:100%; display:block; }
.pf-pipe { stroke:#475569; stroke-width:20; stroke-linecap:round; fill:#475569; transition:stroke .2s, fill .2s; }
.pf-tile.wet .pf-pipe { stroke:#38BDF8; fill:#38BDF8; filter:drop-shadow(0 0 5px rgba(56,189,248,.65)); }
.pf-pipe .pf-src { fill:#0EA5E9; stroke:#E0F2FE; stroke-width:5; }
.pf-pipe .pf-house { fill:#64748B; stroke:none; }
.pf-tile.wet .pf-house { fill:#FDE047; filter:drop-shadow(0 0 7px rgba(253,224,71,.8)); }
.pf-grid.pf-won .pf-tile { animation:pfWin .6s ease; }
@keyframes pfWin { 50% { transform:scale(1.08); } }
:root.tv .sm-buttons .btn { font-size:26px; }

/* The game area centres its children, so anything without a width shrink-wraps
   to its content — which collapsed the Bee's rank bar and Speed Match's buttons. */
.bee-top, .bee-found, .sm-streak, .sm-buttons, .sm-stage, .ss-rule, .ss-stage { width:100%; max-width:440px; }
.bee-found { box-sizing:border-box; }

/* secret kiosk route: lock wiggles as you tap it, then the "Ha ha" pop-up */
.pin-lock { cursor: pointer; user-select: none; -webkit-user-select: none; display: inline-block; touch-action: manipulation; }
.wiggle, .overlay .panel .big.wiggle, .overlay .panel.haha.wiggle { animation: wiggle .28s ease; }
@keyframes wiggle { 0%,100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-14deg) scale(1.12); } 70% { transform: rotate(12deg) scale(1.08); } }
.haha-overlay { z-index: 130; background: rgba(0,0,0,.35); }
.overlay .panel.haha { max-width: 250px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.haha .big { font-size: 64px; }

/* ---------- Whack-a-Mole ---------- */
.wm-field { position: relative; max-width: 100%; flex-shrink: 0; border-radius: 26px; padding: 44px 14px 14px; box-sizing: border-box;
    background:
        radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.18), transparent 45%),
        repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 14px, rgba(0,0,0,.04) 14px 28px),
        linear-gradient(180deg, #84CC16, #4D7C0F);
    box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), 0 14px 30px rgba(0,0,0,.35); border: 4px solid #3F6212; overflow: hidden;
    user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.wm-field.shake { animation: wm-shake .35s ease; }
@keyframes wm-shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-8px,3px); } 40% { transform: translate(7px,-4px); } 60% { transform: translate(-5px,2px); } 80% { transform: translate(4px,-1px); } }
.wm-bar { position: absolute; left: 16px; right: 16px; top: 14px; height: 12px; border-radius: 99px; background: rgba(0,0,0,.28); overflow: hidden; }
.wm-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #FDE047, #FACC15); transition: width .1s linear; }
.wm-field.hurry .wm-bar i { background: linear-gradient(90deg, #F87171, #EF4444); animation: wm-pulse .5s infinite alternate; }
@keyframes wm-pulse { to { opacity: .55; } }
.wm-combo { position: absolute; top: 28px; left: 50%; transform: translateX(-50%) scale(.6); opacity: 0; z-index: 4; font-weight: 900; font-size: 15px;
    color: #FFF; background: rgba(0,0,0,.35); padding: 2px 12px; border-radius: 99px; transition: transform .15s, opacity .15s; white-space: nowrap; }
.wm-combo.on { opacity: 1; transform: translateX(-50%) scale(1); }
.wm-combo.hot { background: linear-gradient(90deg, #F97316, #EF4444); box-shadow: 0 0 14px rgba(249,115,22,.7); }
.wm-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; width: 100%; height: 100%; }
.wm-hole { position: relative; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; overflow: visible; border-radius: 18px; -webkit-tap-highlight-color: transparent; }
.wm-hole.nav-focus { outline: 4px solid #FDE047; outline-offset: -4px; }
.wm-pit { position: absolute; left: 3%; width: 94%; top: 55%; height: 31%; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #1C0F05 40%, #3B2310 75%, #5B3A1A 100%); box-shadow: 0 3px 0 #7C5427; }
.wm-clip { position: absolute; left: 0; right: 0; top: -14%; height: 84.5%; overflow: hidden; pointer-events: none; }
.wm-critter { position: absolute; left: 14%; width: 72%; bottom: 0; height: 92%; transform: translateY(150%); transition: transform .14s cubic-bezier(.2,1.4,.4,1); }
.wm-critter.up { transform: translateY(0); }
.wm-critter.down { transform: translateY(150%); transition: transform .18s ease-in; }
.wm-lip { position: absolute; left: 3%; width: 94%; top: 70.5%; height: 17%; border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: linear-gradient(180deg, #6B4423, #8B5A2B); pointer-events: none; z-index: 2; box-shadow: 0 4px 6px rgba(0,0,0,.25); }
.wm-mole { position: relative; width: 100%; height: 100%; border-radius: 50% 50% 18% 18% / 58% 58% 14% 14%;
    background: radial-gradient(circle at 38% 26%, #C08A4E, #8B5A2B 55%, #5E3A18); box-shadow: inset -6px -6px 0 rgba(0,0,0,.15); }
.wm-mole.gold { background: radial-gradient(circle at 38% 26%, #FEF9C3, #FACC15 50%, #CA8A04); box-shadow: inset -6px -6px 0 rgba(0,0,0,.12), 0 0 18px rgba(250,204,21,.8); }
.wm-mole .eye { position: absolute; top: 27%; width: 15%; height: 17%; border-radius: 50%; background: #111; }
.wm-mole .eye::after { content: ""; position: absolute; left: 22%; top: 18%; width: 38%; height: 38%; border-radius: 50%; background: #FFF; }
.wm-mole .eye.l { left: 25%; } .wm-mole .eye.r { right: 25%; }
.wm-mole .cheek { position: absolute; top: 46%; width: 16%; height: 11%; border-radius: 50%; background: rgba(244,114,182,.5); }
.wm-mole .cheek.l { left: 12%; } .wm-mole .cheek.r { right: 12%; }
.wm-mole .nose { position: absolute; left: 39%; top: 44%; width: 22%; height: 15%; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #FBCFE8, #EC4899); }
.wm-mole .teeth { position: absolute; left: 43%; top: 58%; width: 14%; height: 10%; background: #FFF; border-radius: 0 0 4px 4px; box-shadow: inset -1px 0 0 #DDD; }
.wm-mole .paw { position: absolute; bottom: -2%; width: 26%; height: 14%; border-radius: 50%; background: #E9C9A0; z-index: 3; }
.wm-mole.gold .paw { background: #FEF3C7; }
.wm-mole .paw.l { left: 4%; } .wm-mole .paw.r { right: 4%; }
.wm-mole .crown { position: absolute; left: 50%; top: -24%; transform: translateX(-50%); font-size: 1.7em; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.wm-mole.bonk { animation: wm-bonk .26s ease; }
.wm-mole.bonk .eye { background: transparent; }
.wm-mole.bonk .eye::after { content: "\2715"; background: none; left: 0; top: -20%; width: 100%; height: auto; font-weight: 900; color: #111; font-size: 1.1em; text-align: center; line-height: 1; }
.wm-mole.bonk::after { content: "\1F4AB"; position: absolute; left: 50%; top: -18%; transform: translateX(-50%); font-size: 1.5em; }
@keyframes wm-bonk { 0% { transform: scale(1,1); } 40% { transform: scale(1.18,.72) translateY(14%); } 100% { transform: scale(1,.9) translateY(6%); } }
.wm-bomb { position: absolute; left: 10%; width: 80%; bottom: 0; height: 80%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6B7280, #111827 60%); box-shadow: inset -5px -5px 0 rgba(0,0,0,.4); }
.wm-bomb .fuse { position: absolute; left: 56%; top: -16%; width: 10%; height: 24%; background: #A16207; border-radius: 4px; transform: rotate(20deg); }
.wm-bomb .spark { position: absolute; left: 62%; top: -30%; width: 22%; height: 22%; border-radius: 50%; background: radial-gradient(circle, #FEF08A, #F97316 60%, transparent 70%); animation: wm-spark .18s infinite alternate; }
@keyframes wm-spark { to { transform: scale(1.4) rotate(40deg); opacity: .7; } }
.wm-boom { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3em; animation: wm-pop .3s ease; }
@keyframes wm-pop { from { transform: scale(.3); } to { transform: scale(1); } }
.wm-float { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); z-index: 6; pointer-events: none; font-weight: 900; font-size: 26px;
    color: #FFF; text-shadow: 0 2px 0 #14532D, 0 0 8px rgba(0,0,0,.4); animation: wm-float .75s ease-out forwards; }
.wm-float.gold { color: #FDE047; font-size: 32px; } .wm-float.hot { color: #FDBA74; } .wm-float.bad { color: #FCA5A5; text-shadow: 0 2px 0 #7F1D1D; }
@keyframes wm-float { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 20% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -46px) scale(1); opacity: 0; } }
.wm-hammer { position: absolute; z-index: 7; pointer-events: none; font-size: 44px; margin: -44px 0 0 -10px; transform-origin: 80% 85%; animation: wm-swing .26s ease-out forwards; }
@keyframes wm-swing { 0% { transform: rotate(-55deg); } 45% { transform: rotate(18deg); } 100% { transform: rotate(5deg); opacity: 0; } }
.wm-puff { position: absolute; z-index: 5; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(214,192,160,.9), rgba(214,192,160,0) 70%); animation: wm-puff .4s ease-out forwards; }
@keyframes wm-puff { from { transform: scale(.3); } to { transform: scale(1.8); opacity: 0; } }
.wm-cover { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(20,40,10,.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-align: center; color: #FFF; }
.wm-cover[hidden] { display: none; }
.wm-big { font-size: 72px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); animation: bounce .8s ease; }
.wm-title { font-size: 30px; font-weight: 900; text-shadow: 0 3px 0 #14532D; }
.wm-sub { font-size: 15px; opacity: .9; }
.wm-count { font-size: 120px; font-weight: 900; text-shadow: 0 6px 0 #14532D; animation: wm-pop .3s ease; }
.wm-start { font-size: 22px; padding: 14px 40px; }

/* Wordle: the answer revealed when you run out of guesses */
.wd-reveal { display: flex; justify-content: center; gap: 6px; margin: 10px 0 12px; }
.wd-reveal span { width: 46px; height: 50px; display: grid; place-items: center; border-radius: 8px; background: #16A34A; color: #fff;
    font-size: 28px; font-weight: 900; box-shadow: 0 4px 0 #14532D; animation: wd-flip .45s ease both; }
@keyframes wd-flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }

/* ---------- Memory Match: big 3D flip cards ---------- */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 100%; flex-shrink: 0; }
.mm-card { aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; font: inherit; -webkit-tap-highlight-color: transparent; }
.mm-card.nav-focus { outline: 4px solid var(--accent-2); outline-offset: 3px; border-radius: 16px; }
.mm-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3,1.3,.5,1); }
.mm-card.open .mm-inner { transform: rotateY(180deg); }
.mm-card:active .mm-inner { scale: .95; }
.mm-back, .mm-face { position: absolute; inset: 0; border-radius: 16%; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mm-back { background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 40%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px),
        linear-gradient(135deg, #6366F1, #0EA5E9);
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 5px 12px rgba(0,0,0,.3); border: 3px solid rgba(255,255,255,.25); box-sizing: border-box; }
.mm-back span { font-size: .62em; opacity: .55; filter: grayscale(.3); }
.mm-face { transform: rotateY(180deg); background: linear-gradient(160deg, #FFFFFF, #E0E7FF); box-shadow: 0 5px 12px rgba(0,0,0,.3); border: 3px solid #A5B4FC; box-sizing: border-box; line-height: 1; }
.mm-card.done .mm-face { border-color: #4ADE80; background: linear-gradient(160deg, #F0FDF4, #BBF7D0); box-shadow: 0 0 0 3px rgba(74,222,128,.35), 0 0 22px rgba(74,222,128,.55); animation: mm-match .45s ease; }
.mm-card.nope .mm-face { border-color: #F87171; animation: mm-nope .3s ease; }
@keyframes mm-match { 0% { transform: rotateY(180deg) scale(1); } 45% { transform: rotateY(180deg) scale(1.13); } 100% { transform: rotateY(180deg) scale(1); } }
@keyframes mm-nope { 0%,100% { transform: rotateY(180deg) translateX(0); } 30% { transform: rotateY(180deg) translateX(-6px); } 70% { transform: rotateY(180deg) translateX(6px); } }

/* ---------- Chess ---------- */
.ch-board { display: grid; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); line-height: 1; user-select: none; -webkit-user-select: none; }
.ch-sq { position: relative; display: grid; place-items: center; cursor: pointer; }
.ch-sq.lt { background: #EEEED2; } .ch-sq.dk { background: #769656; }
.ch-sq.last.lt { background: #F6F67A; } .ch-sq.last.dk { background: #BACA44; }
.ch-sq.check { background: radial-gradient(circle, #FF5252 0%, #E53935 45%, rgba(229,57,53,.35) 75%) !important; }
.ch-sq.sel { box-shadow: inset 0 0 0 4px #22D3EE; }
.ch-sq.can { box-shadow: inset 0 0 0 3px rgba(34,197,94,.95), inset 0 0 14px rgba(34,197,94,.6); }
.ch-pc { position: relative; z-index: 1; transition: transform .12s; }
.ch-pc.w { color: #FFFFFF; text-shadow: 1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,0 3px 4px rgba(0,0,0,.55); }
.ch-pc.b { color: #111827; text-shadow: 1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,0 3px 4px rgba(0,0,0,.4); }
.ch-sq.sel .ch-pc { transform: scale(1.12) translateY(-3%); }
.ch-mark { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ch-mark.dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(22,101,52,.55); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.ch-mark.cap { box-shadow: inset 0 0 0 5px rgba(220,38,38,.85); border-radius: 50%; }
.ch-rank, .ch-file { position: absolute; font-size: 11px; font-weight: 800; z-index: 0; opacity: .75; font-family: system-ui, sans-serif; }
.ch-rank { left: 3px; top: 2px; } .ch-file { right: 3px; bottom: 1px; }
.ch-sq.lt .ch-rank, .ch-sq.lt .ch-file { color: #769656; } .ch-sq.dk .ch-rank, .ch-sq.dk .ch-file { color: #EEEED2; }
.ch-msg { min-height: 2.6em; max-width: 520px; margin: 10px auto 2px; padding: 8px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-align: center; font-size: 15px; line-height: 1.4; }
.diff-group { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 2px -2px; text-align: left; }
.diff-card.two { background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(236,72,153,.22)); border-color: rgba(56,189,248,.5); }
.setting-row.warn-row { background: rgba(245,158,11,.12); border-radius: 12px; }

/* screen-time unlock (on top of the time's-up screen) */
.overlay.over-lock { z-index: 260; }
.lock-inner .unlock-btn { margin-top: 26px; padding: 12px 28px; font-size: 17px; }
.unlock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.unlock-grid .btn { width: 100%; padding: 14px 8px; font-size: 16px; }

/* ---------- screensaver ---------- */
.screensaver { position: fixed; inset: 0; z-index: 500; background: #02040A; display: grid; place-items: center; overflow: hidden;
    opacity: 0; transition: opacity .9s ease; cursor: none; touch-action: none; }
.screensaver.on { opacity: 1; }
.screensaver.off { opacity: 0; transition: opacity .3s ease; }
.screensaver.asleep .sv-card, .screensaver.asleep .sv-bubbles { opacity: .25; }
.sv-card { text-align: center; color: #CBD5E1; transition: transform 5s ease-in-out, opacity 2s; will-change: transform; }
.sv-logo { font-size: 64px; animation: sv-breathe 6s ease-in-out infinite; }
.sv-clock { font-size: clamp(56px, 12vw, 120px); font-weight: 800; letter-spacing: -.02em; color: #E2E8F0; line-height: 1.05; margin-top: 6px; font-variant-numeric: tabular-nums; }
.sv-date { font-size: 18px; opacity: .7; margin-top: 4px; }
.sv-hint { font-size: 14px; opacity: .45; margin-top: 26px; }
.sv-bubbles { position: absolute; inset: 0; pointer-events: none; transition: opacity 2s; }
.sv-bubbles span { position: absolute; bottom: -80px; font-size: 38px; opacity: 0; animation: sv-float 18s linear infinite; filter: saturate(.7); }
@keyframes sv-float { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .35; } 90% { opacity: .35; } 100% { transform: translateY(-115vh) rotate(40deg); opacity: 0; } }
@keyframes sv-breathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---------- motion: smoother, calmer entrances ----------
   Pop-ups used to bounce in from 60% with an overshoot, and their icon spun in
   from 30%; the dimmed backdrop appeared all at once. Now the backdrop fades,
   the panel rises a little and settles, and the icon grows in without spinning.
   Everything respects the system "reduce motion" setting. */
.overlay { animation: ovIn .22s ease-out both; }
@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }
.overlay .panel, .help-overlay .panel { animation: panelIn .34s cubic-bezier(.2,.9,.25,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.overlay .panel .big { animation: iconIn .5s cubic-bezier(.2,.9,.3,1.25) .06s both; }
@keyframes iconIn { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
.pop { animation: popIn .26s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes popIn { from { opacity: .4; transform: scale(.7); } to { opacity: 1; transform: none; } }
.view-enter { animation: viewIn .28s cubic-bezier(.2,.9,.25,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card-enter { animation: cardIn .38s cubic-bezier(.2,.9,.25,1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.game-card { transition: transform .18s cubic-bezier(.2,.9,.25,1), box-shadow .2s ease; }
.game-card:active { transform: scale(.97); }
.btn { transition: transform .12s ease, background .2s, box-shadow .2s, filter .2s; }
.btn:active { transform: scale(.96); }
.fade-in { animation: fade .3s cubic-bezier(.2,.9,.25,1) both; }
.overlay .panel.shake { animation: pinShake .3s ease; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .sv-card { transition: none !important; }
}