@font-face { font-family: "Silk"; src: url("silkscreen.ttf") format("truetype"); font-display: swap; }
:root { --bg:#0a0a0c; --ink:#efe6e8; --red:#e0142c; --crim:#8f0e1f; --pink:#ff2f87; --dim:#6b6470; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Silk", ui-monospace, monospace; min-height: 100vh; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(ellipse at 50% -10%, #2a0710 0%, #0a0a0c 55%) fixed, var(--bg); }
.top { display: flex; align-items: center; gap: 16px; padding: 10px 16px; max-width: 1180px; margin: 0 auto; }
.back { color: var(--ink); text-decoration: none; font-size: 13px; opacity: .8; }
.back:hover { color: var(--pink); opacity: 1; }
.scrawl { flex: 1; text-align: center; color: var(--red); font-size: 15px; transform: rotate(-2deg) skewX(-12deg); letter-spacing: 1px;
  text-shadow: 1px 1px 0 #3a0008, -1px 0 0 rgba(224,20,44,.35); }
.mini { font: inherit; font-size: 11px; color: var(--ink); background: #1a1014; border: 1px solid #3a1a24; padding: 5px 8px; cursor: pointer; }
.mini:hover { border-color: var(--pink); }
.stage { max-width: 1180px; margin: 0 auto; padding: 0 12px 28px; }
.cab { position: relative; width: min(100%, calc((100vh - 120px) * 16 / 9)); min-width: 280px; margin: 0 auto; aspect-ratio: 16 / 9;
  border: 3px solid #2a0d15; box-shadow: 0 0 0 1px #000, 0 0 40px rgba(224,20,44,.18), inset 0 0 0 1px #000; background: #000; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  box-shadow: inset 0 0 70px rgba(0,0,0,.65); }
.help { margin: 22px auto 0; max-width: 1000px; font-size: 12px; line-height: 1.7; color: #cfc4c8; }
.help h2 { font-size: 16px; color: var(--red); margin: 0 0 8px; letter-spacing: 2px; }
.help h3 { font-size: 12px; color: var(--pink); margin: 0 0 4px; }
.help p { margin: 0 0 4px; }
.help b { color: var(--ink); font-weight: normal; background: #1d1116; padding: 0 3px; }
.help em { color: var(--red); font-style: normal; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.fine { margin-top: 14px !important; color: var(--dim); font-size: 10px; }
/* touch */
.touch { display: none; user-select: none; -webkit-user-select: none; touch-action: none; }
body.is-touch .touch { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px auto 0; max-width: 640px; }
body.is-touch .help { display: none; }
.dpad { position: relative; width: 132px; height: 132px; border-radius: 50%; background: #140b0f; border: 2px solid #3a1a24; touch-action: none; }
.dpad i { position: absolute; width: 38px; height: 38px; background: #24131a; border: 1px solid #4a2030; }
.dpad i.u { left: 45px; top: 6px; } .dpad i.d { left: 45px; bottom: 6px; } .dpad i.l { left: 6px; top: 45px; } .dpad i.r { right: 6px; top: 45px; }
.dpad i.on { background: var(--red); }
.btns { display: grid; grid-template-columns: repeat(3, 54px); gap: 8px; }
.tb { font: inherit; font-size: 11px; height: 54px; color: var(--ink); background: #24131a; border: 2px solid #4a2030; border-radius: 50%; touch-action: none; }
.tb.blk { background: #1b1b22; } .tb.spc { background: #3a0d1c; border-color: var(--pink); }
.tb.on { background: var(--red); border-color: #fff; }
.tb.start { border-radius: 6px; height: 34px; padding: 0 12px; align-self: flex-end; }
@media (orientation: landscape) and (max-height: 520px) {
  .top { padding: 4px 10px; } .scrawl { font-size: 12px; }
  .cab { width: min(100%, calc((100vh - 40px) * 16 / 9)); }
  body.is-touch .touch { position: fixed; left: 0; right: 0; bottom: 6px; max-width: none; padding: 0 10px; pointer-events: none; }
  body.is-touch .touch > * { pointer-events: auto; opacity: .72; }
}
@media (max-width: 560px) { .scrawl { display: none; } .top { justify-content: space-between; } }