/* ==========================================================================
   OrbitOS Games (4.4.2)
   The Games app and every game inside it, in the Design v3 kit: the theme's
   surface, thin borders, colored tiles and near-white primary buttons.
   ========================================================================== */

#games-fullscreen .games-body {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

#games-fullscreen .games-head-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

#games-fullscreen .games-coins {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ok-line);
    background: transparent;
    color: #f5b301;
    font: 700 0.85rem var(--font-main);
}

#games-fullscreen button.games-coins { cursor: pointer; }
#games-fullscreen button.games-coins:active { background: color-mix(in srgb, var(--on-surface, #ffffff) 8%, transparent); }

/* The note button that turns game music on and off. */
.games-music-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--ok-line);
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
}
.games-music-btn.is-off { color: var(--ok-muted); }
#flappybird-fullscreen .games-music-btn { margin-left: auto; }

#games-fullscreen .games-coins b {
    color: var(--on-surface);
    font-variant-numeric: tabular-nums;
}

.games-hub,
.games-stage {
    max-width: 560px;
    margin: 0 auto;
}

/* ---------- Hub ---------- */

/* Today's puzzles */
.games-daily-head { display: flex; align-items: center; justify-content: space-between; }
.games-daily-tools { display: inline-flex; align-items: center; gap: 6px; }
.games-remind { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--ok-muted); font: 800 0.72rem var(--font-main); letter-spacing: 0; text-transform: none; cursor: pointer; }
.games-remind.is-on { color: var(--on-surface); }
.games-streak {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ok-muted);
}
.games-streak.is-on { border-color: transparent; background: #f97316; color: #ffffff; }
.games-streak.is-on svg { fill: currentColor; }

.games-daily {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.games-daily-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 20px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    color: var(--on-surface);
    font-family: var(--font-main);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease;
}
.games-daily-card:active { transform: scale(0.98); }
.games-daily-card .games-tile-icon { width: 44px; height: 44px; flex-shrink: 0; }
.games-daily-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.games-daily-text b { font-size: 0.98rem; }
.games-daily-text span { font-size: 0.8rem; color: var(--ok-muted); }
.games-daily-mark { display: inline-flex; color: var(--ok-muted); }
.games-daily-card.is-done { border-color: color-mix(in srgb, var(--tile) 55%, transparent); }
.games-daily-card.is-done .games-daily-mark { color: var(--tile); }
.games-daily-card.is-missed .games-daily-mark { color: #ef4444; }
.games-daily-foot { margin: 2px 4px 0; font-size: 0.8rem; color: var(--ok-muted); }
#wd-mode, #su-level { margin-bottom: 10px; }
#wd-mode button svg, #su-level button svg { vertical-align: -2px; margin-right: 4px; }
html.theme-amoled .games-streak.is-on { background: #ffffff; color: #000000; }
html.theme-amoled .games-daily-card { background: #000000; }

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

@media (min-width: 520px) {
    .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.games-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    color: var(--on-surface);
    font-family: var(--font-main);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.games-tile:active {
    transform: scale(0.96);
}

.games-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    border-radius: 15px;
    background: var(--tile);
    color: #ffffff;
}

.games-tile-name {
    font-size: 0.98rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.games-tile-sub {
    font-size: 0.78rem;
    color: var(--ok-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---------- Common game parts ---------- */

.games-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100%;
    padding-bottom: 90px;
    color: var(--on-surface);
    font-family: var(--font-main);
}

.games-stats {
    display: flex;
    gap: 8px;
}

.games-stat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
}

.games-stat span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ok-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.games-stat b {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.games-board-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

.games-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.games-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong);
    background: transparent;
    color: var(--on-surface);
    font: 700 0.92rem var(--font-main);
    cursor: pointer;
    transition: transform 0.14s ease, background-color 0.14s ease;
}

.games-btn:active:not(:disabled) { transform: scale(0.95); }
.games-btn:disabled { opacity: 0.4; cursor: default; }
.games-btn[hidden] { display: none; }

.games-btn--ink {
    border-color: transparent;
    background: var(--ok-ink);
    color: var(--ok-on-ink);
}

.games-btn--big {
    height: 54px;
    padding: 0 30px;
    font-size: 1.02rem;
}

.games-btn--toggle.is-on,
.games-btn--toggle[aria-pressed="true"] {
    border-color: transparent;
    background: var(--hue);
    color: #ffffff;
}

.games-hint,
.games-turn {
    margin: 0;
    text-align: center;
    font-size: 0.86rem;
    color: var(--ok-muted);
}

.games-turn {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--on-surface);
    min-height: 1.4em;
}

.games-seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--ok-line);
    align-self: center;
}

.games-seg button {
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--ok-muted);
    font: 700 0.85rem var(--font-main);
    cursor: pointer;
}

.games-seg button.is-on {
    background: var(--hue);
    color: #ffffff;
}

