:root {
  color-scheme: dark;
  --bg: #02040d;
  --panel: rgba(5, 10, 28, 0.78);
  --cyan: #35f3ff;
  --magenta: #ff3df2;
  --text: #e9fbff;
}

* { box-sizing: border-box; }

html, body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(77,124,255,.16), transparent 30%),
    radial-gradient(circle at 80% 80%, rgba(255,61,242,.12), transparent 32%),
    #02040d;
  color: var(--text);
  font-family: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
}

.app-shell {
  width: min(100%, 1440px);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.game-frame {
  position: relative;
  width: min(100%, calc((100vh - 70px) * 16 / 9));
  width: min(100%, calc((100dvh - 70px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(53, 243, 255, 0.55);
  border-radius: 14px;
  overflow: hidden;
  background: #03050e;
  box-shadow:
    0 0 0 1px rgba(255, 61, 242, .14) inset,
    0 0 28px rgba(53, 243, 255, .12),
    0 22px 70px rgba(0, 0, 0, .5);
}

.game-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.014) 0,
    rgba(255,255,255,.014) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: screen;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.top-actions {
  position: absolute;
  z-index: 5;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
}

.icon-button {
  width: 38px;
  height: 34px;
  border: 1px solid rgba(53,243,255,.5);
  border-radius: 7px;
  background: rgba(3,8,24,.72);
  color: var(--text);
  font: 700 15px/1 monospace;
  cursor: pointer;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 12px rgba(53,243,255,.08) inset;
}

.icon-button:hover,
.icon-button:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(53,243,255,.22);
}

.browser-hint {
  margin: 0;
  font-size: clamp(9px, 1vw, 12px);
  color: rgba(233,251,255,.58);
  text-align: center;
}

.touch-controls {
  position: absolute;
  z-index: 5;
  inset: auto 0 max(12px, env(safe-area-inset-bottom)) 0;
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.touch-pad {
  width: 118px;
  height: 118px;
  position: relative;
  border: 1px solid rgba(53,243,255,.32);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,243,255,.08), rgba(2,6,20,.34));
  pointer-events: auto;
  touch-action: none;
}

.touch-stick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(53,243,255,.7);
  border-radius: 50%;
  background: rgba(53,243,255,.16);
  box-shadow: 0 0 18px rgba(53,243,255,.18);
}

.touch-actions {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  pointer-events: auto;
}

.touch-button {
  border-radius: 50%;
  color: var(--text);
  font: 800 11px/1 monospace;
  letter-spacing: .06em;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.touch-button.fire {
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255,61,242,.75);
  background: rgba(255,61,242,.17);
  box-shadow: 0 0 20px rgba(255,61,242,.14);
}

.touch-button.dash {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255,230,109,.75);
  background: rgba(255,230,109,.12);
}

.touch-button:active { transform: scale(.94); }

.noscript {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #03050e;
  color: #ff4b6e;
  z-index: 20;
}

@media (hover: none), (pointer: coarse), (max-width: 820px) {
  body { padding: 0; }
  .app-shell { width: 100%; }
  .game-frame {
    width: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .touch-controls { display: flex; }
  .browser-hint { display: none; }
  .top-actions { transform: scale(.9); transform-origin: top right; }
}

@media (orientation: portrait) and (max-width: 820px) {
  body::before {
    content: "Rotate your device for the best experience";
    position: fixed;
    z-index: 99;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 32px;
    text-align: center;
    background: rgba(2,4,13,.96);
    color: var(--cyan);
    font: 700 18px/1.5 monospace;
  }
}