*{box-sizing:border-box}html,body{margin:0;background:#050911;color:#e7f7ff;font-family:Inter,"Segoe UI",Arial,sans-serif;height:100%;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}#shell{height:100%;position:relative;isolation:isolate}canvas{width:100%;height:100%;display:block}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse,transparent 40%,#03061190)}header{position:absolute;top:0;left:0;right:0;padding:28px 36px;display:flex;align-items:center;gap:18px;background:linear-gradient(#060d19dd,transparent)}.brand{font-size:25px;font-weight:900;letter-spacing:3px}.brand span{color:#63f4e6}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#758eaa;margin-top:6px}.stats{display:flex;gap:40px;margin:auto}.stats small{display:block;color:#8395ae;font-size:10px;letter-spacing:2px;margin-bottom:5px}.stats strong{font-size:23px;font-variant-numeric:tabular-nums}#hp{color:#63f4e6}.icon{border:1px solid #31445a;background:#0c1728b0;padding:10px;font-size:10px;border-radius:5px}footer{position:absolute;bottom:25px;left:36px;right:36px;display:flex;align-items:center;gap:40px}.echo{width:290px;max-width:35vw}.echo>div:first-child{display:flex;justify-content:space-between;gap:12px}.echo b{font-size:12px;letter-spacing:1px;color:#63f4e6}.echo span{font-size:11px;color:#8ea3bb}.track{height:5px;background:#23334b;margin-top:12px;border-radius:4px;overflow:hidden}.track i{display:block;height:100%;background:#63f4e6;width:0;box-shadow:0 0 12px #63f4e6}.keys{display:flex;gap:20px;font-size:11px;color:#9aacc1}kbd{border:1px solid #42566f;padding:5px 7px;margin-right:5px;border-radius:3px;font-size:10px;color:white}.course{margin-left:auto;font-size:10px;letter-spacing:2px;color:#7d93ad}.course b{color:#63f4e6}.course small{display:block;letter-spacing:0;margin-top:7px}#overlay{position:absolute;inset:0;background:#03081494;display:grid;place-items:center;backdrop-filter:blur(6px)}#overlay.hidden{display:none}#panel{width:min(590px,90vw);padding:35px;border:1px solid #3b677957;border-radius:14px;background:linear-gradient(145deg,#112132ee,#080e1bee);box-shadow:0 25px 100px #0007}#panel .eyebrow{font-size:10px;letter-spacing:4px;color:#63f4e6}h1{font-size:clamp(45px,8vw,76px);line-height:1;margin:16px 0;letter-spacing:-4px}h1 span{color:#63f4e6}h2{font-size:32px;margin:16px 0}p{font-size:14px;line-height:1.8;color:#a4b8cc}.brief{display:flex;gap:10px;margin:25px 0}.brief div{flex:1;border-left:2px solid #3b696c;padding:0 12px;font-size:12px;color:#afc0cf}.brief b{display:block;color:#e6f9ff;margin-bottom:7px}.primary{width:100%;border:0;background:#63f4e6;color:#061319;padding:16px;font-weight:800;letter-spacing:1px;border-radius:5px}.secondary{background:transparent;border:1px solid #40556a;padding:11px;border-radius:5px;margin-top:12px;width:100%;font-size:12px}.note{font-size:11px;color:#778ca5;margin-top:14px;line-height:1.7}input{background:#080f1b;border:1px solid #3c526b;border-radius:4px;color:white;padding:10px;width:100%;margin-bottom:14px}.bigscore{font-size:48px;color:#63f4e6;font-weight:800}.rank{font-size:12px;display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #23344a}#callout{position:absolute;top:22%;left:0;right:0;text-align:center;pointer-events:none;font-size:19px;letter-spacing:3px;color:#63f4e6;text-shadow:0 0 25px #63f4e6;transition:opacity .2s}.touch{display:none;position:absolute;bottom:100px;left:24px;right:24px;justify-content:space-between;pointer-events:none}.touch button{pointer-events:auto;background:#10243fcc;border:1px solid #63f4e677;border-radius:50%;width:76px;height:76px;font-size:13px;font-weight:700;touch-action:none}body.playing #overlay{backdrop-filter:blur(6px)}@media(max-width:800px){header{padding:15px;gap:8px}.brand{font-size:17px}.brand small{font-size:7px}.stats{gap:15px}.stats strong{font-size:16px}.stats small{font-size:8px;letter-spacing:1px}.icon{padding:8px;font-size:8px}footer{left:16px;right:16px;bottom:20px;gap:15px}.keys{display:none}.echo{max-width:60vw;width:280px}.course{font-size:8px}.brief{margin:16px 0}#panel{padding:25px}p{font-size:12px}.note{font-size:10px}}@media(pointer:coarse){.touch{display:flex}}@media(max-height:530px){header{padding:10px 20px}footer{bottom:12px}#panel{padding:18px;max-height:95vh;overflow:auto}h1{font-size:45px;margin:10px 0}.brief{margin:12px 0}p{margin:8px 0}.touch{bottom:70px}.primary{padding:12px}}
/* Chronobreak console: brass, holographic rings and violet glitch edges. */
:root{--chrono:#77f5dc;--brass:#f5d369;--violet:#a486ff}.brand span{color:var(--brass)}.brand{position:relative;text-shadow:2px 0 #967afc55,-2px 0 #62efdc55}.brand:before{content:'';position:absolute;left:-16px;top:-10px;width:12px;height:50px;border-left:2px solid var(--brass);border-top:2px solid var(--brass);transform:skewY(-15deg)}header{padding-left:45px;border-top:3px solid #f5d36977}.stats{gap:32px}.stats>div{border-left:1px solid #8d7dc344;padding-left:18px}.stats strong{font-family:Consolas,monospace}.stats em{font-size:10px;color:#7a9baf;font-style:normal}.stats small{color:#a399bd}.speedstat strong{color:var(--brass)}.echo{position:relative;padding:15px 16px 14px 62px;max-width:none;width:360px;background:linear-gradient(100deg,#141b2eea,#10152ccc);border:1px solid #8272c16b;border-left:3px solid var(--brass);clip-path:polygon(0 0,95% 0,100% 25%,100% 100%,5% 100%,0 75%)}.echo:before{content:'↶';position:absolute;left:14px;top:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--brass);box-shadow:0 0 12px #b98aff44;color:var(--brass);font-size:24px}.echo b{color:var(--brass);font-size:11px}.track{background:#2c2350}.track i{background:linear-gradient(90deg,#9980f7,#67f3d9);box-shadow:0 0 15px #9e82ff}.primary{background:linear-gradient(110deg,#f5d369,#b4ecd1);border-radius:2px;clip-path:polygon(0 0,97% 0,100% 25%,100% 100%,3% 100%,0 75%)}#panel{border:1px solid #8872c380;border-top:3px solid var(--brass);border-radius:3px;background:linear-gradient(145deg,#1b1b32f5,#080e1bf5)}#panel .eyebrow{color:var(--brass)}h1 span{color:var(--brass)}.bigscore{color:var(--brass)}#panel:before{content:'◴';float:right;font-size:55px;color:#8f79ed55;line-height:1}#vignette{background:linear-gradient(90deg,#08051445,transparent 20%),radial-gradient(ellipse,transparent 45%,#07041888)}.icon{border-color:#5b4d75}.course b{color:var(--brass)}@media(max-width:1000px){.stats{gap:12px}.stats>div{padding-left:10px}.echo{width:320px}.keys{gap:12px;font-size:10px}}@media(max-width:800px){.speedstat{display:none}header{padding-left:25px}.echo{width:280px;padding:12px 12px 12px 53px}.echo:before{left:10px;width:28px;height:28px;font-size:21px}.echo b{font-size:9px}.echo span{font-size:10px}.stats{gap:9px}.stats>div{padding-left:7px}}@media(max-width:430px){.stats>div:nth-child(2){display:none}.brand{font-size:16px}.course{display:none}.echo{width:100%}}
@media(max-width:430px){#sound{font-size:0;width:28px;height:30px;padding:4px}#sound:after{content:'♪';font-size:14px}.brand small{letter-spacing:1px;font-size:6px}.stats strong{font-size:14px}.stats{gap:6px}.stats small{font-size:7px}.icon{padding:7px}}

#panel{max-height:90vh;overflow-y:auto}.leaderEntries{max-height:44vh;overflow-y:auto;font-size:13px;color:#aac1d3;min-height:90px}.leaderEntries .rank{gap:20px}.leaderEntries small{display:block;font-size:10px;color:#7b93a9;margin:4px 0 0 25px}.leaderEntries strong{color:#f5d369;font-family:Consolas,monospace}button:disabled{opacity:.55;cursor:default}#onlineStatus{min-height:18px;margin-bottom:10px}#again{margin-top:12px}