/* ── Snake 2026 "Aurora" ───────────────────────────────────────────────────────
   Selectors are prefixed with .snake3 so they win over the .prose rules around the game. */

.snake3 {
    --s3-bg: #090c1c;
    --s3-panel: rgba(16, 20, 44, .72);
    --s3-line: rgba(165, 180, 252, .18);
    --s3-ink: #eef1ff;
    --s3-mute: #9aa3c9;
    --s3-mint: #5eead4;
    --s3-violet: #a78bfa;
    --s3-pink: #f472b6;
    --s3-gold: #ffd166;
    --s3-grad: linear-gradient(100deg, var(--s3-mint), var(--s3-violet) 55%, var(--s3-pink));
    position: relative;
    margin-block: 2.5rem;
    color: var(--s3-ink);
    font-family: var(--sans, "Inter", system-ui, sans-serif);
    line-height: 1.4;
    isolation: isolate;
}
.prose > .snake3 { max-width: 60rem; }
.snake3 [hidden] { display: none !important; }
.snake3 svg { width: 1em; height: 1em; flex: none; }
.snake3-sprites { position: absolute; width: 0 !important; height: 0 !important; overflow: hidden; }
.snake3 .snake3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* Aurora frame: a 2px rim of a rotating conic gradient, with a soft glow behind it.
   Performance: the glow is blurred once and never changes. Only the rim's gradient angle animates,
   which is a cheap gradient repaint — never animate anything under a blur filter.
   (A huge rotated layer turned with `transform` was tried; Chrome left raster tiles of it unpainted.) */
@property --s3-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.snake3::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 22px;
    background: linear-gradient(120deg, var(--s3-mint), var(--s3-violet) 45%, var(--s3-pink) 75%, var(--s3-gold));
    filter: blur(28px);
    opacity: .4;
    transition: opacity .6s;
}
.snake3.is-playing::before { opacity: .65; }

.snake3-frame {
    position: relative;
    padding: 2px;
    border-radius: 22px;
    background: conic-gradient(from var(--s3-angle), var(--s3-mint), var(--s3-violet), var(--s3-pink), var(--s3-gold), var(--s3-mint));
    animation: s3-spin 12s linear infinite;
}
@keyframes s3-spin { to { --s3-angle: 360deg; } }

.snake3-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 20px;
    background: var(--s3-bg);
}

