:root {
  --ink: #1a1026;
  --sand: #e8c07d;
  --teal: #2bd6c6;
  --magenta: #ff3b8d;
  --gold: #ffd23f;
}

* { box-sizing: border-box; }

/* ============================================================
   MOBILE-FIRST: the game FILLS the screen.
   The 16:9 canvas covers the whole play area (object-fit:cover);
   the HUD and menus are kept inside the visible area by JS.
   Desktop is the progressive enhancement at the bottom.
   ============================================================ */
html, body {
  margin: 0;
  height: 100svh;
  width: 100vw;
  background: #07060d;
  color: #e8e8ff;
  font-family: "Press Start 2P", monospace;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    0 env(safe-area-inset-left);
}

/* The screen fills all space above the controls, edge to edge. */
#crt {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #000;
}

#game {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;           /* buffer is resized to the box aspect (see fitView) → fills, no crop */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  mix-blend-mode: multiply;
  animation: flicker 5s infinite;
}

@keyframes flicker {
  0%, 96%, 100% { opacity: 0.55; }
  97% { opacity: 0.35; }
  98% { opacity: 0.7; }
}

/* Touch controls: a translucent bar over the bottom of the full-screen game. */
#touch-controls {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding:
    10px max(12px, env(safe-area-inset-right))
    calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(7, 6, 13, 0.92), rgba(7, 6, 13, 0));
}
#touch-controls.hidden { display: none; }

.pad {
  display: flex;
  gap: clamp(8px, 2.5vw, 14px);
  align-items: flex-end;
}

.tbtn {
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 15vw, 92px);
  height: clamp(52px, 15vw, 92px);
  font-size: clamp(18px, 5.2vw, 30px);
  border-radius: 16px;
  border: 3px solid #3b2f5c;
  background: rgba(26, 18, 48, 0.85);
  color: var(--teal);
  touch-action: none;
  user-select: none;
  backdrop-filter: blur(2px);
}
.tbtn.big { width: clamp(64px, 20vw, 108px); color: var(--gold); }
.tbtn:active { background: var(--magenta); color: #fff; transform: scale(0.94); }

/* Fullscreen toggle — bottom-center, in the gap between the touch pads so it
   never overlaps the game or HUD. Hidden via JS if the browser can't do it. */
#fsbtn {
  position: fixed;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 2px solid #3b2f5c;
  background: rgba(26, 18, 48, 0.6);
  color: var(--teal);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  touch-action: manipulation;
}
#fsbtn:active { background: var(--magenta); color: #fff; transform: translateX(-50%) scale(0.92); }

/* Hint line is desktop-only; mobile uses on-screen buttons instead. */
#hint { display: none; }

/* ---- rotate-to-landscape prompt (the game is 16:9, landscape-native) ---- */
#rotate { display: none; }
@media (hover: none) and (orientation: portrait) {
  #rotate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px;
    text-align: center;
    background: radial-gradient(circle at 50% 40%, #1a1030, #07060d 75%);
    color: var(--gold);
  }
  #rotate .rot-glyph {
    font-size: 64px;
    line-height: 1;
    color: var(--teal);
    animation: rotateHint 2.2s ease-in-out infinite;
  }
  #rotate .rot-title { font-size: 13px; margin: 0; }
  #rotate .rot-sub { font-size: 8px; margin: 0; color: var(--magenta); line-height: 1.7; }
}
@keyframes rotateHint {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(78deg); }
}

/* Landscape phones: size buttons off viewport HEIGHT so they don't get huge. */
@media (hover: none) and (orientation: landscape) {
  .tbtn { width: clamp(42px, 11vh, 84px); height: clamp(42px, 11vh, 84px); font-size: clamp(15px, 4.5vh, 26px); }
  .tbtn.big { width: clamp(52px, 14vh, 100px); }
  #touch-controls { padding-top: 6px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   DESKTOP ENHANCEMENT: real mouse + keyboard.
   Restore the framed 16:9 cabinet; hide the touch pad.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  body {
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px;
  }
  #crt {
    flex: 0 0 auto;
    width: min(98vw, 1280px);
    height: auto;
    aspect-ratio: 16 / 9;
    border: 4px solid #2b2140;
    border-radius: 14px;
    box-shadow:
      0 0 0 6px #100a1c,
      0 0 40px rgba(43, 214, 198, 0.25),
      0 18px 60px rgba(0, 0, 0, 0.7);
  }
  #game { object-fit: fill; }   /* box is exactly 16:9 → no crop, no distortion */
  #touch-controls { display: none; }
  #hint {
    display: block;
    font-size: 9px;
    line-height: 1.8;
    color: #9b8fc7;
    text-align: center;
    max-width: 960px;
    margin: 0 8px;
  }
}