/* ============================================
   THE SWAN STATION — style.css  v8.1
   DHARMA Initiative Computing System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs&family=Oswald:wght@600;700&family=Share+Tech+Mono&family=VT323&display=swap');

:root {
  --green:        #00cc00;
  --green-dim:    #007700;
  --green-bright: #00ff41;
  --green-screen: #001a00;
  --red-alarm:    #cc0000;
  --red-bright:   #ff2200;
  --amber:        #ffaa00;
  --bg:           #000000;
  --panel:        #0d0d0d;
  --panel-border: #1e1e1e;
  --sidebar-bg:   #0a0a0a;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;
  --font-vt:      'VT323', monospace;

  /* ── CASE PALETTE (warm cream-beige — Apple II+ / Swan prop) ── */
  --case-light:   #d4c4a0;
  --case-mid:     #c8b89a;
  --case-base:    #b8a882;
  --case-dark:    #a09070;
  --case-edge:    #6a5a3c;
  --case-bezel:   #2a2010;

  /* ── KEY PALETTE (cool gunmetal — the only gray surface) ──
     Both regular and special keys are shades of gray and close enough
     to read as one family. Special keys (ESC, SHIFT, CTRL, RETURN,
     RESET, REPT, ←, →, EXECUTE) are slightly DARKER so they read as
     a distinct subgroup. */
  --key-light:    #7e7c6e;
  --key-mid:      #6c6a5c;
  --key-dark:     #58564a;
  --key-edge:     #2a2820;
  --key-shadow:   #1a1812;
  --key-text:     #ece8d2;
  --key-text-dim: rgba(245,240,220,0.55);

  --special-light: #62604e;
  --special-mid:   #4e4c3c;
  --special-dark:  #3a3828;
  --special-text:  #ece8d2;

  /* Timer tile sizes */
  --tile-w: 80px;
  --tile-h: 98px;
  --tile-fs: 5.2rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: #000;
  position: relative;
  color: var(--green);
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
  );
  z-index: 9999;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-bright); }
button, input { font-family: inherit; }



/* ═══════════════════════════════════════════
   DYNAMIC PAGE BACKGROUND — SIMPLIFIED HATCH WALLS
   Minimal Swan Station corridor: only receding planes, simple X wall
   lines, flickering light, fog, dust, and heavy vignette.
═══════════════════════════════════════════ */
#swan-hatch-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050605 url('assets/Background.jpg') center center / cover no-repeat;
}
#swan-hatch-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(255,170,60,0.12), transparent 55%),
    radial-gradient(ellipse at 52% 34%, rgba(255,135,45,0.04), transparent 44%),
    linear-gradient(180deg, rgba(24,17,8,0.15), transparent 48%);
  animation: hatchBulbFlick 8s steps(1,end) infinite;
}
#swan-hatch-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(0,0,0,0.82), transparent 52%),
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.62) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.3), transparent 18%, transparent 82%, rgba(0,0,0,0.3));
}
.hatch-fog {
  position: absolute;
  z-index: 3;
  display: block;
  width: 54vw;
  height: 18vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(190,165,125,0.13), rgba(100,85,65,0.055) 42%, transparent 72%);
  filter: blur(18px);
  opacity: 0.34;
  transform: translate3d(0,0,0);
  animation: hatchFogDrift 22s ease-in-out infinite alternate;
}
.hatch-fog.hf1 { left: -12vw; top: 18vh; animation-duration: 26s; }
.hatch-fog.hf2 { right: -14vw; top: 48vh; animation-duration: 31s; animation-delay: -9s; }
.hatch-fog.hf3 { left: 28vw; bottom: 5vh; width: 48vw; height: 16vh; animation-duration: 34s; animation-delay: -15s; opacity: 0.22; }
.hatch-mote {
  position: absolute;
  z-index: 4;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,205,145,0.58);
  box-shadow: 0 0 5px rgba(255,205,145,0.8);
  opacity: 0;
  animation: hatchDustRise 18s linear infinite;
}
.hatch-mote.hm1 { left: 22%; top: 35%; animation-duration: 17s; }
.hatch-mote.hm2 { left: 66%; top: 76%; animation-duration: 23s; animation-delay: -8s; }
.hatch-mote.hm3 { left: 39%; top: 55%; animation-duration: 19s; animation-delay: -12s; }
.hatch-mote.hm4 { left: 81%; top: 26%; animation-duration: 25s; animation-delay: -3s; }
.hatch-mote.hm5 { left: 12%; top: 76%; animation-duration: 21s; animation-delay: -16s; }
.hatch-mote.hm6 { left: 52%; top: 44%; animation-duration: 27s; animation-delay: -5s; }

