:root {
  --bg: #05040c;
  --glass: rgba(18, 14, 38, .62);
  --glass-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .1);
  --ink: #f5f3ff;
  --muted: #a39dc7;
  --dim: #6e6894;
  --red: #ff2d55; --green: #33e36b; --blue: #3d7bff; --orange: #ff8a1f; --yellow: #ffe23d; --purple: #b65cff;
  --hitR: 140px;
  --display: 'Unbounded', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
}
* { 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(--body); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 3; overflow-y: auto; }
.screen.on { opacity: 1; pointer-events: auto; }
.screen.dim { background: radial-gradient(ellipse at 50% 40%, rgba(5,4,12,.35), rgba(5,4,12,.82)); }
.wrap { width: min(440px, 100%); margin: auto 0; display: flex; flex-direction: column; gap: 12px; }

/* title */
#title { justify-content: center; background: radial-gradient(ellipse 70% 45% at 50% 42%, rgba(5,4,12,.72), rgba(5,4,12,.15)); }
/* Logo artwork (art/logo-source.webp, cut out to web/img/logo.webp); it bobs gently and glows over the tunnel */
.logo { margin: 0; text-align: center; line-height: 0; }
.logo img { width: min(94vw, 560px); height: auto; animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(120,90,255,.35)); }
@keyframes float { 50% { transform: translateY(-5px); } }
/* Sits over the glowing demo gate, so it needs its own contrast and must stay clear of the ring's bright edges */
.tagline { color: #d6d1f5; text-align: center; font-size: 15px; font-weight: 700; margin: 18px auto 40px; max-width: 290px; letter-spacing: .02em; text-wrap: balance; text-shadow: 0 1px 2px rgba(5,4,12,.9), 0 0 14px rgba(5,4,12,.95); }
.start { display: block; margin: 0 auto; font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: .16em; padding: 20px 54px; border-radius: 999px; background: linear-gradient(100deg, var(--red), var(--orange) 45%, var(--yellow)); color: #160a10; box-shadow: 0 10px 40px rgba(255, 60, 90, .45), inset 0 1px 0 rgba(255,255,255,.5); animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); box-shadow: 0 14px 60px rgba(255, 120, 60, .6), inset 0 1px 0 rgba(255,255,255,.5); } }
.foot { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 13px; color: var(--dim); }
.foot .studio { width: 140px; opacity: .85; pointer-events: none; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }

/* headers */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bar h2 { font-family: var(--display); font-weight: 800; font-size: 22px; margin: 0; letter-spacing: .02em; }
.iconbtn { width: 46px; height: 46px; border-radius: 15px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; }
.iconbtn svg { width: 20px; height: 20px; }

/* cards */
.card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 24px; padding: 18px; backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
/* track tiles: two squares per row */
.head { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .02em; text-align: center; margin: 0 0 4px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; text-align: left; padding: 14px; border-radius: 22px; overflow: hidden; transition: transform .12s ease, border-color .2s; }
.tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 0% 0%, var(--accent), transparent 70%); opacity: .32; pointer-events: none; }
.tile:active { transform: scale(.97); }
.tile:hover { border-color: rgba(255,255,255,.25); }
.tile > * { position: relative; }
.tile .name { font-family: var(--display); font-weight: 800; font-size: clamp(17px, 5vw, 22px); line-height: 1.1; letter-spacing: -.01em; }
.tile .sub { margin-top: 5px; color: var(--ink); opacity: .7; font-size: 12px; font-weight: 700; line-height: 1.3; }
.tile .low { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.tile .meta { color: var(--muted); font-size: 11.5px; font-weight: 700; display: flex; flex-direction: column; gap: 5px; }
.tile .rank { font-size: 38px; }
.tile .badge { position: absolute; top: 12px; right: 12px; margin: 0; }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 14px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); }
.pips i.on { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rank { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; }
.rank.none { color: rgba(255,255,255,.18); }
.stars { font-size: 12px; letter-spacing: 2px; color: var(--yellow); }
.stars .off { color: rgba(255,255,255,.18); }
.tile.daily { border-color: rgba(255, 226, 61, .35); grid-column: span 2; aspect-ratio: auto; min-height: 128px; }
.tile.daily::before { opacity: .42; }
.daily-share { text-align: center; }
.grid-emoji { font-size: min(24px, 6.6vw); letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
.badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .12em; padding: 4px 8px; border-radius: 999px; background: var(--yellow); color: #1b1400; margin-left: 6px; vertical-align: middle; }
.hint { color: var(--dim); font-size: 12.5px; text-align: center; line-height: 1.5; }
/* Keyboard help only where there's a mouse; touch players never need it */
@media (hover: none) and (pointer: coarse) { .keys { display: none; } }
.hint.keys { margin: 4px 0 0; }
kbd {font-family: var(--body); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); }

/* settings */
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .lab { font-weight: 700; }
.row .lab small { display: block; color: var(--dim); font-weight: 600; font-size: 12px; margin-top: 2px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 140px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.6); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; }
.toggle { width: 52px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; transition: background .2s; flex: none; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.toggle[aria-pressed=true] { background: linear-gradient(90deg, var(--green), var(--blue)); }
.toggle[aria-pressed=true]::after { transform: translateX(22px); }
.pill { white-space: nowrap; padding: 10px 16px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); font-weight: 800; font-size: 14px; }

