/* Whispers of the Meadow — page shell.
   All in-game UI is drawn on the canvas; this file only frames the stage. */

:root {
  --ink: #3a2a1e;
  --paper: #f3e6cd;
  --frame: #1b1410;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--frame);
  overflow: hidden;
  overscroll-behavior: none;

  /* A finger on this page is playing the game, never scrolling, selecting or
     zooming it. Without these, a thumb held on the jump button raises the
     text-selection callout and a quick double tap zooms the whole stage. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-rounded, "Segoe UI", Nunito, Quicksand, system-ui, sans-serif;
  color: var(--paper);
  /* A soft vignette so letterboxed bars don't read as dead space. */
  background:
    radial-gradient(ellipse at 50% 40%, #2b211a 0%, #140f0c 70%, #0d0a08 100%);
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  image-rendering: auto;

  /* Sized here as well as in JS so the very first paint is already the right
     shape. Without this the canvas starts at its 960x540 attribute size and
     visibly jumps once resize() runs. */
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));

  /* The exact ground BootScene paints. An unpainted canvas shows its CSS
     background, so anything else here flashes before the first frame — this
     used to be sky blue, which is where the cyan rectangle came from. */
  background:
    radial-gradient(ellipse 62% 64% at 50% 50%,
      rgba(120, 88, 40, 0.35) 0%, rgba(120, 88, 40, 0) 70%),
    linear-gradient(180deg, #2e2419 0%, #1d1710 60%, #14100b 100%);
  border-radius: 6px;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.5),
    0 18px 60px rgba(0, 0, 0, 0.6);
  touch-action: none;
  outline: none;
  cursor: default;
}

#game.cursor-hidden { cursor: none; }
#game.cursor-pointer { cursor: pointer; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  text-align: center;
  padding: 2rem;
}

#fatal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 9, 7, 0.92);
  z-index: 10;
}
#fatal[hidden] { display: none; }

.fatal-card {
  background: var(--paper);
  color: var(--ink);
  padding: 2rem 2.5rem;
  border-radius: 14px;
  max-width: 32rem;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.fatal-card h1 { margin: 0 0 .5rem; font-size: 1.6rem; }
.fatal-card p { margin: 0 0 1.2rem; line-height: 1.5; font-size: .95rem; word-break: break-word; }
.fatal-card button {
  font: inherit;
  font-weight: 700;
  padding: .6rem 1.6rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #f5c34b;
  color: var(--ink);
  cursor: pointer;
}
.fatal-card button:hover { background: #ffd469; }

/* ---- pre-boot -----------------------------------------------------------
   Covers the window while the ES modules load, before the canvas paints
   anything. Removed the moment the first frame lands. */

#preboot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity .45s ease;
}

#preboot i {
  width: 10px;
  height: 10px;
  rotate: 45deg;
  background: #e8b33c;
  box-shadow: 0 0 18px rgba(232, 179, 60, .55);
  animation: preboot-pulse 1.5s ease-in-out infinite;
}

@keyframes preboot-pulse {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

body.booted #preboot { opacity: 0; }

/* ---- portrait hint -------------------------------------------------------
   A 16:9 stage in a portrait window becomes a thin strip with wide empty
   bands. The hint sits in the lower band, so it costs no picture, and it never
   takes a tap — a device that cannot rotate is still perfectly playable.

   It is raised by `body.handheld`, which game.js sets from the same answer that
   raises the thumb pad. Asking the page directly — `(pointer: coarse)` — is the
   wrong question here: a desktop with a touch monitor answers it exactly like a
   phone does, and a desktop has nothing to turn. Only a machine that gets the
   pad should ever be asked to rotate. */

#rotate {
  display: none;
  position: absolute;
  left: 50%;
  bottom: max(4vh, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  margin: 0;
  padding: .55rem 1.1rem;
  max-width: 84vw;
  border-radius: 999px;
  background: rgba(28, 20, 14, .72);
  border: 1px solid rgba(243, 230, 205, .18);
  color: #e9dcc0;
  font-size: clamp(.72rem, 3.2vw, .9rem);
  text-align: center;
  line-height: 1.35;
  pointer-events: none;
}

#rotate span {
  display: inline-block;
  margin-right: .3rem;
  color: #e8b33c;
  animation: rotate-nudge 2.4s ease-in-out infinite;
}

@keyframes rotate-nudge {
  0%, 60%, 100% { transform: rotate(0deg); }
  75%           { transform: rotate(-90deg); }
}

@media (orientation: portrait) {
  body.handheld #rotate { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  #preboot i { animation: none; opacity: .7; }
  #rotate span { animation: none; }
}