@keyframes hatchDustRise {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  10%  { opacity: 0.78; }
  85%  { opacity: 0.52; }
  100% { transform: translate(-46px, -170px) scale(1.3); opacity: 0; }
}
@keyframes hatchFogDrift {
  0%   { transform: translate3d(-4vw, 1vh, 0) scale(1); }
  50%  { transform: translate3d(3vw, -2vh, 0) scale(1.08); }
  100% { transform: translate3d(8vw, 2vh, 0) scale(0.96); }
}
@keyframes hatchBulbFlick {
  0%,90%,100% { opacity: 1; }
  91% { opacity: 0.45; }
  92% { opacity: 1; }
  93% { opacity: 0.68; }
  94% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #swan-hatch-bg::before,
  .hatch-fog,
  .hatch-mote {
    animation: none !important;
  }
  .hatch-mote { opacity: 0.35; }
  .hatch-fog { opacity: 0.22; }
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
#app { display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 10; }

/* ── TOP BAR ── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  height: 64px;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.top-bar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dharma SVG logo in top bar */
.dharma-logo { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; }

.site-title-block { display: flex; flex-direction: column; line-height: 1.2; }
.site-title {
  font-family: Impact;
  font-size: 1.8rem;
  color: var(--green);
  letter-spacing: 4px;
}
.site-status {
  font-size: 0.72rem;
  color: var(--green-dim);
  letter-spacing: 1.5px;
}
.site-status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  margin-right: 5px;
  animation: dotPulse 2s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes dotPulse { 50% { opacity: 0.3; } }

/* ── MAIN LAYOUT ── */
.main-layout {
  display: flex;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

/* ── CENTER COLUMN ── */
.center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 16px 20px;
  gap: 16px;
  min-width: 0;
  overflow-y: auto;
}

/* The monitor + computer case stack as one unified object (no gap).
   center-col's gap still separates this stack from the flip-clock above. */
.station-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 650px;
}
.station-stack .monitor-wrap {
  position: relative;
  z-index: 3;
  margin-bottom: -2px;     /* monitor base sits flush on the case */
}
.station-stack .computer-case {
  max-width: 620px;        /* slightly narrower than monitor → "sitting on top" */
}

/* ═══════════════════════════════════════════
   METAL FRAME FLIP-CLOCK TIMER
═══════════════════════════════════════════ */
.timer-housing {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 28px 26px 14px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, rgba(0,0,0,0.015) 1px 2px),
    linear-gradient(180deg, #afa99d 0%, #9d978a 22%, #8b8579 58%, #767165 100%);
  border: 1px solid #4f4c47;
  border: 1px solid #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.6),
    inset 0 0 0 4px #1e1e1e,
    0 4px 0 #0e0e0e,
    0 8px 30px rgba(0,0,0,0.95),
    0 16px 44px rgba(0,0,0,0.7);
  width: 100%;
  max-width: 520px;
}
/* Four corner bolts */
.timer-housing::before, .timer-housing::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #909090, #1c1c1c 75%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.06);
  top: 7px;
}
.timer-housing::before { left: 9px; }
.timer-housing::after  { right: 9px; }
.timer-bolt-bl, .timer-bolt-br {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #909090, #1c1c1c 75%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.06);
  bottom: 7px;
  pointer-events: none;
}
.timer-bolt-bl { left: 9px; }
.timer-bolt-br { right: 9px; }

.flip-clock { display: inline-flex; align-items: stretch; gap: 12px; }

.flip-group {
  display: inline-flex;
  gap: 5px;
  padding: 8px 9px;
  border-radius: 4px;
}
.flip-group-minutes {
  background: #2A2A2A;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.95), inset 0 0 0 1px #191919;
}
.flip-group-seconds {
  background: #2A2A2A;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), inset 0 0 0 1px #3c3c3c;
}

/* ── INDIVIDUAL FLIP TILE (Split-Flap) ── */
.flip-digit {
  position: relative;
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: 4px;
  overflow: hidden;
  perspective: 300px;
  flex-shrink: 0;
}

