.tempo-game{--cyan:#38bdf8;--purple:#a855f7;--pink:#e879f9;color:#e2e8f0;box-sizing:border-box;background:linear-gradient(150deg,#1e293b,#131a32);border:1px solid #5a4785;border-radius:22px;width:100%;max-width:520px;margin:auto;padding:12px;overflow:hidden}.tempo-game [hidden]{display:none!important}.tempo-game button,.tempo-game a,.tempo-game summary{min-height:44px}.tempo-game button{font:inherit;color:inherit;cursor:pointer;background:#27223f;border:1px solid #69548b;border-radius:12px}.tempo-game button:disabled{opacity:.45;cursor:default}.tempo-game :is(button,a,input,summary):focus-visible{outline-offset:3px;outline:3px solid #38bdf8}.tempo-toolbar{justify-content:space-between;align-items:center;gap:5px;margin-bottom:10px;display:flex}.tempo-toolbar>span{color:#c4b5fd;letter-spacing:.12em;font-size:.64rem}.tempo-toolbar>div{gap:4px;display:flex}.tempo-toolbar .game-icon-button{width:44px;min-width:44px;height:44px;padding:9px}.tempo-game h2,.tempo-game h3,.tempo-game p{margin:0}.tempo-eyebrow{letter-spacing:.12em;color:#c4b5fd;font-size:.62rem;font-weight:800}.tempo-picker>h2{color:#fff;letter-spacing:-.04em;margin:7px 0;font-size:clamp(1.5rem,5vw,2.2rem)}.tempo-picker>p:not(.tempo-eyebrow){color:#b8c7df;font-size:.8rem;line-height:1.55}.tempo-tracks{gap:9px;margin:16px 0;display:grid}.tempo-track{background:linear-gradient(110deg,#182c46,#241b3d);border:1px solid #43366b;border-radius:14px;grid-template-columns:53px minmax(0,1fr) 62px;align-items:center;gap:10px;min-width:0;padding:12px 9px;display:grid}.tempo-track-1{background:linear-gradient(110deg,#30214e,#152639)}.tempo-track-2{background:linear-gradient(110deg,#2d1b4e,#25234d)}.tempo-track h3{font-size:.94rem}.tempo-track p{color:#c4b5fd;margin:4px 0;font-size:.67rem}.tempo-track small{color:#a4b7ce;font-size:.65rem}.tempo-track-art{color:#67e8f9;text-shadow:0 0 16px #38bdf8;background:radial-gradient(#38bdf833,#0000 65%);border-radius:10px;place-items:center;height:64px;font-size:2.6rem;display:grid;position:relative}.tempo-track-art small{color:#b8b1db;letter-spacing:.1em;position:absolute;bottom:0;right:3px}.tempo-track-1 .tempo-track-art{color:#e879f9;text-shadow:0 0 16px #c026d3}.tempo-track-2 .tempo-track-art{color:#c4b5fd}.tempo-track button,.tempo-game .tempo-primary{background:linear-gradient(110deg,#a855f7,#8927e8);border-color:#bd82f6;font-weight:750}.tempo-track button{font-size:.8rem}.tempo-hud{grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 7px;display:grid}.tempo-hud>div{background:#0c142bc9;border:1px solid #3b345a;border-radius:10px;padding:7px 8px}.tempo-hud dt{letter-spacing:.1em;color:#c4b5fd;font-size:.57rem}.tempo-hud dd{margin:3px 0 0;font-size:clamp(1rem,4vw,1.4rem);font-weight:800;line-height:1.1}.tempo-hud>div:nth-child(2) dd{color:#e879f9}.tempo-track-line{color:#b8c7df;justify-content:space-between;font-size:.65rem;display:flex}.tempo-game progress{accent-color:#a855f7;border:0;border-radius:9px;width:100%;height:5px;margin:6px 0 8px;display:block;overflow:hidden}.tempo-game progress::-webkit-progress-bar{background:#0f172a}.tempo-game progress::-webkit-progress-value{background:linear-gradient(90deg,#38bdf8,#c026d3)}.tempo-stage{aspect-ratio:3/4;background:#0b1229;border:1px solid #43366b;border-radius:12px;position:relative;overflow:hidden}.tempo-stage canvas{touch-action:pan-y;width:100%;height:100%;display:block}.tempo-judgement{text-align:center;color:#f0eaff;text-shadow:0 2px 8px #a855f7;pointer-events:none;font-size:clamp(1rem,6vw,1.8rem);font-style:italic;font-weight:900;position:absolute;top:57%;left:0;right:0}.tempo-overlay{text-align:center;overscroll-behavior:contain;background:#0a1028f5;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;display:flex;position:absolute;inset:0;overflow:auto}.tempo-overlay[data-phase=count-in]{pointer-events:none;background:#0b102b66}.tempo-overlay[data-phase=count-in] h2{color:#f0abfc;text-shadow:0 0 25px #9333ea;font-size:5rem}.tempo-overlay h2{color:#f5e9ff;font-size:clamp(1.5rem,5vw,2.4rem);font-style:italic;line-height:1.04}.tempo-overlay[data-full=true] h2{color:#fbbf24}.tempo-overlay>p:not(.tempo-eyebrow){color:#b8c7df;font-size:.78rem}.tempo-overlay>button{flex-shrink:0;width:100%}.tempo-overlay>a{color:#c4b5fd;flex-shrink:0;place-items:center;font-size:.8rem;display:grid}.tempo-summary{grid-template-columns:repeat(2,1fr);gap:8px;width:100%;margin:2px 0;display:grid}.tempo-summary>div{background:#18243e;border-radius:8px;padding:6px}.tempo-summary dt{letter-spacing:.03em;color:#bccce0;font-size:.57rem}.tempo-summary dd{margin:3px 0 0;font-size:.96rem;font-weight:800}.tempo-pads{touch-action:none;user-select:none;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:6px;display:grid}.tempo-pads button{touch-action:none;color:#67e8f9;background:linear-gradient(#172d4a,#102139);border:1px solid #38bdf8;flex-direction:column;justify-content:center;align-items:center;height:70px;display:flex}.tempo-pads button:nth-child(2){color:#f0abfc;background:linear-gradient(#3a2048,#241b39);border-color:#e879f9}.tempo-pads button:nth-child(3){color:#c4b5fd;background:linear-gradient(#29214b,#171d36);border-color:#a78bfa}.tempo-pads button span{font-size:1.8rem;line-height:1.1}.tempo-pads button small{opacity:.8;font-size:.61rem}.tempo-pads button[data-lit=true]{color:#0f172a;background:#e2e8f0}.tempo-status{color:#becce0;min-height:21px;font-size:.7rem;line-height:1.5;margin:9px 0!important}.tempo-help{font-size:.73rem!important}.tempo-settings{border-top:1px solid #45506a;font-size:.75rem}.tempo-settings summary{cursor:pointer;color:#c4b5fd;align-items:center;font-weight:650;display:flex}.tempo-settings label{margin:10px 0;font-weight:650;display:block}.tempo-settings output{float:right;color:#67e8f9}.tempo-settings input{accent-color:#a855f7;width:100%;min-height:44px}.tempo-settings p{color:#b8c7df;font-size:.7rem;line-height:1.55}.tempo-secondary{width:100%;padding:9px}.tempo-game[data-phase=playing] .tempo-settings,.tempo-game[data-phase=count-in] .tempo-settings{display:none}@media (width<=360px){.tempo-toolbar{flex-wrap:wrap}.tempo-toolbar>span{width:100%;font-size:.55rem}.tempo-toolbar>div{justify-content:flex-end;width:100%}.tempo-game{padding:9px}.tempo-track{grid-template-columns:35px minmax(0,1fr) 49px;gap:7px}.tempo-track h3{font-size:.81rem}.tempo-track-art{font-size:2rem}.tempo-track button{font-size:.7rem}}.game-viewport.is-expanded:has(.tempo-game){justify-content:center;align-items:stretch;display:flex}.game-viewport.is-expanded .tempo-game{max-width:700px;min-height:100%;padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));border:0;border-radius:0;flex-direction:column;display:flex}.game-viewport.is-expanded [data-nt-arena]:not([hidden]){flex-direction:column;flex:1;min-height:0;display:flex}.game-viewport.is-expanded .tempo-stage{aspect-ratio:auto;flex:1;min-height:120px}.game-viewport.is-expanded .tempo-stage canvas{object-fit:contain}.game-viewport.is-expanded .tempo-picker{margin:auto 0}.game-viewport.is-expanded .tempo-status{flex-shrink:0}.game-viewport.is-expanded .tempo-summary{gap:4px}.game-viewport.is-expanded .tempo-overlay{gap:6px;padding:10px}.game-viewport.is-expanded .tempo-settings{flex-shrink:0}@media (height<=600px){.game-viewport.is-expanded .tempo-toolbar{flex-wrap:nowrap;margin-bottom:4px}.game-viewport.is-expanded .tempo-toolbar>span{display:none}.game-viewport.is-expanded .tempo-toolbar>div{justify-content:flex-end;width:100%}.game-viewport.is-expanded .tempo-hud>div{padding:4px 7px}.game-viewport.is-expanded .tempo-pads button{height:50px}.game-viewport.is-expanded .tempo-status{font-size:.62rem;margin:4px 0!important}.game-viewport.is-expanded .tempo-track{padding:5px 8px}.game-viewport.is-expanded .tempo-tracks{gap:5px;margin:8px 0}.game-viewport.is-expanded .tempo-picker>h2{font-size:1.4rem}}@media (prefers-reduced-motion:reduce){.tempo-game *{transition:none!important;animation:none!important}}.tempo-overlay{justify-content:safe center}.tempo-overlay>*{flex-shrink:0}.tempo-game:not([data-phase=ready]) .tempo-stage{aspect-ratio:auto;height:min(560px,max(200px,100svh - 290px))}.tempo-stage canvas{object-fit:contain}.game-viewport.is-expanded .tempo-game:not([data-phase=ready]) .tempo-stage{height:auto}.tempo-overlay[data-phase=results]{justify-content:flex-start}