/* Base layout, design tokens and the loading screen. Screens/menus: ui.css. HUD: hud.css. */
:root {
  --bg: #070A12;
  --panel: rgba(9, 13, 24, 0.66);
  --panel-strong: rgba(9, 13, 24, 0.86);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --text: #F2F5FF;
  --muted: #A3ACC6;
  --dim: #6B7591;
  --accent: #FFB547;        /* warm sunset amber: primary actions */
  --accent-2: #FF7A59;
  --cyan: #5CE1FF;          /* HUD glow */
  --good: #4ADE80;
  --bad: #FF5C6C;
  --gold: #FFD24A;
  --silver: #D9E2F2;
  --bronze: #E59A62;
  --ace: #B78CFF;
  --radius: 18px;
  --radius-sm: 11px;
  --blur: blur(20px) saturate(160%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 500 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; }

#app { position: fixed; left: 0; right: 0; bottom: 0; top: var(--pixelrain-bar, 0px); overflow: hidden; background: var(--bg); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#hud, #touch, #ui { position: absolute; inset: 0; pointer-events: none; }
#hud { z-index: 10; }
#touch { z-index: 20; }
#ui { z-index: 30; }

/* Loading screen */
#loading { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 110%, #3A1F2E 0%, #141A33 45%, #070A12 80%);
  transition: opacity .8s ease, visibility .8s; }
#loading.done { opacity: 0; visibility: hidden; }
.loading-inner { width: min(360px, 80vw); text-align: center; }
.loading-logo { color: var(--accent); filter: drop-shadow(0 0 22px rgba(255, 181, 71, .45)); margin-bottom: 14px;
  animation: float 3.2s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.loading-title { font-size: 34px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.loading-title span { color: var(--accent); }
.loading-sub { margin-top: 8px; color: var(--muted); letter-spacing: .32em; text-transform: uppercase; font-size: 11px; }
.loading-track { margin: 30px auto 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#loading-bar { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform .35s ease; }
#loading-text { color: var(--dim); font-size: 12px; letter-spacing: .04em; }

#fatal { position: absolute; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); padding: 24px; }
#fatal[hidden] { display: none; }
.fatal-inner { max-width: 420px; text-align: center; }
.fatal-inner h2 { font-size: 22px; margin-bottom: 10px; }
.fatal-inner p { color: var(--muted); margin-bottom: 18px; }
.fatal-inner button { height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent); color: #1A1206; font-weight: 700; cursor: pointer; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .loading-logo { animation: none; } }
.fatal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fatal-inner button.ghost { background: rgba(255, 255, 255, .08); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.fatal-inner button[hidden] { display: none; }