:root {
  --bg: #050507;
  --lav: #C4BBE0;
  --blue: #2B2BFF;
  --amber: #FFA500;
  --green: #57e6a0;
  --ink: rgba(255, 255, 255, 0.94);
  --mute: rgba(196, 187, 224, 0.62);
  --line: rgba(196, 187, 224, 0.18);
  --disp: "Chakra Petch", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #000; color: var(--ink); font-family: var(--body); overflow: hidden; -webkit-font-smoothing: antialiased; cursor: default; user-select: none; -webkit-user-select: none; }

#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; }
#hud { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#vignette { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; box-shadow: inset 0 0 240px 60px rgba(87, 230, 160, 0); }
#vignette.pick { opacity: 1; box-shadow: inset 0 0 240px 60px rgba(87, 230, 160, 0.4); }

/* Screens */
.screen { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; text-align: center; padding: 28px;
  background: radial-gradient(ellipse at 50% 38%, rgba(18,14,32,0.5), rgba(0,0,0,0.84) 75%); backdrop-filter: blur(2px); }
.screen.show { display: flex; animation: fade 0.4s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.screen-inner { width: 100%; max-width: 640px; animation: rise 0.5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--lav); opacity: 0.85; margin-bottom: 1.1em; }
.game-title { font-family: var(--disp); font-weight: 700; line-height: 0.9; font-size: clamp(64px, 15vw, 168px); letter-spacing: 0.08em;
  background: linear-gradient(180deg, #fff 0%, var(--lav) 70%, #8d83b8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(43,43,255,0.35)); }
.tagline { color: var(--mute); font-size: clamp(14px, 1.9vw, 18px); margin: 1em auto 2em; max-width: 32em; }
.menu-nav { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 0 auto; }
.menu-foot { margin-top: 2.6em; font-family: var(--mono); font-size: 10px; letter-spacing: 0.4em; color: var(--mute); }
.panel-title { font-family: var(--disp); font-weight: 700; font-size: clamp(28px, 5vw, 46px); letter-spacing: 0.06em; margin-bottom: 1em; }
.hint-row { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 2em; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mute); }
.hint-row b { color: var(--amber); font-weight: 700; }

/* Buttons */
.btn { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.22em; color: var(--lav); background: rgba(196,187,224,0.06);
  border: 1px solid var(--line); padding: 16px 30px; cursor: pointer; transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; text-transform: uppercase; pointer-events: auto; }
.btn:hover { background: rgba(196,187,224,0.14); border-color: rgba(196,187,224,0.5); transform: translateY(-1px); }
.btn-primary { color: #07060c; background: var(--lav); border-color: var(--lav); }
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn-ghost { color: var(--mute); }

/* Content panel — slides in from the right */
.panel { position: fixed; inset: 0; z-index: 22; display: none; pointer-events: none; }
.panel.show { display: block; }
.panel-card { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw); pointer-events: auto;
  background: linear-gradient(180deg, rgba(8,9,16,0.93), rgba(6,6,12,0.96)); border-left: 1px solid var(--line); backdrop-filter: blur(10px);
  padding: clamp(32px, 6vh, 64px) clamp(26px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center;
  animation: slideIn 0.45s cubic-bezier(.2,.8,.2,1) both; box-shadow: -30px 0 60px rgba(0,0,0,0.5); }
@keyframes slideIn { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.panel-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; margin-bottom: 0.9em; }
.panel-name { font-family: var(--disp); font-weight: 700; font-size: clamp(30px, 5vw, 48px); letter-spacing: 0.03em; line-height: 1; margin-bottom: 0.7em; }
.panel-body { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.6; margin-bottom: 1.6em; }
.panel-items { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 2em; }
.panel-items li { font-family: var(--mono); font-size: 13px; color: var(--mute); padding-left: 18px; position: relative; }
.panel-items li::before { content: "▸"; position: absolute; left: 0; color: var(--amber); }
.panel-card .btn { align-self: flex-start; }

/* Fallback */
.fallback { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; background: var(--bg); color: var(--mute); font-family: var(--mono); font-size: 13px; }
.fallback[hidden] { display: none; }

/* Touch controls */
#touch { position: fixed; inset: 0; z-index: 5; display: none; touch-action: none; }
#touch.show { display: block; }
body:not(.touch) #touch { display: none; }
#touch > * { pointer-events: auto; }
.t-steer { position: absolute; inset: 0; touch-action: none; }
.t-stick { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border: 1.5px solid rgba(196,187,224,0.45); border-radius: 50%; display: none; pointer-events: none; }
.t-stick.on { display: block; }
.t-stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(196,187,224,0.22); border: 1.5px solid var(--lav); }
.t-col-left { position: absolute; left: 16px; bottom: 26px; display: flex; flex-direction: column; gap: 12px; }
.t-col-right { position: absolute; right: 16px; bottom: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.t-btn { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--lav); background: rgba(8,8,14,0.5); border: 1.5px solid rgba(196,187,224,0.4); border-radius: 12px; min-width: 70px; min-height: 58px; padding: 0 12px; touch-action: none; -webkit-tap-highlight-color: transparent; }
.t-btn:active, .t-btn.on { background: rgba(196,187,224,0.9); color: #050507; }
.t-open { color: var(--green); border-color: rgba(87,230,160,0.55); }
.t-open:active, .t-open.on { background: var(--green); border-color: var(--green); color: #050507; }