/* "BRICK" — matte-black candy-bar feature phone with an amber LCD.
   Top-down inside the front face:
     speaker slit
     small chassis stamp ("WN-3310" model number)
     LCD bezel + amber screen with a black status band
     navigation row: soft key | nav pad | soft key
     call row: green CALL | red END
     keypad: 4×3 dark rubber keys

   No SVG silhouettes, no clip-paths. border-radius, gradients, shadows. */

/* ─── DESK / WALL ───────────────────────────────────────────────────────
   Late-night apartment desk. The player is locked in their room, the only
   light is the desk lamp directly above the phone, the world outside leaks
   in as a cold faint glow from the left. Layers (back to front):
     1. Wood base color
     2. Wood grain — vertical streaks of warmer/cooler brown
     3. Cool window light from upper-left (the world the player can't reach)
     4. Warm desk-lamp spotlight from directly above the phone
     5. Heavy corner vignette (the rest of the apartment is dark)
     6. Coffee ring stain — the one sign someone's been sitting here
     7. Film grain overlay (.wall::before) */
.wall {
    min-height: 100%;
    width: 100%;
    background-color: #0a0604;
    background-image:
        /* 6. Coffee ring — offset from the phone, lower-right area */
        radial-gradient(ellipse 96px 26px at 78% 76%,
            transparent 0,
            transparent 28px,
            rgba(110, 70, 28, 0.20) 30px,
            rgba(70, 40, 12, 0.22) 32px,
            transparent 38px),
        /* 5. Heavy corner vignette */
        radial-gradient(ellipse at center,
            transparent 25%,
            rgba(0, 0, 0, 0.55) 95%),
        /* 4. Warm desk-lamp spotlight from directly above */
        radial-gradient(ellipse 540px 720px at 50% 20%,
            rgba(255, 180, 100, 0.14),
            rgba(255, 180, 100, 0.05) 40%,
            transparent 65%),
        /* 3. Cool window light from upper-left — the outside world */
        radial-gradient(ellipse 600px 900px at -8% 25%,
            rgba(70, 110, 165, 0.07),
            transparent 55%),
        /* 2. Wood grain — irregular vertical streaks */
        repeating-linear-gradient(
            91deg,
            transparent 0 60px,
            rgba(110, 70, 35, 0.04) 60px 64px,
            transparent 64px 130px,
            rgba(110, 70, 35, 0.06) 130px 132px,
            transparent 132px 220px,
            rgba(60, 35, 18, 0.05) 220px 224px),
        /* 1. Wood color — uneven warm browns */
        linear-gradient(96deg,
            #19100a 0%,
            #21150d 30%,
            #1a110a 55%,
            #20130c 80%,
            #150c07 100%);
    display: grid;
    place-items: center;
    padding: var(--s-5) var(--s-3);
    overflow: auto;
    position: relative;
}

/* 7. Film grain + faint diagonal weave — gives the desk surface a subtle
   organic texture. Pseudo-element so it doesn't capture pointer events. */
.wall::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
        repeating-linear-gradient(
            27deg,
            transparent 0 3px,
            rgba(255, 240, 220, 0.012) 3px 4px);
    background-size: 220px 220px, auto;
    opacity: 0.6;
    mix-blend-mode: overlay;
    z-index: 0;
}

/* ─── PHONE WRAPPER ─────────────────────────────────────────────────────
   The phone gets a heavy two-stop drop shadow (close + far) to feel
   physical. The amber LCD glow leaks slightly into the wall via a third
   warm shadow layer. */
.phone {
    width: min(var(--phone-w), calc(100vw - var(--s-5)));
    position: relative;
    z-index: 1;
    /* Heavy contact shadow + amber LCD bleed — the phone catches the
       desk lamp from above and casts onto the wood. */
    filter:
        drop-shadow(0 3px 1px rgba(0, 0, 0, 0.85))
        drop-shadow(0 18px 32px rgba(0, 0, 0, 0.65))
        drop-shadow(0 40px 56px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 100px rgba(232, 149, 64, 0.10));
}

/* ─── OUTER CHASSIS — matte rubberized black ────────────────────────────
   Heavy charcoal plastic with a hint of side curvature. Slight asymmetric
   border-radius (rounder at the bottom) reads as a candy-bar pebble. */
.phone__chassis {
    background:
        /* top sheen — light catches the upper edge */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.10) 0%,
            transparent 8%,
            transparent 92%,
            rgba(0, 0, 0, 0.4) 100%),
        /* lateral cylinder curvature */
        linear-gradient(90deg,
            var(--chassis-dark) 0%,
            var(--chassis) 8%,
            var(--chassis-light) 50%,
            var(--chassis) 92%,
            var(--chassis-dark) 100%);
    border-radius: 30px 30px 38px 38px;
    padding: 6px;
    position: relative;
    /* Chrome chamfer ring + dark inner cradle */
    box-shadow:
        inset 0 1px 0 rgba(160, 162, 170, 0.30),     /* top chamfer */
        inset 0 -1px 0 rgba(0, 0, 0, 0.7),
        inset 1px 0 0 rgba(180, 182, 190, 0.10),
        inset -1px 0 0 rgba(180, 182, 190, 0.10),
        0 0 0 1px rgba(0, 0, 0, 0.7);
}

