/* the site's own type: Archivo Black for the big things, Space Grotesk for the labels (OFL, assets/fonts) */
@font-face { font-family: "Archivo Black"; src: url("assets/fonts/archivo-black-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/space-grotesk-latin-v22.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-v20.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root { --display: "Archivo Black", "Helvetica Neue", Arial, sans-serif; --ui: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --text: "Inter", "Helvetica Neue", Arial, sans-serif; --gold: #ffd86a; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #07050d; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: none; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; font-family: "Helvetica Neue", Arial, sans-serif; color: #fff; }

#songbar { position: absolute; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(560px, 60vw); height: 22px; opacity: 0; transition: opacity 1.2s; }
#songbar.on { opacity: .85; }
#shape { width: 100%; height: 100%; display: block; }
#songbar .mark { position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: #fff; will-change: transform; }

#title { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; transition: opacity .9s; }
#title .name { font-size: 15px; letter-spacing: .62em; font-weight: 700; padding-left: .62em; opacity: .92; }
#title .pick { margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
#title .song { opacity: .8; min-width: 260px; }
#title .num { opacity: .4; font-variant-numeric: tabular-nums; }
#title .arrow { opacity: .45; cursor: pointer; pointer-events: auto; padding: 6px 10px; font-size: 14px; }
#title .arrow:hover { opacity: .95; }
#title .arrow.off { visibility: hidden; }
#title .best { margin-top: 8px; font-size: 11px; letter-spacing: .22em; opacity: .45; min-height: 14px; }
#title.locked .song { opacity: .3; }
#title.locked .hint { visibility: hidden; }
#title .hint { margin-top: 26px; font-size: 12px; letter-spacing: .14em; opacity: .5; }
#title .hint b { font-weight: 600; opacity: .9; }
#title .back { margin-top: 10px; font-size: 10px; letter-spacing: .2em; opacity: .32; }
#title .back b { font-weight: 600; }
#title.off { opacity: 0; }

#speed { position: absolute; right: calc(26px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); font: 600 13px/1 var(--ui); letter-spacing: .12em; opacity: 0; font-variant-numeric: tabular-nums; transition: opacity 1s; }
#speed.on { opacity: .6; }

#results { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding-left: 8vw; opacity: 0; transition: opacity 1.4s; text-align: left; background: linear-gradient(90deg, rgba(8,4,14,.78) 0%, rgba(8,4,14,.45) 32%, rgba(8,4,14,0) 55%); }
#results.on { opacity: 1; pointer-events: auto; }
#loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 11px; letter-spacing: .3em; opacity: .5; }
#paused { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 13px; letter-spacing: .6em; opacity: 0; transition: opacity .3s; }
#paused.on { opacity: .8; }

/* the word for each pump as you let go, and the run you're on */
#judge { position: absolute; left: 0; right: 0; top: 0; text-align: center; pointer-events: none; will-change: transform; }
#judge .word { display: inline-block; font: 22px/1 var(--display); letter-spacing: .3em; padding-left: .3em; opacity: 0; text-shadow: 0 0 18px currentColor, 0 1px 3px rgba(0,0,0,.8), 0 0 10px rgba(0,0,0,.35); }
#judge .word.perfect { color: #ffd86a; }
#judge .word.good { color: #ffffff; }
#judge .word.early, #judge .word.late { color: #9fc0ff; font-size: 16px; }
#judge .word.miss { color: #ff6b7a; font-size: 14px; }
#judge .streak { margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: .2em; opacity: 0; font-variant-numeric: tabular-nums; color: #ffe9b0; text-shadow: 0 0 12px rgba(255,200,90,.8); }
#score { position: absolute; right: calc(26px + env(safe-area-inset-right)); top: calc(14px + env(safe-area-inset-top)); font: 26px/1 var(--display); letter-spacing: .02em; opacity: 0; font-variant-numeric: tabular-nums; transition: opacity 1s; text-shadow: 0 0 14px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.6); }
#score.on { opacity: .95; }
#score { transform-origin: 100% 0; transition: opacity 1s, color .4s, text-shadow .4s; }
/* a run at x4: the score burns gold with the screen's edges */
body.fever #score { color: #fff3c9; text-shadow: 0 0 18px rgba(255,214,106,.95), 0 1px 2px rgba(0,0,0,.6); }
/* the run of pumps in time, top left: the multiplier, eight pips to the next, how many in a row */
#combo { position: absolute; left: calc(24px + env(safe-area-inset-left)); top: calc(14px + env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity 1s; }
#combo.on { opacity: 1; }
#combo .mx { font: 40px/1 var(--display); color: rgba(255,255,255,.55); display: flex; align-items: baseline; transform-origin: 30% 60%; min-width: 58px; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 14px rgba(0,0,0,.35); }
#combo .mx .by { font-size: 22px; margin-right: 1px; }
#combo.m2 .mx { color: #ffe9a8; text-shadow: 0 0 16px rgba(255,200,90,.65), 0 1px 3px rgba(0,0,0,.5); }
#combo.m3 .mx { color: var(--gold); text-shadow: 0 0 20px rgba(255,190,60,.9), 0 1px 3px rgba(0,0,0,.5); }
#combo.m4 .mx { color: #fff3c9; text-shadow: 0 0 26px rgba(255,214,106,1), 0 0 6px rgba(255,255,255,.9); }
#combo .pips { display: flex; gap: 3px; }
#combo .pips i { width: 9px; height: 13px; background: rgba(10,4,20,.32); border: 1px solid rgba(255,255,255,.35); box-sizing: border-box; border-radius: 2px; transform-origin: 50% 100%; transition: background .1s, box-shadow .1s; }
#combo .pips i.on { background: var(--gold); border-color: #fff3c9; box-shadow: 0 0 8px rgba(255,200,90,.8); }
#combo.maxed .pips i { background: #fff3c9; box-shadow: 0 0 10px rgba(255,214,106,1); }
#combo .ct { margin-top: 7px; font: 700 10px/1 var(--ui); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#combo .ct b { display: inline-block; font: 18px/1 var(--display); letter-spacing: .02em; margin-right: 5px; color: #fff; font-variant-numeric: tabular-nums; transform-origin: 50% 70%; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#combo:not(.live) .ct b { color: rgba(255,255,255,.6); }
/* Groovy: x8 in a rainbow, the pips too; its button under the run when it's ready (on a touchscreen a
   round one on the right, where the pressing thumb can reach it), a bar draining under the word while
   the trip lasts. The rainbows are drawn once and only their hue turns (a filter the compositor runs):
   a rainbow repainted every frame, with a glow on it, cost 70-180 ms of frames as Groovy began */
@keyframes grhue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes grbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
#combo.m8 .mx { color: transparent; background: linear-gradient(90deg, #ff4f9a, #ffb21a, #fff36a, #4dffb8, #3dc8ff, #b46bff); -webkit-background-clip: text; background-clip: text; text-shadow: none; will-change: filter; animation: grhue 1.6s linear infinite; }
#combo.groovy .pips { will-change: filter; animation: grhue 1.1s linear infinite; }
#combo.groovy .pips i { background: linear-gradient(180deg, #ff4f9a, #ffb21a, #4dffb8, #3dc8ff); border-color: #fff; box-shadow: 0 0 8px rgba(255,140,220,.85); }
#groovy { position: absolute; left: calc(24px + env(safe-area-inset-left)); top: calc(70px + env(safe-area-inset-top)); display: none; align-items: center; gap: 9px; padding: 7px 12px 8px 13px; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(rgba(14,6,26,.62), rgba(14,6,26,.62)) padding-box, linear-gradient(90deg, #ff4f9a, #ffb21a, #fff36a, #4dffb8, #3dc8ff, #b46bff, #ff4f9a) border-box; box-shadow: 0 0 14px rgba(255,120,210,.45); color: #fff; font: 15px/1 var(--display); letter-spacing: .2em; pointer-events: none; will-change: transform, filter; animation: grhue 2.4s linear infinite; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#groovy .w { color: transparent; background: linear-gradient(90deg, #ff4f9a, #ffb21a, #fff36a, #4dffb8, #3dc8ff, #b46bff); -webkit-background-clip: text; background-clip: text; }
#groovy .k { font: 700 11px/1 var(--ui); letter-spacing: .08em; padding: 3px 6px; border-radius: 4px; border: 1px solid rgba(255,255,255,.6); color: #fff; }
#groovy .t { position: absolute; left: 14px; right: 14px; bottom: -7px; height: 3px; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(var(--left, 1)); background: linear-gradient(90deg, #ff4f9a, #ffb21a, #fff36a, #4dffb8, #3dc8ff, #b46bff); box-shadow: 0 0 8px rgba(255,160,220,.9); opacity: 0; will-change: transform; }
#groovy.ready, #groovy.on { display: flex; }
#groovy.ready { animation: grhue 2.4s linear infinite, grbeat .9s ease-in-out infinite; }
#groovy.on .k { display: none; }
#groovy.on .t { opacity: 1; }
#groovy.on.broke { opacity: .7; }
#groovy.warm, #combo.warm { opacity: .02 !important; transition: none !important; }
#pops { position: absolute; inset: 0; overflow: hidden; }
#pops .pop { position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 3px; color: #ffe9b0; text-shadow: 0 0 14px rgba(255,200,90,.9), 0 0 3px rgba(0,0,0,.7); white-space: nowrap; font-variant-numeric: tabular-nums; }
#pops .pop .nm { font: 700 11px/1 var(--ui); letter-spacing: .32em; padding-left: .32em; color: #fff; }
#pops .pop .pv { font: 20px/1 var(--display); letter-spacing: .02em; }
#pops .pop.small .pv { font-size: 16px; }
#count { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 88px; font-weight: 800; letter-spacing: .02em; opacity: 0; text-shadow: 0 0 30px rgba(255,255,255,.55), 0 0 4px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
#gems { position: absolute; left: calc(26px + env(safe-area-inset-left)); bottom: calc(22px + env(safe-area-inset-bottom)); font: 600 13px/1 var(--ui); letter-spacing: .14em; opacity: 0; font-variant-numeric: tabular-nums; transition: opacity 1s; }
#gems.on { opacity: .75; }
#gems .icon { display: inline-block; margin-right: 8px; color: #ff9ed2; text-shadow: 0 0 10px currentColor; }
#gems.key .icon { width: 9px; height: 18px; color: transparent; text-shadow: none; vertical-align: -3px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 22'%3E%3Ccircle cx='5' cy='4.5' r='3.4' fill='none' stroke='%23ffc860' stroke-width='1.8'/%3E%3Cpath d='M4.1 8h1.8v13H4.1zM5.9 15.5h3v1.6h-3zM5.9 18.6h2.4v1.6H5.9z' fill='%23ffc860'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 200, 96, .6)); }
#gems.lily .icon { width: 16px; height: 16px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23fff6f8'%3E%3Cellipse rx='2.6' ry='9' transform='rotate(0) translate(0 -3)'/%3E%3Cellipse rx='2.6' ry='9' transform='rotate(60) translate(0 -3)'/%3E%3Cellipse rx='2.6' ry='9' transform='rotate(120) translate(0 -3)'/%3E%3Cellipse rx='2.6' ry='9' transform='rotate(180) translate(0 -3)'/%3E%3Cellipse rx='2.6' ry='9' transform='rotate(240) translate(0 -3)'/%3E%3Cellipse rx='2.6' ry='9' transform='rotate(300) translate(0 -3)'/%3E%3C/g%3E%3Ccircle r='2' fill='%23e8a040'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 230, 240, .6)); }
#gems.corn .icon { width: 13px; height: 16px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3CclipPath id='c'%3E%3Cpath d='M2 29Q13 32 24 29Q19 13 14 2Q13 1 12 2Q7 13 2 29z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='26' height='32' fill='%23fff8ee'/%3E%3Crect y='11' width='26' height='11' fill='%23ff7a1a'/%3E%3Crect y='22' width='26' height='10' fill='%23ffcc22'/%3E%3C/g%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 160, 60, .6)); }
#gems.chip .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='%23ffc84a'%3E%3Crect x='0' y='7' width='5' height='2'/%3E%3Crect x='0' y='12' width='5' height='2'/%3E%3Crect x='0' y='17' width='5' height='2'/%3E%3Crect x='0' y='22' width='5' height='2'/%3E%3Crect x='25' y='7' width='5' height='2'/%3E%3Crect x='25' y='12' width='5' height='2'/%3E%3Crect x='25' y='17' width='5' height='2'/%3E%3Crect x='25' y='22' width='5' height='2'/%3E%3Crect x='7' y='0' width='2' height='5'/%3E%3Crect x='12' y='0' width='2' height='5'/%3E%3Crect x='17' y='0' width='2' height='5'/%3E%3Crect x='22' y='0' width='2' height='5'/%3E%3Crect x='7' y='25' width='2' height='5'/%3E%3Crect x='12' y='25' width='2' height='5'/%3E%3Crect x='17' y='25' width='2' height='5'/%3E%3Crect x='22' y='25' width='2' height='5'/%3E%3C/g%3E%3Crect x='4' y='4' width='22' height='22' rx='2' fill='%23161820'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%2346f0e0'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(70, 240, 224, .6)); }
#gems.pick .icon { width: 13px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M13 29C10 27 2 14 2 7C2 2 8 1 13 1S24 2 24 7C24 14 16 27 13 29Z' fill='%23f0c860'/%3E%3Cpath d='M8 6C10 4 16 4 18 6' stroke='%23fff6dc' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(240, 200, 96, .6)); }
#gems.star .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 1L19 11L29 11.5L21 18L24 28.5L15 22.5L6 28.5L9 18L1 11.5L11 11Z' fill='%23ffd860'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 216, 96, .6)); }
#gems.coin .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='13.5' fill='%23ffd860'/%3E%3Ccircle cx='15' cy='15' r='10.5' fill='none' stroke='%23c89a30' stroke-width='1.6'/%3E%3Cpath d='M15 8L16.9 12.9L22 13.2L18 16.4L19.4 21.4L15 18.5L10.6 21.4L12 16.4L8 13.2L13.1 12.9Z' fill='%23c89a30'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 216, 96, .6)); }
#gems.quill .icon { width: 13px; height: 16px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 32'%3E%3Cpath d='M20 2C10 6 6 14 7 22L5 30L9 23C16 22 22 14 20 2Z' fill='%23fff0d0'/%3E%3Cpath d='M17 6L7 28' stroke='%23c8a050' stroke-width='1.4'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 220, 160, .6)); }
#gems.flake .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='%23d8f8ff' stroke-width='2.2' stroke-linecap='round' fill='none'%3E%3Cpath d='M15 2V28M3.7 8.5L26.3 21.5M3.7 21.5L26.3 8.5M15 6L12 3.5M15 6L18 3.5M15 24L12 26.5M15 24L18 26.5'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(160, 230, 255, .7)); }
#gems.apple .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 9C11 6 4 7 4 15C4 23 9 28 12 28C14 28 14 27 15 27C16 27 16 28 18 28C21 28 26 23 26 15C26 7 19 6 15 9Z' fill='%23f2382a'/%3E%3Cpath d='M15 9C15 6 16 4 17 3' stroke='%235a3a1a' stroke-width='1.6' fill='none'/%3E%3Cpath d='M17 5C19 2 23 3 23 3C22 6 19 7 17 5Z' fill='%234ab02a'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 80, 60, .5)); }
#gems.bulb .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2C9.5 2 6 6 6 10.6C6 14.4 8.6 16.4 10 18.6C10.8 19.8 11 21 11 22H19C19 21 19.2 19.8 20 18.6C21.4 16.4 24 14.4 24 10.6C24 6 20.5 2 15 2Z' fill='%23ffd27a'/%3E%3Crect x='11' y='22.6' width='8' height='2.2' rx='1' fill='%23b8bcc4'/%3E%3Crect x='11.6' y='25.4' width='6.8' height='2' rx='1' fill='%23b8bcc4'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 200, 110, .6)); }
#gems.like .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 27C10 22 2 17 2 10C2 5.5 5.5 3 9 3C12 3 14 5 15 7C16 5 18 3 21 3C24.5 3 28 5.5 28 10C28 17 20 22 15 27Z' fill='%23ff4a8a'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 80, 150, .6)); }
#gems.ember .icon { width: 14px; height: 14px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2L25 11L22 25L9 28L4 14Z' fill='%23ff7a2a'/%3E%3Cpath d='M15 2L22 25L9 28Z' fill='%23ffb050'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 120, 40, .7)); }
#gems.pearl .icon { width: 13px; height: 13px; color: transparent; text-shadow: none; vertical-align: -1px; background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #f4ece4 40%, #c8bcb4 100%); border-radius: 50%; filter: drop-shadow(0 0 5px rgba(255, 244, 230, .7)); }
#gems.lips .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M1 9C5 6 9 1 13 2C15 2.5 16 4 16 4C16 4 17 2.5 19 2C23 1 27 6 31 9C27 9 21 9.6 16 9.6C11 9.6 5 9 1 9Z' fill='%23ff2a50'/%3E%3Cpath d='M1.5 10.5C6 10.8 11 11 16 11C21 11 26 10.8 30.5 10.5C27 16 21 19 16 19C11 19 5 16 1.5 10.5Z' fill='%23e0103c'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 60, 90, .65)); }
#gems.shell .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M15 27L4 25C1 18 2 10 6 6C10 2 20 2 24 6C28 10 29 18 26 25Z' fill='%23ffb898'/%3E%3Cpath d='M15 26L8 6M15 26L12 3.5M15 26L18 3.5M15 26L22 6M15 26L26 12M15 26L4 12' stroke='%23e88a70' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 180, 150, .65)); }
#gems.candy .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'%3E%3Cellipse cx='17' cy='9' rx='9' ry='7' fill='%23ff4a96'/%3E%3Cpath d='M12 4Q17 9 12 14M18 3Q23 9 18 15' stroke='%23fff' stroke-width='2' fill='none'/%3E%3Cpath d='M8 9L1 3L2 9L1 15Z M26 9L33 3L32 9L33 15Z' fill='%23ff7ab4'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 90, 160, .65)); }
#gems.perfume .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Crect x='3' y='11' width='18' height='18' rx='3' fill='%23ff8ccc'/%3E%3Crect x='8' y='7' width='8' height='5' fill='%23ffcc55'/%3E%3Ccircle cx='12' cy='4' r='3.5' fill='%23ffd666'/%3E%3Crect x='6' y='16' width='12' height='6' fill='%23fff2f6'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 140, 200, .65)); }
#gems.donut .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='13' fill='%23e8a058'/%3E%3Ccircle cx='15' cy='15' r='11' fill='%23ff6aa8'/%3E%3Ccircle cx='15' cy='15' r='4.5' fill='%23140e1e'/%3E%3Cpath d='M8 9l2 1M20 7l1 2M22 18l2-1M10 21l-1 2M14 6l2 0M6 15l1 2M23 12l1-2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 120, 180, .65)); }
#gems.cuffs .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Ccircle cx='9' cy='13' r='7' fill='none' stroke='%23ffd060' stroke-width='3'/%3E%3Ccircle cx='25' cy='13' r='7' fill='none' stroke='%23ffd060' stroke-width='3'/%3E%3Cpath d='M13 5h8' stroke='%23ffd060' stroke-width='2.4' stroke-dasharray='2.4 1.2'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 208, 96, .65)); }
#gems.coffee .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M4 8L6 29H18L20 8Z' fill='%23f6f2ec'/%3E%3Cpath d='M4.8 14L5.6 21H18.4L19.2 14Z' fill='%239a6a42'/%3E%3Crect x='2.5' y='4' width='19' height='5' rx='1.5' fill='%233a363a'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 240, 220, .65)); }
#gems.crown .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M3 20L1 6L9 12L16 2L23 12L31 6L29 20Z' fill='%23ffd060'/%3E%3Crect x='3' y='19' width='26' height='4' fill='%23e8b040'/%3E%3Ccircle cx='9' cy='16' r='1.8' fill='%23ff3a6a'/%3E%3Ccircle cx='16' cy='16' r='1.8' fill='%234aa0ff'/%3E%3Ccircle cx='23' cy='16' r='1.8' fill='%23ff3a6a'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 210, 96, .65)); }
#gems.popsicle .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 32'%3E%3Cpath d='M3 8A7 7 0 0 1 17 8V22H3Z' fill='%23ff5a72'/%3E%3Cpath d='M3 14H17V22H3Z' fill='%23ffb84a'/%3E%3Cpath d='M3 19H17V22H3Z' fill='%238ad6ff'/%3E%3Crect x='8.5' y='22' width='3' height='9' rx='1' fill='%23e8c88c'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 110, 130, .65)); }
#gems.drink .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2 3H28L15 17Z' fill='%235affe0'/%3E%3Cpath d='M15 17V27M8 28H22' stroke='%23d0e8ff' stroke-width='2'/%3E%3Ccircle cx='20' cy='6' r='3' fill='%23ff1a3a'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(90, 255, 224, .65)); }
#gems.pin .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12 31C8 24 2 18 2 11A10 10 0 0 1 22 11C22 18 16 24 12 31Z' fill='%23ff2a3a'/%3E%3Ccircle cx='12' cy='11' r='4' fill='%23fff'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 60, 70, .65)); }
#gems.heart .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 32'%3E%3Cpath d='M15 31C9 27 3 21 3 14C3 9 7 7 10.5 7C12.5 7 14 8 15 9.5C16 8 17.5 7 19.5 7C23 7 27 9 27 14C27 21 21 27 15 31Z' fill='%23d8102c'/%3E%3Cpath d='M12 7V2M17 6Q18 1 23 2' stroke='%23e83a4a' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M21 5L24 1' stroke='%235a7aff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(230, 30, 60, .65)); }
#gems.polaroid .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Crect x='1' y='1' width='22' height='26' rx='1.5' fill='%23f4f0e8'/%3E%3Crect x='3.5' y='3.5' width='17' height='16' fill='%23d88a6a'/%3E%3Crect x='3.5' y='12' width='17' height='7.5' fill='%234a3440'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 220, 230, .6)); }
#gems.whistle .icon { width: 15px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='11' cy='17' r='8' fill='%23ff5a2a'/%3E%3Crect x='11' y='9' width='17' height='6' rx='1.5' fill='%23ff5a2a'/%3E%3Ccircle cx='3.5' cy='10' r='2.6' fill='none' stroke='%23d8dce4' stroke-width='1.6'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 90, 42, .6)); }
#gems.cup .icon { width: 13px; height: 15px; color: transparent; text-shadow: none; vertical-align: -2px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M2 2H24L20 28H6Z' fill='%23e8302a'/%3E%3Crect x='1' y='1' width='24' height='3' rx='1.5' fill='%23fff'/%3E%3Cpath d='M4.5 11H21.5M5.3 18H20.7' stroke='%23a81818' stroke-width='1.4'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(232, 48, 42, .6)); }
#gems.tab .icon { width: 8px; height: 17px; color: transparent; text-shadow: none; vertical-align: -3px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 24'%3E%3Cpath d='M1 2L3 1L5 2.4L7 1L9 2V23H1Z' fill='%23f6f4ee'/%3E%3Cpath d='M5 6V20' stroke='%232a72d8' stroke-width='2' stroke-dasharray='2.2 1.4'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(120, 180, 255, .6)); }
#gems.duck .icon { width: 16px; height: 13px; color: transparent; text-shadow: none; vertical-align: -1px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'%3E%3Cpath d='M20 2a6 6 0 0 0-6 6c0 1.3.4 2.4 1 3.4C10 10 4 11 2 14c-1 5 4 10 13 10s14-4 14-9c0-2.5-1.5-4.4-3.6-5.6A6 6 0 0 0 20 2z' fill='%23ffd23a'/%3E%3Cpath d='M25 6.5l5 1.2-5 1.8z' fill='%23ff7a1a'/%3E%3Ccircle cx='21.5' cy='6.5' r='1.2' fill='%23111'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 6px rgba(255, 210, 58, .6)); }

/* ---------- the screens around the rides ---------- */
#screens { position: fixed; inset: 0; pointer-events: none; font-family: "Helvetica Neue", Arial, sans-serif; color: #fff; z-index: 10; }
#screens > div { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; pointer-events: none; }
#screens > div.on { opacity: 1; pointer-events: auto; }

#load .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,3,12,.94) 0%, rgba(6,3,12,.74) 36%, rgba(6,3,12,.18) 72%, rgba(6,3,12,.05) 100%); }
/* rows size to the window; past the edge the list scrolls, keeps the pick in view, and fades where there are more songs */

#load .img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(3px) brightness(.75); transform: scale(1.04); }
#load .box { position: absolute; left: 7vw; bottom: 16vh; width: min(520px, 70vw); }
#load .name { font-size: 15px; letter-spacing: .4em; font-weight: 700; text-transform: uppercase; margin-bottom: 18px; }
#load .bar { height: 2px; background: rgba(255,255,255,.16); }
#load .bar i { display: block; height: 100%; width: 0; background: #fff; box-shadow: 0 0 10px #fff; transition: width .2s; }

#end .card, #pause .card { position: absolute; left: 7vw; top: 50%; transform: translateY(-50%); background: rgba(8,4,14,.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-left: 2px solid var(--accent, #fff); padding: 34px 40px 36px; min-width: 360px; }
#pause .card { left: 50%; transform: translate(-50%, -50%); text-align: center; border-left: 0; border-top: 2px solid rgba(255,255,255,.6); }
#end .song, #pause .song { font-size: 12px; letter-spacing: .4em; opacity: .75; text-transform: uppercase; }
#pause .song { opacity: .9; letter-spacing: .6em; }
#end .head { display: flex; align-items: center; gap: 26px; margin: 16px 0 20px; }
#end .grade { font-size: 92px; line-height: .9; font-weight: 900; width: 84px; text-align: center; opacity: 0; transform: scale(2.4); filter: blur(6px); transition: opacity .18s, transform .35s cubic-bezier(.2,1.5,.4,1), filter .25s; color: #fff; }
#end .grade.in { opacity: 1; transform: scale(1); filter: none; }
/* the ring that goes out from the grade as it lands */
#end .grade { position: relative; }
#end .grade .stamp { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 1px solid var(--accent, #fff); box-shadow: 0 0 10px var(--accent, #fff); opacity: 0; pointer-events: none; }
#end .grade.gS .stamp { border-color: #ffe27a; box-shadow: 0 0 12px rgba(255,214,90,.9); }
#end .grade.gS { color: #ffe27a; text-shadow: 0 0 26px rgba(255,214,90,.95), 0 0 6px rgba(255,255,255,.8); }
#end .grade.gA { color: #fff; text-shadow: 0 0 22px var(--accent); }
#end .grade.gB { color: #e8e4f0; text-shadow: 0 0 14px rgba(255,255,255,.35); }
#end .grade.gC, #end .grade.gD { color: #b8b2c4; }
#end .pts .n { font-size: 46px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
#end .pts .sub { margin-top: 6px; font-size: 11px; letter-spacing: .26em; opacity: .55; min-height: 13px; }
#end .pts .nb { color: var(--accent); opacity: 1; text-shadow: 0 0 12px var(--accent); }
#end .level { margin-top: 22px; }
#end .level .lt { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .24em; opacity: .8; margin-bottom: 8px; }
#end .level .lt b { font-weight: 800; }
#end .level .up { color: #ffe27a; text-shadow: 0 0 12px rgba(255,214,90,.9); }
#end .level .lbar { height: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
#end .level .lbar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
#end .level.flash .lbar i { animation: lvflash .7s ease-out; }
@keyframes lvflash { 0% { background: #fff; box-shadow: 0 0 24px #fff; } 100% { background: var(--accent); } }
#end .row { display: flex; justify-content: space-between; gap: 48px; font-size: 13px; letter-spacing: .14em; margin: 8px 0; font-variant-numeric: tabular-nums; }
#end .row span:first-child { opacity: .55; }
#end .btns, #pause .btns { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
#pause .btns { justify-content: center; }
#screens button { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.24); color: #fff; font: 700 12px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; padding: 13px 16px; cursor: pointer; text-transform: uppercase; transition: background .12s, border-color .12s; }
#screens button .k { opacity: .4; margin-left: 10px; font-size: 10px; letter-spacing: .1em; }
#screens button.primary { border-color: var(--accent, rgba(255,255,255,.7)); }
#screens button.focus { background: rgba(255,255,255,.14); border-color: #fff; }
/* the end card comes in from the left, then its lines one after another; the pause card settles */
#end.on .card { animation: cardin .55s cubic-bezier(.2,.9,.3,1) both; }
@keyframes cardin { from { opacity: 0; transform: translate(-28px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
#end.on .row, #end.on .level, #end.on .btns { animation: rowin .42s ease-out both; }
#end.on .row:nth-child(1) { animation-delay: .18s; } #end.on .row:nth-child(2) { animation-delay: .24s; }
#end.on .row:nth-child(3) { animation-delay: .30s; } #end.on .row:nth-child(4) { animation-delay: .36s; }
#end.on .row:nth-child(5) { animation-delay: .42s; } #end.on .row:nth-child(6) { animation-delay: .48s; }
#end.on .level { animation-delay: .56s; } #end.on .btns { animation-delay: .64s; }
@keyframes rowin { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
#pause.on .card { animation: pausein .3s cubic-bezier(.2,.9,.3,1) both; }
@keyframes pausein { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------- touchscreens ---------- */
/* the thumb words (.tp) stand in for the key words (.kb) and the key labels on a phone, or once a finger has touched */
.tp { display: none; }
body.touch .tp { display: inline; }
body.touch .kb, body.touch #screens .k { display: none; }
#title .back { pointer-events: auto; cursor: pointer; }
#title .back .go { border-bottom: 1px dotted rgba(255,255,255,.5); padding-bottom: 1px; }
#thumb { position: absolute; left: 0; top: 0; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); opacity: 0; transition: opacity .12s; will-change: transform; }
#thumb.on { opacity: 1; }
#thumb i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 0 0 10px rgba(255,255,255,.6); }
#pausebtn { display: none; position: absolute; left: calc(10px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); width: 44px; height: 44px; padding: 0; border: 0; background: none; opacity: .4; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
#pausebtn i { position: absolute; top: 14px; width: 4px; height: 16px; background: #fff; border-radius: 1px; box-shadow: 0 0 6px rgba(0,0,0,.6); }
#pausebtn i:first-child { left: 16px; } #pausebtn i:last-child { left: 24px; }
body.touch.riding #pausebtn { display: block; }
body.touch #combo { top: calc(56px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
body.touch #combo .mx { font-size: 32px; min-width: 46px; }
body.touch #groovy { left: auto; right: calc(18px + env(safe-area-inset-right)); top: auto; bottom: 46%; width: 84px; height: 84px; padding: 0; justify-content: center; border-width: 2px; font-size: 11px; letter-spacing: .12em; pointer-events: auto; cursor: pointer; }
body.touch #groovy .t { left: 18px; right: 18px; bottom: 16px; }
#fps { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: 86vw; text-align: center; font: 11px/1.4 Menlo, Consolas, monospace; color: #9ff0e8; opacity: .8; text-shadow: 0 0 4px #000; }
#screens button { touch-action: manipulation; }
body.touch #screens button { padding: 15px 18px; font-size: 13px; }

/* ---------- a phone upright ---------- */
@media (orientation: portrait) and (max-width: 700px) {
  #load .shade { background: linear-gradient(180deg, rgba(6,3,12,.9) 0%, rgba(6,3,12,.86) 55%, rgba(6,3,12,.35) 100%); }
  #load .box { left: 6vw; width: 88vw; bottom: 12vh; }
  #results { padding-left: 0; background: linear-gradient(0deg, rgba(8,4,14,.8) 0%, rgba(8,4,14,.5) 35%, rgba(8,4,14,0) 60%); }
  #end .card { left: 0; right: 0; top: auto; bottom: 0; transform: none; min-width: 0; padding: 20px 22px calc(18px + env(safe-area-inset-bottom)); border-left: 0; border-top: 2px solid var(--accent, #fff); max-height: 62vh; overflow-y: auto; }
  #end.on .card { animation-name: cardup; }
  #end .head { margin: 10px 0 12px; gap: 20px; }
  #end .grade { font-size: 72px; width: 66px; }
  #end .pts .n { font-size: 38px; }
  #end .row { margin: 5px 0; gap: 20px; font-size: 12px; }
  #end .level { margin-top: 14px; }
  #end .btns { margin-top: 18px; }
  #end .btns button, #pause .btns button { flex: 1 1 auto; }
  #pause .card { min-width: 0; width: 82vw; padding: 26px 20px 28px; }
  #title .pick { flex-direction: column; gap: 6px; }
  #title .song { min-width: 0; }
  #title .hint { padding: 0 24px; }
  #count { font-size: 72px; }
}
@keyframes cardup { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* ---------- a phone on its side ---------- */
@media (max-height: 520px) {
  #end .card { padding: 16px 26px 16px; max-height: calc(100vh - 12px); overflow-y: auto; min-width: 320px; }
  #end .head { margin: 8px 0 8px; gap: 18px; }
  #end .grade { font-size: 56px; width: 54px; }
  #end .pts .n { font-size: 32px; }
  #end .pts .sub { margin-top: 3px; }
  #end .row { margin: 3px 0; font-size: 12px; gap: 36px; }
  #end .level { margin-top: 10px; }
  #end .level .lt { margin-bottom: 5px; }
  #end .btns, #pause .btns { margin-top: 12px; }
  #screens button { padding: 11px 13px; }
  body.touch #screens button { padding: 12px 14px; }
  #count { font-size: 64px; top: 40%; }
  #title { bottom: 6vh; }
  #title .hint { margin-top: 14px; }
  #title .back { margin-top: 6px; }
}

/* ---------- the title: the game's film behind the name ---------- */
#intro { background: #07050d; cursor: pointer; }
#intro .film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#intro .shade { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 60% at 50% 50%, rgba(7,5,13,.05) 0%, rgba(7,5,13,.3) 55%, rgba(7,5,13,.85) 100%), linear-gradient(180deg, rgba(7,5,13,.5) 0%, rgba(7,5,13,0) 28%, rgba(7,5,13,0) 62%, rgba(7,5,13,.82) 100%); }
#intro .logo { position: absolute; left: 0; right: 0; top: 47%; transform: translateY(-50%); display: flex; justify-content: center; flex-wrap: wrap; gap: 0; font: clamp(46px, 9.4vw, 150px)/.92 var(--display); letter-spacing: .06em; text-align: center; filter: drop-shadow(0 0 34px rgba(255,61,139,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.55)); transition: transform .65s cubic-bezier(.5,0,.75,.2), opacity .5s, filter .6s; }
#intro .logo .w { display: inline-block; background: linear-gradient(100deg, #fff 0%, #fff 42%, #ffd0e4 47%, #ffffff 50%, #ffc2dc 53%, #fff 58%, #fff 100%); background-size: 320% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; animation: logoin 1.5s cubic-bezier(.16,.84,.26,1) both, sheen 7s 2s ease-in-out infinite; }
#intro .logo .w + .w { animation-delay: .14s, 2.2s; }
@keyframes logoin { from { opacity: 0; letter-spacing: .45em; filter: blur(14px); transform: translateY(18px) scale(1.04); } to { opacity: 1; letter-spacing: .06em; filter: blur(0); transform: none; } }
@keyframes sheen { 0% { background-position: 100% 0; } 26%, 100% { background-position: 0% 0; } }
#intro .press { position: absolute; left: 0; right: 0; bottom: calc(13vh + env(safe-area-inset-bottom)); text-align: center; font: 700 14px/1 var(--ui); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: rgba(255,255,255,.9); text-shadow: 0 0 14px rgba(0,0,0,.8); animation: pressin .9s 1.2s both, breathe 2.6s 2.1s ease-in-out infinite; }
@keyframes pressin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 50% { opacity: .5; } }
#intro.going .logo { transform: translateY(-50%) scale(1.12); opacity: 0; filter: blur(10px); }
#intro.going .press { opacity: 0; animation: none; transition: opacity .2s; }
#screens > #intro.on.going { opacity: 0; transition: opacity .55s .15s; }

/* ---------- the album: the songs, the one you're on, you and what you ride ---------- */
#menu { display: grid; box-sizing: border-box; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top top" "list detail" "list ride" "list gear" "list ." "foot ."; column-gap: clamp(24px, 4vw, 64px); row-gap: 14px; padding: calc(20px + env(safe-area-inset-top)) calc(5vw + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(5vw + env(safe-area-inset-left)); }
#menu .bg { position: absolute; inset: 0; overflow: hidden; }
#menu .bg img { position: absolute; left: -30px; top: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; opacity: 0; transition: opacity 1s; filter: blur(22px) brightness(.5) saturate(1.25); }
#menu .bg img.show { opacity: 1; }
#menu .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,5,13,.93) 0%, rgba(7,5,13,.78) 36%, rgba(7,5,13,.5) 100%), radial-gradient(ellipse 60% 80% at 75% 40%, color-mix(in srgb, var(--accent, #ff3d8b) 18%, transparent), transparent 70%); }
#menu > .top, #menu > .list, #menu > .detail, #menu > .ride, #menu > .gear, #menu > .foot { position: relative; z-index: 1; }
#menu .top { grid-area: top; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 30px; min-height: 40px; padding-right: 130px; }
#menu .brand { font: 22px/1 var(--display); letter-spacing: .14em; white-space: nowrap; text-shadow: 0 0 26px rgba(255,61,139,.55); }
#menu .me { display: flex; align-items: center; gap: 12px; font: 600 11px/1 var(--ui); letter-spacing: .2em; color: rgba(255,255,255,.75); white-space: nowrap; }
#menu .me .lv b { font: 17px/1 var(--display); letter-spacing: .02em; color: #fff; margin-left: 5px; }
#menu .me .xp { width: 130px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
#menu .me .xp i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent, #ff3d8b), #fff); box-shadow: 0 0 10px var(--accent, #ff3d8b); transition: width .6s; }
#menu .me .xpn { color: rgba(255,255,255,.5); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#screens #menu .me .pk { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,214,90,.7); background: rgba(255,214,90,.12); color: #ffe27a; font: 700 10px/1 var(--ui); letter-spacing: .2em; box-shadow: 0 0 16px rgba(255,214,90,.35); animation: pickpulse 1.6s ease-in-out infinite; }
@keyframes pickpulse { 50% { box-shadow: 0 0 26px rgba(255,214,90,.75); } }

#menu .list { grid-area: list; list-style: none; margin: 0; padding: 2px 6px 2px 0; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; scroll-padding-block: 44px; }
#menu .list::-webkit-scrollbar { display: none; }
#menu .list.more-down { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); }
#menu .list.more-up { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 44px), transparent); }
#menu .list.more-up.more-down { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
#menu .list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 26px; align-items: center; gap: 10px; padding: clamp(7px, 1.05vh, 11px) 12px; border-radius: 10px; cursor: pointer; color: rgba(255,255,255,.5); transition: background .15s, color .15s, box-shadow .15s; }
#menu .list li .num { font: 600 11px/1 var(--ui); letter-spacing: .06em; opacity: .6; font-variant-numeric: tabular-nums; }
#menu .list li .title { font: 600 clamp(12px, 1.6vh, 15px)/1.25 var(--ui); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu .list li.long .title { letter-spacing: .06em; }
#menu .list li .grade { font: 14px/1 var(--display); text-align: center; color: rgba(255,255,255,.75); }
#menu .list li .grade.gS { color: var(--gold); text-shadow: 0 0 10px rgba(255,214,90,.85); }
#menu .list li .grade.gA { color: #fff; }
#menu .list li:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.04); }
#menu .list li.sel { color: #fff; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(255,255,255,.03) 80%); box-shadow: inset 3px 0 0 var(--accent); }
#menu .list li.sel .num { opacity: 1; }

#menu .detail { grid-area: detail; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
#menu .detail .pic { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: min(52vh, calc(100vh - 430px)); flex: 0 1 auto; border-radius: 14px; overflow: hidden; background: #0c0a12; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 50px -14px var(--accent); transition: box-shadow .6s; }
#menu .detail .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .55s, transform 6s ease-out; }
#menu .detail .pic img.show { opacity: 1; transform: scale(1); }
#menu .detail .pic .num { position: absolute; left: 18px; bottom: 12px; font: clamp(38px, 5.6vw, 76px)/1 var(--display); color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.7); opacity: .95; }
#menu .detail .info { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
#menu .detail .name { font: clamp(20px, 2.5vw, 36px)/1.04 var(--display); letter-spacing: .015em; text-transform: uppercase; text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); }
#menu .detail .name.long { font-size: clamp(16px, 1.85vw, 27px); }
#menu .detail .profile { display: block; width: 100%; height: 46px; }
#menu .detail .facts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; font: 600 11px/1.2 var(--ui); letter-spacing: .18em; color: rgba(255,255,255,.65); }
#menu .detail .facts i { font-style: normal; opacity: .45; margin: 0 9px; }
#menu .detail .facts .b b { font: 15px/1 var(--display); letter-spacing: .02em; color: #fff; margin-left: 6px; font-variant-numeric: tabular-nums; }
#menu .detail .facts .g { margin-left: auto; font: 24px/1 var(--display); color: #fff; }
#menu .detail .facts .g.gS { color: var(--gold); text-shadow: 0 0 16px rgba(255,214,90,.9); }

#screens #menu .ride { grid-area: ride; display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 22px; border-radius: 12px; border: 0; background: linear-gradient(95deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); color: #12081a; font: 22px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 32px -10px var(--accent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .12s, filter .12s; min-width: 0; }
#screens #menu .ride .go { flex: 0 0 auto; }
#screens #menu .ride .what { font: 700 11px/1 var(--ui); letter-spacing: .18em; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#screens #menu .ride .k { margin-left: auto; font: 700 10px/1 var(--ui); letter-spacing: .2em; opacity: .55; }
#screens #menu .ride:hover { filter: brightness(1.08); transform: translateY(-1px); }
#screens #menu .ride:active { transform: translateY(1px); filter: brightness(.95); }

#menu .gear { grid-area: gear; min-width: 0; }
#menu .gear .btns { display: none; }
#menu .gear .strips { display: flex; flex-direction: column; gap: 8px; }
#menu .gear .row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
#menu .gear .lbl { display: flex; flex-direction: column; gap: 6px; font: 700 10px/1 var(--ui); letter-spacing: .28em; color: rgba(255,255,255,.5); }
#menu .gear .lbl .nm { font: 13px/1.1 var(--display); letter-spacing: .03em; color: #fff; text-transform: uppercase; }
#menu .gear .strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 5px 3px; }
#menu .gear .strip::-webkit-scrollbar { display: none; }

/* a rider or a board */
#screens #menu .card { position: relative; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #0c0a12; overflow: hidden; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .15s; }
#menu .card .pic { position: absolute; inset: 0; background: #0c0a12 50% 22%/cover no-repeat; }
#menu .card.board .pic { background-position: 50% 50%; }
#menu .card .pic:not([style]) { background: radial-gradient(ellipse 36% 10% at 50% 52%, #ffffff 0 55%, rgba(95,242,255,.95) 72%, rgba(95,242,255,0) 100%), linear-gradient(100deg, rgba(95,242,255,0) 12%, rgba(95,242,255,.32) 46%, rgba(95,242,255,0) 54%), #0c0a12; }
#menu .card .nm { display: none; }
#menu .card .lk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#menu .card .lk svg { width: 18px; height: 18px; color: rgba(255,255,255,.7); filter: drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
#menu .card.shut .pic { filter: grayscale(1) brightness(.32); }
#menu .card.pick .pic { filter: grayscale(.6) brightness(.5); }
#menu .card.pick .lk { font: 700 10px/1 var(--ui); letter-spacing: .16em; color: #ffe27a; text-shadow: 0 0 10px rgba(255,214,90,.9), 0 1px 3px #000; }
#screens #menu .card.pick { border-color: rgba(255,214,90,.6); animation: pickpulse 1.6s ease-in-out infinite; }
#screens #menu .card.cur { border-color: var(--bc); box-shadow: 0 0 0 2px var(--bc), 0 0 22px -2px var(--bc); }
#screens #menu .card:hover, #screens #menu .card.foc { transform: translateY(-2px); border-color: rgba(255,255,255,.6); }
#screens #menu .card.cur:hover, #screens #menu .card.cur.foc { border-color: var(--bc); }
#screens #menu .card.won { animation: won .9s ease-out; }
#screens #menu .card.took { animation: took .35s ease-out; }
#screens #menu .card.no { animation: no .35s; }
@keyframes won { 0% { box-shadow: 0 0 0 rgba(255,214,90,0); } 25% { box-shadow: 0 0 44px rgba(255,214,90,.95); filter: brightness(1.6); } 100% { box-shadow: 0 0 0 rgba(255,214,90,0); } }
@keyframes took { 40% { transform: scale(1.12); filter: brightness(1.4); } }
@keyframes no { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* on a phone: two buttons, each showing who or what, that open the locker */
#screens #menu .pickbtn { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 7px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); text-align: left; min-width: 0; text-transform: none; }
#menu .pickbtn .pic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px; background: #0c0a12 50% 22%/cover no-repeat; }
#menu .pickbtn.board .pic { background-position: 50% 50%; }
#menu .pickbtn .pic:not([style]) { background: radial-gradient(ellipse 36% 10% at 50% 52%, #ffffff 0 55%, rgba(95,242,255,.95) 72%, rgba(95,242,255,0) 100%), #0c0a12; }
#menu .pickbtn .t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#menu .pickbtn .l { font: 700 9px/1 var(--ui); letter-spacing: .28em; color: rgba(255,255,255,.5); }
#menu .pickbtn .n { font: 13px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu .pickbtn .hot { position: absolute; right: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 10px #ffd65a; }

#menu .foot { grid-area: foot; align-self: end; font: 600 10px/1.5 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); }
#menu .foot b { color: rgba(255,255,255,.85); font-weight: 700; }
#menu.locked > .list, #menu.locked > .foot, #menu.locked > .detail, #menu.locked > .ride, #menu.locked > .gear { opacity: .15; pointer-events: none; transition: opacity .25s; }
#screens > #menu.on.arriving, #menu.arriving * { pointer-events: none; }

/* the locker: every rider and board */
#menu .locker { position: absolute; z-index: 5; right: calc(5vw + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%) translateX(30px); width: min(720px, 58vw); max-height: 84vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; background: rgba(12,7,20,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 20px 22px 18px; box-sizing: border-box; box-shadow: 0 30px 90px rgba(0,0,0,.65); }
#menu .locker.on { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
#menu .locker .lhead { display: flex; align-items: center; gap: 16px; font: 14px/1 var(--display); letter-spacing: .2em; margin-bottom: 14px; }
#menu .locker .lhead.sub { margin: 20px 0 12px; }
#menu .locker .lp { font: 700 10px/1 var(--ui); letter-spacing: .24em; color: #ffe27a; text-shadow: 0 0 10px rgba(255,214,90,.6); }
#screens #menu .locker .x { margin-left: auto; width: 34px; height: 34px; padding: 0; border-radius: 50%; font: 400 22px/1 var(--ui); letter-spacing: 0; }
#menu .locker .grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
#menu .locker .riders { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#screens #menu .locker .card { width: auto; height: auto; aspect-ratio: 3 / 4; }
#screens #menu .locker .grid.boards .card { aspect-ratio: 4 / 3; }
#menu .locker .card .nm { display: block; position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 9px 8px; font: 700 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: #fff; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.8)); }
#menu .locker .card .lk { align-items: flex-start; justify-content: flex-end; padding: 8px; }
#menu .locker .foot { margin-top: 16px; font: 600 10px/1.5 var(--ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); }
#menu .locker .foot b { color: rgba(255,255,255,.85); }
#menu .locker::-webkit-scrollbar { display: none; }
body.touch #menu .list li { padding-top: 11px; padding-bottom: 11px; }

/* a phone upright: the song you're on at the top, you, the list, RIDE under your thumb */
@media (orientation: portrait) and (max-width: 700px) {
  #menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "detail" "gear" "list" "ride"; row-gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom)); }
  #menu .shade { background: linear-gradient(180deg, rgba(7,5,13,.75) 0%, rgba(7,5,13,.88) 45%, rgba(7,5,13,.95) 100%); }
  #menu .top { gap: 8px 16px; padding-right: 0; }
  #menu .brand { font-size: 17px; }
  #menu .me { width: 100%; gap: 10px; font-size: 10px; margin-top: 8px; }   /* (clear of the site's home link, top right) */
  #menu .me .xp { flex: 1; width: auto; }
  #menu .detail { gap: 9px; }
  #menu .detail .pic { max-height: 24vh; border-radius: 12px; }
  #menu .detail .pic .num { font-size: 40px; left: 12px; bottom: 8px; }
  #menu .detail .name { font-size: 21px; }
  #menu .detail .name.long { font-size: 16px; }
  #menu .detail .profile { height: 30px; }
  #menu .detail .facts { font-size: 10px; letter-spacing: .14em; gap: 4px 14px; }
  #menu .detail .facts i { margin: 0 6px; }
  #menu .gear .strips { display: none; }
  #menu .gear .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #menu .list li { grid-template-columns: 26px minmax(0, 1fr) 22px; padding: 11px 10px; }
  #menu .list li .title { font-size: 13px; letter-spacing: .08em; }
  #screens #menu .ride { height: 54px; font-size: 20px; }
  #screens #menu .ride .k { display: none; }
  #menu .foot { display: none; }
  #menu .locker, #menu .locker.on { left: 10px; right: 10px; width: auto; top: calc(10px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom)); max-height: none; transform: none; padding: 16px 14px; }
  #menu .locker .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #menu .locker .grid.boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #intro .logo { flex-direction: column; top: 44%; font-size: clamp(44px, 15.5vw, 96px); letter-spacing: .04em; }
  #intro .press { font-size: 14px; letter-spacing: .42em; }
}
/* a phone on its side: the list beside the song you're on, you as two buttons */
@media (max-height: 520px) {
  #menu { grid-template-columns: minmax(230px, 40%) minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); grid-template-areas: "top top" "list detail" "list ride" "list gear" "list ."; row-gap: 10px; padding: calc(10px + env(safe-area-inset-top)) calc(3vw + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(3vw + env(safe-area-inset-left)); }
  #menu .top { min-height: 30px; padding-right: 120px; }
  #menu .brand { font-size: 16px; }
  #menu .detail { flex-direction: row; align-items: flex-start; gap: 14px; }
  #menu .detail .pic { width: 46%; max-height: none; flex: 0 0 auto; border-radius: 10px; }
  #menu .detail .pic .num { font-size: 32px; left: 10px; bottom: 6px; }
  #menu .detail .info { flex: 1; gap: 7px; }
  #menu .detail .name { font-size: 17px; }
  #menu .detail .name.long { font-size: 14px; }
  #menu .detail .profile { height: 28px; }
  #menu .detail .facts { font-size: 9px; letter-spacing: .12em; }
  #menu .gear .strips { display: none; }
  #menu .gear .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #screens #menu .pickbtn { padding: 5px 10px 5px 5px; }
  #menu .pickbtn .pic { width: 34px; height: 34px; }
  #screens #menu .ride { height: 44px; font-size: 18px; }
  #menu .foot { display: none; }
  #menu .list li { padding: 8px 10px; }
  #menu .locker, #menu .locker.on { top: 8px; bottom: 8px; max-height: none; transform: none; right: calc(3vw + env(safe-area-inset-right)); width: min(640px, 70vw); padding: 14px 18px 12px; }
  #menu .locker .lhead { margin-bottom: 10px; }
  #menu .locker .lhead.sub { margin: 12px 0 8px; }
  #intro .logo { font-size: clamp(40px, 11vh, 80px); }
  #intro .press { bottom: calc(9vh + env(safe-area-inset-bottom)); }
}

/* ---------- the start line, the loading card, pause, the end: the same type and colour as the album ---------- */
#title { bottom: 0; padding: 70px 22px calc(9vh + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(7,5,13,.82) 0%, rgba(7,5,13,.55) 50%, rgba(7,5,13,0) 100%); }
#title .name { font: 700 11px/1 var(--ui); letter-spacing: .5em; padding-left: .5em; opacity: .7; }
#title .pick { margin-top: 14px; flex-direction: column; gap: 8px; text-transform: uppercase; }
#title .num { font: 700 12px/1 var(--ui); letter-spacing: .2em; opacity: .55; }
#title .song { font: clamp(26px, 4.2vw, 56px)/1.02 var(--display); letter-spacing: .01em; opacity: 1; min-width: 0; max-width: 92vw; text-shadow: 0 0 34px rgba(255,61,139,.35), 0 2px 12px rgba(0,0,0,.6); }
#title .best { margin-top: 12px; font: 700 11px/1 var(--ui); letter-spacing: .24em; opacity: .65; }
#title .best b { font: 14px/1 var(--display); letter-spacing: .02em; margin-left: 6px; }
#title .hint { margin-top: 22px; font: 600 12px/1.5 var(--ui); letter-spacing: .14em; opacity: .78; }
#title .back { margin-top: 10px; font: 600 10px/1.5 var(--ui); letter-spacing: .22em; opacity: .45; }

#load { background: #07050d; }
#load .img { filter: brightness(.62) saturate(1.1); transform: scale(1.08); animation: loadzoom 9s ease-out forwards; }
@keyframes loadzoom { to { transform: scale(1); } }
#load .shade { background: linear-gradient(0deg, rgba(7,5,13,.94) 0%, rgba(7,5,13,.45) 42%, rgba(7,5,13,.12) 100%); }
#load .box { left: 7vw; bottom: 14vh; width: min(640px, 84vw); }
#load .name { font: clamp(28px, 4.4vw, 60px)/1.02 var(--display); letter-spacing: .01em; text-transform: uppercase; margin-bottom: 22px; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
#load .name .n { display: block; font: 700 12px/1 var(--ui); letter-spacing: .3em; opacity: .7; margin-bottom: 12px; }
#load .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
#load .bar i { border-radius: 2px; background: var(--accent, #fff); box-shadow: 0 0 14px var(--accent, #fff); }

#end .card, #pause .card { border-left: 0; border-radius: 18px; background: rgba(12,7,20,.8); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 2px 0 var(--accent, rgba(255,255,255,.5)); }
#end .song, #pause .song { font: 700 12px/1.3 var(--ui); letter-spacing: .3em; }
#pause .song { font: 22px/1 var(--display); letter-spacing: .3em; padding-left: .3em; }
#end .grade { font: 96px/.9 var(--display); width: 90px; }
#end .pts .n { font: 48px/1 var(--display); letter-spacing: .01em; }
#end .pts .sub { font: 700 11px/1.2 var(--ui); letter-spacing: .24em; }
#end .row { font: 600 13px/1.2 var(--ui); letter-spacing: .14em; }
#end .row span:last-child { font-weight: 700; }
#end .level .lt { font: 700 11px/1 var(--ui); letter-spacing: .24em; }
#end .level .lt b { font: 15px/1 var(--display); letter-spacing: .02em; }
#end .level .lbar { height: 5px; border-radius: 3px; }
#screens button { font: 700 12px/1 var(--ui); letter-spacing: .18em; border-radius: 10px; }
#screens button.primary { background: var(--accent, #fff); border-color: transparent; color: #12081a; }
#screens button.primary .k { opacity: .55; }
#screens button.focus { background: rgba(255,255,255,.16); border-color: #fff; }
#screens button.primary.focus { background: var(--accent, #fff); box-shadow: 0 0 0 2px #fff, 0 10px 30px -8px var(--accent, #fff); }
@media (orientation: portrait) and (max-width: 700px) {
  #end .card { border-radius: 18px 18px 0 0; border-bottom: 0; }
  #end .grade { font-size: 72px; width: 68px; }
  #end .pts .n { font-size: 38px; }
  #title { padding-bottom: calc(7vh + env(safe-area-inset-bottom)); }
  /* the song's shape and the score share the top: the bar narrower, the score a size down */
  #songbar { width: 40vw; }
  #score { font-size: 21px; right: calc(16px + env(safe-area-inset-right)); top: calc(17px + env(safe-area-inset-top)); }
}
@media (max-height: 520px) {
  #end .grade { font-size: 56px; width: 56px; }
  #end .pts .n { font-size: 32px; }
  #title { padding-top: 40px; padding-bottom: calc(5vh + env(safe-area-inset-bottom)); }
  #title .song { font-size: clamp(22px, 7vh, 40px); }
  #load .box { bottom: 10vh; }
}