/* ================= SEGMENT SIEGE — demolition briefing ================= */
:root {
  --bg: #160b26;
  --bg-deep: #0d0618;
  --panel: #1f1233;
  --panel-edge: #3d2a5c;
  --ink: #ece6f7;
  --ink-dim: #9b8fb4;
  --amber: #a78bfa;
  --p1: #ff5d3b;
  --p2: #2fd6c3;
  --danger: #ff3b30;
  --display: "Bungee", cursive;
  --mono: "IBM Plex Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* scale the whole UI with the viewport so big screens stay readable */
  font-size: clamp(15px, 0.55vw + 9px, 24px);
}

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
}

/* ---------- screens ---------- */
.screen {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a1845 0%, transparent 60%),
    var(--bg);
}
.screen.active { display: flex; }

.grain {
  pointer-events: none;
  position: absolute; inset: 0; z-index: 5;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- masthead ---------- */
.masthead { text-align: center; padding: 4vh 0 2vh; z-index: 6; }
.masthead.small { padding: 2vh 0 1vh; }

.hazard-bar {
  width: 320px; height: 10px; margin: 0 auto 14px;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 14px, #160b26 14px 28px);
  border: 1px solid #000;
}

.title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 0 4px 0 #000, 0 8px 24px rgba(0,0,0,.6);
  animation: slam 0.45s cubic-bezier(.2,2.4,.4,1) both;
}
.title.sm { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.title-accent { color: var(--amber); display: inline-block; transform: rotate(-1.5deg); }

@keyframes slam {
  from { transform: scale(2.2) rotate(-4deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.tagline {
  margin-top: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.35em;
  font-size: 0.72rem;
  animation: fadeup 0.5s 0.25s both;
}
@keyframes fadeup { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none;} }

.powered-by {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 6px 14px;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid #7c3aed;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.62rem; letter-spacing: 0.22em; color: var(--ink-dim);
  animation: fadeup 0.5s 0.3s both;
}
.powered-by img { height: 16px; }
.powered-by b { color: var(--ink); letter-spacing: 0.18em; }
.powered-by span:last-child { color: var(--amber); }
.powered-by:hover { background: rgba(124, 58, 237, 0.32); }

/* ---------- how it works ---------- */
.howitworks {
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  width: min(1320px, 94vw);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid var(--panel-edge);
  animation: fadeup 0.5s 0.3s both;
}
.how-step { display: flex; flex-direction: column; gap: 9px; }
.how-head { display: flex; gap: 10px; align-items: flex-start; min-height: 3.2em; }
.how-num {
  font-family: var(--display);
  font-size: 1.1rem; line-height: 1;
  color: var(--amber);
  padding-top: 2px;
}
.how-text { font-size: 0.68rem; color: var(--ink-dim); line-height: 1.45; }
.how-text b { color: var(--ink); }
.how-step img {
  width: 100%; aspect-ratio: 16 / 8.6; object-fit: cover;
  border: 1px solid var(--panel-edge);
  margin-top: auto;
}
.how-arrow {
  color: var(--amber); font-size: 1.3rem;
  align-self: center;
}

@media (max-width: 980px) {
  .howitworks { grid-template-columns: 1fr; }
  .how-arrow { display: none; }
  .how-step img { display: none; }
}

/* ---------- setup grid ---------- */
.setup-grid {
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(420px, 1.4fr) minmax(320px, 1fr);
  gap: 18px;
  width: min(1320px, 94vw);
  flex: 1;
  min-height: 0;
  padding-bottom: 2vh;
  animation: fadeup 0.5s 0.35s both;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.panel-label {
  font-family: var(--display);
  font-size: 0.78rem;
  color: var(--amber);
  letter-spacing: 0.12em;
}
.panel-help { font-size: 0.74rem; color: var(--ink-dim); line-height: 1.5; }

/* source tabs */
.source-tabs { display: flex; gap: 8px; }
.tab {
  flex: 1; padding: 9px 0;
  font-family: var(--mono); font-weight: 700; font-size: 0.78rem;
  background: var(--bg-deep); color: var(--ink-dim);
  border: 1px solid var(--panel-edge); cursor: pointer;
  letter-spacing: 0.08em;
}
.tab.active { background: var(--amber); color: #160b26; border-color: var(--amber); }

.source-stage {
  position: relative;
  flex: 0 1 auto;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  max-height: 52vh;
  background: #000;
  border: 1px solid var(--panel-edge);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.source-stage video, .source-stage canvas, .source-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.stage-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); font-size: 0.78rem; letter-spacing: 0.2em;
  pointer-events: none;
}

.viewfinder .vf { position: absolute; width: 26px; height: 26px; border: 2px solid var(--amber); opacity: .8; }
.vf.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.vf.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.vf.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.vf.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.source-actions { display: flex; gap: 10px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; overflow-y: auto; max-height: 30vh; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--panel-edge);
  font-size: 0.74rem; color: var(--ink);
  cursor: default;
}
.chip b { color: var(--amber); font-weight: 400; cursor: pointer; }
.chip b:hover { color: var(--danger); }

.chip-form { display: flex; gap: 8px; }
.chip-form input {
  flex: 1;
  background: var(--bg-deep); color: var(--ink);
  border: 1px solid var(--panel-edge);
  font-family: var(--mono); font-size: 0.8rem;
  padding: 8px 10px; outline: none;
}
.chip-form input:focus { border-color: var(--amber); }

/* buttons */
.btn {
  font-family: var(--mono); font-weight: 700;
  letter-spacing: 0.08em; font-size: 0.82rem;
  cursor: pointer; border: none;
  transition: transform 0.08s, filter 0.12s;
  user-select: none;
}
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-chunky {
  flex: 1; padding: 12px;
  background: var(--ink); color: #160b26;
  box-shadow: 0 4px 0 #000;
  text-align: center;
}
.btn-chunky:hover:not(:disabled) { filter: brightness(1.1); }

.btn-ghost {
  padding: 12px 14px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--panel-edge);
}
.btn-ghost:hover { border-color: var(--ink-dim); }

.btn-launch {
  padding: 16px;
  font-family: var(--display);
  font-size: 1rem;
  background: var(--amber); color: #160b26;
  box-shadow: 0 5px 0 #4c1d95, 0 10px 30px rgba(124,58,237,.35);
}
.btn-launch:hover:not(:disabled) { filter: brightness(1.08); }

.scan-note { font-size: 0.7rem; color: var(--ink-dim); text-align: center; }

#menu-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 170px;
  z-index: 7;
  pointer-events: none;
}

.credits {
  z-index: 6; padding: 8px 0 12px;
  font-size: 0.62rem; letter-spacing: 0.3em; color: #5d5176;
}

/* ---------- loading ---------- */
#screen-loading { justify-content: center; gap: 40px; }

.radar {
  position: relative; width: 220px; height: 220px;
  border-radius: 50%;
  border: 2px solid var(--panel-edge);
  background: radial-gradient(circle, #221140 0%, #0d0618 75%);
  overflow: hidden;
}
.radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(167,139,250,.2); }
.radar-ring.r1 { inset: 18%; } .radar-ring.r2 { inset: 36%; } .radar-ring.r3 { inset: 54%; }
.radar-sweep {
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, rgba(167,139,250,.6), transparent 70deg, transparent);
  animation: sweep 1.6s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }

