/* ═══════════════════════════════════════════
   PLATFORM · SNAKE — the RR HANDSET

   The handset crucible's carve (2026-08-28, owner nod): one seamed
   billet of ink, a 7:4 night-glass window milled through it, the keypad as
   the object's face. Zero radius, 1px steel joinery, the six unit
   tokens and not a seventh hex. The accent appears once on the whole
   device — the REM dot — and nowhere else.

   Tokens live on :root, not the body: the game reads them off the
   documentElement for the glass ink, and hardware keeps its LCD
   material in any light — only the room around it themes.
   ═══════════════════════════════════════════ */

:root {
    --unit-ink: #0B0C0A;
    /* The night glass (SM01 reference): slate-charcoal, bone pixels. */
    --unit-screen: #252A38;
    --unit-pixel: #E6DFCF;
    --unit-bone: #E6DFCF;
    --unit-label: #55584E;
    --unit-steel: #2A2B30;
}
:root[data-theme="light"] {
    --unit-ink: #EDEAE1;
    --unit-bone: #23241F;
    --unit-label: #6E7268;
    --unit-steel: #C8C4B7;
}

.snake-page {
    background: var(--unit-ink);
    color: var(--unit-bone);
    margin: 0;
    min-height: 100svh;
    font-family: var(--font-mono);
}

/* ── The way back — a panel label, top-left ── */
.snake-back {
    position: fixed;
    inset-block-start: var(--space-md);
    margin-block-start: -0.4rem;
    inset-inline-start: var(--space-md);
    z-index: var(--layer-sticky);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--unit-label);
    padding: 0.4rem 0;
}
.snake-back:hover { color: var(--unit-bone); }
.snake-back:focus-visible { outline: 1px solid var(--unit-bone); outline-offset: 3px; }

.snake-main {
    max-inline-size: 460px;
    margin-inline: auto;
    padding: clamp(3.2rem, 9vh, 5.5rem) var(--safe-inline) var(--space-3xl);
}

.snake-head { margin-block-end: var(--space-lg); }
.snake-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--unit-bone);
}
.snake-sub {
    margin: 0.35rem 0 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
}

/* ── The handset ────────────────────────── */
.handset {
    border: 1px solid var(--unit-steel);
    background: var(--unit-ink);
}
.handset * { border-radius: 0; }

.handset-forehead { block-size: clamp(28px, 6vh, 64px); }
.handset-chin { block-size: clamp(24px, 5vh, 48px); }

/* The glass: 7:4 aperture, counterbored — two nested steel hairlines,
   drawn the way a machinist draws depth. The LCD keeps its night slate in
   any theme: device material, not brand ink. */
.handset-glass {
    margin-inline: 6.5%;
    border: 1px solid var(--unit-steel);
    padding: 6px;
}
.snake-board {
    display: block;
    inline-size: 100%;
    aspect-ratio: 7 / 4;
    border: 1px solid var(--unit-steel);
    background: #252A38;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.snake-board:focus-visible { outline: 1px solid var(--unit-bone); outline-offset: 4px; }
.snake-board canvas { display: block; inline-size: 100%; block-size: 100%; }

/* ── The brow: engraving left, stage dots right ── */
.handset-brow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-inline: 6.5%;
    padding-block: clamp(0.7rem, 2vh, 1.1rem);
}
.handset-id {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
}
.handset-dots { display: flex; gap: 1.1rem; }
.handset-dots span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--unit-label);
}
.handset-dots i {
    inline-size: 9px;
    block-size: 9px;
    border: 1px solid var(--unit-steel);
    background: transparent;
}
.handset-dots .lit i { background: var(--unit-bone); border-color: var(--unit-bone); }
/* THE one accent moment on the whole device. */
.handset-dots .lit-rem i { background: #458AD9; border-color: #458AD9; }

/* ── The keypad: ink plates, shared steel seams ── */
.handset-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-block-start: 1px solid var(--unit-steel);
    border-block-end: 1px solid var(--unit-steel);
}
.handset-keypad .kp {
    display: grid;
    place-items: center;
    min-block-size: clamp(52px, 9vh, 64px);
    background: transparent;
    border: 0 solid var(--unit-steel);
    border-inline-end-width: 1px;
    border-block-end-width: 1px;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: default;
}
.handset-keypad .kp:nth-child(3n) { border-inline-end-width: 0; }
.handset-keypad .kp:nth-child(n+10) { border-block-end-width: 0; }
.handset-keypad button.kp { cursor: pointer; }
.handset-keypad .kp svg { inline-size: 34px; block-size: 22px; }
.handset-keypad button.kp svg rect { fill: var(--unit-bone); }
.handset-keypad span.kp svg rect { fill: var(--unit-label); opacity: 0.7; }
/* Pressed: an 80ms bone stroke — peek, not strip. */
.handset-keypad .kp-active { box-shadow: inset 0 0 0 1px var(--unit-bone); }
.handset-keypad button.kp:focus-visible {
    outline: 1px solid var(--unit-bone);
    outline-offset: -3px;
}

/* ── The two panel lines ─────────────────── */
.handset-legend,
.handset-fine {
    margin: 0;
    padding-block-start: clamp(0.6rem, 1.6vh, 0.9rem);
    text-align: center;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--unit-label);
}
.handset-fine { padding-block-start: 0.35rem; }

/* The game's live region: announcements are for ears, not the panel. */
.snake-live {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: 0;
}

/* ── No JS: the unit never powers on ─────── */
.snake-nojs {
    display: none;
    margin-block-start: var(--space-lg);
    font-size: 0.6875rem;
    line-height: 1.9;
    letter-spacing: 0.08em;
    color: var(--unit-label);
}
.no-js .snake-nojs { display: block; }

