* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; touch-action: none; }
/* Canvas dimensions are pinned in JS via canvas.style.width/height to match
   window.innerWidth/innerHeight exactly (so the pixel buffer never gets
   scaled by the browser). 100dvh below is a defensive fallback for browsers
   where the JS sizing hasn't run yet. */
canvas { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; touch-action: none; z-index: 1; }
@media (orientation: landscape) { body::before { content: "Please rotate to portrait"; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: #000; z-index: 9; } }

#intro-overlay, #tap-to-start { position: fixed; inset: 0; background: transparent; z-index: 10; overflow: hidden; touch-action: none; }
#intro-overlay[hidden], #tap-to-start[hidden] { display: none; }

#intro-crawl-stage { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 88vw; perspective: 360px; perspective-origin: 50% 100%; }
#intro-crawl { color: #fdd32c; font-family: 'Press Start 2P', 'Courier New', monospace; font-size: 4.8vw; line-height: 1.8; text-align: center; transform-origin: 50% 100%; animation: crawl 14s linear forwards; word-spacing: 0.1em; white-space: nowrap; }
#intro-crawl p { margin: 0; }
@keyframes crawl {
  0%   { transform: rotateX(28deg) translateY(110vh); }
  100% { transform: rotateX(28deg) translateY(-160vh); }
}

#intro-skip { position: absolute; right: 4vw; bottom: 4vw; background: transparent; border: 1px solid rgba(255,255,255,0.4); color: rgba(255,255,255,0.6); padding: 1.2vw 3vw; font-family: 'Courier New', monospace; font-weight: bold; font-size: 3.2vw; letter-spacing: 0.15em; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#intro-skip:active { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.7); }

#tap-to-start { display: flex; align-items: center; justify-content: center; }
#tap-to-start div { color: #fff; font-family: 'Press Start 2P', 'Courier New', monospace; font-size: 5vw; letter-spacing: 0.1em; text-align: center; animation: tapPulse 1.2s ease-in-out infinite; }
@keyframes tapPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Chunky pixel buttons (death screen + modals). */
.pixel-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D4C9A8;
  border: 2px solid #3A2F1F;
  box-shadow: inset 2px 2px 0 #F0E8D4, inset -2px -2px 0 #8C7B5A;
  color: #ff6a14;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 3vw;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #3A2F1F;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.pixel-btn:active { background: #C4B898; transform: translate(1px, 2px); }
/* Four rivet dots via background-image radial-gradients (cheap, no extra DOM). */
.pixel-btn { background-image:
  radial-gradient(circle at 6px 6px, #3A2F1F 0 2px, transparent 2.5px),
  radial-gradient(circle at calc(100% - 6px) 6px, #3A2F1F 0 2px, transparent 2.5px),
  radial-gradient(circle at 6px calc(100% - 6px), #3A2F1F 0 2px, transparent 2.5px),
  radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #3A2F1F 0 2px, transparent 2.5px);
  background-color: #D4C9A8;
}
.pixel-btn:active { background-color: #C4B898; }

/* Transparent backdrop catches "tap outside buttons" → restart. */
#death-backdrop { position: fixed; inset: 0; z-index: 99; display: none; background: transparent; }
#death-backdrop[data-show="true"] { display: block; }

/* Death-screen 2×2 button grid, anchored to bottom, sits ABOVE backdrop.
   `bottom` adds env(safe-area-inset-bottom) so devices with a home indicator
   (and browsers that surface the URL-bar inset there) push the buttons up
   into the visible area. */
#death-buttons { position: fixed; left: 8%; right: 8%; bottom: calc(env(safe-area-inset-bottom, 0px) + 4%); z-index: 100; display: none; grid-template-columns: 1fr 1fr; gap: 8px; pointer-events: auto; }
#death-buttons[data-show="true"] { display: grid; }
#death-buttons .pixel-btn { height: 9vh; height: 9dvh; pointer-events: auto; }

/* Home-screen buttons — stacked rather than 2x2 so PLAY is the obvious lead.
   Same chunky pixel-btn styling as the death screen. */
#home-buttons { position: fixed; left: 8%; right: 8%; bottom: calc(env(safe-area-inset-bottom, 0px) + 6%); z-index: 100; display: none; grid-template-columns: 1fr; gap: 10px; pointer-events: auto; }
#home-buttons[data-show="true"] { display: grid; }
#home-buttons .pixel-btn { height: 9vh; height: 9dvh; pointer-events: auto; font-size: 4vw; }
#home-buttons .pixel-btn[data-home-action="instructions"] { font-size: 3.2vw; height: 7vh; height: 7dvh; }

/* Modals: SCORES + CREDITS. */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 200; display: none; align-items: center; justify-content: center; padding: 6vw; touch-action: none; }
.modal[data-show="true"] { display: flex; }
.modal-panel { background: rgba(15,15,30,0.96); border: 3px solid #fdd32c; box-shadow: 0 0 0 1px #ff6a14 inset; max-width: 92vw; width: 92vw; padding: 6vh 5vw; color: #fff; text-align: center; font-family: 'IBM Plex Sans', sans-serif; }
.modal-title { font-family: 'Press Start 2P', monospace; color: #fdd32c; font-size: 4.5vw; margin-bottom: 3vh; letter-spacing: 0.05em; }
.modal-body { font-size: 4vw; line-height: 1.6; }
.modal-body .line { margin: 0.6vh 0; }
/* Links inside modals — visibly clickable; touch-action manipulation
   ensures iOS Safari still fires click despite the modal's touch-action: none. */
.modal-body a { color: #fdd32c; text-decoration: underline; touch-action: manipulation; -webkit-tap-highlight-color: rgba(253,211,44,0.25); }
.modal-body a:active { color: #ff6a14; }
.modal-back { margin-top: 3vh; display: flex; justify-content: center; }
.modal-back .pixel-btn { width: 50%; height: 7vh; font-size: 3vw; }

/* Non-blocking review ticker. Slides in from the right at the top, holds, slides out.
   Sits above the canvas but is non-interactive — gameplay continues underneath. */
/* Peripheral review readout — pinned to the very bottom of the screen, below
   the air fryer's playspace. No movement: fade-only, low opacity, small. The
   point is "you can glance if you want" — not to grab the eye. */
#review-ticker {
  position: fixed;
  left: 2vw;
  right: 2vw;
  bottom: env(safe-area-inset-bottom, 6px);
  margin-bottom: 6px;
  padding: 3px 8px;
  background: rgba(15,15,30,0.55);
  border-top: 1px solid rgba(255,106,20,0.45);
  color: rgba(255,255,255,0.7);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
#review-ticker.show { animation: tickerFade 2.2s ease forwards; }
@keyframes tickerFade {
  0%   { opacity: 0; }
  10%  { opacity: 0.85; }
  82%  { opacity: 0.85; }
  100% { opacity: 0; }
}
#review-ticker .t-user  { color: #fdd32c; }
#review-ticker .t-meta  { color: rgba(255,255,255,0.45); }
#review-ticker .t-text  { color: rgba(255,255,255,0.85); }
#review-ticker .t-stars { color: #ff6a14; margin-left: 6px; }
@media (max-width: 420px) {
  #review-ticker { font-size: 9px; padding: 3px 6px; }
}

/* Desktop block: shown only on devices with a real mouse pointer (hover capable
   + fine pointer). Touch laptops / tablets still pass through to the game. */
#desktop-block { position: fixed; inset: 0; background: #000; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 32px; font-family: 'IBM Plex Sans', sans-serif; }
@media (hover: hover) and (pointer: fine) { #desktop-block { display: flex; } }
#desktop-block .modal-panel { max-width: 520px; width: 100%; padding: 48px 40px; }
#desktop-block .modal-title { font-size: 28px; margin-bottom: 28px; letter-spacing: 0.08em; }
#desktop-block .modal-body { font-size: 18px; line-height: 1.6; }
#desktop-block .modal-body .line { margin: 6px 0; }

/* SHARE button in "generating" state — disabled-looking + slow pulse. */
.pixel-btn.generating { animation: btnPulse 0.6s ease-in-out infinite; opacity: 0.75; pointer-events: none; }
@keyframes btnPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }

/* Toast that fades in/out near the share button. */
.share-toast { position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%); background: rgba(15,15,30,0.95); color: #fdd32c; padding: 12px 22px; border: 2px solid #fdd32c; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; letter-spacing: 0.02em; z-index: 300; opacity: 0; transition: opacity 0.25s ease-out; pointer-events: none; }
.share-toast.show { opacity: 1; }