/* ── Static halves — show current digit at rest ── */
.flip-digit .top-half,
.flip-digit .bottom-half {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}
.flip-digit .top-half {
  top: 0;
  background: linear-gradient(180deg, #2a2b28 0%, #393b35 100%);
  border-radius: 4px 4px 0 0;
  border: 1px solid #000;
  border-bottom: none;
}
.flip-digit .bottom-half {
  bottom: 0;
  background: linear-gradient(180deg, #3a3d33 0%, #40423b 100%);
  border-radius: 0 0 4px 4px;
  border: 1px solid #000;
  border-top: none;
}

/* Digit text — each half shows the full-tile-height text, clipped by overflow */
.flip-digit .top-half .digit-text {
  font-family: 'Arial Black', Oswald, sans-serif;
  font-size: var(--tile-fs);
  font-weight: 700;
  color: #e8e4d0;
  line-height: 1;
  position: absolute;
  top: 0;
  height: var(--tile-h);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}
.flip-digit .bottom-half .digit-text {
  font-family: 'Arial Black', Oswald, sans-serif;
  font-size: var(--tile-fs);
  font-weight: 700;
  color: #f0ece0;
  line-height: 1;
  position: absolute;
  bottom: 0;
  height: var(--tile-h);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-shadow: 0 -1px 2px rgba(0,0,0,0.3);
  transform: translateY(-2px);
}

/* Center split line — the mechanical hinge */
.flip-digit::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: #000;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03);
}

/* ── ANIMATED FLAP — top-half that folds down on digit change ── */
.flip-digit .flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2c25 0%, #393b35 100%);
  border-radius: 4px 4px 0 0;
  border: 1px solid #000;
  border-bottom: none;
  transform-origin: bottom center;
  z-index: 5;
  backface-visibility: hidden;
  display: none;
}
.flip-digit .flap .digit-text {
  font-family: 'Arial Black', Oswald, sans-serif;
  font-size: var(--tile-fs);
  font-weight: 700;
  color: #e8e4d0;
  line-height: 1;
  position: absolute;
  top: 0;
  height: var(--tile-h);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

.flip-digit .flap.flipping {
  display: block;
  animation: splitFlapDown 0.45s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes splitFlapDown {
  0%   { transform: rotateX(0deg); }
  60%  { transform: rotateX(-100deg); }
  80%  { transform: rotateX(-88deg); }
  100% { transform: rotateX(-90deg); }
}

/* Shadow cast on bottom half as the flap falls */
.flip-digit .flap-shadow {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 50%;
  background: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 60%);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.flip-digit .flap.flipping ~ .flap-shadow {
  animation: flapShadow 0.45s ease-out forwards;
}
@keyframes flapShadow {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Seconds tiles — olive/green tint (matches the show) ── */
.flip-group-seconds .flip-digit .top-half {
  background: linear-gradient(180deg, #464741 0%, #7e8077 100%);
}
.flip-group-seconds .flip-digit .bottom-half {
  background: linear-gradient(180deg, #7e8077 0%, #9da18a 100%);
}
.flip-group-seconds .flip-digit .flap {
  background: linear-gradient(180deg, #464741 0%, #7e8077 100%);
}
.flip-group-seconds .flip-digit .top-half .digit-text,
.flip-group-seconds .flip-digit .flap .digit-text {
  color: #111;
  text-shadow: none;
}
.flip-group-seconds .flip-digit .bottom-half .digit-text {
  color: #111;
  text-shadow: none;
}

/* ── ALARM STATE (housing glow only — tiles stay their natural color) ── */
.flip-group-minutes, .flip-group-seconds {
  background: #151515;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), inset 0 0 0 1px #080808;
}
.timer-alarm .timer-housing { animation: warnPulse 0.8s ease-in-out infinite; }
@keyframes warnPulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 4px #1e1e1e, 0 4px 0 #0e0e0e, 0 8px 30px rgba(0,0,0,0.95), 0 0 18px rgba(200,0,0,0.3); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 4px #1e1e1e, 0 4px 0 #0e0e0e, 0 8px 30px rgba(0,0,0,0.95), 0 0 44px rgba(255,0,0,0.75); }
}

/* ── GLYPH TILE — minutes: red hieroglyphs on dark background ── */
.flip-digit.glyph-tile .top-half {
  background: linear-gradient(180deg, #1a0000 0%, #140000 100%) !important;
  transition: background 0.2s;
}
.flip-digit.glyph-tile .bottom-half {
  background: linear-gradient(180deg, #1c0000 0%, #120000 100%) !important;
  transition: background 0.2s;
}
.flip-digit.glyph-tile .flap {
  background: linear-gradient(180deg, #1a0000 0%, #140000 100%) !important;
}
.flip-digit.glyph-tile .top-half .digit-text,
.flip-digit.glyph-tile .flap .digit-text {
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif !important;
  color: #dd1100 !important;
  text-shadow: 0 0 12px rgba(255,40,0,0.6), 0 0 24px rgba(200,0,0,0.25) !important;
}
.flip-digit.glyph-tile .bottom-half .digit-text {
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif !important;
  color: #dd1100 !important;
  text-shadow: 0 0 12px rgba(255,40,0,0.6), 0 0 24px rgba(200,0,0,0.25) !important;
}

/* ── GLYPH TILE INVERTED — seconds: black hieroglyphs on red background ── */
.flip-digit.glyph-tile-inv .top-half {
  background: linear-gradient(180deg, #cc1000 0%, #b00e00 100%) !important;
  transition: background 0.2s;
}
.flip-digit.glyph-tile-inv .bottom-half {
  background: linear-gradient(180deg, #c01000 0%, #a00c00 100%) !important;
  transition: background 0.2s;
}
.flip-digit.glyph-tile-inv .flap {
  background: linear-gradient(180deg, #cc1000 0%, #b00e00 100%) !important;
}
.flip-digit.glyph-tile-inv .top-half .digit-text,
.flip-digit.glyph-tile-inv .flap .digit-text {
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif !important;
  color: #0e0000 !important;
  text-shadow: none !important;
}
.flip-digit.glyph-tile-inv .bottom-half .digit-text {
  font-family: 'Noto Sans Egyptian Hieroglyphs', serif !important;
  color: #0e0000 !important;
  text-shadow: none !important;
}

/* ── Per-glyph sizing (each hieroglyph fills its tile well) ── */
.glyph-s29 .top-half .digit-text,
.glyph-s29 .bottom-half .digit-text,
.glyph-s29 .flap .digit-text { font-size: 3rem !important; }

.glyph-z7 .top-half .digit-text,
.glyph-z7 .bottom-half .digit-text,
.glyph-z7 .flap .digit-text { font-size: 4.7rem !important; }

.glyph-u29 .top-half .digit-text,
.glyph-u29 .bottom-half .digit-text,
.glyph-u29 .flap .digit-text { font-size: 3.5rem !important; }

.glyph-g1 .top-half .digit-text,
.glyph-g1 .bottom-half .digit-text,
.glyph-g1 .flap .digit-text { font-size: 3.2rem !important; }

.glyph-z5 .top-half .digit-text,
.glyph-z5 .bottom-half .digit-text,
.glyph-z5 .flap .digit-text { font-size: 2.5rem !important; }

/* ── Fast flip variant (used during shuffle animations) ── */
.flip-digit .flap.flipping-fast {
  display: block;
  animation: splitFlapFast 0.15s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
.flip-digit .flap.flipping-fast ~ .flap-shadow {
  animation: flapShadowFast 0.15s ease-out forwards;
}
@keyframes splitFlapFast {
  0%   { transform: rotateX(0deg); }
  60%  { transform: rotateX(-100deg); }
  80%  { transform: rotateX(-88deg); }
  100% { transform: rotateX(-90deg); }
}
@keyframes flapShadowFast {
  0%   { opacity: 0; }
  50%  { opacity: 0.6; }
  100% { opacity: 0; }
}

/* Timer controls row */
.timer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timer-info {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(35,35,35,0.65);
  letter-spacing: 1px;
}
.btn-icon {
  background: none;
  border: 1.1px solid rgba(35,35,35,0.35);
  color: rgba(35,35,35,0.7);
  font-size: 0.92rem;
  width: 24px;
  height: 23px;
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--font-mono);
}
.btn-icon:hover { border-color: rgba(160,160,160,0.5); color: rgba(200,200,200,0.8); background: rgba(255,255,255,0.04); }

/* Mute button — when muted, glyph and border turn red. */
#btn-mute.muted { color: var(--red-alarm); border-color: rgba(160,40,40,0.5); }
#btn-mute.muted:hover { color: var(--red-bright); border-color: rgba(200,80,80,0.7); }

/* ═══════════════════════════════════════════
   CRT MONITOR — fixed size, internal scroll
═══════════════════════════════════════════ */
.monitor-wrap { width: 100%; max-width: 650px; }

.monitor-outer {
  background: linear-gradient(145deg, var(--case-light), var(--case-mid) 30%, var(--case-base) 70%, var(--case-dark));
  border-radius: 16px 16px 20px 20px;
  padding: 18px 22px 46px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.9),
    inset 0 2px 4px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.3);
  position: relative;
}
.monitor-outer::before {
  content: 'DHARMA INITIATIVE — COMPUTING DIVISION';
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.46rem;
  color: rgba(80,60,30,0.65);
  letter-spacing: 2px;
  white-space: nowrap;
}
.monitor-inner-bezel {
  background: var(--case-bezel);
  border-radius: 8px;
  padding: 10px;
  box-shadow: inset 0 2px 12px rgba(0,0,0,0.9);
}
.monitor-screen {
  background: var(--green-screen);
  border-radius: 4px;
  /* Fixed height — user scrolls inside */
  height: 370px;
  padding: 13px 15px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0,200,0,0.05), inset 0 0 80px rgba(0,0,0,0.3);
}
/* CRT curvature */
.monitor-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: 5;
}
/* Scanlines */
.monitor-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 4;
}

/* Scrollable inner area — flex column so .screen-content can grow and
   push #screen-input-area to the bottom on short pages, while still
   allowing the whole stack to scroll on long pages. */
.screen-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 3;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) transparent;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
}
.screen-scroll::-webkit-scrollbar { width: 4px; }
.screen-scroll::-webkit-scrollbar-track { background: transparent; }
.screen-scroll::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 2px; }

.screen-content {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--green);
  line-height: 1.65;
  text-shadow: 0 0 5px rgba(0,204,0,0.5);
  /* Grow to fill available space (pushing the terminal to the bottom on
     short pages) but never shrink below natural content size (so long
     pages still scroll normally). */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Terminal input area sits at the bottom of the flex column and never shrinks */
#screen-input-area {
  flex: 0 0 auto;
}

.screen-line { display: block; white-space: normal; word-break: break-word; }
.screen-prompt { color: var(--green-bright); font-weight: bold; }
.text-red   { color: var(--red-alarm) !important; text-shadow: 0 0 8px rgba(200,0,0,0.5) !important; }
.text-amber { color: var(--amber) !important; }
.text-dim   { color: var(--green-dim) !important; }
/* small inline brand glyphs next to support links */
.support-icon {
  width: .85em; height: .85em;
  fill: currentColor;
  vertical-align: -.08em;
  margin-right: 6px;
}
.blink      { animation: genericBlink 1s step-end infinite; }
@keyframes genericBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes cursorBlink  { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Typewriter cursor — follows the typing head while the screen renders. */
.tw-cursor {
  display: inline-block;
  color: var(--green) !important;
  text-shadow: 0 0 5px rgba(0,204,0,0.6) !important;
  animation: cursorBlink 0.7s step-end infinite;
  margin-left: 1px;
  font-weight: bold;
}

/* ── TERMINAL COMMAND INPUT (inside monitor) ── */
.term-input-row {
  margin-top: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,50,0,0.18);
  border-top: 1px solid rgba(0,204,0,0.15);
  padding-top: 9px;
}
.input-prompt {
  color: var(--green-bright);
  font-size: 0.88rem;
  white-space: nowrap;
  font-weight: bold;
  margin-right: 4px;
  flex-shrink: 0;
}

#code-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--green-bright);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 3px;
  /* Wide green caret — acts as our block cursor */
  caret-color: var(--green);
  caret-shape: block;
  min-width: 0;
  padding: 0;
}
#term-response { font-size: 0.8rem; min-height: 1.4em; margin-top: 5px; flex-shrink: 0; }

/* Screen glitch */
.monitor-screen.glitch { animation: screenGlitch 0.1s step-end infinite; }
@keyframes screenGlitch {
  0%   { filter: hue-rotate(0deg) brightness(1); transform: translateX(0); }
  20%  { filter: hue-rotate(90deg) brightness(2); transform: translateX(-3px); }
  40%  { filter: hue-rotate(180deg) brightness(0.5); transform: translateX(4px); }
  60%  { filter: hue-rotate(270deg) brightness(1.5); transform: translateX(-2px); }
  80%  { filter: hue-rotate(45deg) brightness(0.8); transform: translateX(1px); }
  100% { filter: none; transform: translateX(0); }
}

/* Brief green glow when a valid code is accepted */
.monitor-screen.flash-accept {
  animation: screenAccept 0.65s ease-out;
}
@keyframes screenAccept {
  0%   { box-shadow: none; }
  15%  { box-shadow: 0 0 50px rgba(0,255,0,0.45), inset 0 0 60px rgba(0,80,0,0.25); }
  100% { box-shadow: none; }
}

/* ═══════════════════════════════════════════
   VIRTUAL KEYBOARD — Apple II style
   The keyboard now sits inside a computer case that the monitor rests
   on. Visual stack:
       [ monitor          ] (monitor-wrap, outside this block)
       [ computer case    ] (.computer-case)
         └─ keyboard well  (.keyboard-well, sunken recess)
            └─ keyboard    (.keyboard-chassis — same case color)
═══════════════════════════════════════════ */
.keyboard-wrap { width: 100%; max-width: 620px; display: block; }

/* The Apple II+ chassis box that the monitor sits on top of. */
.computer-case {
  width: 100%;
  background: linear-gradient(180deg,
    var(--case-mid) 0%,
    var(--case-base) 35%,
    var(--case-dark) 100%
  );
  border-radius: 0 0 6px 6px;
  padding: 22px 28px 0;      /* bottom padding handled by keyboard-well */
  position: relative;
  z-index: 2;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.85),
    inset 0 3px 0 rgba(255,255,255,0.18),    /* highlight line where monitor meets case */
    inset 0 -1px 0 rgba(0,0,0,0.35),
    inset 4px 0 8px rgba(0,0,0,0.18),
    inset -4px 0 8px rgba(0,0,0,0.18);
}
.case-badge {
  position: absolute;
  top: 8px;
  left: 22px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(80,60,30,0.55);
  letter-spacing: 2px;
}
.case-badge .swan-glyph {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(80,60,30,0.35);
  margin-right: 6px;
  vertical-align: middle;
}
.case-model {
  position: absolute;
  top: 8px;
  right: 22px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: rgba(80,60,30,0.55);
  letter-spacing: 1.5px;
}
.case-vents {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 22px;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.case-vent-group {
  height: 100%;
  width: 24px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(80,60,30,0.25) 0px,
    rgba(80,60,30,0.25) 1px,
    transparent 1px, transparent 4px
  );
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}

