/* STEEL RAIN - interface.

   Every text/background pair below is measured against WCAG on the near-black
   ground, because a menu that looks moody and cannot be read is just broken. */

:root {
  --bg:#0b0c12; --bg2:#161a26; --panel:#1d2438;
  --steel:#2b3450; --steel2:#3f4c72;
  --blue:#2c5ba8; --blue2:#4a8ad8;
  --red:#c93b45; --red2:#f07070;
  --amber:#f2c14e;
  --text:#e8ecf4;      /* 15.6:1 on --bg */
  --muted:#b3bdd0;     /*  9.6:1 */
  --dim:#8d97ad;       /*  5.9: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% 18%, rgba(44,91,168,.20), transparent 70%),
    var(--bg);
  animation:fade .18s ease-out both;
}
.screen.active { display:flex; }
@keyframes fade { from{opacity:0} to{opacity:1} }

/* ---------- attract mode ---------- */
#attract {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; image-rendering:pixelated;
  opacity:.28; filter:saturate(.7);
  pointer-events:none; z-index:0;
}
/* the logo has to stay legible over moving art, so the ground under it 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(11,12,18,.55), rgba(11,12,18,.94) 78%),
    linear-gradient(180deg, rgba(11,12,18,.85), transparent 30%, transparent 62%, rgba(11,12,18,.9));
}
.title-in {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

/* ---------- 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 #060810, 0 5px 0 var(--blue);
}
.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 #060810;
}
.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); }

/* one dominant call to action, the rest demoted */
.menu.primary-first .mi:first-child {
  font-size:clamp(13px,2.6vw,19px);
  color:var(--text);
  background:var(--blue);
  border:2px solid var(--blue2);
  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(--blue2); border-color:var(--amber); transform:translateY(-1px);
}
.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; }

.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(--steel2); 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 #060810;
}
.head.danger { color:var(--red2); }

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

/* ---------- panels ---------- */
.panel {
  width:min(600px,94vw);
  background:var(--panel); border:2px solid var(--steel2); 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); }

.panel .r, .controls .r {
  display:flex; justify-content:space-between; gap:12px;
  padding:5px 0; border-bottom:1px dashed rgba(141,151,173,.28);
}
.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(--steel2); padding:12px 16px;
}

/* ---------- stage 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(--steel2);
  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:#242c44; }
.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 {
  width:min(600px,94vw);
  background:var(--panel); border:2px solid var(--steel2); padding:14px 16px;
}
.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(141,151,173,.3); padding-top:8px;
}

/* ---------- 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(--steel2); cursor:pointer;
  padding:14px 22px; min-height:var(--tap);
  transition:background .1s, border-color .1s, transform .1s;
}
.btn:hover, .btn.sel { background:#242c44; border-color:var(--amber); transform:translateY(-1px); }
.btn.primary { background:var(--blue); border-color:var(--blue2); }
.btn.primary:hover { background:var(--blue2); }

/* ---------- 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;
  touch-action:none; display:block;
}

/* optional CRT dressing, off unless asked for */
body.crt .screen.game::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.13) 3px 4px);
}

/* ---------- pause as a real overlay ---------- */
.screen.overlay {
  z-index:10;
  background:rgba(8,9,14,.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(--steel2);
  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(141,151,173,.3);
  border-bottom:1px dashed rgba(141,151,173,.3);
}
.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;
}

/* ---------- touch controls ---------- */
#touch { display:none; }
body.playing #touch {
  position:absolute; inset:auto 0 0 0; z-index:5;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-right));
  pointer-events:none;
}
/* only where there is no mouse -- an on-screen d-pad on a desktop is clutter */
@media (hover:hover) and (pointer:fine) { body.playing #touch { display:none; } }

.tpad {
  position:relative; width:150px; height:150px; pointer-events:auto;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
}
.tacts { display:flex; gap:12px; align-items:flex-end; pointer-events:auto; }
.tb {
  background:rgba(29,36,56,.72); border:2px solid rgba(63,76,114,.9);
  color:var(--muted); font-family:var(--body); font-size:20px;
  border-radius:6px; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center;
}
.tb:active { background:rgba(74,138,216,.6); color:#fff; }
.tpad .up   { grid-area:1/2; } .tpad .left  { grid-area:2/1; }
.tpad .right{ grid-area:2/3; } .tpad .down  { grid-area:3/2; }
/* the diagonals are real targets, because eight-way aim is the whole game */
.tpad .ul { grid-area:1/1; } .tpad .ur { grid-area:1/3; }
.tpad .dl { grid-area:3/1; } .tpad .dr { grid-area:3/3; }
.tpad .ul, .tpad .ur, .tpad .dl, .tpad .dr { background:rgba(29,36,56,.45); }
.tb.act {
  width:76px; height:76px; border-radius:50%;
  font-family:var(--disp); font-size:9px; letter-spacing:1px;
}
.tb.fire { background:rgba(201,59,69,.66); border-color:rgba(240,112,112,.9); color:#fff; }
.tb.jump { background:rgba(44,91,168,.66); border-color:rgba(74,138,216,.9); color:#fff; }

/* ---------- 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(--steel2);
  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; }
  #attract { display:none; }
  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); }
  .title-in { gap:8px; }
  .pips, .hint { display:none; }
  .sheet { padding:14px 16px 12px; gap:8px; }
}