:root {
  color-scheme: dark;
  --ink: #05050a;
  --paper: #e9e2cf;
  --acid: #d9ff3f;
  --rage: #ff3f32;
  --rapture: #8d56ff;
  --cyan: #64f5ff;
}

* { box-sizing: border-box; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #020205;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}
body, #game-shell, #game-shell *, canvas, #touch-controls, #touch-controls * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
::selection { background: transparent; }
body {
  display: block;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(circle at 50% 35%, rgba(117, 38, 168, .18), transparent 35%),
    linear-gradient(160deg, #07060a, #010103 60%, #09020b);
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  opacity: .065;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.055) 4px, transparent 5px),
    radial-gradient(circle at 30% 20%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 70% 70%, #fff 0 1px, transparent 1px);
  background-size: auto, 67px 71px, 89px 83px;
  mix-blend-mode: overlay;
}

#game-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  padding: 4px;
}

canvas {
  display: block;
  width: min(calc(100vw - 8px), calc((100dvh - 8px) * 16 / 9));
  height: min(calc((100vw - 8px) * 9 / 16), calc(100dvh - 8px));
  max-width: none;
  max-height: none;
  background: #08070b;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 5px #020204,
    0 0 0 6px rgba(217,255,63,.22),
    0 30px 100px rgba(0,0,0,.9),
    0 0 100px rgba(126, 53, 255, .15);
  outline: none;
}