/* ── HUD ─────────────────────────────────────────────────────────────────── */
.snake3-hud {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 2vw, 1.1rem);
    padding: .7rem clamp(.75rem, 2.4vw, 1.25rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
    border-bottom: 1px solid var(--s3-line);
}
.snake3 .snake3-label {
    display: block;
    margin: 0;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--s3-mute);
}
.snake3-stat { display: grid; gap: .1rem; min-width: 3.5rem; }
.snake3-value {
    font-family: var(--mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--s3-ink);
}
.snake3-stat--score .snake3-value {
    font-size: 1.55rem;
    line-height: 1.1;
    background: var(--s3-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.snake3-stat--best { margin-left: auto; text-align: right; }
.snake3-value.is-bump, .snake3-combo-mult.is-bump { animation: s3-bump .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes s3-bump { 40% { transform: scale(1.25); } }
.snake3-value { display: inline-block; transform-origin: left center; }

.snake3-combo {
    --p: 0;
    display: grid;
    gap: .3rem;
    justify-items: start;
    min-width: 4.5rem;
}
.snake3-combo-mult {
    display: inline-block;
    font-family: var(--mono, ui-monospace, monospace);
    font-weight: 500;
    font-size: .95rem;
    color: var(--s3-mute);
    transition: color .2s, text-shadow .2s;
}
.snake3-combo[data-level="2"] .snake3-combo-mult { color: var(--s3-mint); }
.snake3-combo[data-level="3"] .snake3-combo-mult { color: #7dd3fc; text-shadow: 0 0 10px rgba(125, 211, 252, .6); }
.snake3-combo[data-level="4"] .snake3-combo-mult { color: var(--s3-violet); text-shadow: 0 0 12px rgba(167, 139, 250, .7); }
.snake3-combo[data-level="5"] .snake3-combo-mult { color: var(--s3-pink); text-shadow: 0 0 14px rgba(244, 114, 182, .8); }
.snake3-combo-bar {
    display: block;
    width: 4.5rem;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.snake3-combo-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--s3-grad);
    transform: scaleX(var(--p));
    transform-origin: left;
}

.snake3-effects { display: flex; gap: .4rem; }
.snake3-effect {
    --p: 1;
    --c: var(--s3-violet);
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--c);
    font-size: 1rem;
    background:
        radial-gradient(closest-side, var(--s3-bg) 78%, transparent 80% 100%),
        conic-gradient(var(--c) calc(var(--p) * 360deg), rgba(255, 255, 255, .08) 0);
    animation: s3-pop .35s cubic-bezier(.3, 1.6, .5, 1);
}
.snake3-effect--ghost { --c: #c4b5fd; }
.snake3-effect--slow { --c: #7dd3fc; }
.snake3-effect--magnet { --c: #f472b6; }
@keyframes s3-pop { from { transform: scale(0); } }

.snake3-online {
    font-size: .72rem;
    color: var(--s3-mute);
    padding: .25rem .6rem;
    border-radius: 99px;
    border: 1px solid var(--s3-line);
    white-space: nowrap;
}
.snake3-online::before {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 8px #34d399;
    vertical-align: .05em;
}

.snake3-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--s3-line);
    background: rgba(255, 255, 255, .04);
    color: var(--s3-ink);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
}
.snake3-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); border-color: rgba(165, 180, 252, .4); }
.snake3-icon-btn:active:not(:disabled) { transform: scale(.92); }
.snake3-icon-btn:disabled { opacity: .35; cursor: default; }
.snake3-mute .snake3-icon-on, .snake3-mute[aria-pressed="true"] .snake3-icon-off { display: none; }
.snake3-mute[aria-pressed="true"] .snake3-icon-on { display: block; }
.snake3-pause .snake3-icon-play, .snake3-pause.is-paused .snake3-icon-pause { display: none; }
.snake3-pause.is-paused .snake3-icon-play { display: block; }
.snake3-fullscreen .snake3-icon-collapse, .snake3-fullscreen[aria-pressed="true"] .snake3-icon-expand { display: none; }
.snake3-fullscreen[aria-pressed="true"] .snake3-icon-collapse { display: block; }

/* ── multiplayer invite (shown in single player when others play multiplayer) ── */
.snake3-invite {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem clamp(.75rem, 2.4vw, 1.25rem);
    font-size: .82rem;
    color: var(--s3-ink);
    background: linear-gradient(90deg, rgba(52, 211, 153, .16), rgba(96, 165, 250, .1));
    border-bottom: 1px solid var(--s3-line);
    animation: s3-slide .4s ease both;
}
.snake3-invite svg { font-size: 1.15rem; color: #34d399; }
.snake3-invite span { flex: 1; min-width: 0; }
.snake3-invite-btn, .snake3-join-pause {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 99px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.snake3-invite-btn {
    flex: none;
    padding: .35rem .95rem;
    border: 0;
    font-size: .8rem;
    background: #34d399;
    color: #04150e;
    box-shadow: 0 0 16px rgba(52, 211, 153, .45);
}
.snake3-invite-btn:hover { filter: brightness(1.1); }
.snake3-join-pause {
    padding: .5rem 1rem;
    border: 1px solid rgba(52, 211, 153, .5);
    background: rgba(52, 211, 153, .08);
    color: #6ee7b7;
    font-size: .82rem;
}
.snake3-join-pause:hover { background: rgba(52, 211, 153, .16); }
@keyframes s3-slide { from { opacity: 0; transform: translateY(-6px); } }

/* ── stage & overlays ────────────────────────────────────────────────────── */
.snake3-stage {
    position: relative;
    display: grid;
    place-items: center;
    container-type: inline-size;
    outline: none;
    background: var(--s3-bg);
}
/* Keyboard focus ring, drawn above the canvas: an inset box-shadow on the stage itself is painted
   under the canvas, so it only showed where the canvas doesn't cover the stage (top and bottom).
   Hidden while playing — the game moves focus to the stage when a round starts. */
.snake3-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.snake3-stage:focus-visible::after { box-shadow: inset 0 0 0 2px rgba(94, 234, 212, .6); }
.snake3.is-playing .snake3-stage::after { box-shadow: none; }
.snake3-canvas { display: block; max-width: 100%; }
.snake3.is-playing .snake3-stage { touch-action: none; }

.snake3-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(.5rem, 2.5cqi, 1.5rem);
    overflow: auto;
    background: radial-gradient(ellipse at center, rgba(9, 12, 28, .35), rgba(9, 12, 28, .7));
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.snake3-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.snake3-overlay.is-open .snake3-card { animation: s3-rise .5s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes s3-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.snake3-card {
    width: min(100%, 40rem);
    padding: clamp(1rem, 3.5cqi, 1.75rem);
    border-radius: 18px;
    border: 1px solid var(--s3-line);
    background: var(--s3-panel);
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: left;
}
.snake3-card--start, .snake3-card--over { display: grid; gap: clamp(.9rem, 3cqi, 1.75rem); }
@container (min-width: 560px) {
    .snake3-card--start { grid-template-columns: 1.1fr 1fr; align-items: center; }
    .snake3-card--over { grid-template-columns: 1fr 1.15fr; align-items: start; }
}
.snake3-card--pause { width: auto; min-width: 16rem; display: grid; justify-items: center; gap: 1rem; text-align: center; }

.snake3 .snake3-kicker {
    margin: 0 0 .35rem;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--s3-pink);
}
.snake3 .snake3-title {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    font-family: var(--sans, "Inter", system-ui, sans-serif);
    font-size: clamp(2.3rem, 10cqi, 3.6rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.035em;
    background: linear-gradient(100deg, var(--s3-mint), var(--s3-violet), var(--s3-pink), var(--s3-mint));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: s3-shimmer 8s ease-in-out infinite alternate;
}
.snake3 .snake3-title--small { font-size: 2rem; }
@keyframes s3-shimmer { to { background-position: 100% 0; } }
.snake3-badge {
    margin-top: .3em;
    padding: .2em .5em;
    border-radius: 99px;
    border: 1px solid rgba(255, 209, 102, .5);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--s3-gold);
    background: rgba(255, 209, 102, .08);
    -webkit-text-fill-color: var(--s3-gold);
}
.snake3 .snake3-record { margin: .6rem 0 0; font-size: .82rem; color: var(--s3-mute); }

.snake3 .snake3-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .9rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .76rem;
    color: var(--s3-mute);
}
.snake3 .snake3-legend li { display: flex; align-items: center; gap: .4rem; margin: 0; white-space: nowrap; }
.snake3 .snake3-legend svg { font-size: 1.15rem; }
.snake3-legend--ghost svg { color: #c4b5fd; }
.snake3-legend--slow svg { color: #7dd3fc; }
.snake3-legend--magnet svg { color: #f472b6; }
.snake3-legend--feast svg { color: #4ade80; }
.snake3-legend--balls svg { color: #22d3ee; }
.snake3-legend--rain svg { color: #60a5fa; }
.snake3-legend--dynamite svg { color: #f87171; }
.snake3-legend--scissors svg { color: #e2e8f0; }

.snake3-setup { display: grid; gap: .8rem; }
.snake3-field { display: grid; gap: .35rem; }
.snake3-field input {
    width: 100%;
    padding: .65rem .85rem;
    border-radius: 10px;
    border: 1px solid var(--s3-line);
    background: rgba(255, 255, 255, .05);
    color: var(--s3-ink);
    font: inherit;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.snake3-field input::placeholder { color: rgba(154, 163, 201, .6); }
.snake3-field input:focus { border-color: var(--s3-mint); box-shadow: 0 0 0 3px rgba(94, 234, 212, .18); }

.snake3-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.snake3-mode {
    display: grid;
    align-content: center;
    gap: .1rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    border: 1px solid var(--s3-line);
    background: rgba(255, 255, 255, .03);
    color: var(--s3-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.snake3-mode strong { font-size: .88rem; font-weight: 600; }
.snake3-mode span { font-size: .72rem; color: var(--s3-mute); }
.snake3-mode:hover { background: rgba(255, 255, 255, .07); }
/* Mode buttons on the start card: icon centred above the title (and, for multiplayer, the live player count) */
.snake3-mode--icon {
    justify-items: center;
    gap: .25rem;
    text-align: center;
}
.snake3-mode--icon svg { font-size: 1.5rem; }
.snake3-mode--single svg { color: #5eead4; }
.snake3-mode--multi svg { color: #34d399; }
.snake3-mode--multi[aria-pressed="true"] {
    border-color: rgba(52, 211, 153, .6);
    background: linear-gradient(135deg, rgba(52, 211, 153, .16), rgba(96, 165, 250, .1));
}

.snake3-modes--compact { justify-self: stretch; margin-top: .25rem; grid-template-columns: repeat(2, 1fr); }
.snake3-modes--compact .snake3-mode { padding: .4rem .6rem; text-align: center; }
.snake3-modes--compact .snake3-mode strong { font-size: .8rem; }
.snake3-modes--compact .snake3-mode--icon svg { font-size: 1.2rem; }
.snake3-mode[aria-pressed="true"] {
    border-color: rgba(94, 234, 212, .6);
    background: linear-gradient(135deg, rgba(94, 234, 212, .14), rgba(167, 139, 250, .1));
}

.snake3-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.6rem;
    border: 0;
    border-radius: 99px;
    background: linear-gradient(100deg, var(--s3-mint), var(--s3-violet));
    color: #0a0d1f;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 28px -8px rgba(94, 234, 212, .7), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, filter .2s;
}
.snake3-play:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 34px -8px rgba(167, 139, 250, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.snake3-play:active { transform: translateY(0) scale(.98); }
.snake3-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.snake3 .snake3-hint { margin: 0; font-size: .72rem; color: var(--s3-mute); line-height: 1.9; }
.snake3 kbd {
    display: inline-block;
    min-width: 1.5em;
    padding: .05em .4em;
    border-radius: 5px;
    border: 1px solid var(--s3-line);
    border-bottom-width: 2px;
    background: rgba(255, 255, 255, .05);
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .68rem;
    text-align: center;
    color: var(--s3-ink);
}

/* Game over */
.snake3-result { display: grid; justify-items: start; gap: .5rem; }
.snake3-final {
    font-family: var(--mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2.6rem, 11cqi, 4rem);
    font-weight: 500;
    line-height: 1;
    background: var(--s3-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.snake3 .snake3-newbest {
    margin: 0;
    padding: .3rem .7rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    color: #1a1300;
    background: linear-gradient(100deg, #ffd166, #fff1b8, #ffd166);
    background-size: 200% 100%;
    animation: s3-shimmer 1.6s linear infinite alternate;
    box-shadow: 0 0 22px rgba(255, 209, 102, .45);
}
.snake3 .snake3-stats { display: flex; gap: 1.25rem; margin: .4rem 0 .6rem; }
.snake3 .snake3-stats div { display: grid; gap: .1rem; }
.snake3 .snake3-stats dt {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--s3-mute);
}
.snake3 .snake3-stats dd { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 1rem; }

.snake3 .snake3-board { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.snake3 .snake3-row {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .28rem .6rem;
    border-radius: 8px;
    font-size: .84rem;
    background: rgba(255, 255, 255, .025);
}
.snake3 .snake3-row.is-message { display: block; color: var(--s3-mute); text-align: center; padding: .8rem; }
.snake3-row-rank { font-family: var(--mono, ui-monospace, monospace); font-size: .75rem; color: var(--s3-mute); }
.snake3-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snake3-row-name em { font-style: normal; font-size: .7rem; color: var(--s3-mint); }
.snake3-row-score { font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.snake3-row.is-top1 .snake3-row-rank { color: #ffd166; }
.snake3-row.is-top2 .snake3-row-rank { color: #d6dcf0; }
.snake3-row.is-top3 .snake3-row-rank { color: #f0a96b; }
.snake3 .snake3-row.is-you {
    background: linear-gradient(100deg, rgba(94, 234, 212, .2), rgba(167, 139, 250, .14));
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .45);
}
.snake3 .snake3-rank { margin: .6rem 0 0; font-size: .8rem; color: var(--s3-mint); }
.snake3 .snake3-rank.is-warning { color: #fdba74; }

/* Resume countdown */
.snake3-overlay--count { background: rgba(9, 12, 28, .25); backdrop-filter: none; pointer-events: none; }
.snake3-count {
    display: block;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: clamp(4rem, 22cqi, 8rem);
    font-weight: 500;
    line-height: 1;
    background: var(--s3-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 24px rgba(167, 139, 250, .55));
}
.snake3-count.is-bump { animation: s3-count .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes s3-count { from { transform: scale(1.6); opacity: 0; } }

/* ── touch D-pad ─────────────────────────────────────────────────────────── */
.snake3-dpad { display: none; }
@media (pointer: coarse) {
    .snake3-dpad {
        display: grid;
        grid-template: ". up ." 3.4rem "left down right" 3.4rem / 3.4rem 3.4rem 3.4rem;
        gap: .4rem;
        justify-content: center;
        padding: .9rem 0 1.1rem;
        border-top: 1px solid var(--s3-line);
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
    }
    .snake3-dpad-btn {
        display: grid;
        place-items: center;
        border-radius: 14px;
        border: 1px solid var(--s3-line);
        background: rgba(255, 255, 255, .05);
        color: var(--s3-ink);
        font-size: 1.3rem;
        -webkit-tap-highlight-color: transparent;
    }
    .snake3-dpad-btn:active { background: rgba(94, 234, 212, .2); border-color: rgba(94, 234, 212, .6); }
    .snake3-dpad-btn--up { grid-area: up; }
    .snake3-dpad-btn--left { grid-area: left; }
    .snake3-dpad-btn--left svg { transform: rotate(-90deg); }
    .snake3-dpad-btn--down { grid-area: down; }
    .snake3-dpad-btn--down svg { transform: rotate(180deg); }
    .snake3-dpad-btn--right { grid-area: right; }
    .snake3-dpad-btn--right svg { transform: rotate(90deg); }
    .snake3 .snake3-hint { display: none; }
    /* No backdrop blur on phones: it is recomputed whenever the canvas underneath changes. */
    .snake3-overlay, .snake3-card { backdrop-filter: none; }
    .snake3-card { background: rgba(16, 20, 44, .94); }
}

/* ── small screens ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .snake3 { margin-inline: calc(-1 * var(--gutter, 1rem) + .5rem); }
    .snake3-stat--best .snake3-label { display: none; }
    .snake3-online { display: none; }
    .snake3-combo-bar { width: 3rem; }
    .snake3-combo { min-width: 3rem; }
}
@container (max-width: 420px) {
    .snake3 .snake3-legend { display: none; }
}

/* ── fullscreen (native, or the CSS fallback on iPhone) ──────────────────── */
html.snake3-lock, html.snake3-lock body { overflow: hidden; }
.snake3.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    max-width: none;
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: #05060f;
}
.snake3.is-fullscreen::before { display: none; }
.snake3.is-fullscreen .snake3-frame { height: 100%; padding: 0; border-radius: 0; background: none; animation: none; }
.snake3.is-fullscreen .snake3-inner { display: flex; flex-direction: column; height: 100%; border-radius: 0; }
.snake3.is-fullscreen .snake3-stage { flex: 1; min-height: 0; overflow: hidden; }
.snake3.is-fullscreen .snake3-online { display: inline-block; }

/* Phone sideways: D-pad beside the board instead of under it */
@media (pointer: coarse) and (orientation: landscape) {
    .snake3.is-fullscreen .snake3-inner {
        display: grid;
        grid-template: "hud hud" auto "invite invite" auto "stage dpad" minmax(0, 1fr) / minmax(0, 1fr) auto;
    }
    .snake3.is-fullscreen .snake3-hud { grid-area: hud; }
    .snake3.is-fullscreen .snake3-invite { grid-area: invite; }
    .snake3.is-fullscreen .snake3-stage { grid-area: stage; }
    .snake3.is-fullscreen .snake3-dpad {
        grid-area: dpad;
        align-content: center;
        padding: 0 1rem;
        border-top: 0;
        border-left: 1px solid var(--s3-line);
    }
}

@media (prefers-reduced-motion: reduce) {
    .snake3-frame, .snake3 .snake3-title, .snake3 .snake3-newbest { animation: none; }
    .snake3-overlay.is-open .snake3-card { animation: none; }
}

.snake3 .snake3-noscript { padding: 2rem; text-align: center; color: var(--s3-mute); }