:root {
  --casing-light: #e6d5a8;
  --casing: #cdba88;
  --casing-shadow: #8a7848;
  --casing-deep: #5b4a22;
  --led-color: #ffaa00;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Kill the blue flash mobile browsers paint on tap. */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html, body {
  /* dvh: shrinks/grows with the mobile address bar so the bezel is never
     cut off by the browser's bottom nav. Fallback to vh on older browsers. */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  font-family: 'VT323', 'Share Tech Mono', monospace;
  /* Lock horizontal scroll. Vertical stays open so native pull-to-refresh
     fires when the terminal is at its top and the user keeps pulling down.
     The terminal's own touchmove handler claims the gesture (via
     preventDefault) any time it actually wants to scroll the output, so
     pull-to-refresh only triggers when the terminal can't go any higher. */
  overflow-x: hidden;
  overscroll-behavior-x: contain;
  background: #050403;
  color: #ffb000;
}

/* Hidden text input. Must be (a) positioned within the viewport and (b)
   not display:none / visibility:hidden — otherwise iOS won't bring up the
   virtual keyboard on .focus(). Pinned near the centre of the viewport
   with opacity 0 and a 16px font (anything smaller triggers iOS auto-zoom). */
#real-input {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  border: 0;
  outline: none;
  background: transparent;
  caret-color: transparent;
  font-size: 16px;
  z-index: 1;
}

/* ---------------- BEZEL ---------------- */

.bezel {
  position: relative;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  will-change: transform;
  /* Bottom adds env(safe-area-inset-bottom) so the buttons aren't hidden
     behind iOS's home indicator / mobile browser nav bar. */
  padding:
    clamp(20px, 3vmin, 40px)
    clamp(24px, 4vmin, 56px)
    calc(clamp(70px, 9vmin, 110px) + env(safe-area-inset-bottom, 0px))
    clamp(24px, 4vmin, 56px);
  background:
    radial-gradient(ellipse 75% 60% at 50% 38%,
      rgba(255, 235, 180, 0.18) 0%,
      transparent 55%),
    radial-gradient(ellipse 65% 60% at 0%   0%,   transparent 45%, rgba(90, 70, 35, 0.22) 100%),
    radial-gradient(ellipse 65% 60% at 100% 0%,   transparent 45%, rgba(90, 70, 35, 0.22) 100%),
    radial-gradient(ellipse 65% 60% at 0%   100%, transparent 45%, rgba(74, 56, 24, 0.28) 100%),
    radial-gradient(ellipse 65% 60% at 100% 100%, transparent 45%, rgba(74, 56, 24, 0.28) 100%),
    radial-gradient(ellipse at 22% 14%, rgba(255, 245, 200, 0.55) 0%, transparent 55%),
    linear-gradient(178deg,
      var(--casing-light) 0%,
      var(--casing) 18%,
      var(--casing) 60%,
      var(--casing-shadow) 95%,
      var(--casing-deep) 100%);
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 8px 14px rgba(255, 255, 255, 0.35),
    inset 0 -16px 26px rgba(0, 0, 0, 0.45),
    inset 12px 0 18px rgba(0, 0, 0, 0.10),
    inset -12px 0 18px rgba(0, 0, 0, 0.18);
  isolation: isolate;
}

.bezel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.008) 0 1px, transparent 1px 6px);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}

.bezel::after {
  content: '';
  position: absolute;
  top: clamp(10px, 1.6vmin, 22px);
  left: 22%;
  right: 22%;
  height: clamp(3px, 0.5vmin, 5px);
  background: repeating-linear-gradient(90deg,
    rgba(0, 0, 0, 0.55) 0 2px, transparent 2px 6px);
  pointer-events: none;
  border-radius: 1px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3));
}

/* ---------------- SCREEN HOUSING ---------------- */

