/* IRON WOLF - interface. Olive drab, stencil, and a CRT you can switch off. */

:root {
  --bg:#12160f; --bg2:#1c2216; --panel:#232b1b;
  --olive:#4e6330; --olive2:#6b8442; --khaki:#8a8055;
  --red:#b8232f; --red2:#e8434f; --amber:#f2c14e;
  --text:#e6e9dd;      /* 13.2:1 on --bg */
  --muted:#b3bda0;     /*  8.9:1 */
  --dim:#8d9a78;       /*  5.6:1 */
  --disp:'Press Start 2P','Courier New',monospace;
  --body:'VT323','Courier New',monospace;
  --tap:44px;
}

* { box-sizing:border-box; }

html,body {
  height:100%; margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:20px; line-height:1.4;
  overflow:hidden; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

#app { position:fixed; inset:0; }

:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }

/* ---------- screens ---------- */
.screen {
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center;
  justify-content:center; justify-content:safe center;
  gap:14px; overflow-y:auto;
  padding:20px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(78,99,48,.22), transparent 70%),
    var(--bg);
  animation:fade .2s ease-out both;
}
.screen.active { display:flex; }
@keyframes fade { from{opacity:0} to{opacity:1} }

/* ---------- logo ---------- */
.logo { margin:0; text-align:center; line-height:1; display:flex; flex-direction:column; gap:4px; }
.logo .l1 {
  font-family:var(--disp); font-size:clamp(26px,7vw,58px);
  color:var(--text); letter-spacing:6px;
  text-shadow:0 4px 0 #0a0d07, 0 5px 0 var(--olive);
}
.logo .l2 {
  font-family:var(--disp); font-size:clamp(30px,8.5vw,66px);
  color:var(--red2); letter-spacing:8px;
  text-shadow:0 4px 0 #4a0a11, 0 6px 0 #0a0d07;
}
.tag { margin:0; color:var(--dim); letter-spacing:3px; font-size:20px; text-transform:uppercase; }

/* ---------- menus ---------- */
.menu { display:flex; flex-direction:column; align-items:center; gap:2px; }
.menu.compact { gap:0; }
.mi {
  position:relative; background:none; border:0; cursor:pointer;
  font-family:var(--disp); font-size:clamp(10px,2vw,14px);
  letter-spacing:2px; color:var(--muted);
  padding:12px 42px; min-height:var(--tap);
  transition:color .1s, transform .1s;
}
.mi:hover, .mi.sel { color:var(--text); transform:translateX(2px); }
.mi.sel::before {
  content:'>'; position:absolute; left:20px; color:var(--red2);
  animation:blip .7s steps(2) infinite;
}
@keyframes blip { 0%,100%{opacity:.3} 50%{opacity:1} }
.mi span { color:var(--amber); }

.hint { margin:0; color:var(--dim); font-size:17px; letter-spacing:1px; }
.hint .k {
  display:inline-block; margin:0 4px; padding:1px 7px;
  border:1px solid var(--olive); border-radius:3px; color:var(--text);
}

.back-link {
  position:absolute; left:14px; top:12px; z-index:3; color:var(--muted);
  text-decoration:none; font-size:18px; letter-spacing:1px;
  padding:8px 10px; min-height:var(--tap); display:inline-flex; align-items:center;
}
.back-link:hover { color:var(--amber); }

.head {
  margin:0; font-family:var(--disp); letter-spacing:3px;
  font-size:clamp(13px,2.8vw,22px); color:var(--text);
  text-shadow:0 3px 0 #0a0d07;
}
.head.danger { color:var(--red2); }

/* ---------- panels ---------- */
.panel {
  width:min(600px,94vw);
  background:var(--panel);
  border:2px solid var(--olive);
  padding:14px 16px;
}
.panel p { margin:0 0 9px; color:var(--muted); text-wrap:pretty; }
.panel p:last-child { margin-bottom:0; }
.panel strong { color:var(--amber); }
.dim { color:var(--dim); }
.small { font-size:17px; }

.panel .r, .controls .r {
  display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px dashed rgba(138,128,85,.3);
}
.panel .r:last-child, .controls .r:last-child { border-bottom:0; }
.panel .r span, .controls .r span { color:var(--muted); }
.panel .r em, .controls .r em { font-style:normal; color:var(--amber); text-align:right; }
.rows .r em { font-variant-numeric:tabular-nums; }

.controls {
  width:min(600px,94vw);
  background:var(--panel); border:2px solid var(--olive); padding:12px 16px;
}