/* buttons */
.btn { display: block; width: 100%; padding: 17px; border-radius: 18px; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-align: center; background: linear-gradient(100deg, var(--red), var(--orange)); color: #1a0810; box-shadow: 0 8px 30px rgba(255, 60, 90, .35), inset 0 1px 0 rgba(255,255,255,.45); transition: transform .1s; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--glass-2); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.btns { display: grid; gap: 10px; }
.btns.two { grid-template-columns: 1fr 1fr; }

/* results */
.res-head { text-align: center; }
.res-head .k { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.bigrank { font-family: var(--display); font-weight: 900; font-size: 120px; line-height: 1; margin: 6px 0 2px; background: linear-gradient(160deg, #fff, var(--accent, var(--yellow))); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px var(--accent, var(--yellow))); animation: slam .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes slam { from { transform: scale(2.4); opacity: 0; } }
.bigstars { font-size: 30px; letter-spacing: 8px; color: var(--yellow); text-shadow: 0 0 16px rgba(255,226,61,.6); }
.bigstars .off { color: rgba(255,255,255,.14); text-shadow: none; }
.score-big { font-family: var(--display); font-weight: 800; font-size: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.newbest { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; padding: 5px 10px; border-radius: 999px; background: var(--yellow); color: #1b1400; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.grid4 b { display: block; font-family: var(--display); font-size: 20px; }
.grid4 span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.grid2 b { display: block; font-family: var(--display); font-size: 24px; }
.grid2 span { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.note { color: var(--muted); font-size: 13px; text-align: center; line-height: 1.45; }

/* bottom tabs on the menu screens */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; justify-content: center; gap: 4px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(10, 8, 24, .82); border-top: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transform: translateY(100%); transition: opacity .3s, transform .3s; }
#nav.on { opacity: 1; pointer-events: auto; transform: none; }
#nav button { flex: 1; max-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 6px; border-radius: 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: var(--dim); transition: color .2s, background .2s; }
#nav button svg { width: 24px; height: 24px; }
#nav button[aria-current=page] { color: var(--ink); background: rgba(255,255,255,.09); }
.screen.nav-pad { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

/* shop: header on top, picker sheet at the bottom, live preview in the tunnel between */
.pair { display: flex; gap: 8px; }
#closet { justify-content: space-between; background: linear-gradient(rgba(5,4,12,.55), transparent 22%, transparent 45%, rgba(5,4,12,.85) 70%); }
.shopbar { width: min(440px, 100%); }
.shopbar h2 { flex: 1; text-align: center; }
.shopbar .side { width: 92px; display: flex; justify-content: flex-end; }
.shopbar .side.left { justify-content: flex-start; }
.items .more { color: var(--muted); border-style: dashed; justify-content: center; font-size: 13px; font-weight: 800; }
.items .more span { font-size: 26px; line-height: 1; }
.sheet { width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tabs button { padding: 10px 4px; border-radius: 13px; font-weight: 800; font-size: 14px; color: var(--muted); }
.tabs button[aria-selected=true] { background: rgba(255,255,255,.12); color: var(--ink); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 18px; background: var(--glass); border: 1.5px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .1s, border-color .2s; }
.item:active { transform: scale(.96); }
.item.sel { border-color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.18); }
.item img { width: 56px; height: 56px; border-radius: 14px; }
.item b { font-size: 13.5px; }
.item .tag { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.item .tag.eq { color: var(--green); }
.item .tag.lock { color: var(--yellow); }
#shopAct:disabled { opacity: .55; }
/* Store and Profile: each category is a grid of big cards, three to a row, nothing hidden off to the side */
#closet { touch-action: pan-y; }
.storeRows { width: min(480px, 100%); display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.srow h3 { margin: 0 0 2px 4px; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.srow .sblurb { margin: 0 0 10px 4px; color: var(--muted); font-size: 13px; font-weight: 700; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scard { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 8px 10px; border-radius: 20px; background: var(--glass); border: 1.5px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .1s, border-color .2s; }
.scard img { width: 100%; aspect-ratio: 1; height: auto; border-radius: 14px; display: block; }
.scard b { font-family: var(--display); font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.scard .buy, .scard .own, .scard .use { width: 100%; padding: 8px 0; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-align: center; }
.scard .use { background: rgba(255,255,255,.08); color: var(--ink); border: 1px solid var(--line); }
.pcard:active { transform: scale(.96); }
.pcard.in-use { border-color: var(--green); box-shadow: 0 0 18px rgba(51,227,107,.25); }
.scard.more { justify-content: center; color: var(--muted); border-style: dashed; font-weight: 800; font-size: 13px; }
.scard.more span { font-size: 34px; line-height: 1; }
.scard .buy { background: linear-gradient(100deg, var(--yellow), var(--orange)); color: #1b1000; box-shadow: 0 6px 18px rgba(255,170,40,.3), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .1s; }
.scard .buy:active { transform: scale(.95); }
.scard .buy:disabled { opacity: .6; }
.scard .own { background: rgba(51,227,107,.12); color: var(--green); border: 1px solid rgba(51,227,107,.35); }
.scard.is-owned { border-color: rgba(51,227,107,.25); }
.storeRows .hint { margin: 2px 0 8px; }
#shopAct.owned { background: linear-gradient(100deg, var(--green), var(--blue)); color: #03140a; box-shadow: 0 8px 30px rgba(51,227,107,.3), inset 0 1px 0 rgba(255,255,255,.45); }
#shopNote { margin: 0; }

/* calibration */
.pad { width: 200px; height: 200px; margin: 10px auto; border-radius: 50%; border: 3px dashed rgba(255,255,255,.35); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: .1em; touch-action: none; transition: transform .06s, background .15s, border-color .15s; }
.pad.hit { transform: scale(.92); background: rgba(255,226,61,.15); border-color: var(--yellow); }
.dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .15s; }
.dots i.on { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.offset { font-family: var(--display); font-weight: 800; font-size: 54px; text-align: center; }
.nudge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s; }
#hud.on { opacity: 1; }
.top { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
#pauseBtn, .skipbtn { pointer-events: auto; }
.skipbtn { display: none; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 15px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .12em; }
.skipbtn svg { width: 16px; height: 16px; }
/* Tutorial: it's only teaching, so no health, score, combo or progress; SKIP replaces pause */
#hud.tut #pauseBtn, #hud.tut .shield, #hud.tut .scorebox, #hud.tut #combo, #hud.tut #progress, #hud.tut #tierPop { display: none; }
#hud.tut .skipbtn { display: inline-flex; }
.shield { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; max-width: 260px; justify-self: center; width: 100%; }
.shield i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #8bff6b); box-shadow: 0 0 12px var(--green); transform-origin: left; transition: transform .25s ease, background .3s; }
.shield.warn i { background: linear-gradient(90deg, var(--orange), var(--yellow)); box-shadow: 0 0 12px var(--orange); }
.shield.danger i { background: linear-gradient(90deg, var(--red), #ff6b8b); box-shadow: 0 0 14px var(--red); animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.scorebox { text-align: right; }
#score { font-family: var(--display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1; }
#mult { display: inline-block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--muted); transition: all .2s; }
#mult.t1 { background: #3d9bff; color: #001226; box-shadow: 0 0 12px #3d9bff; }
#mult.t2 { background: #ff3dc8; color: #26001c; box-shadow: 0 0 14px #ff3dc8; }
#mult.t3 { background: #ffc53d; color: #261a00; box-shadow: 0 0 16px #ffc53d; }
/* The PERFECT target: a bold white ring centred on the gate's outer edge at the hit moment. Dark outlines on
   both sides keep it readable over bright segments (orange, yellow, white) as well as over the dark tunnel. */
#reticle { --rw: 5px; position: absolute; left: 50%; top: 50%; width: calc(var(--hitR) * 2 + var(--rw)); height: calc(var(--hitR) * 2 + var(--rw)); margin: calc(var(--hitR) * -1 - var(--rw) / 2) 0 0 calc(var(--hitR) * -1 - var(--rw) / 2); border-radius: 50%; border: var(--rw) solid rgba(255,255,255,.85); box-shadow: 0 0 0 2px rgba(5,4,12,.75), inset 0 0 0 2px rgba(5,4,12,.75), 0 0 16px rgba(255,255,255,.45); }
#reticle::before, #reticle::after { content: ''; position: absolute; left: 50%; width: 5px; height: 22px; margin-left: -2.5px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px rgba(5,4,12,.75), 0 0 10px rgba(255,255,255,.6); }
#reticle::before { top: -14px; } #reticle::after { bottom: -14px; }
/* PERFECT window: the ring snaps to bright gold, then eases back to white */
#reticle, #reticle::before, #reticle::after { transition: border-color .18s ease-out, box-shadow .18s ease-out, background .18s ease-out; }
#reticle.perfect { border-color: #ffd23f !important; box-shadow: 0 0 0 2px rgba(5,4,12,.75), inset 0 0 0 2px rgba(5,4,12,.75), 0 0 26px rgba(255,210,63,.95), 0 0 64px rgba(255,180,30,.55), inset 0 0 22px rgba(255,210,63,.35); transition-duration: .04s; }
#reticle.perfect::before, #reticle.perfect::after { background: #ffd23f; box-shadow: 0 0 0 2px rgba(5,4,12,.75), 0 0 14px rgba(255,210,63,.9); transition-duration: .04s; }
/* Hit feedback sits ABOVE the ring: below it is where the swiping thumb covers the screen */
#judge { position: absolute; left: 0; right: 0; top: max(calc(108px + env(safe-area-inset-top)), calc(50% - var(--hitR) - 54px)); text-align: center; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: .12em; opacity: 0; }
#judge.go { animation: judge .55s ease-out; }
@keyframes judge { 0% { opacity: 0; transform: scale(1.6); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
#combo { position: absolute; left: 0; right: 0; top: max(calc(66px + env(safe-area-inset-top)), calc(50% - var(--hitR) - 112px)); text-align: center; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; opacity: 0; transition: opacity .2s; font-variant-numeric: tabular-nums; }
#combo small { display: block; font-size: 10px; letter-spacing: .3em; color: var(--muted); margin-top: 4px; font-weight: 700; }
#combo.on { opacity: 1; }
#combo.bump { animation: bump .18s ease-out; }
@keyframes bump { 50% { transform: scale(1.18); } }
#count { position: absolute; left: 0; right: 0; top: calc(50% - var(--hitR) - 96px); text-align: center; font-family: var(--display); font-weight: 900; font-size: 64px; opacity: 0; }
/* Count-in: each number lands at full strength exactly on its beat, then shrinks away within that beat */
#count.go { animation: count var(--beat, .5s) cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes count { 0% { opacity: 1; transform: scale(1.35); } 12% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
#tip { position: absolute; left: 16px; right: 16px; bottom: calc(40px + env(safe-area-inset-bottom)); text-align: center; font-weight: 800; font-size: 16px; opacity: 0; transition: opacity .3s; }
#tip.on { opacity: 1; }
#tip span { display: inline-block; padding: 10px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); }
/* tutorial coach: explains the frozen moment; NEXT only while it waits for a tap */
#coach { position: absolute; left: 16px; right: 16px; bottom: calc(22px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; padding: 16px 18px; border-radius: 20px; background: rgba(14, 10, 32, .86); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s; text-align: center; }
#coach.on { opacity: 1; transform: none; }
#coach p { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
#coach button { display: none; margin: 12px auto 0; pointer-events: auto; font-family: var(--display); letter-spacing: .12em; background: #fff; color: #120c24; }
#coach.on.next button { display: block; }
#reticle.focus { border-color: #fff !important; border-width: 3px; box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 0 36px rgba(255,255,255,.55), inset 0 0 30px rgba(255,255,255,.12); animation: focus 1s ease-in-out infinite; }
@keyframes focus { 50% { box-shadow: 0 0 0 14px rgba(255,255,255,.05), 0 0 50px rgba(255,255,255,.75), inset 0 0 30px rgba(255,255,255,.18); } }
#progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue), var(--purple), var(--red)); transform-origin: left; transform: scaleX(0); opacity: .8; }
#tierPop { position: absolute; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top)); text-align: center; font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .2em; opacity: 0; }
#tierPop.go { animation: judge .9s ease-out; }

@media (prefers-reduced-motion: reduce) { .logo img, .start { animation: none; } }

/* ---------- Prisms: the currency earned by playing ---------- */
/* the icon: a small faceted gem with the game's four colors swirling through it */
.pi { display: inline-block; width: 1em; height: 1.15em; vertical-align: -0.2em; margin-right: .3em; flex: none;
  background: conic-gradient(from 200deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--red));
  clip-path: polygon(50% 0, 100% 34%, 50% 100%, 0 34%); position: relative; filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
.pi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,0) 45%); clip-path: polygon(50% 0, 100% 34%, 50% 38%, 0 34%); }
.wallet { position: fixed; z-index: 4; top: calc(16px + env(safe-area-inset-top)); right: 16px; display: none; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: var(--display); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.wallet.on { display: inline-flex; }
.wallet.bump { animation: bump .35s ease-out; }
/* results tally */
.prisms .ph { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
.prisms .pbal { font-family: var(--display); font-size: 16px; letter-spacing: 0; color: var(--ink); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); transition: box-shadow .3s, background .3s; }
.prisms .pbal.glow { background: rgba(255,226,61,.14); box-shadow: 0 0 22px rgba(255,226,61,.35); }
.prisms .pl b { white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; }
.prisms .pl { display: grid; grid-template-columns: 1fr auto minmax(72px, auto); gap: 10px; align-items: baseline; padding: 6px 2px; font-weight: 800; font-size: 14px; opacity: 0; transform: translateX(-14px); transition: opacity .25s, transform .3s cubic-bezier(.2,1.4,.4,1); }
.prisms .pl.on { opacity: 1; transform: none; }
.prisms .pl .pm { color: var(--muted); font-size: 13px; }
.prisms .pl b { text-align: right; font-family: var(--display); font-variant-numeric: tabular-nums; }
.prisms .pl.mult b { color: var(--yellow); }
.prisms .pl.mult span:first-child { color: var(--muted); }
.prisms .pl.total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 16px; }
.prisms .pl.total b { font-size: 26px; color: #fff; text-shadow: 0 0 18px rgba(255,226,61,.55); }
.prisms .pl.total.on b { animation: bump .4s ease-out .7s; }
.prisms .pl.total em { font-style: normal; }
.pfly { position: fixed; left: 0; top: 0; z-index: 20; font-size: 18px; pointer-events: none; margin: 0; }
/* Prism-priced store buttons */
.scard .buy.prism { background: linear-gradient(100deg, #6a3cff, #b65cff 55%, #ff3dc8); color: #fff; box-shadow: 0 6px 18px rgba(150,80,255,.35), inset 0 1px 0 rgba(255,255,255,.35); display: inline-flex; justify-content: center; align-items: center; }
.scard .buy.prism.short { filter: saturate(.35) brightness(.8); }
.scard .buy.shake { animation: shake .4s linear; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- Tablets (iPad and up): scale the whole interface instead of leaving a phone-sized island ----------
   --z is the UI scale. Menus, Store, results, wallet, tab bar, HUD bar and tutorial coach use `zoom`;
   the HUD text placed around the ring scales its font and offsets instead, so it stays aligned with the
   ring (which the 3D view already sizes to the screen). */
:root { --z: 1; }
@media (min-width: 700px) and (min-height: 700px) { :root { --z: 1.35; } }
@media (min-width: 1000px) and (min-height: 1000px) { :root { --z: 1.55; } }
@media (min-width: 700px) and (min-height: 700px) {
  .wrap, .shopbar, .storeRows, .tagline, .start, .foot, .wallet, #nav button, .top, #coach, #tip { zoom: var(--z); }
  .logo img { width: min(86vw, calc(560px * var(--z))); }
  .screen.nav-pad { padding-bottom: calc(90px * var(--z) + env(safe-area-inset-bottom)); }
  #nav button { max-width: 120px; }
  #judge { font-size: calc(26px * var(--z)); top: max(calc(108px * var(--z) + env(safe-area-inset-top)), calc(50% - var(--hitR) - 54px * var(--z))); }
  #combo { font-size: calc(34px * var(--z)); top: max(calc(66px * var(--z) + env(safe-area-inset-top)), calc(50% - var(--hitR) - 112px * var(--z))); }
  #combo small { font-size: calc(10px * var(--z)); }
  #count { font-size: calc(64px * var(--z)); top: calc(50% - var(--hitR) - 96px * var(--z)); }
  #tierPop { font-size: calc(20px * var(--z)); top: calc(64px * var(--z) + env(safe-area-inset-top)); }
}

/* ---------- account card (Profile) and world leaderboards ---------- */
.acct { width: min(480px, 100%); margin: 6px 0 4px; }
.acct[hidden] { display: none; }
.acct .card { display: flex; flex-direction: column; gap: 10px; }
.acct .k { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.acct .note { margin: 0; }
.acct .btn { margin: 0; }
.acct .pill { align-self: center; }
/* signed in: name and email on top, the two buttons on their own row underneath (long names never push them off) */
.acct .ah { gap: 12px; }
.acct .an { font-family: var(--display); font-weight: 800; font-size: 20px; margin-top: 4px; overflow-wrap: anywhere; }
.acct .ae { color: var(--muted); font-size: 12.5px; word-break: break-all; }
.acct .abtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct .abtns .pill { width: 100%; }
.acct .amsg { margin: 0; color: var(--yellow); font-size: 13.5px; font-weight: 700; text-align: center; }
.btn.prov.google { background: #fff; color: #1f1f1f; box-shadow: 0 6px 20px rgba(255,255,255,.18); }
.btn.prov.apple { background: #000; color: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
.field { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); font: 700 16px var(--body); outline: none; }
.field:focus { border-color: rgba(255,255,255,.45); }
.field.code { font-family: var(--display); font-size: 24px; letter-spacing: .3em; text-align: center; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line); }
.seg button { padding: 10px 4px; border-radius: 13px; font-weight: 800; font-size: 14px; color: var(--muted); }
.seg button[aria-selected=true] { background: rgba(255,255,255,.14); color: var(--ink); }
.seg.small button { padding: 7px 4px; font-size: 13px; }
.boardMe { display: flex; flex-direction: column; gap: 10px; }
.boardMe .note, .boardList .note { margin: 4px 0; }
.boardList { padding: 8px 10px; max-height: none; }
.brow { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid var(--line); font-weight: 800; }
.brow:last-child { border-bottom: 0; }
.brow .br { font-family: var(--display); color: var(--muted); font-size: 15px; text-align: center; }
.brow .bn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bn small { color: var(--muted); font-weight: 700; margin-left: 4px; }
.brow b { font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.brow b small { font-family: var(--body); font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .06em; }
.brow.mine { background: rgba(51,227,107,.1); border-radius: 12px; border-bottom-color: transparent; }
.brow.mine .br { color: var(--green); }
.rankline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 800; }
.rankline .note { margin: 0; text-align: left; }
@media (min-width: 700px) and (min-height: 700px) { .acct { zoom: var(--z); } }