:root {
  --black: #00030a;
  --panel: #020817;
  --blue: #174f9a;
  --blue-bright: #67aaff;
  --blue-pale: #b9d8ff;
  --gold: #e8b83e;
  --gold-pale: #ffe79b;
  --line: #7999c6;
  --muted: #637692;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--blue-pale);
  font: 11px/1.15 "Lucida Console", "Courier New", monospace;
  letter-spacing: -.02em;
  background:
    linear-gradient(rgba(23,79,154,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,79,154,.05) 1px, transparent 1px),
    #000;
  background-size: 4px 4px;
  text-shadow: 0 0 3px rgba(103,170,255,.18);
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #3168ad 3px 4px);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  z-index: 49;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(0deg, rgba(185,216,255,.018) 0 1px, transparent 1px 4px);
  animation: screen-flicker 7s steps(1) infinite;
}

body.booting { overflow: hidden; }

.boot-screen { position: fixed; z-index: 1000; inset: 0; display: none; min-width: 320px; place-items: center; overflow: hidden; padding: 18px; color: var(--blue-pale); background: radial-gradient(circle at center, #06142d 0, #00040c 44%, #000 76%); cursor: wait; }
.boot-screen.is-active { display: grid; animation: boot-screen-in .3s steps(4); }
.boot-screen.is-ending { animation: boot-screen-out .52s steps(7) forwards; }
.boot-screen::before { content: ""; position: absolute; inset: 0; opacity: .27; background: linear-gradient(rgba(103,170,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(103,170,255,.08) 1px, transparent 1px); background-size: 18px 18px; transform: perspective(420px) rotateX(58deg) scale(1.8); animation: boot-grid-drift 1.3s linear infinite; }
.boot-screen::after { content: "01001101 01000001 01011000 01011000 // NO HOST // 01001100 01001111 01010011 01010100"; position: absolute; left: 0; right: 0; top: 8px; overflow: hidden; padding: 4px; border-block: 1px solid rgba(103,170,255,.22); color: rgba(103,170,255,.32); font-size: 7px; letter-spacing: .16em; text-align: center; white-space: nowrap; background: #000; }
.boot-tear { position: absolute; z-index: 5; left: 0; right: 0; top: 27%; height: 3px; opacity: .5; background: var(--blue-bright); box-shadow: 100px 3px 0 #000, -180px -2px 0 var(--gold); pointer-events: none; animation: boot-tear-jump 2.7s steps(1) infinite; }

.boot-terminal { position: relative; z-index: 3; width: min(560px, calc(100vw - 34px)); border: 1px solid var(--blue-pale); padding: 0 13px 12px; background: rgba(0,3,10,.96); box-shadow: 10px 10px 0 #020b1b, -3px -3px 0 #173e72, 0 0 35px rgba(23,79,154,.28); cursor: crosshair; }
.boot-terminal::before { content: "SYSTEM STARTUP // SIGNAL PATH UNVERIFIED"; display: block; margin: 0 -13px 11px; padding: 4px 7px; border-bottom: 1px solid #35547d; color: #4b6381; font-size: 7px; text-align: right; background: repeating-linear-gradient(90deg, #020817 0 8px, #061329 8px 9px); }
.boot-terminal > header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dotted #29476d; color: var(--gold); font-size: 7px; }
.boot-terminal > header span:last-child { color: var(--blue-bright); animation: blink .8s steps(1) infinite; }
.boot-terminal h1 { position: relative; width: max-content; max-width: 100%; margin: 10px auto 12px; color: #fff; font-size: clamp(20px, 5vw, 34px); letter-spacing: -.08em; text-align: center; text-shadow: 4px 3px 0 var(--blue), -2px -1px 0 #7a5d17; }
.boot-terminal h1::before, .boot-terminal h1::after { content: attr(data-boot-text); position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.boot-terminal h1::before { color: var(--gold); clip-path: inset(16% 0 62% 0); transform: translateX(4px); animation: boot-title-glitch 2.1s steps(1) infinite; }
.boot-terminal h1::after { color: var(--blue-bright); clip-path: inset(66% 0 10% 0); transform: translateX(-3px); animation: boot-title-glitch 2.8s steps(1) infinite reverse; }

.boot-core { position: relative; width: 76px; height: 76px; margin: 13px auto 0; }
.boot-core-ring { position: absolute; inset: 2px; border: 1px dashed #315d96; border-radius: 50%; animation: boot-ring-spin 3.2s steps(24) infinite; }
.boot-core-ring::before { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 5px; background: var(--gold); transform: translateX(-50%); }
.boot-core > b { position: absolute; left: 50%; top: 50%; display: block; width: 31px; height: 39px; border: 1px solid var(--gold); background: #020817; box-shadow: 0 0 0 3px #061329, 0 0 0 4px var(--blue); transform: translate(-50%, -50%); animation: boot-core-pulse 1s steps(2) infinite; }
.boot-core > b::before { content: ""; position: absolute; left: 50%; top: -13px; width: 1px; height: 12px; background: var(--gold); }
.boot-core > b::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 6px; border: 1px solid #315d96; }
.boot-core > b span { position: absolute; left: 7px; right: 7px; top: 7px; height: 7px; border: 1px solid var(--blue-bright); background: #071a35; }
.boot-core small { position: absolute; left: 50%; bottom: -3px; color: #526b8a; font-size: 5px; transform: translateX(-50%); white-space: nowrap; }

.boot-post { border: 1px solid #29476d; padding: 4px 7px; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(23,79,154,.06) 3px 4px); }
.boot-post p { display: flex; justify-content: space-between; gap: 15px; margin: 0; padding: 4px 2px; border-bottom: 1px dotted #1c3455; color: #617794; font-size: 8px; }
.boot-post p:last-child { border-bottom: 0; }
.boot-post b { color: var(--gold-pale); font-weight: normal; }
.boot-progress { height: 13px; margin-top: 10px; border: 1px solid #46668f; padding: 2px; background: #000; }
.boot-progress i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 12px, var(--blue) 12px 22px, transparent 22px 24px); box-shadow: 0 0 6px rgba(232,184,62,.35); transition: width .22s steps(4); }
.boot-status { display: flex; justify-content: space-between; gap: 12px; padding: 6px 1px 3px; color: var(--blue-bright); font-size: 8px; }
.boot-status b { color: var(--gold); }
.boot-terminal > button { display: block; margin: 7px 0 0 auto; border: 1px solid #3c567a; border-radius: 0; padding: 4px 7px; color: #627895; font: 7px "Lucida Console", monospace; background: #01040a; }
.boot-terminal > button:hover, .boot-terminal > button:focus-visible { border-color: var(--gold); color: var(--gold-pale); outline: 0; }
.boot-warning { position: absolute; z-index: 3; left: 0; right: 0; bottom: 12px; margin: 0; color: #3f5571; font-size: 6px; letter-spacing: .15em; text-align: center; animation: text-dropout 2.4s steps(1) infinite; }

.main-column.home-view-enter { animation: home-reconnect-main .58s steps(7); }
.right-rail.home-view-enter { animation: home-reconnect-rail .72s steps(8); }

a,
button,
[role="button"] { cursor: url("/assets/cursor-link.png") 7 0, pointer; }

.noise {
  position: fixed;
  z-index: 50;
  inset: 0;
  opacity: .07;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 1px 4px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
  animation: static-shift .24s steps(2) infinite;
}

.lost-web-atmosphere { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.lost-signal { position: absolute; color: rgba(103,170,255,.22); font-size: 7px; letter-spacing: .14em; white-space: nowrap; animation: signal-ghost 8s steps(2) infinite; }
.lost-signal--one { left: 1.5%; top: 12%; }
.lost-signal--two { right: 2%; top: 29%; color: rgba(232,184,62,.24); animation-delay: -2s; }
.lost-signal--three { left: 3%; bottom: 18%; animation-delay: -5s; }
.lost-signal--four { right: 1.5%; bottom: 9%; color: rgba(232,184,62,.18); animation-delay: -3.5s; }
.screen-tear { position: absolute; left: 0; right: 0; height: 2px; background: rgba(103,170,255,.22); box-shadow: 0 2px 0 rgba(232,184,62,.08), 22px 0 0 rgba(0,0,0,.7); animation: tear-jump 6.8s steps(1) infinite; }
.screen-tear--one { top: 33%; }
.screen-tear--two { top: 76%; animation-delay: -3.1s; }

.site-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 178px minmax(520px, 700px) 224px;
  gap: 8px;
  width: min(1130px, calc(100% - 24px));
  margin: 24px auto 8px;
  align-items: start;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.7));
}

.site-shell::before { content: "/// LOST WEB ACCESS LAYER // UNSTABLE ROUTE ///"; position: absolute; left: 188px; top: -15px; color: #304968; font-size: 7px; letter-spacing: .12em; animation: text-dropout 5s steps(1) infinite; }

.left-rail,
.right-rail,
.main-column { min-width: 0; }

.tiny-button,
.rail-badge {
  display: grid;
  min-height: 34px;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid var(--blue-pale);
  color: #fff;
  font-weight: 900;
  text-align: center;
  text-shadow: 2px 2px 0 #204c85;
  background: #020713;
}
.tiny-button { position: relative; box-shadow: 3px 3px 0 #06152d; animation: terminal-breathe 4.5s steps(3) infinite; }
.tiny-button::before { content: ">"; position: absolute; left: 7px; color: var(--gold); animation: blink .7s steps(1) infinite; }
.tiny-button::after { content: "_"; position: absolute; right: 7px; color: var(--blue-bright); animation: blink 1.1s steps(1) infinite reverse; }

.main-nav {
  margin-bottom: 18px;
  border: 1px solid var(--blue-pale);
}

.main-nav a {
  position: relative;
  display: block;
  padding: 5px 4px 4px;
  border-bottom: 1px solid var(--blue-pale);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 0 #1d4f91;
  background:
    radial-gradient(circle, #4f76ab 0 1px, transparent 1px),
    #02050b;
  background-size: 5px 5px;
  transition: transform .06s steps(1), color .06s steps(1);
}

.main-nav a::before { content: "["; position: absolute; left: 7px; color: #36557b; }
.main-nav a::after { content: "]"; position: absolute; right: 7px; color: #36557b; }
.main-nav a:nth-child(even) { margin-left: 2px; }
.main-nav a:nth-child(3n) { margin-right: 3px; }

.main-nav a:last-child { border-bottom: 0; }
.main-nav a:hover,
.main-nav a.active { color: var(--gold); text-shadow: 2px 2px 0 #5e4714; background-color: #09152a; transform: translateX(3px); }
.main-nav a:hover::before, .main-nav a.active::before { content: ">"; color: var(--gold); }

.rail-badge {
  min-height: 31px;
  margin-bottom: 8px;
  padding: 5px 4px;
  color: var(--gold-pale);
  background:
    repeating-linear-gradient(-45deg, transparent 0 3px, rgba(232,184,62,.2) 3px 4px),
    #030914;
}
.rail-badge b { color: var(--gold-pale); font-size: 11px; letter-spacing: .06em; }
.rail-badge small { margin-top: 2px; color: #617895; font-size: 6px; letter-spacing: .12em; }

.mini-panel,
.side-panel {
  position: relative;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: #01040b;
  box-shadow: 2px 2px 0 #020a18;
}

.mini-panel::after,
.side-panel::after { content: ""; position: absolute; right: -1px; top: 13px; width: 5px; height: 12px; border-block: 1px solid var(--gold); background: #00030a; }

.mini-panel h2,
.side-panel h2 {
  margin: 0;
  padding: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--gold);
  font-size: 11px;
  text-align: center;
}

.mini-panel p { margin: 0; padding: 4px 7px; color: var(--muted); }
.system-panel h2 { display: flex; align-items: center; justify-content: space-between; padding-inline: 7px; text-align: left; }
.system-panel h2 i { padding: 1px 3px; border: 1px solid #294e7e; color: var(--blue-bright); font-size: 6px; font-style: normal; background: #020817; animation: blink 1.4s steps(1) infinite; }
.system-panel p { display: flex; justify-content: space-between; gap: 5px; border-bottom: 1px dotted #1e385b; font-size: 8px; }
.system-panel p:last-child { border-bottom: 0; }
.system-panel p span { color: #526984; }
.system-panel p b { color: var(--blue-pale); font-weight: normal; text-align: right; }
.system-panel p:nth-of-type(3) b { color: var(--gold-pale); }

.rail-scanner { margin-top: 10px; border: 1px dashed #365a87; color: var(--muted); background: #01040a; }
.rail-scanner header { padding: 4px; border-bottom: 1px solid #29466f; color: var(--gold); font-size: 8px; text-align: center; }
.rail-scanner > div { display: flex; height: 28px; align-items: center; justify-content: center; gap: 3px; }
.rail-scanner i { display: block; width: 5px; height: 4px; background: var(--blue); animation: rail-scan 1.4s steps(4) infinite; }
.rail-scanner i:nth-child(2n) { animation-delay: -.35s; }
.rail-scanner i:nth-child(3n) { animation-delay: -.8s; background: var(--gold); }
.rail-scanner code { display: block; padding: 4px; border-block: 1px dotted #29466f; color: var(--blue-bright); font-size: 8px; text-align: center; }
.rail-scanner p { margin: 0; padding: 6px; font-size: 7px; line-height: 1.45; }

.warning-bar {
  position: relative;
  display: flex;
  height: 37px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 0 7px;
  border: 1px solid var(--blue-pale);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 2px 2px 0 #1d4780;
  background: #01050d;
  box-shadow: inset 0 -3px 0 #06152d;
}
.warning-bar::after { content: ""; position: absolute; width: 38px; height: 2px; background: var(--blue-bright); opacity: .4; animation: warning-scan 4s steps(16) infinite; }

.pixel-mark {
  display: grid;
  width: 22px;
  height: 18px;
  place-items: center;
  color: var(--black);
  background: var(--gold);
  box-shadow: 4px 0 0 var(--blue), 8px 0 0 #040b17;
}

.blink { margin-left: auto; color: var(--gold); animation: blink 1s steps(1) infinite; }

.lost-band { display: flex; height: 20px; align-items: center; gap: 7px; margin-top: 4px; padding: 2px 5px; overflow: hidden; border: 1px dashed #294e7d; color: var(--muted); font-size: 7px; background: #00030a; }
.lost-band > span { color: var(--gold); white-space: nowrap; }
.lost-band > b { min-width: 61px; color: var(--blue-bright); font-weight: normal; text-align: right; }
.band-meter { display: flex; height: 11px; flex: 1; align-items: center; gap: 2px; overflow: hidden; }
.band-meter i { display: block; width: 3px; height: 2px; background: #234d84; animation: spectrum 1.8s steps(5) infinite; }
.band-meter i:nth-child(2n) { animation-delay: -.25s; }
.band-meter i:nth-child(3n) { animation-delay: -.8s; }
.band-meter i:nth-child(5n) { background: var(--gold); animation-delay: -1.2s; }

.header-row {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 140px 190px;
  gap: 5px;
  margin-top: 5px;
}
.header-row > :nth-child(2) { transform: translateY(2px); }
.header-row > :nth-child(3) { transform: translateX(1px); }

.logo-panel,
.message-panel,
.clock-panel {
  position: relative;
  min-height: 108px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #01040a;
}

.logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.logo-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 67%; height: 3px; background: rgba(103,170,255,.17); box-shadow: 25px 2px 0 rgba(232,184,62,.15); animation: logo-tear 5.4s steps(1) infinite; }

.binary {
  position: absolute;
  inset: 5px;
  overflow: hidden;
  color: #14233a;
  font-size: 10px;
  line-height: 1.7;
  word-break: break-all;
}

.logo-panel h1 {
  position: relative;
  margin: 0;
  color: #fff;
  font: italic 900 45px/.82 Arial Black, Arial, sans-serif;
  letter-spacing: -5px;
  text-shadow: 4px 4px 0 var(--blue), 7px 7px 0 #06172e;
  transform: skewX(-7deg);
}

.logo-panel h1 span { color: var(--gold); }
.logo-panel p { position: relative; margin: 12px 0 0; color: var(--blue-bright); letter-spacing: .25em; }
.glitch-logo::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; color: var(--gold); clip-path: inset(43% 0 38% 0); text-shadow: -3px 0 var(--blue); transform: translateX(2px); animation: logo-glitch 4.7s steps(1) infinite; }

.message-panel {
  padding: 10px;
  text-align: center;
}

.message-panel h2 { margin: 0 0 11px; color: var(--muted); font-size: 13px; }
.message-panel p { margin: 0; color: var(--gold-pale); font-size: 12px; font-weight: bold; line-height: 1.5; }
.message-panel small { display: block; margin-top: 9px; padding-top: 5px; border-top: 1px dotted #29466f; color: var(--blue-bright); font-size: 7px; animation: quality-drop 3.2s steps(1) infinite; }

.clock-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  color: #fff;
  font-weight: bold;
}

.maze {
  position: absolute;
  inset: 3px;
  opacity: .5;
  background:
    linear-gradient(90deg, var(--blue) 2px, transparent 2px) 0 0 / 8px 8px,
    linear-gradient(var(--gold) 2px, transparent 2px) 0 0 / 8px 8px;
  mask: repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 7px);
}

.clock-panel > *:not(.maze) { position: relative; padding: 1px 4px; background: #01040a; }
.clock-panel time { color: var(--gold); font-size: 15px; }

.hero-panel {
  position: relative;
  min-height: 340px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--blue-pale);
  background:
    linear-gradient(transparent 62%, rgba(11,36,73,.35)),
    #00030a;
  transition: box-shadow .08s steps(1), border-color .08s steps(1);
}
.hero-panel.pulse-now { border-color: var(--gold); box-shadow: inset 0 0 28px rgba(232,184,62,.22), 0 0 10px rgba(232,184,62,.45); }

.hero-grid {
  position: absolute;
  inset: 55% -20% -40%;
  opacity: .55;
  background:
    linear-gradient(rgba(73,127,194,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,127,194,.55) 1px, transparent 1px);
  background-size: 28px 16px;
  transform: perspective(170px) rotateX(55deg);
  transform-origin: center top;
  animation: grid-drift 4s linear infinite;
}

.radar-sweep {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 49%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  opacity: .18;
  background: conic-gradient(from 0deg, transparent 0 315deg, rgba(232,184,62,.08) 336deg, rgba(103,170,255,.72) 356deg, transparent 360deg);
  transform: translate(-50%, -50%);
  animation: radar-spin 8s linear infinite;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 49%;
  border: 1px dashed var(--blue-bright);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.orbit--one { width: 86%; height: 72px; animation: orbit-turn 13s linear infinite; }
.orbit--two { width: 52%; height: 190px; border-color: rgba(232,184,62,.5); animation: orbit-turn 18s linear infinite reverse; }

.signal-particles { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.signal-particles i { position: absolute; left: var(--x); bottom: -5px; width: 3px; height: 3px; background: var(--blue-bright); box-shadow: 4px 0 0 rgba(232,184,62,.45); animation: particle-rise var(--speed) steps(12) infinite; animation-delay: var(--delay); }
.signal-particles i:nth-child(1) { --x: 8%; --speed: 7s; --delay: -1s; }
.signal-particles i:nth-child(2) { --x: 16%; --speed: 9s; --delay: -5s; }
.signal-particles i:nth-child(3) { --x: 25%; --speed: 6s; --delay: -3s; }
.signal-particles i:nth-child(4) { --x: 34%; --speed: 8s; --delay: -7s; }
.signal-particles i:nth-child(5) { --x: 43%; --speed: 10s; --delay: -2s; }
.signal-particles i:nth-child(6) { --x: 49%; --speed: 6.5s; --delay: -4s; }
.signal-particles i:nth-child(7) { --x: 56%; --speed: 9.5s; --delay: -8s; }
.signal-particles i:nth-child(8) { --x: 64%; --speed: 7.5s; --delay: -3.5s; }
.signal-particles i:nth-child(9) { --x: 72%; --speed: 11s; --delay: -6s; }
.signal-particles i:nth-child(10) { --x: 81%; --speed: 8.5s; --delay: -1.5s; }
.signal-particles i:nth-child(11) { --x: 89%; --speed: 6.8s; --delay: -5.5s; }
.signal-particles i:nth-child(12) { --x: 95%; --speed: 10.5s; --delay: -7.5s; }

.core {
  position: absolute;
  left: 50%;
  bottom: 31px;
  width: 150px;
  height: 230px;
  transform: translateX(-50%);
  filter: drop-shadow(8px 8px 0 #07162c);
  z-index: 3;
  animation: core-float 3.2s steps(8) infinite;
}

.core::before,
.core::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 4px; width: 150px; height: 26px; border: 1px solid var(--gold); border-radius: 50%; transform: translateX(-50%) scale(.35); opacity: 0; animation: beacon-ring 3s steps(10) infinite; }
.core::after { border-color: var(--blue-bright); animation-delay: -1.5s; }

.core__antenna {
  position: absolute;
  left: 71px;
  top: 0;
  width: 8px;
  height: 55px;
  border: 1px solid var(--gold-pale);
  background: #071329;
  animation: antenna-charge 1.6s steps(2) infinite;
}

.core__antenna::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 20px;
  height: 8px;
  background: var(--gold);
  box-shadow: 0 16px 0 var(--blue-bright);
}
.core__antenna::after { content: ""; position: absolute; left: -3px; top: -13px; width: 12px; height: 3px; background: var(--gold-pale); box-shadow: 0 0 7px var(--gold); animation: beacon-blink .8s steps(1) infinite; }

.core__crown { position: absolute; top: 49px; left: 15px; width: 120px; height: 42px; }
.core__crown i { position: absolute; bottom: 0; width: 34px; height: 42px; border: 2px solid var(--blue-pale); background: #020712; }
.core__crown i:nth-child(1) { left: 0; animation: module-flicker 4.3s steps(1) infinite; }
.core__crown i:nth-child(2) { left: 43px; height: 55px; border-color: var(--gold); animation: module-flicker 3.1s steps(1) infinite reverse; }
.core__crown i:nth-child(3) { right: 0; animation: module-flicker 5.2s steps(1) infinite; }

.core__body {
  position: absolute;
  left: 25px;
  top: 87px;
  width: 100px;
  height: 111px;
  border: 3px double var(--blue-pale);
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(40,88,150,.28) 8px 10px),
    #01040b;
  overflow: hidden;
}
.core__body::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 3px; background: var(--blue-bright); box-shadow: 0 0 5px var(--blue-bright); opacity: .65; animation: body-scan 2.4s steps(20) infinite; }

.core__eye {
  position: absolute;
  left: 29px;
  top: 18px;
  width: 38px;
  height: 20px;
  border: 2px solid var(--gold);
  background: #000;
  box-shadow: inset 10px 0 0 #174f9a, inset -10px 0 0 #174f9a;
}
.core__eye::before { content: ""; position: absolute; top: 3px; left: 3px; width: 5px; height: 10px; background: var(--gold-pale); box-shadow: 0 0 5px var(--gold); animation: eye-scan 1.8s steps(6) infinite alternate; }

.core__slot { position: absolute; left: 15px; bottom: 17px; width: 65px; height: 23px; overflow: hidden; border: 1px solid var(--blue-bright); }
.core__slot::before { content: "1011010010110100"; position: absolute; left: 3px; top: 6px; color: var(--blue-bright); font-size: 5px; letter-spacing: 1px; white-space: nowrap; animation: slot-data 2s steps(6) infinite; }
.core__base { position: absolute; left: 0; bottom: 0; width: 150px; height: 36px; border: 2px solid var(--gold); background: #020711; box-shadow: inset 0 8px 0 #071a35; animation: base-charge 3s steps(2) infinite; }

.hero-copy {
  position: absolute;
  left: 20px;
  top: 25px;
  color: var(--blue-bright);
}

.hero-copy, .coordinates { z-index: 4; }
.hero-copy strong { display: block; margin-top: 12px; color: #fff; font-size: 15px; line-height: 1.35; text-shadow: 2px 2px var(--blue); }
.coordinates { position: absolute; right: 15px; bottom: 13px; color: var(--gold); line-height: 1.5; text-align: right; }
.coordinates span { color: var(--gold-pale); display: inline-block; min-width: 14px; }

.data-strip {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 9px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  color: var(--muted);
  background: repeating-linear-gradient(0deg, #01040a 0 4px, #0d1b30 4px 5px);
  white-space: nowrap;
}

.down-arrow { display: grid; width: 40px; align-self: stretch; place-items: center; border-right: 1px solid var(--line); color: var(--gold); font-size: 20px; background: #020713; }

.lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 39%) 52px minmax(0, 1fr);
  grid-template-rows: minmax(326px, auto) auto;
  gap: 5px;
  margin-top: 5px;
}

.kanji-card,
.vertical-label,
.info-card {
  min-height: 326px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(23,79,154,.055) 4px 5px), #01040a;
}
.kanji-card { position: relative; display: flex; flex-direction: column; transform: translateY(1px); box-shadow: -3px 3px 0 #061329; }
.kanji-card::after { content: "WORK IN PROGRESS // DO NOT POWER OFF"; position: absolute; right: -63px; top: 92px; color: rgba(103,170,255,.1); font-size: 6px; letter-spacing: .14em; transform: rotate(90deg); }
.construction-header { display: flex; justify-content: space-between; gap: 6px; padding: 5px 7px; border-bottom: 1px solid #31567f; color: #526d8e; font-size: 6px; background: repeating-linear-gradient(-45deg, #020817 0 5px, #071329 5px 6px); }
.construction-header b { color: var(--gold); animation: blink 1.2s steps(1) infinite; }
.kanji { padding: 11px 5px 5px; color: #fff; font: 900 55px/1 sans-serif; text-align: center; text-shadow: 6px 5px 0 var(--blue), -2px -2px 0 var(--gold); animation: construction-kanji 5.2s steps(1) infinite; }
.kanji-card h2 { margin: 4px 6px; padding: 7px 4px; border: 1px solid var(--blue); color: var(--gold-pale); font-size: 13px; text-align: center; background: rgba(23,79,154,.09); }
.kanji-card .construction-copy { margin: 3px 7px 5px; padding: 0; border: 0; color: #7188a8; font-size: 7px; line-height: 1.45; text-align: center; }
.construction-meter { position: relative; height: 22px; margin: 2px 7px 6px; overflow: hidden; border: 1px solid #31567f; background: #000; }
.construction-meter i { position: absolute; inset: 3px; width: 73%; background: repeating-linear-gradient(-45deg, var(--gold) 0 5px, var(--gold-pale) 5px 7px, var(--blue) 7px 12px); animation: construction-meter 3.4s steps(9) infinite; }
.construction-meter span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #fff; font-size: 6px; text-shadow: 2px 2px #000; }
.construction-stats { margin: 0 7px; border: 1px solid #294b76; }
.construction-stats p { display: flex; justify-content: space-between; margin: 0; padding: 4px 5px; border: 0; border-bottom: 1px dotted #263f62; color: #536c8c; font-size: 7px; }
.construction-stats p:last-child { border-bottom: 0; }
.construction-stats b { color: var(--blue-pale); font-weight: normal; }
.kanji-card > footer { display: flex; justify-content: space-between; gap: 5px; margin-top: auto; padding: 5px 7px; border-top: 1px solid #31567f; color: #526882; font-size: 6px; background: #000; }
.kanji-card > footer span { color: var(--gold); }

.vertical-label { position: relative; display: grid; grid-template-rows: 1fr auto auto; place-items: center; border-style: dashed; color: var(--gold); background: repeating-linear-gradient(90deg, #01040a 0 8px, #061329 8px 9px); transform: translateY(-2px); }
.vertical-label::before, .vertical-label::after { content: ""; position: absolute; left: 50%; width: 1px; height: 34px; background: var(--blue-bright); opacity: .45; }
.vertical-label::before { top: 0; }
.vertical-label::after { bottom: 0; }
.vertical-label span { font-size: 22px; line-height: 1.05; text-shadow: 2px 2px var(--blue); }
.vertical-label i { display: block; width: 8px; height: 8px; margin: 3px; border: 1px solid var(--blue-pale); background: var(--blue); box-shadow: 0 0 6px rgba(103,170,255,.45); animation: visitor-node 1.8s steps(3) infinite; }
.vertical-label i:nth-of-type(2) { animation-delay: -.6s; background: var(--gold); }
.vertical-label i:nth-of-type(3) { animation-delay: -1.2s; }
.vertical-label b { margin-bottom: 39px; color: #577394; font-size: 5px; line-height: 1.5; text-align: center; writing-mode: vertical-rl; }

.info-card { padding: 9px; transform: translateX(2px); box-shadow: 3px 3px 0 #061329; }
.info-card h2 { margin: 0; color: #fff; font-size: 18px; line-height: 1; text-shadow: 3px 3px var(--blue); }
.info-card .lead { margin: 7px -9px 7px; padding: 6px 9px; color: var(--black); font-size: 9px; font-weight: bold; background: repeating-linear-gradient(90deg, var(--gold) 0 16px, var(--gold-pale) 16px 17px); }
.beacon-card { position: relative; overflow: hidden; }
.beacon-card::before { content: ""; position: absolute; z-index: 0; right: -33px; top: 71px; width: 130px; height: 130px; border: 1px dashed rgba(103,170,255,.16); border-radius: 50%; box-shadow: 0 0 0 25px rgba(23,79,154,.025), 0 0 0 51px rgba(23,79,154,.02); animation: beacon-dossier-ring 12s linear infinite; }
.beacon-card::after { content: "TX"; position: absolute; right: -5px; top: 50px; color: rgba(103,170,255,.065); font-size: 76px; font-weight: 900; pointer-events: none; }
.beacon-card-header { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 7px; }
.beacon-card-header span { color: var(--gold); font-size: 6px; animation: blink 1.1s steps(1) infinite; }
.beacon-console { position: relative; z-index: 1; border: 1px solid #315d96; }
.beacon-console p { display: flex; justify-content: space-between; margin: 0; padding: 3px 5px; border-bottom: 1px dotted #29466f; font-size: 8px; }
.beacon-console p:last-child { border-bottom: 0; }
.beacon-console span { color: var(--muted); }
.beacon-console b { color: var(--blue-pale); font-weight: normal; }
.beacon-console .beacon-online { color: var(--gold); animation: blink 1.3s steps(1) infinite; }
.beacon-telemetry { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 5px; }
.beacon-telemetry p { margin: 0; padding: 4px 3px; border: 1px solid #294b76; text-align: center; background: rgba(0,3,10,.75); }
.beacon-telemetry span { display: block; margin-bottom: 2px; color: #506783; font-size: 5px; }
.beacon-telemetry b { color: var(--gold-pale); font-size: 7px; font-weight: normal; }
.beacon-wave { position: relative; z-index: 1; display: flex; height: 25px; align-items: center; justify-content: center; gap: 3px; margin-top: 5px; border-block: 1px solid #193a66; }
.beacon-wave i { display: block; width: 3px; height: 4px; background: var(--blue-bright); animation: beacon-wave 1.35s steps(4) infinite; }
.beacon-wave i:nth-child(2), .beacon-wave i:nth-child(8) { animation-delay: -.15s; }
.beacon-wave i:nth-child(3), .beacon-wave i:nth-child(7) { animation-delay: -.3s; background: var(--gold); }
.beacon-wave i:nth-child(4), .beacon-wave i:nth-child(6) { animation-delay: -.45s; }
.beacon-wave i:nth-child(5) { animation-delay: -.6s; background: var(--gold-pale); }
.beacon-transmission { position: relative; z-index: 1; overflow: hidden; margin-top: 5px; padding: 4px 5px; border: 1px solid #233f65; color: #526d8e; font-size: 6px; line-height: 1.5; background: #000; }
.beacon-transmission span { display: block; white-space: nowrap; }
.beacon-transmission span:first-child { color: var(--blue-bright); animation: beacon-tx-shift 3.2s steps(2) infinite; }
.beacon-transmission span:last-child { color: var(--gold); }
.beacon-message { position: relative; z-index: 1; margin: 6px 0 0; color: var(--muted); font-size: 7px; line-height: 1.35; text-align: center; }
.beacon-message em { color: var(--gold-pale); font-style: normal; }

.lower-grid-footer { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; overflow: hidden; border: 1px solid #31567f; padding: 6px 8px; color: #5b7290; font-size: 6px; background: repeating-linear-gradient(90deg, #01040a 0 12px, #061329 12px 13px); box-shadow: 3px 3px 0 #061329; }
.lower-grid-footer span { color: var(--gold); white-space: nowrap; }
.lower-grid-footer p { margin: 0; line-height: 1.45; }
.lower-grid-footer b { color: var(--blue-pale); font-weight: normal; white-space: nowrap; animation: listener-present 2.4s steps(1) infinite; }

.side-panel a {
  display: block;
  padding: 7px 5px;
  border-bottom: 1px solid #425a7d;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: repeating-linear-gradient(-45deg, #02050b 0 4px, #071228 4px 5px);
}

.side-panel a:hover { color: var(--gold); background-color: #0a1d3d; }

.data-terminal { position: relative; overflow: hidden; }
.data-screen {
  position: relative;
  margin: 5px;
  overflow: hidden;
  border: 1px solid #2e609f;
  background: #01040a;
}
.terminal-head { display: flex; justify-content: space-between; padding: 4px 5px; border-bottom: 1px solid #2e609f; color: var(--gold); font-size: 8px; background: #071329; }
.terminal-stream { height: 76px; overflow: hidden; padding: 4px 5px; color: var(--blue-bright); font-size: 8px; line-height: 1.5; background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(54,106,175,.12) 11px 12px); }
.terminal-stream span { display: block; height: 12px; white-space: pre; animation: terminal-row .42s steps(2); }
.terminal-stream span:nth-last-child(-n+2) { color: var(--gold-pale); }
.data-bus { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; height: 14px; align-items: end; padding: 2px 5px; border-block: 1px solid #1a3c6b; }
.data-bus i { display: block; height: 3px; background: var(--blue); animation: bus-pulse 1.25s steps(3) infinite; }
.data-bus i:nth-child(2n) { animation-delay: -.35s; }
.data-bus i:nth-child(3n) { animation-delay: -.8s; background: var(--gold); }
.memory-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 5px; }
.memory-map b { display: block; height: 9px; border: 1px solid #214b84; background: #071329; animation: memory-write 2s steps(1) infinite; }
.memory-map b:nth-child(3n+1) { animation-delay: -.3s; }
.memory-map b:nth-child(3n+2) { animation-delay: -.9s; }
.memory-map b:nth-child(4n) { animation-delay: -1.5s; }
.data-readout { margin: 0 5px 5px; border: 1px solid #314c71; }
.data-readout p { display: flex; justify-content: space-between; margin: 0; padding: 3px 5px; border-bottom: 1px dotted #233b5d; font-size: 8px; }
.data-readout p:last-child { border-bottom: 0; }
.data-readout span { color: var(--muted); }
.data-readout b { color: var(--gold-pale); font-weight: normal; }
.process-line { display: flex; align-items: center; gap: 5px; padding: 5px; border-top: 1px solid var(--line); color: var(--blue-bright); font-size: 8px; white-space: nowrap; }
.process-line i { width: 6px; height: 6px; flex: 0 0 auto; background: var(--gold); box-shadow: 0 0 5px var(--gold); animation: blink .7s steps(1) infinite; }
.update-log { overflow: hidden; padding-bottom: 0; transform: translateX(2px); }
.update-log h2 { display: flex; justify-content: space-between; padding-inline: 7px; }
.update-log h2 small { color: var(--blue-bright); font-size: 6px; font-weight: normal; animation: blink 1.5s steps(1) infinite; }
.update-log-scroll { max-height: 236px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--gold) #061329; scrollbar-width: thin; }
.update-log-scroll:focus-visible { outline: 1px dashed var(--gold); outline-offset: -3px; }
.update-log-scroll::-webkit-scrollbar { width: 8px; }
.update-log-scroll::-webkit-scrollbar-track { border-left: 1px solid #274568; background: #020817; }
.update-log-scroll::-webkit-scrollbar-thumb { border: 2px solid #020817; background: var(--gold); }
.update-log-scroll p { position: relative; margin: 7px; padding-left: 6px; color: var(--blue-pale); font-size: 9px; line-height: 1.25; }
.update-log-scroll p::before { content: ""; position: absolute; left: -2px; top: 2px; bottom: 2px; width: 2px; background: #193b69; }
.update-log-scroll p:nth-of-type(2n)::before { background: var(--gold); }
.update-log b { color: var(--gold); }
.update-log footer { padding: 4px 6px; border-top: 1px solid #314c71; color: #435b79; font-size: 6px; text-align: right; background: #000; }

.operator-profile { align-self: start; transform: translateX(-1px); }
.operator-portrait { margin: 6px; border: 1px solid #345a89; background: #00030a; box-shadow: 3px 3px 0 #000; }
.operator-portrait-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-bottom: 1px solid #345a89; background: #020817; isolation: isolate; }
.operator-portrait-frame::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: .23;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.72) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.operator-portrait-frame::after {
  content: "PORTRAIT_RX // 86%";
  position: absolute;
  z-index: 4;
  right: 4px;
  bottom: 4px;
  padding: 2px 3px;
  border: 1px solid #476b95;
  color: var(--gold-pale);
  font-size: 6px;
  letter-spacing: .08em;
  background: rgba(0,3,10,.86);
}
.operator-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: saturate(.76) contrast(1.2) brightness(.82) sepia(.06); animation: operator-portrait-dropout 8.2s steps(1) infinite; }
.operator-signal-tear { position: absolute; z-index: 5; left: -8%; top: 31%; width: 116%; height: 3px; opacity: .7; background: var(--gold); box-shadow: 22px 4px 0 #000, -30px -3px 0 var(--blue-bright); pointer-events: none; animation: operator-signal-tear 5.6s steps(1) infinite; }
.operator-portrait figcaption { display: grid; gap: 3px; padding: 6px; color: #536d8d; font-size: 7px; line-height: 1.25; background: repeating-linear-gradient(90deg, #01040a 0 7px, #071329 7px 8px); }
.operator-portrait figcaption b { margin-bottom: 2px; color: var(--gold); font-size: 9px; }
.operator-portrait figcaption i { color: var(--blue-bright); font-style: normal; animation: blink 1.15s steps(1) infinite; }

.neighbors-view,
.signal-view,
.void-view,
.games-view,
.lost-media-view {
  grid-column: 2 / 4;
  min-width: 0;
  border: 1px solid var(--blue-pale);
  background: #01040a;
  box-shadow: 8px 8px 0 #06142a;
  animation: panel-boot .35s steps(4);
}
.neighbors-view::before, .signal-view::before, .void-view::before, .games-view::before, .lost-media-view::before { content: "CONNECTION UNSTABLE // DO NOT REFRESH"; display: block; padding: 3px 6px; border-bottom: 1px dotted #274b78; color: #3d5d84; font-size: 7px; text-align: right; }

.lost-media-view { position: relative; min-height: 650px; overflow: hidden; }
.lost-media-view::after { content: "NO MEDIA // NO MEDIA // ARCHIVE SLOT EMPTY // NO MEDIA"; position: absolute; left: -20px; right: -20px; top: 56%; height: 10px; overflow: hidden; color: rgba(232,184,62,.16); font-size: 7px; letter-spacing: .34em; white-space: nowrap; transform: rotate(-1deg); pointer-events: none; animation: lost-media-jump 4.2s steps(1) infinite; }
.lost-media-header h1 { color: var(--gold-pale); text-shadow: 3px 3px 0 #725718; }
.lost-media-status { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-bottom: 1px solid #304c74; color: #526984; font-size: 8px; }
.lost-media-status b { color: var(--gold); }
.lost-media-terminal { position: relative; display: grid; min-height: 500px; place-items: center; align-content: center; padding: 24px; overflow: hidden; text-align: center; background: radial-gradient(circle at center, rgba(20,64,119,.24), transparent 42%), repeating-linear-gradient(0deg, transparent 0 4px, rgba(38,78,132,.12) 4px 5px), #00030a; }
.lost-media-terminal::before { content: ""; position: absolute; inset: 12% 8%; border: 1px dashed #233f64; box-shadow: inset 0 0 50px #000; pointer-events: none; }
.lost-media-code { position: relative; z-index: 2; color: var(--blue-bright); font-size: 9px; letter-spacing: .24em; }
.lost-media-terminal strong { position: relative; z-index: 2; margin: 13px 0 8px; color: #fff; font-size: clamp(30px, 7vw, 62px); line-height: .82; text-shadow: 5px 3px 0 var(--blue), -3px 0 0 #765b18; animation: lost-media-pulse 3.8s steps(1) infinite; }
.lost-media-terminal p { position: relative; z-index: 2; margin: 8px 0 16px; color: var(--gold-pale); font-size: 10px; }
.lost-media-terminal code { position: relative; z-index: 2; display: block; min-width: min(430px, 90%); padding: 10px; border: 1px solid #34557d; color: #526c8d; font-size: 8px; line-height: 1.7; text-align: left; background: rgba(1,4,10,.9); }
.lost-media-footer { display: flex; justify-content: space-between; gap: 8px; padding: 7px 9px; border-top: 1px solid #304c74; color: #536985; font-size: 7px; background: #000; }
.lost-media-footer span:last-child { color: var(--gold); }

.signal-view { animation-name: signal-boot; }
.signal-header h1 { color: var(--gold-pale); text-shadow: 3px 3px 0 #725718; }
.signal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 6px; padding: 6px; }
.cbox-terminal { min-height: 460px; border: 1px solid var(--blue-pale); background: #00030a; }
.cbox-terminal > header { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid #315d96; color: var(--gold); font-size: 9px; background: repeating-linear-gradient(90deg, #020817 0 8px, #06152d 8px 9px); }
.cbox-slot { position: relative; display: grid; min-height: 430px; place-items: center; overflow: hidden; background: linear-gradient(rgba(44,94,159,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(44,94,159,.13) 1px, transparent 1px), #00030a; background-size: 12px 12px; }
.cbox-slot::before { content: ""; position: absolute; inset: 0; opacity: .24; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--blue) 3px 4px); pointer-events: none; }
.cbox-slot iframe { position: relative; z-index: 2; display: block; width: 100% !important; min-height: 430px; border: 0; background: #00030a; }
.cbox-offline { position: relative; z-index: 1; width: min(310px, calc(100% - 30px)); padding: 24px 12px; border: 1px dashed #315d96; text-align: center; background: rgba(1,4,10,.92); box-shadow: 7px 7px 0 #061329; }
.cbox-offline::before { content: "[ ! ]"; display: block; margin-bottom: 12px; color: var(--gold); font-size: 24px; }
.cbox-offline strong { color: #fff; font-size: 15px; text-shadow: 2px 2px var(--blue); }
.cbox-offline p { margin: 15px 0; color: var(--muted); line-height: 1.5; }
.cbox-offline span { color: var(--gold); font-size: 8px; animation: blink 1.2s steps(1) infinite; }
.signal-info { display: grid; align-content: start; gap: 6px; }
.signal-info section { border: 1px solid #42638d; background: #01040a; }
.signal-info h2 { margin: 0; padding: 5px; border-bottom: 1px solid #42638d; color: var(--gold); font-size: 9px; text-align: center; background: #061329; }
.signal-info p { margin: 0; padding: 8px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.lore-panel { position: relative; overflow: hidden; }
.lore-panel::after { content: "01001101"; position: absolute; right: -6px; bottom: 3px; color: rgba(103,170,255,.09); font-size: 24px; writing-mode: vertical-rl; }
.signal-info .lore-copy { color: var(--blue-pale); }
.lore-route { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 3px 7px; padding: 7px 2px; border-block: 1px dotted #294b77; font-size: 6px; }
.lore-route span { color: var(--muted); }
.lore-route b { padding: 3px; border: 1px solid var(--gold); color: var(--gold-pale); background: #061329; }
.lore-route i { width: 12px; height: 1px; background: var(--blue-bright); box-shadow: 4px 0 0 var(--gold); animation: route-pulse 1.2s steps(3) infinite; }
.rules-panel ul { margin: 0; padding: 7px 8px 7px 21px; color: var(--blue-pale); font-size: 8px; line-height: 1.65; }
.rules-panel li::marker { color: var(--gold); content: "> "; }
.signal-info .signal-warning { margin: 0 6px 6px; padding: 7px; border: 1px dashed var(--gold); color: var(--gold-pale); background: #090b0d; }
.signal-warning b { color: var(--gold); }
.signal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.signal-footer span:last-child { color: var(--gold); }

.neighbors-header {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(23,79,154,.17) 8px 9px),
    #020817;
}
.neighbors-header span { color: var(--blue-bright); font-size: 8px; letter-spacing: .18em; }
.neighbors-header h1 { margin: 3px 0 0; color: #fff; font-size: 22px; text-shadow: 3px 3px 0 var(--blue); }
.neighbors-header button,
.copy-box button {
  border: 1px solid var(--gold);
  border-radius: 0;
  padding: 7px 9px;
  color: var(--gold-pale);
  font: bold 9px "Lucida Console", monospace;
  background: #061329;
  cursor: pointer;
}
.neighbors-header button:hover,
.copy-box button:hover { color: #000; background: var(--gold); }

.mesh-statusbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px solid #304c74;
  color: var(--muted);
  font-size: 8px;
}
.mesh-statusbar b { color: var(--gold); }

.mesh-field {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  background:
    linear-gradient(rgba(44,94,159,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,94,159,.13) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(23,79,154,.2), transparent 48%),
    #00030a;
  background-size: 16px 16px, 16px 16px, auto, auto;
}
.mesh-field::before,
.mesh-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 115%;
  background: linear-gradient(transparent, rgba(103,170,255,.35), transparent);
  transform: translate(-50%, -50%);
}
.mesh-field::after { transform: translate(-50%, -50%) rotate(90deg); }
.mesh-ring { position: absolute; left: 50%; top: 47%; border: 1px dashed #24568f; border-radius: 50%; transform: translate(-50%, -50%); }
.mesh-ring--outer { width: 430px; height: 300px; }
.mesh-ring--inner { width: 225px; height: 170px; border-color: rgba(232,184,62,.55); }
.mesh-sweep {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 215px;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold), transparent);
  animation: mesh-scan 5s linear infinite;
}
.mesh-center {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 47%;
  display: grid;
  width: 144px;
  min-height: 93px;
  place-items: center;
  padding: 7px;
  border: 1px solid var(--gold);
  color: var(--blue-bright);
  background: #020817;
  box-shadow: 0 0 0 3px #020817, 0 0 0 4px var(--blue), 8px 8px 0 rgba(0,0,0,.7);
  transform: translate(-50%, -50%);
}
.mesh-center::before { content: ""; position: absolute; inset: -8px; border: 1px dashed #234f88; animation: node-pulse 1.5s steps(2) infinite; }
.mesh-center span { color: var(--gold); font-size: 8px; }
.mesh-center img { display: block; width: 88px; height: 31px; image-rendering: pixelated; }
.mesh-center b { color: var(--blue-pale); font-size: 8px; }

.mesh-slot {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 40px;
  place-items: center;
  border: 1px dashed #294d7d;
  color: #3f5d82;
  font-size: 7px;
  text-align: center;
  background: #01050d;
}
.mesh-slot::before { content: "X"; position: absolute; left: 3px; top: 2px; color: #604f27; }
.mesh-slot--one { left: 10%; top: 17%; }
.mesh-slot--two { right: 10%; top: 18%; }
.mesh-slot--three { right: 15%; bottom: 15%; }
.mesh-slot--four { left: 14%; bottom: 14%; }
.mesh-empty { position: absolute; left: 50%; bottom: 15px; margin: 0; color: var(--gold); font-size: 10px; letter-spacing: .12em; transform: translateX(-50%); white-space: nowrap; animation: blink 1.5s steps(1) infinite; }

.connect-panel { border-top: 1px solid var(--blue-pale); background: #01040a; }
.connect-panel > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 9px; border-bottom: 1px solid #314c71; }
.connect-panel > header span { color: var(--gold); font-weight: bold; }
.connect-panel > header small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.connect-panel > header .connect-state { padding: 3px 5px; border: 1px solid #295e9d; color: var(--blue-bright); font-size: 8px; }
.connect-content { display: grid; grid-template-columns: 190px 1fr; gap: 8px; padding: 8px; }
.connect-preview { display: grid; min-height: 95px; place-items: center; align-content: center; gap: 8px; border: 1px solid #314c71; background: repeating-linear-gradient(-45deg, #02050b 0 5px, #071329 5px 6px); }
.connect-preview img { width: 88px; height: 31px; image-rendering: pixelated; }
.connect-preview span { color: var(--muted); font-size: 8px; }
.copy-box { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.copy-box textarea { grid-column: 1 / -1; width: 100%; min-height: 65px; resize: none; border: 1px solid #315d96; border-radius: 0; padding: 6px; color: var(--blue-pale); font: 8px/1.4 "Lucida Console", monospace; background: #00030a; outline: none; }
.copy-box textarea:focus { border-color: var(--gold); }
.copy-box > span { align-self: center; color: var(--muted); font-size: 8px; }

.games-view {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(23,79,154,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,79,154,.045) 1px, transparent 1px),
    #01040a;
  background-size: 8px 8px;
  animation: arcade-boot .5s steps(6);
}
.games-view::before { content: "MAXX ARCADE BIOS // MEMORY CHECK: PARTIAL // 6 CARTRIDGES DETECTED // ALL PORTS LIVE"; }
.games-view::after { content: "INSERT COIN // INSERT COIN // SIGNAL ACCEPTED // INSERT COIN"; position: absolute; left: -8px; right: -8px; bottom: 104px; height: 9px; overflow: hidden; color: rgba(103,170,255,.11); font-size: 7px; letter-spacing: .55em; white-space: nowrap; transform: rotate(-1deg); pointer-events: none; }

.games-header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 15px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(23,79,154,.17) 8px 9px), #020817; }
.games-header span { color: var(--blue-bright); font-size: 8px; letter-spacing: .18em; }
.games-header h1 { margin: 3px 0; color: #fff; font-size: 28px; line-height: .9; letter-spacing: -.07em; text-shadow: 4px 3px 0 var(--blue), -2px -1px 0 #725718; }
.games-header small { color: var(--gold); font-size: 7px; letter-spacing: .1em; }
.games-header button { border: 1px solid var(--gold); border-radius: 0; padding: 7px 9px; color: var(--gold-pale); font: bold 9px "Lucida Console", monospace; background: #061329; }
.games-header button:hover { color: #000; background: var(--gold); }

.games-statusbar { display: flex; justify-content: space-between; gap: 9px; padding: 5px 8px; border-bottom: 1px solid #304c74; color: var(--muted); font-size: 8px; background: #00030a; }
.games-statusbar b { color: var(--gold); }
.games-statusbar span:last-child { color: var(--blue-bright); }

.game-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px; }
.game-card { position: relative; display: grid; min-width: 0; grid-template-rows: auto 128px auto auto auto; gap: 5px; overflow: hidden; border: 1px solid #45658e; border-radius: 0; padding: 7px; color: var(--blue-pale); font: inherit; text-align: left; background: #01050e; box-shadow: 4px 4px 0 #06152d; }
.game-card::before { content: ""; position: absolute; z-index: 4; left: 0; right: 0; top: -3px; height: 3px; opacity: 0; background: var(--gold); box-shadow: 0 2px 0 var(--blue); pointer-events: none; }
.game-card::after { content: "SELECT"; position: absolute; right: 6px; top: 5px; color: #46617f; font-size: 6px; }
.game-card:hover, .game-card.is-selected { border-color: var(--gold); color: #fff; background: #030a18; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #06152d; }
.game-card:hover::before, .game-card.is-selected::before { opacity: .7; animation: game-card-scan 1.7s steps(5) infinite; }
.game-card.is-selected::after { content: "LOADED"; color: var(--gold); animation: blink 1.1s steps(1) infinite; }
.game-number { color: #4e698c; font-size: 7px; letter-spacing: .1em; }
.game-card > strong { color: #fff; font-size: 15px; letter-spacing: -.04em; text-shadow: 2px 2px 0 var(--blue); }
.game-card.is-selected > strong { color: var(--gold-pale); text-shadow: 2px 2px 0 #735714; }
.game-card > small { min-height: 18px; color: #7086a5; font-size: 7px; line-height: 1.4; }
.game-state { padding-top: 5px; border-top: 1px dotted #2d476c; color: var(--gold); font-size: 7px; text-align: right; }

.game-thumbnail { position: relative; display: block; overflow: hidden; border: 1px solid #294c78; background-color: #00030a; box-shadow: inset 0 0 20px #000; }
.game-thumbnail::after { content: ""; position: absolute; z-index: 8; inset: 0; opacity: .14; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--blue-bright) 3px 4px); pointer-events: none; }

.poker-thumbnail { background: radial-gradient(ellipse at center, #071a35 0 38%, #020712 39% 62%, #000 63%); }
.poker-thumbnail::before { content: "OPPONENT://NULL"; position: absolute; left: 7px; bottom: 5px; color: #36557b; font-size: 6px; }
.pixel-card { position: absolute; z-index: 3; display: block; width: 46px; height: 65px; padding: 5px; border: 2px solid var(--blue-pale); color: var(--gold); font: bold 18px/1 "Lucida Console", monospace; background: #061329; box-shadow: 4px 4px 0 #000; }
.pixel-card--back { left: calc(50% - 43px); top: 27px; color: #426792; text-align: center; background: repeating-linear-gradient(45deg, #061329 0 4px, #174f9a 4px 6px); transform: rotate(-8deg); }
.pixel-card--front { left: calc(50% - 4px); top: 20px; transform: rotate(7deg); }
.pixel-card--front span { position: absolute; right: 5px; bottom: 5px; color: var(--blue-bright); font-size: 23px; }
.table-eye { position: absolute; left: 50%; top: 7px; width: 34px; height: 9px; border: 1px solid #254874; background: #000; transform: translateX(-50%); }
.table-eye::after { content: ""; position: absolute; left: 5px; top: 2px; width: 8px; height: 3px; background: var(--gold); animation: poker-eye 2.1s steps(3) infinite; }

.roulette-thumbnail { background: linear-gradient(rgba(23,79,154,.1) 1px, transparent 1px), #00030a; background-size: 12px 12px; }
.roulette-wheel { position: absolute; z-index: 2; left: 50%; top: 50%; width: 94px; height: 94px; border: 5px solid #071a35; border-radius: 50%; background: repeating-conic-gradient(var(--gold) 0 12deg, #071a35 12deg 24deg, var(--blue) 24deg 36deg, #000 36deg 48deg); box-shadow: 0 0 0 2px var(--blue-pale), 0 0 0 7px #020817; transform: translate(-50%, -50%); animation: roulette-idle 8s steps(24) infinite; }
.roulette-wheel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border: 2px solid var(--gold); border-radius: 50%; background: #000; transform: translate(-50%, -50%); }
.roulette-pointer { position: absolute; z-index: 5; left: calc(50% - 5px); top: 7px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 15px solid var(--blue-pale); filter: drop-shadow(2px 2px 0 #000); }
.roulette-thumbnail > span { position: absolute; z-index: 6; left: 50%; top: 50%; color: var(--gold-pale); font-size: 8px; transform: translate(-50%, -50%); }

.snake-thumbnail { background: linear-gradient(rgba(103,170,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(103,170,255,.12) 1px, transparent 1px), #00030a; background-size: 13px 13px; }
.snake-thumbnail i { position: absolute; z-index: 3; width: 12px; height: 12px; border: 1px solid #9ecaff; background: var(--blue); box-shadow: inset 2px 2px #67aaff; animation: snake-static 2.8s steps(1) infinite; }
.snake-thumbnail i:nth-child(1) { left: 23%; top: 29%; background: var(--gold); }
.snake-thumbnail i:nth-child(2) { left: calc(23% + 13px); top: 29%; }
.snake-thumbnail i:nth-child(3) { left: calc(23% + 26px); top: 29%; }
.snake-thumbnail i:nth-child(4) { left: calc(23% + 39px); top: 29%; }
.snake-thumbnail i:nth-child(5) { left: calc(23% + 39px); top: calc(29% + 13px); }
.snake-thumbnail i:nth-child(6) { left: calc(23% + 39px); top: calc(29% + 26px); }
.snake-thumbnail i:nth-child(7) { left: calc(23% + 52px); top: calc(29% + 26px); }
.snake-thumbnail i:first-child::before, .snake-thumbnail i:first-child::after { content: ""; position: absolute; top: 2px; width: 2px; height: 2px; background: #000; }
.snake-thumbnail i:first-child::before { left: 2px; }
.snake-thumbnail i:first-child::after { right: 2px; }
.snake-thumbnail b { position: absolute; left: 74%; top: 63%; width: 8px; height: 8px; background: var(--gold); box-shadow: 0 -4px 0 #fff, 4px 0 0 #8c6d1d, -4px 4px 0 #174f9a; animation: packet-blink .8s steps(1) infinite; }

.mines-thumbnail { display: grid; grid-template-columns: repeat(4, 25px); grid-template-rows: repeat(3, 25px); align-content: center; justify-content: center; gap: 2px; background: radial-gradient(circle at center, rgba(23,79,154,.19), transparent 58%), #00030a; }
.mines-thumbnail::before { content: "HAZARD MAP // 12 BLOCKS"; position: absolute; left: 6px; top: 5px; color: #36557b; font-size: 6px; }
.mines-thumbnail > i { position: relative; z-index: 2; display: block; border: 1px solid #315d96; background: #061329; box-shadow: inset 3px 3px 0 #174f9a, inset -3px -3px 0 #000; animation: mine-preview-scan 3.2s steps(1) infinite; }
.mines-thumbnail > i:nth-child(2), .mines-thumbnail > i:nth-child(5), .mines-thumbnail > i:nth-child(7), .mines-thumbnail > i:nth-child(10) { color: var(--blue-bright); background: #01040a; box-shadow: inset 0 0 0 1px #294c78; }
.mines-thumbnail > i:nth-child(2)::after { content: "1"; position: absolute; left: 50%; top: 50%; color: var(--blue-bright); font-size: 10px; transform: translate(-50%, -50%); }
.mines-thumbnail > i:nth-child(5)::after { content: "2"; position: absolute; left: 50%; top: 50%; color: var(--gold); font-size: 10px; transform: translate(-50%, -50%); }
.mines-thumbnail > i:nth-child(7)::after, .mines-thumbnail > i:nth-child(10)::after { content: "0"; position: absolute; left: 50%; top: 50%; color: #314a6d; font-size: 8px; transform: translate(-50%, -50%); }
.mine-preview-bomb, .mine-preview-flag { position: absolute; z-index: 5; display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid var(--gold); color: #000; font-size: 12px; background: var(--gold); box-shadow: 3px 3px 0 #000; }
.mine-preview-bomb { left: calc(50% + 29px); top: 28px; animation: mine-preview-danger .8s steps(1) infinite; }
.mine-preview-flag { left: calc(50% - 52px); bottom: 24px; border-color: var(--blue-pale); color: var(--gold-pale); background: var(--blue); }

.game-card--kitchen { background: linear-gradient(90deg, rgba(232,184,62,.035), transparent 36%), #01050e; }
.kitchen-thumbnail { background: repeating-linear-gradient(90deg, rgba(23,79,154,.16) 0 1px, transparent 1px 16px), linear-gradient(#07162c 0 31px, #01040a 31px); }
.kitchen-thumbnail::before { content: "夜間営業 // RECIPE SIGNAL"; position: absolute; left: 7px; bottom: 5px; color: #466991; font-size: 6px; letter-spacing: .08em; }
.kitchen-sign { position: absolute; z-index: 4; left: 50%; top: 7px; width: 94px; padding: 4px 2px; border: 1px solid var(--gold); color: var(--gold-pale); font-size: 12px; font-weight: bold; text-align: center; background: #061329; box-shadow: 3px 3px 0 #000; transform: translateX(-50%); }
.kitchen-sign::before, .kitchen-sign::after { content: ""; position: absolute; top: -4px; width: 4px; height: 33px; background: var(--blue); box-shadow: 0 4px 0 var(--gold); }
.kitchen-sign::before { left: 15px; }
.kitchen-sign::after { right: 15px; }
.kitchen-bowl { position: absolute; z-index: 3; left: 50%; top: 49px; width: 62px; height: 27px; border: 3px solid var(--blue-pale); border-top: 5px solid var(--gold); border-radius: 3px 3px 31px 31px; background: repeating-linear-gradient(90deg, #061329 0 8px, #174f9a 8px 10px); box-shadow: 4px 4px 0 #000; transform: translateX(-50%); }
.kitchen-bowl::before { content: "湯"; position: absolute; left: 50%; top: 4px; color: var(--gold-pale); font-size: 10px; font-style: normal; transform: translateX(-50%); }
.kitchen-bowl::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 3px; background: var(--blue-pale); }
.kitchen-sequence { position: absolute; z-index: 5; left: 50%; bottom: 17px; display: flex; gap: 3px; transform: translateX(-50%); }
.kitchen-sequence b { display: grid; width: 18px; height: 15px; place-items: center; border: 1px solid #315d96; color: var(--blue-pale); font-size: 8px; background: #020817; box-shadow: 2px 2px 0 #000; animation: kitchen-key 1.6s steps(1) infinite; }
.kitchen-sequence b:nth-child(2) { animation-delay: .4s; }
.kitchen-sequence b:nth-child(3) { animation-delay: .8s; }
.kitchen-sequence b:nth-child(4) { animation-delay: 1.2s; }
.kitchen-thumbnail > em { position: absolute; z-index: 4; right: 5px; top: 43px; color: var(--gold); font-size: 6px; font-style: normal; writing-mode: vertical-rl; }

.maze-thumbnail { background: linear-gradient(90deg, transparent 45%, rgba(232,184,62,.06) 45% 47%, transparent 47%), repeating-linear-gradient(0deg, #174f9a 0 3px, transparent 3px 23px), repeating-linear-gradient(90deg, #174f9a 0 3px, transparent 3px 31px), #00030a; box-shadow: inset 0 0 24px #000, inset 0 0 0 5px #061329; }
.maze-thumbnail::before { content: ""; position: absolute; z-index: 2; inset: 16px 26px 22px; border: 3px double var(--blue); box-shadow: inset 19px 0 0 -16px var(--blue), inset -19px 0 0 -16px var(--blue); }
.maze-runner { position: absolute; z-index: 5; left: 25%; top: 49%; width: 25px; height: 25px; overflow: hidden; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #000, 0 0 9px rgba(232,184,62,.45); animation: maze-runner-preview 1s steps(2) infinite; }
.maze-runner::after { content: ""; position: absolute; right: -1px; top: 3px; width: 14px; height: 19px; background: #00030a; clip-path: polygon(100% 50%, 0 0, 0 100%); transform-origin: right center; animation: maze-preview-mouth .38s steps(2) infinite; }
.maze-dot { position: absolute; z-index: 5; top: calc(49% + 10px); width: 5px; height: 5px; background: var(--gold-pale); box-shadow: 0 0 4px var(--gold); }
.maze-dot--one { left: 44%; }
.maze-dot--two { left: 54%; }
.maze-dot--three { left: 64%; }
.maze-ghost { position: absolute; z-index: 5; right: 17%; top: 45%; display: grid; width: 22px; height: 25px; place-items: center; border: 2px solid var(--blue-pale); border-radius: 12px 12px 0 0; color: var(--gold-pale); font-size: 9px; font-style: normal; background: var(--blue); box-shadow: 3px 3px 0 #000; animation: maze-ghost 1.4s steps(2) infinite; }
.maze-thumbnail > span { position: absolute; z-index: 4; left: 6px; bottom: 5px; color: #456487; font-size: 6px; }
.game-state--pending { color: var(--blue-bright); animation: pending-module 1.4s steps(1) infinite; }

.game-dock { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 7px; margin: 9px 9px 0; border: 1px solid #45658e; padding: 7px; background: #00030a; box-shadow: inset 0 0 18px #000; }
.game-dock-screen { min-height: 87px; padding: 8px 10px; border: 1px solid #234b80; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(23,79,154,.08) 3px 4px), #01050d; }
.game-dock-screen > span { color: var(--gold); font-size: 7px; }
.game-dock-screen h2 { margin: 7px 0 5px; color: #fff; font-size: 14px; text-shadow: 2px 2px var(--blue); }
.game-dock-screen p { margin: 0; color: #7085a3; font-size: 8px; line-height: 1.4; }
.game-dock-controls { position: relative; display: grid; place-items: center; padding: 6px; border: 1px dashed #294d7d; color: #506581; font-size: 7px; background: #020712; }
.game-dock-controls b { color: var(--gold); font-size: 8px; }
.game-dock-controls button { width: 100%; border: 1px solid #263b59; border-radius: 0; padding: 6px; color: #465872; font: bold 8px "Lucida Console", monospace; background: #00030a; cursor: not-allowed; }
.game-dock-controls.is-launch-ready { border: 2px solid var(--gold); padding: 8px; color: var(--gold-pale); background: repeating-linear-gradient(-45deg, #020817 0 5px, #0a1830 5px 6px); box-shadow: 0 0 0 2px #061329, 0 0 13px rgba(232,184,62,.38), inset 0 0 13px rgba(23,79,154,.3); animation: launch-panel-pulse 1.4s steps(2) infinite; }
.game-dock-controls.is-launch-ready::before { content: "V  CLICK TO START  V"; color: var(--gold); font-size: 8px; font-weight: bold; letter-spacing: .08em; text-align: center; text-shadow: 2px 2px 0 #000; animation: launch-arrow-blink .75s steps(1) infinite; }
.game-dock-controls.is-launch-ready > span { color: var(--blue-bright); }
.game-dock-controls.is-launch-ready > b { color: #fff; font-size: 8px; text-align: center; }
.game-dock-controls #game-launch:not(:disabled) { min-height: 40px; border: 2px solid var(--gold-pale); padding: 9px 5px; color: #000; font-size: 9px; white-space: nowrap; background: var(--gold); box-shadow: 4px 4px 0 #061329, inset 3px 3px 0 #ffe79b, inset -3px -3px 0 #9b761f; text-shadow: none; cursor: url("/assets/cursor-link.png") 7 0, pointer; animation: launch-button-pulse 1.4s steps(2) infinite; }
.game-dock-controls #game-launch:not(:disabled):hover, .game-dock-controls #game-launch:not(:disabled):focus-visible { color: #fff; background: var(--blue); outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: 5px 5px 0 #000, inset 3px 3px 0 var(--blue-bright); animation: none; transform: translate(-1px, -1px); }
.games-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #304c74; color: #4c607c; font-size: 7px; background: #000; }
.games-footer span:last-child { color: var(--gold); }

.games-view.poker-open > .games-statusbar,
.games-view.poker-open > .game-library,
.games-view.poker-open > .game-dock,
.games-view.poker-open > .games-footer,
.games-view.snake-open > .games-statusbar,
.games-view.snake-open > .game-library,
.games-view.snake-open > .game-dock,
.games-view.snake-open > .games-footer,
.games-view.roulette-open > .games-statusbar,
.games-view.roulette-open > .game-library,
.games-view.roulette-open > .game-dock,
.games-view.roulette-open > .games-footer,
.games-view.mines-open > .games-statusbar,
.games-view.mines-open > .game-library,
.games-view.mines-open > .game-dock,
.games-view.mines-open > .games-footer,
.games-view.maze-open > .games-statusbar,
.games-view.maze-open > .game-library,
.games-view.maze-open > .game-dock,
.games-view.maze-open > .games-footer,
.games-view.kitchen-open > .games-statusbar,
.games-view.kitchen-open > .game-library,
.games-view.kitchen-open > .game-dock,
.games-view.kitchen-open > .games-footer { display: none; }

.poker-game { position: relative; min-height: 610px; overflow: hidden; background: #00030a; animation: poker-load .45s steps(6); }
.poker-game::before { content: ""; position: absolute; z-index: 8; left: 0; right: 0; top: 42%; height: 2px; opacity: .45; background: var(--blue-bright); box-shadow: 80px 3px 0 #000, -170px -2px 0 var(--gold); pointer-events: none; animation: poker-tear 5.2s steps(1) infinite; }
.poker-game-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #45658e; background: repeating-linear-gradient(90deg, #020817 0 10px, #061329 10px 11px); }
.poker-game-header span { color: var(--blue-bright); font-size: 7px; letter-spacing: .15em; }
.poker-game-header h2 { margin: 3px 0 0; color: #fff; font-size: 23px; line-height: .9; text-shadow: 3px 2px var(--blue), -2px 0 #755b18; }
.poker-game-header button, .poker-controls button { border: 1px solid var(--gold); border-radius: 0; padding: 7px 10px; color: var(--gold-pale); font: bold 8px "Lucida Console", monospace; background: #061329; box-shadow: 3px 3px 0 #000; }
.poker-game-header button:hover, .poker-controls button:hover { color: #000; background: var(--gold); }

.poker-objective { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 6px 9px; border-bottom: 1px solid #2d496e; color: #758aa7; font-size: 8px; background: #000; }
.poker-objective > span { color: var(--gold); }
.poker-objective > b { color: var(--blue-pale); font-size: 8px; }
.streak-meter { display: flex; gap: 5px; }
.streak-meter i { display: block; width: 23px; height: 8px; border: 1px solid #294d7d; background: #020817; box-shadow: inset 3px 0 #071a35; }
.streak-meter i.is-active { border-color: var(--gold); background: var(--gold); box-shadow: inset 4px 0 var(--gold-pale), 0 0 6px rgba(232,184,62,.45); animation: streak-node 1.2s steps(2) infinite; }

.poker-table { position: relative; z-index: 2; display: grid; min-height: 455px; grid-template-rows: auto auto auto; gap: 8px; padding: 9px; background: radial-gradient(ellipse at center, #061731 0 38%, #020814 39% 56%, #000 57% 100%); }
.poker-table::before { content: "VOID TABLE // HANDSHAKE UNVERIFIED"; position: absolute; left: 8px; top: 48%; color: rgba(103,170,255,.2); font-size: 6px; letter-spacing: .14em; writing-mode: vertical-rl; }
.poker-table::after { content: "NO CURRENCY ACCEPTED"; position: absolute; right: 8px; top: 48%; color: rgba(232,184,62,.22); font-size: 6px; letter-spacing: .14em; writing-mode: vertical-rl; }
.poker-static { position: absolute; inset: 0; opacity: .09; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--blue-bright) 3px 4px); pointer-events: none; animation: static-shift .2s steps(2) infinite; }
.poker-seat { position: relative; z-index: 3; width: min(520px, calc(100% - 35px)); margin-inline: auto; padding: 6px 8px 8px; border: 1px solid #294c78; background: rgba(0,3,10,.88); box-shadow: 5px 4px 0 #000; transition: border-color .1s; }
.poker-seat > header { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; padding-bottom: 4px; border-bottom: 1px dotted #294c78; color: #4e698c; font-size: 7px; }
.poker-seat > header b { color: var(--gold); }
.poker-seat.is-winner { border-color: var(--gold); box-shadow: 5px 4px 0 #000, inset 0 0 12px rgba(232,184,62,.14); }
.poker-seat.is-winner > header::after { content: " // WIN"; color: var(--gold-pale); animation: blink 1s steps(1) infinite; }
.poker-seat.is-loser { border-color: #233957; opacity: .72; }
.poker-seat--opponent { transform: perspective(500px) rotateX(-2deg); }
.poker-seat--player { transform: perspective(500px) rotateX(2deg); }
.poker-hand { display: flex; min-height: 97px; align-items: center; justify-content: center; gap: 7px; }

.poker-playing-card { position: relative; display: block; flex: 0 1 70px; width: clamp(47px, 7.2vw, 70px); height: clamp(69px, 9.8vw, 96px); overflow: hidden; border: 2px solid #d7e8ff; border-radius: 0; padding: 5px; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); color: #0b346d; font: bold 12px/1 "Lucida Console", monospace; text-align: left; background: repeating-linear-gradient(0deg, rgba(23,79,154,.035) 0 1px, transparent 1px 4px), linear-gradient(135deg, #edf6ff 0 72%, #b8d4f4 73% 100%); box-shadow: inset 0 0 0 2px #8eb4e4, inset -5px -5px #9bbce5; filter: drop-shadow(4px 4px 0 #000); image-rendering: pixelated; opacity: 1; }
.poker-playing-card::before { content: ""; position: absolute; z-index: 0; inset: 3px; border: 1px dotted rgba(23,79,154,.2); pointer-events: none; }
.poker-playing-card:disabled { cursor: default; opacity: 1; }
.poker-playing-card:not(:disabled):hover { border-color: var(--gold); filter: brightness(1.08) drop-shadow(4px 8px 0 #000); transform: translateY(-5px) rotate(-1deg); box-shadow: 0 0 0 1px var(--blue); }
.poker-playing-card.is-warm-suit { color: #76530b; border-color: var(--gold-pale); background: repeating-linear-gradient(0deg, rgba(232,184,62,.045) 0 1px, transparent 1px 4px), linear-gradient(135deg, #fff8d9 0 72%, #e7c76d 73% 100%); box-shadow: 4px 4px 0 #000, inset 0 0 0 2px #cda83c, inset -5px -5px #d9b84f; }
.poker-playing-card.is-warm-suit::before { border-color: rgba(117,83,11,.22); }
.poker-playing-card.is-discarded { border-color: #fff; color: #000; background: var(--gold); filter: saturate(.65) drop-shadow(4px 12px 0 #000); transform: translateY(-10px) rotate(1deg); box-shadow: 0 0 0 2px var(--gold); }
.poker-playing-card.is-discarded::after { content: "DROP"; position: absolute; left: 0; right: 0; bottom: 2px; color: #000; font-size: 6px; text-align: center; animation: blink .8s steps(1) infinite; }
.poker-corner { position: absolute; z-index: 3; display: grid; justify-items: center; gap: 0; line-height: .9; }
.poker-corner b { font-size: clamp(9px, 1.3vw, 12px); }
.poker-corner i { font: normal clamp(10px, 1.5vw, 14px)/.8 Georgia, serif; }
.poker-corner--top { left: 5px; top: 5px; }
.poker-corner--bottom { right: 5px; bottom: 5px; transform: rotate(180deg); }
.poker-card-emblem { position: absolute; z-index: 2; left: 50%; top: 50%; font: normal clamp(28px, 4.2vw, 42px)/1 Georgia, serif; text-shadow: 2px 2px 0 rgba(23,79,154,.18); transform: translate(-50%, -50%); }
.poker-playing-card.is-warm-suit .poker-card-emblem { text-shadow: 2px 2px 0 rgba(232,184,62,.25); }
.poker-card-code { position: absolute; z-index: 2; right: 2px; top: 50%; color: rgba(23,79,154,.23); font-size: 5px; letter-spacing: .05em; writing-mode: vertical-rl; transform: translateY(-50%); }
.poker-playing-card.is-warm-suit .poker-card-code { color: rgba(117,83,11,.25); }
.poker-playing-card.is-card-back { display: grid; place-items: center; border-color: #4c82c5; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); color: var(--gold); text-align: center; background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(103,170,255,.24) 4px 5px), repeating-linear-gradient(-45deg, #020817 0 5px, #0b2b58 5px 7px); box-shadow: 4px 4px 0 #000, inset 0 0 0 4px #061329, inset 0 0 0 5px var(--gold); }
.poker-playing-card.is-card-back::before { inset: 7px; border: 1px solid rgba(185,216,255,.45); background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(232,184,62,.08) 5px 6px); }
.poker-playing-card.is-card-back::after { content: ""; position: absolute; z-index: 1; left: 8px; right: 8px; top: 50%; height: 1px; background: var(--gold); box-shadow: 0 -18px 0 rgba(103,170,255,.3), 0 18px 0 rgba(103,170,255,.3); }
.poker-back-brand { position: absolute; z-index: 4; left: 50%; top: 7px; color: var(--gold-pale); font-size: clamp(5px, .8vw, 7px); letter-spacing: -.06em; text-shadow: 1px 1px #000; transform: translateX(-50%); }
.poker-back-node { position: relative; z-index: 4; display: block; width: 25px; height: 30px; border: 1px solid var(--gold); background: #01040a; box-shadow: 2px 2px 0 #000, inset 0 0 0 2px #0a2e61; }
.poker-back-node::before { content: ""; position: absolute; left: 50%; top: -7px; width: 1px; height: 7px; background: var(--gold); }
.poker-back-node::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 5px; border: 1px solid var(--blue-bright); background: #061329; }
.poker-back-node i { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 6px; border: 1px solid #315d96; }
.poker-back-code { position: absolute; z-index: 4; right: 4px; bottom: 4px; color: rgba(185,216,255,.45); font-size: 4px; line-height: 1.05; }

.poker-message { position: relative; z-index: 4; width: min(460px, calc(100% - 55px)); margin: -2px auto; padding: 6px 9px; border: 1px solid #45658e; text-align: center; background: #000; box-shadow: 5px 5px 0 #06152d; }
.poker-message > span { color: var(--blue-bright); font-size: 6px; letter-spacing: .15em; }
.poker-message > strong { display: block; margin: 3px 0; color: var(--gold-pale); font-size: 11px; text-shadow: 2px 2px #735714; }
.poker-message > p { margin: 0; color: #647995; font-size: 7px; line-height: 1.3; }

.poker-controls { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-top: 1px solid #36547d; background: #020817; }
.poker-controls span { color: var(--gold); font-size: 7px; }
.poker-controls p { margin: 4px 0 0; color: #7085a3; font-size: 8px; }
.poker-controls button { min-width: 155px; min-height: 36px; }
.poker-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #263f62; color: #4c607c; font-size: 7px; background: #000; }
.poker-footer span:last-child { color: var(--gold); }

.snake-game { position: relative; min-height: 610px; overflow: hidden; background: #00030a; animation: snake-load .45s steps(6); }
.snake-game::before { content: ""; position: absolute; z-index: 7; left: 0; right: 0; top: 37%; height: 2px; opacity: .3; background: var(--blue-bright); box-shadow: -90px 3px 0 #000, 210px -1px 0 var(--gold); pointer-events: none; animation: snake-screen-tear 7s steps(1) infinite; }
.snake-game-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #45658e; background: repeating-linear-gradient(90deg, #020817 0 10px, #061329 10px 11px); }
.snake-game-header span { color: var(--blue-bright); font-size: 7px; letter-spacing: .15em; }
.snake-game-header h2 { margin: 3px 0 0; color: #fff; font-size: 23px; line-height: .9; text-shadow: 3px 2px var(--blue), -2px 0 #755b18; }
.snake-game-header button, .snake-action, .snake-dpad button { border: 1px solid var(--gold); border-radius: 0; color: var(--gold-pale); font: bold 8px "Lucida Console", monospace; background: #061329; box-shadow: 3px 3px 0 #000; }
.snake-game-header button { padding: 7px 10px; }
.snake-game-header button:hover, .snake-action:hover, .snake-dpad button:hover { color: #000; background: var(--gold); }

.snake-objective { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(150px, 280px) auto; align-items: center; gap: 12px; padding: 6px 9px; border-bottom: 1px solid #2d496e; color: var(--gold); font-size: 8px; background: #000; }
.snake-objective > b { color: var(--blue-pale); }
.snake-progress { height: 8px; border: 1px solid #294d7d; background: #020817; box-shadow: inset 3px 0 #071a35; }
.snake-progress i { display: block; width: 2.85%; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, var(--blue-bright) 6px 8px); box-shadow: 0 0 5px rgba(232,184,62,.4); transition: width .1s steps(3); }

.snake-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 7px; padding: 8px; }
.snake-field-panel { min-width: 0; border: 1px solid #3d5b83; background: #01040a; }
.snake-field-panel > header { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid #3d5b83; color: #587393; font-size: 7px; background: repeating-linear-gradient(-45deg, #020817 0 5px, #071329 5px 6px); }
.snake-field-panel > header b { color: var(--gold); }
.snake-board-frame { position: relative; padding: 21px 9px 9px 25px; overflow: hidden; background: radial-gradient(circle at center, rgba(23,79,154,.16), transparent 64%), #000; }
.snake-board-frame::before { content: "CACHE MEMORY // DO NOT CROSS ADDRESS BOUNDARY"; position: absolute; right: 8px; bottom: 1px; color: #29415f; font-size: 5px; }
.snake-axis { position: absolute; color: #37506f; font-size: 5px; letter-spacing: .12em; white-space: nowrap; }
.snake-axis--top { left: 27px; right: 8px; top: 7px; overflow: hidden; word-spacing: .65em; }
.snake-axis--side { left: 6px; top: 27px; width: 6px; line-height: 2.85; white-space: normal; word-break: break-all; }
.snake-board { position: relative; display: grid; width: 100%; aspect-ratio: 14 / 10; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(10, 1fr); border: 2px solid #5579a6; outline: 3px solid #061329; background: linear-gradient(rgba(103,170,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(103,170,255,.1) 1px, transparent 1px), #00030a; background-size: calc(100% / 14) calc(100% / 10); box-shadow: 5px 5px 0 #000, inset 0 0 22px #000; }
.snake-board:focus-visible { outline-color: var(--gold); }
.snake-cell { position: relative; display: block; min-width: 0; min-height: 0; border-right: 1px solid rgba(23,79,154,.14); border-bottom: 1px solid rgba(23,79,154,.14); }
.snake-cell--body { z-index: 2; border: 1px solid #8abfff; background: var(--blue); box-shadow: inset 3px 3px 0 #67aaff, inset -3px -3px 0 #0a2a57; animation: snake-segment-live 1.4s steps(2) infinite; }
.snake-cell--body::before { content: ""; position: absolute; inset: 35%; background: #b9d8ff; opacity: .45; }
.snake-cell--head { z-index: 4; border-color: var(--gold-pale); background: var(--gold); box-shadow: inset 3px 3px 0 #ffe79b, inset -3px -3px 0 #8f6914, 0 0 5px rgba(232,184,62,.55); animation: snake-head-live .65s steps(2) infinite; }
.snake-cell--head::before, .snake-cell--head::after { content: ""; position: absolute; z-index: 2; width: 2px; height: 2px; background: #000; opacity: 1; }
.snake-cell--head-right::before { right: 3px; top: 3px; }
.snake-cell--head-right::after { right: 3px; bottom: 3px; }
.snake-cell--head-left::before { left: 3px; top: 3px; }
.snake-cell--head-left::after { left: 3px; bottom: 3px; }
.snake-cell--head-up::before { left: 3px; top: 3px; }
.snake-cell--head-up::after { right: 3px; top: 3px; }
.snake-cell--head-down::before { left: 3px; bottom: 3px; }
.snake-cell--head-down::after { right: 3px; bottom: 3px; }
.snake-cell--tail { opacity: .65; }
.snake-cell--food { z-index: 3; }
.snake-cell--food::before { content: ""; position: absolute; left: 27%; right: 27%; top: 27%; bottom: 27%; border: 1px solid #fff3bd; background: var(--gold); box-shadow: 4px 0 0 var(--gold), -4px 0 0 var(--blue-bright), 0 4px 0 #8f6914, 0 -4px 0 #fff; animation: snake-food-pulse .7s steps(2) infinite; }
.snake-board.is-crashed { animation: snake-crash .28s steps(2) 4; }
.snake-board.is-crashed .snake-cell--body { border-color: #52637b; filter: grayscale(1); }
.snake-board.is-complete .snake-cell--body { animation: snake-victory .45s steps(2) infinite; }
.snake-overlay { position: absolute; z-index: 8; left: 50%; top: 50%; display: none; width: min(350px, calc(100% - 55px)); place-items: center; gap: 5px; padding: 12px 8px; border: 1px solid var(--gold); text-align: center; background: rgba(0,3,10,.94); box-shadow: 5px 5px 0 #06152d; transform: translate(-50%, -50%); pointer-events: none; }
.snake-overlay.is-visible { display: grid; animation: snake-overlay-in .2s steps(3); }
.snake-overlay strong { color: var(--gold-pale); font-size: 12px; text-shadow: 2px 2px #76530b; }
.snake-overlay span { color: #7085a3; font-size: 7px; line-height: 1.4; }

.snake-console { display: grid; align-content: start; gap: 7px; }
.snake-console > section { border: 1px solid #344f75; background: #01040a; }
.snake-console h3 { margin: 0; padding: 5px 6px; border-bottom: 1px solid #344f75; color: var(--gold); font-size: 8px; background: #061125; }
.snake-readout p { display: flex; justify-content: space-between; gap: 7px; margin: 0; padding: 5px 7px; border-bottom: 1px dotted #203a5e; color: #536a89; font-size: 7px; }
.snake-readout p b { color: var(--blue-pale); }
.snake-instructions p { margin: 0; padding: 5px 7px; color: #647b99; font-size: 7px; line-height: 1.3; }
.snake-instructions p::before { content: "> "; color: var(--gold); }
.snake-dpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 7px; border: 1px dashed #344f75; background: #01040a; }
.snake-dpad button { min-height: 30px; padding: 4px 2px; font-size: 6px; }
.snake-dpad button[data-snake-direction="up"] { grid-column: 2; }
.snake-dpad button[data-snake-direction="left"] { grid-column: 1; grid-row: 2; }
.snake-dpad button[data-snake-direction="down"] { grid-column: 2; grid-row: 2; }
.snake-dpad button[data-snake-direction="right"] { grid-column: 3; grid-row: 2; }
.snake-action { min-height: 39px; padding: 7px; animation: snake-action-pulse 1.7s steps(2) infinite; }
.snake-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #263f62; color: #4c607c; font-size: 7px; background: #000; }
.snake-footer span:last-child { color: var(--gold); }

.roulette-game { position: relative; min-height: 680px; overflow: hidden; font-family: "Lucida Console", "MS Gothic", "Yu Gothic", monospace; background: #00030a; animation: roulette-game-load .55s steps(7); }
.roulette-game::before { content: ""; position: absolute; z-index: 8; left: 0; right: 0; top: 48%; height: 2px; opacity: .2; background: var(--gold); box-shadow: -180px 3px 0 #000, 140px -2px 0 var(--blue-bright); pointer-events: none; animation: roulette-signal-tear 6.3s steps(1) infinite; }
.roulette-game-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #45658e; background: repeating-linear-gradient(90deg, #020817 0 10px, #061329 10px 11px); }
.roulette-game-header span { color: var(--blue-bright); font-size: 7px; letter-spacing: .15em; }
.roulette-game-header h2 { margin: 3px 0 0; color: #fff; font-size: 23px; line-height: .9; text-shadow: 3px 2px var(--blue), -2px 0 #755b18; }
.roulette-game-header button, .roulette-chip-bank button, .roulette-number, .roulette-outside-bets button, .roulette-actions button { border: 1px solid #45658e; border-radius: 0; color: var(--blue-pale); font: bold 7px "Lucida Console", monospace; background: #061329; }
.roulette-game-header button { border-color: var(--gold); padding: 7px 10px; color: var(--gold-pale); }
.roulette-game-header button:hover, .roulette-chip-bank button:hover, .roulette-number:hover, .roulette-outside-bets button:hover, .roulette-actions button:hover { border-color: var(--gold-pale); color: #000; background: var(--gold); }

.roulette-objective { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(150px, 280px) auto; align-items: center; gap: 12px; padding: 6px 9px; border-bottom: 1px solid #2d496e; color: var(--gold); font-size: 8px; background: #000; }
.roulette-objective > b { color: var(--blue-pale); }
.roulette-goal-progress { height: 8px; border: 1px solid #294d7d; background: #020817; box-shadow: inset 3px 0 #071a35; }
.roulette-goal-progress i { display: block; width: 66.6%; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 10px, var(--blue) 10px 18px, transparent 18px 20px); box-shadow: 0 0 5px rgba(232,184,62,.4); transition: width .2s steps(5); }
.roulette-run-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #304b71; background: #01040a; }
.roulette-run-stats p { margin: 0; padding: 5px 7px; border-right: 1px dotted #263f62; color: #526a89; font-size: 7px; }
.roulette-run-stats p:last-child { border-right: 0; }
.roulette-run-stats span { display: block; margin-bottom: 3px; }
.roulette-run-stats b { color: var(--gold-pale); font-size: 9px; white-space: nowrap; }

.roulette-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 7px; padding: 8px 8px 5px; }
.roulette-machine, .roulette-betting-terminal { min-width: 0; border: 1px solid #3c5b84; background: #01040a; }
.roulette-machine > header, .roulette-betting-terminal > header { display: flex; justify-content: space-between; gap: 8px; padding: 5px 7px; border-bottom: 1px solid #3c5b84; color: #557191; font-size: 7px; background: repeating-linear-gradient(-45deg, #020817 0 5px, #071329 5px 6px); }
.roulette-machine > header b { color: var(--gold); }
.roulette-betting-terminal > header b { color: #5a6e88; font-size: 6px; }
.roulette-wheel-stage { position: relative; display: grid; min-height: 280px; place-items: center; overflow: hidden; background: radial-gradient(circle at center, #071a35 0 28%, #01040a 29% 54%, #000 55%); }
.roulette-wheel-stage::before { content: "PROBABILITY FIELD // 37 ADDRESSES"; position: absolute; left: 5px; top: 5px; color: #334d6e; font-size: 5px; letter-spacing: .1em; }
.roulette-wheel-stage::after { content: ""; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--blue-bright) 3px 4px); pointer-events: none; }
.rogue-wheel { --roulette-stop: 1440deg; position: relative; width: 178px; height: 178px; border: 5px solid #071a35; border-radius: 50%; background: repeating-conic-gradient(var(--gold) 0 4.86deg, #03070f 4.86deg 9.72deg, var(--blue) 9.72deg 14.58deg, #000 14.58deg 19.44deg); box-shadow: 0 0 0 2px var(--blue-pale), 0 0 0 8px #020817, 0 0 0 9px var(--gold), 7px 7px 0 9px #000; }
.rogue-wheel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; border: 3px solid var(--gold); border-radius: 50%; background: radial-gradient(circle, var(--blue-bright) 0 3px, #000 4px 13px, #061329 14px); transform: translate(-50%, -50%); }
.rogue-wheel::after { content: ""; position: absolute; inset: 17px; border: 1px dotted rgba(185,216,255,.6); border-radius: 50%; }
.rogue-wheel > b { position: absolute; z-index: 3; left: 50%; top: 50%; color: var(--gold-pale); font-size: 11px; transform: translate(-50%, -50%); }
.rogue-ball { position: absolute; z-index: 5; left: 50%; top: 4px; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background: var(--gold-pale); box-shadow: 0 0 5px #fff; transform: translateX(-50%); transform-origin: 4px 85px; }
.rogue-wheel.is-spinning { animation: rogue-wheel-spin 1.8s steps(37) forwards; }
.rogue-wheel.is-spinning .rogue-ball { animation: rogue-ball-spin 1.8s cubic-bezier(.12,.64,.24,1) forwards; }
.rogue-pointer { position: absolute; z-index: 7; left: 50%; top: 26px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 21px solid var(--gold-pale); filter: drop-shadow(3px 3px 0 #000); transform: translateX(-50%); }
.roulette-result { position: absolute; z-index: 7; right: 8px; bottom: 8px; display: grid; min-width: 72px; place-items: center; padding: 4px 6px; border: 1px solid #36557c; background: rgba(0,3,10,.94); box-shadow: 3px 3px 0 #000; }
.roulette-result span { color: #4f6583; font-size: 5px; }
.roulette-result strong { color: #fff; font-size: 21px; text-shadow: 2px 2px var(--blue); }
.roulette-result small { color: #586f8d; font-size: 5px; text-align: center; }
.roulette-result.result--gold { border-color: var(--gold); }
.roulette-result.result--gold strong, .result--gold { color: var(--gold-pale) !important; }
.roulette-result.result--blue { border-color: var(--blue-bright); }
.roulette-result.result--blue strong, .result--blue { color: var(--blue-bright) !important; }
.roulette-result.result--void { border-color: #fff; animation: roulette-void-result .3s steps(2) 4; }
.roulette-history { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 7px; border-top: 1px solid #304b71; color: #4e6584; font-size: 6px; }
.roulette-history ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.roulette-history li { display: grid; width: 22px; height: 18px; place-items: center; border: 1px solid #263f62; color: #627896; background: #000; }

.roulette-chip-bank { display: flex; align-items: center; gap: 5px; padding: 6px; border-bottom: 1px solid #2c476d; color: #5c7290; font-size: 7px; }
.roulette-chip-bank button { min-width: 44px; min-height: 25px; padding: 3px 5px; }
.roulette-chip-bank button.is-selected { border-color: var(--gold); color: #000; background: var(--gold); box-shadow: 2px 2px 0 var(--blue); }
.roulette-number-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; padding: 6px; border-bottom: 1px solid #2c476d; }
.roulette-number { position: relative; min-width: 0; min-height: 27px; padding: 3px 1px; }
.roulette-number--gold { border-color: #84691f; color: var(--gold-pale); background: #171207; }
.roulette-number--blue { border-color: #315f99; color: var(--blue-pale); background: #061329; }
.roulette-number--void { border-color: #798da8; color: #fff; background: #000; }
.roulette-number--zero { grid-row: span 2; font-size: 13px; }
.roulette-number.has-bet, .roulette-outside-bets button.has-bet { border: 2px solid #fff; color: #000; background: var(--gold); box-shadow: 2px 2px 0 var(--blue); }
.roulette-number.has-bet::after, .roulette-outside-bets button.has-bet::after { content: attr(data-bet-total); position: absolute; z-index: 3; right: -2px; top: -5px; padding: 1px 2px; border: 1px solid #fff; color: #000; font-size: 5px; background: var(--gold-pale); }
.roulette-outside-bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; }
.roulette-outside-bets button { position: relative; min-height: 27px; padding: 4px 2px; }
.roulette-outside-bets small { display: block; margin-top: 2px; color: #5d7492; font-size: 5px; }
.roulette-outside-bets button.has-bet small { color: #3b2c05; }
.roulette-game button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .45; }

.roulette-console { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(190px, .8fr) minmax(220px, 1.1fr) 170px; gap: 6px; padding: 5px 8px 8px; }
.roulette-slip, .roulette-message, .roulette-actions { border: 1px solid #36547b; background: #01040a; }
.roulette-slip > header { display: flex; justify-content: space-between; gap: 7px; padding: 4px 6px; border-bottom: 1px solid #36547b; color: #5a718f; font-size: 6px; }
.roulette-slip > header b { color: var(--gold); }
.roulette-slip ul { max-height: 77px; margin: 0; padding: 4px 6px; overflow: auto; list-style: none; }
.roulette-slip li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 1px; border-bottom: 1px dotted #203858; color: #607694; font-size: 6px; }
.roulette-slip li b { color: var(--gold-pale); }
.roulette-message { padding: 6px 8px; text-align: center; box-shadow: inset 0 0 12px #000; }
.roulette-message span { color: var(--blue-bright); font-size: 6px; letter-spacing: .12em; }
.roulette-message strong { display: block; margin: 4px 0; color: var(--gold-pale); font-size: 11px; text-shadow: 2px 2px #745817; }
.roulette-message p { margin: 0; color: #607694; font-size: 7px; line-height: 1.35; }
.roulette-actions { display: grid; gap: 5px; padding: 6px; }
.roulette-actions button { min-height: 31px; padding: 5px; }
.roulette-actions #roulette-action { border-color: var(--gold); color: var(--gold-pale); animation: roulette-action-pulse 1.4s steps(2) infinite; }
.roulette-actions #roulette-action:hover { color: #000; }
.roulette-game.is-spinning .roulette-wheel-stage { box-shadow: inset 0 0 24px rgba(23,79,154,.45); }
.roulette-game.is-cleared .roulette-goal-progress { border-color: var(--gold-pale); box-shadow: 0 0 8px rgba(232,184,62,.55); }
.roulette-game.is-cleared .roulette-goal-progress i { width: 100% !important; background: var(--gold); animation: roulette-goal-clear .6s steps(2) infinite; }
.roulette-game.is-failed .roulette-layout { filter: grayscale(.65) brightness(.72); }
.roulette-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #263f62; color: #4c607c; font-size: 7px; background: #000; }
.roulette-footer span:last-child { color: var(--gold); }

.mines-game { position: relative; min-height: 650px; overflow: hidden; background: #00030a; animation: mines-game-load .48s steps(7); }
.mines-game::before { content: ""; position: absolute; z-index: 8; left: 0; right: 0; top: 54%; height: 2px; opacity: .25; background: var(--blue-bright); box-shadow: 130px 3px 0 #000, -90px -2px 0 var(--gold); pointer-events: none; animation: mines-screen-tear 6.8s steps(1) infinite; }
.mines-game-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #45658e; background: repeating-linear-gradient(90deg, #020817 0 10px, #061329 10px 11px); }
.mines-game-header span { color: var(--blue-bright); font-size: 7px; letter-spacing: .15em; }
.mines-game-header h2 { margin: 3px 0 0; color: #fff; font-size: 23px; line-height: .9; text-shadow: 3px 2px var(--blue), -2px 0 #755b18; }
.mines-game-header button, .mines-console button, .mine-cell { border: 1px solid #45658e; border-radius: 0; color: var(--blue-pale); font: bold 7px "Lucida Console", monospace; background: #061329; }
.mines-game-header button { border-color: var(--gold); padding: 7px 10px; color: var(--gold-pale); }
.mines-game-header button:hover, .mines-console button:hover { border-color: var(--gold-pale); color: #000; background: var(--gold); }

.mines-objective { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 12px; padding: 6px 9px; border-bottom: 1px solid #2d496e; color: var(--gold); font-size: 8px; background: #000; }
.mines-objective b { color: var(--blue-pale); }
.mines-statusbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #304b71; background: #01040a; }
.mines-statusbar p { margin: 0; padding: 5px 7px; border-right: 1px dotted #263f62; color: #526a89; font-size: 7px; }
.mines-statusbar p:last-child { border-right: 0; }
.mines-statusbar span { display: block; margin-bottom: 3px; }
.mines-statusbar b { color: var(--gold-pale); font-size: 9px; }

.mines-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 205px; gap: 7px; padding: 8px; }
.mines-field-panel { min-width: 0; border: 1px solid #3c5b84; background: #01040a; }
.mines-field-panel > header { display: flex; justify-content: space-between; gap: 7px; padding: 5px 7px; border-bottom: 1px solid #3c5b84; color: #557191; font-size: 7px; background: repeating-linear-gradient(-45deg, #020817 0 5px, #071329 5px 6px); }
.mines-field-panel > header b { color: var(--gold); }
.mines-board-frame { position: relative; display: grid; min-height: 430px; place-items: center; overflow: hidden; padding: 26px 12px 14px; background: radial-gradient(circle at center, rgba(23,79,154,.18), transparent 63%), linear-gradient(rgba(103,170,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(103,170,255,.045) 1px, transparent 1px), #000; background-size: auto, 12px 12px, 12px 12px; }
.mines-board-frame::before { content: "UNMAPPED SECTORS MAY CONTAIN ACTIVE DEAD NODES"; position: absolute; left: 7px; bottom: 3px; color: #2e4564; font-size: 5px; letter-spacing: .08em; }
.mines-coordinate { position: absolute; left: 50%; top: 8px; width: calc(100% - 30px); overflow: hidden; color: #3d5675; font-size: 5px; word-spacing: .78em; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.mines-board { --mine-columns: 12; --mine-rows: 10; --mine-board-width: 432px; position: relative; display: grid; width: min(100%, var(--mine-board-width)); grid-template-columns: repeat(var(--mine-columns), minmax(0, 1fr)); border: 2px solid #5579a6; outline: 3px solid #061329; background: #00030a; box-shadow: 6px 6px 0 #000, inset 0 0 18px #000; }
.mine-cell { position: relative; display: grid; min-width: 0; aspect-ratio: 1; place-items: center; border-width: 2px; border-style: solid; border-color: #78a3d8 #020817 #020817 #78a3d8; padding: 0; color: #dceaff; font-size: clamp(7px, 1.5vw, 12px); background: #0a2a57; box-shadow: inset 2px 2px 0 #174f9a; text-shadow: 1px 1px 0 #000; }
.mine-cell:hover:not(:disabled) { border-color: var(--gold-pale) #6f5310 #6f5310 var(--gold-pale); color: #000; background: var(--gold); }
.mine-cell:focus-visible { z-index: 3; outline: 2px solid #fff; outline-offset: -3px; }
.mine-cell:disabled { cursor: default; opacity: 1; }
.mine-cell.is-revealed { border: 1px solid #1f3b61; color: #6885aa; background: #010713; box-shadow: inset 0 0 5px #000; animation: mine-cell-open .13s steps(2); }
.mine-cell.is-revealed::before { content: ""; position: absolute; inset: 3px; border: 1px dotted rgba(103,170,255,.08); }
.mine-cell.mine-count-1 { color: var(--blue-bright); }
.mine-cell.mine-count-2 { color: var(--gold); }
.mine-cell.mine-count-3 { color: #fff; text-shadow: 2px 0 var(--blue), -2px 0 #76530b; }
.mine-cell.mine-count-4, .mine-cell.mine-count-5, .mine-cell.mine-count-6, .mine-cell.mine-count-7, .mine-cell.mine-count-8 { color: var(--gold-pale); background: #08101e; }
.mine-cell.is-flagged { border-color: var(--gold-pale) #725510 #725510 var(--gold-pale); color: #000; background: var(--gold); box-shadow: inset 2px 2px 0 var(--gold-pale), inset -2px -2px 0 #8d6814; animation: mine-flag-pulse 1.2s steps(2) infinite; }
.mine-cell.is-flagged::before { content: ""; position: absolute; left: 29%; top: 19%; width: 2px; height: 58%; background: #000; }
.mine-cell.is-flagged::after { content: ""; position: absolute; left: calc(29% + 2px); top: 19%; width: 29%; height: 29%; background: var(--blue); }
.mine-cell.is-mine { border-color: #fff; color: var(--gold-pale); background: #000; box-shadow: inset 0 0 0 3px #102c58, 0 0 5px rgba(232,184,62,.65); animation: mine-danger .55s steps(2) infinite; }
.mine-cell.is-mine::before { content: ""; position: absolute; left: 17%; right: 17%; top: 48%; height: 2px; border: 0; background: var(--gold); box-shadow: 0 -5px 0 #174f9a, 0 5px 0 #174f9a; transform: rotate(45deg); }
.mine-cell.is-mine::after { content: ""; position: absolute; left: 17%; right: 17%; top: 48%; height: 2px; background: var(--gold); transform: rotate(-45deg); }
.mine-cell.is-triggered { color: #000; background: var(--gold); filter: invert(1); animation: mine-triggered .2s steps(2) infinite; }
.mine-cell.is-wrong-flag { color: #fff; background: #020817; text-decoration: line-through; }
.mine-cell.is-auto-flag { animation: mine-win-cell .5s steps(2) infinite; }
.mines-overlay { position: absolute; z-index: 7; left: 50%; top: 50%; display: none; width: min(350px, calc(100% - 50px)); place-items: center; gap: 5px; padding: 12px 8px; border: 1px solid var(--gold); text-align: center; background: rgba(0,3,10,.95); box-shadow: 5px 5px 0 #06152d; transform: translate(-50%, -50%); pointer-events: none; }
.mines-overlay.is-visible { display: grid; animation: mines-overlay-in .22s steps(3); }
.mines-overlay strong { color: var(--gold-pale); font-size: 12px; text-shadow: 2px 2px #76530b; }
.mines-overlay span { color: #7085a3; font-size: 7px; }
.mines-game.is-lost .mines-field-panel { border-color: var(--gold); animation: mines-field-crash .25s steps(2) 4; }
.mines-game.is-won .mines-field-panel { box-shadow: inset 0 0 18px rgba(232,184,62,.2), 0 0 8px rgba(232,184,62,.35); }

.mines-console { display: grid; align-content: start; gap: 7px; }
.mines-console > section { border: 1px solid #344f75; background: #01040a; }
.mines-console h3 { margin: 0; padding: 5px 6px; border-bottom: 1px solid #344f75; color: var(--gold); font-size: 8px; background: #061125; }
.mines-mode-panel > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; }
.mines-mode-panel button { min-height: 30px; padding: 4px; }
.mines-mode-panel button.is-selected, .mines-difficulty-panel button.is-selected { border-color: var(--gold); color: #000; background: var(--gold); box-shadow: 2px 2px 0 var(--blue); }
.mines-mode-panel p { margin: 0; padding: 4px 7px 7px; color: #5c7290; font-size: 6px; line-height: 1.5; }
.mines-difficulty-panel { display: grid; }
.mines-difficulty-panel h3 { grid-column: 1 / -1; }
.mines-difficulty-panel button { display: flex; justify-content: space-between; gap: 5px; min-height: 27px; align-items: center; border: 0; border-bottom: 1px dotted #29476d; padding: 5px 7px; text-align: left; box-shadow: none; }
.mines-difficulty-panel button:last-child { border-bottom: 0; }
.mines-difficulty-panel small { color: #617793; font-size: 5px; }
.mines-difficulty-panel button.is-selected small { color: #372902; }
.mines-legend p { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 6px; border-bottom: 1px dotted #213a5c; color: #5f7593; font-size: 6px; }
.mines-legend i { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid #365780; color: var(--gold); font-style: normal; background: #000; }
.mines-reset { min-height: 38px; border-color: var(--gold) !important; padding: 6px; color: var(--gold-pale) !important; animation: mines-reset-pulse 1.6s steps(2) infinite; }
.mines-reset:hover { color: #000 !important; }
.mines-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #263f62; color: #4c607c; font-size: 7px; background: #000; }
.mines-footer span:last-child { color: var(--gold); }

.maze-game { position: relative; min-height: 650px; overflow: hidden; background: #00030a; animation: maze-game-load .5s steps(7); }
.maze-game::before { content: ""; position: absolute; z-index: 8; left: 0; right: 0; top: 39%; height: 2px; opacity: .24; background: var(--gold); box-shadow: 120px 4px 0 #000, -85px -3px 0 var(--blue-bright); pointer-events: none; animation: maze-screen-tear 6.1s steps(1) infinite; }
.maze-game-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #45658e; background: repeating-linear-gradient(90deg, #020817 0 10px, #061329 10px 11px); }
.maze-game-header span { color: var(--blue-bright); font-size: 7px; letter-spacing: .15em; }
.maze-game-header h2 { margin: 3px 0 0; color: #fff; font-size: 23px; line-height: .9; text-shadow: 3px 2px var(--blue), -2px 0 #755b18; }
.maze-game-header button, .maze-console button { border: 1px solid #45658e; border-radius: 0; color: var(--blue-pale); font: bold 7px "Lucida Console", monospace; background: #061329; box-shadow: 3px 3px 0 #000; }
.maze-game-header button { border-color: var(--gold); padding: 7px 10px; color: var(--gold-pale); }
.maze-game-header button:hover, .maze-console button:hover { color: #000; background: var(--gold); }

.maze-objective { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 180px auto; align-items: center; gap: 10px; padding: 6px 9px; border-bottom: 1px solid #2d496e; color: var(--gold); font-size: 7px; background: #000; }
.maze-objective > b { color: var(--blue-pale); font-size: 8px; }
.maze-progress { height: 7px; overflow: hidden; border: 1px solid #294d7d; background: #020817; }
.maze-progress i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--blue) 0 7px, var(--blue-bright) 7px 9px); transition: width .12s steps(4); }
.maze-statusbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #314f78; background: #01040a; }
.maze-statusbar p { margin: 0; padding: 5px 7px; border-right: 1px dotted #263f62; color: #526a89; font-size: 7px; }
.maze-statusbar p:last-child { border-right: 0; }
.maze-statusbar span { display: block; margin-bottom: 3px; }
.maze-statusbar b { color: var(--gold-pale); font-size: 9px; }

.maze-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 205px; gap: 7px; padding: 8px; }
.maze-field-panel { min-width: 0; border: 1px solid #3c5b84; background: #01040a; }
.maze-field-panel > header { display: flex; justify-content: space-between; gap: 7px; padding: 5px 7px; border-bottom: 1px solid #3c5b84; color: #557191; font-size: 7px; background: repeating-linear-gradient(-45deg, #020817 0 5px, #071329 5px 6px); }
.maze-field-panel > header b { color: var(--gold); }
.maze-board-frame { position: relative; display: grid; min-height: 455px; place-items: center; overflow: hidden; padding: 12px; background: radial-gradient(circle at center, rgba(23,79,154,.17), transparent 63%), linear-gradient(rgba(103,170,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(103,170,255,.04) 1px, transparent 1px), #000; background-size: auto, 10px 10px, 10px 10px; }
.maze-board-frame::before { content: "ROUTE HAS NO ORIGIN // EXIT POINTER CORRUPTED"; position: absolute; left: 6px; bottom: 3px; color: #2e4564; font-size: 5px; letter-spacing: .08em; }
.lost-maze-board { --maze-columns: 19; --maze-rows: 16; position: relative; display: grid; width: min(100%, 600px); grid-template-columns: repeat(var(--maze-columns), minmax(0, 1fr)); border: 3px double #5579a6; outline: 3px solid #061329; background: #000; box-shadow: 6px 6px 0 #000, 0 0 16px rgba(23,79,154,.28); }
.lost-maze-board:focus-visible { outline-color: var(--gold); }
.maze-cell { position: relative; display: block; min-width: 0; aspect-ratio: 1; }
.maze-cell--wall { background: #071b38; box-shadow: inset 0 0 0 1px #174f9a, inset 3px 3px 0 rgba(103,170,255,.23), inset -3px -3px 0 #01040a; }
.maze-cell--wall::after { content: ""; position: absolute; inset: 35%; background: #123667; opacity: .5; }
.maze-cell--route { background: #00030a; box-shadow: inset 0 0 5px rgba(23,79,154,.12); }
.maze-cell.has-packet::before, .maze-cell.has-power-packet::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 18%; height: 18%; background: var(--gold-pale); box-shadow: 0 0 4px var(--gold); transform: translate(-50%, -50%); }
.maze-cell.has-power-packet::before { width: 45%; height: 45%; border: 1px solid var(--gold-pale); border-radius: 50%; background: var(--gold); animation: maze-power-packet .62s steps(2) infinite; }
.lost-maze-player { position: absolute; z-index: 6; inset: 11%; overflow: hidden; border-radius: 50%; background: var(--gold); box-shadow: inset 3px 3px 0 var(--gold-pale), inset -3px -3px 0 #8f6914, 0 0 7px rgba(232,184,62,.65); }
.lost-maze-player::after { content: ""; position: absolute; right: -2px; top: 12%; width: 57%; height: 76%; background: #00030a; clip-path: polygon(100% 50%, 0 0, 0 100%); transform-origin: right center; animation: lost-maze-mouth .28s steps(2) infinite; }
.lost-maze-player.is-facing-left { transform: rotate(180deg); }
.lost-maze-player.is-facing-up { transform: rotate(-90deg); }
.lost-maze-player.is-facing-down { transform: rotate(90deg); }
.lost-maze-process { position: absolute; z-index: 7; inset: 8% 12%; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--blue-pale); border-radius: 50% 50% 18% 18%; color: #fff; font: normal bold clamp(5px, 1vw, 9px)/1 "Lucida Console", monospace; background: var(--blue); box-shadow: inset 3px 3px 0 var(--blue-bright), 0 0 6px rgba(103,170,255,.55); animation: maze-process-drift .55s steps(2) infinite; }
.lost-maze-process::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 25%; background: repeating-linear-gradient(90deg, #000 0 20%, transparent 20% 40%); }
.lost-maze-process--two { border-color: var(--gold); color: var(--gold-pale); background: #123667; animation-delay: -.25s; }
.lost-maze-process.is-vulnerable { border-color: #fff; color: #000; background: var(--gold-pale); box-shadow: 0 0 8px var(--gold); animation: maze-process-frightened .32s steps(2) infinite; }
.lost-maze-process.is-recompiling { opacity: .2; filter: grayscale(1); }
.maze-overlay { position: absolute; z-index: 12; left: 50%; top: 50%; display: none; width: min(270px, calc(100% - 40px)); padding: 11px; border: 2px solid var(--gold); color: var(--blue-pale); text-align: center; background: rgba(0,3,10,.94); box-shadow: 6px 6px 0 #000, inset 0 0 14px #071a35; transform: translate(-50%, -50%); }
.maze-overlay.is-visible { display: grid; gap: 7px; animation: maze-overlay-in .24s steps(4); }
.maze-overlay strong { color: #fff; font-size: 12px; text-shadow: 2px 2px var(--blue); }
.maze-overlay span { color: var(--gold); font-size: 7px; line-height: 1.4; }

.maze-console { display: grid; align-content: start; gap: 7px; }
.maze-console > section { border: 1px solid #345680; background: #01040a; }
.maze-console h3 { margin: 0; padding: 5px 6px; border-bottom: 1px solid #345680; color: var(--gold); font-size: 8px; text-align: center; background: #061329; }
.maze-dpad { display: grid; grid-template-columns: repeat(3, 35px); grid-template-rows: repeat(2, 35px); justify-content: center; gap: 3px; padding: 8px 5px 3px; }
.maze-dpad button { padding: 2px; line-height: 1.15; }
.maze-dpad button:nth-child(1) { grid-column: 2; }
.maze-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.maze-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.maze-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.maze-input-panel > p { margin: 0; padding: 5px 6px 7px; color: #536c8e; font-size: 6px; line-height: 1.5; text-align: center; }
.maze-process-panel p { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 7px; border-bottom: 1px dotted #203b60; color: #6f86a5; font-size: 7px; }
.maze-process-panel i { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--blue-pale); border-radius: 50% 50% 4px 4px; color: #fff; font-style: normal; background: var(--blue); }
.maze-process-panel .maze-legend-process--two { border-color: var(--gold); background: #123667; }
.maze-process-panel small { display: block; padding: 6px; color: #536986; font-size: 6px; line-height: 1.45; }
.maze-message { min-height: 94px; padding: 7px; box-shadow: inset 0 0 16px #000; }
.maze-message span { color: var(--blue-bright); font-size: 6px; }
.maze-message strong { display: block; margin: 6px 0; color: var(--gold-pale); font-size: 9px; line-height: 1.2; }
.maze-message p { margin: 0; color: #617895; font-size: 6px; line-height: 1.5; }
.maze-action { min-height: 39px; border-color: var(--gold) !important; padding: 7px; color: var(--gold-pale) !important; animation: maze-action-pulse 1.3s steps(2) infinite; }
.maze-action:hover { color: #000 !important; }
.maze-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #263f62; color: #4c607c; font-size: 7px; background: #000; }
.maze-footer span:last-child { color: var(--gold); }
.maze-game.is-powered .maze-progress i { background: repeating-linear-gradient(90deg, var(--gold) 0 7px, var(--gold-pale) 7px 9px); }
.maze-game.is-failed .maze-board-frame { animation: maze-field-crash .18s steps(2) 5; filter: grayscale(.7) brightness(.6); }
.maze-game.is-complete .lost-maze-board { border-color: var(--gold); animation: maze-board-clear .7s steps(2) infinite; }

.signal-kitchen-game { position: relative; min-height: 650px; overflow: hidden; background: #00030a; animation: signal-kitchen-load .48s steps(7); }
.signal-kitchen-game::before { content: ""; position: absolute; z-index: 9; left: 0; right: 0; top: 47%; height: 2px; opacity: .2; background: var(--blue-bright); box-shadow: 95px 4px 0 #000, -130px -2px 0 var(--gold); pointer-events: none; animation: kitchen-screen-tear 6.7s steps(1) infinite; }
.signal-kitchen-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #45658e; background: repeating-linear-gradient(90deg, #020817 0 10px, #061329 10px 11px); }
.signal-kitchen-header span { color: var(--blue-bright); font-size: 7px; letter-spacing: .15em; }
.signal-kitchen-header h2 { margin: 3px 0 0; color: #fff; font-size: 23px; line-height: .9; text-shadow: 3px 2px var(--blue), -2px 0 #755b18; }
.signal-kitchen-header button, .signal-kitchen-console button { border: 1px solid #45658e; border-radius: 0; color: var(--blue-pale); font: bold 7px "Lucida Console", monospace; background: #061329; box-shadow: 3px 3px 0 #000; }
.signal-kitchen-header button { border-color: var(--gold); padding: 7px 10px; color: var(--gold-pale); }
.signal-kitchen-header button:hover, .signal-kitchen-console button:hover { color: #000; background: var(--gold); }

.signal-kitchen-objective { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 180px auto; align-items: center; gap: 10px; padding: 6px 9px; border-bottom: 1px solid #2d496e; color: var(--gold); font-size: 7px; background: #000; }
.signal-kitchen-objective > b { color: var(--blue-pale); font-size: 8px; }
.kitchen-shift-progress { height: 7px; overflow: hidden; border: 1px solid #294d7d; background: #020817; }
.kitchen-shift-progress i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--blue) 0 7px, var(--blue-bright) 7px 9px); transition: width .2s steps(5); }
.signal-kitchen-statusbar { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid #314f78; background: #01040a; }
.signal-kitchen-statusbar p { margin: 0; padding: 5px 7px; border-right: 1px dotted #263f62; color: #526a89; font-size: 7px; }
.signal-kitchen-statusbar p:last-child { border-right: 0; }
.signal-kitchen-statusbar span { display: block; margin-bottom: 3px; }
.signal-kitchen-statusbar b { color: var(--gold-pale); font-size: 9px; }

.signal-kitchen-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 7px; padding: 8px; }
.signal-kitchen-stage { min-width: 0; border: 1px solid #3c5b84; background: #01040a; }
.signal-kitchen-stage > header { display: flex; justify-content: space-between; gap: 7px; padding: 5px 7px; border-bottom: 1px solid #3c5b84; color: #557191; font-size: 7px; background: repeating-linear-gradient(-45deg, #020817 0 5px, #071329 5px 6px); }
.signal-kitchen-stage > header b { color: var(--gold); }
.japanese-kitchen-scene { position: relative; min-height: 330px; overflow: hidden; border-bottom: 1px solid #34547e; background: linear-gradient(90deg, transparent 0 12%, rgba(23,79,154,.25) 12% 12.5%, transparent 12.5% 87%, rgba(23,79,154,.25) 87% 87.5%, transparent 87.5%), repeating-linear-gradient(0deg, rgba(103,170,255,.035) 0 1px, transparent 1px 5px), radial-gradient(circle at 73% 22%, rgba(232,184,62,.08), transparent 18%), #020713; box-shadow: inset 0 0 32px #000; }
.japanese-kitchen-scene::before { content: "深夜営業 // OPEN 00:00—??:??"; position: absolute; z-index: 7; left: 8px; top: 7px; color: #3f5d82; font-size: 6px; letter-spacing: .08em; }
.japanese-kitchen-scene::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 52px; height: 4px; background: var(--blue); box-shadow: 0 5px 0 #000, 0 8px 0 #173b70; }
.kitchen-noren { position: absolute; z-index: 5; left: 50%; top: 0; display: flex; gap: 2px; width: 183px; transform: translateX(-50%); }
.kitchen-noren i { position: relative; display: grid; width: 60px; height: 74px; place-items: center; border: 1px solid var(--gold); border-top: 0; color: var(--gold-pale); font-size: 24px; font-style: normal; background: repeating-linear-gradient(90deg, #071a35 0 9px, #0d2852 9px 10px); box-shadow: 2px 3px 0 #000; }
.kitchen-noren i::after { content: ""; position: absolute; left: 50%; bottom: -14px; border-left: 29px solid transparent; border-right: 29px solid transparent; border-top: 14px solid #071a35; transform: translateX(-50%); }
.kitchen-lantern { position: absolute; z-index: 6; right: 8%; top: 29px; display: grid; width: 42px; height: 66px; place-items: center; border: 2px solid var(--gold); border-radius: 18px; color: #000; background: var(--gold-pale); box-shadow: inset 0 7px 0 var(--gold), inset 0 -7px 0 var(--gold), 0 0 14px rgba(232,184,62,.32); animation: kitchen-lantern-sway 3.8s steps(5) infinite; }
.kitchen-lantern::before { content: ""; position: absolute; left: 50%; top: -29px; width: 1px; height: 28px; background: var(--gold); }
.kitchen-lantern span { font-size: 17px; font-weight: bold; writing-mode: vertical-rl; }
.kitchen-shelf { position: absolute; left: 6%; top: 100px; display: flex; align-items: end; gap: 7px; width: 31%; height: 73px; padding: 0 8px 7px; border-bottom: 5px solid #174f9a; }
.kitchen-shelf::before { content: "調味料"; position: absolute; left: 4px; top: -10px; color: #43658d; font-size: 6px; }
.kitchen-shelf i { display: block; width: 21px; height: 42px; border: 2px solid #315d96; border-radius: 5px 5px 1px 1px; background: repeating-linear-gradient(0deg, #061329 0 7px, #0c2550 7px 9px); box-shadow: inset 0 9px 0 var(--gold), 2px 2px 0 #000; }
.kitchen-shelf i:nth-child(2) { height: 54px; }
.kitchen-shelf i:nth-child(3) { height: 34px; border-color: var(--gold); }
.kitchen-shelf i:nth-child(4) { height: 47px; }
.kitchen-window { position: absolute; right: 6%; top: 113px; display: grid; width: 26%; height: 80px; place-items: center; border: 5px solid #061329; outline: 1px solid #31567f; color: #4a6484; font-size: 7px; line-height: 1.5; text-align: center; background: linear-gradient(90deg, transparent 49%, #174f9a 49% 51%, transparent 51%), linear-gradient(transparent 49%, #174f9a 49% 51%, transparent 51%), radial-gradient(circle at 70% 27%, var(--gold) 0 2px, transparent 3px), #00030a; }
.kitchen-stove { position: absolute; z-index: 4; left: 50%; bottom: 55px; width: 164px; height: 92px; border: 3px solid #315b8c; background: repeating-linear-gradient(90deg, #020817 0 18px, #071a35 18px 20px); box-shadow: inset 0 -14px 0 #000, 5px 5px 0 #000; transform: translateX(-50%); }
.kitchen-stove::after { content: "火力_03"; position: absolute; right: 5px; bottom: 3px; color: var(--gold); font-size: 6px; }
.kitchen-pot { position: absolute; left: 50%; bottom: 35px; width: 96px; height: 42px; border: 3px solid var(--blue-pale); border-radius: 4px 4px 39px 39px; background: repeating-linear-gradient(90deg, #061329 0 11px, #174f9a 11px 13px); box-shadow: inset 0 7px 0 #000, 4px 4px 0 #000; transform: translateX(-50%); }
.kitchen-pot::before, .kitchen-pot::after { content: ""; position: absolute; top: 10px; width: 24px; height: 8px; border: 3px solid var(--blue-pale); background: #061329; }
.kitchen-pot::before { left: -29px; }
.kitchen-pot::after { right: -29px; }
.kitchen-pot b { position: absolute; left: 50%; top: 14px; color: var(--gold-pale); font-size: 10px; transform: translateX(-50%); }
.kitchen-pot b::after { content: "MAXX//食"; }
.kitchen-steam { position: absolute; z-index: 6; left: 50%; bottom: 77px; color: var(--blue-pale); font-size: 20px; font-weight: bold; opacity: .25; animation: kitchen-steam-rise 1.5s steps(5) infinite; }
.kitchen-steam--one { margin-left: -31px; }
.kitchen-steam--two { margin-left: -5px; animation-delay: -.5s; }
.kitchen-steam--three { margin-left: 22px; animation-delay: -1s; }
.kitchen-counter { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 54px; background: repeating-linear-gradient(90deg, #061329 0 28px, #071a35 28px 30px); box-shadow: inset 0 5px 0 #315d96; }
.kitchen-board { position: absolute; left: 13%; top: 13px; width: 75px; height: 27px; border: 2px solid var(--gold); background: #0c2550; box-shadow: 3px 3px 0 #000; }
.kitchen-knife { position: absolute; left: calc(13% + 13px); top: 5px; z-index: 2; width: 57px; height: 7px; background: var(--blue-pale); box-shadow: 0 4px 0 #000; transform: rotate(-7deg); }
.kitchen-knife::after { content: ""; position: absolute; left: -19px; width: 20px; height: 7px; background: var(--gold); }
.kitchen-serving-bowl { position: absolute; right: 13%; top: 8px; width: 65px; height: 30px; border: 3px solid var(--gold-pale); border-radius: 3px 3px 30px 30px; background: #174f9a; box-shadow: inset 0 7px 0 #000, 3px 3px 0 #000; }
.kitchen-ingredients { position: absolute; z-index: 7; left: 6px; bottom: 57px; display: grid; gap: 3px; }
.kitchen-ingredients span { width: max-content; padding: 2px 4px; border-left: 3px solid var(--gold); color: #7694b9; font-size: 6px; background: rgba(0,3,10,.82); }
.kitchen-scene-status { position: absolute; z-index: 8; right: 5px; bottom: 57px; max-width: 42%; padding: 3px 5px; border: 1px solid #294d7d; color: var(--gold); font-size: 6px; text-align: right; background: rgba(0,3,10,.9); }

.japanese-kitchen-scene.is-cooking .kitchen-pot { animation: kitchen-pot-boil .36s steps(2) infinite; }
.japanese-kitchen-scene.is-cooking .kitchen-steam { opacity: .85; }
.japanese-kitchen-scene.is-served .kitchen-serving-bowl { animation: kitchen-dish-served .55s steps(4); }
.japanese-kitchen-scene.is-served .kitchen-pot { filter: brightness(1.4); }
.japanese-kitchen-scene.is-burned { animation: kitchen-burned .18s steps(2) 6; filter: grayscale(.75) brightness(.65); }
.japanese-kitchen-scene.is-burned .kitchen-steam { color: var(--gold); opacity: 1; }
.japanese-kitchen-scene.is-paused { filter: grayscale(.45) brightness(.72); }

.kitchen-order-terminal { position: relative; min-height: 112px; padding: 7px; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(23,79,154,.08) 4px 5px), #00030a; }
.kitchen-order-terminal > header { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1px dotted #34547e; color: #59728f; font-size: 7px; }
.kitchen-order-terminal > header b { color: var(--gold-pale); }
.kitchen-combo { display: flex; min-height: 60px; align-items: center; justify-content: center; gap: 6px; padding: 7px 3px 4px; }
.kitchen-combo:empty::after { content: "NO ORDER SIGNAL"; color: #334b69; font-size: 8px; }
.kitchen-combo kbd { position: relative; display: grid; width: clamp(33px, 7vw, 51px); height: 48px; place-items: center; border: 2px solid #315d96; color: var(--blue-pale); font: bold 19px/1 "Lucida Console", monospace; background: #061329; box-shadow: inset 3px 3px 0 #174f9a, inset -3px -3px 0 #000, 3px 3px 0 #000; }
.kitchen-combo kbd small { position: absolute; right: 3px; bottom: 2px; color: #597493; font-size: 6px; }
.kitchen-combo kbd.is-current { border-color: var(--gold); color: var(--gold-pale); animation: kitchen-combo-current .62s steps(2) infinite; }
.kitchen-combo kbd.is-complete { border-color: var(--gold); color: #000; background: var(--gold); box-shadow: inset 3px 3px 0 var(--gold-pale), inset -3px -3px 0 #8f6914, 3px 3px 0 #000; }
.kitchen-combo kbd.is-complete small { color: #4d3906; }
.kitchen-combo kbd.is-error { border-color: #fff; color: #fff; background: #000; animation: kitchen-combo-error .16s steps(2) 7; }
.kitchen-timer { height: 8px; overflow: hidden; border: 1px solid #31567f; background: #000; }
.kitchen-timer i { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 8px, var(--gold-pale) 8px 10px); }

.signal-kitchen-console { display: grid; align-content: start; gap: 7px; }
.signal-kitchen-console > section { border: 1px solid #345680; background: #01040a; }
.signal-kitchen-console h3 { margin: 0; padding: 5px 6px; border-bottom: 1px solid #345680; color: var(--gold); font-size: 8px; text-align: center; background: #061329; }
.kitchen-dpad { display: grid; grid-template-columns: repeat(3, 35px); grid-template-rows: repeat(2, 35px); justify-content: center; gap: 3px; padding: 8px 5px 3px; }
.kitchen-dpad button { padding: 2px; line-height: 1.15; }
.kitchen-dpad button:nth-child(1) { grid-column: 2; }
.kitchen-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.kitchen-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.kitchen-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.kitchen-input-panel > p { margin: 0; padding: 5px 6px 7px; color: #536c8e; font-size: 6px; line-height: 1.5; text-align: center; }
.kitchen-level-panel p { display: grid; grid-template-columns: 22px 1fr; gap: 2px 6px; margin: 0; padding: 5px 6px; border-bottom: 1px dotted #203b60; color: #4f6684; }
.kitchen-level-panel p > b { grid-row: 1 / 3; display: grid; place-items: center; border: 1px solid #2c4b73; color: #577393; font-size: 11px; }
.kitchen-level-panel p > span { font-size: 7px; font-weight: bold; }
.kitchen-level-panel p > small { font-size: 5px; }
.kitchen-level-panel p.is-current { color: var(--gold-pale); background: rgba(23,79,154,.2); }
.kitchen-level-panel p.is-current > b { border-color: var(--gold); color: #000; background: var(--gold); }
.kitchen-message { min-height: 94px; padding: 7px; box-shadow: inset 0 0 16px #000; }
.kitchen-message span { color: var(--blue-bright); font-size: 6px; }
.kitchen-message strong { display: block; margin: 6px 0; color: var(--gold-pale); font-size: 9px; line-height: 1.2; }
.kitchen-message p { margin: 0; color: #617895; font-size: 6px; line-height: 1.5; }
.kitchen-action { min-height: 39px; border-color: var(--gold) !important; padding: 7px; color: var(--gold-pale) !important; animation: kitchen-action-pulse 1.3s steps(2) infinite; }
.kitchen-action:hover { color: #000 !important; }
.kitchen-action:disabled { color: #51647e !important; background: #020817 !important; animation: none; }
.signal-kitchen-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid #263f62; color: #4c607c; font-size: 7px; background: #000; }
.signal-kitchen-footer span:last-child { color: var(--gold); }
.signal-kitchen-game[data-kitchen-level="medium"] .kitchen-shift-progress i { background: repeating-linear-gradient(90deg, var(--gold) 0 7px, var(--blue) 7px 9px); }
.signal-kitchen-game[data-kitchen-level="hard"] .kitchen-shift-progress i { background: repeating-linear-gradient(90deg, var(--gold) 0 5px, #fff 5px 7px, var(--blue) 7px 9px); animation: kitchen-hard-shift .4s steps(2) infinite; }
.signal-kitchen-game.is-time-critical .kitchen-timer { border-color: var(--gold); animation: kitchen-critical .18s steps(2) infinite; }
.signal-kitchen-game.is-time-critical #kitchen-time { color: #fff; animation: blink .22s steps(1) infinite; }
.signal-kitchen-game.is-service-lost .kitchen-order-terminal { filter: grayscale(.7) brightness(.63); }

/* The unnamed route is deliberately less stable than the rest of the terminal. */
body.void-open { background-color: #000106; }
body.void-open .noise { opacity: .14; animation-duration: .11s; }
body.void-open .site-shell::before { content: "/// ROUTE HAS NO ORIGIN // SOMETHING FOLLOWED THE REQUEST ///"; color: rgba(232,184,62,.45); }

.void-view {
  position: relative;
  isolation: isolate;
  min-height: 960px;
  overflow: hidden;
  border-color: #5e7391;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(103,170,255,.025) 2px 3px),
    radial-gradient(circle at 82% 43%, rgba(23,79,154,.16), transparent 22%),
    #000106;
  box-shadow: 13px 7px 0 #000, -3px 14px 0 #030c1b;
  animation: void-boot .7s steps(7), void-jolt 9s steps(1) 1s infinite;
}
.void-view::before { content: "HTTP/0.0 299 ROUTE FORGOTTEN // CACHE AGE: -6934 DAYS"; position: relative; z-index: 5; color: #516077; background: #000; }
.void-view::after { content: ""; position: absolute; z-index: 12; left: 0; right: 0; top: 31%; height: 3px; opacity: .65; background: var(--blue-bright); box-shadow: 28px 2px 0 #000, -76px 5px 0 var(--gold), 190px -2px 0 #000; mix-blend-mode: screen; pointer-events: none; animation: void-scan-tear 5.8s steps(1) infinite; }

.void-damage { position: absolute; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.void-damage > i { position: absolute; height: 8px; background: #000; box-shadow: 5px 2px 0 rgba(23,79,154,.6), -3px -1px 0 rgba(232,184,62,.35); animation: damage-bite 6.4s steps(1) infinite; }
.void-damage > i:nth-child(1) { width: 31%; left: -5%; top: 18%; }
.void-damage > i:nth-child(2) { width: 17%; right: -2%; top: 34%; animation-delay: -1.3s; }
.void-damage > i:nth-child(3) { width: 9%; left: 39%; top: 57%; animation-delay: -4.2s; }
.void-damage > i:nth-child(4) { width: 26%; right: 8%; bottom: 14%; animation-delay: -2.7s; }
.void-damage > i:nth-child(5) { width: 5%; left: 3%; bottom: 31%; animation-delay: -3.8s; }
.void-damage > i:nth-child(6) { width: 13%; right: 34%; top: 8%; animation-delay: -.5s; }
.void-shard { position: absolute; color: rgba(103,170,255,.35); font-size: 7px; letter-spacing: .14em; white-space: nowrap; animation: shard-shiver 3.7s steps(1) infinite; }
.void-shard--one { right: 3px; top: 21%; }
.void-shard--two { left: 4px; bottom: 7%; color: rgba(232,184,62,.35); animation-delay: -1.2s; }
.void-shard--three { right: 11%; bottom: 38%; opacity: .15; writing-mode: vertical-rl; animation-delay: -2.5s; }

.void-header { position: relative; z-index: 3; display: flex; min-height: 92px; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px; border-bottom: 1px solid #344b6c; background: repeating-linear-gradient(90deg, #01030a 0 13px, #061329 13px 14px); }
.void-header > div { min-width: 0; }
.void-header span { color: #49698f; font-size: 8px; letter-spacing: .18em; }
.void-header small { display: block; margin-top: 5px; color: var(--gold); font-size: 7px; letter-spacing: .12em; animation: text-dropout 2.7s steps(1) infinite; }
.void-header h1 { position: relative; width: max-content; max-width: 100%; margin: 4px 0 0; color: #d9e8ff; font-size: clamp(25px, 5vw, 43px); line-height: .82; letter-spacing: -.08em; text-shadow: 4px 2px 0 #102e5b, -2px 0 0 #7e641d; transform: skewX(-4deg); animation: void-title-slip 4.1s steps(1) infinite; }
.void-header h1::before, .void-header h1::after { content: attr(data-void-text); position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.void-header h1::before { color: var(--gold); clip-path: inset(18% 0 58% 0); transform: translateX(5px); animation: void-title-top 2.8s steps(1) infinite; }
.void-header h1::after { color: var(--blue-bright); clip-path: inset(63% 0 13% 0); transform: translateX(-4px); animation: void-title-bottom 3.9s steps(1) infinite reverse; }
.void-header button, .void-warning button { position: relative; z-index: 15; flex: 0 0 auto; border: 1px solid #84681d; border-radius: 0; padding: 7px 9px; color: var(--gold-pale); font: bold 8px "Lucida Console", monospace; background: #06080c; box-shadow: 3px 3px 0 #10244a; }
.void-header button:hover, .void-warning button:hover { color: #000; background: var(--gold); box-shadow: -3px 2px 0 var(--blue); }

.void-statusbar { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 8px; padding: 5px 9px; border-bottom: 1px dashed #243955; color: #4c5f79; font-size: 8px; background: #000; }
.void-statusbar b { color: var(--gold); }
.void-statusbar .void-observer { color: #fff; animation: observer-alert .9s steps(1) infinite; }

.void-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 218px; gap: 7px; padding: 7px; }
.void-log { min-width: 0; border: 1px solid #3d5577; background: #01030a; box-shadow: inset 0 0 35px #000; }
.void-log > header { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-bottom: 1px solid #3d5577; color: var(--gold); font-size: 8px; background: repeating-linear-gradient(-45deg, #030813 0 4px, #071329 4px 5px); }
.void-log > header span:last-child { color: #5c6e86; }
.void-log-body { counter-reset: old-log; padding: 6px 9px 8px 23px; background: linear-gradient(90deg, transparent 0 20px, rgba(103,170,255,.18) 20px 21px, transparent 21px), repeating-linear-gradient(0deg, transparent 0 19px, rgba(23,79,154,.06) 19px 20px); }
.log-entry { counter-increment: old-log; position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; min-height: 58px; padding: 10px 7px 8px; border-bottom: 1px dotted #233b5e; }
.log-entry::before { content: counter(old-log, decimal-leading-zero); position: absolute; left: -19px; top: 11px; color: #293d58; font-size: 7px; }
.log-entry time { color: var(--gold); font-size: 8px; font-weight: bold; }
.log-entry p { margin: 0; color: #859bb9; font-size: 9px; line-height: 1.45; }
.log-entry strong { color: #d8e9ff; text-shadow: 2px 0 #153e78; }
.log-entry em { color: var(--gold-pale); font-style: normal; text-decoration: underline; }
.log-entry--shifted { left: 5px; margin-right: -5px; border-left: 2px solid #173c72; }
.log-entry--damaged { margin: 0 -8px 0 3px; background: repeating-linear-gradient(90deg, transparent 0 21px, rgba(23,79,154,.12) 21px 23px); transform: skewX(-1deg); }
.log-entry--damaged p { animation: log-corrupt 5.3s steps(1) infinite; }
.log-entry--warning { border: 1px dashed #735b1d; margin-top: 7px; background: rgba(232,184,62,.035); }
.log-entry--sealed { min-height: 67px; overflow: hidden; border-bottom: 0; }
.log-entry--sealed::after { content: "[ CONTENT SEALED BY UNKNOWN PROCESS ]"; position: absolute; left: 104px; right: 4px; top: 11px; bottom: 9px; display: grid; place-items: center; border: 1px solid #1f3350; color: #52627a; font-size: 7px; background: repeating-linear-gradient(90deg, #000 0 5px, #030a16 5px 7px); animation: seal-crawl .7s steps(2) infinite; }
.log-entry--sealed p { opacity: 0; }
.log-entry--sealed.is-recovered::after { display: none; }
.log-entry--sealed.is-recovered p { opacity: 1; color: #fff; text-shadow: 3px 0 #174f9a, -2px 0 #8a691b; animation: recovered-flicker 1.8s steps(1) infinite; }
.void-log > footer { padding: 6px 8px; border-top: 1px solid #3d5577; color: #506682; font-size: 7px; text-align: right; background: #000; }
.void-log > footer span { color: var(--gold); }

.void-side { display: grid; align-content: start; gap: 7px; }
.void-side > section { border: 1px solid #344c70; background: #01030a; }
.void-aperture { position: relative; min-height: 210px; overflow: hidden; background: radial-gradient(circle, #05070b 0 22%, #071329 23%, #000 48%, #020817 70%); }
.void-aperture::before { content: "SIGNAL TOPOLOGY // IMPOSSIBLE"; position: absolute; z-index: 3; left: 5px; top: 5px; color: #526782; font-size: 6px; }
.void-aperture::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(185,216,255,.04) 4px 5px); animation: aperture-drift .3s steps(2) infinite; }
.void-ring { position: absolute; z-index: 1; left: 50%; top: 49%; border: 1px dashed #23538d; border-radius: 43% 57% 61% 39%; transform: translate(-50%, -50%); }
.void-ring--outer { width: 175px; height: 142px; animation: void-ring-turn 9s linear infinite; }
.void-ring--inner { width: 116px; height: 102px; border-color: rgba(232,184,62,.42); animation: void-ring-turn 4.6s linear infinite reverse; }
.void-hole { position: absolute; z-index: 3; left: 50%; top: 49%; display: grid; width: 65px; height: 74px; place-items: center; border: 1px solid #101b2c; border-radius: 51% 38% 58% 43%; color: #1d2b3e; font-size: 7px; text-align: center; background: #000; box-shadow: 0 0 16px 7px #000, 0 0 0 2px rgba(23,79,154,.22); transform: translate(-50%, -50%); animation: void-mouth 3.3s steps(5) infinite; }
.void-aperture code { position: absolute; z-index: 4; right: 6px; bottom: 5px; color: var(--gold); font: 7px "Lucida Console", monospace; }
.dead-directory h2, .void-warning h2, .research-dossier h2 { margin: 0; padding: 5px 6px; border-bottom: 1px solid #344c70; color: var(--gold); font-size: 8px; background: #061125; }
.research-dossier dl { margin: 0; padding: 5px 6px; }
.research-dossier dl div { display: flex; justify-content: space-between; gap: 6px; padding: 4px 1px; border-bottom: 1px dotted #1c304e; font-size: 7px; }
.research-dossier dt { color: #526883; }
.research-dossier dd { margin: 0; color: var(--blue-pale); text-align: right; }
.research-dossier dl div:last-child dd { color: var(--gold); animation: observer-alert 1.7s steps(1) infinite; }
.research-dossier p { margin: 0 6px 6px; padding: 7px; border: 1px dashed #735b1d; color: var(--gold-pale); font-size: 7px; line-height: 1.5; background: rgba(232,184,62,.035); }
.dead-directory ul { margin: 0; padding: 5px; list-style: none; }
.dead-directory li { display: flex; justify-content: space-between; gap: 5px; padding: 5px 3px; border-bottom: 1px dotted #1c304e; color: #7086a4; font-size: 7px; }
.dead-directory li::before { content: "[x]"; margin-right: 4px; color: #315a8f; }
.dead-directory li span { margin-left: auto; color: #495b73; }
.dead-directory .directory-corrupt { display: block; overflow: hidden; color: var(--gold-pale); white-space: nowrap; text-shadow: 4px 0 #174f9a; animation: directory-slip 2.4s steps(1) infinite; }
.void-warning p { margin: 0; padding: 7px 8px 0; color: #7287a4; font-size: 8px; line-height: 1.4; }
.void-warning p:first-of-type { color: var(--gold-pale); }
.void-warning button { width: calc(100% - 12px); margin: 9px 6px 7px; }
.void-footer { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 8px; margin: 0 7px 7px; padding: 6px 8px; border: 1px solid #2d4567; color: #4f617a; font-size: 7px; background: #000; }
.void-footer span:first-child { color: var(--gold); animation: observer-alert 1.7s steps(1) infinite reverse; }
.void-footer span:last-child { color: #7890af; }

.site-footer {
  display: flex;
  width: min(1130px, calc(100% - 24px));
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 24px;
  padding: 7px 186px;
  color: #456083;
  font-size: 9px;
}
.site-footer span:nth-child(2) { color: var(--gold); animation: whisper-fade 4.2s steps(2) infinite; }

.error-page { display: grid; place-items: center; padding: 20px; }
.error-terminal { width: min(620px, 100%); }
.error-box { padding: 42px 20px; border: 1px solid var(--blue-pale); text-align: center; background: #01040a; box-shadow: 8px 8px 0 #07172f; }
.error-box p { color: var(--blue-bright); letter-spacing: .25em; }
.error-box h1 { margin: 15px 0 0; color: #fff; font: italic 900 90px/.9 Arial Black, sans-serif; text-shadow: 6px 6px 0 var(--blue), -2px -2px 0 var(--gold); }
.error-box h2 { margin: 7px 0 25px; color: var(--gold); }
.error-code { margin: 0 auto 25px; padding: 9px; border: 1px dashed var(--line); color: var(--muted); }
.error-box a { display: inline-block; padding: 8px 12px; border: 1px solid var(--gold); color: var(--gold-pale); text-decoration: none; background: #061329; }
.error-box a:hover { color: #000; background: var(--gold); }

@keyframes boot-screen-in { from { opacity: 0; clip-path: inset(49% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes boot-screen-out { 0% { opacity: 1; clip-path: inset(0); transform: none; } 36% { opacity: .9; clip-path: inset(46% 0 45% 0); transform: translateX(7px); } 64% { opacity: .55; clip-path: inset(49% 0 48% 0); transform: translateX(-12px) scaleX(1.08); } 100% { opacity: 0; clip-path: inset(50% 0); transform: translateX(25px) scaleX(.4); } }
@keyframes boot-grid-drift { to { background-position: 0 18px, 18px 0; } }
@keyframes boot-tear-jump { 0%, 68%, 100% { top: 27%; opacity: .15; transform: scaleX(.24); } 69% { top: 27%; opacity: .65; transform: scaleX(1); } 73% { top: 71%; opacity: .3; transform: scaleX(.62); } 77% { top: 14%; opacity: .6; transform: scaleX(.18); } 80% { opacity: 0; } }
@keyframes boot-title-glitch { 0%, 74%, 100% { opacity: .25; transform: translateX(4px); } 75% { opacity: 1; transform: translateX(-10px); } 79% { transform: translateX(7px); } 82% { opacity: 0; } }
@keyframes boot-ring-spin { to { transform: rotate(360deg); } }
@keyframes boot-core-pulse { 50% { border-color: var(--blue-bright); background: #071a35; box-shadow: 0 0 0 3px #061329, 0 0 0 4px var(--gold), 0 0 11px rgba(103,170,255,.55); } }
@keyframes home-reconnect-main { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-12px); } 34% { opacity: .7; clip-path: inset(0 58% 0 0); } 57% { clip-path: inset(0 12% 52% 0); transform: translateX(4px); } 76% { clip-path: inset(61% 0 4% 0); } 100% { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes home-reconnect-rail { 0%, 18% { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(-9px); } 44% { opacity: .8; clip-path: inset(51% 0 0); } 68% { clip-path: inset(9% 0 33%); transform: translateX(5px); } 100% { opacity: 1; clip-path: inset(0); transform: none; } }
@keyframes mine-preview-scan { 0%, 72%, 100% { filter: none; } 73% { filter: brightness(1.8); transform: translateX(1px); } 78% { filter: none; transform: none; } }
@keyframes mine-preview-danger { 50% { color: var(--gold-pale); background: #000; transform: scale(.82); } }
@keyframes mines-game-load { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 36% { opacity: 1; clip-path: inset(0 64% 48% 0); } 68% { clip-path: inset(0 13% 19% 0); } 100% { clip-path: inset(0); } }
@keyframes mines-screen-tear { 0%, 82%, 100% { opacity: 0; transform: scaleX(.2); top: 54%; } 83% { opacity: .55; transform: scaleX(1); } 86% { opacity: .25; transform: scaleX(.45); top: 22%; } 90% { opacity: 0; top: 78%; } }
@keyframes mine-cell-open { from { opacity: .25; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes mine-flag-pulse { 50% { filter: brightness(1.18); } }
@keyframes mine-danger { 50% { border-color: var(--gold); filter: brightness(1.4); } }
@keyframes mine-triggered { 50% { transform: translateX(3px); filter: invert(0); } }
@keyframes mine-win-cell { 50% { color: #fff; background: var(--blue); } }
@keyframes mines-overlay-in { from { opacity: 0; clip-path: inset(50% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes mines-field-crash { 50% { transform: translateX(5px); filter: contrast(1.6); } }
@keyframes mines-reset-pulse { 50% { border-color: var(--blue-bright); color: #fff; } }
@keyframes roulette-game-load { 0% { opacity: 0; clip-path: circle(2% at 31% 34%); } 42% { opacity: 1; clip-path: circle(22% at 31% 34%); } 72% { clip-path: circle(67% at 31% 34%); } 100% { clip-path: circle(120% at 31% 34%); } }
@keyframes roulette-signal-tear { 0%, 83%, 100% { opacity: 0; transform: scaleX(.15); top: 48%; } 84% { opacity: .6; transform: scaleX(1); } 87% { opacity: .25; transform: scaleX(.55); top: 19%; } 90% { opacity: 0; top: 78%; } }
@keyframes rogue-wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(var(--roulette-stop)); } }
@keyframes rogue-ball-spin { 0% { transform: translateX(-50%) rotate(0deg); } 74% { transform: translateX(-50%) rotate(-1150deg); } 100% { transform: translateX(-50%) rotate(-1320deg); } }
@keyframes roulette-void-result { 50% { transform: translateX(4px); filter: invert(1); } }
@keyframes roulette-action-pulse { 50% { border-color: var(--blue-bright); color: #fff; box-shadow: inset 0 0 8px rgba(103,170,255,.25); } }
@keyframes roulette-goal-clear { 50% { filter: brightness(1.5); } }
@keyframes snake-load { 0% { opacity: 0; clip-path: inset(0 50% 100% 50%); } 42% { opacity: 1; clip-path: inset(0 34% 45% 34%); } 73% { clip-path: inset(0 5% 12% 5%); } 100% { clip-path: inset(0); } }
@keyframes snake-screen-tear { 0%, 84%, 100% { opacity: 0; transform: scaleX(.2); top: 37%; } 85% { opacity: .5; transform: scaleX(1); } 88% { opacity: .25; transform: scaleX(.48); top: 72%; } 91% { opacity: 0; top: 19%; } }
@keyframes snake-segment-live { 50% { filter: brightness(1.12); } }
@keyframes snake-head-live { 50% { filter: brightness(1.3); box-shadow: inset 3px 3px 0 #ffe79b, inset -3px -3px 0 #8f6914, 0 0 9px rgba(232,184,62,.8); } }
@keyframes snake-food-pulse { 50% { opacity: .35; transform: scale(.65); } }
@keyframes snake-crash { 50% { transform: translateX(5px); filter: invert(.15); } }
@keyframes snake-victory { 50% { background: var(--gold); border-color: var(--gold-pale); } }
@keyframes snake-overlay-in { from { opacity: 0; clip-path: inset(50% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes snake-action-pulse { 50% { border-color: var(--blue-bright); color: #fff; } }
@keyframes launch-panel-pulse { 0%, 100% { border-color: var(--gold); box-shadow: 0 0 0 2px #061329, 0 0 8px rgba(232,184,62,.25), inset 0 0 13px rgba(23,79,154,.3); } 50% { border-color: var(--gold-pale); box-shadow: 0 0 0 2px var(--blue), 0 0 17px rgba(232,184,62,.58), inset 0 0 18px rgba(23,79,154,.45); } }
@keyframes launch-arrow-blink { 50% { color: #fff; transform: translateY(2px); } }
@keyframes launch-button-pulse { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.22); transform: scale(1.025); } }
@keyframes poker-load { 0% { opacity: 0; clip-path: inset(50% 0 50% 0); } 45% { opacity: 1; clip-path: inset(22% 0 60% 0); } 72% { clip-path: inset(72% 0 5% 0); } 100% { clip-path: inset(0); } }
@keyframes poker-tear { 0%, 82%, 100% { opacity: 0; transform: scaleX(.2); top: 42%; } 83% { opacity: .6; transform: scaleX(1); } 86% { opacity: .3; transform: scaleX(.55); top: 68%; } 89% { opacity: 0; top: 17%; } }
@keyframes streak-node { 50% { filter: brightness(1.5); transform: translateY(-1px); } }
@keyframes arcade-boot { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 45% { opacity: 1; clip-path: inset(0 43% 0 0); } 70% { clip-path: inset(0 11% 0 0); } 100% { clip-path: inset(0); } }
@keyframes game-card-scan { from { top: -3px; } to { top: calc(100% + 3px); } }
@keyframes kitchen-key { 0%, 24%, 100% { color: var(--blue-pale); background: #020817; transform: translateY(0); } 25%, 49% { color: #000; background: var(--gold); transform: translateY(2px); } }
@keyframes maze-runner-preview { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes maze-preview-mouth { 0%, 100% { transform: scaleY(.12); } 50% { transform: scaleY(1); } }
@keyframes maze-ghost { 50% { color: #fff; border-color: var(--gold); transform: translateX(-4px); } }
@keyframes pending-module { 50% { opacity: .42; } }
@keyframes maze-game-load { 0% { opacity: 0; clip-path: inset(48% 48% 48% 48%); } 38% { opacity: 1; clip-path: inset(22% 37% 59% 8%); } 69% { clip-path: inset(8% 5% 23% 31%); } 100% { clip-path: inset(0); } }
@keyframes maze-screen-tear { 0%, 84%, 100% { opacity: 0; transform: scaleX(.2); top: 39%; } 85% { opacity: .55; transform: scaleX(1); } 88% { opacity: .2; transform: scaleX(.48); top: 71%; } 91% { opacity: 0; top: 18%; } }
@keyframes maze-power-packet { 50% { opacity: .35; transform: translate(-50%, -50%) scale(.7); } }
@keyframes lost-maze-mouth { 0%, 100% { transform: scaleY(.08); } 50% { transform: scaleY(1); } }
@keyframes maze-process-drift { 50% { transform: translateY(2px); filter: brightness(1.18); } }
@keyframes maze-process-frightened { 50% { color: #fff; background: var(--blue); transform: translateX(2px); } }
@keyframes maze-overlay-in { from { opacity: 0; clip-path: inset(50% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes maze-action-pulse { 50% { border-color: var(--blue-bright); color: #fff; } }
@keyframes maze-field-crash { 50% { transform: translateX(5px); filter: contrast(1.6); } }
@keyframes maze-board-clear { 50% { box-shadow: 6px 6px 0 #000, 0 0 18px rgba(232,184,62,.7); filter: brightness(1.2); } }
@keyframes signal-kitchen-load { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 34% { opacity: 1; clip-path: inset(0 57% 52% 0); } 68% { clip-path: inset(31% 9% 8% 0); } 100% { clip-path: inset(0); } }
@keyframes kitchen-screen-tear { 0%, 85%, 100% { opacity: 0; transform: scaleX(.2); top: 47%; } 86% { opacity: .55; transform: scaleX(1); } 89% { opacity: .25; transform: scaleX(.47); top: 72%; } 92% { opacity: 0; top: 21%; } }
@keyframes kitchen-lantern-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); filter: brightness(1.15); } }
@keyframes kitchen-steam-rise { 0% { opacity: 0; transform: translateY(7px) scale(.7); } 25% { opacity: .8; } 100% { opacity: 0; transform: translateY(-33px) translateX(6px) scale(1.2); } }
@keyframes kitchen-pot-boil { 50% { transform: translateX(-50%) translateY(-2px); filter: brightness(1.12); } }
@keyframes kitchen-dish-served { 0% { transform: translateX(65px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes kitchen-burned { 50% { transform: translateX(5px); filter: invert(.12) contrast(1.7); } }
@keyframes kitchen-combo-current { 50% { color: #000; background: var(--gold); transform: translateY(-2px); } }
@keyframes kitchen-combo-error { 50% { transform: translateX(4px); filter: invert(1); } }
@keyframes kitchen-action-pulse { 50% { border-color: var(--blue-bright); color: #fff; box-shadow: 3px 3px 0 #000, 0 0 8px rgba(232,184,62,.35); } }
@keyframes kitchen-hard-shift { 50% { filter: brightness(1.6); transform: translateX(2px); } }
@keyframes kitchen-critical { 50% { transform: translateX(2px); filter: brightness(1.6); } }
@keyframes poker-eye { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(14px); } 75% { transform: translateX(5px); } }
@keyframes roulette-idle { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes snake-static { 0%, 77%, 100% { filter: none; } 78% { filter: brightness(2); transform: translateX(2px); } 81% { transform: none; } }
@keyframes packet-blink { 50% { opacity: .25; } }
@keyframes void-boot { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); transform: translateX(21px); } 35% { opacity: 1; clip-path: inset(12% 0 63% 0); } 62% { clip-path: inset(70% 0 3% 0); transform: translateX(-7px); } 100% { clip-path: inset(0); transform: none; } }
@keyframes void-jolt { 0%, 78%, 81%, 94%, 100% { transform: none; } 79% { transform: translateX(3px); } 80% { transform: translateX(-2px); } 95% { transform: translateY(1px); } }
@keyframes void-scan-tear { 0%, 81%, 100% { top: 31%; transform: scaleX(.32); opacity: 0; } 82% { top: 31%; transform: scaleX(1); opacity: .7; } 84% { top: 73%; transform: scaleX(.62); opacity: .3; } 86% { top: 12%; transform: scaleX(.15); opacity: .8; } 88% { opacity: 0; } }
@keyframes damage-bite { 0%, 68%, 73%, 100% { transform: translateX(0) scaleY(1); } 69% { transform: translateX(17px) scaleY(2); } 71% { transform: translateX(-8px) scaleY(.5); } }
@keyframes shard-shiver { 0%, 72%, 100% { transform: none; opacity: .35; } 73% { transform: translateX(-13px); opacity: 0; } 76% { transform: translateX(5px); opacity: .7; } }
@keyframes void-title-slip { 0%, 83%, 86%, 100% { transform: skewX(-4deg); } 84% { transform: translateX(-9px) skewX(6deg); } 85% { transform: translateX(5px) skewX(-9deg); } }
@keyframes void-title-top { 0%, 71%, 100% { transform: translateX(5px); opacity: .35; } 72% { transform: translateX(-13px); opacity: .9; } 76% { transform: translateX(9px); } }
@keyframes void-title-bottom { 0%, 86%, 100% { transform: translateX(-4px); opacity: .35; } 87% { transform: translateX(14px); opacity: 1; } 91% { transform: translateX(-8px); } }
@keyframes observer-alert { 0%, 47%, 100% { opacity: 1; } 48%, 57% { opacity: .15; } 58% { opacity: 1; color: var(--blue-bright); } }
@keyframes log-corrupt { 0%, 79%, 84%, 100% { transform: none; opacity: 1; } 80% { transform: translateX(8px); opacity: .35; } 82% { transform: translateX(-4px); color: var(--gold); } }
@keyframes seal-crawl { to { background-position: 7px 0; } }
@keyframes recovered-flicker { 0%, 74%, 80%, 100% { opacity: 1; } 75% { opacity: .08; } 77% { opacity: .7; transform: translateX(4px); } }
@keyframes aperture-drift { to { transform: translateY(5px); } }
@keyframes void-ring-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes void-mouth { 0%, 100% { border-radius: 51% 38% 58% 43%; transform: translate(-50%, -50%) scale(1); } 50% { border-radius: 37% 56% 42% 61%; transform: translate(-50%, -50%) scale(.89, 1.08); } }
@keyframes directory-slip { 0%, 72%, 100% { transform: none; } 73% { transform: translateX(-7px); } 76% { transform: translateX(11px); } 79% { transform: none; opacity: .3; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes terminal-row { from { opacity: 0; transform: translateX(8px); } }
@keyframes bus-pulse { 0%, 100% { height: 3px; opacity: .35; } 50% { height: 10px; opacity: 1; } }
@keyframes memory-write { 0%, 72% { background: #071329; } 73%, 84% { background: var(--gold); } 85%, 100% { background: var(--blue); } }
@keyframes mesh-scan { to { transform: rotate(360deg); } }
@keyframes node-pulse { 50% { border-color: var(--gold); } }
@keyframes panel-boot { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes signal-boot { from { opacity: 0; clip-path: inset(50% 0 50% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes route-pulse { 50% { background: var(--gold); box-shadow: -4px 0 0 var(--blue-bright); } }
@keyframes beacon-wave { 0%, 100% { height: 4px; opacity: .35; } 50% { height: 20px; opacity: 1; } }
@keyframes construction-kanji { 0%, 84%, 100% { transform: none; filter: none; } 85% { transform: translateX(-3px); filter: brightness(1.4); } 88% { transform: translateX(2px); } 90% { transform: none; } }
@keyframes construction-meter { 0%, 100% { width: 69%; background-position: 0 0; } 45% { width: 76%; } 72% { width: 73%; background-position: 12px 0; } }
@keyframes visitor-node { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes beacon-dossier-ring { to { transform: rotate(360deg); } }
@keyframes beacon-tx-shift { 0%, 82%, 100% { transform: none; opacity: .8; } 83% { transform: translateX(8px); opacity: .25; } 87% { transform: translateX(-3px); opacity: 1; } }
@keyframes listener-present { 0%, 79%, 100% { opacity: .8; } 80%, 84% { opacity: .15; } 85% { color: var(--gold); opacity: 1; } }
@keyframes grid-drift { to { background-position: 0 32px, 56px 0; } }
@keyframes radar-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbit-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes particle-rise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .8; } 82% { opacity: .35; } 100% { transform: translateY(-330px); opacity: 0; } }
@keyframes core-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-7px); } }
@keyframes beacon-ring { 0% { transform: translateX(-50%) scale(.35); opacity: .75; } 100% { transform: translateX(-50%) scale(2.7); opacity: 0; } }
@keyframes antenna-charge { 50% { border-color: var(--blue-bright); background: #0c2550; } }
@keyframes beacon-blink { 50% { opacity: .15; background: var(--blue-bright); } }
@keyframes module-flicker { 0%, 86%, 100% { background: #020712; } 87% { background: #123d78; } 90% { background: var(--gold); } 92% { background: #020712; } }
@keyframes body-scan { to { transform: translateY(111px); } }
@keyframes eye-scan { to { transform: translateX(24px); } }
@keyframes slot-data { to { transform: translateX(-32px); } }
@keyframes base-charge { 50% { box-shadow: inset 0 18px 0 #071a35, 0 0 8px rgba(232,184,62,.45); } }
@keyframes static-shift { 0% { background-position: 0 0; } 50% { background-position: 3px -2px; } 100% { background-position: -2px 3px; } }
@keyframes screen-flicker { 0%, 18%, 20%, 56%, 58%, 100% { opacity: 1; } 19% { opacity: .82; } 57% { opacity: .9; } }
@keyframes signal-ghost { 0%, 78%, 100% { opacity: .3; transform: none; } 79% { opacity: 0; transform: translateX(9px); } 83% { opacity: .7; transform: translateX(-3px); } }
@keyframes tear-jump { 0%, 72%, 100% { transform: translateY(0); opacity: .45; } 73% { transform: translateY(43px); opacity: .1; } 75% { transform: translateY(-18px); opacity: .6; } 77% { transform: translateY(0); opacity: .25; } }
@keyframes text-dropout { 0%, 83%, 100% { opacity: .7; } 84%, 87% { opacity: .08; } 88% { opacity: 1; transform: translateX(6px); } 90% { transform: none; } }
@keyframes terminal-breathe { 0%, 100% { border-color: var(--blue-pale); } 50% { border-color: #35567e; box-shadow: 5px 3px 0 #06152d; } }
@keyframes rail-scan { 0%, 100% { height: 3px; opacity: .3; } 50% { height: 21px; opacity: 1; } }
@keyframes warning-scan { 0% { left: -40px; } 100% { left: calc(100% + 5px); } }
@keyframes spectrum { 0%, 100% { height: 2px; opacity: .3; } 45% { height: 10px; opacity: 1; } }
@keyframes logo-tear { 0%, 88%, 100% { transform: none; opacity: .45; } 89% { transform: translateX(-19px); opacity: .9; } 92% { transform: translateX(11px); } 94% { transform: none; opacity: .2; } }
@keyframes logo-glitch { 0%, 89%, 100% { opacity: 0; transform: translateX(2px); } 90% { opacity: .8; transform: translateX(-6px); } 93% { opacity: .5; transform: translateX(5px); } 95% { opacity: 0; } }
@keyframes quality-drop { 0%, 64%, 100% { color: var(--blue-bright); opacity: .75; } 65%, 72% { color: var(--gold); opacity: .25; } 73% { opacity: 1; } }
@keyframes whisper-fade { 0%, 84%, 100% { opacity: .7; } 85% { opacity: 0; } 88% { opacity: 1; } }
@keyframes operator-portrait-dropout { 0%, 86%, 100% { filter: saturate(.76) contrast(1.2) brightness(.82) sepia(.06); transform: none; } 87% { filter: saturate(.2) contrast(1.7) brightness(.48); transform: translateX(-3px); } 89% { filter: saturate(1) contrast(1.35) brightness(.94); transform: translateX(2px); } 91% { transform: none; } }
@keyframes operator-signal-tear { 0%, 82%, 100% { top: 31%; opacity: .12; transform: scaleX(.35); } 83% { top: 31%; opacity: .82; transform: scaleX(1); } 85% { top: 58%; opacity: .55; transform: translateX(11px) scaleX(.72); } 87% { top: 74%; opacity: 0; transform: translateX(-8px) scaleX(.4); } }
@keyframes lost-media-pulse { 0%, 82%, 100% { transform: none; filter: none; } 83% { transform: translateX(-7px); filter: brightness(.45); } 85% { transform: translateX(4px); filter: brightness(1.5); } 87% { transform: none; } }
@keyframes lost-media-jump { 0%, 78%, 100% { transform: rotate(-1deg) translateX(0); opacity: .7; } 79% { transform: rotate(-1deg) translateX(-44px); opacity: 1; } 82% { transform: rotate(-1deg) translateX(31px); opacity: .2; } }

@media (max-width: 980px) {
  .site-shell { grid-template-columns: 150px minmax(0, 1fr); }
  .right-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .neighbors-view, .signal-view, .void-view, .games-view, .lost-media-view { grid-column: 2; }
  .void-layout { grid-template-columns: minmax(0, 1fr) 190px; }
  .operator-profile { align-self: start; }
  .site-footer { padding-inline: 0; }
}

@media (max-width: 720px) {
  .site-shell { display: block; width: calc(100% - 12px); margin-top: 6px; }
  .left-rail { display: grid; grid-template-columns: 1fr; }
  .tiny-button, .rail-badge, .desktop-only { display: none; }
  .main-nav { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 6px; }
  .main-nav a { border-right: 1px solid var(--line); font-size: 10px; }
  .header-row { grid-template-columns: 1fr 1fr; }
  .logo-panel { grid-column: 1 / -1; }
  .right-rail { display: grid; grid-template-columns: 1fr 1fr; margin-top: 6px; }
  .neighbors-view, .signal-view, .void-view, .games-view, .lost-media-view { margin-top: 6px; }
  .update-log { grid-row: auto; }
  .warning-bar { font-size: 10px; }
  .site-shell::before, .lost-web-atmosphere { display: none; }
  .lost-band { margin-top: 3px; }
  .snake-layout { grid-template-columns: 1fr; }
  .snake-console { grid-template-columns: 1fr 1fr; }
  .snake-action { grid-column: 1 / -1; }
  .roulette-layout { grid-template-columns: 1fr; }
  .roulette-console { grid-template-columns: 1fr 1fr; }
  .roulette-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .mines-layout { grid-template-columns: 1fr; }
  .mines-console { grid-template-columns: 1fr 1fr; }
  .mines-reset { grid-column: 1 / -1; }
  .maze-layout { grid-template-columns: 1fr; }
  .maze-console { grid-template-columns: 1fr 1fr; }
  .maze-action { grid-column: 1 / -1; }
  .signal-kitchen-layout { grid-template-columns: 1fr; }
  .signal-kitchen-console { grid-template-columns: 1fr 1fr; }
  .kitchen-action { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .boot-screen { padding: 7px; }
  .boot-terminal { width: calc(100vw - 14px); padding-inline: 8px; }
  .boot-terminal::before { margin-inline: -8px; }
  .boot-terminal h1 { font-size: 20px; }
  .boot-core { width: 66px; height: 66px; }
  .boot-post p { font-size: 7px; }
  .boot-warning { display: none; }
  .main-nav { grid-template-columns: repeat(2, 1fr); }
  .header-row, .lower-grid, .right-rail { grid-template-columns: 1fr; }
  .lower-grid { grid-template-rows: auto; }
  .kanji-card, .info-card { min-height: 310px; }
  .message-panel, .clock-panel { min-height: 82px; }
  .vertical-label { min-height: 52px; grid-template-columns: 1fr auto auto auto 1fr; grid-template-rows: 1fr; padding: 4px 12px; }
  .vertical-label br { display: none; }
  .vertical-label span { font-size: 17px; letter-spacing: .18em; }
  .vertical-label b { margin: 0; font-size: 6px; writing-mode: horizontal-tb; }
  .lower-grid-footer { grid-column: 1; grid-template-columns: 1fr; gap: 4px; }
  .lower-grid-footer b { white-space: normal; }
  .hero-panel { min-height: 320px; }
  .hero-copy strong { font-size: 12px; }
  .coordinates { font-size: 8px; }
  .logo-panel h1 { font-size: 37px; }
  .site-footer { display: block; text-align: center; }
  .site-footer span { display: block; margin: 4px 0; }
  .neighbors-header { align-items: stretch; flex-direction: column; }
  .neighbors-header button { align-self: start; }
  .void-header { align-items: flex-start; flex-direction: column; }
  .void-header button { align-self: start; }
  .games-header { align-items: flex-start; flex-direction: column; }
  .games-header button { align-self: start; }
  .mesh-statusbar { align-items: flex-start; flex-direction: column; }
  .mesh-field { min-height: 390px; }
  .mesh-ring--outer { width: 300px; height: 270px; }
  .mesh-ring--inner { width: 190px; height: 155px; }
  .mesh-sweep { width: 150px; }
  .mesh-slot--one { left: 3%; top: 12%; }
  .mesh-slot--two { right: 3%; top: 13%; }
  .mesh-slot--three { right: 5%; bottom: 13%; }
  .mesh-slot--four { left: 5%; bottom: 13%; }
  .connect-content { grid-template-columns: 1fr; }
  .signal-layout { grid-template-columns: 1fr; }
  .cbox-terminal { min-height: 400px; }
  .cbox-slot, .cbox-slot iframe { min-height: 370px; }
  .signal-info { grid-template-columns: 1fr; }
  .signal-footer { align-items: flex-start; flex-direction: column; }
  .void-layout { grid-template-columns: 1fr; }
  .void-statusbar { flex-wrap: wrap; }
  .void-side { grid-template-columns: 1fr; }
  .log-entry { grid-template-columns: 1fr; gap: 4px; }
  .log-entry--sealed::after { left: 4px; }
  .void-footer { display: block; }
  .void-footer span { display: block; margin: 3px 0; }
  .game-library { grid-template-columns: 1fr; }
  .games-statusbar { flex-wrap: wrap; }
  .game-dock { grid-template-columns: 1fr; }
  .games-footer { display: block; }
  .games-footer span { display: block; margin: 3px 0; }
  .poker-game-header { align-items: flex-start; flex-direction: column; }
  .poker-objective { grid-template-columns: 1fr auto; }
  .poker-objective > span { grid-column: 1 / -1; }
  .poker-table { padding: 6px 3px; }
  .poker-seat { width: calc(100% - 10px); padding-inline: 4px; }
  .poker-hand { gap: 3px; }
  .poker-playing-card { flex-basis: 47px; padding: 3px; }
  .poker-corner--top { left: 3px; top: 4px; }
  .poker-corner--bottom { right: 3px; bottom: 4px; }
  .poker-card-code { display: none; }
  .poker-back-node { width: 21px; height: 27px; }
  .poker-message { width: calc(100% - 22px); }
  .poker-controls { grid-template-columns: 1fr; }
  .poker-controls button { width: 100%; }
  .poker-footer { display: block; }
  .poker-footer span { display: block; margin: 3px 0; }
  .snake-game-header { align-items: flex-start; flex-direction: column; }
  .snake-objective { grid-template-columns: 1fr; gap: 6px; }
  .snake-console { grid-template-columns: 1fr; }
  .snake-action { grid-column: 1; }
  .snake-board-frame { padding-left: 17px; }
  .snake-axis--side { display: none; }
  .snake-axis--top { left: 18px; }
  .snake-footer { display: block; }
  .snake-footer span { display: block; margin: 3px 0; }
  .roulette-game-header { align-items: flex-start; flex-direction: column; }
  .roulette-objective { grid-template-columns: 1fr; gap: 6px; }
  .roulette-run-stats { grid-template-columns: 1fr 1fr; }
  .roulette-run-stats p { border-bottom: 1px dotted #263f62; }
  .roulette-chip-bank { flex-wrap: wrap; }
  .roulette-number-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .roulette-console { grid-template-columns: 1fr; }
  .roulette-actions { grid-column: 1; grid-template-columns: 1fr; }
  .roulette-footer { display: block; }
  .roulette-footer span { display: block; margin: 3px 0; }
  .mines-game-header { align-items: flex-start; flex-direction: column; }
  .mines-objective { align-items: flex-start; flex-direction: column; }
  .mines-statusbar { grid-template-columns: 1fr 1fr; }
  .mines-statusbar p { border-bottom: 1px dotted #263f62; }
  .mines-console { grid-template-columns: 1fr; }
  .mines-reset { grid-column: 1; }
  .mines-board-frame { min-height: 350px; padding-inline: 6px; }
  .mines-coordinate { display: none; }
  .mines-footer { display: block; }
  .mines-footer span { display: block; margin: 3px 0; }
  .maze-game-header { align-items: flex-start; flex-direction: column; }
  .maze-objective { grid-template-columns: 1fr; gap: 6px; }
  .maze-statusbar { grid-template-columns: 1fr 1fr; }
  .maze-statusbar p { border-bottom: 1px dotted #263f62; }
  .maze-console { grid-template-columns: 1fr; }
  .maze-action { grid-column: 1; }
  .maze-board-frame { min-height: 330px; padding-inline: 5px; }
  .maze-footer { display: block; }
  .maze-footer span { display: block; margin: 3px 0; }
  .signal-kitchen-header { align-items: flex-start; flex-direction: column; }
  .signal-kitchen-objective { grid-template-columns: 1fr; gap: 6px; }
  .signal-kitchen-statusbar { grid-template-columns: 1fr 1fr; }
  .signal-kitchen-statusbar p { border-bottom: 1px dotted #263f62; }
  .signal-kitchen-console { grid-template-columns: 1fr; }
  .kitchen-action { grid-column: 1; }
  .japanese-kitchen-scene { min-height: 310px; }
  .kitchen-noren { width: 153px; }
  .kitchen-noren i { width: 50px; }
  .kitchen-noren i::after { border-left-width: 24px; border-right-width: 24px; }
  .kitchen-combo { gap: 3px; }
  .kitchen-combo kbd { height: 41px; font-size: 15px; }
  .signal-kitchen-footer { display: block; }
  .signal-kitchen-footer span { display: block; margin: 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}