:root {
  color-scheme: dark;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #060816;
  color: #f4fbff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #060816; }
button, input { font: inherit; }
#app { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }

.brand {
  position: absolute; left: max(20px, env(safe-area-inset-left)); top: max(18px, env(safe-area-inset-top));
  display: flex; gap: 10px; align-items: center; letter-spacing: .15em;
  text-shadow: 0 2px 18px rgba(72, 225, 255, .35);
}
.brand-mark { font-size: 30px; color: #85f5ff; }
.brand strong { display: block; font-size: 14px; }
.brand small { display: block; margin-top: 2px; font-size: 10px; opacity: .62; letter-spacing: .3em; }

#stats {
  position: absolute; right: max(20px, env(safe-area-inset-right)); top: max(18px, env(safe-area-inset-top));
  display: flex; gap: 8px;
}
#stats > div {
  min-width: 84px; padding: 9px 12px; border: 1px solid rgba(151, 239, 255, .2); border-radius: 12px;
  background: linear-gradient(145deg, rgba(18, 29, 62, .62), rgba(5, 9, 24, .38));
  backdrop-filter: blur(14px); box-shadow: inset 0 0 22px rgba(76, 201, 240, .05);
}
#stats span { display: block; font-size: 9px; opacity: .55; letter-spacing: .2em; }
#stats b { display: block; margin-top: 2px; font-size: 20px; font-variant-numeric: tabular-nums; }

.panel {
  position: absolute; left: 50%; top: 50%; width: min(610px, calc(100vw - 32px));
  transform: translate(-50%, -48%) scale(.97); opacity: 0; visibility: hidden;
  padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(132, 236, 255, .28); border-radius: 28px;
  background: radial-gradient(circle at 50% 0, rgba(65, 113, 181, .22), transparent 48%), rgba(4, 8, 23, .72);
  box-shadow: 0 28px 100px rgba(0,0,0,.45), inset 0 0 60px rgba(75, 234, 255, .04);
  backdrop-filter: blur(18px); transition: .45s ease; pointer-events: auto; text-align: center;
}
.panel.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.panel h1 { margin: 8px 0 16px; font-size: clamp(30px, 6vw, 54px); line-height: 1.12; letter-spacing: -.055em; }
.panel h2 { margin: 8px 0 12px; font-size: clamp(30px, 5vw, 48px); }
.panel p { margin: 0 auto 18px; max-width: 500px; line-height: 1.85; color: rgba(234, 248, 255, .76); }
.eyebrow { font-size: 11px; letter-spacing: .34em; color: #84f1ff !important; }
.controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 24px 0 18px; }
.controls span { padding: 8px 11px; border-radius: 99px; background: rgba(120, 229, 255, .08); font-size: 11px; color: rgba(237, 252, 255, .7); }
.controls b { color: #fff; margin-right: 4px; }
.desktop-note, .secure-note { font-size: 10px !important; opacity: .58; }
.panel button {
  margin: 4px 0 12px; padding: 13px 22px; border: 0; border-radius: 99px; cursor: pointer;
  color: #06111a; font-weight: 800; letter-spacing: .08em; pointer-events: auto;
  background: linear-gradient(110deg, #79f6ff, #c2a4ff); box-shadow: 0 10px 34px rgba(105, 225, 255, .25);
}

#message {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  font-size: clamp(21px, 4vw, 42px); font-weight: 900; letter-spacing: .08em; text-align: center;
  text-shadow: 0 0 28px currentColor; transition: .25s ease;
}
#message.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#flow {
  --flow: 0%; position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: min(360px, 70vw); height: 9px;
  transform: translateX(-50%); border: 1px solid rgba(180, 246, 255, .25); border-radius: 99px; overflow: visible;
  background: rgba(4, 8, 22, .7); box-shadow: 0 0 20px rgba(74, 222, 255, .08);
}
#flow i { display: block; width: var(--flow); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #67efff, #f7a8ff); box-shadow: 0 0 18px #83efff; transition: width .2s ease; }
#flow span { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-size: 9px; letter-spacing: .3em; opacity: .62; }

#VRButton {
  bottom: 28px !important; left: 50% !important; right: auto !important; transform: translateX(-50%);
  min-width: 190px !important; border: 1px solid rgba(157, 245, 255, .55) !important;
  background: rgba(5, 11, 29, .78) !important; color: #eaffff !important; font-weight: 800 !important;
  letter-spacing: .12em !important; backdrop-filter: blur(12px);
}

body.playing #intro, body.playing #gameover { pointer-events: none; }
body.xr-active #ui { display: none; }

@media (max-width: 640px) {
  #stats { top: 74px; left: 12px; right: 12px; justify-content: center; }
  #stats > div { min-width: 0; flex: 1; max-width: 120px; }
  .brand { left: 50%; transform: translateX(-50%); }
  .panel { padding: 24px 20px; }
  .desktop-note { display: none; }
}