/* Sunken recess in the case front where the keyboard lives. */
.keyboard-well {
  margin: 0 -2px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.08) 40%,
    transparent 100%
  );
  padding: 16px 18px 22px;
  border-radius: 4px 4px 6px 6px;
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.45);
  position: relative;
}

/* Keyboard chassis — SAME warm cream color as monitor + case, with a
   small drop shadow so it visually lifts out of the well. Only the
   keycaps themselves are gray. */
.keyboard-chassis {
  background: linear-gradient(175deg, var(--case-light), var(--case-mid) 30%, var(--case-base) 70%, var(--case-dark));
  border-radius: 6px 6px 10px 10px;
  padding: 12px 14px 16px;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.55),
    inset 0 2px 3px rgba(255,255,255,0.32),
    inset 0 -2px 4px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.keyboard-chassis::after {
  content: '● DHARMA INITIATIVE ●';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.44rem;
  color: rgba(30,20,10,0.45);
  letter-spacing: 2px;
  white-space: nowrap;
}
.key-row { display: flex; gap: 4px; margin-bottom: 4px; justify-content: center; }

/* Regular keys — medium gunmetal gray. */
.key {
  background: linear-gradient(175deg, var(--key-light), var(--key-mid) 40%, var(--key-dark));
  border: 1px solid var(--key-edge);
  border-bottom: 3px solid var(--key-shadow);
  border-radius: 3px;
  min-width: 29px;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--key-text);
  font-weight: bold;
  position: relative;
  transition: all 0.06s;
  line-height: 1.1;
  text-align: center;
  box-shadow: inset 0 1px 2px rgba(245,240,220,0.18), 0 1px 3px rgba(0,0,0,0.6);
}
.key:active, .key.pressed {
  transform: translateY(2px);
  border-bottom-width: 1px;
  background: linear-gradient(175deg, #666456, #565446 45%, #444236);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.55), inset 0 -1px 1px rgba(255,255,255,0.08), 0 0 1px rgba(0,0,0,0.8);
  color: var(--key-text);
  border-color: var(--key-edge);
}

.key .key-main { font-size: 0.75rem; }
.key .key-shift { font-size: 0.5rem; color: var(--key-text-dim); line-height: 1; }
.key-w-1  { min-width: 29px; }
.key-w-1h { min-width: 52px; }
.key-w-execute { min-width: 96px; }
.key-w-space   { min-width: 320px; height: 30px; }

/* Special keys (ESC, SHIFT, CTRL, RETURN, RESET, REPT, ←, →, EXECUTE) —
   a slightly darker tone of the same gunmetal family. Close enough to
   regular keys to read as one keyboard, just darker enough to flag the
   functional group. */
.key-special {
  background: linear-gradient(175deg, var(--special-light), var(--special-mid) 40%, var(--special-dark));
  color: var(--special-text);
  font-size: 0.54rem;
  letter-spacing: 0.5px;
}
.key-special:active, .key-special.pressed {
  background: linear-gradient(175deg, #565442, #464432 45%, #343224);
  color: var(--special-text);
  border-color: var(--key-edge);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), inset 0 -1px 1px rgba(255,255,255,0.06), 0 0 1px rgba(0,0,0,0.8);
}

/* ═══════════════════════════════════════════
   FULLSCREEN GAME MENU OVERLAY
═══════════════════════════════════════════ */
#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
#menu-overlay.open { display: flex; }

/* The framed box — same style as settings modal */
.menu-box {
  background: var(--sidebar-bg);
  border: 1px solid var(--green-dim);
  padding: 28px 32px 24px;
  max-width: 520px;
  width: calc(100% - 32px);
  box-shadow: 0 0 40px rgba(0,200,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-height: 90vh;
  overflow-y: auto;
}

.menu-overlay-title {
  font-family: var(--font-vt);
  font-size: 1.6rem;
  color: var(--green-dim);
  letter-spacing: 8px;
  text-align: center;
  border-bottom: 1px solid var(--panel-border);
  padding-bottom: 12px;
  width: 100%;
}

/* Stations grid — 2 columns × 3 rows */
.menu-stations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
.menu-station-btn {
  background: #0a0a0a;
  border: 1px solid #222;
  color: var(--green-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 12px 10px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.5px;
  width: 100%;
}
.menu-station-btn:hover { border-color: var(--green-dim); color: var(--green); background: #0f1a0f; }
.menu-station-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.15s, filter 0.15s;
  flex-shrink: 0;
}
.menu-station-btn:hover .menu-station-icon { opacity: 1; }

/* Menu links section */
.menu-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.menu-link-group { text-align: center; }
.menu-link-group-title {
  font-size: 0.62rem;
  color: var(--green-dim);
  letter-spacing: 3px;
  margin-bottom: 8px;
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 4px;
}
.menu-link-group a, .menu-link-group button {
  display: block;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #334433;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: color 0.1s;
  text-align: center;
  width: 100%;
}
.menu-link-group a:hover, .menu-link-group button:hover { color: var(--green); text-decoration: none; }

.menu-close-btn {
  background: none;
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 7px 20px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.15s;
  margin-top: 4px;
}
.menu-close-btn:hover { background: var(--green); color: #000; }

/* ═══════════════════════════════════════════
   SETTINGS MODAL
═══════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--sidebar-bg);
  border: 1px solid var(--green-dim);
  padding: 24px 28px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 0 40px rgba(0,200,0,0.1);
}
.modal-title {
  font-family: var(--font-vt);
  font-size: 1.3rem;
  color: var(--green);
  letter-spacing: 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--green-dim);
  padding-bottom: 7px;
}
.modal-label { font-size: 0.72rem; color: var(--green-dim); letter-spacing: 1px; margin-bottom: 6px; display: block; }
.modal-input {
  background: #000;
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 6px 10px;
  width: 100%;
  margin-bottom: 12px;
  outline: none;
}
.modal-input:focus { border-color: var(--green); }
.modal-sub { font-size: 0.6rem; color: #334433; letter-spacing: 0.5px; margin-bottom: 14px; line-height: 1.7; }
.modal-buttons { display: flex; gap: 10px; justify-content: flex-end; }
.btn-modal {
  background: none;
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}
.btn-modal:hover { background: var(--green); color: #000; }
.btn-modal.cancel { border-color: #333; color: #555; }
.btn-modal.cancel:hover { background: #222; color: #888; }

/* Station modal */
.station-modal-box {
  background: var(--sidebar-bg);
  border: 1px solid var(--red-alarm);
  padding: 24px 28px 28px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(200,0,0,0.15);
}
.station-modal-logo {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  object-fit: contain;
  opacity: 0.85;
  filter: drop-shadow(0 0 12px rgba(200,0,0,0.35));
}
.station-modal-box h3 {
  font-family: var(--font-vt);
  font-size: 1.4rem;
  color: var(--red-alarm);
  letter-spacing: 3px;
  margin-bottom: 10px;
}
.station-modal-box p { font-size: 0.72rem; color: var(--green-dim); letter-spacing: 1px; line-height: 1.9; }

/* ═══════════════════════════════════════════
   FAILURE OVERLAY
═══════════════════════════════════════════ */
#failure-overlay {
  position: fixed;
  inset: 0;
  background: rgba(180,0,0,0);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#failure-overlay.active {
  display: flex;
  pointer-events: all;
  animation: failureFlash 0.5s step-end 6;
}
@keyframes failureFlash { 0%,100%{background:rgba(180,0,0,0);} 50%{background:rgba(180,0,0,0.45);} }
.failure-text {
  font-family: var(--font-vt);
  font-size: clamp(2rem, 8vw, 5rem);
  color: var(--red-bright);
  letter-spacing: 6px;
  text-align: center;
  text-shadow: 0 0 40px rgba(255,50,0,0.8);
  animation: textFlicker 0.2s step-end infinite;
}
@keyframes textFlicker { 0%,90%,100%{opacity:1;} 91%,99%{opacity:0.3;} }

/* ═══════════════════════════════════════════
   SOUND PROMPT
═══════════════════════════════════════════ */
#sound-prompt {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 6px 16px;
  letter-spacing: 1.5px;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 0 14px rgba(255,170,0,0.18);
  animation: soundPromptBlink 1.6s step-end infinite;
}

@keyframes soundPromptBlink {50% {opacity: 0.55; }}
#sound-prompt.hidden { display: none; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer {
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  text-align: center;
  padding: 6px 14px;
  font-size: 0.6rem;
  color: var(--green-dim);
  letter-spacing: 1px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
}
footer a { color: var(--green-dim); }
footer a:hover { color: var(--green); }
footer span:first-child { text-align: left; }
footer span:last-child  { text-align: right; }
#footer-time { color: var(--green); font-weight: bold; }

/* ═══════════════════════════════════════════
   FULLSCREEN ORIENTATION FILM
   When .monitor-fullscreen is active on .monitor-screen,
   the normal terminal content is hidden and an absolutely
   positioned video layout fills the entire monitor area.
═══════════════════════════════════════════ */
.monitor-screen.monitor-fullscreen .screen-scroll {
  /* Hide normal scroll/content; the .orient-fullscreen layer takes over.
     We keep it in the DOM so #screen-content (which hosts .orient-fullscreen)
     can still be queried. */
  padding: 0;
  overflow: hidden;
}
.monitor-screen.monitor-fullscreen .screen-content {
  height: 100%;
}
.monitor-screen.monitor-fullscreen #screen-input-area {
  display: none;
}

