/* Base layout: everything lives inside the viewport; html/body/panels never scroll (§5). */
:root {
  --bg: #0c0820; --ink: #f4efff; --ink-dim: #b9b0d8; --accent: #ffcf5a; --accent-2: #9b7bff; --danger: #ff4f6a;
  --panel: rgba(22, 14, 52, 0.82); --panel-line: rgba(180, 150, 255, 0.35);
  --font: "Trebuchet MS", "Noto Sans TC", "Hiragino Sans", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage { position: fixed; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stick { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#ui > * { pointer-events: auto; }
button { font: inherit; color: inherit; cursor: pointer; min-height: 44px; min-width: 44px; }
.joystick-base { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)); }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transform: translate(-50%, -50%); }
#boot { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; gap: 18px; justify-items: center; background: radial-gradient(circle at 50% 40%, #2a1a66, #0c0820 70%); transition: opacity 0.4s; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 38px; font-weight: 900; letter-spacing: 0.3em; color: var(--accent); }
.boot-bar { width: 220px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--accent); animation: boot 1.1s ease-in-out infinite; }
@keyframes boot { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* Shared volume panel */
.volume-panel { display: grid; gap: 10px; min-width: 240px; }
.vol-row { display: grid; grid-template-columns: 76px 1fr 56px; align-items: center; gap: 10px; }
.vol-label { font-size: 14px; color: var(--ink-dim); }
.vol-toggle { border-radius: 10px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, 0.08); min-height: 44px; }
.vol-toggle[aria-pressed="true"] { background: rgba(255, 207, 90, 0.22); border-color: var(--accent); }
.vol-slider { width: 100%; min-height: 44px; accent-color: var(--accent); touch-action: pan-x; }

/* PWA install chip + update banner (src/pwa.js) */
.pwa-root { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.pwa-root > * { pointer-events: auto; }
.pwa-install { position: absolute; left: max(16px, var(--safe-l)); bottom: max(16px, var(--safe-b)); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--accent); background: rgba(22, 14, 52, 0.9); color: var(--accent); font-weight: 700; }
.pwa-install[hidden], .pwa-hint[hidden], .pwa-update[hidden] { display: none; }
.pwa-hint { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); width: min(92vw, 360px); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--panel-line); background: var(--panel); display: grid; gap: 10px; }
.pwa-hint p { margin: 0; line-height: 1.5; }
.pwa-update { position: absolute; left: 50%; top: max(12px, var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--accent); background: var(--panel); }
.pwa-update button { border-radius: 8px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, 0.08); padding: 6px 12px; }
.pwa-update button:first-of-type { background: var(--accent); color: #2a1a00; border-color: var(--accent); font-weight: 700; }