: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, or iOS won't bring up the
   virtual keyboard on .focus(). 16px font avoids 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 vertical pan so native pull-to-refresh works when the terminal
     can't scroll further. JS calls preventDefault on touchmove when the
     terminal still has output to scroll. */
  touch-action: pan-y;
  transform-origin: center center;
}

/* CRT power-off: image collapses to a scanline, then a dot, then black. */
@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; }
}
@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;
}
/* ---------------- FAKE WINDOW (rickroll player) ---------------- */

.fake-window {
  position: absolute;
  inset: 6% 5%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #100800;
  border: 2px solid #ffb000;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(255, 176, 0, 0.45),
    inset 0 0 12px rgba(0, 0, 0, 0.8);
  font-family: 'VT323', 'Share Tech Mono', monospace;
  overflow: hidden;
}
.fake-window-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: linear-gradient(180deg, #ffb000 0%, #b07000 100%);
  color: #1a0e00;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 1px 0 rgba(255, 255, 200, 0.3);
  cursor: default;
  user-select: none;
}
.fake-window-title-text {
  flex: 1;
  letter-spacing: 0.02em;
}
.fake-window-close {
  cursor: pointer;
  width: 22px;
  height: 18px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid #1a0e00;
  color: #1a0e00;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fake-window-close:hover { background: rgba(0, 0, 0, 0.35); }
.fake-window-body {
  flex: 1;
  position: relative;
  background: #000;
}
.fake-window-body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Subtle scanlines over the player so the video reads as CRT content. */
.fake-window-body::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.18) 0px,
    rgba(0, 0, 0, 0.18) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Hold collapsed/black after the off animation finishes. */
body.powered-off #output-canvas {
  transform: scale(0, 0);
  opacity: 0;
}
body.powering-off .screen-housing,
body.powered-off .screen-housing { background: #000; }
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: grid;
  grid-template-columns: repeat(2, auto);
  gap: clamp(4px, 1vmin, 8px);
  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);
  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 {
  color: #6a1d10;
  text-shadow:
    0 1px 0 rgba(255, 240, 220, 0.45),
    0 0 4px rgba(220, 60, 40, 0.20);
  background:
    linear-gradient(180deg, #e8c4a0 0%, #c89070 55%, #9c6448 100%);
}