.orient-fullscreen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #000;
  z-index: 3;       /* below scanlines (::after z=4) and vignette (::before z=5) */
}

/* Top title strip — keeps the two header lines visible above the film */
.orient-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px 8px;
  background: linear-gradient(180deg, rgba(0,40,0,0.85), rgba(0,20,0,0.6));
  border-bottom: 1px solid rgba(0,204,0,0.25);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1px;
  line-height: 1.4;
  text-shadow: 0 0 5px rgba(0,204,0,0.5);
}
.orient-header-line { display: block; }

/* Exit button — top-right, terminal-styled */
.orient-exit-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 8;       /* above everything inside .monitor-screen including scanlines */
  background: rgba(0,30,0,0.85);
  border: 1px solid var(--green-dim);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 1.5px;
  padding: 4px 9px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
  text-shadow: 0 0 4px rgba(0,204,0,0.4);
}
.orient-exit-btn:hover {
  background: var(--green);
  color: #000;
  border-color: var(--green);
  text-shadow: none;
}

/* Video container — takes the remaining space below the header */
.orient-video-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;    /* allow flex item to shrink properly */
}
.orient-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* preserves the 1.33:1 aspect ratio */
  background: #000;
  display: block;
}

/* Fallback shown if the video file is missing / errors */
.orient-fallback {
  display: none;       /* shown via JS by setting display:flex */
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  letter-spacing: 1px;
  padding: 20px;
}