/* Faint rubberized noise on the chassis — gives the matte plastic real
   surface depth. Pseudo-element doesn't capture pointer events. */
.phone__chassis::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 24px;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0 2px,
            rgba(255, 255, 255, 0.008) 2px 3px),
        repeating-linear-gradient(-45deg,
            transparent 0 2px,
            rgba(0, 0, 0, 0.06) 2px 3px);
    z-index: 0;
}

/* ─── FRONT FACE — slightly glossier than the chassis edge ──────────── */
.phone__front {
    position: relative;
    z-index: 1;
    background:
        /* faint top reflection — single bright streak */
        radial-gradient(ellipse 80% 30% at 50% 0%,
            rgba(255, 168, 80, 0.04),
            transparent 60%),
        linear-gradient(180deg,
            var(--front-light) 0%,
            var(--front) 20%,
            var(--front) 80%,
            var(--front-shadow) 100%);
    border-radius: 24px 24px 32px 32px;
    padding: 14px 12px 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ─── SPEAKER — single thin slit, recessed ──────────────────────────── */
.phone__speaker {
    width: 54px;
    height: 5px;
    margin: 4px auto 10px;
    background:
        linear-gradient(180deg,
            #000 0%,
            #161618 50%,
            #050507 100%);
    border-radius: 2px;
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ─── CHASSIS STAMP — tiny model number above the LCD ────────────────
   Replaces the giant NOKIA wordmark with a confident, understated detail.
   "WN-3310" is OUR model number — the 3310 nod is intentional but discreet. */
.phone__stamp {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.3em;
    color: rgba(180, 182, 190, 0.42);
    text-transform: uppercase;
    padding: 0 0 6px;
    /* Etched look — light below, dark above */
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.8),
        0 1px 0 rgba(255, 255, 255, 0.05);
    user-select: none;
}

/* ─── BEZEL + LCD ───────────────────────────────────────────────────── */
.phone__bezel {
    background: var(--bezel);
    border-radius: 6px;
    padding: 5px;
    margin-bottom: var(--s-3);
    /* Sunken into the chassis, with a subtle chrome lip */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.9),
        inset 0 2px 4px rgba(0, 0, 0, 0.7),
        0 1px 0 rgba(180, 182, 190, 0.18),
        0 -1px 0 rgba(0, 0, 0, 0.5);
    position: relative;
}

/* The amber glow leaking onto the bezel rim — sells the backlight */
.phone__bezel::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(232, 149, 64, 0.08);
}

.phone__lcd {
    height: var(--screen-h);
    overflow: hidden;
    position: relative;
    font-family: var(--font-mono);
    color: var(--lcd-pixel);
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg,
            var(--lcd-bg-dark) 0%,
            var(--lcd-bg) 18%,
            var(--lcd-bg-light) 60%,
            var(--lcd-bg) 100%);
    transition: background var(--t-mid);
    animation: lcd-warmup 800ms ease-out 0s 1;
}

.phone__lcd[data-bright="on"] {
    background: var(--lcd-bg-bright);
}

/* LCD warmup — the screen "boots" amber on first paint, like a real
   backlit STN warming up. Disabled under reduced-motion. */
@keyframes lcd-warmup {
    0% {
        background: #1a0c02;
        filter: brightness(0.3) saturate(0.4);
    }
    25% {
        background: #4a2410;
        filter: brightness(0.6) saturate(0.6);
    }
    65% {
        background: #b06a18;
        filter: brightness(0.92);
    }
    100% {
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phone__lcd { animation: none; }
}

/* Black status band at the top of the LCD — the brand wordmark lives here. */
.phone__statusbar {
    background: var(--lcd-status-bg);
    color: var(--lcd-status-fg);
    text-align: center;
    padding: 4px 8px 5px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    line-height: 1;
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.phone__screen {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    padding: var(--s-2);
    z-index: 1;
}

.phone__lcd-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* ─── NAVIGATION ROW ────────────────────────────────────────────────────
   Two soft keys flanking a square nav pad. All dark rubber to match the
   chassis — they catch a single highlight along the top edge. */
.phone__navrow {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 8px;
    align-items: center;
    margin: 0 var(--s-1) 8px;
}

.softkey {
    height: 22px;
    border-radius: 11px;
    background:
        linear-gradient(180deg,
            var(--key-light) 0%,
            var(--key) 50%,
            var(--key-shadow) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.5);
    transition: filter var(--t-fast), transform var(--t-fast);
    position: relative;
}
.softkey::after {
    /* tiny silver pip near the inner edge — a chrome accent */
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 2px;
    background: rgba(180, 182, 190, 0.45);
    border-radius: 1px;
    transform: translateY(-50%);
    box-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.4),
        0 1px 0 rgba(255, 255, 255, 0.08);
}
.softkey--left::after { right: 8px; }
.softkey--right::after { left: 8px; }
.softkey:active { filter: brightness(0.85); transform: translateY(1px); }

.navpad {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 80% 50% at 50% 25%,
            var(--key-light) 0%,
            var(--key) 50%,
            var(--key-shadow) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -2px 0 rgba(0, 0, 0, 0.55),
        0 2px 3px rgba(0, 0, 0, 0.55);
    position: relative;
    transition: filter var(--t-fast), transform var(--t-fast);
}
.navpad::before {
    /* central select indicator — a small recessed cross */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background:
        /* central cross etched into the rubber */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.18) 49%,
            transparent 49%,
            transparent 51%,
            rgba(255, 255, 255, 0.05) 51%),
        radial-gradient(circle at center,
            rgba(0, 0, 0, 0.18),
            transparent 70%);
    box-shadow:
        inset 0 1px 1px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    transform: translate(-50%, -50%);
}
.navpad:active { filter: brightness(0.85); transform: translateY(1px); }

