: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; background: #020205; }
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 { padding: 0; }
  canvas, #loading { width: 100vw; height: 100vh; max-width: none; max-height: none; border: 0; }
  #touch-controls {
    display: flex;
    position: fixed;
    inset: auto 0 8px;
    z-index: 20;
    justify-content: space-between;
    padding: 0 14px;
    pointer-events: none;
  }
  #touch-controls > div { display: grid; grid-template-columns: repeat(2, 54px); gap: 8px; pointer-events: auto; }
  #touch-controls button {
    width: 54px; height: 54px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.38);
    background: rgba(10,8,14,.72);
    color: white;
    font: 20px Impact, sans-serif;
    backdrop-filter: blur(5px);
    touch-action: none;
  }
  #touch-controls button:active { transform: scale(.92); background: rgba(217,255,63,.35); }
  #touch-controls .light { border-color: #fff; }
  #touch-controls .heavy { border-color: var(--rage); }
  #touch-controls .special { border-color: var(--cyan); }
  #touch-controls .super { border-color: var(--acid); }
}

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