/* ═══════════════════════════════════════════════════════════════════
   GAMES - shared styles for browser games
   Namespacing: .gm-* (shared) and per-game prefixes:
   .ttt- (tic-tac-toe) · .mem- (memory) · .g2k- (2048) ·
   .snk- (snake) · .ms- (minesweeper)
═══════════════════════════════════════════════════════════════════ */

.gm-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.gm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.gm-stats {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.gm-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}
.gm-stat-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 700;
}
.gm-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.gm-stat-value.is-good { color: #15803D; }
.gm-stat-value.is-bad  { color: #B91C1C; }

.gm-controls {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
}

.gm-difficulty {
    display: inline-flex;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 3px;
}
.gm-difficulty button {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: .8125rem;
    padding: .375rem .875rem;
    border-radius: 7px;
    cursor: pointer;
}
.gm-difficulty button.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-xs);
}

.gm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .85);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(4px);
    z-index: 10;
}
.gm-overlay-title { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; }
.gm-overlay-sub { font-size: 1rem; opacity: .85; margin-bottom: 1rem; }
.gm-overlay button {
    background: #fff;
    color: var(--color-primary);
    border: 0;
    padding: .625rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
}

/* ─────────────────────────────────────────────
   TIC-TAC-TOE
───────────────────────────────────────────── */
.ttt-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(80px, 110px));
    gap: 6px;
    margin: 1rem auto;
    background: var(--color-text);
    padding: 6px;
    border-radius: var(--radius-md);
    width: fit-content;
}
.ttt-cell {
    background: var(--color-surface);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    border-radius: 6px;
}
.ttt-cell:hover:not(.is-played):not(.is-disabled) {
    background: var(--color-primary-light);
}
.ttt-cell.is-x { color: var(--color-primary); }
.ttt-cell.is-o { color: var(--color-accent); }
.ttt-cell.is-disabled { cursor: not-allowed; }
.ttt-cell.is-win {
    background: #DCFCE7;
    animation: ttt-pulse .6s;
}
@keyframes ttt-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.ttt-status {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: .5rem;
    min-height: 1.5em;
}
.ttt-status.is-x { color: var(--color-primary); }
.ttt-status.is-o { color: var(--color-accent); }

/* ─────────────────────────────────────────────
   MEMORY MATCH
───────────────────────────────────────────── */
.mem-board {
    display: grid;
    gap: .375rem;
    margin: 1rem auto;
    width: fit-content;
}
.mem-card {
    aspect-ratio: 1 / 1;
    perspective: 1000px;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}
.mem-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .35s;
}
.mem-card.is-flipped .mem-card-inner,
.mem-card.is-matched .mem-card-inner {
    transform: rotateY(180deg);
}
.mem-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-size: clamp(1.25rem, 4vw, 2rem);
    box-shadow: var(--shadow-sm);
}
.mem-card-back {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
}
.mem-card-back::before {
    content: '?';
    font-size: 1.75rem;
    font-weight: 800;
}
.mem-card-front {
    background: #fff;
    color: var(--color-text);
    transform: rotateY(180deg);
    border: 2px solid var(--color-border);
}
.mem-card.is-matched .mem-card-front {
    background: #DCFCE7;
    border-color: #BBF7D0;
}

