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

* { box-sizing: border-box; }
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, canvas, #touch-controls, #touch-controls button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
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: .12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.08) 3px, transparent 4px),
    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-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) {
  footer { display: none; }

  #game-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    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 {
    display: flex;
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px));
    z-index: 20;
    justify-content: space-between;
    align-items: end;
    padding: 0;
    pointer-events: none;
    touch-action: none;
  }

  #touch-controls > div {
    display: grid;
    grid-template-columns: repeat(2, 54px);
    gap: 8px;
    pointer-events: auto;
  }

  #touch-controls .touch-right {
    grid-template-columns: repeat(4, 48px);
    gap: 6px;
    align-content: end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }

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

  #touch-controls button {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.38);
    background: rgba(10,8,14,.72);
    color: white;
    font: 20px Impact, sans-serif;
    line-height: 1;
    backdrop-filter: blur(5px);
    touch-action: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
  }

  #touch-controls button:focus,
  #touch-controls button:focus-visible {
    outline: none;
    box-shadow: none;
  }

  #touch-controls button:active {
    transform: scale(.92);
    background: rgba(217,255,63,.35);
  }

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

  #touch-controls .direction span {
    display: block;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  #touch-controls .direction-left span {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 16px solid #fff;
    margin-left: -4px;
  }

  #touch-controls .direction-right span {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
    margin-right: -4px;
  }

  #touch-controls .direction-up span {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid #fff;
    margin-top: -4px;
  }

  #touch-controls .direction-down span {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid #fff;
    margin-bottom: -4px;
  }

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

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