/* ============================================================
   Arbio Runner — game module styles
   Scoped to #hero-game so the NES.css retro aesthetic stays
   inside the "arcade cabinet" and never leaks into the rest
   of the (clean, on-brand) page.
   NES component classes come from nes-core.min.css.
   ============================================================ */

#hero-game {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: #ffffff;
  overflow: hidden;
  /* Pixel font ONLY inside the game cabinet */
  font-family: "Press Start 2P", ui-monospace, monospace;
}

#hero-game #game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

/* ---------- HUD ---------- */
#hero-game .hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 7;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 86px clamp(18px, 4vw, 46px) 0;
  pointer-events: none;
}
#hero-game .hud.off { display: none; }

#hero-game .scorewrap { text-align: right; }
#hero-game .scorewrap .s { font-size: 20px; letter-spacing: .02em; }
#hero-game .scorewrap .hi { font-size: 9px; color: #6f6f6f; margin-top: 8px; }

/* ---------- Overlays (start / game over) ---------- */
#hero-game .overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, .93);
  padding: 24px;
}
#hero-game .overlay.hide { display: none; }

/* Start screen: retro title card — "DISCOVER ARBIO" + a chunky Play button on white.
   Taps outside the button fall through to the canvas (also starts); the button itself
   is clickable. The apartment fades in on Play. */
#hero-game #startScreen {
  background: #ffffff;
  justify-content: center;
  gap: 0;
  pointer-events: none;        /* taps fall through to the canvas to start … */
}
#hero-game .start-title {
  font-size: clamp(20px, 4.4vw, 42px);
  line-height: 1.25;
  color: #0a0a0a;
  letter-spacing: .04em;
}
#hero-game .start-title::after {        /* neon underline */
  content: "";
  display: block;
  width: clamp(70px, 14vw, 150px);
  height: 6px;
  background: #DDF299;
  margin: clamp(14px, 2.4vh, 24px) auto 0;
}
#hero-game .start-sub {
  margin-top: 16px;
  font-size: clamp(8px, 1.2vw, 11px);
  color: #8a8a8a;
  letter-spacing: .04em;
  line-height: 1.8;
}
#hero-game .start-play {
  pointer-events: auto;        /* … but the Play button is clickable */
  margin-top: clamp(26px, 4vh, 44px);
  font-size: clamp(13px, 2vw, 19px);
  animation: playPulse 1.8s ease-in-out infinite;
}
@keyframes playPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#hero-game .dino-tap {
  margin-top: 22px;
  font-size: 9px;
  color: #9a9a9a;
  letter-spacing: .06em;
  animation: cuePulse 2.2s ease-in-out infinite;
}
@keyframes cuePulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #hero-game .start-play { animation: none; }
}

/* Game-over card */
#hero-game .over-card {
  max-width: 520px;
  width: calc(100% - 36px);
}
#hero-game .over-card h2 {
  font-size: clamp(16px, 3.4vw, 26px);
  line-height: 1.4;
}
#hero-game .scoreline {
  margin-top: 22px;
  font-size: 9px;
  letter-spacing: .06em;
  color: #adadad;
}
#hero-game .scoreline b {
  display: block;
  font-size: 30px;
  color: #fff;
  margin-top: 10px;
}
#hero-game .sub {
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.9;
  color: #d6d6d6;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
}
#hero-game .sub b { color: #DDF299; }
#hero-game .btnrow {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
#hero-game .btnrow .nes-btn { font-size: 11px; }

/* "See open roles" CTA in Arbio neon (not NES blue) */
#hero-game .nes-btn.is-arbio { background-color: #DDF299; color: #0a0a0a; }
#hero-game .nes-btn.is-arbio::after { box-shadow: inset -4px -4px #ADBF71; }

@media (max-width: 600px) {
  #hero-game .scorewrap .s { font-size: 16px; }
}

/* Reduced motion: stop the cue pulsing */
@media (prefers-reduced-motion: reduce) {
  #hero-game .scroll-cue { animation: none; opacity: .7; }
}

/* ---------- On-screen D-pad (touch only) ----------
   Minimal translucent arrow buttons in a cross, parked in the whitespace below the
   board (the board reserves that band in game.js resize()). Hidden by default; shown
   only on coarse-pointer/no-hover devices while .on is set (added on Play). */
#hero-game .dpad {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 168px;
  height: 168px;
  z-index: 8;
  display: none;                 /* shown when .on is added on Play (touch only) */
  touch-action: none;            /* no scroll/zoom hijack while steering */
}
/* Reveal whenever game.js has flagged a touch device and added .on. We deliberately
   DON'T re-gate this with `(hover:none) and (pointer:coarse)` — that combo is unreliable
   (several phones / in-app webviews report hover:hover or a fine pointer), which left the
   D-pad hidden even though game.js had enabled it. The `isTouch` check in game.js is the
   single source of truth: on desktop .on is never added, so this stays display:none. */
#hero-game .dpad.on { display: block; }
#hero-game .dpad-btn {
  position: absolute;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* clean arrow glyph — NOT the pixel font (Press Start 2P has no good arrows) */
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #121212;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(18, 18, 18, .12);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 2px 8px rgba(18, 18, 18, .10);
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, transform .08s ease;
}
#hero-game .dpad-btn:active {        /* pressed → solid Arbio black */
  background: #121212;
  color: #fff;
  transform: scale(.94);
}
#hero-game .dpad-btn.up    { left: 56px; top: 0; }
#hero-game .dpad-btn.down  { left: 56px; bottom: 0; }
#hero-game .dpad-btn.left  { left: 0;  top: 56px; }
#hero-game .dpad-btn.right { right: 0; top: 56px; }