#loading {
  position: absolute;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  width: min(calc(100vw - 8px), calc((100dvh - 8px) * 16 / 9));
  height: min(calc((100vw - 8px) * 9 / 16), calc(100dvh - 8px));
  aspect-ratio: 16/9;
  max-width: none;
  max-height: none;
  background: #050409;
  z-index: 10;
  transition: opacity .45s ease, visibility .45s;
}
#loading.hidden { opacity: 0; visibility: hidden; }
.loading-mark {
  font-size: clamp(52px, 10vw, 130px);
  letter-spacing: -.07em;
  transform: skew(-8deg);
  text-shadow: 7px 7px 0 #9b1637, -5px -4px 0 #3428a2;
}
.loading-mark span { color: var(--acid); }
.loading-copy { letter-spacing: .24em; font-family: monospace; font-size: 12px; }
.loading-detail { min-height: 16px; color: #8d8792; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-align: center; }
#loading-retry { padding: 9px 16px; border: 1px solid var(--acid); background: rgba(8,7,12,.88); color: #fff; font: 12px/1 Impact, sans-serif; letter-spacing: .1em; border-radius: 3px; }
#loading-retry[hidden] { display: none; }
.loading-bar { width: min(360px, 55vw); height: 4px; background: #222; overflow: hidden; }
.loading-bar i { display:block; width:45%; height:100%; background: var(--acid); animation: load 1.1s infinite ease-in-out; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(250%); } }

footer {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  padding: 4px 9px;
  color: rgba(255,255,255,.36);
  background: rgba(2,2,5,.58);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(5px);
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  opacity: .72;
  transition: opacity .2s ease;
}
footer:hover { opacity: 1; }
footer button {
  border: 1px solid rgba(255,255,255,.25);
  padding: 5px 9px;
  color: rgba(255,255,255,.7);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
footer button:hover { color: var(--acid); border-color: var(--acid); }

#rotate-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  place-items: center;
  text-align: center;
  background: #050409;
  font-size: 34px;
  letter-spacing: .08em;
}
#rotate-notice small { display: block; margin-top: 10px; color: #aaa; font: 13px system-ui; }

#touch-controls { display: none; }

@media (pointer: coarse) {
  html, body, #game-shell, #game-shell *, canvas, #loading, #touch-controls, #touch-controls * {
    touch-action: none !important;
  }

  footer { display: none; }

  #game-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    place-items: start center;
    padding:
      max(2px, env(safe-area-inset-top, 0px))
      max(2px, env(safe-area-inset-right, 0px))
      max(2px, env(safe-area-inset-bottom, 0px))
      max(2px, env(safe-area-inset-left, 0px));
    touch-action: none;
  }

  canvas,
  #loading {
    width: min(100%, 177.777778dvh);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    touch-action: none;
  }

  #touch-controls {
    --touch-target: clamp(40px, 6dvh, 46px);
    --touch-gap: clamp(2px, .7dvh, 5px);
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    touch-action: none;
  }

  #touch-controls .touch-left,
  #touch-controls .touch-right,
  #touch-controls .touch-system {
    pointer-events: auto;
  }

  #touch-controls .touch-left {
    position: absolute;
    left: max(8px, env(safe-area-inset-left, 0px));
    bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 4px));
    opacity: .74;
    transition: opacity .15s ease;
  }

  #touch-controls .touch-right {
    position: absolute;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 4px));
    display: grid;
    grid-template-columns: repeat(2, var(--touch-target));
    grid-template-rows: repeat(4, var(--touch-target));
    gap: var(--touch-gap);
    align-content: end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }

  #touch-controls.fight-active .touch-right {
    opacity: .72;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  #touch-controls .touch-system {
    position: absolute;
    display: none;
    gap: 6px;
  }

  #touch-controls[data-game-state="select"] .touch-system,
  #touch-controls[data-game-state="fight"] .touch-system,
  #touch-controls[data-game-state="paused"] .touch-system,
  #touch-controls[data-game-state="howto"] .touch-system,
  #touch-controls[data-game-state="extras"] .touch-system,
  #touch-controls[data-game-state="extras-code-entry"] .touch-system {
    display: flex;
  }

  #touch-controls[data-game-state="select"] .touch-system {
    top: max(8px, calc(env(safe-area-inset-top, 0px) + 8px));
    left: max(8px, env(safe-area-inset-left, 0px));
  }

  #touch-controls[data-game-state="fight"] .touch-system,
  #touch-controls[data-game-state="paused"] .touch-system,
  #touch-controls[data-game-state="howto"] .touch-system,
  #touch-controls[data-game-state="extras"] .touch-system,
  #touch-controls[data-game-state="extras-code-entry"] .touch-system {
    left: 50%;
    bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 4px));
    transform: translateX(-50%);
  }

  #touch-controls button {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: white;
    font: 18px Impact, sans-serif;
    line-height: 1;
    touch-action: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    isolation: isolate;
  }

  #touch-controls button::before {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 0;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: inherit;
    background: rgba(8,7,12,.62);
    box-shadow: 0 2px 8px rgba(0,0,0,.42);
    backdrop-filter: blur(4px);
  }

  #touch-controls button > span {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  #touch-controls button:focus-visible {
    outline: 3px solid var(--acid);
    outline-offset: 1px;
  }

  #touch-controls button:active {
    transform: scale(.93);
  }

  #touch-controls button:active::before {
    background: rgba(217,255,63,.38);
    border-color: rgba(255,255,255,.8);
  }

  #touch-controls .touch-left:has(.touch-joystick:active),
  #touch-controls .touch-right:has(button:active),
  #touch-controls .touch-system:has(button:active) {
    opacity: .96;
  }

  #touch-controls .touch-joystick {
    position: relative;
    width: calc(var(--touch-target) * 2.7);
    height: calc(var(--touch-target) * 2.7);
    border-radius: 50%;
    touch-action: none;
  }

  #touch-controls .joystick-base,
  #touch-controls .joystick-knob {
    border-radius: 50%;
    pointer-events: none;
  }

  #touch-controls .joystick-base {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0, rgba(255,255,255,.06) 34%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.03) 60%, rgba(0,0,0,0) 61%),
      radial-gradient(circle at 50% 50%, rgba(8,7,12,.56), rgba(8,7,12,.26));
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
  }

  #touch-controls .joystick-base::before,
  #touch-controls .joystick-base::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: rgba(255,255,255,.07);
    transform: translate(-50%, -50%);
  }

  #touch-controls .joystick-base::before {
    width: 1px;
    height: 72%;
  }

  #touch-controls .joystick-base::after {
    width: 72%;
    height: 1px;
  }

  #touch-controls .joystick-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--touch-target) * 1.12);
    height: calc(var(--touch-target) * 1.12);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.26), rgba(255,255,255,.08) 34%, rgba(0,0,0,.12) 35%, rgba(8,7,12,.88));
    border: 1px solid rgba(255,255,255,.44);
    box-shadow: 0 4px 12px rgba(0,0,0,.38);
    transition: transform .045s linear, background .1s ease;
  }

  #touch-controls .touch-joystick[data-direction]:not([data-direction="center"]) .joystick-knob {
    background: radial-gradient(circle at 35% 32%, rgba(217,255,63,.34), rgba(255,255,255,.12) 34%, rgba(0,0,0,.14) 35%, rgba(8,7,12,.92));
  }

  #touch-controls .touch-right button {
    font-size: 15px;
  }

  #touch-controls .high-punch::before,
  #touch-controls .low-punch::before { border-color: rgba(255,255,255,.78); }
  #touch-controls .high-kick::before,
  #touch-controls .low-kick::before { border-color: var(--rage); }
  #touch-controls .block::before { border-color: #86b8ff; }
  #touch-controls .special::before { border-color: var(--cyan); }
  #touch-controls .super::before { border-color: var(--acid); }
  #touch-controls .taunt::before { border-color: #bd8cff; }

  #touch-controls .touch-system button {
    width: auto;
    min-width: 46px;
    height: 38px;
    padding: 0 12px;
    border-radius: 19px;
    font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .05em;
  }

  #touch-controls .touch-system button::before { inset: 2px; }
  #touch-controls .touch-pause::before { border-color: rgba(255,255,255,.68); }
  #touch-controls .touch-pause-fight { display: none; width: 20px; height: 16px; place-content: center; gap: 3px; }
  #touch-controls .touch-pause-fight i { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
  #touch-controls .touch-pause-back { display: inline; }
  #touch-controls[data-game-state="fight"] .touch-pause { min-width: 42px; width: 42px; padding: 0; }
  #touch-controls[data-game-state="fight"] .touch-pause-fight { display: grid; }
  #touch-controls[data-game-state="fight"] .touch-pause-back { display: none; }
}