.screen-housing {
  flex: 1;
  position: relative;
  z-index: 1;
  background: #070605;
  border-radius: clamp(28px, 4.5vmin, 56px) / clamp(22px, 3.6vmin, 44px);
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1.5px rgba(0, 0, 0, 0.6),
    inset 0 2px 2px rgba(255, 255, 255, 0.08),
    /* outer drop-shadow — sells the screen as recessed into the bezel */
    0 4px 10px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

#source-canvas {
  /* Hidden — sampled by WebGL */
  position: absolute;
  left: -99999px;
  top: 0;
}

#output-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Allow the browser to pan vertically. Our JS calls preventDefault on
     touchmove whenever the terminal still has output to scroll, so the
     browser only ever sees the gesture when we're already pinned at the
     top — that's when native pull-to-refresh kicks in. */
  touch-action: pan-y;
  transform-origin: center center;
}

/* CRT-style power-off animation: image collapses to a flash of horizontal
   scanline, then to a dot, then black. Mimics an old tube turning off. */
@keyframes crt-off {
  0%   { transform: scale(1, 1);        filter: brightness(1)    contrast(1); }
  35%  { transform: scale(1.04, 0.005); filter: brightness(2.6)  contrast(1.4); }
  60%  { transform: scale(0.4, 0.005);  filter: brightness(2.6); opacity: 1; }
  100% { transform: scale(0, 0);        filter: brightness(2.6); opacity: 0; }
}
/* Reverse: dot grows to scanline, then expands back to full image. */
@keyframes crt-on {
  0%   { transform: scale(0, 0);        filter: brightness(2.6); opacity: 0; }
  20%  { transform: scale(0.4, 0.005);  filter: brightness(2.6); opacity: 1; }
  55%  { transform: scale(1.04, 0.005); filter: brightness(2.6)  contrast(1.4); }
  100% { transform: scale(1, 1);        filter: brightness(1)    contrast(1); }
}
body.powering-off #output-canvas {
  animation: crt-off 0.65s cubic-bezier(0.55, 0, 0.85, 0) forwards;
}
body.powering-on #output-canvas {
  animation: crt-on 0.65s cubic-bezier(0.2, 0.7, 0.45, 1) forwards;
}
/* Stay collapsed/black after off animation completes, until the user
   presses power again. */
body.powered-off #output-canvas {
  transform: scale(0, 0);
  opacity: 0;
}
body.powering-off .screen-housing,
body.powered-off .screen-housing { background: #000; }
/* Power LED: on when monitor is on, off when monitor is off. */
body.powered-off .led,
body.powering-off .led {
  background: #2a1a00;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
  animation: none;
}

/* ---------------- BEZEL BOTTOM ---------------- */

.bezel-bottom {
  position: absolute;
  left: 0; right: 0;
  /* Sit above the iOS safe area so the buttons aren't covered by the home
     indicator / browser bottom bar. */
  bottom: env(safe-area-inset-bottom, 0px);
  height: clamp(64px, 8.5vmin, 100px);
  display: flex;
  align-items: center;
  padding:
    0
    clamp(20px, 3vmin, 40px)
    clamp(12px, 2vmin, 24px)
    clamp(20px, 3vmin, 40px);
  gap: 1.5em;
}

.bezel-side { display: flex; align-items: center; gap: 0.6em; }

.bezel-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(9px, 1.1vmin, 13px);
  color: rgba(50, 42, 28, 0.85);
  letter-spacing: 0.18em;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.led {
  width: clamp(9px, 1.1vmin, 13px);
  height: clamp(9px, 1.1vmin, 13px);
  border-radius: 50%;
  background: var(--led-color);
  box-shadow:
    0 0 4px var(--led-color),
    0 0 12px var(--led-color),
    0 0 22px rgba(255, 170, 0, 0.55),
    inset 0 0 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
  animation: led-pulse 5s ease-in-out infinite;
}
@keyframes led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}

.brand {
  margin: 0 auto;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(11px, 1.5vmin, 18px);
  color: rgba(40, 32, 18, 0.95);
  letter-spacing: 0.28em;
  font-weight: bold;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(0, 0, 0, 0.10);
  padding: 0.3em 0.9em;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 1px 1px rgba(0, 0, 0, 0.15);
}

