/* Prototype styling only. The real title screen / UI comes in the polish pass. */

/* Grenze: the medieval display serif used for titles, modal headings, and buttons only
   (body text stays system-ui for readability, especially under the CRT flicker). Vendored
   locally under assets/fonts so the game works offline, in snapshots, and in mobile builds -
   never a CDN link. Phaser rasterizes text to canvas, so main.js waits for these to load
   (document.fonts.load) before booting the game, otherwise the first render falls back. */
@font-face {
  font-family: 'Grenze';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/grenze-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Grenze';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/grenze-700.woff2) format('woff2');
}

:root {
  --bg: #1b1e2b;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: #e7e9f0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  overflow: hidden;
  /* Stop iOS double-tap zoom / text selection on a game surface. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Full-viewport host for the canvas. Phaser's Scale.CENTER_BOTH owns the centering
   (it sets the canvas margins), so we must NOT also flex-center here - doing both
   stacks two offsets and shoves the canvas off toward the lower-right. */
#game {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
canvas { display: block; }

/* CRT phosphor flicker - the shimmer from the staged "Classic CRT" (variant B), dialed to 75%
   strength (B dipped opacity to .975; 75% of that 0.025 dip → .981). Applied to the canvas only
   while the CRT filter is on (setSceneCrt toggles the .crt class on #game). steps(2) alternate
   keeps it a coarse, retro flicker rather than a smooth fade, and it stays deliberately faint for
   readability + photosensitivity. */
@keyframes crt-flicker { from { opacity: 1; } to { opacity: .981; } }
#game.crt canvas { animation: crt-flicker 90ms steps(2) infinite alternate; }

/* Phaser's DOM element container (main.js `dom: { createContainer: true }`) is an absolutely
   positioned div appended as a sibling of the canvas inside #game, with no z-index of its own -
   without an explicit stacking order here it can render fully hidden behind the canvas (and
   `pointer-events: none` on the container, Phaser's default, is inherited by plain children
   unless overridden), which is why the Feedback form's dropdown/textarea need both rules below. */
#game canvas { position: relative; z-index: 1; }
#game > div { position: absolute; z-index: 2; }

/* Feedback form controls (src/lib/ui.js createFeedbackOverlay): real HTML <select>/<textarea>
   via Phaser's DOM element container, styled to sit inside the dark modal card rather than
   read as a stock browser form. */
.fh-select, .fh-textarea {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #e7e9f0;
  background: #1a1d2c;
  border: 1.5px solid #39405c;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
  pointer-events: auto;
}
.fh-select:focus, .fh-textarea:focus { border-color: #3d6cff; }
.fh-textarea { resize: none; padding: 12px 14px; line-height: 1.4; }
/* appearance:none drops the native chevron along with the rest of the browser's default select
   styling, so it's redrawn here as a background SVG - a light-gray '#aeb4c6' downward chevron,
   inset from the right edge to clear the border radius. */
.fh-select {
  padding: 0 40px 0 12px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23aeb4c6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* Honeypot field: real form controls bots reliably auto-fill, kept fully invisible/unreachable
   to a human (off-screen, not just opacity:0 - some scrapers ignore visibility tricks alone). */
.fh-hp { position: absolute; left: -9999px; top: -9999px; }

/* "Update available" toast (index.html's SW registration script): a quiet top pill that
   only ever appears when a genuinely new build has activated in the background (never on
   first install), and never forces a reload - the player dismisses or reloads on their
   own terms. Lives in plain document.body (outside #game), so it needs its own z-index. */
@keyframes fh-update-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.fh-update-toast {
  position: fixed;
  left: 50%;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 10px));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 16px;
  background: #1a1d2c;
  border: 1px solid #39405c;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  transform: translateX(-50%);
  animation: fh-update-toast-in 300ms ease-out;
}
.fh-update-toast span {
  color: #e7e9f0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.fh-update-reload {
  padding: 6px 14px;
  color: #fff;
  font-family: 'Grenze', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  background: #3d6cff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.fh-update-dismiss {
  padding: 2px 4px;
  color: #aeb4c6;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
}