:root {
  --bg: #010407;
  --panel: rgba(3, 14, 20, 0.94);
  --line: #11404d;
  --cyan: #5fd4ff;
  --dim: #2f7c94;
  --us: #4cb8ff;
  --su: #ff4b3e;
  --green: #7dfc9a;
  --amber: #ffc24a;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--cyan);
  font-family: 'Share Tech Mono', ui-monospace, monospace; overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.hidden { display: none !important; }

/* ---------- WOPR terminal ---------- */
#terminal {
  position: fixed; inset: 0; padding: 6vh 8vw 10vh;
  font-family: 'VT323', monospace; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.15;
  color: var(--green); text-shadow: 0 0 6px rgba(80, 255, 140, .55);
  background: radial-gradient(ellipse at center, #031409 0%, #000 100%);
  overflow-y: auto;
}
#terminal::after {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
#term-out div { white-space: pre-wrap; min-height: 1.15em; }
#term-out .opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16em), 1fr)); column-gap: 2em; }
#term-out .opt { cursor: pointer; padding: 0 .2em; width: fit-content; }
#term-out .opt:hover { background: var(--green); color: #021; text-shadow: none; }
#term-out .opt.gtw { grid-column: 1 / -1; margin-top: .6em; }
#term-out .red { color: #ff6a5c; text-shadow: 0 0 6px rgba(255, 80, 60, .6); }
#term-out .big { font-size: 1.6em; }
#term-input-line { margin-top: .3em; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#term-help { position: fixed; bottom: 2vh; left: 0; right: 0; text-align: center; font-size: .6em; opacity: .5; }

/* ---------- Game layout ---------- */
#game {
  position: fixed; inset: 0; display: grid;
  grid-template-columns: 230px 1fr 270px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top top" "left map right" "hint hint hint";
}
#topbar {
  grid-area: top; display: flex; align-items: center; gap: 16px; padding: 6px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
#defcon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 74px; height: 50px; border: 2px solid currentColor; line-height: 1;
}
#defcon small { font-size: 10px; letter-spacing: 2px; }
#defcon span { font-size: 30px; font-family: 'VT323', monospace; }
#defcon.d5 { color: #5fd4ff; } #defcon.d4 { color: #7dfc9a; } #defcon.d3 { color: #ffe14a; }
#defcon.d2 { color: #ff8a3d; } #defcon.d1 { color: #fff; background: #b3170c; border-color: #ff4b3e; animation: d1 1s steps(1) infinite; }
@keyframes d1 { 50% { background: #3a0602; } }
#phase-wrap { flex: 1; min-width: 0; }
#phase { font-size: 18px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#clock { font-size: 12px; color: var(--dim); }
#controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sep { width: 8px; }

button {
  font: inherit; font-size: 13px; color: var(--cyan); background: rgba(10, 40, 52, .6);
  border: 1px solid var(--line); padding: 5px 9px; cursor: pointer; letter-spacing: .5px;
}
button:hover:not(:disabled) { border-color: var(--cyan); background: rgba(30, 90, 110, .5); }
button.on { background: var(--cyan); color: #011; border-color: var(--cyan); }
button:disabled { opacity: .35; cursor: default; }
button.hot { color: #ff8277; border-color: #5a1e1a; }
button.hot:hover:not(:disabled) { border-color: var(--su); background: rgba(120, 20, 12, .45); }

.panel { background: var(--panel); padding: 10px 12px; overflow-y: auto; font-size: 13px; }
#left { grid-area: left; border-right: 1px solid var(--line); }
#right { grid-area: right; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.panel h2 {
  font-size: 11px; letter-spacing: 3px; color: var(--dim); font-weight: normal;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; margin: 12px 0 8px;
}
.panel h2:first-child { margin-top: 0; }
#placebox { display: flex; flex-direction: column; gap: 6px; }
.place { display: flex; align-items: center; gap: 8px; text-align: left; }
.place .cnt { margin-left: auto; }
.ico { display: inline-block; width: 12px; height: 12px; }
.ico.silo { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: currentColor; }
.ico.radar { border: 2px solid currentColor; border-radius: 50%; }
.ico.sub { height: 6px; border-radius: 6px; background: currentColor; }
.row { display: flex; gap: 6px; margin-bottom: 6px; }
.row button { flex: 1; }
#selinfo { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#selinfo .su { border-left: 2px solid var(--line); padding: 2px 0 2px 8px; color: #9fd8ea; }
#selinfo .su b { color: var(--cyan); font-weight: normal; }
#selinfo .muted, .muted { color: var(--dim); }
.m-defense, .m-patrol { color: var(--green); } .m-launch { color: var(--su); } .m-switch { color: var(--amber); }
#joshua { color: var(--green); margin-top: 20px; line-height: 1.5; }

.cas { display: flex; justify-content: space-between; margin: 6px 0 2px; }
.cas .num { color: #fff; }
.lbl.us { color: var(--us); } .lbl.su { color: var(--su); }
.bar { height: 4px; background: #0b2630; margin-bottom: 8px; }
.bar .fill { height: 100%; width: 0; transition: width .4s; }
.fill.us { background: var(--us); } .fill.su { background: var(--su); }
#log { flex: 1; overflow-y: auto; font-size: 12px; line-height: 1.35; min-height: 80px; }
#log div { padding: 2px 0; color: #8ec9dc; }
#log .t { color: var(--dim); margin-right: 6px; }
#log .warn { color: var(--amber); } #log .bad { color: #ff7a6e; } #log .good { color: var(--green); }

#mapwrap { grid-area: map; position: relative; overflow: hidden; background: #000; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#mapwrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%);
}
#alert {
  position: absolute; top: 18%; left: 0; right: 0; text-align: center; pointer-events: none;
  font-family: 'VT323', monospace; font-size: clamp(32px, 6vw, 72px); color: #ff4b3e;
  text-shadow: 0 0 18px rgba(255, 60, 40, .8); letter-spacing: 6px; opacity: 0; transition: opacity .3s;
  z-index: 2;
}
#alert.show { opacity: 1; animation: blink .5s steps(1) infinite; }
#alert.calm { color: var(--green); text-shadow: 0 0 18px rgba(80,255,140,.7); }
#zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
#zoom button { width: 32px; height: 32px; padding: 0; font-size: 18px; }

#hint {
  grid-area: hint; padding: 6px 12px; font-size: 12px; color: var(--dim);
  border-top: 1px solid var(--line); background: var(--panel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 900px) {
  #game {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(0, 1fr) 34vh auto;
    grid-template-areas: "top top" "map map" "left right" "hint hint";
  }
  #left { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  #right { border-top: 1px solid var(--line); }
  #topbar { flex-wrap: wrap; gap: 8px; }
  #controls { width: 100%; justify-content: flex-start; }
  #phase { font-size: 15px; }
  .panel { font-size: 12px; padding: 8px; }
  button { font-size: 12px; padding: 5px 7px; }
}