/* ---------- mission select ---------- */
.level-list { display:flex; flex-direction:column; gap:6px; width:min(520px,94vw); }
.lvl {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  background:var(--panel); border:2px solid var(--olive);
  color:var(--text); cursor:pointer; text-align:left;
  padding:12px 14px; min-height:var(--tap);
  font-family:var(--body); font-size:19px;
  transition:border-color .1s, transform .1s, background .1s;
}
.lvl:hover, .lvl.sel { border-color:var(--amber); transform:translateX(3px); background:#2b3520; }
.lvl .n { font-family:var(--disp); font-size:13px; color:var(--red2); }
.lvl .nm { letter-spacing:2px; text-transform:uppercase; }
.lvl .bs { color:var(--dim); font-variant-numeric:tabular-nums; }
.lvl.locked { opacity:.4; cursor:not-allowed; }

/* ---------- briefing ---------- */
.brief {
  display:flex; gap:16px; align-items:flex-start;
  width:min(600px,94vw);
  background:var(--panel); border:2px solid var(--olive); padding:14px 16px;
}
#portrait { image-rendering:pixelated; width:72px; height:72px; border:2px solid var(--olive); flex:none; }
.brief-body { min-width:0; }
.brief-no { margin:0; color:var(--red2); font-size:17px; letter-spacing:2px; }
.brief-sub { margin:4px 0 8px; color:var(--dim); letter-spacing:1px; }
.brief-text { margin:0 0 8px; color:var(--muted); }
.brief-rule { margin:0; color:var(--muted); font-size:18px; border-top:1px dashed rgba(138,128,85,.35); padding-top:8px; }
.brief-rule strong { color:var(--red2); }

/* ---------- buttons ---------- */
.row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.btn {
  font-family:var(--disp); font-size:clamp(10px,1.7vw,13px); letter-spacing:2px;
  color:var(--text); background:var(--panel);
  border:2px solid var(--olive); cursor:pointer;
  padding:14px 22px; min-height:var(--tap);
  transition:background .1s, border-color .1s, transform .1s;
}
.btn:hover, .btn.sel { background:#2b3520; border-color:var(--amber); transform:translateY(-1px); }
.btn.primary { background:var(--olive); border-color:var(--olive2); }
.btn.primary:hover { background:var(--olive2); }

/* ---------- game ---------- */
.screen.game { justify-content:center; padding:0; background:#000; }
.stage { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#game {
  image-rendering:pixelated;
  width:100%; height:100%;
  max-width:100vw; max-height:100vh;
  object-fit:contain;
  cursor:crosshair;
  touch-action:none;
  display:block;
}
body.playing { cursor:none; }

/* optional CRT dressing, off in Options if you hate it */
body.crt .screen.game::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  /* plain alpha, not multiply -- multiply stacked on an already dark palette
     and buried the whole picture */
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.13) 3px 4px);
}

/* ---------- toast ---------- */
.toast {
  position:absolute; left:50%; bottom:22px; transform:translate(-50%,10px);
  z-index:30; pointer-events:none;
  background:var(--panel); border:2px solid var(--olive);
  padding:7px 13px; font-size:18px; letter-spacing:2px; color:var(--text);
  opacity:0; transition:opacity .2s, transform .2s;
  text-transform:uppercase;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  body.crt .screen.game::after { display:none; }
}

@media (max-height:620px) {
  .logo .l1 { font-size:clamp(20px,5vw,34px); }
  .logo .l2 { font-size:clamp(22px,6vw,40px); }
  .screen { gap:8px; }
  .hint { display:none; }
}

/* ===========================================================
   Title and pause, rebuilt.

   Two rules from the UI/UX pass drove this:

   - Hero-centric: one primary call to action that dominates,
     everything else demoted. Five identically-weighted menu
     rows gave a first-time player nothing to aim at.
   - A pause menu is a modal over the thing you paused. The old
     one replaced the game with a black screen, so you lost all
     sight of the state you were about to go back to.
   =========================================================== */

/* ---------- attract mode ---------- */
#attract {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  opacity: .3;
  filter: saturate(.65);
  pointer-events: none;
  z-index: 0;
}
/* the logo has to stay legible over moving art, so the ground under the
   text is darkened rather than trusting the art to be dark enough */
#scr-title::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(10,13,7,.55), rgba(10,13,7,.93) 78%),
    linear-gradient(180deg, rgba(10,13,7,.85), transparent 30%, transparent 62%, rgba(10,13,7,.9));
}
.title-in {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* ---------- one dominant CTA ---------- */
.menu.primary-first .mi:first-child {
  font-size: clamp(13px, 2.6vw, 19px);
  color: var(--text);
  background: var(--olive);
  border: 2px solid var(--olive2);
  padding: 16px 40px;
  margin-bottom: 6px;
  letter-spacing: 3px;
}
.menu.primary-first .mi:first-child:hover,
.menu.primary-first .mi:first-child.sel {
  background: var(--olive2);
  border-color: var(--amber);
  transform: translateY(-1px);
}
/* the marker sits outside the button so it does not shift the label */
.menu.primary-first .mi:first-child.sel::before { left: 14px; }
.menu.primary-first .mi:not(:first-child) { font-size: clamp(9px, 1.7vw, 12px); padding: 10px 42px; }

/* ---------- stage pips ---------- */
.pips { display: flex; gap: 7px; list-style: none; margin: 2px 0 0; padding: 0; }
.pips li {
  width: 26px; height: 5px; background: #2a331d;
  border: 1px solid var(--olive);
}
.pips li.on { background: var(--amber); border-color: var(--amber); }

/* ---------- pause as a real overlay ---------- */
.screen.overlay {
  /* above the game screen it sits on top of */
  z-index: 10;
  background: rgba(8,10,6,.82);
  backdrop-filter: blur(2px);
  animation: none;
}
.sheet {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(460px, 92vw);
  background: var(--panel);
  border: 2px solid var(--olive);
  box-shadow: 0 18px 0 rgba(0,0,0,.45);
  padding: 22px 20px 18px;
}
.sheet-eyebrow {
  margin: 0; color: var(--red2); font-size: 17px; letter-spacing: 3px;
  text-transform: uppercase;
}
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 100%; margin: 2px 0 4px; padding: 10px 0;
  border-top: 1px dashed rgba(138,128,85,.35);
  border-bottom: 1px dashed rgba(138,128,85,.35);
}
.stat-row div { text-align: center; }
.stat-row dt {
  font-size: 15px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase;
}
.stat-row dd {
  margin: 3px 0 0; font-family: var(--disp); font-size: 13px; color: var(--amber);
  font-variant-numeric: tabular-nums;
}

@media (max-height: 620px) {
  .title-in { gap: 8px; }
  .pips { display: none; }
  .sheet { padding: 14px 16px 12px; gap: 8px; }
}