/* ── Foot ────────────────────────────────── */
.snake-foot { margin-block-start: var(--space-xl); }
.snake-foot .sig {
    margin: 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
}
.snake-foot .fine {
    margin: 0.5rem 0 0;
    font-size: 0.625rem;
    line-height: 1.8;
    letter-spacing: 0.06em;
    color: var(--unit-label);
}

/* The sense chip wears the panel, pinned clear of the keypad's thumb
   territory — it was flowing loose at the document's end. */
.snake-page .sense-toggle {
    position: fixed;
    inset-block-end: var(--space-md);
    inset-inline-end: var(--space-md);
    z-index: var(--layer-sticky);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
    background: var(--unit-ink);
    border: 1px solid var(--unit-steel);
    border-radius: 0;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}
.snake-page .sense-toggle:hover { color: var(--unit-bone); }
.snake-page .sense-toggle:focus-visible { outline: 1px solid var(--unit-bone); outline-offset: 3px; }
.snake-page .sense-toggle[aria-pressed="true"] { color: #458AD9; border-color: #458AD9; }

/* ═══ The held stance (mobile-step ruling, 2026-08-28): the handset
   IS the step-inside — you held it the moment you picked the phone
   up. Below the desk seam the picture-of-a-handset dies: the object
   grows flush to the viewport, the phone's own bezel becomes the
   billet, the keypad takes everything the glass leaves, and nothing
   scrolls. Keypad steering, proudly — thumbs below the glass never
   cover the snake, and a tap commits faster than any swipe. ═══ */
@media (max-width: 1023px) {
    .snake-page { overflow: hidden; }
    html.no-js .snake-page { overflow: auto; }
    .snake-main {
        max-inline-size: none;
        block-size: 100svh;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .snake-head { display: none; }
    .handset {
        flex: 1 1 auto;
        min-block-size: 0;
        border: none;                 /* the phone edge is the edge */
        display: flex;
        flex-direction: column;
    }
    .handset-forehead {
        /* Tall enough that the seam's fixed furniture — the way back,
           the sound chip — sits on the forehead, never on the glass. */
        flex: none;
        block-size: calc(44px + env(safe-area-inset-top, 0px));
    }
    .handset-glass { flex: none; margin-inline: 10px; padding: 4px; }
    .handset-brow { flex: none; margin-inline: 12px; padding-block: 0.55rem; align-items: flex-end; }
    .handset-keypad {
        flex: 1 1 auto;
        min-block-size: 0;
        /* Plates grow with the body but stop at piano-key height;
           past the cap the leftover reads as the chin. */
        grid-template-rows: repeat(4, minmax(0, 108px));
    }
    .handset-keypad .kp { min-block-size: 0; }
    .handset-keypad .kp svg { inline-size: clamp(30px, 9.5vw, 42px); block-size: auto; }
    .handset-legend { flex: none; padding-block-start: 0.5rem; }
    .handset-legend, .handset-fine {
        padding-inline: 12px;
        font-size: clamp(0.5rem, 2.25vw, 0.5625rem);
    }
    .handset-fine {
        flex: none;
        padding-block: 0.3rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    .handset-chin { display: none; }
    .snake-foot { display: none; }
    .snake-nojs { padding-inline: 16px; }
    /* The chip leaves the keypad's thumb territory for the top seam,
       opposite the way back. */
    .snake-page .sense-toggle {
        inset-block-start: var(--space-sm);
        inset-block-end: auto;
        inset-inline-end: var(--space-sm);
        padding: 0.35rem 0.6rem;
    }
}

/* ── The sat-at stance (step-inside crucible, 2026-08-28) ──────────
   On a desk the handset is not held, it is installed: the page dies,
   the viewport becomes the fascia. The glass commands the center at
   the largest 7:4 the room allows; the brow moves to the left flank;
   the keypad flattens into a bench strip beneath; nothing scrolls.
   The mobile object above is untouched — one machine, two stances. */
@media (min-width: 1024px) and (min-height: 560px) {
    .snake-page { overflow: hidden; }
    .snake-main {
        max-inline-size: none;
        block-size: 100svh;
        padding: 0;
        display: grid;
        place-items: center;
    }
    .snake-head {
        position: fixed;
        inset-block-start: var(--space-md);
        inset-inline-end: var(--space-md);
        text-align: end;
        margin: 0;
    }
    .handset {
        border: none;
        background: transparent;
        display: grid;
        grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
        grid-template-rows: auto auto auto auto;
        column-gap: clamp(1.5rem, 4vw, 4rem);
        row-gap: 0.9rem;
        align-items: center;
        justify-items: center;
    }
    .handset-forehead, .handset-chin { display: none; }
    .handset-glass {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }
    .snake-board {
        block-size: min(62svh, 58vw * 4 / 7);
        inline-size: auto;
        aspect-ratio: 7 / 4;
    }
    .handset-brow {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        margin: 0;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-lg);
        padding: 0;
    }
    .handset-keypad {
        grid-column: 2;
        grid-row: 2;
        inline-size: 400px;
        border-inline: 1px solid var(--unit-steel);
    }
    .handset-keypad .kp { min-block-size: 46px; }
    .handset-keypad .kp svg { inline-size: 28px; block-size: 18px; }
    .handset-legend { grid-column: 2; grid-row: 3; padding-block-start: 0; }
    .handset-fine { grid-column: 2; grid-row: 4; padding-block-start: 0; }
    .snake-nojs { display: none; }
    .no-js .snake-nojs { display: block; position: fixed; inset-block-start: 40svh; inset-inline: 20vw; }
    .snake-foot {
        position: fixed;
        inset-block-end: var(--space-md);
        inset-inline-start: var(--space-md);
        margin: 0;
    }
}