:root { --red: #c20207; --ink: #111216; --panel: #1b1d23; --line: #2e313a; --grey: #9aa0a8; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); color: #fff; overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #0b0b0d; }
body.playing #stage { display: flex; }
#game { display: block; touch-action: none; }

.screen { position: absolute; inset: 0; display: none; overflow-y: auto; padding: 16px;
  background: radial-gradient(circle at 50% 0%, #3a0406 0%, var(--ink) 60%); }
.screen.active { display: block; }
.panel { max-width: 460px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line);
  border-top: 5px solid var(--red); border-radius: 8px; padding: 22px; text-align: center; }
.panel.wide { max-width: 900px; }
.logo { width: 220px; max-width: 70%; background: #fff; padding: 10px 14px; border-radius: 4px; }
.logo.small { width: 140px; }
h1, h2 { text-transform: uppercase; letter-spacing: .12em; margin: 14px 0 6px; }
h1 { font-size: 34px; color: #fff; } h2 { font-size: 22px; }
.lead { color: #d0d3d8; line-height: 1.45; margin: 8px 0 16px; } .lead.small { font-size: 14px; }
.field { display: block; text-align: left; font-size: 12px; color: var(--grey); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.field input { display: block; width: 100%; margin-top: 6px; padding: 12px; font-size: 18px; color: #fff; background: #0e0f13;
  border: 2px solid var(--line); border-radius: 6px; }
.field input:focus { outline: none; border-color: var(--red); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn { font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; cursor: pointer;
  background: #2a2d35; border: 2px solid #3b3f4a; border-radius: 6px; padding: 12px 18px; min-height: 46px; }
.btn:hover { border-color: #fff; }
.btn.primary { background: var(--red); border-color: var(--red); }
.btn.primary:hover { background: #e10a10; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.how { text-align: left; margin-top: 16px; color: #c8ccd2; font-size: 14px; line-height: 1.5; }
.how summary { cursor: pointer; color: #fff; font-weight: 700; }
.how ol { padding-left: 20px; }
.msg { min-height: 1.4em; color: var(--grey); font-size: 14px; }
.msg.err { color: #ff7a7a; } .msg.ok { color: #7cff8a; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; margin: 12px 0; text-align: left; }
.card { background: #14161b; border: 2px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: inherit; font: inherit; }
.card:hover { border-color: #666; }
.card.sel { border-color: var(--red); background: #2a0c0d; }
.card canvas { image-rendering: pixelated; display: block; margin: 0 auto 4px; width: 56px; height: 64px; }
.card b { display: block; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.card small { display: block; text-align: center; color: var(--grey); font-size: 11px; min-height: 2.6em; margin-bottom: 4px; }
.stat { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #c8ccd2; margin-top: 3px; }
.stat span:first-child { width: 44px; }
.pips { display: flex; gap: 2px; } .pips i { width: 12px; height: 7px; background: #33363f; display: block; } .pips i.on { background: var(--red); }

.stats { display: flex; gap: 8px; justify-content: center; margin: 10px 0; }
.stats div { flex: 1; background: #14161b; border: 1px solid var(--line); border-radius: 6px; padding: 10px 4px; }
.stats span { display: block; font-size: 22px; font-weight: 800; } .stats small { color: var(--grey); font-size: 11px; text-transform: uppercase; }
.cta { display: inline-block; margin-top: 16px; color: #fff; background: #fff1; padding: 10px 16px; border-radius: 6px; text-decoration: none; border: 1px solid var(--red); font-weight: 700; }
.cta:hover { background: var(--red); }

.tablewrap { max-height: 60vh; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; }
th { color: var(--grey); text-transform: uppercase; font-size: 11px; letter-spacing: .1em; position: sticky; top: 0; background: var(--panel); }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
tr.me td { background: #3a0d0f; font-weight: 700; }
td:first-child { width: 36px; color: var(--grey); }

#topBtns { position: absolute; right: 6px; top: 48px; display: none; gap: 6px; z-index: 5; }
body.playing #topBtns { display: flex; }
#topBtns button { min-width: 38px; height: 30px; font: 700 11px inherit; color: #fff; background: rgba(0,0,0,.55); border: 1px solid #555; border-radius: 4px; }

/* Touch controls */
#touch { display: none; position: absolute; inset: 0; pointer-events: none; }
body.touch.playing #touch { display: block; }
#joyZone { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: 118px; width: 130px; height: 130px; border-radius: 50%;
  pointer-events: auto; touch-action: none; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.4); }
#stick { position: absolute; inset: 0; }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(194,2,7,.85); border: 2px solid #fff; }
#act { position: absolute; right: max(37px, env(safe-area-inset-right)); bottom: 16px; width: 96px; height: 96px; border-radius: 50%; pointer-events: auto; touch-action: none;
  font: 800 15px inherit; letter-spacing: .06em; color: #fff; background: rgba(194,2,7,.75); border: 3px solid #fff; user-select: none; -webkit-user-select: none; }
#act.down { background: #ff2a30; transform: scale(.94); }

#rotate { display: none; position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.94); align-items: center; justify-content: center; text-align: center; padding: 30px; font-size: 20px; }
@media (orientation: portrait) and (pointer: coarse) { body.playing #rotate { display: flex; } }
@media (max-height: 520px) { .panel { padding: 14px; } h1 { font-size: 26px; } .logo { width: 150px; } .lead { margin: 6px 0 10px; } }
@media (max-height: 360px) { #joyZone { width: 108px; height: 108px; bottom: 100px; right: 26px; } #act { width: 80px; height: 80px; right: 40px; bottom: 12px; } #knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; } }