@charset "UTF-8";
:root{--ink:#24383e;--paper:#f5f5ef;--orange:#ff9148;--teal:#146e74;--muted:#637477;--shadow:#263e3b}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;background-image:radial-gradient(#bfcac7 0.7px,transparent 0.7px);background-size:16px 16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #146e74;outline-offset:4px}button:disabled{opacity:.4;cursor:default}.app{max-width:1272px;margin:auto;padding:26px 32px 20px}.header{display:flex;align-items:center;gap:24px;padding-bottom:26px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:900;font-size:24px;white-space:nowrap}.brand small{display:block;font-size:12px;letter-spacing:3px;margin-top:3px;color:var(--teal)}.brand-paw{display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--ink);border-radius:15px;background:var(--orange);box-shadow:3px 3px 0 var(--ink);font-size:31px}.header-note{font-size:14px;color:var(--muted);flex:1}.tools{display:flex;gap:10px}.icon-button{border:1px solid #c7ceca;background:#fff9;padding:9px 12px;border-radius:10px;font-weight:700;font-size:16px}.icon-button span{font-size:14px}.game-shell{border:2px solid var(--ink);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 9px 0 #d0d9d4,0 16px 32px #24383e12}.hud{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:17px 25px;min-height:100px;background:#fff}.stat-label{font-size:14px;color:var(--muted);display:block;font-weight:600}.score-stat{display:grid;grid-template-columns:auto auto;column-gap:18px;align-items:center}.score-stat .stat-label{grid-column:1/-1}.stat strong{font-size:34px;line-height:1.3;font-variant-numeric:tabular-nums}.combo{font-size:14px;color:var(--teal);font-weight:800;background:#e8f3ee;border-radius:8px;padding:6px 10px;align-self:center}.time-stat{text-align:center;flex-shrink:0}.time-stat strong{font-size:34px;line-height:1.3;font-variant-numeric:tabular-nums}.time-stat small{font-size:14px;margin-left:5px;font-weight:500}.trouble-stat{width:225px}.trouble-stat b{float:right;font-size:14px;color:var(--ink)}.meter,.energy-track{height:9px;background:#e8ece6;border-radius:10px;overflow:hidden;margin:8px 0}.meter i{display:block;background:var(--orange);width:0;height:100%;transition:width .18s}.trouble-stat>span:last-child{font-size:12px;color:var(--muted)}.arena{position:relative;background:#bf8c52;aspect-ratio:11/7;overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}canvas{display:block;width:100%;height:100%;touch-action:none}.room-tag{position:absolute;top:15px;left:18px;padding:7px 12px;background:#24383ebd;color:white;border-radius:8px;font-size:12px;letter-spacing:1px;pointer-events:none}.lives{position:absolute;top:16px;right:20px;color:#ff5d58;text-shadow:0 2px 0 #fff;font-size:25px;letter-spacing:4px;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#163c3d29;backdrop-filter:blur(2px);padding:15px}.hidden{display:none!important}.start-card{width:420px;max-width:100%;padding:34px 38px;background:#fffaf1;border:2px solid var(--ink);border-radius:22px;box-shadow:7px 8px 0 #24383e;transform:rotate(-2deg);text-align:center}.eyebrow{font-size:14px;font-weight:800;color:var(--teal)}h1{font-size:49px;line-height:1.16;letter-spacing:-2px;margin:20px 0 16px;font-weight:1000}h1 span{display:block;color:#e4702e}p{font-size:16px;line-height:1.8;color:#596765;margin:0 0 24px}.primary{border:2px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);background:var(--orange);padding:14px 23px;font-weight:900;font-size:19px;display:flex;justify-content:center;gap:35px;width:100%;min-height:55px}.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.start-tip{font-size:12px;margin-top:20px;color:var(--muted)}.compact{transform:none}.compact h2{font-size:32px;margin:16px 0}.result-score{font-size:60px;font-weight:1000;line-height:1.2;color:#e4702e;margin-bottom:15px}.toast{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:#24383ee8;color:#fff;padding:10px 18px;font-size:14px;font-weight:700;border-radius:12px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s}.toast.visible{opacity:1}.controls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 24px}.desktop-keys{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--muted)}kbd{font:700 12px system-ui;background:#f1f3ef;padding:5px 7px;border:1px solid #d0d6cf;border-bottom-width:3px;border-radius:5px;color:var(--ink);white-space:nowrap}.dash-status{width:120px;flex-shrink:0;font-size:12px;color:var(--muted)}.energy-track{height:6px;margin-bottom:0}.energy-track i{display:block;width:100%;height:100%;background:var(--teal)}.footer{display:flex;justify-content:space-between;margin-top:22px;font-size:14px;color:var(--muted);gap:15px}.touch-controls{display:none}.joystick{width:96px;height:96px;border-radius:50%;background:#e5eae1;border:2px solid #c9d5c6;position:relative;touch-action:none;user-select:none}.stick{position:absolute;width:43px;height:43px;border-radius:50%;background:#fff;border:2px solid var(--ink);left:25px;top:25px;box-shadow:0 3px 0 #acb9ad;pointer-events:none}.joystick span{position:absolute;bottom:3px;width:100%;text-align:center;font-size:12px;color:#697a6c;pointer-events:none}.touch-actions{display:flex;gap:17px;align-items:center}.attack-button{width:84px;height:84px;border-radius:50%;background:var(--orange);border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-weight:900;font-size:27px;touch-action:none;user-select:none}.dash-button{width:58px;height:58px;background:#e6f0e9;border:2px solid var(--teal);border-radius:50%;color:var(--teal);font-weight:800;font-size:14px;touch-action:none;user-select:none}.attack-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
@media(max-width:850px){.app{padding:16px}.header-note{display:none}.header{justify-content:space-between;padding-bottom:18px}.desktop-keys{gap:12px}.controls{padding:14px}.trouble-stat{width:180px}.hud{padding:13px 17px;gap:16px}.footer{font-size:12px}.combo{font-size:12px;padding:5px 7px}}
@media(pointer:coarse),(max-width:600px){.desktop-keys{display:none}.touch-controls{display:flex;align-items:center;justify-content:space-between;flex:1;gap:20px}.controls{position:relative;padding:12px 21px}.dash-status{position:absolute;top:8px;left:calc(50% - 37px);width:74px;font-size:12px;text-align:center}.arena{aspect-ratio:1/1}.header .brand{font-size:21px}.header .brand-paw{width:40px;height:40px}.brand small{font-size:12px;letter-spacing:2px}.tools{gap:6px}.icon-button{padding:7px 9px}.icon-button span{font-size:12px}.app{padding:14px 10px 18px}.hud{padding:12px;gap:10px;min-height:89px}.stat strong,.time-stat strong{font-size:29px}.score-stat{column-gap:6px}.combo{font-size:12px;padding:4px 6px;max-width:85px}.stat-label{font-size:12px}.trouble-stat{width:103px}.trouble-stat b{font-size:12px}.trouble-stat>span:last-child{font-size:12px}.time-stat small{font-size:12px}.footer{flex-wrap:wrap;margin-top:20px;font-size:12px;gap:7px}.start-card{width:300px;padding:22px 24px;border-radius:18px;box-shadow:5px 6px 0 #24383e}h1{font-size:35px;margin:15px 0 12px}.start-card p{font-size:14px;line-height:1.6;margin-bottom:17px}.eyebrow{font-size:12px}.primary{font-size:17px;padding:11px;min-height:48px}.start-tip{font-size:12px;margin-top:15px}.room-tag{font-size:12px;left:10px;top:10px;padding:5px 9px}.lives{font-size:20px;top:9px;right:10px}.toast{font-size:12px;padding:8px 11px;bottom:10px;max-width:95%;white-space:normal;text-align:center}.result-score{font-size:44px}.compact h2{font-size:25px;margin:12px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}