/* e.H.w. Flat throughout: solid fills, 1px borders, no gradients, glows or shadows. */
:root {
  --ink: #0e0e0e; --panel: #151515; --line: #3a3a3a; --paper: #ece9e2; --dim: #a6a39b;
  --red: #c4121b; --red-2: #e0222c; --steel: #8f9397; --gold: #e2b93b;
  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --osd: 'VT323', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); color: var(--paper); font-family: var(--ui); font-size: 17px; overflow: hidden; }
[hidden] { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
kbd { font: 600 0.8em var(--ui); display: inline-block; min-width: 1.5em; padding: 0 0.35em; margin: 0 0.12em; text-align: center; color: var(--paper); border: 1px solid var(--steel); border-radius: 3px; line-height: 1.45; }
button { font: 600 1.05rem var(--ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper); background: transparent; border: 1px solid var(--steel); border-radius: 3px; padding: 0.6em 1em; cursor: pointer; }
button:hover, button:focus-visible { border-color: var(--paper); outline: none; }
button.main { background: var(--red); border-color: var(--red); }
button.main:hover, button.main:focus-visible { background: var(--red-2); border-color: var(--paper); }
button kbd { border-color: currentColor; opacity: 0.8; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.who { position: absolute; top: max(14px, env(safe-area-inset-top)); width: min(34vw, 340px); }
.who.left { left: max(16px, env(safe-area-inset-left)); }
.who.right { right: max(16px, env(safe-area-inset-right)); text-align: right; }
.who .name { font: 400 1.5rem var(--display); letter-spacing: 0.05em; line-height: 1; margin-bottom: 5px; display: flex; gap: 10px; align-items: baseline; }
.who.right .name { flex-direction: row-reverse; }
.who .name span { background: var(--ink); padding: 3px 8px 4px; }
.who .name em { display: none; font: 700 0.85rem var(--ui); letter-spacing: 0.12em; background: var(--gold); color: var(--ink); padding: 2px 7px; }
.who.fire .name em { display: inline-block; animation: blink 0.5s steps(2) infinite; }
.hp, .sp { background: var(--ink); border: 1px solid var(--paper); }
.hp { height: 16px; }
.sp { height: 8px; margin-top: 4px; border-color: var(--steel); width: 70%; }
.who.right .sp { margin-left: auto; }
.hp i, .sp i { display: block; height: 100%; width: 100%; background: var(--paper); transition: width 0.18s linear; }
.who.right .hp i, .who.right .sp i { margin-left: auto; }
.hp i.mid { background: var(--gold); }
.hp i.low { background: var(--red-2); }
.sp i { background: var(--red); width: 0; }
.who.fire .sp i { background: var(--gold); }
@keyframes blink { 50% { opacity: 0.25; } }

.osd { position: absolute; font: 400 1.75rem var(--osd); color: #f4f4f0; letter-spacing: 0.04em; display: none; }
body.tape .osd { display: block; }
.osd.rec { top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
.osd.rec b { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: #ff2a2a; margin-right: 0.35em; animation: blink 1.1s steps(2) infinite; }
.osd.stamp { left: max(18px, env(safe-area-inset-left)); bottom: max(44px, env(safe-area-inset-bottom)); white-space: pre; }

#banner { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); font: 400 clamp(1.6rem, 4.6vw, 3.4rem) var(--display); letter-spacing: 0.05em; white-space: nowrap; background: var(--ink); color: var(--paper); padding: 0.1em 0.55em 0.16em; border-left: 6px solid var(--red); opacity: 0; }
#banner.show { opacity: 1; }
#banner.special { background: var(--red); border-left-color: var(--paper); }
#count { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font: 400 clamp(6rem, 22vw, 14rem) var(--display); line-height: 1; background: var(--ink); color: var(--paper); padding: 0 0.22em 0.04em; opacity: 0; }
#count.show { animation: pop 0.8s ease-out; }
@keyframes pop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

#kick { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: min(420px, 78vw); text-align: center; background: var(--ink); border: 1px solid var(--paper); padding: 10px 12px 12px; }
#kick span { font: 700 1.15rem var(--ui); letter-spacing: 0.1em; text-transform: uppercase; }
#kick div { height: 14px; border: 1px solid var(--steel); margin-top: 8px; }
#kick i { display: block; height: 100%; width: 0; background: var(--gold); }

#prompt { position: absolute; left: 50%; bottom: max(46px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); border: 1px solid var(--steel); padding: 6px 12px 7px; font: 600 1.1rem var(--ui); letter-spacing: 0.03em; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
#moves { position: absolute; left: 50%; bottom: max(96px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(470px, calc(100vw - 24px)); background: var(--ink); border: 1px solid var(--steel); padding: 10px 14px 10px; }
#moves h2 { margin: 0 0 6px; font: 400 1.15rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-2); }
#moves .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#moves h3 { margin: 0 0 3px; font: 700 0.95rem var(--ui); letter-spacing: 0.08em; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
#moves ul { list-style: none; margin: 0; padding: 0; font: 600 1.05rem var(--ui); }
#moves li { display: flex; gap: 8px; line-height: 1.3; }
#moves li b { width: 2.2em; color: var(--steel); font-weight: 600; }
#moves p { margin: 7px 0 0; font-size: 0.92rem; color: var(--dim); }

/* ---------- menus ---------- */
#title, .sheet { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.78); overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; place-items: start center; padding: clamp(14px, 4vh, 44px) 16px 64px; }
.sheet { place-items: center; background: rgba(10, 10, 10, 0.7); }
.panel { width: min(680px, 100%); }
.panel.small { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); padding: 22px 22px 24px; text-align: center; }
.panel.small h2 { margin: 0 0 16px; font: 400 2rem var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.panel.small .go { flex-direction: column; }
.panel.small p { color: var(--dim); margin: 0; }
#title h1 { margin: 0; }
#title h1 img { display: block; width: min(560px, 100%); height: auto; margin: 0 auto; }
.pitch { text-align: center; font-size: 1.15rem; color: var(--paper); max-width: 34em; margin: 14px auto 18px; line-height: 1.35; }
.go { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.go button { min-width: 11.5em; }
.opts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.opts button { font-size: 0.9rem; padding: 0.4em 0.9em; color: var(--dim); border-color: var(--line); }
.opts button:hover { color: var(--paper); border-color: var(--steel); }
.note { text-align: center; color: var(--gold); margin: 14px 0 0; }
.keys { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); padding: 14px 18px 16px; }
.keys h2 { margin: 0 0 8px; font: 400 1.2rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
.keys table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.keys th, .keys td { text-align: left; padding: 5px 8px 5px 0; border-top: 1px solid var(--line); vertical-align: top; font-weight: 500; }
.keys thead th { border-top: 0; color: var(--dim); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.keys tbody th { color: var(--paper); font-weight: 700; white-space: nowrap; }
.keys td { color: var(--dim); }
.tips { margin: 12px 0 0; padding-left: 1.1em; color: var(--dim); line-height: 1.4; }
.tips li + li { margin-top: 4px; }

/* ---------- credit ---------- */
.credit { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 14px; font: 500 0.82rem var(--ui); letter-spacing: 0.04em; background: var(--ink); padding: 3px 9px 4px; }
.credit a { color: var(--dim); text-decoration: none; }
.credit a:hover { color: var(--paper); }

@media (max-width: 640px) {
  html, body { font-size: 15px; }
  .who { width: 41vw; }
  .who .name { font-size: 1.15rem; }
  .osd { font-size: 1.2rem; }
  .osd.rec { top: auto; bottom: max(64px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); transform: none; }
  .osd.stamp { left: max(12px, env(safe-area-inset-left)); bottom: max(40px, env(safe-area-inset-bottom)); }
  .keys thead { display: none; }
  .keys tr { display: grid; grid-template-columns: 1fr; padding: 4px 0; border-top: 1px solid var(--line); }
  .keys th, .keys td { border: 0; padding: 1px 0; }
  .keys td:last-child::before { content: 'Controller: '; }
  .credit { gap: 10px; font-size: 0.78rem; }
  .go button { min-width: 0; flex: 1 1 9em; }
}

/* ---------- touch controls ---------- */
html, body { overscroll-behavior: none; }
.tc { display: none; }
body.touch .tc { display: revert; }
body.touch .kb, body.touch kbd.key, body.touch .osd { display: none; }
body.touch section.keys.tc { display: block; }
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch.playing #view { touch-action: none; }
.tips.first { margin-top: 0; }
#touch { position: fixed; inset: 0; pointer-events: none; display: none; touch-action: none; }
body.touch.playing #touch { display: block; }
#stickzone { position: absolute; left: 0; bottom: 0; width: 46%; height: 74%; pointer-events: auto; touch-action: none; }
#stick { position: absolute; left: calc(92px + env(safe-area-inset-left)); top: calc(100% - 92px); width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; border: 2px solid rgba(236, 233, 226, 0.55); background: rgba(14, 14, 14, 0.32); opacity: 0.6; }
#stick.on { opacity: 1; }
#stick.run { border-color: var(--red-2); }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(236, 233, 226, 0.88); }
.tb { position: absolute; pointer-events: auto; touch-action: none; width: 86px; height: 86px; padding: 0; border-radius: 50%; border: 2px solid rgba(236, 233, 226, 0.8); background: rgba(14, 14, 14, 0.5); color: var(--paper); font: 400 1.7rem var(--display); line-height: 1; letter-spacing: 0; text-transform: none; }
.tb small { display: block; margin-top: 2px; font: 700 0.6rem var(--ui); letter-spacing: 0.08em; text-transform: uppercase; }
.tb.s { width: 62px; height: 62px; font: 700 0.7rem var(--ui); letter-spacing: 0.06em; text-transform: uppercase; }
.tb.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.tb.a { right: calc(20px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); background: rgba(196, 18, 27, 0.8); border-color: var(--paper); }
.tb.b { right: calc(116px + env(safe-area-inset-right)); bottom: calc(56px + env(safe-area-inset-bottom)); }
.tb.c { right: calc(30px + env(safe-area-inset-right)); bottom: calc(122px + env(safe-area-inset-bottom)); }
.tb.d { right: calc(126px + env(safe-area-inset-right)); bottom: calc(154px + env(safe-area-inset-bottom)); }
.tb.e { right: calc(212px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); }
.tb.f { right: calc(36px + env(safe-area-inset-right)); bottom: calc(196px + env(safe-area-inset-bottom)); width: 52px; height: 52px; font-size: 0.62rem; }
.tpause { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); pointer-events: auto; width: 46px; height: 32px; padding: 0; font: 700 0.9rem var(--ui); letter-spacing: 0.1em; background: rgba(14, 14, 14, 0.6); border-color: var(--steel); }
body.touch .who { width: 30vw; }
body.touch .who .name { font-size: 1.1rem; }
body.touch #prompt { bottom: auto; top: calc(48px + env(safe-area-inset-top)); font-size: 0.95rem; padding: 4px 10px 5px; }
body.touch #moves { bottom: auto; top: calc(46px + env(safe-area-inset-top)); width: min(380px, 46vw); padding: 6px 10px 7px; }
body.touch #moves h2 { font-size: 0.9rem; margin-bottom: 3px; }
body.touch #moves ul { font-size: 0.86rem; }
body.touch #moves li { line-height: 1.16; }
body.touch #moves p { font-size: 0.74rem; margin-top: 4px; }
body.touch #banner { top: 34%; }
body.touch #kick { top: 44%; }
body.touch .credit { right: auto; left: 50%; transform: translateX(-50%); bottom: max(3px, env(safe-area-inset-bottom)); font-size: 0.7rem; white-space: nowrap; }
#rotate { display: none; position: fixed; inset: 0; z-index: 5; place-items: center; background: var(--ink); text-align: center; padding: 24px; font: 400 1.6rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
@media (orientation: portrait) { body.touch.playing #rotate { display: grid; } }
@media (max-height: 480px) {
  #title { padding-top: 10px; }
  #title h1 img { width: min(300px, 56%); }
  .pitch { margin: 6px auto 10px; font-size: 1rem; }
  .keys { margin-top: 12px; }
  .panel.small { padding: 14px 18px 16px; }
  .panel.small h2 { font-size: 1.5rem; margin-bottom: 10px; }
  .panel.small .go { flex-direction: row; }
}
body.touch #banner { top: 17%; font-size: clamp(1.1rem, 3.2vw, 1.9rem); }
body.touch #count { top: 40%; font-size: clamp(4rem, 14vw, 7rem); }
.credit { z-index: 6; }