:root {
  color-scheme: dark;
  --ink: #0b0909;
  --panel: #171211;
  --line: #3b302d;
  --bone: #f3ecdd;
  --dim: #9f9287;
  --gold: #e4aa38;
  --green: #69d46d;
  --red: #ef5b55;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--bone); background: var(--ink);
  font-family: "Courier New", ui-monospace, monospace;
  background-image:
    radial-gradient(circle at 50% 10%, rgba(239,91,85,.08), transparent 38%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
}
button, a { font: inherit; }
button { cursor: pointer; }

.cabinet { width: min(1180px, 100%); min-height: 100vh; margin: auto; padding: clamp(12px, 2vw, 24px); display: grid; align-content: center; gap: 12px; }
.cabinet__head, .cabinet__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.back { color: var(--dim); text-decoration: none; text-transform: uppercase; font-size: 12px; letter-spacing: .12em; }
.back:hover { color: var(--gold); }
.brand { display: grid; justify-items: center; line-height: 1; }
.brand span { color: var(--red); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.brand strong { margin-top: 5px; font-size: clamp(19px, 3vw, 28px); text-transform: uppercase; letter-spacing: -.04em; }
.head-actions { display: flex; gap: 7px; }
.head-actions button {
  border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px;
  color: var(--dim); background: var(--panel); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
}
.head-actions button:hover, .head-actions button:focus-visible { color: var(--bone); border-color: var(--gold); }

.screen {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9;
  border: 2px solid #4b3b37; border-radius: 8px; background: #100b0b;
  box-shadow: 0 0 0 6px #1d1716, 0 20px 70px rgba(0,0,0,.58), inset 0 0 70px rgba(0,0,0,.6);
}
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); mix-blend-mode: screen;
}
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }

.hud { position: absolute; inset: 10px 14px auto; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; pointer-events: none; text-shadow: 2px 2px #000; }
.fighter { display: grid; gap: 4px; }
.fighter--enemy { justify-items: end; }
.fighter > span, .clock span { color: var(--bone); font-size: clamp(8px, 1.3vw, 12px); font-weight: 700; letter-spacing: .12em; }
.fighter > b { color: var(--gold); font-size: 12px; letter-spacing: .25em; }
.life { width: min(34vw, 310px); height: 14px; padding: 2px; border: 1px solid #77665f; background: #1b1110; }
.life i { display: block; width: 100%; height: 100%; background: var(--green); transform-origin: left center; transition: transform 90ms linear, background 160ms ease; }
.fighter--enemy .life i { transform-origin: right center; }
.rage-meter { position: relative; width: min(22vw, 190px); height: 15px; overflow: hidden; border: 1px solid #9b6a12; background: #1b1110; }
.rage-meter span { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--bone); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.rage-meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #99591a, var(--gold)); transform: scaleX(0); transform-origin: left center; transition: transform 90ms linear; }
.rage-trigger { width: fit-content; padding: 4px 8px; border: 1px solid #9b6a12; border-radius: 2px; color: var(--gold); background: #1b1110; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; pointer-events: auto; }
.rage-trigger:hover, .rage-trigger:focus-visible, .rage-trigger.is-ready { color: #171006; background: var(--gold); box-shadow: 0 0 14px rgba(228,170,56,.5); }
.clock { display: grid; justify-items: center; align-content: start; }
.clock strong { color: var(--gold); font-size: clamp(22px, 4vw, 38px); line-height: 1; }

.overlay {
  position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center; background: rgba(8,4,4,.78); backdrop-filter: blur(2px);
}
.overlay[hidden] { display: none; }
.eyebrow { margin: 0; color: var(--red); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.overlay h1 { margin: 0; font-size: clamp(42px, 10vw, 94px); line-height: .86; text-transform: uppercase; letter-spacing: -.08em; text-shadow: 5px 5px #49201d; }
.overlay > p:not(.eyebrow):not(.keys) { max-width: 54ch; margin: 0; color: #c7bdb3; font-size: clamp(11px, 1.7vw, 15px); line-height: 1.55; }
.start { min-width: 170px; padding: 12px 18px; border: 2px solid #f1cb6d; border-radius: 3px; color: #171006; background: var(--gold); box-shadow: 4px 4px 0 #6f4a0b; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.start:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #6f4a0b; }
.keys { margin: 0; color: var(--dim); font-size: 10px; text-transform: uppercase; }
kbd { margin: 0 2px; padding: 2px 5px; border: 1px solid #5a4c47; border-bottom-width: 2px; border-radius: 2px; color: var(--bone); background: #1c1715; }

.touch { display: none; position: absolute; inset: auto 10px 10px; z-index: 5; justify-content: space-between; pointer-events: none; }
.touch > div { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; pointer-events: auto; }
.touch__fight { grid-template-columns: repeat(4, 52px) !important; align-items: end; }
.touch button { min-width: 54px; height: 54px; padding: 4px; border: 2px solid rgba(243,236,221,.58); border-radius: 50%; color: #170d0b; background: rgba(228,170,56,.82); font-size: 11px; font-weight: 900; text-transform: uppercase; touch-action: none; }
.touch button:active, .touch button.is-held { transform: scale(.94); filter: brightness(1.2); }
.touch__fight button { background: rgba(239,91,85,.85); }
.touch__fight .touch__kick { width: 64px; height: 64px; align-self: end; }
.touch__fight .touch__special { border-color: #f1cb6d; background: rgba(104,184,199,.9); }
.touch__fight .touch__special.is-ready { color: #fff; background: var(--gold); box-shadow: 0 0 16px rgba(228,170,56,.7); }

.cabinet__foot { color: var(--dim); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.cabinet__foot p { margin: 0; }
.status { white-space: nowrap; }
.status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.status strong { color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (pointer: coarse), (max-width: 760px) {
  .cabinet { align-content: start; padding: 10px; }
  .screen { aspect-ratio: 27 / 43; }
  .touch { display: flex; }
  .keys { display: none; }
  .cabinet__head { flex-wrap: wrap; }
  .brand { order: -1; width: 100%; }
  .cabinet__foot { display: block; line-height: 1.5; }
  .status { margin-top: 4px !important; }
  .hud { gap: 8px; }
  .life { width: 132px; height: 12px; }
  .rage-meter { width: 100px; }
  .rage-trigger { display: none; }
  .fighter > span, .clock span { font-size: 8px; }
}

@media (max-width: 410px) {
  .touch > div { grid-template-columns: repeat(3, 48px); gap: 4px; }
  .touch__fight { grid-template-columns: repeat(4, 43px) !important; }
  .touch button { min-width: 46px; width: 46px; height: 46px; font-size: 9px; }
  .touch__fight .touch__kick { width: 54px; height: 54px; }
  .touch__fight .touch__special { min-width: 42px; width: 42px; height: 42px; }
  .life { width: 112px; }
}

@media (prefers-reduced-motion: reduce) { .screen::after { display: none; } }