* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #7fd0ff; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: "Avenir Next", "Segoe UI", "Nunito", system-ui, sans-serif; color: #fff; }
canvas#c { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }
.hidden { display: none !important; }

/* lens flare + vignette */
#flare { position: fixed; inset: 0; pointer-events: none; mix-blend-mode: screen; --sx: 85%; --sy: 6%; --dx: 0px; --dy: 0px; }
#flare .sun { position: absolute; left: var(--sx); top: var(--sy); width: 70vmax; height: 70vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,240,.95) 0, rgba(255,250,215,.55) 3%, rgba(255,245,200,.22) 9%, rgba(190,235,255,.10) 22%, transparent 45%); }
#flare .streak { position: absolute; left: var(--sx); top: var(--sy); width: 90vmax; height: 1.4vmax; transform: translate(-50%, -50%) rotate(-8deg);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(180,230,255,.12) 40%, transparent 70%); }
#flare .ghost { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
#flare .g1 { left: calc(var(--sx) + var(--dx) * .35); top: calc(var(--sy) + var(--dy) * .35); width: 5vmax; height: 5vmax; background: radial-gradient(circle, rgba(140,255,230,.0) 40%, rgba(140,255,230,.22) 70%, transparent 72%); }
#flare .g2 { left: calc(var(--sx) + var(--dx) * .7); top: calc(var(--sy) + var(--dy) * .7); width: 2.2vmax; height: 2.2vmax; background: radial-gradient(circle, rgba(255,240,170,.35), transparent 70%); }
#flare .g3 { left: calc(var(--sx) + var(--dx) * 1.2); top: calc(var(--sy) + var(--dy) * 1.2); width: 9vmax; height: 9vmax; background: radial-gradient(circle, rgba(120,200,255,.10) 55%, rgba(170,230,255,.2) 68%, transparent 71%); }
#flare .g4 { left: calc(var(--sx) + var(--dx) * 1.55); top: calc(var(--sy) + var(--dy) * 1.55); width: 3.4vmax; height: 3.4vmax; background: radial-gradient(circle, rgba(200,255,180,.28), transparent 70%); }
#vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 55%, transparent 60%, rgba(0,70,140,.18) 100%); }

/* HUD */
#hud { position: fixed; top: max(18px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; gap: 6px; }
.score-pill { position: relative; min-width: 120px; padding: 6px 30px 8px; border-radius: 999px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(120,220,255,.75), rgba(0,140,230,.75)); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 26px rgba(0,80,160,.35), inset 0 -6px 14px rgba(0,90,200,.35), inset 0 2px 0 rgba(255,255,255,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.score-pill span { position: relative; z-index: 1; font: 800 clamp(34px, 5.4vmin, 64px)/1 "Arial Rounded MT Bold", "Avenir Next", "Nunito", sans-serif; letter-spacing: .5px; text-shadow: 0 2px 6px rgba(0,60,140,.45); display: inline-block; }
.score-pill span.pop { animation: pop .28s cubic-bezier(.3,1.8,.5,1); }
@keyframes pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.pill-gloss, .btn-gloss { position: absolute; left: 6%; right: 6%; top: 3px; height: 46%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.08)); pointer-events: none; }
#best-mini { font: 700 clamp(13px, 1.8vmin, 20px)/1 "Avenir Next", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.95); text-shadow: 0 1px 4px rgba(0,60,140,.5); }

.orb-btn { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.9);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.75), rgba(90,200,255,.7) 45%, rgba(0,120,220,.85)); box-shadow: 0 6px 18px rgba(0,80,160,.35); display: grid; place-items: center; z-index: 5; }
.orb-btn .cross { display: none; }
.orb-btn.muted .wave { display: none; }
.orb-btn.muted .cross { display: inline; }
body.demo .orb-btn { display: none; }