@media (pointer: coarse) and (hover: none) and (orientation: landscape) and (min-height: 521px) {
  /* Tablet-only fight layout:
       · | B  | S
       R | HP | HK
       T | LP | LK
  */
  #touch-controls .touch-right {
    grid-template-columns: repeat(3, var(--touch-target));
    grid-template-rows: repeat(3, var(--touch-target));
  }
  #touch-controls .block { grid-column: 2; grid-row: 1; }
  #touch-controls .special { grid-column: 3; grid-row: 1; }
  #touch-controls .super { grid-column: 1; grid-row: 2; }
  #touch-controls .high-punch { grid-column: 2; grid-row: 2; }
  #touch-controls .high-kick { grid-column: 3; grid-row: 2; }
  #touch-controls .taunt { grid-column: 1; grid-row: 3; }
  #touch-controls .low-punch { grid-column: 2; grid-row: 3; }
  #touch-controls .low-kick { grid-column: 3; grid-row: 3; }
}

@media (pointer: coarse) and (max-height: 520px) {
  #touch-controls {
    --touch-target: 40px;
    --touch-gap: 2px;
  }
}

@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
  #touch-controls .touch-right,
  #touch-controls .touch-left,
  #touch-controls button {
    transition: none;
  }
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotate-notice { display: grid; }
}


/* Build 3.5.4: native mobile/tablet cheatcode entry overlay. */
#mobile-cheat-entry {
  display: none;
}

@media (pointer: coarse) {
  #mobile-cheat-entry {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding:
      max(10px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(10px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
    background: rgba(2, 2, 6, .72);
    backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, visibility .14s ease;
    touch-action: manipulation !important;
  }

  #mobile-cheat-entry.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #mobile-cheat-entry,
  #mobile-cheat-entry * {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }

  #mobile-cheat-form {
    width: min(520px, calc(100vw - 28px));
    max-height: calc(100dvh - 20px);
    overflow: auto;
    padding: clamp(16px, 3.4dvh, 28px);
    border: 1px solid rgba(255,255,255,.36);
    border-top: 3px solid var(--rage);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(23,18,29,.98), rgba(5,4,9,.98)), #08070b;
    box-shadow: 0 22px 70px rgba(0,0,0,.78), 0 0 0 1px rgba(217,255,63,.13) inset;
  }

  .mobile-cheat-kicker {
    margin-bottom: 5px;
    color: var(--rage);
    font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .15em;
  }

  #mobile-cheat-title {
    display: block;
    margin-bottom: 12px;
    color: #fff;
    font: clamp(24px, 5dvh, 34px)/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    letter-spacing: .02em;
  }

  #mobile-cheat-input {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 11px 14px;
    border: 2px solid var(--acid);
    border-radius: 4px;
    outline: 0;
    background: rgba(0,0,0,.78);
    color: #fff;
    caret-color: var(--acid);
    font: 20px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
  }

  #mobile-cheat-input::placeholder {
    color: #68616d;
    opacity: 1;
  }

  #mobile-cheat-input:focus {
    box-shadow: 0 0 0 3px rgba(217,255,63,.18), 0 0 24px rgba(217,255,63,.14);
  }

  #mobile-cheat-status {
    min-height: 18px;
    margin: 8px 0 10px;
    color: #aaa3ae;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
  }

  #mobile-cheat-status[data-type="error"] { color: #ff6b63; }
  #mobile-cheat-status[data-type="success"] { color: var(--acid); }

  .mobile-cheat-actions {
    display: grid;
    grid-template-columns: minmax(92px, .72fr) minmax(132px, 1.28fr);
    gap: 10px;
  }

  .mobile-cheat-actions button {
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 4px;
    background: rgba(17,14,22,.94);
    color: #fff;
    font: 14px/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    letter-spacing: .08em;
    -webkit-appearance: none;
    appearance: none;
  }

  #mobile-cheat-submit {
    border-color: var(--acid);
    background: rgba(217,255,63,.12);
  }

  .mobile-cheat-actions button:active {
    transform: scale(.98);
    background: rgba(217,255,63,.24);
  }
}