/* "TRANSMISSION COMPLETE" overlay shown briefly when the video ends */
.orient-complete {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(255,170,0,0.5);
  animation: orientCompleteIn 0.4s ease-out;
}
@keyframes orientCompleteIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════
   MOBILE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --tile-w: 46px; --tile-h: 68px; --tile-fs: 3.9rem; }
  .timer-housing { padding: 14px 16px 12px; }
  .monitor-screen { height: 280px; }
  .keyboard-wrap {
    padding: 0 4px;
    transform: scale(0.95);
    transform-origin: top center;
    width: 105.26%;
    margin-left: -2.63%;
    margin-bottom: -12px;
  }
  .computer-case { padding: 18px 12px 0; max-width: 100%; }
  .computer-case .case-badge,
  .computer-case .case-model { font-size: 0.46rem; letter-spacing: 1.2px; }
  .computer-case .case-vents { display: none; }   /* skip the decorative vents on small screens */
  .keyboard-well { padding: 10px 8px 14px; }
  .station-stack .computer-case { max-width: 100%; }
  .key { min-width: calc((100vw - 40px) / 18); height: 28px; }
  .key .key-main { font-size: 0.65rem; }
  .key-w-1  { min-width: calc((100vw - 40px) / 18); }
  .key-w-1h { min-width: 32px; }
  .key-w-execute { min-width: 60px; }
  .key-w-space   { min-width: 200px; height: 26px; }
  .center-col { padding: 10px 6px 14px; }
  .menu-stations-grid { grid-template-columns: repeat(3, 1fr); }
  .top-bar-center { position: static; transform: none; }
  /* Slightly tame the upsized header on mobile */
  .top-bar { height: 56px; }
  .dharma-logo { width: 44px; height: 44px; }
  .site-title { font-size: 1.3rem; }
  .site-status { font-size: 0.62rem; }
  /* Glyph sizing for smaller tiles */
  .glyph-s29 .top-half .digit-text, .glyph-s29 .bottom-half .digit-text, .glyph-s29 .flap .digit-text { font-size: 2.2rem !important; }
  .glyph-z7 .top-half .digit-text,  .glyph-z7 .bottom-half .digit-text,  .glyph-z7 .flap .digit-text  { font-size: 3.2rem !important; }
  .glyph-u29 .top-half .digit-text, .glyph-u29 .bottom-half .digit-text, .glyph-u29 .flap .digit-text { font-size: 2.8rem !important; }
  .glyph-g1 .top-half .digit-text,  .glyph-g1 .bottom-half .digit-text,  .glyph-g1 .flap .digit-text  { font-size: 2.4rem !important; }
  .glyph-z5 .top-half .digit-text,  .glyph-z5 .bottom-half .digit-text,  .glyph-z5 .flap .digit-text  { font-size: 1.8rem !important; }
}