/* On-screen letter keyboard */
.games-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.games-keys-row {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.games-key {
    flex: 1;
    max-width: 44px;
    min-width: 0;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 12%, transparent);
    color: var(--on-surface);
    font: 700 1rem var(--font-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.games-key:active:not(:disabled) { transform: scale(0.92); }
.games-key:disabled { opacity: 0.3; cursor: default; }
.games-key--wide { flex: 1.6; max-width: 66px; font-size: 0.78rem; }
.games-key.is-hit { background: #16a34a; color: #fff; }
.games-key.is-hit:disabled, .games-key.is-miss:disabled { opacity: 1; }
.games-key.is-near { background: #ca8a04; color: #fff; }
.games-key.is-miss { background: color-mix(in srgb, var(--on-surface, #ffffff) 4%, transparent); color: var(--ok-muted); }

/* Result banner */
.games-banner {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 14px 14px 14px 18px;
    border-radius: 22px;
    border: 1px solid var(--ok-line-strong);
    background: var(--ok-card);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
    animation: gamesBannerIn 0.32s var(--os-ease, ease) both;
}

.games-banner > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.games-banner strong { font-size: 1.08rem; }
.games-banner span { font-size: 0.86rem; color: var(--ok-muted); }
.games-banner.is-good { border-color: color-mix(in srgb, #22c55e 55%, transparent); }
.games-banner.is-bad { border-color: color-mix(in srgb, #ef4444 55%, transparent); }
.games-banner .games-btn { flex-shrink: 0; }

@keyframes gamesBannerIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes gamesShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes gamesPop {
    0% { transform: scale(0.6); opacity: 0; }
    70% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes gamesBump {
    50% { transform: scale(1.14); }
}

.is-shake { animation: gamesShake 0.4s ease; }

/* ---------- Snake ---------- */

.games-canvas {
    display: block;
    border-radius: 18px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
}

.games-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 20px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--background, #05080c) 70%, transparent);
}

.games-overlay[hidden] { display: none; }
.games-overlay strong { font-size: 1.5rem; }
.games-overlay span { color: var(--ok-muted); font-size: 0.9rem; margin-bottom: 8px; }

.games-dpad {
    display: grid;
    grid-template-columns: repeat(3, 62px);
    grid-template-rows: repeat(2, 56px);
    gap: 6px;
    justify-content: center;
}

.games-dpad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ok-line);
    border-radius: 16px;
    background: var(--ok-card);
    color: var(--on-surface);
    cursor: pointer;
    touch-action: none;
}

.games-dpad-btn:active { background: color-mix(in srgb, var(--hue) 35%, var(--ok-card)); }
.games-dpad-btn[data-dir="up"] { grid-column: 2; grid-row: 1; }
.games-dpad-btn[data-dir="left"] { grid-column: 1; grid-row: 2; }
.games-dpad-btn[data-dir="down"] { grid-column: 2; grid-row: 2; }
.games-dpad-btn[data-dir="right"] { grid-column: 3; grid-row: 2; }

@media (pointer: fine) and (min-height: 800px) {
    .games-dpad { opacity: 0.8; }
}

/* ---------- 2048 ---------- */

.tw-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: min(100%, 420px);
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 8%, transparent);
    touch-action: none;
}

.tw-cell {
    position: relative;
    border-radius: 12px;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 6%, transparent);
}

.tw-tile {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font: 800 clamp(1.2rem, 7vw, 2rem) var(--font-main);
    color: #ffffff;
    background: #f59e0b;
}

.tw-tile.is-new { animation: gamesPop 0.2s ease both; }
.tw-tile.is-merged { animation: gamesBump 0.18s ease; }
.tw-2 { background: #fde68a; color: #3f2f0a; }
.tw-4 { background: #fcd34d; color: #3f2f0a; }
.tw-8 { background: #fb923c; }
.tw-16 { background: #f97316; }
.tw-32 { background: #ef4444; }
.tw-64 { background: #dc2626; }
.tw-128 { background: #a855f7; font-size: clamp(1rem, 6vw, 1.7rem); }
.tw-256 { background: #8b5cf6; font-size: clamp(1rem, 6vw, 1.7rem); }
.tw-512 { background: #6366f1; font-size: clamp(1rem, 6vw, 1.7rem); }
.tw-1024 { background: #3b82f6; font-size: clamp(0.9rem, 5vw, 1.4rem); }
.tw-2048 { background: #10b981; font-size: clamp(0.9rem, 5vw, 1.4rem); }
.tw-4096 { background: #0f172a; font-size: clamp(0.9rem, 5vw, 1.4rem); }

/* ---------- Minesweeper ---------- */

.ms-board {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 3px;
    width: min(100%, 420px);
    padding: 6px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 8%, transparent);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.ms-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: color-mix(in srgb, #94a3b8 45%, var(--ok-card));
    color: var(--on-surface);
    font: 800 1rem var(--font-main);
    cursor: pointer;
}

.ms-cell.is-open { background: color-mix(in srgb, var(--on-surface, #ffffff) 5%, transparent); cursor: default; }
.ms-cell.is-mine { background: #ef4444; color: #fff; }
.ms-cell.is-flag { color: #f97316; }
.ms-n1 { color: #3b82f6; } .ms-n2 { color: #22c55e; } .ms-n3 { color: #ef4444; } .ms-n4 { color: #8b5cf6; }
.ms-n5 { color: #f97316; } .ms-n6 { color: #14b8a6; } .ms-n7 { color: #ec4899; } .ms-n8 { color: #64748b; }

/* ---------- Wordle ---------- */

.wd-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: min(100%, 320px);
    margin: 0 auto;
}

.wd-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid var(--ok-line);
    font: 800 1.6rem var(--font-main);
    text-transform: uppercase;
}

.wd-cell.is-filled { border-color: var(--ok-line-strong); animation: gamesBump 0.12s ease; }
.wd-cell.is-hit, .wd-cell.is-near, .wd-cell.is-miss { border-color: transparent; color: #ffffff; }
.wd-cell.is-hit { background: #16a34a; }
.wd-cell.is-near { background: #ca8a04; }
.wd-cell.is-miss { background: color-mix(in srgb, var(--on-surface, #ffffff) 22%, transparent); }
.wd-cell.is-flip { animation: wdFlip 0.4s ease; }

@keyframes wdFlip {
    0% { transform: rotateX(0); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
}

/* ---------- Sudoku ---------- */

.su-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: min(100%, 440px);
    border-radius: 14px;
    border: 2px solid var(--ok-line-strong);
    overflow: hidden;
    background: var(--ok-card);
}

.su-cell {
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-right: 1px solid var(--ok-line);
    border-bottom: 1px solid var(--ok-line);
    background: transparent;
    color: var(--hue);
    font: 700 clamp(0.95rem, 4.6vw, 1.3rem) var(--font-main);
    cursor: pointer;
}

.su-cell.is-given { color: var(--on-surface); font-weight: 800; }
.su-cell.b-r { border-right: 2px solid var(--ok-line-strong); }
.su-cell.b-b { border-bottom: 2px solid var(--ok-line-strong); }
.su-cell.is-peer { background: color-mix(in srgb, var(--hue) 9%, transparent); }
.su-cell.is-same { background: color-mix(in srgb, var(--hue) 22%, transparent); }
.su-cell.is-sel { background: color-mix(in srgb, var(--hue) 38%, transparent); }
.su-cell.is-wrong { color: #ef4444; }

.su-pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    width: min(100%, 440px);
    margin: 0 auto;
}

.su-pad .games-key,
.mt-pad .games-key { max-width: none; height: 50px; font-size: 1.2rem; }

/* ---------- Memory ---------- */

.mm-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: min(100%, 400px);
    perspective: 800px;
}

.mm-card {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.35s ease;
}

.mm-card.is-open { transform: rotateY(180deg); }

.mm-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mm-back {
    background: var(--hue);
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%);
}

.mm-front {
    transform: rotateY(180deg);
    border: 2px solid var(--c);
    background: var(--ok-card);
    color: var(--c);
}

.mm-card.is-found .mm-front { background: color-mix(in srgb, var(--c) 18%, var(--ok-card)); }

/* ---------- Mastermind ---------- */

.mx-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
}

.mx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--ok-line);
}

.mx-row.is-cur { border-color: var(--hue); }
.mx-row.is-answer { border-style: dashed; }

.mx-peg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c);
}

.mx-peg.is-empty {
    background: none;
    border: 2px dashed var(--ok-line-strong);
}

.mx-keys {
    display: grid;
    grid-template-columns: repeat(2, 10px);
    gap: 4px;
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--ok-muted);
}

.mx-row.is-answer .mx-keys { display: block; }

.mx-keys i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--ok-line-strong);
}

.mx-keys i.is-b { background: var(--on-surface); border-color: var(--on-surface); }
.mx-keys i.is-w { border-color: var(--on-surface); }

.mx-palette {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.mx-color {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--c) 60%, #ffffff);
    background: var(--c);
    cursor: pointer;
}

.mx-color:active { transform: scale(0.9); }

/* ---------- Hangman ---------- */

.hg-art {
    display: flex;
    justify-content: center;
    color: var(--on-surface);
}

.hg-art svg { width: 140px; height: 150px; }

.hg-word {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.hg-word span {
    width: 28px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid var(--ok-line-strong);
    font: 800 1.4rem var(--font-main);
}

.hg-word span.is-shown { animation: gamesPop 0.2s ease both; }
.hg-word span.is-missed { color: #ef4444; }

/* ---------- Scramble ---------- */

.sc-letters,
.sc-answer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sc-tile {
    width: 48px;
    height: 54px;
    border: none;
    border-radius: 14px;
    background: var(--hue);
    color: #fff;
    font: 800 1.4rem var(--font-main);
    cursor: pointer;
    transition: transform 0.14s ease, opacity 0.2s ease;
}

.sc-tile:disabled { opacity: 0.2; transform: scale(0.9); }

.sc-answer span {
    width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 2px solid var(--ok-line);
    font: 800 1.3rem var(--font-main);
}

.sc-answer.is-good span { border-color: #22c55e; background: color-mix(in srgb, #22c55e 20%, transparent); }

/* ---------- Tic-Tac-Toe ---------- */

.tt-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: min(100%, 340px);
}

.tt-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 20px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    cursor: pointer;
}

.tt-cell svg { animation: gamesPop 0.2s ease both; }
.tt-cell.is-x { color: var(--hue); }
.tt-cell.is-o { color: #f97316; }
.tt-cell.is-line { background: color-mix(in srgb, var(--hue) 22%, var(--ok-card)); }

/* ---------- Connect 4 ---------- */

.c4-board {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 4px;
    width: min(100%, 440px);
    padding: 8px;
    border-radius: 20px;
    background: #1d4ed8;
}

.c4-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: none;
    cursor: pointer;
}

.c4-col:hover,
.c4-col:active { background: rgba(255, 255, 255, 0.1); }

.c4-hole {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--background, #05080c);
    overflow: hidden;
}

.c4-disc {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
}

.c4-disc.is-you { background: #facc15; }
.c4-disc.is-cpu { background: #ef4444; }
.c4-disc.is-drop { animation: c4Drop 0.35s cubic-bezier(.4, 0, .6, 1) both; }
.c4-disc.is-line { box-shadow: inset 0 0 0 4px #ffffff; }

@keyframes c4Drop {
    from { transform: translateY(calc(-110% * (var(--r) + 1))); }
    to { transform: none; }
}

/* ---------- Battleship ---------- */

.bs-board {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 3px;
    width: min(100%, 400px);
    padding: 6px;
    border-radius: 14px;
    background: color-mix(in srgb, #0891b2 25%, var(--ok-card));
}

.bs-board--mine {
    width: min(70%, 260px);
    margin: 0 auto;
}

.bs-cell {
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: color-mix(in srgb, #0891b2 45%, var(--ok-card));
    cursor: pointer;
    position: relative;
}

.bs-cell:disabled { cursor: default; }
.bs-cell.is-ship { background: #64748b; }
.bs-cell.is-miss::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.bs-cell.is-hit { background: #f97316; animation: gamesPop 0.25s ease; }
.bs-cell.is-sunk { background: #b91c1c; }

/* ---------- Rock Paper Scissors ---------- */

.rp-arena {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 20px 0 6px;
}

.rp-hand {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    font-size: 3.6rem;
}

.rp-hand.is-cpu { transform: scaleX(-1); }
.rp-hand.is-shake { animation: rpShake 0.3s ease 3; }
.rp-vs { color: var(--ok-muted); font-weight: 800; }
.rp-arena[data-result="win"] #rp-you,
.rp-arena[data-result="lose"] #rp-cpu { border-color: #22c55e; background: color-mix(in srgb, #22c55e 15%, var(--ok-card)); }

@keyframes rpShake {
    50% { transform: translateY(-16px); }
}

.rp-hand.is-cpu.is-shake { animation-name: rpShakeFlip; }

@keyframes rpShakeFlip {
    0%, 100% { transform: scaleX(-1); }
    50% { transform: scaleX(-1) translateY(-16px); }
}

.rp-picks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.rp-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 6px;
    border-radius: 20px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    color: var(--on-surface);
    font: 700 0.9rem var(--font-main);
    cursor: pointer;
}

.rp-pick span { font-size: 2.2rem; }
.rp-pick:active { transform: scale(0.95); }

/* ---------- Trivia ---------- */

.tv-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--ok-line);
    overflow: hidden;
}

.tv-progress i {
    display: block;
    height: 100%;
    background: var(--hue);
    transition: width 0.4s ease;
}

.tv-q {
    margin: 10px 0 4px;
    font-size: 1.35rem;
    line-height: 1.35;
}

.tv-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tv-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    color: var(--on-surface);
    font: 600 1rem var(--font-main);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tv-opt span {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--hue) 25%, transparent);
    font-weight: 800;
}

.tv-opt.is-right { border-color: #22c55e; background: color-mix(in srgb, #22c55e 16%, var(--ok-card)); }
.tv-opt.is-wrong { border-color: #ef4444; background: color-mix(in srgb, #ef4444 16%, var(--ok-card)); animation: gamesShake 0.4s ease; }

/* ---------- Math sprint ---------- */

.mt-q {
    text-align: center;
    font: 800 2.6rem var(--font-main);
    padding-top: 10px;
}

.mt-typed {
    align-self: center;
    min-width: 140px;
    padding: 8px 20px;
    border-radius: 16px;
    border: 2px solid var(--ok-line);
    text-align: center;
    font: 700 1.8rem var(--font-main);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mt-typed.is-good { border-color: #22c55e; background: color-mix(in srgb, #22c55e 18%, transparent); }

.mt-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: min(100%, 340px);
    margin: 0 auto;
}

/* ---------- Typing ---------- */

.ty-text {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    font: 500 1.2rem/1.7 var(--font-mono, monospace);
    color: var(--ok-muted);
}

.ty-text .is-ok { color: var(--on-surface); }
.ty-text .is-bad { color: #fff; background: #ef4444; border-radius: 3px; }
.ty-text .is-cur { box-shadow: inset 0 -3px 0 var(--hue); color: var(--on-surface); }

.ty-input,
.gu-form input {
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid var(--ok-line-strong) !important;
    background: var(--ok-card) !important;
    color: var(--on-surface) !important;
    font: 1rem var(--font-main);
    outline: none;
    box-shadow: none !important;
}

.ty-input:focus,
.gu-form input:focus { border-color: var(--hue) !important; }

/* ---------- Guess ---------- */

.gu-range {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gu-bar {
    position: relative;
    flex: 1;
    height: 12px;
    border-radius: 6px;
    background: var(--ok-line);
}

.gu-bar i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 6px;
    background: var(--hue);
    transition: left 0.3s ease, width 0.3s ease;
}

.gu-msg {
    margin: 10px 0;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
}

.gu-form {
    display: flex;
    gap: 8px;
}

/* ---------- Slots ---------- */

.sl-machine {
    position: relative;
    padding: 14px;
    border-radius: 28px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--hue) 70%, #000000), var(--hue));
}

.sl-machine.is-win { animation: gamesBump 0.4s ease 2; }

.sl-reels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sl-reel {
    height: 110px;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
}

.sl-strip span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    font-size: 3.2rem;
}

/* The reels curve away at the top and bottom, like a real machine (this
   replaced a red payline that cut across the symbols). */
.sl-reel { position: relative; }
.sl-reel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06) 22%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.06) 78%, rgba(0, 0, 0, 0.22));
    pointer-events: none;
}

.sl-pay {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    font-size: 0.85rem;
    color: var(--ok-muted);
    text-align: center;
}

.sl-pay b { color: var(--on-surface); }

/* ---------- Blackjack ---------- */

.bj-table {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    border-radius: 26px;
    background: radial-gradient(circle at 50% 0%, #16a34a, #14532d);
    color: #ffffff;
}

.bj-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    opacity: 0.9;
}

.bj-label b {
    padding: 1px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
}

.bj-hand {
    display: flex;
    gap: 8px;
    min-height: 92px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.bj-card {
    width: 62px;
    height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    animation: gamesPop 0.25s ease both;
}

.bj-card b { font-size: 1.3rem; }
.bj-card i { font-style: normal; font-size: 1.5rem; }
.bj-card.is-red { color: #dc2626; }

.bj-card.is-back {
    background: repeating-linear-gradient(45deg, #1e3a8a, #1e3a8a 6px, #2563eb 6px, #2563eb 12px);
    border: 3px solid #ffffff;
}

/* ---------- Wheel of Fortune ---------- */

.wf-cat {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hue);
}

.wf-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
}

.wf-word {
    display: flex;
    gap: 3px;
}

.wf-word i {
    width: 24px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--hue) 25%, var(--ok-card));
    font: normal 800 1.05rem var(--font-main);
}

.wf-word i.is-shown { background: #ffffff; color: #0f172a; }

.wf-wheel-wrap {
    position: relative;
    width: 210px;
    height: 210px;
    margin: 4px auto 0;
}

.wf-wheel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.wf-wheel text {
    fill: #ffffff;
    font: 800 10px var(--font-main);
}

.wf-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 20px solid var(--on-surface);
}

/* ---------- Magic 8 ---------- */

.m8-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.m8-ball {
    width: min(78vw, 280px);
    height: min(78vw, 280px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #475569, #0f172a 55%, #020617);
    cursor: pointer;
}

.m8-ball.is-shake { animation: gamesShake 0.35s ease 2; }

.m8-window {
    width: 46%;
    height: 46%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #1e1b4b, #020617);
}

.m8-tri {
    max-width: 80%;
    color: #a5b4fc;
    font: 700 0.8rem/1.25 var(--font-main);
    text-align: center;
    opacity: 0.55;
    transition: opacity 0.5s ease;
}

.m8-tri.is-shown { opacity: 1; }

/* ---------- Coin ---------- */

.cf-wrap {
    display: flex;
    justify-content: center;
    padding: 30px 0 10px;
    perspective: 700px;
}

.cf-coin {
    position: relative;
    width: 170px;
    height: 170px;
    transform-style: preserve-3d;
}

.cf-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 8px solid #a16207;
    background: radial-gradient(circle at 35% 30%, #fde68a, #eab308 60%, #a16207);
    color: #713f12;
    font: 900 4rem var(--font-main);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cf-tails { transform: rotateY(180deg); }

/* ---------- Cowsay ---------- */

.cow-out {
    margin: 0;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    font: 0.9rem/1.25 var(--font-mono, monospace);
    overflow-x: auto;
    white-space: pre;
    user-select: text;
}

/* ---------- AMOLED ---------- */

html.theme-amoled .games-tile-icon,
html.theme-amoled .sc-tile,
html.theme-amoled .mm-back {
    background: #1c1c1c !important;
    border: 1px solid #2a2a2a;
}

@media (prefers-reduced-motion: reduce) {
    .games-stage *,
    .games-banner {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Flappy Bird ---------- */

#flappybird-fullscreen .fb-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#flappybird-fullscreen .fb-field {
    position: relative;
    flex: 1;
    min-height: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

#flappybird-fullscreen canvas {
    position: absolute;
    inset: 0;
    display: block;
}

#flappybird-fullscreen .fb-score {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    text-align: center;
    color: #ffffff;
    font: 900 3.4rem var(--font-main);
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

#flappybird-fullscreen .fb-score.is-bump { animation: gamesBump 0.2s ease; }

#flappybird-fullscreen .fb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

#flappybird-fullscreen .fb-overlay[hidden] { display: none; }

#flappybird-fullscreen .fb-card {
    width: min(100%, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid var(--ok-line);
    background: color-mix(in srgb, var(--surface-color, #0d1117) 88%, transparent);
    color: var(--on-surface);
    font-family: var(--font-main);
    text-align: center;
    pointer-events: auto;
    animation: gamesBannerIn 0.3s ease both;
}

#flappybird-fullscreen .fb-kicker {
    font-size: 1.5rem;
    font-weight: 800;
}

#flappybird-fullscreen .fb-card p {
    margin: 0;
    color: var(--ok-muted);
    font-size: 0.92rem;
}

#flappybird-fullscreen .fb-scores {
    display: flex;
    gap: 10px;
}

#flappybird-fullscreen .fb-scores div {
    min-width: 90px;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid var(--ok-line);
}

#flappybird-fullscreen .fb-scores span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ok-muted);
}

#flappybird-fullscreen .fb-scores b { font-size: 1.6rem; }

/* ---------- Pulse: tap the version ---------- */

#pulse-fullscreen .pulse-tap-row {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#pulse-fullscreen .pulse-tap-row:active {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 6%, transparent);
}

#pulse-fullscreen .pulse-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ok-ink, #ffffff);
    color: var(--ok-on-ink, #000000);
    font: 700 0.9rem var(--font-main);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#pulse-fullscreen .pulse-toast.is-on {
    animation: pulseToast 1.6s ease forwards;
}

@keyframes pulseToast {
    0% { opacity: 0; transform: translate(-50%, 12px); }
    12%, 80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
}

/* ---------- Orbit (the easter egg) ---------- */

.orbit-egg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 21000 !important;
    background: radial-gradient(ellipse at 50% 40%, #111a3a, #04060f 70%) !important;
    color: #ffffff;
    font-family: var(--font-main);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.orbit-egg canvas {
    position: absolute;
    inset: 0;
    display: block;
}

.orbit-egg-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    cursor: pointer;
}

.orbit-egg-top {
    position: absolute;
    top: calc(18px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.orbit-egg-name {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.orbit-egg-ver {
    font-size: 0.8rem;
    opacity: 0.55;
}

.orbit-egg-hud {
    position: absolute;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.orbit-egg-hud div {
    min-width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.orbit-egg-hud span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.6;
}

.orbit-egg-hud b {
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.orbit-egg-hint {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.orbit-egg-hint.is-gone { opacity: 0; }

.orbit-egg-toast {
    position: absolute;
    top: calc(80px + env(safe-area-inset-top, 0px));
    left: 50%;
    width: min(88vw, 360px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border-radius: 20px;
    background: #ffffff;
    color: #0f172a;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -12px);
    pointer-events: none;
}

.orbit-egg-toast strong { font-size: 1.05rem; }
.orbit-egg-toast span { font-size: 0.85rem; opacity: 0.75; }
.orbit-egg-toast.is-on { animation: eggToast 4.5s ease forwards; }

@keyframes eggToast {
    0% { opacity: 0; transform: translate(-50%, -12px); }
    8%, 85% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 0); }
}

/* ---------- Moving icons ----------
   Every game's icon in the hub (and the daily cards) does its own little loop:
   the snake slithers, the bird flaps, the wheel spins. Off with Disable
   Animations or reduced motion, and the loops are offset so they don't all
   move at once. */
@media (prefers-reduced-motion: no-preference) {
    :root:not(.no-animations) body:not(.no-animations) .games-hub .games-tile-icon svg {
        transform-box: fill-box;
        transform-origin: 50% 50%;
        animation: var(--gm-anim, none) var(--gm-dur, 2.4s) ease-in-out var(--gm-delay, 0s) infinite;
        will-change: transform;
    }

    .games-hub :is([data-game="snake"])                      { --gm-anim: gmSlither; --gm-dur: 1.6s; }
    .games-hub :is([data-game="2048"])                       { --gm-anim: gmMerge;   --gm-dur: 2s; --gm-delay: 0.3s; }
    .games-hub :is([data-game="flappybird"])                 { --gm-anim: gmFlap;    --gm-dur: 1.1s; }
    .games-hub :is([data-game="minesweeper"])                { --gm-anim: gmFuse;    --gm-dur: 2.6s; --gm-delay: 0.5s; }
    .games-hub :is([data-game="wordle"], [data-daily="wordle"]) { --gm-anim: gmFlip; --gm-dur: 3s; }
    .games-hub :is([data-game="sudoku"], [data-daily="sudoku"]) { --gm-anim: gmMerge; --gm-dur: 2.8s; --gm-delay: 0.8s; }
    .games-hub :is([data-game="memory"])                     { --gm-anim: gmFlip;    --gm-dur: 3.2s; --gm-delay: 0.4s; }
    .games-hub :is([data-game="mastermind"])                 { --gm-anim: gmHop;     --gm-dur: 1.8s; --gm-delay: 0.2s; }
    .games-hub :is([data-game="hangman"])                    { --gm-anim: gmSwing;   --gm-dur: 2.2s; }
    .games-hub :is([data-game="scramble"])                   { --gm-anim: gmShuffle; --gm-dur: 2.4s; --gm-delay: 0.6s; }
    .games-hub :is([data-game="tictactoe"])                  { --gm-anim: gmTurn;    --gm-dur: 3s; }
    .games-hub :is([data-game="connect4"])                   { --gm-anim: gmDrop;    --gm-dur: 2s; --gm-delay: 0.3s; }
    .games-hub :is([data-game="battleship"])                 { --gm-anim: gmRock;    --gm-dur: 2.8s; }
    .games-hub :is([data-game="rps"])                        { --gm-anim: gmShake;   --gm-dur: 1.6s; --gm-delay: 0.4s; }
    .games-hub :is([data-game="trivia"])                     { --gm-anim: gmWobble;  --gm-dur: 2.4s; --gm-delay: 0.2s; }
    .games-hub :is([data-game="math"])                       { --gm-anim: gmTurn;    --gm-dur: 2.6s; --gm-delay: 0.7s; }
    .games-hub :is([data-game="typing"])                     { --gm-anim: gmType;    --gm-dur: 0.9s; }
    .games-hub :is([data-game="guess"])                      { --gm-anim: gmMerge;   --gm-dur: 1.6s; --gm-delay: 0.1s; }
    .games-hub :is([data-game="slots"])                      { --gm-anim: gmReel;    --gm-dur: 1.8s; }
    .games-hub :is([data-game="blackjack"])                  { --gm-anim: gmFlip;    --gm-dur: 3.4s; --gm-delay: 1s; }
    .games-hub :is([data-game="wheeloffortune"])             { --gm-anim: gmSpin;    --gm-dur: 4s; }
    .games-hub :is([data-game="magic8"])                     { --gm-anim: gmShake;   --gm-dur: 2.6s; --gm-delay: 0.9s; }
    .games-hub :is([data-game="flip"])                       { --gm-anim: gmCoin;    --gm-dur: 2.2s; }
    .games-hub :is([data-game="cowsay"])                     { --gm-anim: gmHop;     --gm-dur: 2.4s; --gm-delay: 0.5s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .games-hero .ok-hero-icon svg {
        animation: gmMerge 2.6s ease-in-out infinite;
    }
}

@keyframes gmSlither { 0%, 100% { transform: translateX(-2px) rotate(-4deg); } 50% { transform: translateX(2px) rotate(4deg); } }
@keyframes gmMerge   { 0%, 60%, 100% { transform: scale(1); } 75% { transform: scale(1.14); } 88% { transform: scale(0.96); } }
@keyframes gmFlap    { 0%, 100% { transform: translateY(2px) rotate(4deg); } 50% { transform: translateY(-3px) rotate(-6deg); } }
@keyframes gmFuse    { 0%, 70%, 100% { transform: none; } 74% { transform: translateX(-1.5px) rotate(-6deg); } 78% { transform: translateX(1.5px) rotate(6deg); } 82% { transform: translateX(-1px) rotate(-3deg); } 86% { transform: none; } }
@keyframes gmFlip    { 0%, 55%, 100% { transform: perspective(80px) rotateY(0); } 75% { transform: perspective(80px) rotateY(180deg); } 95% { transform: perspective(80px) rotateY(360deg); } }
@keyframes gmHop     { 0%, 50%, 100% { transform: translateY(0); } 65% { transform: translateY(-4px); } 80% { transform: translateY(0) scaleY(0.92); } 88% { transform: none; } }
@keyframes gmSwing   { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes gmShuffle { 0%, 55%, 100% { transform: none; } 65% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } 85% { transform: rotate(-4deg); } }
@keyframes gmTurn    { 0%, 60% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
@keyframes gmDrop    { 0% { transform: translateY(-5px); opacity: 0; } 25% { transform: translateY(1px); opacity: 1; } 35%, 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gmRock    { 0%, 100% { transform: rotate(-5deg) translateY(1px); } 50% { transform: rotate(5deg) translateY(-1px); } }
@keyframes gmShake   { 0%, 60%, 100% { transform: none; } 66% { transform: translateY(-3px) rotate(-8deg); } 72% { transform: translateY(1px); } 78% { transform: translateY(-3px) rotate(-8deg); } 84% { transform: translateY(1px); } 90% { transform: none; } }
@keyframes gmWobble  { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes gmType    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px) scale(0.97); } }
@keyframes gmReel    { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-3px); } 40% { transform: translateY(3px); } 60% { transform: translateY(-2px); } 80% { transform: translateY(1px); } }
@keyframes gmSpin    { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes gmCoin    { 0%, 40% { transform: perspective(80px) rotateY(0) translateY(0); } 70% { transform: perspective(80px) rotateY(360deg) translateY(-4px); } 100% { transform: perspective(80px) rotateY(720deg) translateY(0); } }


/* ===================== H212A: streaks, daily coins, shop ===================== */

.games-hub .gr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: var(--surface-color, #191d25);
    border: 1px solid var(--ok-line, rgba(255, 255, 255, 0.1));
    overflow: hidden;
}
.gr-top { display: flex; align-items: center; gap: 12px; }
.gr-flame {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 18px;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 8%, transparent);
    color: var(--ok-muted, #94a3b8);
}
.gr-card.is-lit .gr-flame { background: #f97316; color: #ffffff; }
.gr-flame b {
    position: absolute;
    right: -6px;
    bottom: -6px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--on-surface, #ffffff);
    color: var(--background, #13161c);
    font: 800 0.78rem var(--font-main);
}
.gr-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-title b { font-size: 1.05rem; font-weight: 800; }
.gr-title span { font-size: 0.82rem; line-height: 1.4; color: var(--ok-muted); }

.gr-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gr-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 2px;
    border-radius: 14px;
    border: 1px solid var(--ok-line, rgba(255, 255, 255, 0.1));
    background: color-mix(in srgb, var(--on-surface, #ffffff) 4%, transparent);
    color: var(--ok-muted, #94a3b8);
    font: inherit;
    min-width: 0;
}
.gr-day-n { font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.gr-day-coin { display: inline-flex; color: #f5b301; }
.gr-day b { font-size: 0.78rem; font-weight: 800; color: var(--on-surface); }
.gr-day.is-done { background: color-mix(in srgb, #22c55e 16%, transparent); border-color: color-mix(in srgb, #22c55e 40%, transparent); }
.gr-day.is-done .gr-day-coin { color: #22c55e; }
.gr-day.is-today {
    cursor: pointer;
    color: #ffffff;
    border-color: transparent;
    background: #f97316;
}
.gr-day.is-today .gr-day-coin, .gr-day.is-today b { color: #ffffff; }
.gr-day.is-claiming { animation: grClaim 0.45s ease both; }

.gr-puzzles { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ok-line, rgba(255, 255, 255, 0.1)); }
.gr-puzzles-text { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ok-muted); }
.gr-puzzles-text b { color: var(--on-surface); }
.gr-dots { display: inline-flex; gap: 6px; }
.gr-dot { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.6rem; font-weight: 700; color: var(--ok-muted); }
.gr-dot i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ok-line-strong, rgba(255, 255, 255, 0.2)); }
.gr-dot.is-on i { border-color: #f97316; background: #f97316; }
.gr-dot.is-now { color: var(--on-surface); }

.games-gotd, .games-shop-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid var(--ok-line, rgba(255, 255, 255, 0.1));
    background: var(--surface-color, #191d25);
    color: var(--on-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.games-gotd { background: var(--surface-color, #191d25); }
.games-gotd .games-tile-icon { margin: 0; flex-shrink: 0; background: var(--tile); }
.games-gotd-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.games-gotd-text b { font-size: 1rem; font-weight: 800; }
.games-gotd-text > span { font-size: 0.8rem; color: var(--ok-muted); line-height: 1.35; }
.games-gotd-kicker { display: inline-flex; align-items: center; gap: 4px; font-size: 0.66rem !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f97316 !important; }
.games-gotd-go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--on-surface); color: var(--background); }
.games-shop-art { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 15px; color: #ffffff; background: #ec4899; }
.games-shop-count { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ok-line-strong); font-size: 0.75rem; font-weight: 800; color: var(--ok-muted); }

.games-tile { position: relative; }
.games-tile.is-hot { border-color: color-mix(in srgb, #f97316 55%, transparent); }
.games-hot {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f97316;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
}
.games-count { text-align: center; margin-top: 8px; }

/* Coins earned: a pill that floats up under the coin counter. */
.games-coinpop {
    position: absolute;
    top: 64px;
    right: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f5b301;
    color: #1f1300;
    font-size: 0.82rem;
    pointer-events: none;
    animation: coinPop 1.8s ease forwards;
}
.games-coinpop span { font-weight: 600; opacity: 0.8; }

/* Shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 8px;
    border-radius: 20px;
    border: 1px solid var(--ok-line, rgba(255, 255, 255, 0.1));
    background: var(--surface-color, #191d25);
    color: var(--on-surface);
    font: inherit;
    cursor: pointer;
}
.shop-item.is-on { border-color: var(--on-surface); box-shadow: 0 0 0 1px var(--on-surface) inset; }
.shop-item.is-locked { opacity: 0.55; }
.shop-item.is-shake { animation: gmShakeX 0.35s ease; }
.shop-swatch { width: 58px; height: 58px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.shop-swatch--bird, .shop-swatch--paddle { border-radius: 50%; }
.shop-swatch--cards { width: 44px; border-radius: 8px; border: 3px solid #ffffff; }
.shop-name { font-size: 0.85rem; font-weight: 700; }
.shop-price { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 800; color: #f5b301; }
.shop-item.is-owned .shop-price { color: var(--ok-muted); }
.shop-item.is-on .shop-price { color: #22c55e; }
.games-shop-hero { background: linear-gradient(135deg, #f59e0b, #ec4899 55%, #8b5cf6) !important; }

/* Skins from the shop. */
#games-fullscreen[data-cards="galaxy"] :is(.bj-card.is-back, .mm-back) { background: radial-gradient(circle at 30% 30%, #f0abfc 0 2px, transparent 3px), radial-gradient(circle at 70% 65%, #ffffff 0 1.5px, transparent 2.5px), linear-gradient(135deg, #312e81, #7c3aed) !important; }
#games-fullscreen[data-cards="carbon"] :is(.bj-card.is-back, .mm-back) { background: repeating-linear-gradient(45deg, #111827 0 4px, #374151 4px 8px) !important; }
#games-fullscreen[data-cards="royal"] :is(.bj-card.is-back, .mm-back) { background: radial-gradient(circle, #fde68a 0 3px, transparent 4px) 0 0 / 12px 12px, linear-gradient(135deg, #7f1d1d, #b91c1c) !important; }
#games-fullscreen[data-tiles="pastel"] .tw-tile { filter: saturate(0.55) brightness(1.18) hue-rotate(-20deg); }
#games-fullscreen[data-tiles="ocean"] .tw-tile { filter: hue-rotate(170deg) saturate(1.1); }
#games-fullscreen[data-tiles="neon"] .tw-tile { filter: hue-rotate(250deg) saturate(1.7); }
#games-fullscreen[data-slots="gold"] .sl-machine { background: linear-gradient(160deg, #713f12, #facc15 50%, #a16207); }
#games-fullscreen[data-slots="emerald"] .sl-machine { background: linear-gradient(160deg, #064e3b, #10b981); }
#games-fullscreen[data-slots="midnight"] .sl-machine { background: linear-gradient(160deg, #020617, #1e3a8a 60%, #0f172a); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35) inset; }

@keyframes coinPop { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes grClaim { 0% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-4deg); } 100% { transform: scale(0.95); opacity: 0.7; } }
@keyframes gmShakeX { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (prefers-reduced-motion: no-preference) {
    :root:not(.no-animations) body:not(.no-animations) .gr-card.is-lit .gr-flame svg { animation: grFlicker 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
}
@keyframes grPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes grFlicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.08, 0.94) rotate(-3deg); } 60% { transform: scale(0.96, 1.06) rotate(3deg); } }
html.no-animations .games-coinpop, body.no-animations .games-coinpop { animation-duration: 1.8s; }

/* ---------- Simon ---------- */
.si-board {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: min(100%, 320px);
    aspect-ratio: 1;
    margin: 6px auto 0;
    padding: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 7%, transparent);
}
.si-pad {
    border: none;
    background: color-mix(in srgb, var(--c) 45%, #0b0d12);
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    touch-action: manipulation;
}
.si-pad:nth-child(1) { border-radius: 100% 12px 12px 12px; }
.si-pad:nth-child(2) { border-radius: 12px 100% 12px 12px; }
.si-pad:nth-child(3) { border-radius: 12px 12px 12px 100%; }
.si-pad:nth-child(4) { border-radius: 12px 12px 100% 12px; }
.si-pad.is-on { background: var(--c); transform: scale(0.97); }
.si-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-color, #191d25);
    border: 6px solid var(--background, #13161c);
    color: var(--on-surface);
    cursor: pointer;
}

/* ---------- Whack-a-Mole ---------- */
.wm-field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(100%, 360px); margin: 6px auto 0; }
.wm-hole {
    position: relative;
    aspect-ratio: 1;
    border: none;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, #65a30d 34%, var(--surface-color, #191d25)), color-mix(in srgb, #3f6212 30%, var(--surface-color, #191d25)));
    cursor: pointer;
    touch-action: manipulation;
}
/* The hole: a dark oval, with the mole rising out of its back half. */
.wm-hole::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 14%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #0b0703, #2a1a0c 70%, #4a3018); }
.wm-pit { position: absolute; left: 18%; right: 18%; bottom: 27%; height: 62%; overflow: hidden; }
.wm-mole {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 78%;
    height: 82%;
    border-radius: 48% 48% 14% 14%;
    background: linear-gradient(180deg, #a06a35, #7a4c22);
    transform: translate(-50%, 105%);
    transition: transform 0.14s ease-out;
}
.wm-mole i { position: absolute; left: 50%; top: 30%; width: 50%; height: 16%; transform: translateX(-50%); background: radial-gradient(circle at 18% 50%, #111 0 22%, transparent 26%), radial-gradient(circle at 82% 50%, #111 0 22%, transparent 26%); }
.wm-mole::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24%; height: 13%; transform: translateX(-50%); border-radius: 50%; background: #f9a8d4; }
.wm-hole.is-up .wm-mole { transform: translate(-50%, 0); }
.wm-hole[data-kind="gold"] .wm-mole { background: linear-gradient(160deg, #fde047, #ca8a04); }
.wm-hole[data-kind="bomb"] .wm-mole { width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4b5563, #0b0d12); }
.wm-hole[data-kind="bomb"] .wm-mole::before { content: ''; position: absolute; left: 60%; top: -14%; width: 8%; height: 24%; border-radius: 2px; background: #f97316; transform: rotate(25deg); }
.wm-hole[data-kind="bomb"] .wm-mole i, .wm-hole[data-kind="bomb"] .wm-mole::after { display: none; }
.wm-hole.is-hit .wm-mole { transform: translate(-50%, 45%) scaleY(0.75); }

/* ---------- Higher or Lower ---------- */
.hl-table { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 150px; margin-top: 8px; }
.hl-card { width: 92px !important; height: 128px !important; font-size: 1.3em; }
.hl-arrow { display: inline-flex; color: var(--ok-muted); }

/* ---------- Blocks ---------- */
.bl-pad .games-btn { min-width: 58px; justify-content: center; }

/* ---------- Animated hub icons (app/commands/games-more.js) ----------
   Each icon moves in parts. Same rules as the rest of the motion: off with
   Disable Animations and with reduced motion. */
.games-tile-icon { position: relative; overflow: hidden; }
.games-tile-icon .ga { overflow: visible; }
.ga * { transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
    /* The art moves its own parts, so the old whole-icon loop is off for it. */
    :root:not(.no-animations) body:not(.no-animations) .games-hub .games-tile-icon svg.ga { animation: none; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga {
        --d: var(--gm-dur, 2.4s);
    }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-snake .ga-body { stroke-dasharray: 4 3; animation: gaDash 0.9s linear infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-snake .ga-head { animation: gaBob 0.9s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-snake .ga-apple { animation: gaPulse 1.2s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-tiles :is(.ga-t1, .ga-t2, .ga-t3, .ga-t4) { animation: gaPop 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-tiles .ga-t2 { animation-delay: 0.3s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-tiles .ga-t3 { animation-delay: 0.6s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-tiles .ga-t4 { animation-delay: 0.9s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-bird .ga-flyer { animation: gaFly 1.2s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-bird .ga-wing { transform-origin: 100% 100%; animation: gaWing 0.3s ease-in-out infinite alternate; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-bird .ga-pipe { animation: gaSlideL 1.6s linear infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-mine .ga-spark { animation: gaSpark 0.45s steps(2) infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-mine .ga-bomb { animation: gaJitter 2.6s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub :is(.ga-flip, .ga-memory) :is(.ga-c1, .ga-c2, .ga-c3, .ga-m1, .ga-m2) { animation: gaFlipY 3s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub :is(.ga-flip .ga-c2, .ga-memory .ga-m2) { animation-delay: 0.25s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-flip .ga-c3 { animation-delay: 0.5s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-sudoku :is(.ga-n1, .ga-n2, .ga-n3) { animation: gaAppear 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-sudoku .ga-n2 { animation-delay: 0.4s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-sudoku .ga-n3 { animation-delay: 0.8s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-pegs :is(.ga-p1, .ga-p2, .ga-p3, .ga-p4) { animation: gaHop 1.6s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-pegs .ga-p2 { animation-delay: 0.12s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-pegs .ga-p3 { animation-delay: 0.24s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-pegs .ga-p4 { animation-delay: 0.36s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-hang .ga-man { transform-origin: 50% 0; animation: gaSwing 2s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-scramble .ga-s1 { animation: gaSwapR 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-scramble .ga-s3 { animation: gaSwapL 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-scramble .ga-s2 { animation: gaHop 2.4s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-ttt :is(.ga-x, .ga-o, .ga-x2) { stroke-dasharray: 14; animation: gaDraw 3s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-ttt .ga-o { animation-delay: 0.5s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-ttt .ga-x2 { animation-delay: 1s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-c4 .ga-disc { animation: gaDropIn 1.8s cubic-bezier(.5, 0, .7, 1.4) infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-ship .ga-boat { animation: gaRock 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-ship .ga-wave { animation: gaWave 1.6s linear infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-rps .ga-fist { transform-origin: 50% 100%; animation: gaPump 1.2s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-trivia .ga-q { animation: gaWobble 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-trivia .ga-star { animation: gaTwinkle 1.4s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-math :is(.ga-plus, .ga-minus, .ga-times, .ga-eq) { animation: gaBlink 2s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-math .ga-minus { animation-delay: 0.5s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-math .ga-times { animation-delay: 1s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-math .ga-eq { animation-delay: 1.5s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-math .ga-plus { animation: gaSpinQ 2s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-typing :is(.ga-k1, .ga-k2, .ga-k3, .ga-k4) { animation: gaKey 1.2s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-typing .ga-k2 { animation-delay: 0.15s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-typing .ga-k3 { animation-delay: 0.3s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-typing .ga-k4 { animation-delay: 0.45s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub :is(.ga-guess, .ga-hilo) .ga-up { animation: gaNudgeUp 1.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub :is(.ga-guess, .ga-hilo) .ga-down { animation: gaNudgeDown 1.4s ease-in-out infinite 0.7s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-hilo .ga-hcard { animation: gaFlipY 3s ease-in-out infinite 0.4s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-slots :is(.ga-r1, .ga-r2, .ga-r3) { animation: gaReel 0.5s linear infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-slots .ga-r2 { animation-duration: 0.4s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-slots .ga-r3 { animation-duration: 0.6s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-bj .ga-card1 { transform-origin: 50% 100%; animation: gaFanL 2.8s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-bj .ga-card2 { transform-origin: 50% 100%; animation: gaFanR 2.8s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-wheel .ga-spin { animation: gaSpinWheel 3.2s cubic-bezier(.3, .1, .2, 1) infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-wheel .ga-tick { transform-origin: 50% 0; animation: gaTick 0.2s ease-in-out infinite alternate; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-eight .ga-ball { animation: gaShake 2.6s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-eight .ga-window { animation: gaGlow 2.6s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-coin .ga-coinflip { animation: gaCoin 2s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-cow .ga-cowhead { animation: gaBob 1.6s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-cow .ga-moo { transform-origin: 0 100%; animation: gaBubble 2.4s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-breakout .ga-ball { animation: gaBounce 1.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-breakout .ga-paddle { animation: gaPaddle 1.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-breakout .ga-brick { animation: gaBreak 2.8s ease-in-out infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-blocks .ga-fall { animation: gaFall 2s steps(5) infinite; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-simon :is(.ga-q1, .ga-q2, .ga-q3, .ga-q4) { animation: gaLight 2.4s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-simon .ga-q2 { animation-delay: 0.6s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-simon .ga-q3 { animation-delay: 1.2s; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-simon .ga-q4 { animation-delay: 1.8s; }

    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-whack .ga-mole { animation: gaPeek 1.8s ease-in-out infinite; }
    :root:not(.no-animations) body:not(.no-animations) .games-hub .ga-whack .ga-hammer { transform-origin: 100% 0; animation: gaHammer 1.8s ease-in-out infinite; }
}

@keyframes gaShine { 0%, 70% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@keyframes gaDash { to { stroke-dashoffset: -7; } }
@keyframes gaBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes gaPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.6; } }
@keyframes gaPop { 0%, 55%, 100% { transform: scale(1); } 65% { transform: scale(1.25); } 75% { transform: scale(0.9); } 85% { transform: scale(1); } }
@keyframes gaFly { 0%, 100% { transform: translateY(1.5px) rotate(4deg); } 50% { transform: translateY(-2px) rotate(-8deg); } }
@keyframes gaWing { from { transform: rotate(18deg); } to { transform: rotate(-22deg); } }
@keyframes gaSlideL { from { transform: translateX(2px); } to { transform: translateX(-24px); } }
@keyframes gaSpark { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0.2; transform: scale(0.6); } }
@keyframes gaJitter { 0%, 80%, 100% { transform: none; } 84% { transform: translateX(-1px) rotate(-5deg); } 88% { transform: translateX(1px) rotate(5deg); } 92% { transform: none; } }
@keyframes gaFlipY { 0%, 45%, 100% { transform: rotateY(0); } 60% { transform: rotateY(90deg); } 75% { transform: rotateY(0); } }
@keyframes gaAppear { 0%, 20% { opacity: 0; transform: scale(0.2); } 35%, 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } }
@keyframes gaHop { 0%, 40%, 100% { transform: translateY(0); } 55% { transform: translateY(-3.5px); } 70% { transform: translateY(0) scaleY(0.85); } 80% { transform: none; } }
@keyframes gaSwing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes gaSwapR { 0%, 35%, 100% { transform: none; } 50%, 85% { transform: translateX(14px); } }
@keyframes gaSwapL { 0%, 35%, 100% { transform: none; } 50%, 85% { transform: translateX(-14px); } }
@keyframes gaDraw { 0% { stroke-dashoffset: 14; opacity: 1; } 30%, 80% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gaDropIn { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 45%, 85% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes gaRock { 0%, 100% { transform: rotate(-6deg) translateY(0.5px); } 50% { transform: rotate(6deg) translateY(-0.5px); } }
@keyframes gaWave { from { transform: translateX(0); } to { transform: translateX(-6px); } }
@keyframes gaPump { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-14deg) translateY(-1px); } 50% { transform: rotate(4deg); } }
@keyframes gaWobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes gaTwinkle { 0%, 100% { transform: scale(0.4) rotate(0); opacity: 0.4; } 50% { transform: scale(1.3) rotate(90deg); opacity: 1; } }
@keyframes gaBlink { 0%, 100% { opacity: 0.35; } 20%, 40% { opacity: 1; } }
@keyframes gaSpinQ { 0%, 40% { transform: rotate(0); opacity: 1; } 60%, 100% { transform: rotate(90deg); opacity: 1; } }
@keyframes gaKey { 0%, 60%, 100% { transform: translateY(0); opacity: 0.55; } 20% { transform: translateY(1px) scale(0.85); opacity: 1; } }
@keyframes gaNudgeUp { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-2px); opacity: 1; } }
@keyframes gaNudgeDown { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(2px); opacity: 1; } }
@keyframes gaReel { from { transform: translateY(0); } to { transform: translateY(8px); } }
@keyframes gaFanL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes gaFanR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
@keyframes gaSpinWheel { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes gaTick { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes gaShake { 0%, 60%, 100% { transform: none; } 66% { transform: translate(-1.5px, -1px) rotate(-10deg); } 72% { transform: translate(1.5px, 0) rotate(8deg); } 78% { transform: translate(-1px, -1px) rotate(-6deg); } 84% { transform: none; } }
@keyframes gaGlow { 0%, 70%, 100% { fill-opacity: 0.25; } 85% { fill-opacity: 0.85; } }
@keyframes gaCoin { 0%, 30% { transform: scaleX(1) translateY(0); } 45% { transform: scaleX(0.1) translateY(-3px); } 60% { transform: scaleX(1) translateY(-4px); } 75% { transform: scaleX(0.1) translateY(-2px); } 90%, 100% { transform: scaleX(1) translateY(0); } }
@keyframes gaBubble { 0%, 30% { transform: scale(0); opacity: 0; } 45%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0; } }
@keyframes gaBounce { 0%, 100% { transform: translate(-4px, 4px); } 50% { transform: translate(4px, -5px); } }
@keyframes gaPaddle { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes gaBreak { 0%, 40% { opacity: 1; transform: none; } 50% { opacity: 0; transform: scale(1.4); } 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes gaFall { from { transform: translateY(-6px); } to { transform: translateY(4px); } }
@keyframes gaLight { 0%, 30%, 100% { fill: transparent; } 8%, 20% { fill: currentColor; } }
@keyframes gaPeek { 0%, 100% { transform: translateY(6px); } 30%, 60% { transform: translateY(0); } 70% { transform: translateY(3px) scaleY(0.8); } }
@keyframes gaHammer { 0%, 40%, 100% { transform: rotate(0); } 55% { transform: rotate(-35deg); } 65% { transform: rotate(10deg); } }

html.theme-amoled .wm-hole { background: #111; }

/* Room to breathe: the hub's cards and sections never touch. */
.games-hub { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.games-hub > .ok-section { margin: 12px 4px -4px !important; }
.games-hub > .games-grid { margin-bottom: 0; gap: 12px; }
.games-hub .gr-card { gap: 16px; padding: 18px; }
.games-hub .gr-days { gap: 8px; }
.games-hub .gr-day { padding: 10px 2px; }
.games-hub :is(.games-gotd, .games-shop-card) { padding: 16px; gap: 14px; }
.games-daily { display: flex; flex-direction: column; gap: 12px; }
.games-shop .shop-grid { gap: 12px; }
.games-stage { gap: 18px; }
.games-stage .games-actions { gap: 12px; margin-top: 4px; }
.games-stage .games-stats { gap: 10px; }

/* ===================== Skins (the Shop) ===================== */

/* Whack-a-Mole critters: an emoji pops up instead of the mole. */
#games-fullscreen:is([data-whack="bunny"], [data-whack="cat"], [data-whack="ghost"], [data-whack="alien"]) .wm-hole:not([data-kind="bomb"]) .wm-mole { background: none; display: flex; align-items: flex-end; justify-content: center; }
#games-fullscreen:is([data-whack="bunny"], [data-whack="cat"], [data-whack="ghost"], [data-whack="alien"]) .wm-hole:not([data-kind="bomb"]) .wm-mole :is(i) { display: none; }
#games-fullscreen:is([data-whack="bunny"], [data-whack="cat"], [data-whack="ghost"], [data-whack="alien"]) .wm-hole:not([data-kind="bomb"]) .wm-mole::after { position: static; transform: none; width: auto; height: auto; background: none; border-radius: 0; font-size: clamp(2.2rem, 11vw, 3.4rem); line-height: 1; }
#games-fullscreen[data-whack="bunny"] .wm-hole:not([data-kind="bomb"]) .wm-mole::after { content: '🐰'; }
#games-fullscreen[data-whack="cat"] .wm-hole:not([data-kind="bomb"]) .wm-mole::after { content: '🐱'; }
#games-fullscreen[data-whack="ghost"] .wm-hole:not([data-kind="bomb"]) .wm-mole::after { content: '👻'; }
#games-fullscreen[data-whack="alien"] .wm-hole:not([data-kind="bomb"]) .wm-mole::after { content: '👽'; }
#games-fullscreen[data-whack]:not([data-whack="classic"]) .wm-hole[data-kind="gold"] .wm-mole::after { filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1); }

/* Connect 4 discs. */
#games-fullscreen[data-c4="ocean"] .c4-disc.is-you { background: #22d3ee; }
#games-fullscreen[data-c4="ocean"] .c4-disc.is-cpu { background: #2563eb; }
#games-fullscreen[data-c4="candy"] .c4-disc.is-you { background: #f9a8d4; }
#games-fullscreen[data-c4="candy"] .c4-disc.is-cpu { background: #a855f7; }
#games-fullscreen[data-c4="faces"] .c4-disc { display: flex; align-items: center; justify-content: center; font-style: normal; }
#games-fullscreen[data-c4="faces"] .c4-disc.is-you::after { content: '😀'; font-size: 1.4em; }
#games-fullscreen[data-c4="faces"] .c4-disc.is-cpu::after { content: '😈'; font-size: 1.4em; }

/* The Paws card back. */
#games-fullscreen[data-cards="paws"] :is(.bj-card.is-back, .mm-back), .shop-art--cards[data-cards="paws"] .bj-card.is-back { background: radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.85) 0 4px, transparent 5px) 0 0 / 16px 16px, linear-gradient(135deg, #fb923c, #ea580c) !important; }
.shop-art--cards[data-cards="galaxy"] .bj-card.is-back { background: radial-gradient(circle at 30% 30%, #f0abfc 0 2px, transparent 3px), radial-gradient(circle at 70% 65%, #ffffff 0 1.5px, transparent 2.5px), linear-gradient(135deg, #312e81, #7c3aed) !important; }
.shop-art--cards[data-cards="carbon"] .bj-card.is-back { background: repeating-linear-gradient(45deg, #111827 0 4px, #374151 4px 8px) !important; }
.shop-art--cards[data-cards="royal"] .bj-card.is-back { background: radial-gradient(circle, #fde68a 0 3px, transparent 4px) 0 0 / 12px 12px, linear-gradient(135deg, #7f1d1d, #b91c1c) !important; }
.shop-art--tiles[data-tiles="pastel"] .tw-tile { filter: saturate(0.55) brightness(1.18) hue-rotate(-20deg); }
.shop-art--tiles[data-tiles="ocean"] .tw-tile { filter: hue-rotate(170deg) saturate(1.1); }
.shop-art--tiles[data-tiles="neon"] .tw-tile { filter: hue-rotate(250deg) saturate(1.7); }
.shop-art--slots[data-slots="space"], #games-fullscreen[data-slots="space"] .sl-machine { background: linear-gradient(160deg, #020617, #1e3a8a 60%, #0f172a); }
.shop-art--slots[data-slots="food"], #games-fullscreen[data-slots="food"] .sl-machine { background: linear-gradient(160deg, #9a3412, #f97316); }
.shop-art--slots[data-slots="zoo"], #games-fullscreen[data-slots="zoo"] .sl-machine { background: linear-gradient(160deg, #065f46, #10b981); }
.tw-tile.is-emoji { font-size: 1.9em !important; }
.tt-emoji { font-size: clamp(2.2rem, 12vw, 3.4rem); line-height: 1; }

/* The Shop page */
.games-shop { gap: 12px !important; }
.shop-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); font: 700 0.86rem var(--font-main); cursor: pointer; }
.shop-tab small { font-size: 0.7rem; font-weight: 700; color: var(--ok-muted); }
.shop-tab.is-on { background: var(--on-surface); color: var(--background); border-color: transparent; }
.shop-tab.is-on small { color: color-mix(in srgb, var(--background) 65%, transparent); }
.shop-intro { margin: 0 4px; font-size: 0.82rem; line-height: 1.45; color: var(--ok-muted); }
.games-shop .shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .games-shop .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.games-shop .shop-item { display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 22px; overflow: hidden; cursor: default; align-items: stretch; opacity: 1; }
.games-shop .shop-item.is-on { box-shadow: none; border-color: var(--on-surface); }
.shop-stage { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1.25; background: color-mix(in srgb, var(--on-surface, #ffffff) 5%, transparent); border-bottom: 1px solid var(--ok-line); }
.shop-art { width: 72%; height: 80%; }
svg.shop-art text { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.shop-art--tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 60%; height: auto; aspect-ratio: 1; }
.shop-art--tiles .tw-tile { position: static; width: auto; height: auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; font-size: 1rem; animation: none !important; }
.shop-art--slots { display: flex; gap: 6px; padding: 10px; border-radius: 18px; width: auto; height: auto; background: linear-gradient(160deg, #86198f, #d946ef); }
.shop-art--slots span { display: flex; align-items: center; justify-content: center; width: 38px; height: 46px; border-radius: 10px; background: #ffffff; font-size: 1.5rem; }
.shop-art--cards { position: relative; display: flex; align-items: center; justify-content: center; width: auto; height: auto; }
.shop-art--cards .bj-card { width: 50px !important; height: 70px !important; animation: none !important; }
.shop-art--cards .bj-card:first-child { transform: rotate(-10deg) translateX(10px); }
.shop-art--cards .bj-card:last-child { transform: rotate(8deg) translateX(-10px); }
.shop-tier { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--surface-color, #191d25); color: var(--ok-muted); border: 1px solid var(--ok-line); }
.shop-tier.is-common { color: #22c55e; }
.shop-tier.is-rare { color: #3b82f6; }
.shop-tier.is-epic { color: #a855f7; }
.shop-tier.is-legend { color: #f59e0b; }
.shop-foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.shop-foot .shop-name { font-size: 0.92rem; font-weight: 800; }
.shop-buy { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; border-radius: 999px; border: none; background: var(--on-surface); color: var(--background); font: 800 0.84rem var(--font-main); cursor: pointer; }
.shop-buy.is-owned { background: transparent; color: var(--on-surface); border: 1px solid var(--ok-line-strong); }
.shop-buy.is-on { background: transparent; color: #22c55e; border: 1px solid color-mix(in srgb, #22c55e 50%, transparent); cursor: default; }
.shop-buy.is-short { background: transparent; color: var(--ok-muted); border: 1px solid var(--ok-line-strong); }
.shop-buy.is-shake { animation: gmShakeX 0.35s ease; }

/* Blocks: board and Next side by side, big buttons under them. */
.bl-main { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.bl-wrap { flex: 0 0 auto; margin: 0 !important; }
.bl-side { display: flex; flex-direction: column; gap: 10px; width: 84px; }
.bl-panel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 16px; border: 1px solid var(--ok-line); background: var(--ok-card, var(--surface-color)); }
.bl-panel span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok-muted); }
.bl-panel b { font-size: 1.05rem; }
.bl-panel canvas { width: 64px; height: 64px; }
.bl-pad { display: grid; grid-template-columns: repeat(4, 1fr) 1.3fr; gap: 8px; }
.bl-key { display: flex; align-items: center; justify-content: center; height: 62px; border-radius: 18px; border: 1px solid var(--ok-line-strong); background: var(--ok-card, var(--surface-color)); color: var(--on-surface); font: 800 0.95rem var(--font-main); touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.bl-key:active { transform: scale(0.95); background: color-mix(in srgb, var(--on-surface) 12%, transparent); }
.bl-key--drop { background: var(--on-surface); color: var(--background); border-color: transparent; }
.bl-stage { padding-bottom: 12px !important; }

/* Less empty space: boards grow to fill the screen, and the play area sits
   in the middle of what's left instead of everything hugging the top. */
.games-stage { min-height: 100%; }
.games-stage > :is(.games-board-wrap, .si-board, .wm-field, .hl-table, .sl-machine, .bj-table, .rp-arena, .wf-wheel-wrap, .mm-board) { margin-top: auto !important; margin-bottom: auto !important; }
.si-board { width: min(100%, 440px); }
.wm-field { width: min(100%, 480px); gap: 14px; }
.hl-card { width: 116px !important; height: 162px !important; font-size: 1.6em; }
.sl-reel, .sl-strip span { height: 130px; }
.games-skin-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); cursor: pointer; }
#games-head-right { display: flex; align-items: center; }
/* Emoji skins always use the color emoji font (the game fonts drew some as outlines). */
.tt-emoji, .tw-tile.is-emoji, .shop-art--slots span, .sl-strip span,
#games-fullscreen[data-whack] .wm-mole::after, #games-fullscreen[data-c4="faces"] .c4-disc::after {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", system-ui, sans-serif !important;
    color: initial;
}
/* Emoji critters are taller than the mole, so they hide further down. */
#games-fullscreen[data-whack]:not([data-whack="classic"]) .wm-hole:not(.is-up):not(.is-hit) .wm-mole { transform: translate(-50%, 190%); }

/* Bet chips for Slots, Blackjack and Higher or Lower. */
.games-bets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.games-bet { min-width: 54px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); font: 800 0.86rem var(--font-main); font-variant-numeric: tabular-nums; cursor: pointer; }
.games-bet.is-on { background: #f5b301; border-color: transparent; color: #1f1300; }
.games-bet.is-short { opacity: 0.4; }
.games-bet--all { border-color: color-mix(in srgb, #ef4444 50%, transparent); color: #ef4444; }
.games-bet--all.is-on { background: #ef4444; color: #ffffff; }

/* Shop and Stats side by side on the hub. */
.games-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.games-duo .games-shop-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
.games-duo .games-shop-art { width: 40px; height: 40px; border-radius: 13px; }
.games-stats-art { background: #0ea5e9 !important; }

/* Month calendar on the streak card (folded by default). */
.gr-cal-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); font: 700 0.76rem var(--font-main); cursor: pointer; }
.gr-cal-btn[aria-expanded="true"] { background: var(--on-surface); color: var(--background); border-color: transparent; }
.gr-cal { display: flex; flex-direction: column; gap: 10px; }
.gr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.gr-cal-head { font-size: 0.64rem; font-weight: 800; color: var(--ok-muted); padding-bottom: 2px; }
.gr-cal-day { position: relative; display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 10px; font-size: 0.76rem; font-weight: 700; color: var(--on-surface); }
.gr-cal-day.is-blank { visibility: hidden; }
.gr-cal-day.is-future { color: var(--ok-muted); opacity: 0.5; }
.gr-cal-day.is-claimed { background: #f97316; color: #ffffff; }
.gr-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--on-surface); }
.gr-cal-day.is-puzzle::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: #22c55e; }
.gr-cal-day.is-claimed.is-puzzle::after { background: #ffffff; }
.gr-cal-key { display: flex; gap: 14px; justify-content: center; font-size: 0.7rem; color: var(--ok-muted); }
.gr-cal-key span { display: inline-flex; align-items: center; gap: 5px; }
.gr-cal-key i { width: 10px; height: 10px; border-radius: 3px; }
.gr-cal-key i.is-claimed { background: #f97316; }
.gr-cal-key i.is-puzzle { border-radius: 50%; width: 6px; height: 6px; background: #22c55e; }

/* Stats page */
.gs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gs-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; border: 1px solid var(--ok-line); background: var(--ok-card, var(--surface-color)); }
.gs-tile b { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gs-tile span { font-size: 0.78rem; color: var(--ok-muted); }
.gs-list { display: flex; flex-direction: column; border: 1px solid var(--ok-line); border-radius: 20px; overflow: hidden; }
.gs-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: none; background: transparent; color: var(--on-surface); font: inherit; text-align: left; cursor: pointer; }
.gs-row + .gs-row { border-top: 1px solid var(--ok-line); }
.gs-row .games-tile-icon { width: 40px; height: 40px; margin: 0; flex-shrink: 0; border-radius: 13px; }
.gs-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gs-row-text b { font-size: 0.92rem; }
.gs-row-text span { font-size: 0.76rem; color: var(--ok-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row-coins { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 800; color: #f5b301; }
.bl-wrap { position: relative; }
.bl-pop { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 4px 12px; border-radius: 999px; background: var(--on-surface); color: var(--background); font: 800 0.9rem var(--font-main); pointer-events: none; animation: blPop 0.9s ease forwards; }
.bl-wrap.is-shake { animation: gmShakeX 0.3s ease; }
@keyframes blPop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%); } }

/* Stats page (rebuilt) */
.gs-hero { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px; background: var(--ok-card, var(--surface-color)); border: 1px solid var(--ok-line); }
.gs-hero-top { display: flex; flex-direction: column; gap: 2px; }
.gs-hero-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #f5b301; }
.gs-hero-num { font-size: 2.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gs-hero-sub { font-size: 0.78rem; color: var(--ok-muted); }
.gs-today { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; color: var(--ok-muted); padding-top: 10px; border-top: 1px solid var(--ok-line); }
.gs-today b { color: #22c55e; }
.gs-bar { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--on-surface) 10%, transparent); overflow: hidden; }
.gs-bar span { display: block; height: 100%; border-radius: 8px; background: #f5b301; }

.gs-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: var(--ok-card, var(--surface-color)); border: 1px solid var(--ok-line); }
.gs-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.gs-card-head b { font-size: 0.95rem; }
.gs-card-head span { font-size: 0.8rem; color: var(--ok-muted); }
.gs-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 130px; align-items: end; }
.gs-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.gs-col-num { font-size: 0.62rem; font-weight: 700; color: var(--ok-muted); min-height: 0.8em; }
.gs-col-bar { width: 100%; max-width: 30px; border-radius: 8px 8px 4px 4px; background: color-mix(in srgb, #f5b301 45%, transparent); }
.gs-col.is-today .gs-col-bar { background: #f5b301; }
.gs-col-day { font-size: 0.7rem; font-weight: 800; color: var(--ok-muted); }
.gs-col.is-today .gs-col-day { color: var(--on-surface); }

.games-stats-page .gs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .games-stats-page .gs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.games-stats-page .gs-tile { gap: 2px; padding: 14px; }
.games-stats-page .gs-tile span { font-size: 0.74rem; font-weight: 700; color: var(--ok-muted); }
.games-stats-page .gs-tile b { font-size: 1.35rem; }
.games-stats-page .gs-tile small { font-size: 0.72rem; color: var(--ok-muted); }

.gs-hls { gap: 0; padding: 4px 16px; }
.gs-hl { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.gs-hl + .gs-hl { border-top: 1px solid var(--ok-line); }
.gs-hl-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; color: #ffffff; }
.gs-hl-text { display: flex; flex-direction: column; min-width: 0; }
.gs-hl-text span { font-size: 0.72rem; color: var(--ok-muted); }
.gs-hl-text b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gs-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.gs-row-right b { font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.gs-row-right small { font-size: 0.68rem; color: var(--ok-muted); }
.gs-row-right .gs-row-coins { display: inline-flex; align-items: center; gap: 3px; color: #f5b301; font-weight: 800; }
.gs-row.is-new { opacity: 0.55; }

/* Icons off screen don't animate (see watchIcons in app/commands/games.js). */
.games-hub .games-tile-icon:not(.is-onscreen) .ga * { animation-play-state: paused !important; }
/* Each icon repaints on its own, not the page around it. */
.games-hub .games-tile-icon { contain: layout paint style; }