@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--navy:#090e23;--pink:#ff7b9a;--aqua:#59e4d6;--gold:#ffdc83}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 40%,#182039 0,transparent 50%),var(--navy);color:#f4f4fa;font-family:Outfit,'Noto Sans JP',sans-serif}.shell{max-width:1240px;margin:auto;padding:24px 40px 18px}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:16px;letter-spacing:2px;font-weight:800;color:inherit;text-decoration:none}.brand-icon{display:grid;place-items:center;width:33px;height:33px;border:1px solid var(--pink);border-radius:9px;color:var(--pink);font-size:21px;box-shadow:0 0 20px #ff7b9a13}.edition{font-size:9px;font-weight:500;color:#7b829e;letter-spacing:2px;margin-left:13px}.sound{border:1px solid #34394f;border-radius:24px;background:#151a2e;color:#d6daea;padding:10px 16px;font-size:11px;cursor:pointer}.headline{display:flex;justify-content:space-between;align-items:center;margin:28px 0 21px}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#aab1c6;font-weight:600}.eyebrow>span{display:inline-block;background:var(--aqua);width:6px;height:6px;border-radius:50%;margin-right:8px;box-shadow:0 0 10px var(--aqua)}h1{font-size:25px;letter-spacing:1px;margin:10px 0 0;font-weight:700}em{font-style:normal;color:var(--pink)}.best{display:flex;align-items:center;gap:13px;font-size:10px;color:#b2b8ce}.best span{color:var(--gold);font-size:26px;font-weight:700}.best small{font-size:8px;letter-spacing:1px;color:#858aa4}.arena{height:min(590px,65vh);min-height:440px;position:relative;overflow:hidden;border:1px solid #42455f;border-radius:20px;background:#101629;box-shadow:0 20px 90px #0004,0 0 40px #ff7b9a07;transition:border-color .5s,box-shadow .5s;touch-action:none;isolation:isolate}.arena.fever{border-color:var(--gold);box-shadow:0 0 45px #ffce6140}.arena>canvas{position:absolute;width:100%;height:100%}.hud{position:absolute;inset:23px 29px auto;display:flex;justify-content:space-between;z-index:2;pointer-events:none}.hud>div{min-width:100px}.hud small{font-size:10px;letter-spacing:2px;color:#adb3c8;display:block}.hud strong{font-size:35px;letter-spacing:1px;line-height:1.3;font-weight:600}.hud i{font-size:13px;font-style:normal;color:#909ab4}.timer{text-align:center}.timer strong{font-size:29px}.track{height:3px;border-radius:3px;background:#333951;width:110px;margin-top:6px;overflow:hidden}#gauge{background:var(--aqua);height:100%;width:100%;transition:width .1s}.combo{text-align:right}.combo strong{color:var(--pink)}.bar-sign{position:absolute;top:24%;left:50%;transform:translateX(-50%);color:#de829e28;white-space:nowrap;letter-spacing:8px;font-size:23px}.bar-sign span{font-size:13px}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:4;background:radial-gradient(ellipse at center,#101629c9 0%,#10162962 60%,transparent);animation:appear .35s ease-out}.title-card{text-align:center;padding-top:32px}.gold{color:var(--gold)!important}.logo{font-size:77px;font-weight:900;line-height:.9;letter-spacing:3px;text-shadow:0 5px 0 #a8426022;transform:rotate(-4deg);margin:22px 0 16px}.logo>span{display:block;color:var(--pink);font-size:87px;text-shadow:0 0 40px #ff7b9a35;position:relative}.spark{position:absolute;font-size:33px;color:var(--gold);top:14px;margin-left:4px}.title-card h2{font-size:13px;letter-spacing:8px;margin:14px 0 18px;color:var(--pink)}.intro{font-size:12px;line-height:1.95;color:#b9bfd2;margin:0 0 21px}.primary{display:flex;align-items:center;justify-content:center;gap:45px;margin:auto;border:0;border-radius:12px;padding:16px 30px;background:var(--pink);color:#251323;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 6px 0 #933e5c,0 0 32px #ff729338;transition:transform .15s,filter .15s}.primary span{font-size:24px;line-height:18px}.primary:hover{filter:brightness(1.13);transform:translateY(-2px)}.primary:active{transform:translateY(3px)}.controls{font-size:10px;color:#828da9;margin-top:23px}.controls span{margin:0 6px;color:#4c536c}.counter-label{position:absolute;bottom:19px;left:25px;right:25px;display:flex;justify-content:space-between;color:#9a8b9b;font-size:9px;letter-spacing:3px;pointer-events:none}.counter-label span{letter-spacing:4px}.menu{display:flex;align-items:center;margin-top:19px;padding:21px 23px;background:#151a2b;border:1px solid #2b3047;border-radius:14px;gap:25px}.menu-heading{min-width:93px;font-size:12px;line-height:1.9}.menu-heading small{display:block;font-size:8px;letter-spacing:2px;color:#707994}.menu-item{display:flex;align-items:center;gap:9px;flex:1;font-size:10px;color:#b8bfd1}.menu-item canvas{width:57px;height:47px}.menu-item strong{display:block;font-size:19px;color:#fff;margin-top:4px}.menu-item strong small{font-size:10px;font-weight:400}.tag{font-size:8px;color:var(--gold);border:1px solid #655837;padding:1px 4px;border-radius:4px}.green{color:#a4dc86!important}.combo-tip{border-left:1px solid #33394b;padding-left:24px;font-size:10px;line-height:2}.combo-tip b{display:block;font-weight:500;color:var(--aqua)}.combo-tip span{color:#7f8aa5;font-size:9px}footer{display:flex;justify-content:space-between;font-size:9px;color:#626d86;letter-spacing:1px;margin-top:20px}.hidden{display:none!important}#fever{position:absolute;top:110px;width:100%;text-align:center;color:var(--gold);font-size:12px;letter-spacing:2px;opacity:0;pointer-events:none}#fever b{margin-left:8px}.fever #fever{opacity:1;animation:pulse .5s infinite alternate}.fever .timer strong{color:var(--gold)}.fever #gauge{background:var(--gold)}#toast{position:absolute;top:32%;width:100%;text-align:center;font-size:26px;font-weight:900;color:var(--gold);text-shadow:0 3px 10px #000;pointer-events:none}.result-card{text-align:center;background:#11172aee;border:1px solid #494057;padding:27px 50px;border-radius:22px;box-shadow:0 10px 80px #0007}.result-card h2,.pause-card h2{font-size:32px;margin:9px;color:var(--pink)}.result-caption{font-size:11px;color:#9ba4be}.final-score{font-size:64px;font-weight:800;line-height:1.1;margin-top:18px}.points{font-size:9px;letter-spacing:4px;color:var(--gold);margin:8px}.stats{display:flex;gap:45px;margin:22px 0;font-size:10px;color:#9ba4be}.stats strong{display:block;font-size:27px;color:#fff;margin-top:7px}.stats small{font-size:12px}.pause-card{text-align:center}.pause-card .primary{margin-top:30px}.pause-button{position:absolute;bottom:60px;right:20px;border:1px solid #546079;color:#b9c8df;background:#141b30b0;border-radius:8px;width:36px;height:36px;cursor:pointer;z-index:3}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{to{filter:brightness(1.5)}}button:focus-visible{outline:3px solid var(--aqua);outline-offset:5px}
@media(max-width:700px){.shell{padding:15px 13px}.edition{display:none}.brand{font-size:12px;letter-spacing:1px}.sound{padding:8px 10px;font-size:10px}.headline{margin:20px 2px 16px}h1{font-size:17px;letter-spacing:0}.headline .eyebrow{font-size:8px;letter-spacing:1px}.best{display:block;text-align:right;font-size:8px}.best span{display:block;font-size:21px}.best small{display:none}.arena{height:62svh;min-height:430px;border-radius:15px}.hud{inset:18px 16px auto}.hud>div{min-width:68px}.hud strong{font-size:27px}.hud small{font-size:9px}.hud i{font-size:10px}.track{width:80px}.title-card{padding-top:43px}.logo{font-size:61px}.logo>span{font-size:69px}.intro{font-size:11px}.title-card .eyebrow{font-size:8px}.primary{padding:15px 26px}.controls{font-size:9px}.menu{gap:8px;padding:13px 8px;flex-wrap:wrap;margin-top:12px}.menu-heading{display:none}.menu-item{gap:1px;font-size:8px}.menu-item canvas{width:42px;height:40px}.menu-item strong{font-size:16px}.combo-tip{width:100%;text-align:center;border-left:0;border-top:1px solid #303549;padding:8px 0 0;line-height:1.5}.combo-tip b{display:inline;margin-right:9px}.combo-tip span{font-size:8px}footer{font-size:8px;margin-top:13px}footer span:last-child{display:none}.result-card{padding:25px 25px}.counter-label{font-size:7px;left:15px;right:15px}.result-card h2{font-size:28px}.final-score{font-size:57px}}
.arena:has(#title:not(.hidden)) .timer{visibility:hidden}

.player-panel,.weekly-ranking{margin:18px 0;padding:22px 26px;border:1px solid #34394f;border-radius:16px;background:#151a2b}.player-panel{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.player-panel b{font-size:14px;color:var(--aqua)}.player-panel p,.ranking-rules,#rankingStatus,#weekLabel,#myRank{font-size:12px;line-height:1.8;color:#b2bbcf;margin:6px 0}.player-panel .account-note{font-size:10px;color:#909bb6}.player-panel label{display:block;font-size:12px;margin-bottom:7px}.register-input{display:flex;gap:8px}.register-input input{min-width:0;width:180px;border:1px solid #64708b;border-radius:8px;background:#0c1226;color:#fff;padding:11px;font:inherit;font-size:14px}.secondary{border:1px solid #64708b;border-radius:8px;background:#232c44;color:#f2f5ff;padding:10px 16px;font:inherit;font-size:12px;cursor:pointer}.secondary:hover{border-color:var(--aqua)}button:disabled{opacity:.55;cursor:wait}.player-panel #registerStatus{width:100%;margin:0;color:var(--gold)}#playerWelcome{color:var(--aqua);font-weight:700;overflow-wrap:anywhere}#submitStatus{max-width:300px;font-size:11px;color:var(--gold);line-height:1.7}#retryScore{margin:0 0 14px}.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.ranking-heading h2{margin:5px 0;font-size:23px}.weekly-ranking table{width:100%;border-collapse:collapse;margin-top:15px;font-size:13px}.weekly-ranking th{color:#939fb9;font-size:11px;font-weight:500}.weekly-ranking th,.weekly-ranking td{padding:13px 9px;text-align:left;border-bottom:1px solid #30384f}.weekly-ranking td:nth-child(2){overflow-wrap:anywhere}.weekly-ranking th:last-child,.weekly-ranking td:last-child{text-align:right;white-space:nowrap}.weekly-ranking .my-rank{background:#59e4d614;color:var(--aqua)}#myRank{color:var(--gold)}.overlay{overflow-y:auto}.result-card{margin:12px 0}.arena:has(#result:not(.hidden)){min-height:580px}
@media(max-width:700px){.player-panel,.weekly-ranking{padding:16px}.player-panel{gap:10px}.player-panel form{width:100%}.register-input input{flex:1}.ranking-heading h2{font-size:20px}.weekly-ranking th,.weekly-ranking td{padding:12px 4px;font-size:11px}}