.loadlog {
  font-size: 0.8rem; line-height: 2;
  color: var(--amber); letter-spacing: 0.12em;
  min-height: 8em; text-align: center;
}
.loadlog .done { color: var(--ink-dim); }
.loadlog .err { color: var(--danger); }

/* ---------- preview ---------- */
.preview-wrap {
  z-index: 6; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  width: min(1100px, 94vw);
}
#preview-canvas {
  max-width: 100%; max-height: 100%;
  border: 1px solid var(--panel-edge);
  box-shadow: 0 16px 60px rgba(0,0,0,.6);
}
.preview-bar {
  z-index: 6;
  width: min(1100px, 94vw);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 20px; gap: 14px;
}
.preview-stats { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.6; }
.preview-stats b { color: var(--amber); }
.preview-actions { display: flex; gap: 10px; }

/* ---------- game ---------- */
#screen-game { background: var(--bg-deep); }

.hud {
  z-index: 7;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
}

.hp-block { width: 28%; }
.hp-name { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.1em; margin-bottom: 5px; }
.p1 .hp-name { color: var(--p1); }
.p2 .hp-name { color: var(--p2); text-align: right; }
.hp-bar {
  height: 1.1em; background: #000;
  border: 1px solid var(--panel-edge);
  position: relative; overflow: hidden;
}
.hp-fill {
  height: 100%; width: 100%;
  transition: width 0.45s cubic-bezier(.2,1.4,.4,1);
}
.p1 .hp-fill { background: linear-gradient(180deg, #ff8a64, var(--p1)); }
.p2 .hp-fill { background: linear-gradient(180deg, #7fffee, var(--p2)); float: right; }

.wind-block { text-align: center; }
.wind-label { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--ink-dim); }
.wind-meter {
  width: 11em; height: 0.9em; margin: 4px 0;
  background: #000; border: 1px solid var(--panel-edge);
  position: relative;
}
.wind-meter::after {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: var(--ink-dim);
}
.wind-needle {
  position: absolute; top: 1px; bottom: 1px; left: 50%;
  background: var(--amber);
  transition: all 0.5s;
}
.wind-value { font-size: 0.78rem; color: var(--amber); }

.btn-quit {
  padding: 0.55em 1em;
  background: transparent;
  border: 1px solid var(--panel-edge);
  color: var(--ink-dim);
  font-size: 0.78rem;
}
.btn-quit:hover { border-color: var(--danger); color: var(--danger); }

.board-wrap {
  position: relative;
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep);
}
/* scale UP as well as down — fill the screen on big monitors */
#game-canvas { width: 100%; height: 100%; object-fit: contain; }

.scanlines {
  pointer-events: none;
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.turn-banner {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  padding: 10px 34px;
  background: rgba(0,0,0,.78);
  border-top: 4px solid currentColor;
  border-bottom: 4px solid currentColor;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.turn-banner.show { animation: banner 1.5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  14% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  22% { transform: translate(-50%,-50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

.hud-bottom { padding-bottom: 14px; }

.weapons { display: flex; gap: 8px; }
.weapon {
  padding: 0.55em 0.9em;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  font-size: 0.82rem; color: var(--ink-dim);
  cursor: pointer; user-select: none;
}
.weapon .key { color: var(--amber); }
.weapon.active { background: var(--ink); color: #160b26; border-color: var(--ink); }
.weapon.active .key { color: #6706ce; }
.weapon.spent { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; }

.power-block, .fuel-block { display: flex; align-items: center; gap: 8px; }
.power-label { font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-dim); }
.power-bar {
  width: 9em; height: 0.9em;
  background: #000; border: 1px solid var(--panel-edge);
  overflow: hidden;
}
.power-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c4a7ff, #8315f9, var(--danger));
}
.power-fill.fuel { background: linear-gradient(90deg, #2fd6c3, #7fffee); width: 100%; }

.controls-hint {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.78rem; color: var(--ink-dim); letter-spacing: 0.03em;
  flex-wrap: wrap;
}
.controls-hint b { color: var(--amber); }

kbd {
  font-family: var(--mono); font-size: 0.85em; font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-bottom: 3px solid #4c1d95;
  border-radius: 4px;
  padding: 0.18em 0.5em;
  white-space: nowrap;
}

/* controls overlay */
.controls-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7em 1.4em;
  align-items: center;
  text-align: left;
  margin: 1.4em 0 1.8em;
  font-size: 0.95rem;
}
.controls-table .keys { text-align: right; white-space: nowrap; }
.controls-table .what { color: var(--ink-dim); }
.controls-table .what b { color: var(--ink); }

/* ---------- victory ---------- */
.victory {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,6,3,.82);
  backdrop-filter: blur(3px);
}
.victory[hidden] { display: none; }
.victory-card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow: 0 30px 90px rgba(0,0,0,.8);
  padding: 30px 44px 34px;
  text-align: center;
  animation: slam 0.5s cubic-bezier(.2,2,.4,1) both;
}
.victory-title { font-family: var(--display); font-size: 2.2rem; margin: 18px 0 8px; }
.victory-sub { color: var(--ink-dim); font-size: 0.8rem; margin-bottom: 24px; }
.victory-actions { display: flex; gap: 12px; justify-content: center; }