/* Pikefall - shell styling. The game itself renders entirely to canvas;
   this file only handles the page frame, letterboxing and the DOM overlay. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0a08;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #f5e9c8;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  /* Three things a phone does to a page that a desktop never does, each of
     which reads as the game misbehaving rather than the browser (issue #76):
     pull-to-refresh and the rubber-band bounce at the edge of a drag —
     `touch-action` stops the gesture on the element but not the scroll
     chain's overscroll — iOS's long-press callout and magnifier, which a
     player holding a finger on a pad to read it meets on the first try, and
     iOS's landscape text inflation, which resizes the DOM prompt's type. */
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Faint vignette so the letterbox bars don't read as flat black. */
  background:
    radial-gradient(ellipse at 50% 40%, #221d16 0%, #0b0a08 70%);
}

#stage {
  position: relative;
  line-height: 0;
}

#game {
  display: block;
  image-rendering: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #4a3d2a, 0 0 40px rgba(0, 0, 0, 0.8);
  cursor: default;
}

#game.pointing { cursor: pointer; }
#game.targeting { cursor: crosshair; }

/* Reserved for future DOM-based panels (encyclopedia text, credits).
   Kept pointer-transparent so canvas input is never intercepted. */
#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  line-height: normal;
}

/* Safe-area probe (issue #19). `core/metrics.js` reads the insets back off
   this element's computed padding, because an env() cannot be read from script.
   Zero-sized and invisible: it is a measurement, not a layout. */
#safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

/* The rotate prompt is a *prompt*, not a gate.
   It used to be pure CSS, which made it unconditional: a player whose phone is
   rotation-locked — and that is a common accessibility setting, not an edge
   case — met a black screen with no way past it and no way to know why. The
   game is landscape-first because 16:9 is the field's own shape, and it is
   still perfectly playable in portrait at a smaller scale, so refusing to draw
   was the one option that helped nobody. `body.rotate-dismissed` is what the
   button sets; nothing persists it, so the hint returns next visit. */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(11, 10, 8, 0.94);
  z-index: 10;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

.rotate-card {
  text-align: center;
  max-width: 20rem;
  padding: 1.5rem;
}

.rotate-card p {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin: 1rem 0 1.4rem;
}

/* A phone outline that tips over, so the instruction reads without language. */
.rotate-icon {
  width: 46px;
  height: 74px;
  margin: 0 auto;
  border: 3px solid #f0c040;
  border-radius: 8px;
  animation: rotate-tip 2.4s ease-in-out infinite;
}

@keyframes rotate-tip {
  0%, 30% { transform: rotate(0deg); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-icon { animation: none; transform: rotate(-90deg); }
}

/* 44px tall: the same floor `core/metrics.js` holds the in-canvas chrome to.
   A dismiss button that cannot be tapped would be worse than no dismiss. */
#rotate-dismiss {
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0 1.4rem;
  color: #f5e9c8;
  background: #4a3d2a;
  border: 2px solid #f0c040;
  border-radius: 6px;
  cursor: pointer;
}

/* The second way off the prompt, and the one that fixes the cause (#76): on a
   browser that will lock orientation — Android Chrome and Firefox, only from
   fullscreen — this goes fullscreen and turns the page itself, which also
   hands back the 50-odd px of address bar a landscape phone otherwise spends.
   Hidden unless `main.js` has found both APIs, because a button that offers
   to rotate and then does nothing — iPhone Safari has neither — is worse than
   no button. */
#rotate-fullscreen {
  display: none;
  font: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 0 1.4rem;
  margin: 0 auto 0.8rem;
  color: #1b150c;
  background: #f0c040;
  border: 2px solid #ffe9a8;
  border-radius: 6px;
  cursor: pointer;
}

body.can-lock #rotate-fullscreen { display: block; }

@media (orientation: portrait) and (max-width: 900px) {
  body:not(.rotate-dismissed) #rotate-hint { display: flex; }
}

/* The no-JavaScript fallback (`play.html`). It exists at all because a canvas
   is invisible to a visitor with scripts off and to a crawler that does not run
   them, and this document had nothing else on it — so the one page named "play"
   was a black rectangle to both. Styled here rather than inline: a `style=`
   attribute would need `'unsafe-inline'` in `style-src`, which is exactly the
   decay `tools/csp.mjs` gates against. */
#noscript {
  max-width: 34rem;
  padding: 2rem 2.2rem;
  border: 1px solid #4a3d2a;
  border-radius: 10px;
  background: #2e2718;
  line-height: 1.55;
  text-align: left;
}

#noscript h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  color: #f0c040;
  margin-bottom: 0.8rem;
}

#noscript p { margin-top: 0.8rem; color: #d9cba6; }
#noscript a { color: #f0c040; }