.buttons {
  display: flex;
  gap: clamp(5px, 0.8vmin, 9px);
}

.btn {
  width: clamp(28px, 3.4vmin, 42px);
  height: clamp(20px, 2.2vmin, 28px);
  border-radius: 3px;
  border: 0;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-weight: bold;
  font-size: clamp(11px, 1.4vmin, 16px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.12) 100%),
    var(--casing-shadow);
  color: rgba(20, 15, 5, 0.85);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 1px 0 rgba(0, 0, 0, 0.30);
}
.btn:hover { filter: brightness(1.10); }
.btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); transform: translateY(1px); }
.btn.power-btn { color: #cc4400; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn .power-icon {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- SNAKE KEYPAD (mobile only) ---------------- */

#snake-keypad {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: clamp(170px, 23vh, 230px);
  padding: clamp(14px, 2.5vmin, 22px) clamp(20px, 5vmin, 36px) calc(clamp(14px, 2.5vmin, 22px) + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(ellipse 70% 80% at 50% 18%, rgba(255, 250, 220, 0.30), transparent 60%),
    linear-gradient(180deg, var(--casing-light) 0%, var(--casing) 55%, var(--casing-shadow) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.18),
    0 -8px 14px rgba(0, 0, 0, 0.40);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 50;
  transform: translateY(110%);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Keypad is its own touch surface; no scroll, no zoom. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Only ever show the keypad when explicitly on AND on a small viewport. */
@media (max-width: 900px) {
  #snake-keypad { display: flex; }
}
body.snake-active #snake-keypad { transform: translateY(0); }

#snake-keypad .dpad {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  grid-template-areas:
    ".    up   ."
    "left down right";
  gap: clamp(4px, 1vmin, 8px);
}
#snake-keypad .key-up    { grid-area: up; }
#snake-keypad .key-left  { grid-area: left; }
#snake-keypad .key-down  { grid-area: down; }
#snake-keypad .key-right { grid-area: right; }

#snake-keypad .actions {
  display: flex;
  align-items: center;
  margin-left: clamp(8px, 2vmin, 16px);
}

#snake-keypad .key {
  width:  clamp(48px, 12vmin, 64px);
  height: clamp(48px, 12vmin, 64px);
  border-radius: 8px;
  border: 0;
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: clamp(20px, 5.2vmin, 30px);
  color: rgba(40, 30, 12, 0.92);
  text-shadow:
    0 1px 0 rgba(255, 248, 220, 0.55),
    0 -1px 0 rgba(0, 0, 0, 0.10);
  /* Cream-coloured beige keycap, like an Apple ][ / IBM Model M-era key. */
  background:
    linear-gradient(180deg, #f0e2bb 0%, #d8c693 55%, #b9a370 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.65),
    inset 0 -2px 4px rgba(80, 60, 24, 0.30),
    0 4px 0 rgba(74, 56, 24, 0.55),
    0 6px 8px rgba(0, 0, 0, 0.30);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 60ms ease-out, box-shadow 60ms ease-out;
  touch-action: none;
}
#snake-keypad .key:active,
#snake-keypad .key.is-pressed {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 4px rgba(80, 60, 24, 0.45),
    inset 0 1px 0 rgba(255, 255, 240, 0.30),
    0 1px 0 rgba(74, 56, 24, 0.55);
}

#snake-keypad .key-quit {
  width:  clamp(58px, 14vmin, 76px);
  height: clamp(58px, 14vmin, 76px);
  font-size: clamp(22px, 5.5vmin, 30px);
  color: #6a1d10;
  text-shadow:
    0 1px 0 rgba(255, 240, 220, 0.45),
    0 0 4px rgba(220, 60, 40, 0.20);
  /* A red-tinted action key against the beige set. */
  background:
    linear-gradient(180deg, #e8c4a0 0%, #c89070 55%, #9c6448 100%);
}