/* screens */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.4vmin, 26px); padding: 24px;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.28), rgba(120,210,255,.12) 55%, rgba(0,80,170,.18)); }
#title { justify-content: flex-start; padding-top: 14vh; }
.logo { display: flex; align-items: center; gap: clamp(6px, 1.4vmin, 16px); animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.logo-drop { width: clamp(64px, 11vmin, 130px); height: auto; filter: drop-shadow(0 8px 14px rgba(0,80,160,.35)); }
.logo-text { font: 900 clamp(72px, 15vmin, 190px)/1 "Arial Rounded MT Bold", "Avenir Next", "Nunito", sans-serif; letter-spacing: -1px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #7fe9ff 52%, #19b6f5 78%, #0b86d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.9);
  filter: drop-shadow(0 3px 0 rgba(0,110,200,.55)) drop-shadow(0 12px 22px rgba(0,70,150,.35)); padding: 0 .04em .08em; }
.tag { font-weight: 600; font-size: clamp(16px, 2.4vmin, 28px); text-shadow: 0 2px 8px rgba(0,70,150,.55); text-align: center; }
.hint { font-weight: 600; font-size: clamp(13px, 1.7vmin, 19px); opacity: .95; text-shadow: 0 1px 6px rgba(0,70,150,.6); letter-spacing: .5px; }
.best { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: clamp(13px, 1.6vmin, 18px); text-shadow: 0 1px 6px rgba(0,70,150,.6); }
.aqua-btn { position: relative; overflow: hidden; cursor: pointer; padding: clamp(12px, 1.8vmin, 20px) clamp(54px, 8vmin, 96px); border-radius: 999px; border: 2px solid rgba(255,255,255,.95);
  font: 800 clamp(24px, 3.6vmin, 42px)/1 "Arial Rounded MT Bold", "Avenir Next", sans-serif; color: #fff; letter-spacing: .5px; text-shadow: 0 2px 4px rgba(0,80,40,.4);
  background: linear-gradient(180deg, #a6ff6e 0%, #49d43a 50%, #22b02a 100%);
  box-shadow: 0 10px 28px rgba(20,120,40,.4), inset 0 -8px 16px rgba(0,100,30,.35); transition: transform .12s; margin-top: 2vh; }
.aqua-btn:hover { transform: scale(1.04); }
.aqua-btn:active { transform: scale(.97); }
.glass-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vmin, 22px); padding: clamp(24px, 4vmin, 48px) clamp(34px, 6vmin, 72px); border-radius: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(180,235,255,.32)); border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 24px 60px rgba(0,70,150,.35), inset 0 2px 0 rgba(255,255,255,.9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); animation: rise .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes rise { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.glass-card h2 { font: 900 clamp(44px, 8vmin, 96px)/1 "Arial Rounded MT Bold", "Avenir Next", sans-serif; color: #0e8fe0; text-shadow: 0 2px 0 #fff, 0 8px 20px rgba(0,90,180,.25); }
.stats { display: flex; gap: clamp(26px, 5vmin, 60px); }
.stats div { display: flex; flex-direction: column; align-items: center; }
.lbl { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: clamp(12px, 1.6vmin, 17px); color: #2a7fbf; }
.num { font: 900 clamp(40px, 7vmin, 80px)/1.05 "Arial Rounded MT Bold", "Avenir Next", sans-serif; color: #1aa7ef; text-shadow: 0 2px 0 #fff; }
.glass-card .hint { color: #2a7fbf; text-shadow: none; }
#err { position: fixed; left: 12px; bottom: 12px; right: 12px; padding: 12px; background: rgba(255,255,255,.9); color: #b00; font: 14px monospace; border-radius: 10px; }
#title .tag, #title .hint { padding: .45em 1.2em; border-radius: 999px; background: linear-gradient(180deg, rgba(40,150,230,.55), rgba(0,100,200,.45)); border: 1.5px solid rgba(255,255,255,.7);
  box-shadow: 0 6px 18px rgba(0,60,140,.25), inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#title .hint { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15)); }