*{box-sizing:border-box;margin:0;padding:0}html,body{background:#1a120c;width:100%;height:100%;overflow:hidden}body{color:#f5f5f0;font-family:Trebuchet MS,Hiragino Sans,Yu Gothic,system-ui,sans-serif}#app,#app canvas{position:fixed;inset:0}#app canvas{touch-action:none}button{cursor:pointer;font-family:inherit}.cc-btn{color:#f5f5f0;letter-spacing:1px;background:#140e0ad1;border:2px solid #f5f5f080;border-radius:10px;padding:10px 22px;font-size:16px;transition:transform .12s,background .12s}.cc-btn:hover{background:#32241aeb;transform:scale(1.05)}.cc-btn:disabled{opacity:.45;cursor:default;transform:none}.cc-btn-primary{color:#8fe33f;border-color:#8fe33f}.cc-btn-reward{color:#ff4fa3;border-color:#ff4fa3}.cc-modal{z-index:90;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a0705b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.cc-modal-box{text-align:center;background:#1c140ef7;border:2px solid #f5f5f040;border-radius:16px;max-width:420px;padding:28px 32px}.cc-modal-box h3{margin-bottom:12px;font-size:22px}.cc-modal-box p{opacity:.9;font-size:15px;line-height:1.6}.cc-modal-btns{justify-content:center;gap:12px;margin-top:20px;display:flex}.cc-resume .cc-modal-box{padding:18px 40px;font-size:18px}#cc-toast{opacity:0;z-index:95;pointer-events:none;background:#140e0aeb;border:1px solid #f5f5f059;border-radius:24px;padding:10px 22px;font-size:15px;transition:all .25s;position:fixed;bottom:90px;left:50%;transform:translate(-50%)translateY(20px)}#cc-toast.show{opacity:1;transform:translate(-50%)translateY(0)}#screen-title{z-index:50;background-position:50%;background-size:cover;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#screen-title:before{content:"";background:radial-gradient(#140c0840,#0c0805e0);position:absolute;inset:0}.title-inner{text-align:center;max-width:860px;padding:20px;position:relative}.game-logo{letter-spacing:4px;background:linear-gradient(100deg,#8fe33f 5%,#3fd2ff 30%,#ff4fa3 55%,#ffb35c 80%,#8fe33f 100%);color:#0000;filter:drop-shadow(0 4px #0000008c)drop-shadow(0 0 22px #ff4fa340);-webkit-background-clip:text;background-clip:text;font-size:clamp(44px,8vw,84px);font-weight:900;line-height:.95;transform:rotate(-2deg)}.game-tagline{opacity:.92;text-shadow:0 2px 6px #000;margin:14px 0 22px;font-size:clamp(14px,2vw,19px)}.lv-grid{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:20px;display:flex}.lv-card{color:#f5f5f0;background:#160f0ad9;border:2px solid #f5f5f059;border-radius:14px;flex-direction:column;gap:6px;width:138px;padding:14px 10px;transition:transform .12s,border-color .12s;display:flex}.lv-card:hover:not(.locked){border-color:#8fe33f;transform:translateY(-4px)scale(1.04)}.lv-card.locked{opacity:.45;cursor:default}.lv-num{color:#ffb35c;font-family:Georgia,serif;font-size:30px;font-weight:900}.lv-name{min-height:32px;font-size:13px}.lv-meta{opacity:.85;font-size:12px}.grade-S{color:gold}.grade-A{color:#8fe33f}.grade-B{color:#3fd2ff}.grade-C{color:#e8e4da}.press-enter{letter-spacing:2px;opacity:.85;text-shadow:0 2px 6px #000;font-size:15px;animation:1.6s infinite pulse}@keyframes pulse{50%{opacity:.4}}.mute-btn{color:#fff;background:#140e0ab3;border:1px solid #f5f5f04d;border-radius:50%;width:46px;height:46px;font-size:22px;position:absolute;top:18px;right:20px}#screen-result,#screen-pause{z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0705a8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.result-box{text-align:center;background:#1a120cf5;border:2px solid #f5f5f047;border-radius:20px;min-width:340px;padding:34px 44px}.result-box h2{letter-spacing:2px;margin-bottom:10px;font-size:34px}.result-box.win h2{color:#8fe33f}.result-box.lose h2{color:#ff4fa3}.result-grade{margin:6px 0;font-family:Georgia,serif;font-size:72px;font-weight:900;line-height:1}.new-record{color:gold;letter-spacing:2px;margin-bottom:6px;font-weight:700;animation:1.2s infinite pulse}.result-stats{flex-direction:column;gap:6px;margin:14px 0;font-size:16px;display:flex}.result-stats .gap{opacity:.8;margin-top:4px;font-size:13px}.result-btns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;display:flex}.pause-hint{opacity:.75;margin-bottom:8px}#hud{z-index:40;pointer-events:none;position:fixed;inset:0}.hud-top{text-align:center;position:absolute;top:14px;left:50%;transform:translate(-50%)}.hud-hourglass{width:44px;height:44px;margin:0 auto;position:relative}.hud-hourglass img{width:44px;height:44px}.hud-sand{border-radius:3px;width:8px;height:14px;position:absolute;bottom:6px;left:50%;overflow:hidden;transform:translate(-50%)}.hud-sand-fill{background:#8fe33f;width:100%;transition:height .3s linear;position:absolute;bottom:0}.hud-timer-num{text-shadow:0 3px 8px #000c;margin:2px 0 7px;font-family:Georgia,Times New Roman,serif;font-size:52px;font-weight:900;line-height:1}.hud-phase{letter-spacing:2px;opacity:.9;text-shadow:0 2px 5px #000;font-size:14px}.hud-phase.danger{color:#ff4fa3;font-weight:700}.hud-remaining{text-align:right;letter-spacing:2px;text-shadow:0 2px 6px #000;font-size:15px;position:absolute;bottom:20px;right:26px}.hud-remaining b{text-shadow:0 4px 10px #000000d9;font-family:Georgia,serif;font-size:74px;font-weight:900;line-height:.95;display:block}.hud-remaining b.tick{animation:.5s tickpop}@keyframes tickpop{30%{color:#ff4fa3;transform:scale(1.35)}}.hud-keys{text-align:right;flex-direction:column;gap:12px;font-size:12px;display:flex;position:absolute;top:50%;right:18px;transform:translateY(-50%)}.hud-keys>div{background:#100b088c;border-radius:8px;justify-content:flex-end;align-items:center;gap:8px;padding:5px 10px;display:flex}.hud-keys img{width:22px;height:22px}.hud-keys i{opacity:.7;font-size:11px;font-style:normal}.hud-keys i.ready{color:#8fe33f;opacity:1}.hud-ctx{letter-spacing:1px;text-shadow:0 1px 3px #000;background:#100b0899;border-radius:18px;padding:7px 18px;font-size:13px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.hud-camo{background:#100b0899;border-radius:12px;align-items:center;gap:8px;padding:8px 14px;display:flex;position:absolute;bottom:20px;left:20px}.hud-camo img{width:26px;height:26px}.hud-camo-bar{background:#f5f5f02e;border-radius:5px;width:110px;height:10px;overflow:hidden}.hud-camo-bar div{background:#d84a6a;width:0%;height:100%;transition:width .25s,background .25s}.hud-camo span{min-width:38px;font-size:13px;font-weight:700}.hud-camo em{letter-spacing:2px;opacity:.7;font-size:11px;font-style:normal}.hud-banner{letter-spacing:4px;opacity:0;text-shadow:0 4px 14px #000000e6;white-space:nowrap;font-size:34px;font-weight:900;transition:all .25s;position:absolute;top:22%;left:50%;transform:translate(-50%)scale(.8)}.hud-banner.show{opacity:1;transform:translate(-50%)scale(1)}.hud-banner.danger{color:#ff4fa3}.hud-vignette{opacity:0;background:radial-gradient(#0000 42%,#c814288c 100%);transition:opacity .4s;position:absolute;inset:0}.hud-tutorial{opacity:0;text-align:center;background:#100b08c7;border:1px solid #8fe33f80;border-radius:12px;max-width:92vw;padding:9px 22px;font-size:15px;transition:opacity .4s;position:absolute;top:144px;left:50%;transform:translate(-50%)}.hud-tutorial.show{opacity:1}#paint-panel{z-index:45;pointer-events:auto;scrollbar-width:thin;background:#120d09e0;border:1px solid #f5f5f04d;border-radius:14px;flex-direction:column;gap:10px;width:210px;max-height:calc(100vh - 16px);padding:12px;display:flex;position:fixed;top:50%;left:14px;overflow-y:auto;transform:translateY(-50%);box-shadow:inset 0 -22px 16px -16px #000000f2}.pp-title{letter-spacing:3px;text-align:center;color:#ff4fa3;font-size:13px;font-weight:700}#pp-wheel{cursor:crosshair;border-radius:50%;width:150px;height:150px;margin:0 auto}.pp-rows{flex-direction:column;gap:4px;display:flex}.pp-rows label{letter-spacing:1px;align-items:center;gap:6px;font-size:11px;display:flex}.pp-rows input[type=range]{accent-color:#ff4fa3;flex:1;height:4px}.pp-rows span{text-align:right;opacity:.75;min-width:30px;font-size:10px}.pp-swatches{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.pp-sw{aspect-ratio:1;border:1px solid #0006;border-radius:4px;width:100%}.pp-sw:hover{border-color:#fff;transform:scale(1.18)}.pp-tools{flex-direction:column;gap:8px;display:flex}.pp-eyedrop{padding:7px 10px;font-size:13px}.pp-brush{align-items:center;gap:6px;font-size:11px;display:flex}.pp-br{color:#fff;background:#281e16cc;border:1px solid #f5f5f066;border-radius:6px;width:26px;height:26px;font-size:11px}.pp-br.on{color:#8fe33f;border-color:#8fe33f}.pp-scope{color:#8fe33f;font-size:11px}#touch-overlay{z-index:55;pointer-events:none;display:none;position:fixed;inset:0}#touch-overlay,#touch-overlay *{touch-action:none}.tc-joy{pointer-events:auto;background:#f5f5f014;border:2px solid #f5f5f040;border-radius:50%;width:128px;height:128px;position:absolute;bottom:70px;left:26px}.tc-joy-knob{background:#f5f5f059;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%}.tc-btns{pointer-events:auto;align-items:flex-end;gap:12px;display:flex;position:absolute;bottom:64px;right:24px}.tc-btn{color:#fff;background:#f5f5f024;border:2px solid #f5f5f066;border-radius:50%;width:62px;height:62px;font-size:20px;font-weight:700}.tc-a{background:#8fe33f40;width:76px;height:76px}.tc-minis{pointer-events:auto;gap:8px;display:flex;position:absolute;top:14px;right:16px}.tc-mini{color:#fff;background:#f5f5f01f;border:1px solid #f5f5f059;border-radius:10px;width:42px;height:42px;font-size:18px}@media (width<=760px){.hud-keys{display:none}.hud-timer-num{font-size:38px}.hud-remaining b{font-size:52px}#paint-panel{width:178px;left:8px}.lv-card{width:110px}}@media (width<=600px),(height<=480px){.hud-camo{padding:6px 10px;top:auto;bottom:212px;left:14px}.hud-camo-bar{width:48px}.hud-camo em{display:none}.hud-ctx{white-space:normal;text-align:center;max-width:94vw;padding:5px 12px;font-size:11px}.hud-remaining{bottom:158px;right:20px}.hud-remaining b{font-size:46px}}@media (height<=480px){.hud-keys{display:none}.hud-top{top:6px}.hud-timer-num{font-size:34px}.hud-tutorial{max-width:55vw;padding:7px 16px;font-size:13px;top:auto;bottom:150px}.hud-banner{font-size:26px}}@media (width<=600px){.tc-joy{width:112px;height:112px;bottom:64px;left:16px}.tc-btns{gap:8px;bottom:58px;right:12px}.tc-btn{width:54px;height:54px;font-size:17px}.tc-a{width:66px;height:66px}}
