/* Gage. phone shell, shared by every page: the browser window IS the phone.
   Dark housing bars top and bottom, status bar, the LCD, softkeys.
   All sizes are whole LCD pixels (--u). Deliberately single-theme (a lit LCD). */

:root { color-scheme: light; }
html, body { height: 100%; }
html { background: var(--lcd-inverse-bg); }
body {
  margin: 0; color: var(--lcd-pixel); font: 400 var(--t1)/var(--lh1-body) var(--font-body);
  /* backlight: a touch brighter in the middle, dimmer at the edges */
  background: radial-gradient(120% 90% at 50% 45%, var(--ink-100) 0%, var(--lcd-screen) 55%, color-mix(in srgb, var(--lcd-screen) 80%, var(--ink-400)) 100%) fixed, var(--lcd-screen);
  -webkit-font-smoothing: none; font-smooth: never;
}
::selection { background: var(--ink-900); color: var(--ink-200); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input, textarea, button, select { font: inherit; color: inherit; }

/* the LCD matrix: a faint gap between every pixel. Drawn over the screen area only
   (home screen, page body, boot screen), never over the navy bars. */
.lcd-grid { display: none; }
.home::after, .screen-wrap::after, #boot .boot-center::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink-100) 16%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink-100) 16%, transparent) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  box-shadow: inset 0 calc(var(--u) * 2) calc(var(--u) * 4) color-mix(in srgb, var(--ink-900) 18%, transparent);
}
.home, .screen-wrap, #boot .boot-center { position: relative; }

.phone { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; }

/* ---------- status bar + softkeys ---------- */
.statusbar, .softkeys {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.statusbar, .softkeys { background: var(--lcd-inverse-bg); color: var(--ink-50); position: relative; z-index: 6; }
.statusbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-top: calc(var(--u) * 5 + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--u) * 5);
}
.signal { justify-self: start; } .battery { justify-self: end; }
.signal svg { display: block; width: calc(var(--u) * 12); height: calc(var(--u) * 5); }
.battery svg { display: block; width: calc(var(--u) * 12); height: calc(var(--u) * 6); }
.status-title { text-align: center; }

.softkeys {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-top: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 5 + env(safe-area-inset-bottom, 0px));
}
.softkeys button, .softkeys a {
  border: 0; background: none; color: var(--ink-50); cursor: pointer; text-decoration: none;
  padding: var(--u) 0;
}
.softkeys > :first-child { justify-self: start; }
.softkeys > :last-child { justify-self: end; }
.softkeys button:hover, .softkeys a:hover { color: var(--ink-300); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: var(--u) solid var(--accent); outline-offset: var(--u);
}

/* ---------- Messenger windows (home pop-up and the Let's chat page) ---------- */
.win { background: var(--ink-100); color: var(--lcd-pixel); box-shadow: 0 0 0 var(--u) var(--lcd-pixel), calc(var(--u) * 3) calc(var(--u) * 3) 0 color-mix(in srgb, var(--ink-900) 25%, transparent); display: flex; flex-direction: column; min-height: 0; }
.win[hidden] { display: none; }
.win-bar { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 4); background: var(--lcd-inverse-bg); color: var(--ink-50); padding: calc(var(--u) * 3) calc(var(--u) * 4); flex: none; }
.win-x { border: 0; background: none; color: var(--ink-50); cursor: pointer; padding: 0 var(--u); font: inherit; text-transform: uppercase; }
.win-x:hover { color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); border: 0; cursor: pointer; text-decoration: none; padding: calc(var(--u) * 3) calc(var(--u) * 6); background: var(--lcd-inverse-bg); color: var(--ink-50); font: 400 var(--t1)/var(--lh1) var(--font-display); text-transform: uppercase; letter-spacing: 1px; }
.btn::before { content: ""; width: calc(var(--u) * 2); height: 10px; background: var(--accent); }
.btn.ghost { background: var(--ink-300); color: var(--lcd-pixel); }
.btn.ghost::before { display: none; }
.dot { width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: var(--accent); display: inline-block; flex: none; }
.dot.off { background: var(--lcd-ghost); }
.shake { animation: shake .5s steps(10); }
@keyframes shake { 10%, 50%, 90% { transform: translate(calc(var(--u) * -3), var(--u)); } 30%, 70% { transform: translate(calc(var(--u) * 3), calc(var(--u) * -1)); } }

/* ---------- Snake (home menu item; still a secret elsewhere: type "snake" or tap the signal bars five times) ---------- */
#snake { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--lcd-screen); }
#snake[hidden] { display: none; }
#snake .statusbar > :last-child { justify-self: end; }
#snake .statusbar b { font-weight: 400; }
#snake .sn-screen { position: relative; flex: 1; min-height: 0; }
#snake canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }
#snake .sn-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); text-align: center; z-index: 2; pointer-events: none; }
#snake .sn-msg[hidden] { display: none; }
#snake .sn-msg b { font: 400 var(--t2)/var(--lh2) var(--font-display); font-weight: 400; }
#snake .sn-msg.live { pointer-events: auto; background: color-mix(in srgb, var(--lcd-screen) 82%, transparent); overflow: auto; padding: calc(var(--u) * 8) var(--gutter); }
#snake .sn-name input {
  width: 3.6ch; padding: calc(var(--u) * 2) calc(var(--u) * 4); border: var(--u) solid var(--lcd-pixel); background: var(--ink-100);
  font: 400 var(--t2)/var(--lh2) var(--font-display); text-align: center; letter-spacing: 4px; text-transform: uppercase; color: var(--lcd-pixel); border-radius: 0;
}
#snake .sn-board { width: min(calc(var(--u) * 120), 100%); text-align: left; }
#snake .sn-board ol { list-style: none; margin: 0; padding: calc(var(--u) * 4) calc(var(--u) * 6); display: flex; flex-direction: column; gap: var(--u); }
#snake .sn-board li { display: grid; grid-template-columns: 4ch 1fr auto; gap: calc(var(--u) * 4); padding: var(--u) calc(var(--u) * 2); font: 400 var(--t1)/var(--lh1) var(--font-display); }
#snake .sn-board li > :last-child { text-align: right; }
#snake .sn-board li.me { background: var(--lcd-inverse-bg); color: var(--lcd-inverse-text); box-shadow: inset var(--u) 0 0 var(--accent); }
#snake .sn-board li.empty { display: block; color: var(--ink-600); }
#snake .sn-hint { color: var(--ink-600); }

/* ---------- CRT: scan lines, a soft vignette, a slow rolling band and a faint flicker ----------
   Drawn over everything (including the opening phone and Snake), never catches clicks. */
html::after, html::before { content: ""; position: fixed; left: 0; right: 0; pointer-events: none; }
html::after {
  top: 0; bottom: 0; z-index: 200;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 1), color-mix(in srgb, var(--ink-950) 11%, transparent) calc(var(--u) * 1) calc(var(--u) * 2)),
    radial-gradient(130% 110% at 50% 50%, transparent 58%, color-mix(in srgb, var(--ink-950) 38%, transparent) 100%);
  animation: crt-flicker 4s steps(1) infinite;
}
html::before {
  top: 0; height: 22vh; z-index: 199;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, white 7%, transparent) 50%, transparent);
  animation: crt-roll 9s linear infinite;
}
@keyframes crt-roll { from { transform: translateY(-22vh); } to { transform: translateY(100vh); } }
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 41% { opacity: .9; } 42% { opacity: 1; } 77% { opacity: .94; } 78% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html::after { animation: none; } html::before { display: none; } }
@media print { html::after, html::before { display: none; } }