/* ─── CALL ROW — green CALL + red END ────────────────────────────────
   The two saturated colors on the front face. They sit on the dark rubber
   and visually "pop", anchoring the lower half of the front face. */
.phone__callrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 var(--s-1) 10px;
}

.callbtn {
    height: 28px;
    border-radius: 7px;
    color: var(--key-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -2px 0 rgba(0, 0, 0, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter var(--t-fast), transform var(--t-fast);
    position: relative;
    overflow: hidden;
}
.callbtn--call {
    background:
        linear-gradient(180deg,
            #1a3a1c 0%,
            #122614 100%);
    color: var(--key-call);
}
.callbtn--call::before {
    /* faint inner glow */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(92, 217, 107, 0.10),
        transparent 70%);
    pointer-events: none;
}
.callbtn--end {
    background:
        linear-gradient(180deg,
            #3a1612 0%,
            #260a08 100%);
    color: var(--key-end);
}
.callbtn--end::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 74, 61, 0.10),
        transparent 70%);
    pointer-events: none;
}
.callbtn svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}
.callbtn:active { filter: brightness(0.85); transform: translateY(1px); }

/* ─── KEYPAD ────────────────────────────────────────────────────────────
   4×3 dark rubber keys joined as a single membrane. Cream labels:
   digit on the left, T9 letters on the right. */
.phone__keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 var(--s-1) 2px;
}

.key {
    background:
        linear-gradient(180deg,
            var(--key-light) 0%,
            var(--key) 50%,
            var(--key-shadow) 100%);
    color: var(--key-text);
    border-radius: 7px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -2px 0 rgba(0, 0, 0, 0.5),
        0 1px 1px rgba(0, 0, 0, 0.4);
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    aspect-ratio: 2.4 / 1;
    transition: filter var(--t-fast), transform var(--t-fast);
    user-select: none;
    position: relative;
}
.key::after {
    /* very faint top highlight strip — sells the rubber dome */
    content: "";
    position: absolute;
    top: 1px; left: 8%; right: 8%;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    pointer-events: none;
}
.key:active,
.key.is-pressed { filter: brightness(0.85); transform: translateY(1px); }

.key__digit {
    font-family: var(--font-brand);
    font-size: 20px;
    font-weight: 700;
    color: var(--key-text);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.key__sub {
    font-family: var(--font-brand);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--key-text-dim);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ─── REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .key, .softkey, .navpad, .callbtn, .phone__lcd { transition: none; }
}

/* ─── TOUCH DEVICES: HIDE CHASSIS KEYPAD ───────────────────────────────
   Tap targets on the chassis keypad are too small on phones. On touch-
   primary devices we collapse the keypad and the LCD grows to fill the
   reclaimed space; the dial-able views render an in-LCD numpad (see
   .lcd-keypad in screens.css). Softkeys + call/end stay because they're
   the only path for SUBMIT GUESS / DIAL / HANG UP soft actions. */
@media (hover: none) and (pointer: coarse) {
    .phone__keypad { display: none; }
    :root { --screen-h: min(440px, calc(100vh - 220px)); }
}

/* ─── MOBILE TIGHTENING ─────────────────────────────────────────────── */
@media (max-width: 420px) {
    :root { --screen-h: 300px; }
    .key__digit { font-size: 18px; }
    .navpad { width: 54px; height: 54px; }
}
@media (max-width: 360px) {
    :root { --phone-w: 320px; --screen-h: 240px; }
    .key__digit { font-size: 16px; }
    .key__sub { font-size: 8px; }
    .navpad { width: 48px; height: 48px; }
    .softkey { height: 18px; }
    .callbtn { height: 22px; }
}