:root {
  color-scheme: dark;
  --ink: #dff9ff;
  --muted: #6f8da3;
  --line: #18354d;
  --panel: rgba(5, 15, 27, .92);
  --cyan: #54e9ff;
  --blue: #287cff;
  --violet: #a176ff;
  --amber: #ffc45e;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, rgba(37, 104, 178, .24), transparent 42%),
    #020711;
  font-family: "Manrope", sans-serif;
}
button, a { font: inherit; }
button { color: inherit; }

.game-shell { min-height: 100vh; min-height: 100svh; }
.game-header {
  min-height: 72px;
  padding: 10px 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #102d43;
  background: rgba(2, 8, 16, .92);
}
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand img { width: 42px; height: 42px; object-fit: cover; image-rendering: pixelated; border: 1px solid #256284; }
.brand span { display: flex; flex-direction: column; gap: 4px; }
.brand b { font: 500 .82rem var(--mono); letter-spacing: .14em; }
.brand small { color: #58758b; font: 500 .65rem var(--mono); letter-spacing: .08em; }
.header-state, .header-actions { display: flex; align-items: center; gap: 12px; }
.header-state { color: #7692a7; font: 500 .7rem var(--mono); letter-spacing: .08em; }
.header-state i { width: 1px; height: 14px; background: #24435a; }
.live-dot { width: 7px; height: 7px; background: #4ee6a3; box-shadow: 0 0 10px rgba(78, 230, 163, .85); }
.header-actions { justify-content: flex-end; }
.header-actions button, .header-actions a {
  padding: 9px 11px;
  color: #86a2b6;
  background: #071523;
  border: 1px solid #1a3a51;
  text-decoration: none;
  font: 500 .67rem var(--mono);
  cursor: pointer;
}
.header-actions button:hover, .header-actions a:hover { color: var(--cyan); border-color: #347897; }
.header-actions button:focus-visible, .header-actions a:focus-visible, .mobile-controls button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.game-layout {
  width: min(1600px, 100%);
  min-height: calc(100svh - 72px);
  margin: 0 auto;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(560px, 1fr) minmax(210px, 250px);
  gap: 20px;
  align-items: center;
}
.panel {
  min-height: 550px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(9, 24, 41, .94), rgba(3, 12, 22, .96));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .018), 7px 7px 0 rgba(2, 5, 10, .5);
}
.panel-label { color: #5f8199; font: 500 .67rem var(--mono); letter-spacing: .12em; }
.mission-panel h1 { margin: 22px 0 12px; max-width: 190px; font-size: 1.72rem; line-height: 1.08; letter-spacing: -.04em; }
.mission-panel > p { margin: 0; color: #718ca0; font-size: .88rem; line-height: 1.65; }
.mission-list { margin: 30px 0; padding: 0; list-style: none; }
.mission-list li { padding: 14px 0; display: grid; grid-template-columns: 10px 1fr; gap: 12px; border-top: 1px solid #173247; }
.mission-list li > i { width: 8px; height: 8px; margin-top: 5px; background: #2c495d; border: 1px solid #44647a; }
.mission-list li.complete > i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.mission-list span { display: flex; flex-direction: column; gap: 5px; }
.mission-list b { color: #a9c2d4; font: 500 .68rem var(--mono); letter-spacing: .08em; }
.mission-list small { color: #536f84; font-size: .72rem; line-height: 1.45; }
.mission-list li.complete b { color: var(--cyan); }
.mission-progress { margin-top: 30px; }
.mission-progress > span { display: block; margin-bottom: 10px; color: #678399; font: 500 .67rem var(--mono); }
.mission-progress > span b { color: var(--cyan); font-size: .95rem; }
.mission-progress > div { height: 7px; padding: 2px; background: #08131f; border: 1px solid #18364d; }
.mission-progress i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width .4s steps(4, end); }

.play-column { min-width: 0; align-self: center; }
.world-frame {
  position: relative;
  padding: 32px 10px 10px;
  overflow: hidden;
  background: #06121e;
  border: 1px solid #28516e;
  box-shadow: 0 0 0 4px #030914, 0 28px 80px rgba(0, 0, 0, .45), 12px 12px 0 #071523;
}
.frame-topline {
  position: absolute;
  inset: 0 10px auto;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #54758d;
  font: 500 .62rem var(--mono);
  letter-spacing: .07em;
}
#game {
  width: 100%;
  height: auto;
  display: block;
  background: #030914;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
  cursor: crosshair;
}
#game:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }
.scanline {
  position: absolute;
  z-index: 3;
  inset: 32px 10px 10px;
  pointer-events: none;
  opacity: .17;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .28) 4px);
  mix-blend-mode: multiply;
}
.interaction-prompt {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dffcff;
  background: rgba(2, 10, 18, .9);
  border: 1px solid #55dcee;
  font: 500 .68rem var(--mono);
  letter-spacing: .08em;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}
.interaction-prompt[hidden] { display: none; }
kbd { padding: 3px 6px; color: var(--cyan); background: #0c2639; border: 1px solid #2b5b75; font: 500 .68rem var(--mono); }
.world-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 51px;
  max-width: calc(100% - 44px);
  transform: translate(-50%, -16px);
  padding: 10px 14px;
  opacity: 0;
  pointer-events: none;
  color: #dffcff;
  background: rgba(2, 12, 22, .93);
  border: 1px solid #367594;
  font: 500 .7rem/1.5 var(--mono);
  transition: opacity .2s, transform .2s;
}
.world-toast.show { opacity: 1; transform: translate(-50%, 0); }
.boot-screen {
  position: absolute;
  z-index: 8;
  inset: 32px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: #020813;
  transition: opacity .35s steps(4, end), visibility .35s;
}
.boot-screen.ready { opacity: 0; visibility: hidden; }
.boot-mark { width: 72px; height: 72px; padding: 4px; border: 1px solid #2e6888; box-shadow: 0 0 30px rgba(84, 233, 255, .18); }
.boot-mark img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.boot-screen > span { color: #b6eaf2; font: 500 .72rem var(--mono); letter-spacing: .12em; }
.boot-screen small { color: #4c7189; font: 500 .62rem var(--mono); }
.boot-track { width: min(280px, 62%); height: 7px; padding: 2px; border: 1px solid #1d4965; }
.boot-track i { display: block; width: 0; height: 100%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: boot 1.25s steps(7, end) forwards; }

.keyboard-help { margin-top: 17px; display: flex; align-items: center; gap: 22px; color: #4f6d83; font: 500 .65rem var(--mono); }
.keyboard-help > span { display: flex; align-items: center; gap: 7px; }
.keyboard-help b { color: #7390a4; font-weight: 500; }
.keyboard-help .build-note { margin-left: auto; color: #3f6178; }
.mobile-controls { display: none; }

.network-core { margin-top: 27px; padding: 25px 10px; text-align: center; border: 1px solid #15364d; background: #030c16; }
.core-rings { position: relative; width: 112px; height: 112px; margin: 0 auto 18px; display: grid; place-items: center; }
.core-rings i { position: absolute; inset: 0; border: 1px dashed #285574; border-radius: 50%; animation: spin 16s linear infinite; }
.core-rings i:nth-child(2) { inset: 15px; border-color: #203e68; animation-direction: reverse; animation-duration: 9s; }
.core-rings span { width: 48px; height: 48px; display: grid; place-items: center; color: #315a70; border: 1px solid #1f4d65; font: 500 .85rem var(--mono); transition: color .3s, box-shadow .3s, border-color .3s; }
.network-core.online .core-rings span { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 24px rgba(84, 233, 255, .36), inset 0 0 12px rgba(84, 233, 255, .14); }
.network-core > b { display: block; color: #58778d; font: 500 .8rem var(--mono); letter-spacing: .12em; }
.network-core.online > b { color: #4ee6a3; }
.network-core > small { display: block; margin-top: 10px; color: #4f6a7e; font-size: .7rem; line-height: 1.5; }
.telemetry { margin-top: 18px; border: 1px solid #15364d; }
.telemetry > div { min-height: 54px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #15364d; }
.telemetry > div:first-child { border-top: 0; }
.telemetry span { color: #506f84; font: 500 .61rem var(--mono); letter-spacing: .07em; }
.telemetry b { color: #8eacbf; font: 500 .69rem var(--mono); }
.agent-log { margin-top: 23px; }
.agent-log p { margin: 13px 0 0; color: #8ba8bb; font-size: .82rem; line-height: 1.65; }

@keyframes boot { to { width: 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 210px minmax(520px, 1fr); align-items: start; }
  .network-panel { min-height: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 210px 1fr 1fr; gap: 18px; align-items: center; }
  .network-panel > .panel-label { align-self: start; }
  .network-core { margin: 0; }
  .telemetry, .agent-log { margin: 0; }
}

@media (max-width: 820px) {
  .game-header { grid-template-columns: 1fr auto; padding: 9px 12px; }
  .header-state { display: none; }
  .brand small { display: none; }
  .header-actions button:first-child { display: none; }
  .game-layout { padding: 14px 10px 28px; display: flex; flex-direction: column; gap: 14px; }
  .play-column { width: 100%; order: 1; }
  .mission-panel { width: 100%; min-height: 0; order: 2; }
  .network-panel { width: 100%; min-height: 0; order: 3; display: block; }
  .network-panel > .panel-label { display: block; margin-bottom: 18px; }
  .telemetry, .agent-log { margin-top: 18px; }
  .world-frame { padding: 27px 5px 5px; box-shadow: 5px 5px 0 #071523; }
  .frame-topline { inset: 0 7px auto; height: 27px; font-size: .56rem; }
  .frame-topline span:first-child { max-width: 65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scanline, .boot-screen { inset: 27px 5px 5px; }
  .keyboard-help { display: none; }
  .mobile-controls { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; }
  .dpad { width: 154px; height: 110px; display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 5px; }
  .dpad button, .interact-button { border: 1px solid #27516d; background: #081725; box-shadow: 3px 3px 0 #02060d; touch-action: none; }
  .dpad button:active, .interact-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #02060d; }
  .dpad button[data-key="up"] { grid-column: 2; }
  .dpad button[data-key="left"] { grid-column: 1; grid-row: 2; }
  .dpad button[data-key="down"] { grid-column: 2; grid-row: 2; }
  .dpad button[data-key="right"] { grid-column: 3; grid-row: 2; }
  .interact-button { width: 94px; height: 82px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  .interact-button span { color: var(--cyan); font: 500 1.05rem var(--mono); }
  .interact-button b { color: #6f91a7; font: 500 .58rem var(--mono); }
  .panel { padding: 20px; }
  .mission-panel h1 { max-width: none; }
}

@media (max-width: 480px) {
  .brand b { font-size: .72rem; }
  .header-actions { gap: 6px; }
  .header-actions button, .header-actions a { padding: 8px; font-size: .59rem; }
  .header-actions a { display: none; }
  .frame-topline span:last-child { display: none; }
  .interaction-prompt { bottom: 12px; }
}

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