/* Base layout. UI component styles live in src/ui/ui.css (imported by the UI module at runtime). */
:root {
  --font: 'Fredoka', 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --ink: #5a4636;
  --paper: #fff8e7;
  --accent: #f2a65a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1a2b; font-family: var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; outline: none; }
#ui { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: auto; }
#boot { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #2a5a7a 0%, #10223a 70%); transition: opacity 0.8s ease; }
#boot.hide { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; color: #fff4dc; }
.boot-title { font-size: clamp(42px, 9vw, 84px); font-weight: 700; letter-spacing: 0.02em; text-shadow: 0 4px 0 rgba(0,0,0,0.18), 0 0 40px rgba(255, 220, 150, 0.35); }
.boot-bar { width: min(320px, 70vw); height: 10px; margin: 18px auto 10px; border-radius: 99px; background: rgba(255,255,255,0.15); overflow: hidden; }
.boot-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ffd58a, #ffb36b); border-radius: 99px; transition: width 0.3s ease; }
.boot-msg { font-size: 15px; opacity: 0.8; }