@media (max-width: 400px) {
  :root { --tile-w: 36px; --tile-h: 54px; --tile-fs: 3rem; }
  .keyboard-wrap {
    transform: scale(0.9);
    transform-origin: top center;
    width: 111.11%;
    margin-left: -5.55%;
    margin-bottom: -22px;
  }
  .key-special { font-size: 0.46rem; letter-spacing: 0; }
  .key .key-main { font-size: 0.58rem; }
  .key .key-shift { font-size: 0.42rem; }
  .key-w-execute { min-width: 62px; }
  .key { min-width: calc((100vw - 30px) / 18); }
  .key-w-space   { min-width: 150px; }
  .menu-stations-grid { grid-template-columns: repeat(2, 1fr); }
  .glyph-s29 .top-half .digit-text, .glyph-s29 .bottom-half .digit-text, .glyph-s29 .flap .digit-text { font-size: 1.8rem !important; }
  .glyph-z7 .top-half .digit-text,  .glyph-z7 .bottom-half .digit-text,  .glyph-z7 .flap .digit-text  { font-size: 2.5rem !important; }
  .glyph-u29 .top-half .digit-text, .glyph-u29 .bottom-half .digit-text, .glyph-u29 .flap .digit-text { font-size: 2.2rem !important; }
  .glyph-g1 .top-half .digit-text,  .glyph-g1 .bottom-half .digit-text,  .glyph-g1 .flap .digit-text  { font-size: 2rem !important; }
  .glyph-z5 .top-half .digit-text,  .glyph-z5 .bottom-half .digit-text,  .glyph-z5 .flap .digit-text  { font-size: 1.2rem !important; }
}