/* Full-viewport game page. Deliberately does not import /assets/site.css,
   whose body max-width and padding would box the game in (see README). */
:root { --bg: #0b0b1a; --btn: #2a2a4a; --btn-on: #4a4a7a; --ink: #fcfcfc; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body { position: fixed; inset: 0; display: flex; flex-direction: column; }

.stage {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: calc(max(env(safe-area-inset-top), 0px) + 40px) 4px 6px;
}
canvas#screen {
  display: block; image-rendering: crisp-edges; image-rendering: pixelated;
  background: #000; box-shadow: 0 0 0 2px #222244, 0 10px 40px rgba(0,0,0,.6);
}

.help { text-align: center; color: #8888aa; padding: 0 12px 14px; font-weight: 500; }
.help kbd { background: #222244; border-radius: 4px; padding: 1px 5px; color: #ccd; font: inherit; }

.controls { display: none; }
.touch .help { display: none; }
.touch .controls {
  display: flex; flex: none; align-items: center; justify-content: space-between;
  padding: 6px 18px max(env(safe-area-inset-bottom), 16px); gap: 12px;
}
/* --pad is the D-pad's side and the A/B box's: 150px, and bigger on a
   portrait phone, where the space under the screen is otherwise empty. */
.controls { --pad: 150px; }
.dpad {
  position: relative; width: var(--pad); height: var(--pad); touch-action: none; flex: none;
}
.dpad span {
  position: absolute; width: calc(var(--pad) / 3); height: calc(var(--pad) / 3); background: var(--btn); border-radius: 8px;
}
.dpad .u { left: calc(var(--pad) / 3); top: 0; } .dpad .d { left: calc(var(--pad) / 3); bottom: 0; }
.dpad .l { left: 0; top: calc(var(--pad) / 3); } .dpad .r { right: 0; top: calc(var(--pad) / 3); }
.dpad .c { left: calc(var(--pad) / 3); top: calc(var(--pad) / 3); border-radius: 0; }
.dpad[data-dir="up"] .u, .dpad[data-dir="down"] .d,
.dpad[data-dir="left"] .l, .dpad[data-dir="right"] .r { background: var(--btn-on); }
.dpad span::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border: 8px solid transparent; }
.dpad .u::after { border-bottom-color: #8888bb; border-top-width: 0; }
.dpad .d::after { border-top-color: #8888bb; border-bottom-width: 0; }
.dpad .l::after { border-right-color: #8888bb; border-left-width: 0; }
.dpad .r::after { border-left-color: #8888bb; border-right-width: 0; }
.dpad .c::after { display: none; }

/* A and B as on a Game Boy: A up and right, B down and left of it, in a
   box the size of the D-pad so the two sides balance. */
.btns { position: relative; width: var(--pad); height: var(--pad); flex: none; }
.abtn, .bbtn {
  position: absolute; border-radius: 50%; border: 0; color: #fff; touch-action: none;
  font: 800 30px/1 -apple-system, sans-serif;
}
.abtn { right: 0; top: 4px; width: calc(var(--pad) * .56); height: calc(var(--pad) * .56); background: #c8102e; box-shadow: 0 5px 0 #6a0818; }
.bbtn { left: 0; bottom: 6px; width: calc(var(--pad) * .43); height: calc(var(--pad) * .43); font-size: 24px; background: #3a3a6a; box-shadow: 0 5px 0 #1a1a3a; }
.abtn.on { transform: translateY(4px); box-shadow: 0 1px 0 #6a0818; }
.bbtn.on { transform: translateY(4px); box-shadow: 0 1px 0 #1a1a3a; }
.blabel {
  position: absolute; right: 2px; bottom: 6px; width: 76px; text-align: center;
  color: #8888aa; font: 600 11px/1.25 -apple-system, sans-serif; pointer-events: none;
}

.mute {
  position: fixed; top: max(.75rem, env(safe-area-inset-top)); left: .85rem; z-index: 10000;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .7rem .42rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(20,23,32,.82); color: #e9eef9; font: 600 13px/1 -apple-system, sans-serif;
}
.mute .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mute .spk { fill: currentColor; stroke: none; }
.mute .off { display: none; }
.muted .mute { color: #9aa0b4; }
.muted .mute .on { display: none; }
.muted .mute .off { display: inline; stroke: #ff6b6b; }

/* Our own "leave?" box: a browser confirm() is a system sheet on a
   phone and stops the game loop behind it. */
.confirm[hidden] { display: none; }
.confirm {
  position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,15,.72); padding: 16px;
}
.confirm-box {
  max-width: 320px; width: 100%; background: #14142a; border: 2px solid #fcfcfc; outline: 2px solid #000;
  padding: 18px 16px 16px; text-align: center;
}
.confirm-box p { margin: 0 0 16px; font-size: 15px; line-height: 1.4; }
.confirm-btns { display: flex; gap: 10px; justify-content: center; }
.confirm-btns > * {
  flex: 1; padding: 11px 10px; border-radius: 8px; border: 0; font: 700 14px/1 -apple-system, sans-serif;
  text-decoration: none; touch-action: manipulation;
}
.stay { background: #c8102e; color: #fff; }
.leave { background: #2a2a4a; color: #e9eef9; }

/* Same floating back-link the other full-bleed pages use. */
.hubchip {
  position: fixed; top: .75rem; right: .85rem; z-index: 10000;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem .42rem;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #e9eef9; text-decoration: none;
  background: rgba(20, 23, 32, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
}
.hubchip:hover { background: rgba(20, 23, 32, .95); border-color: rgba(255, 255, 255, .34); }

/* Phone upright: the screen full width straight under the top bar, and
   the controls, bigger, centred in all the height left below it. The
   screen used to sit in the middle of the space above the controls with
   an empty band either side of it, about 40 per cent of the height for
   the game (review item 32, 390x844). The width is what limits the
   scale upright, so the side padding and the ring round the canvas go
   too: four more pixels of game per side. resize() in engine.js sizes the
   canvas from the width and the height left after CONTROLS_MIN. */
@media (orientation: portrait) {
  .touch .stage { flex: none; padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .touch canvas#screen { box-shadow: none; }
  .touch .controls {
    flex: 1 1 auto; min-height: 0; justify-content: space-around;
    --pad: clamp(150px, 44vw, 200px);
    padding: 12px max(env(safe-area-inset-right), 12px) max(env(safe-area-inset-bottom), 16px) max(env(safe-area-inset-left), 12px);
  }
  .touch .abtn { font-size: 34px; }
}

/* Phone on its side: controls either side of the screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .touch body { flex-direction: row; }
  .touch .stage { padding: 8px; order: 2; }
  .touch .controls { display: contents; }
  .touch .stage { padding: 6px 4px; }
  .touch .dpad { order: 1; align-self: flex-end; margin: 0 0 max(env(safe-area-inset-bottom), 24px) max(env(safe-area-inset-left), 16px); }
  .touch .btns { order: 3; align-self: flex-end; margin: 0 max(env(safe-area-inset-right), 16px) max(env(safe-area-inset-bottom), 24px) 0; }
}