/* THE GORGE — base shell styles. ui.js injects its own component styles into
   <style id="ui-css"> so this file stays the layout skeleton only. */

:root {
  --ink: #dfe6e3;
  --dim: #8a958f;
  --fog: #b8c4b6;
  --night: #0c1116;
  --amber: #ffd9a0;
  --blood: #a3352c;
  /* safe-area for notched phones; the HUD anchors to these */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* twin-stick play: every default touch gesture is an accident */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

canvas { display: block; position: fixed; inset: 0; }

/* layers */
#hud, #screens, #touch, #dev, #boot { position: fixed; inset: 0; }
#hud     { z-index: 10; pointer-events: none; }
#touch   { z-index: 20; pointer-events: none; }   /* ui.js enables per-control */
#screens { z-index: 30; pointer-events: none; }
#dev     { z-index: 50; pointer-events: none; }
#boot    { z-index: 60; }

/* ---- boot veil ---- */
#boot {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 110%, #1a2430 0%, var(--night) 55%);
  transition: opacity .6s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-mark { text-align: center; width: min(78vw, 340px); }
.boot-gorge {
  width: 88px; height: 88px; margin: 0 auto 18px;
  background:
    linear-gradient(180deg, transparent 0 38%, #6a7a7233 38% 62%, transparent 62%),
    conic-gradient(from 200deg at 30% 100%, #2c3a44 0 40deg, transparent 40deg),
    conic-gradient(from 120deg at 70% 100%, #2c3a44 0 40deg, transparent 40deg);
  clip-path: polygon(8% 100%, 38% 0, 46% 0, 30% 100%, 70% 100%, 54% 0, 62% 0, 92% 100%);
  animation: bootfog 3.2s ease-in-out infinite;
}
@keyframes bootfog { 0%,100% { opacity:.75; } 50% { opacity:1; } }
.boot-title { font-size: 28px; letter-spacing: .42em; text-indent: .42em; font-weight: 200; color: var(--fog); }
.boot-sub   { font-size: 11px; letter-spacing: .58em; text-indent: .58em; color: var(--dim); margin-top: 6px; }
.boot-bar {
  height: 2px; margin: 22px 10% 10px; background: #ffffff14; overflow: hidden; border-radius: 1px;
}
#boot-fill {
  height: 100%; width: 0%; background: var(--fog);
  transition: width .3s ease;
}
#boot-msg { font-size: 11px; color: var(--dim); letter-spacing: .12em; min-height: 1.2em; }

/* ---- dev overlay ---- */
#dev {
  font: 11px/1.5 ui-monospace, Consolas, monospace;
  color: #9fe8a0; padding: calc(var(--sat) + 8px) 10px;
  text-shadow: 0 1px 2px #000;
  white-space: pre-wrap;
}
#dev .err { color: #ff9d8a; }