:root{--ink:#21163d;--purple:#7657e8;--pink:#ff668a;--yellow:#ffd75a;--mint:#58d5b0;--blue:#55b9ee;--paper:#fffdf8;--lane-count:8}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:"Noto Sans TC",sans-serif;background:radial-gradient(circle at 12% 5%,#fff7d3 0 9%,transparent 22%),radial-gradient(circle at 92% 15%,#e9ddff 0 8%,transparent 20%),#f7f0ff;overflow-x:hidden}
body:before,body:after{content:"";position:fixed;border:3px solid rgba(118,87,232,.11);border-radius:50%;z-index:-1}body:before{width:360px;height:360px;left:-170px;bottom:-110px}body:after{width:240px;height:240px;right:-100px;top:37%}
button{font:inherit}.app-shell{width:min(1420px,96vw);margin:auto;padding:20px 0 38px}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}.brand-mark{display:grid;place-items:center;width:47px;height:47px;color:white;font-size:27px;background:var(--purple);border-radius:15px 15px 15px 5px;transform:rotate(-3deg);box-shadow:0 7px 0 #5940bd}.brand b{display:block;font-size:22px;letter-spacing:1px}.brand small{font:700 10px "Baloo 2";letter-spacing:2.5px;color:#806ba6}.header-actions{display:flex;gap:10px}.icon-btn,.how-btn{border:0;background:white;color:var(--ink);height:42px;border-radius:14px;font-weight:900;box-shadow:0 4px 15px #69549018;cursor:pointer}.icon-btn{width:42px;color:var(--purple);font-size:21px}.how-btn{padding:0 18px}.how-btn span{display:inline-grid;place-items:center;background:#eee8ff;color:var(--purple);width:23px;height:23px;border-radius:50%;margin-right:5px}
.hero-copy{display:flex;align-items:flex-end;justify-content:space-between;padding:22px 15px 26px}.eyebrow{margin:0;color:#7f7294;font-weight:800;font-size:14px}.hero-copy h1{font-size:clamp(30px,4vw,49px);margin:3px 0 0;letter-spacing:-2px}.hero-copy h1 em{font-style:normal;color:var(--purple)}.stats{display:flex;align-items:center;gap:26px}.stats>div:not(.stars){border-left:2px solid #ddd1ed;padding-left:20px}.stats span{display:block;font:800 10px "Baloo 2";letter-spacing:1.2px;color:#9286a5}.stats strong{font:800 28px "Baloo 2"}.stats div:first-child strong{color:var(--purple)}.stars{color:#e9b825;font-size:28px;letter-spacing:4px}
.game-card{min-height:650px;display:grid;grid-template-columns:285px 1fr;background:rgba(255,255,255,.83);border:1px solid #fff;border-radius:30px;overflow:hidden;box-shadow:0 24px 60px #4e366b20}.song-panel{background:#21153c;color:white;padding:27px 19px;display:flex;flex-direction:column}.panel-title{display:flex;align-items:center;gap:10px;padding:0 7px 18px}.panel-title>span{font-size:27px;color:var(--yellow)}.panel-title small,.panel-title b{display:block}.panel-title small{font-size:10px;color:#a89bbb}.panel-title b{font-size:17px}.song-list{display:grid;gap:9px}.song-card{position:relative;width:100%;height:68px;border:1px solid #493b61;background:#302449;color:white;border-radius:16px;padding:8px 9px;display:flex;align-items:center;text-align:left;gap:11px;cursor:pointer;transition:.2s}.song-card:hover{transform:translateX(3px);background:#3b2c58}.song-card.active{background:white;color:var(--ink);border-color:white;box-shadow:0 7px 16px #0b061b55}.song-emoji{display:grid;place-items:center;width:45px;height:45px;border-radius:12px;background:var(--song-color);font-size:23px}.song-card b,.song-card small{display:block}.song-card b{font-size:14px}.song-card small{font-size:10px;color:#aa9fba;margin-top:3px}.song-card.active:after{content:"✓";position:absolute;right:10px;color:var(--purple);font-weight:900}.speed-block{margin-top:auto;padding:20px 8px 14px}.speed-block label{display:flex;justify-content:space-between;font-size:12px;font-weight:900}.speed-block output{color:var(--yellow)}input[type=range]{width:100%;accent-color:var(--yellow)}.speed-labels{display:flex;justify-content:space-between;font-size:9px;color:#8e82a1}.start-btn,.stop-btn{border:0;border-radius:15px;min-height:54px;cursor:pointer}.start-btn{background:var(--yellow);color:#261d18;box-shadow:0 6px 0 #d5a92e;font-size:17px}.start-btn span{margin-right:7px}.start-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #d5a92e}.stop-btn{background:#4a3b62;color:white;margin-top:8px}
.stage-wrap{min-width:0;padding:21px 27px 15px;background:linear-gradient(#fff,#f9f7ff)}.stage-head{height:49px;display:flex;justify-content:space-between;align-items:center}.stage-head small,.stage-head strong{display:block}.stage-head small{font-size:9px;color:#9b91aa}.stage-head strong{font-size:17px}.progress-wrap{width:230px;text-align:right}.progress-wrap span{font-size:10px;font-weight:800;color:#8c819e}.progress{height:7px;background:#eee8f4;border-radius:20px;overflow:hidden;margin-top:5px}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--mint),var(--purple));transition:width .2s}
.note-stage{height:435px;position:relative;overflow:hidden;border-radius:21px 21px 4px 4px;background:linear-gradient(180deg,#eae5ff 0%,#dff5ff 58%,#fff9e9 100%)}.note-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(12.5% - 1px),#fff8 12.5%,transparent calc(12.5% + 1px));background-size:12.5% 100%}.lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr)}.lane{position:relative;border-right:1px solid #ffffff77}.lane-label{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:800 12px "Baloo 2";color:#81799b88}.falling-note{position:absolute;z-index:3;left:15%;width:70%;height:34px;border-radius:11px;background:var(--note-color);box-shadow:0 5px 0 var(--note-shadow),0 8px 15px #44336528;display:grid;place-items:center;color:#31213d;font:900 13px "Baloo 2";will-change:transform}.falling-note:after{content:"♪";position:absolute;right:9px;color:#fff9;font-size:14px}.falling-note.hit{animation:pop .25s forwards}.falling-note.missed{opacity:.3}.hit-line{position:absolute;z-index:2;left:0;right:0;bottom:24px;border-top:5px solid #ff627e;filter:drop-shadow(0 0 5px #fff);text-align:center}.hit-line span{position:relative;top:-13px;background:#ff627e;color:white;font-size:9px;padding:4px 10px;border-radius:20px}.message{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#ebe8fbad;backdrop-filter:blur(3px)}.message>span{font-size:37px}.message b{font-size:24px;margin:7px}.message small{color:#716681}.message.hide{display:none}.countdown{position:absolute;z-index:8;inset:0;place-items:center;background:#352353aa;color:white;font:900 110px "Baloo 2"}.countdown:not([hidden]){display:grid}.judgement{position:absolute;z-index:7;left:50%;bottom:77px;transform:translateX(-50%);font:900 30px "Baloo 2";text-shadow:0 3px white;pointer-events:none}.judgement.show{animation:judge .55s forwards}.cloud{position:absolute;color:#fff8;font-size:100px;line-height:0}.c1{top:100px;left:7%}.c2{top:230px;right:6%;font-size:140px}
.piano{height:105px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:0 2px}.key{position:relative;border:0;border-bottom:7px solid #dcd7e7;background:white;border-radius:0 0 10px 10px;cursor:pointer;color:#463b57;box-shadow:0 3px 6px #3f2e551b;touch-action:none}.key:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--key-color)}.key b{display:block;font-size:17px;margin-top:18px}.key small{display:inline-grid;place-items:center;width:23px;height:23px;margin-top:5px;background:#f0edf4;border-radius:6px;font:800 11px "Baloo 2"}.key.active{transform:translateY(5px);border-bottom-width:2px;background:#fff8dd;box-shadow:0 0 25px var(--key-color)}.keyboard-tip{text-align:center;font-size:10px;color:#968ba4;margin:8px 0 0}kbd{font:800 10px "Baloo 2";background:white;border:1px solid #ddd5e6;border-bottom-width:2px;border-radius:4px;padding:1px 5px}
dialog{border:0;border-radius:25px;padding:30px;width:min(430px,90vw);color:var(--ink);box-shadow:0 25px 90px #20143f77}dialog::backdrop{background:#20143faa;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;color:#82768e;cursor:pointer}.dialog-icon{text-align:center;font-size:54px}dialog h2{text-align:center;margin:5px 0 20px;font-size:27px}dialog ol{list-style:none;padding:0;counter-reset:steps}dialog li{counter-increment:steps;display:grid;grid-template-columns:40px 1fr;gap:0 12px;margin:16px 0}dialog li:before{content:counter(steps);grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ece6ff;color:var(--purple);font-weight:900}dialog li span{font-size:12px;color:#82768e}.dialog-ok,.result-card button{width:100%;border:0;background:var(--purple);color:white;border-radius:13px;padding:13px;font-weight:900;cursor:pointer}
.result-overlay{position:fixed;z-index:30;inset:0;background:#21163dcc;display:grid;place-items:center;backdrop-filter:blur(7px)}.result-overlay[hidden]{display:none}.result-card{position:relative;width:min(390px,90vw);padding:34px;text-align:center;background:white;border-radius:28px;box-shadow:0 30px 80px #110920}.result-burst{width:75px;height:75px;margin:-73px auto 12px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);border:7px solid white;color:white;font-size:39px}.result-card p{margin:0;color:#877c93;font-weight:800}.result-card h2{font-size:31px;margin:4px}.result-stars{font-size:38px;color:#ffc92f;letter-spacing:5px}.result-card>strong{font:900 37px "Baloo 2";color:var(--purple)}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.result-grid span{padding:9px 3px;border-radius:10px;background:#f5f1fa;color:#897e95;font-size:10px}.result-grid b{display:block;color:var(--ink);font-size:19px}.result-card .ghost{margin-top:8px;background:#eee9f5;color:var(--ink)}
@keyframes pop{50%{transform:scale(1.3);filter:brightness(1.4)}100%{transform:scale(0);opacity:0}}@keyframes judge{0%{opacity:0;transform:translate(-50%,12px) scale(.7)}30%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-20px)}}
@media(max-width:820px){.app-shell{width:100%;padding:8px}.hero-copy{align-items:flex-start}.stats>div:not(:first-child){display:none}.game-card{grid-template-columns:1fr}.song-panel{padding:15px}.panel-title{display:none}.song-list{display:flex;overflow:auto}.song-card{min-width:150px}.speed-block{margin-top:12px}.stage-wrap{padding:12px 8px}.note-stage{height:390px}.piano{height:92px}.hero-copy h1{font-size:30px}.start-btn{margin-top:8px}.topbar{padding:0 7px}.progress-wrap{width:150px}}
@media(max-width:480px){.hero-copy{padding:12px 8px}.eyebrow{font-size:11px}.hero-copy h1{font-size:26px}.stats{gap:5px}.stats strong{font-size:22px}.note-stage{height:350px}.stage-head{padding:0 3px}.keyboard-tip{display:none}.key b{font-size:14px}.key small{display:none}.song-panel{border-radius:20px 20px 0 0}}