/* ─────────────────────────────────────────────
   2048
───────────────────────────────────────────── */
.g2k-stage { position: relative; }
.g2k-board {
    background: #BBADA0;
    border-radius: var(--radius-md);
    padding: 8px;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    margin: 1rem auto;
    position: relative;
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    touch-action: none;
}
.g2k-cell {
    background: rgba(238, 228, 218, .35);
    border-radius: 4px;
}
.g2k-tile {
    position: absolute;
    width: calc((100% - 16px - 24px) / 4);
    aspect-ratio: 1 / 1;
    background: #EEE4DA;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 2.25rem);
    color: #776E65;
    transition: transform .15s ease-in-out;
}
.g2k-tile.is-new { animation: g2k-pop .25s; }
.g2k-tile.is-merged { animation: g2k-merge .3s; z-index: 2; }
@keyframes g2k-pop {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}
@keyframes g2k-merge {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.g2k-tile[data-v="2"]    { background: #EEE4DA; color: #776E65; }
.g2k-tile[data-v="4"]    { background: #EDE0C8; color: #776E65; }
.g2k-tile[data-v="8"]    { background: #F2B179; color: #fff; }
.g2k-tile[data-v="16"]   { background: #F59563; color: #fff; }
.g2k-tile[data-v="32"]   { background: #F67C5F; color: #fff; }
.g2k-tile[data-v="64"]   { background: #F65E3B; color: #fff; }
.g2k-tile[data-v="128"]  { background: #EDCF72; color: #fff; font-size: clamp(1.125rem, 4.5vw, 2rem); }
.g2k-tile[data-v="256"]  { background: #EDCC61; color: #fff; font-size: clamp(1.125rem, 4.5vw, 2rem); }
.g2k-tile[data-v="512"]  { background: #EDC850; color: #fff; font-size: clamp(1.125rem, 4.5vw, 2rem); }
.g2k-tile[data-v="1024"] { background: #EDC53F; color: #fff; font-size: clamp(1rem, 4vw, 1.75rem); }
.g2k-tile[data-v="2048"] { background: #EDC22E; color: #fff; font-size: clamp(1rem, 4vw, 1.75rem); box-shadow: 0 0 30px rgba(243, 215, 116, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.g2k-tile[data-v="4096"] { background: #3C3A32; color: #fff; font-size: clamp(.875rem, 3.5vw, 1.5rem); }

.g2k-instructions {
    color: var(--color-text-muted);
    font-size: .8125rem;
    margin-top: .5rem;
}
.g2k-instructions kbd {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font);
    font-size: .75rem;
    margin: 0 1px;
}

/* ─────────────────────────────────────────────
   SNAKE
───────────────────────────────────────────── */
.snk-stage {
    background: #0F172A;
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 1rem auto;
    width: 100%;
    max-width: 1000px;
    position: relative;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.snk-stage-inner {
    width: 100%;
    aspect-ratio: 16 / 10;
    position: relative;
    max-height: 100%;
}
.snk-canvas {
    background: #1E293B;
    border-radius: var(--radius-md);
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}

/* Fullscreen mode - fills the entire viewport, keeps 16:10 canvas centered */
.snk-stage:fullscreen,
.snk-stage:-webkit-full-screen {
    background: #000;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 1rem;
    margin: 0;
}
.snk-stage:fullscreen .snk-stage-inner,
.snk-stage:-webkit-full-screen .snk-stage-inner {
    width: auto;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
}
.snk-fs-btn {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background: rgba(255,255,255,.08);
    color: #E2E8F0;
    border: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 5;
    transition: background .15s;
}
.snk-fs-btn:hover { background: rgba(255,255,255,.15); }

.snk-instructions {
    color: var(--color-text-muted);
    font-size: .8125rem;
    text-align: center;
    margin-top: .75rem;
}
.snk-instructions kbd {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--font);
    font-size: .75rem;
    margin: 0 1px;
}

/* On-screen D-pad - appears in fullscreen overlay or on touch devices */
.snk-touch {
    display: none;
    grid-template-columns: 56px 56px 56px;
    grid-template-rows: 56px 56px 56px;
    gap: .25rem;
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 4;
}
.snk-touch button {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.snk-touch button:active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.snk-touch .snk-tup    { grid-column: 2; grid-row: 1; }
.snk-touch .snk-tleft  { grid-column: 1; grid-row: 2; }
.snk-touch .snk-tright { grid-column: 3; grid-row: 2; }
.snk-touch .snk-tdown  { grid-column: 2; grid-row: 3; }

/* Touch devices: show D-pad always */
@media (hover: none) and (pointer: coarse) {
    .snk-touch { display: grid; }
}
/* Fullscreen: show D-pad regardless (handy for laptops without touch too) */
.snk-stage:fullscreen .snk-touch,
.snk-stage:-webkit-full-screen .snk-touch {
    display: grid;
}

/* Game-over overlay on snake stage - re-positioned for full-cover look */
.snk-stage .gm-overlay {
    border-radius: var(--radius-lg);
}

/* ─────────────────────────────────────────────
   MINESWEEPER
───────────────────────────────────────────── */
.ms-board {
    display: grid;
    gap: 2px;
    margin: 1rem auto;
    background: #94A3B8;
    padding: 4px;
    border-radius: var(--radius-md);
    width: fit-content;
    max-width: 100%;
    overflow: auto;
}
.ms-cell {
    background: #CBD5E1;
    border: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background .12s;
    user-select: none;
}
.ms-cell:hover:not(.is-revealed):not(.is-flagged) { background: #94A3B8; }
.ms-cell.is-revealed {
    background: #F1F5F9;
    cursor: default;
}
.ms-cell.is-mine {
    background: #FEE2E2;
}
.ms-cell.is-flagged { background: #FEF3C7; }
.ms-cell.is-flagged::before { content: '🚩'; font-size: .875rem; }
.ms-cell[data-n="1"] { color: #2563EB; }
.ms-cell[data-n="2"] { color: #15803D; }
.ms-cell[data-n="3"] { color: #DC2626; }
.ms-cell[data-n="4"] { color: #6D28D9; }
.ms-cell[data-n="5"] { color: #B91C1C; }
.ms-cell[data-n="6"] { color: #0E7490; }
.ms-cell[data-n="7"] { color: #1E293B; }
.ms-cell[data-n="8"] { color: #64748B; }
@media (max-width: 540px) {
    .ms-cell { width: 26px; height: 26px; font-size: .8125rem; }
}

/* ─────────────────────────────────────────────
   HAND CRICKET
───────────────────────────────────────────── */
.hc-stage {
    background: linear-gradient(135deg, #134E4A 0%, #0F766E 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1rem 0;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
}
.hc-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.hc-info-card {
    background: rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hc-info-card.is-active {
    background: rgba(255,255,255,.25);
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}
.hc-info-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .75;
    font-weight: 700;
}
.hc-info-score {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-top: .125rem;
}
.hc-info-meta {
    font-size: .75rem;
    opacity: .85;
    margin-top: .25rem;
}

.hc-status {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 1rem;
    min-height: 1.5em;
}
.hc-target {
    background: rgba(252,211,77,.25);
    border: 1px solid rgba(252,211,77,.5);
    border-radius: var(--radius-md);
    padding: .5rem 1rem;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hc-reveal {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1rem 0;
    min-height: 70px;
    align-items: center;
}
.hc-reveal-side {
    text-align: center;
    min-width: 100px;
}
.hc-reveal-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .8;
    font-weight: 700;
}
.hc-reveal-num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #FCD34D;
    margin-top: .25rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.hc-reveal-num.is-out { color: #F87171; }

.hc-buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem;
    max-width: 480px;
    margin: 0 auto;
}
.hc-btn {
    background: #fff;
    color: var(--color-primary);
    border: 0;
    padding: 1rem 0;
    font-size: 1.5rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .15s;
    box-shadow: var(--shadow-sm);
}
.hc-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hc-btn:active { transform: scale(.95); }
.hc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.hc-history {
    margin-top: 1rem;
    background: rgba(0,0,0,.2);
    border-radius: var(--radius-md);
    padding: .75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    text-align: left;
    max-height: 110px;
    overflow-y: auto;
}
.hc-history-row {
    display: grid;
    grid-template-columns: 50px 1fr;
    padding: 2px 0;
    opacity: .85;
}
.hc-history-row .hc-h-ball { color: #94A3B8; }
.hc-history-row.is-out { color: #FCA5A5; }

/* Last Over Showdown */
.lo-stage {
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--shadow-md);
}
.lo-target {
    text-align: center;
    margin-bottom: 1.5rem;
}
.lo-target-num {
    font-size: 3rem;
    font-weight: 800;
    color: #FCD34D;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.lo-target-label {
    font-size: .8125rem;
    opacity: .85;
    margin-top: .25rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.lo-balls {
    display: flex;
    gap: .375rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.lo-ball {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(255,255,255,.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8125rem;
}
.lo-ball.is-current {
    border-color: #FCD34D;
    background: rgba(252,211,77,.2);
    box-shadow: 0 0 0 3px rgba(252,211,77,.25);
}
.lo-ball.is-runs { background: #10B981; border-color: #10B981; }
.lo-ball.is-six  { background: #F59E0B; border-color: #F59E0B; }
.lo-ball.is-out  { background: #EF4444; border-color: #EF4444; }

.lo-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 540px) { .lo-options { grid-template-columns: 1fr; } }
.lo-option-group { background: rgba(0,0,0,.2); border-radius: var(--radius-md); padding: 1rem; }
.lo-option-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    margin-bottom: .5rem;
    font-weight: 700;
}
.lo-option-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.lo-opt-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    padding: .5rem .375rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
}
.lo-opt-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.lo-opt-btn.is-selected {
    background: #FCD34D;
    color: #1E1B4B;
    border-color: #FCD34D;
}
.lo-result {
    margin-top: 1rem;
    background: rgba(0,0,0,.3);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    text-align: center;
    font-weight: 600;
    min-height: 3em;
}

/* Cricket Quiz */
.cq-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.cq-progress {
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 1rem;
}
.cq-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    transition: width .3s;
}
.cq-question {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.4;
}
.cq-question-num {
    font-size: .75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    margin-bottom: .25rem;
}
.cq-options { display: grid; gap: .5rem; }
.cq-option {
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    font-size: .9375rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.cq-option:hover:not(:disabled) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.cq-option-letter {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8125rem;
    flex-shrink: 0;
}
.cq-option.is-correct { background: #DCFCE7; border-color: #15803D; }
.cq-option.is-correct .cq-option-letter { background: #15803D; color: #fff; border-color: #15803D; }
.cq-option.is-wrong   { background: #FEE2E2; border-color: #B91C1C; }
.cq-option.is-wrong   .cq-option-letter { background: #B91C1C; color: #fff; border-color: #B91C1C; }
.cq-option:disabled { cursor: default; }

/* ─────────────────────────────────────────────
   CONNECT 4
───────────────────────────────────────────── */
.c4-stage {
    background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 1rem auto;
    width: fit-content;
    max-width: 100%;
    box-shadow: var(--shadow-md);
}
.c4-board {
    display: grid;
    grid-template-columns: repeat(7, minmax(36px, 56px));
    gap: 4px;
    background: #1E3A8A;
    padding: 6px;
    border-radius: var(--radius-md);
}
.c4-cell {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}
.c4-cell.is-disc-r { background: radial-gradient(circle at 30% 30%, #FECACA, #DC2626); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.c4-cell.is-disc-y { background: radial-gradient(circle at 30% 30%, #FEF3C7, #F59E0B); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.c4-cell.is-win    { animation: c4-pulse .6s infinite alternate; }
@keyframes c4-pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

.c4-col-buttons {
    display: grid;
    grid-template-columns: repeat(7, minmax(36px, 56px));
    gap: 4px;
    padding: 0 6px 6px;
}
.c4-col-btn {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 0;
    padding: .375rem 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
}
.c4-col-btn:hover:not(:disabled) { background: rgba(255,255,255,.3); }
.c4-col-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ─────────────────────────────────────────────
   WORDLE
───────────────────────────────────────────── */
.wd-stage {
    background: var(--color-surface);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    text-align: center;
}
.wd-board {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 5px;
    margin: 0 auto 1rem;
    width: fit-content;
}
.wd-row {
    display: grid;
    grid-template-columns: repeat(5, 56px);
    gap: 5px;
}
.wd-tile {
    width: 56px;
    height: 56px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text);
    transition: transform .25s, background .35s;
}
.wd-tile.is-filled { border-color: var(--color-text-muted); animation: wd-pop .15s; }
.wd-tile.is-correct { background: #15803D; color: #fff; border-color: #15803D; transform: rotateX(360deg); }
.wd-tile.is-present { background: #CA8A04; color: #fff; border-color: #CA8A04; transform: rotateX(360deg); }
.wd-tile.is-absent  { background: #475569; color: #fff; border-color: #475569; transform: rotateX(360deg); }
.wd-tile.is-shake { animation: wd-shake .4s; }
@keyframes wd-pop { 0% { transform: scale(.85); } 50% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes wd-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 480px) {
    .wd-row { grid-template-columns: repeat(5, 48px); }
    .wd-tile { width: 48px; height: 48px; font-size: 1.5rem; }
}

.wd-keyboard {
    display: grid;
    gap: 5px;
    margin: 1rem auto 0;
    max-width: 480px;
}
.wd-keyboard-row { display: flex; gap: 4px; justify-content: center; }
.wd-key {
    flex: 1;
    min-width: 28px;
    height: 52px;
    background: var(--color-bg);
    color: var(--color-text);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: .9375rem;
    transition: var(--transition);
}
.wd-key:hover:not(:disabled) { background: var(--color-border); }
.wd-key.is-wide { flex: 1.5; font-size: .75rem; }
.wd-key.is-correct { background: #15803D; color: #fff; }
.wd-key.is-present { background: #CA8A04; color: #fff; }
.wd-key.is-absent  { background: #475569; color: #fff; }
.wd-message {
    background: var(--color-text);
    color: #fff;
    padding: .375rem 1rem;
    border-radius: var(--radius-sm);
    display: inline-block;
    font-size: .875rem;
    font-weight: 600;
    margin: .5rem 0;
    opacity: 0;
    transition: opacity .25s;
}
.wd-message.is-show { opacity: 1; }

/* ─────────────────────────────────────────────
   HANGMAN
───────────────────────────────────────────── */
.hm-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.hm-svg {
    width: 200px;
    height: 240px;
    display: block;
    margin: 0 auto 1rem;
}
.hm-svg line, .hm-svg circle {
    stroke: var(--color-text);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    transition: opacity .3s;
}
.hm-svg .hm-part { opacity: 0; }
.hm-svg .hm-part.is-show { opacity: 1; }

.hm-word {
    display: flex;
    gap: .375rem;
    justify-content: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}
.hm-letter {
    width: 36px;
    height: 44px;
    border-bottom: 3px solid var(--color-text);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    padding-bottom: 4px;
}
.hm-letter.is-revealed { color: var(--color-primary); }
.hm-letter.is-space { border: 0; width: 12px; }

.hm-keyboard {
    display: grid;
    grid-template-columns: repeat(13, minmax(28px, 38px));
    gap: 4px;
    justify-content: center;
    max-width: 540px;
    margin: 1rem auto 0;
}
.hm-key {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    padding: .375rem 0;
    transition: var(--transition);
    font-size: .8125rem;
}
.hm-key:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary); }
.hm-key:disabled { opacity: .35; cursor: not-allowed; }
.hm-key.is-correct { background: #DCFCE7; color: #15803D; border-color: #15803D; }
.hm-key.is-wrong   { background: #FEE2E2; color: #B91C1C; border-color: #B91C1C; }

.hm-meta {
    display: flex;
    justify-content: space-around;
    margin: 1rem 0;
    font-size: .875rem;
}
.hm-category { color: var(--color-text-muted); }
.hm-category strong { color: var(--color-text); }

/* ─────────────────────────────────────────────
   HIGHER / LOWER
───────────────────────────────────────────── */
.hl-stage {
    background: linear-gradient(135deg, #581C87 0%, #6D28D9 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
}
.hl-streak {
    background: rgba(255,255,255,.15);
    border-radius: var(--radius-full);
    padding: .25rem 1rem;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 1rem;
}
.hl-card {
    width: 140px;
    height: 200px;
    background: #fff;
    border-radius: var(--radius-lg);
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    color: var(--color-text);
    font-size: 4.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: transform .25s;
    perspective: 1000px;
}
.hl-card.is-red { color: #DC2626; }
.hl-card.is-flip { animation: hl-flip .6s; }
@keyframes hl-flip {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
}
.hl-prompt {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    opacity: .9;
}
.hl-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hl-btn {
    background: #fff;
    color: #581C87;
    border: 0;
    padding: .75rem 2rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.hl-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hl-btn:active { transform: scale(.97); }
.hl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ─────────────────────────────────────────────
   LIGHTS OUT
───────────────────────────────────────────── */
.lt-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.lt-board {
    display: grid;
    gap: 6px;
    margin: 1rem auto;
    background: var(--color-text);
    padding: 6px;
    border-radius: var(--radius-md);
    width: fit-content;
}
.lt-cell {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 6px;
    background: #1E293B;
    cursor: pointer;
    transition: all .15s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.lt-cell.is-on {
    background: #FCD34D;
    box-shadow: 0 0 16px rgba(252,211,77,.6), inset 0 0 0 1px rgba(255,255,255,.3);
}
.lt-cell:hover:not(:disabled) { transform: scale(.96); }
@media (max-width: 540px) {
    .lt-cell { width: 44px; height: 44px; }
}

/* ─────────────────────────────────────────────
   REACTION TIME
───────────────────────────────────────────── */
.rt-stage {
    width: 100%;
    min-height: 360px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background .12s;
    color: #fff;
    text-align: center;
    padding: 2rem;
    box-shadow: var(--shadow-md);
}
.rt-stage.is-idle      { background: linear-gradient(135deg, #1E40AF, #3B82F6); }
.rt-stage.is-waiting   { background: linear-gradient(135deg, #B91C1C, #EF4444); }
.rt-stage.is-go        { background: linear-gradient(135deg, #15803D, #22C55E); }
.rt-stage.is-result    { background: linear-gradient(135deg, #6D28D9, #A855F7); }
.rt-stage.is-tooSoon   { background: linear-gradient(135deg, #9A3412, #F97316); }
.rt-message {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: .5rem;
    line-height: 1.1;
}
.rt-sub { font-size: 1rem; opacity: .85; max-width: 480px; }
.rt-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin: .25rem 0;
}

/* ─────────────────────────────────────────────
   SIMON SAYS
───────────────────────────────────────────── */
.ss-stage {
    background: var(--color-text);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    color: #fff;
}
.ss-board {
    width: clamp(240px, 80vw, 400px);
    height: clamp(240px, 80vw, 400px);
    margin: 1rem auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    padding: 8px;
    position: relative;
}
.ss-pad {
    cursor: pointer;
    transition: all .15s;
    border: 0;
    opacity: .65;
}
.ss-pad.ss-r { background: #DC2626; border-top-left-radius: 100%; }
.ss-pad.ss-g { background: #16A34A; border-top-right-radius: 100%; }
.ss-pad.ss-y { background: #EAB308; border-bottom-left-radius: 100%; }
.ss-pad.ss-b { background: #2563EB; border-bottom-right-radius: 100%; }
.ss-pad.is-active, .ss-pad:active { opacity: 1; box-shadow: inset 0 0 24px rgba(255,255,255,.6); transform: scale(.98); }
.ss-pad:disabled { cursor: not-allowed; }
.ss-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    aspect-ratio: 1 / 1;
    background: var(--color-text);
    border: 4px solid #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    pointer-events: none;
}
.ss-round { font-size: 2rem; font-weight: 800; line-height: 1; }
.ss-round-label { font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ss-status { font-weight: 600; min-height: 1.5em; margin-bottom: .5rem; }

/* ─────────────────────────────────────────────
   WHACK-A-MOLE
───────────────────────────────────────────── */
.wm-stage {
    background: linear-gradient(135deg, #84CC16, #65A30D);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    color: #fff;
    text-align: center;
}
.wm-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 480px;
    margin: 1rem auto;
}
.wm-hole {
    aspect-ratio: 1 / 1;
    background: radial-gradient(ellipse at center 70%, #422006 0%, #1C1917 100%);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.wm-mole {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: radial-gradient(ellipse at center top, #92400E 0%, #78350F 100%);
    border-radius: 50% 50% 30% 30%;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}
.wm-mole.is-up { transform: translateY(20%); }
.wm-mole.is-hit { transform: translateY(100%); transition: transform .15s; }
.wm-mole::before {
    content: '🐭';
    font-size: clamp(2rem, 8vw, 3rem);
}

/* ─────────────────────────────────────────────
   AIM TRAINER
───────────────────────────────────────────── */
.at-stage {
    background: #1E1B4B;
    border-radius: var(--radius-lg);
    padding: 0;
    margin: 1rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
    cursor: crosshair;
}
.at-target {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, #FCA5A5, #DC2626);
    border-radius: 50%;
    transition: transform .15s;
    box-shadow: 0 0 24px rgba(220, 38, 38, .6);
    cursor: crosshair;
    user-select: none;
    border: 0;
    padding: 0;
}
.at-target:hover { transform: scale(1.08); }
.at-target.is-hit {
    animation: at-burst .25s forwards;
}
@keyframes at-burst {
    100% { transform: scale(2); opacity: 0; }
}
.at-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(30, 27, 75, .9);
    text-align: center;
    padding: 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.at-overlay h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.at-overlay button {
    background: #fff;
    color: #1E1B4B;
    border: 0;
    padding: .625rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    margin-top: 1rem;
}
.at-hud {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* ─────────────────────────────────────────────
   PONG
───────────────────────────────────────────── */
.pn-stage {
    background: #0F172A;
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 1rem 0;
    position: relative;
    box-shadow: var(--shadow-md);
}
.pn-canvas {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border-radius: var(--radius-md);
    background: #1E293B;
    cursor: none;
}

/* ─────────────────────────────────────────────
   BREAKOUT
───────────────────────────────────────────── */
.bk-stage {
    background: #0F172A;
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 1rem 0;
    position: relative;
    box-shadow: var(--shadow-md);
}
.bk-canvas {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: block;
    border-radius: var(--radius-md);
    background: #1E293B;
    cursor: none;
    max-height: 600px;
}

/* ─────────────────────────────────────────────
   SLIDE PUZZLE
───────────────────────────────────────────── */
.sp-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.sp-board {
    display: grid;
    gap: 4px;
    background: var(--color-text);
    padding: 4px;
    border-radius: var(--radius-md);
    margin: 1rem auto;
    width: fit-content;
}
.sp-tile {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform .15s;
    border: 0;
    font-variant-numeric: tabular-nums;
}
.sp-tile:hover:not(:disabled) { transform: scale(.96); }
.sp-tile.is-empty {
    background: transparent;
    cursor: default;
    pointer-events: none;
}
.sp-tile.is-correct {
    background: linear-gradient(135deg, #15803D, #166534);
}
@media (max-width: 540px) {
    .sp-tile { width: 52px; height: 52px; font-size: 1.125rem; }
}

/* ─────────────────────────────────────────────
   DOTS AND BOXES
───────────────────────────────────────────── */
.db-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.db-board {
    display: inline-block;
    margin: 1rem auto;
    position: relative;
    background: var(--color-bg);
    padding: 1rem;
    border-radius: var(--radius-md);
}
.db-svg { display: block; }
.db-line {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 6;
    stroke-linecap: round;
    cursor: pointer;
    transition: stroke .15s;
}
.db-line:hover { stroke: var(--color-text-muted); }
.db-line.is-drawn { stroke: var(--color-text); cursor: default; }
.db-line.is-mine { stroke: var(--color-primary); }
.db-line.is-ai   { stroke: var(--color-accent); }
.db-dot { fill: var(--color-text); }
.db-box-label {
    font-family: var(--font);
    font-size: 18px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: middle;
}
.db-box-label.is-mine { fill: var(--color-primary); }
.db-box-label.is-ai   { fill: var(--color-accent); }

.db-scoreboard {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.db-score-card {
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem 1.25rem;
    min-width: 110px;
    transition: var(--transition);
}
.db-score-card.is-turn {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}
.db-score-card.is-ai-turn {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px #FFEDD5;
}
.db-score-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 700;
}
.db-score-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    margin-top: .125rem;
    font-variant-numeric: tabular-nums;
}
.db-score-card.is-turn    .db-score-value { color: var(--color-primary); }
.db-score-card.is-ai-turn .db-score-value { color: var(--color-accent); }

/* ─────────────────────────────────────────────
   SUDOKU (playable)
───────────────────────────────────────────── */
.su-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}
.su-board {
    display: grid;
    grid-template-columns: repeat(9, minmax(32px, 50px));
    gap: 1px;
    margin: 1rem auto;
    background: var(--color-text);
    padding: 3px;
    border-radius: 4px;
    border: 3px solid var(--color-text);
    width: fit-content;
}
.su-cell {
    aspect-ratio: 1 / 1;
    background: var(--color-surface);
    border: 0;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(.875rem, 3.5vw, 1.5rem);
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background .12s;
}
.su-cell.su-given { color: var(--color-primary); cursor: default; }
.su-cell.su-error { color: #DC2626; background: #FEE2E2; }
.su-cell.is-selected { background: #BFDBFE; }
.su-cell.is-related  { background: #DBEAFE; }
.su-cell.is-same-num { background: #FEF3C7; }
.su-cell:nth-child(3n) { box-shadow: 1px 0 0 var(--color-text); }
.su-cell:nth-child(9n) { box-shadow: none; }
.su-cell:nth-child(n+19):nth-child(-n+27),
.su-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--color-text); }
.su-cell .su-notes {
    position: absolute;
    inset: 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    font-size: clamp(.5rem, 1.5vw, .625rem);
    color: var(--color-text-muted);
    font-weight: 500;
}

.su-keypad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .375rem;
    max-width: 380px;
    margin: 1rem auto 0;
}
.su-key {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 1.125rem;
    padding: .625rem 0;
    transition: var(--transition);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.su-key:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.su-key.su-erase, .su-key.su-notes-toggle {
    grid-column: span 1;
    background: var(--color-surface);
    font-size: 1rem;
}
.su-key.su-notes-toggle.is-active {
    background: var(--color-primary);
    color: #fff;
}

/* ─────────────────────────────────────────────
   TETRIS
───────────────────────────────────────────── */
.tt-tetris-stage {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 640px) { .tt-tetris-stage { grid-template-columns: 1fr; } }
.tt-tetris-canvas {
    background: #0F172A;
    border-radius: var(--radius-md);
    width: 100%;
    aspect-ratio: 10 / 20;
    max-height: 80vh;
    box-shadow: var(--shadow-md);
    display: block;
}
.tt-side {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.tt-side-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .875rem 1rem;
    text-align: center;
}
.tt-side-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    font-weight: 700;
}
.tt-side-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    margin-top: .125rem;
    font-variant-numeric: tabular-nums;
}
.tt-next-canvas {
    width: 100%;
    aspect-ratio: 4 / 4;
    background: #1E293B;
    border-radius: 4px;
    display: block;
    margin-top: .375rem;
}
.tt-tetris-help {
    font-size: .75rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}
.tt-tetris-help kbd {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font);
    font-size: .6875rem;
    margin: 0 1px;
}

/* ─────────────────────────────────────────────
   SOLITAIRE
───────────────────────────────────────────── */
.sl-stage {
    background: linear-gradient(135deg, #064E3B 0%, #047857 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
}
.sl-top {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}
.sl-tableau { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.sl-pile {
    aspect-ratio: 5 / 7;
    border: 2px dashed rgba(255,255,255,.25);
    border-radius: 6px;
    position: relative;
    cursor: pointer;
}
.sl-tab-pile {
    border: 2px dashed rgba(255,255,255,.25);
    border-radius: 6px;
    min-height: 110px;
    position: relative;
}
.sl-card {
    width: 100%;
    aspect-ratio: 5 / 7;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,.25);
    position: absolute;
    left: 0;
    cursor: pointer;
    user-select: none;
    border: 1px solid rgba(0,0,0,.1);
    transition: transform .12s, box-shadow .12s;
    overflow: hidden;
}
.sl-card.is-back {
    background: repeating-linear-gradient(45deg, #1E40AF, #1E40AF 4px, #1E3A8A 4px, #1E3A8A 8px);
    color: transparent;
}
.sl-card.is-selected {
    transform: translateY(-6px);
    box-shadow: 0 6px 14px rgba(0,0,0,.4);
}
.sl-card .sl-rank {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: clamp(.75rem, 2vw, 1rem);
    font-weight: 800;
    line-height: 1;
}
.sl-card .sl-suit-corner {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: clamp(.75rem, 2vw, 1rem);
    line-height: 1;
}
.sl-card .sl-suit-big {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.25rem, 4vw, 2rem);
    pointer-events: none;
}
.sl-card.is-red { color: #DC2626; }
.sl-card.is-black { color: #1E293B; }

.sl-tableau-card { position: absolute; left: 0; right: 0; }

.sl-status {
    color: #fff;
    text-align: center;
    margin-bottom: .75rem;
    font-weight: 600;
    min-height: 1.5em;
}

/* ─────────────────────────────────────────────
   REVERSI / OTHELLO
───────────────────────────────────────────── */
.rv-stage {
    background: linear-gradient(135deg, #14532D 0%, #166534 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    color: #fff;
}
.rv-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    background: #064E3B;
    border-radius: var(--radius-md);
    padding: 4px;
    width: 100%;
    max-width: 480px;
    margin: 1rem auto;
}
.rv-cell {
    aspect-ratio: 1 / 1;
    background: #166534;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 8%;
}
.rv-cell:hover:not(.is-occupied) { background: #15803D; }
.rv-cell.is-valid::before {
    content: '';
    width: 24%;
    height: 24%;
    background: rgba(255,255,255,.3);
    border-radius: 50%;
}
.rv-disc {
    width: 88%;
    height: 88%;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    transition: background .35s;
}
.rv-disc.is-black { background: radial-gradient(circle at 35% 35%, #475569, #0F172A); }
.rv-disc.is-white { background: radial-gradient(circle at 35% 35%, #F8FAFC, #94A3B8); }

.rv-scoreboard {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.rv-score-card {
    background: rgba(0,0,0,.25);
    border-radius: var(--radius-md);
    padding: .75rem 1.25rem;
    min-width: 110px;
    border: 2px solid transparent;
}
.rv-score-card.is-turn { border-color: #FCD34D; }
.rv-score-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: .25rem;
}
.rv-score-icon.is-black { background: radial-gradient(circle at 35% 35%, #475569, #0F172A); }
.rv-score-icon.is-white { background: radial-gradient(circle at 35% 35%, #F8FAFC, #94A3B8); }
.rv-score-value { font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────
   BATTLESHIP
───────────────────────────────────────────── */
.bs-stage {
    background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 100%);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    color: #fff;
}
.bs-grids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1rem 0;
}
@media (max-width: 640px) { .bs-grids { grid-template-columns: 1fr; } }
.bs-grid-wrap { text-align: center; }
.bs-grid-title {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    margin-bottom: .5rem;
    opacity: .9;
}
.bs-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    background: rgba(0,0,0,.3);
    padding: 3px;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
}
.bs-cell {
    background: rgba(255,255,255,.1);
    border: 0;
    cursor: pointer;
    border-radius: 2px;
    transition: background .12s;
    aspect-ratio: 1 / 1;
}
.bs-cell:hover:not(:disabled):not(.is-shot) { background: rgba(255,255,255,.25); }
.bs-cell:disabled { cursor: default; }
.bs-cell.is-ship { background: #94A3B8; }
.bs-cell.is-miss { background: rgba(255,255,255,.2); position: relative; }
.bs-cell.is-miss::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20%; height: 20%; background: #fff; border-radius: 50%; opacity: .6; }
.bs-cell.is-hit { background: #DC2626; position: relative; }
.bs-cell.is-hit::after { content: '✕'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 800; font-size: 60%; }
.bs-cell.is-sunk { background: #0F172A; }
.bs-status { text-align: center; font-weight: 600; min-height: 1.5em; margin-bottom: .5rem; }
.bs-fleet { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; font-size: .8125rem; opacity: .9; }

/* ─────────────────────────────────────────────
   COOKIE CLICKER
───────────────────────────────────────────── */
.cc-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) { .cc-stage { grid-template-columns: 1fr; } }
.cc-left {
    background: linear-gradient(135deg, #92400E, #78350F);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    color: #fff;
    box-shadow: var(--shadow-md);
}
.cc-cookie {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #C2A06C, #92400E 70%);
    border: 0;
    cursor: pointer;
    margin: 1rem auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.4), inset -8px -8px 32px rgba(0,0,0,.3);
    transition: transform .08s;
    position: relative;
}
.cc-cookie:active { transform: scale(.96); }
.cc-cookie::before, .cc-cookie::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #422006;
    box-shadow: 0 2px 4px rgba(0,0,0,.4) inset;
}
.cc-cookie::before {
    top: 24%; left: 22%;
    width: 18px; height: 18px;
}
.cc-cookie::after {
    top: 50%; right: 28%;
    width: 14px; height: 14px;
    box-shadow: 30px -30px 0 0 #422006, -10px 30px 0 -2px #422006;
}
.cc-count {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cc-rate { opacity: .85; margin-top: .25rem; }
.cc-floating {
    position: absolute;
    pointer-events: none;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.4);
    animation: cc-float 1s forwards;
    z-index: 2;
}
@keyframes cc-float {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.4); }
}

.cc-shop {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow-y: auto;
    max-height: 600px;
}
.cc-shop-title {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .5rem;
}
.cc-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: .75rem;
    align-items: center;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .625rem .875rem;
    margin-bottom: .375rem;
    cursor: pointer;
    transition: var(--transition);
}
.cc-item:hover:not(.is-locked) { border-color: var(--color-primary); background: var(--color-primary-light); }
.cc-item.is-locked { opacity: .55; cursor: not-allowed; }
.cc-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}
.cc-item-name { font-weight: 700; }
.cc-item-meta { font-size: .75rem; color: var(--color-text-muted); }
.cc-item-cost { font-weight: 700; color: var(--color-primary); }
.cc-item-cost.is-affordable { color: #15803D; }
.cc-item-owned {
    background: var(--color-text);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: .6875rem;
    font-weight: 700;
}

/* ─────────────────────────────────────────────
   FLAPPY BIRD
───────────────────────────────────────────── */
.fb-stage {
    background: #0F172A;
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-md);
    position: relative;
}
.fb-canvas {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 75vh;
    display: block;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #38BDF8 0%, #94A3B8 95%, #84CC16 100%);
    cursor: pointer;
    touch-action: manipulation;
}

/* ─────────────────────────────────────────────
   WORD HUNT (Boggle-style)
───────────────────────────────────────────── */
.wh-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.wh-layout {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 640px) { .wh-layout { grid-template-columns: 1fr; } }
.wh-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .375rem;
    max-width: 360px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    user-select: none;
}
.wh-cell {
    aspect-ratio: 1 / 1;
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    color: var(--color-text);
    cursor: pointer;
    transition: all .12s;
}
.wh-cell.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}
.wh-current {
    background: var(--color-primary-light);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: .75rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .1em;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wh-found {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .75rem;
    max-height: 280px;
    overflow-y: auto;
}
.wh-found-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: .25rem;
}
.wh-found-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .5rem;
}
.wh-found-word {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
}
.wh-found-word.is-new { animation: wh-pop .35s; }
@keyframes wh-pop { 0% { transform: scale(.6); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.wh-message {
    text-align: center;
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--color-text-muted);
    min-height: 1.5em;
}
.wh-message.is-good { color: #15803D; font-weight: 600; }
.wh-message.is-bad  { color: #B91C1C; }