:root {
  --green: #06442d;
  --green2: #0d6745;
  --red: #b64a35;
  --orange: #d56a35;
  --blue: #15375f;
  --cyan: #b9ebff;
  --cream: #e9e2c9;
  --shadow: #081018;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, #0f2630 0, #081016 44%, #020507 100%);
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035), rgba(255,255,255,.035) 1px, transparent 1px, transparent 4px),
    radial-gradient(circle at center, transparent 0 58%, rgba(0,0,0,.28) 100%);
  mix-blend-mode: screen;
  opacity: .55;
  z-index: 50;
}

.app, .screen {
  width: 100%;
  height: 100%;
}
.screen {
  display: none;
  place-items: center;
  padding: 32px;
}
.screen.is-active { display: grid; }

/* SCREEN 1 */
.kiosk {
  position: relative;
  width: min(1040px, 94vw);
  aspect-ratio: 1.34 / 1;
  border: 4px solid rgba(224, 231, 218, .42);
  background:
    linear-gradient(135deg, var(--red) 0 15%, transparent 15% 100%),
    linear-gradient(135deg, transparent 0 66%, var(--orange) 66% 100%),
    linear-gradient(160deg, #0a714a, var(--green) 52%, #0a4b33);
  box-shadow: 0 28px 70px rgba(0,0,0,.58), inset 0 0 0 9px rgba(0,0,0,.3), inset 0 0 48px rgba(0,0,0,.28);
  overflow: hidden;
}
.kiosk::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 12% 88%, rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
}
.mail-tab {
  position: absolute;
  left: 40px;
  top: 220px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: white;
  font: 900 28px/1 Arial Black, Impact, sans-serif;
  text-shadow: 3px 2px 0 #7e2d22;
  letter-spacing: 1px;
  z-index: 3;
}
.top-copy {
  position: absolute;
  inset: 22px 90px auto 170px;
  text-align: center;
  z-index: 6;
  pointer-events: none;
}
.version {
  display: inline-block;
  padding: 2px 13px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: #d9f6f7;
  color: #21446a;
  font: 700 14px/1.2 "Courier New", monospace;
  box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.16);
  transform: rotate(-1deg);
}
h1 {
  margin: 0;
  color: #f6fdff;
  text-shadow: 0 0 7px #61c4ff, 4px 4px 0 #33486d;
  letter-spacing: 1px;
}
h1 span { display: block; font-size: clamp(28px, 5.5vw, 55px); line-height: .86; }
h1 strong { display: block; font: 900 clamp(34px, 6vw, 70px)/.82 Arial Black, Impact, sans-serif; letter-spacing: 2px; }
h1 em { display: block; margin-top: 8px; font-style: normal; font-size: clamp(18px, 3.2vw, 32px); }
.hero-panel {
  position: absolute;
  left: 17%;
  right: 13%;
  top: 23%;
  height: 48%;
  z-index: 5;
  border: 7px solid #143052;
  background: #10253d;
  box-shadow: 10px 12px 0 rgba(0,0,0,.3), 0 0 0 3px rgba(221,87,66,.65) inset;
  overflow: visible;
}
.stage-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.concerts-label {
  position: absolute;
  left: 50%;
  bottom: 11.5%;
  transform: translateX(-50%);
  color: #d9efe8;
  font: 700 13px/1 "Courier New", monospace;
  letter-spacing: 1px;
  opacity: .86;
  z-index: 10;
  pointer-events: none;
}
.drum-hotspot {
  position: absolute;
  left: 43%;
  top: 54%;
  width: 14%;
  height: 17%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
  z-index: 20;
}
.drum-hotspot:focus-visible { outline: 2px dotted #fff; }
.bottom-nav {
  position: absolute;
  left: 70px;
  right: 70px;
  bottom: 78px;
  display: flex;
  justify-content: space-between;
  z-index: 4;
}
.bottom-nav a {
  color: #f2e8db;
  text-decoration: none;
  font: 900 clamp(23px, 3.6vw, 39px)/1 Arial Black, Impact, sans-serif;
  text-shadow: 3px 3px 0 #8a3a2e, 0 0 4px #e1efef;
}
.tiny-links {
  position: absolute;
  right: 36px;
  bottom: 35px;
  color: rgba(236,230,208,.72);
  font: 12px/1.2 "Courier New", monospace;
  letter-spacing: .5px;
  z-index: 4;
}

/* SCREEN 2 */
.screen--utility { background: #061012; }
.utility-page {
  position: relative;
  width: min(1000px, 94vw);
  height: min(650px, 86vh);
  background: #dfd7e8;
  color: #111;
  border: 8px solid #1b2b36;
  box-shadow: 0 0 0 6px #75828a, 0 30px 90px rgba(0,0,0,.7);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}
.utility-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px);
  pointer-events: none;
}
.utility-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 78%;
  margin: 78px auto 34px;
  padding: 28px 40px;
  background: linear-gradient(180deg, #132e48, #1f4364);
  border: 3px solid #0b1928;
  box-shadow: 0 5px 0 rgba(0,0,0,.26);
}
.texas-ish {
  width: 150px;
  height: 112px;
  display: grid;
  place-items: center;
  clip-path: polygon(0 18%, 32% 18%, 32% 0, 70% 0, 70% 28%, 100% 28%, 100% 78%, 68% 78%, 68% 100%, 30% 100%, 30% 82%, 0 82%);
  background: #bd2e2d;
  color: #f8e56c;
  font-size: 76px;
  text-shadow: 0 0 6px #f8e56c;
}
.utility-banner p { margin: 0 0 4px; color: #9ee4e1; font: 700 25px/1 Arial, sans-serif; }
.utility-banner h2 { margin: 0; color: #eadcee; font: 800 clamp(36px, 5vw, 62px)/.95 Georgia, serif; text-shadow: 3px 3px 0 #47264d; }
.utility-banner h3 { margin: 10px 0 0; color: #60dae2; font: 900 clamp(24px, 3vw, 36px)/1 Arial Black, Impact, sans-serif; font-style: italic; letter-spacing: 1px; }
.utility-meta {
  width: 78%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  color: #39414b;
  font: 700 18px/1.2 "Courier New", monospace;
}
.utility-meta span:nth-child(even) { text-align: right; }
.password-label {
  display: block;
  margin: 72px auto 8px;
  width: 540px;
  max-width: 75%;
  text-align: center;
  color: #282a31;
  font: 900 30px/1 Arial Black, Impact, sans-serif;
  font-style: italic;
}
.password-input {
  display: block;
  width: 540px;
  max-width: 75%;
  height: 48px;
  margin: 0 auto;
  background: #eeeaf1;
  border: 3px solid #8e8999;
  font: 26px/1 monospace;
  padding: 4px 14px;
}
.pi-trigger {
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: #2a3444;
  opacity: .88;
  font: 16px/1 Georgia, serif;
  cursor: default;
}
.pi-trigger:hover { color: #0a3d82; }

/* CHAOS */
.screen--chaos { background: #010407; }
.chaos-frame {
  width: min(1040px, 96vw);
  height: min(700px, 88vh);
  border: 2px solid #2a4856;
  background: #01151a;
  box-shadow: 0 0 60px rgba(0, 255, 216, .12), inset 0 0 80px rgba(0,0,0,.7);
  overflow: hidden;
}
.chaos-content {
  height: 100%;
  padding: 22px;
  font-family: "Courier New", monospace;
  color: #b7e4ff;
  white-space: pre-wrap;
  font-size: clamp(14px, 1.7vw, 22px);
}
.unauthorized {
  height: 100%;
  display: grid;
  place-items: center;
  color: #d7e5ff;
  font: 900 clamp(50px, 9vw, 120px)/.85 Arial Black, Impact, sans-serif;
  text-align: center;
  background: linear-gradient(#13233d 0 36%, #b32124 36% 66%, #13233d 66% 100%);
  letter-spacing: 3px;
  text-shadow: 0 0 10px #d6e9ff;
}
.blueprint {
  width: 100%;
  height: 100%;
  background: #003c3a;
  color: #9de8e6;
  position: relative;
  overflow: hidden;
}
.blueprint svg { width: 100%; height: 100%; opacity: .85; }
.dos-menu {
  height: 100%;
  background: #062a8f;
  color: #d9eaff;
  padding: 28px;
  font-family: "Courier New", monospace;
  font-size: 24px;
}
.dos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dos-box { border: 2px solid #b8d6ff; padding: 16px; min-height: 170px; }

@media (max-width: 760px) {
  .screen { padding: 10px; }
  .kiosk { width: 100%; aspect-ratio: 1.15/1; }
  .top-copy { left: 94px; right: 28px; top: 18px; }
  .hero-panel { left: 14%; right: 6%; top: 26%; height: 42%; }
  .mail-tab { left: 24px; top: 160px; }
  .bottom-nav { left: 28px; right: 28px; bottom: 58px; }
}

/* V4 fast hacker-burst frames */
.chaos-content--burst {
  position: relative;
  width: min(1060px, 94vw);
  height: min(710px, 88vh);
  background: #02070b;
  border: 5px solid #6a8790;
  box-shadow: 0 0 0 8px #061318, 0 0 60px rgba(86, 218, 255, .25);
  overflow: hidden;
  animation: burstJitter .25s steps(2) infinite;
}
.chaos-content--burst::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px),
    radial-gradient(circle at center, transparent 0 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: screen;
  z-index: 20;
}
.chaos-content--burst::after {
  content: "";
  position: absolute;
  inset: -4% -2%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0 30%, rgba(255,255,255,.12) 45%, transparent 60% 100%);
  opacity: .18;
  transform: skewX(-12deg);
  animation: scanSweep .6s linear infinite;
  z-index: 22;
}
@keyframes burstJitter { 0% { transform: translate(0,0); } 50% { transform: translate(1px,-1px); } 100% { transform: translate(-1px,1px); } }
@keyframes scanSweep { from { translate: -120% 0; } to { translate: 120% 0; } }

.text-frame {
  padding: 22px 28px;
  color: #b9fff8;
  font: 17px/1.18 "Courier New", monospace;
  white-space: pre;
  text-shadow: 0 0 8px #00ffe1;
}
.blast.unauthorized {
  height: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(#2d3340 0 32%, #c71d1d 32% 68%, #273446 68%);
  color: #d8e4ff;
  font: 900 clamp(54px, 11vw, 125px)/.9 Arial Black, Impact, sans-serif;
  text-align: center;
  text-shadow: 5px 5px 0 #7d0000, 0 0 14px #fff;
  letter-spacing: 3px;
}
.blast.unauthorized.tilt { transform: rotate(-.4deg) scale(1.02); }
.grid-screen, .db-panic, .cards, .memo {
  padding: 28px;
  height: 100%;
  color: #c4faff;
  font-family: "Courier New", monospace;
  background: linear-gradient(180deg, #06172a, #071016 70%, #13070a);
}
.grid-screen h3, .cards h3, .db-panic h2, .memo h2 {
  margin: 0 0 18px;
  font: 900 26px/1 Arial Black, Impact, sans-serif;
  color: #fff6b8;
  text-shadow: 0 0 8px #4ef7ff;
}
.grid-screen table {
  width: 100%;
  border-collapse: collapse;
  font-size: 21px;
}
.grid-screen td { border-bottom: 1px solid rgba(150,255,255,.24); padding: 4px 10px; }
.blueprint.fast, .map-screen, .wave, .scope { height: 100%; background: #05292f; }
.blueprint.fast svg, .map-screen svg, .wave svg, .scope svg { width: 100%; height: 100%; display: block; }
.map-screen svg { background: radial-gradient(circle at center, #052932, #02070b); }
.map-screen path { stroke: #74ffe9; stroke-width: 2; opacity: .42; }
.map-screen circle { fill: #08131a; stroke: #f7ff9b; stroke-width: 3; }
.map-screen text, .wave text, .scope text { fill: #caffff; font: 22px monospace; text-shadow: 0 0 8px #31ffff; }
.dos-menu.fastdos { height: 100%; padding: 34px; background: #0300aa; color: #fff; font: 22px/1.2 "Courier New", monospace; }
.dos-title { background: #bababa; color: #020060; display: inline-block; padding: 4px 10px; font-weight: 900; }
.dos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 22px; }
.dos-box { white-space: pre-line; border: 3px double #fff; padding: 18px; min-height: 145px; }
.radar { height: 100%; background: radial-gradient(circle at center, #0d553e 0 8%, #05261e 25%, #020707 70%); position: relative; overflow: hidden; }
.radar::before { content: ""; position: absolute; inset: 12%; border: 2px solid #72ffb9; border-radius: 50%; box-shadow: 0 0 0 80px transparent, 0 0 25px #37ff94; }
.radar .sweep { position: absolute; inset: 50% auto auto 50%; width: 42%; height: 2px; background: #70ff9f; transform-origin: left center; animation: radarSpin .65s linear infinite; box-shadow: 0 0 35px #70ff9f; }
.radar .crosshair { position: absolute; inset: 10%; background: linear-gradient(90deg, transparent 49.8%, #47ffa3 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, #47ffa3 50%, transparent 50.2%); opacity: .7; }
.radar-text { position: absolute; left: 34px; bottom: 32px; color: #c8ffdd; font: 26px/1.25 "Courier New", monospace; text-shadow: 0 0 10px #42ff93; }
@keyframes radarSpin { to { rotate: 360deg; } }
.db-panic ul { list-style: none; margin: 0; padding: 0; font-size: 21px; }
.db-panic li { padding: 6px 0; border-bottom: 1px dotted rgba(255,255,255,.25); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-content: start; }
.cards h3 { grid-column: 1 / -1; }
.card { min-height: 105px; background: #e3d7bb; color: #22170c; border: 3px solid #6d5638; box-shadow: 8px 8px 0 rgba(0,0,0,.35); padding: 14px; transform: rotate(var(--r, -.7deg)); }
.card b { display:block; font-size: 28px; }
.card span { display:block; margin-top: 8px; color:#7a1313; font-weight: 900; }
.card small { display:block; margin-top: 8px; font-family: monospace; }
.wave svg { background: #07131c; }
.wave polyline { fill: none; stroke: #9dfffc; stroke-width: 4; filter: drop-shadow(0 0 9px #00fff2); }
.scope svg { background: #020d14; }
.scope g:first-of-type { fill: none; stroke: #74f7ff; stroke-width: 2; opacity: .7; }
.scope g:nth-of-type(2) { fill: #fff7a6; filter: drop-shadow(0 0 8px #ffea4a); }
.memo { background: #d8d2bf; color: #17120d; }
.memo h2 { color: #711; text-shadow: none; }
.memo p { font: 21px/1.1 "Courier New", monospace; }
.memo span { display: inline-block; width: 110px; height: 18px; background: #111; vertical-align: middle; margin: 0 8px; }
.memo span.wide { width: 210px; }
.alert95 { width: 620px; margin: 110px auto; border: 4px solid #cfcfcf; background: #c0c0c0; color: #111; font-family: Tahoma, Arial, sans-serif; box-shadow: 16px 16px 0 rgba(0,0,0,.45); }
.alert95 .bar { background: #0300a8; color: white; padding: 8px 12px; font-weight: 700; }
.alert95 .body { padding: 28px; font-size: 24px; }
.alert95 button { margin-right: 12px; padding: 6px 18px; font: 18px Tahoma, Arial; border: 3px outset #eee; background: #ddd; }
.final-frame { padding: 40px; color: #b9fff8; background: #02070b; border: 5px solid #6a8790; width: min(1060px,94vw); height: min(710px,88vh); white-space: pre; font: 28px/1.32 "Courier New", monospace; text-shadow: 0 0 10px #4ffff4; }