:root{--cyan:#78e5ff;--pink:#ff5bb4;--gold:#ffe47c;--ink:#060b17;--panel:#09101dec;color-scheme:dark;font-family:Inter,"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#060c1b;color:#f5f7ff}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}#app,#arena{position:fixed;inset:0;width:100%;height:100%;display:block}#arena{touch-action:none}.grain{position:absolute;inset:0;pointer-events:none;opacity:.11;background-image:repeating-linear-gradient(0deg,#0000 0px,#0000 3px,#8dccff13 4px);mix-blend-mode:screen}.hud{position:absolute;inset:0 0 auto;min-height:76px;display:flex;align-items:center;padding:13px 27px;gap:24px;background:linear-gradient(180deg,#050a16ed,#050a1690 75%,transparent);z-index:3}.brand{display:flex;align-items:center;gap:13px;color:#fff;border:0;background:none;padding:0;white-space:nowrap}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:2px solid var(--cyan);color:var(--cyan);font-size:29px;letter-spacing:1px;line-height:0;font-weight:900;box-shadow:inset 0 0 12px #45c8fb17}.brand-name{font-size:20px;font-weight:900;letter-spacing:-.7px}.brand-name em{font-style:normal;font-size:18px;letter-spacing:0}.hud-stats{display:flex;margin-left:auto;margin-right:auto;height:44px}.stat{padding:0 21px;min-width:100px;border-left:1px solid #cce4ff20;display:flex;flex-direction:column;justify-content:center;gap:3px}.stat:last-child{border-right:1px solid #cce4ff20}.stat small,.meter-label,.leader-head,.keyboard-help,.eyebrow,.pet-card span,.map-badge,.super-control,.game-message{font-family:"Noto Sans Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase}.stat small{font-size:10px;color:#a8b7c7}.stat strong{font-size:22px;line-height:1;font-variant-numeric:tabular-nums;font-weight:900}.stat-map{min-width:145px}.stat-map strong{font-size:14px}.toolbar{display:flex;gap:9px}.square{width:36px;height:36px;border:1px solid #758aaa55;background:#090e1abb;color:#e8efff;font-size:21px}.square.accent{border-color:#dacb89aa;color:#ffe6a7}.square:hover{background:#20344b}.map-badge{position:absolute;left:18px;top:90px;padding:10px 15px;color:#eafaff;font-size:11px;font-weight:800;border-left:3px solid var(--cyan);background:#050e1ed9;z-index:2;box-shadow:0 6px 25px #0008}.leaderboard{position:absolute;right:16px;top:90px;width:238px;max-height:calc(100vh - 175px);padding:15px 14px 14px;border:1px solid #7ba4c055;border-top:3px solid var(--cyan);background:#060d19e8;box-shadow:0 16px 40px #0008;z-index:3;backdrop-filter:blur(13px)}.leader-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #cce4ff23;padding:12px 0 18px;font-size:10px;color:#e7ecf7;font-weight:800}.leader-head span{font-size:9px;color:var(--cyan)}.board-rows{max-height:310px;overflow:auto;scrollbar-width:none}.board-row{display:grid;grid-template-columns:22px 30px 1fr auto;align-items:center;gap:7px;min-height:42px;border-bottom:1px solid #cce4ff1a;font-family:ui-monospace,Consolas,monospace}.board-row.me{background:linear-gradient(90deg,#3da8c91b,transparent);color:var(--cyan)}.board-rank{font-size:10px;color:#8797a6}.board-avatar{position:relative;width:27px;height:27px;display:grid;place-items:center;border-left:2px solid var(--pet-color);font-size:22px}.board-avatar canvas{width:27px;height:27px;image-rendering:pixelated}.board-names{min-width:0}.board-names b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-names small{font-size:8px;color:#8194aa;letter-spacing:1px}.board-score{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}.board-footer{padding-top:12px}.meter-label{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#b9c6d5;margin:9px 0 4px}.meter-label b{color:#ffe5a0;font-weight:700}.meter{height:4px;background:#ffffff21}.meter i,.mini-meter i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 8px #78e5ff77;transition:width .15s}.game-message{position:absolute;top:23%;left:50%;transform:translate(-50%,-10px);font-size:clamp(16px,3.3vw,45px);text-align:center;white-space:nowrap;opacity:0;pointer-events:none;text-shadow:0 3px 0 #05111f,0 0 25px #000;z-index:3;font-weight:1000;transition:opacity .2s,transform .2s}.game-message.show{opacity:1;transform:translate(-50%,0)}.super-control{position:absolute;left:20px;bottom:66px;display:flex;align-items:center;gap:10px;padding:9px 12px;background:#071321dd;border:1px solid #7fe7ff33;font-size:10px;font-weight:800;z-index:2}.super-control>span:first-child{color:var(--cyan);font-size:20px}.super-control kbd{color:#8ddff1}.mini-meter{width:65px;height:5px;background:#99cde72c}.keyboard-help{position:absolute;left:20px;bottom:15px;display:flex;gap:23px;align-items:center;color:#e2e8ef;font-size:10px;z-index:2}.keyboard-help kbd,.super-control kbd{font-family:inherit;font-size:10px;border:1px solid #aac3da55;padding:4px 6px;margin-right:5px;color:#fff;background:#081323c9}.start-screen,.modal{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#0710207a;backdrop-filter:blur(5px)}.start-inner{width:min(95vw,1050px);text-align:center;margin-top:-10px}.eyebrow{color:var(--cyan);font-weight:800;font-size:12px;letter-spacing:3px}.start-inner h1{font-family:Inter,"Noto Sans SC","PingFang SC",system-ui,sans-serif;font-size:clamp(35px,5.35vw,79px);line-height:1.11;letter-spacing:-2px;font-weight:1000;margin:16px auto 28px;text-shadow:0 4px 22px #000a}.start-inner h1 em{font-style:normal;color:#fff}.pet-picker{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-bottom:18px}.pet-card{width:91px;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #90c1db43;background:#081429e8;color:#f7faff;transition:transform .1s,background .1s,border .1s}.pet-card:hover{transform:translateY(-3px);border-color:#b1eafb}.pet-card.selected{border-color:var(--cyan);background:#17476ed4;box-shadow:0 0 18px #2fe7ff29}.pet-card canvas{width:48px;height:48px;image-rendering:pixelated}.pet-card span{font-size:10px;font-weight:900;letter-spacing:.5px}.play-btn{border:0;background:#78dffb;color:#06111f;display:inline-flex;align-items:center;justify-content:space-between;gap:76px;padding:17px 21px;min-width:225px;font-family:inherit;font-size:14px;font-weight:1000;letter-spacing:1.2px;box-shadow:0 6px 0 #1c648a55;transition:transform .1s,filter .1s}.play-btn:hover{filter:brightness(1.12);transform:translateY(-2px)}.play-btn span{font-size:22px}.start-hint{font-size:12px;color:#a6d1e0;margin-top:16px;text-shadow:0 1px 5px #000}.modal{z-index:7;background:#050b19b8;backdrop-filter:blur(9px)}.modal-box{border:1px solid #7fe7ff55;border-top:3px solid var(--cyan);background:#081323f6;box-shadow:0 40px 90px #000a;padding:38px 38px 32px;max-width:475px;width:90vw;text-align:center}.modal-box h2{font-size:29px;margin:8px 0 13px}.modal-box p:not(.eyebrow){font-size:14px;color:#adc4d5;line-height:1.75}.modal-actions{margin-top:25px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.modal-actions .play-btn{min-width:auto;gap:12px}.subtle-btn{background:#13233a;border:1px solid #6aa2bd66;color:#dae9f4;padding:17px;font-weight:800}.copy-feedback{min-height:18px;color:#a6ffe9!important}.hidden{display:none!important}.touch-controls{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1050px){.hud{padding:10px 15px;gap:13px}.brand-name{font-size:17px}.brand-name em{font-size:15px}.stat{min-width:70px;padding:0 11px}.stat-map{min-width:110px}.stat strong{font-size:18px}.stat-map strong{font-size:12px}.leaderboard{width:195px;right:10px}.pet-card{width:80px}.start-inner h1{font-size:clamp(36px,5vw,60px)}}
@media (max-width:720px){.hud{height:80px;min-height:80px;padding:8px 10px;align-items:flex-start;gap:8px;flex-wrap:wrap}.brand{gap:7px}.brand-mark{width:28px;height:28px;font-size:18px}.brand-name,.brand-name em{font-size:14px}.toolbar{margin-left:auto}.square{width:28px;height:28px;font-size:16px}.hud-stats{width:100%;order:3;justify-content:space-around;height:35px;margin:0}.stat{flex:1;min-width:0;padding:0 5px}.stat:first-child{border-left:0}.stat:last-child{border-right:0}.stat small{font-size:8px}.stat strong{font-size:14px}.stat-map{flex:1.5}.stat-map strong{font-size:11px}.leaderboard{top:89px;right:7px;width:143px;padding:5px 8px;max-height:265px}.leader-head{padding:7px 0;font-size:8px}.leader-head span{font-size:8px}.board-rows{max-height:155px}.board-row{grid-template-columns:14px 19px 1fr auto;gap:3px;min-height:29px}.board-avatar,.board-avatar canvas{width:18px;height:18px}.board-names b{font-size:9px}.board-names small{font-size:7px}.board-score{font-size:13px}.board-rank{font-size:8px}.board-footer{padding-top:3px}.meter-label{font-size:7px;margin:5px 0 2px}.meter{height:3px}.map-badge{top:92px;left:8px;font-size:9px;padding:6px 8px}.start-inner{margin-top:-15px}.start-inner h1{font-size:clamp(30px,7vw,48px);margin:12px auto 18px}.eyebrow{font-size:10px}.pet-picker{max-width:460px;margin:0 auto 14px}.pet-card{width:62px;height:68px}.pet-card canvas{width:39px;height:39px}.pet-card span{font-size:8px}.play-btn{padding:12px 17px;font-size:12px;min-width:195px}.start-hint{font-size:10px;padding:0 16px}.keyboard-help{display:none}.super-control{display:none}.touch-controls{display:flex;position:absolute;left:0;right:0;bottom:10px;padding:0 10px;justify-content:space-between;z-index:4;pointer-events:none}.touch-left,.touch-right{display:flex;gap:7px;pointer-events:auto}.touch-controls button{border:1px solid #a4d9edaa;border-radius:8px;background:#08172abd;color:#f5faff;font-weight:900;width:53px;height:55px;box-shadow:0 3px 15px #0008;touch-action:none}.touch-controls button:active,.touch-controls button.pressed{background:#287b99d9}.touch-right button{width:48px;font-size:11px}.touch-right button:last-child{width:57px;background:#277ea2c2}}
@media (max-width:390px){.pet-card{width:57px;height:65px}.start-inner h1{font-size:31px}.pet-card canvas{width:36px;height:36px}}
@media (max-height:550px){.start-inner h1{font-size:32px;margin:4px auto 10px}.pet-card{height:58px}.pet-card canvas{width:33px;height:33px}.start-hint{display:none}.play-btn{padding:10px}.leaderboard{max-height:70vh}.pet-picker{margin-bottom:8px}}
.power-screen{background:#020916c7}.power-inner{width:min(95vw,650px);text-align:center}.power-inner h2{font-size:clamp(35px,5vw,55px);margin:9px 0 20px;color:#ffe793;letter-spacing:2px;font-weight:1000}.upgrade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.upgrade-card{position:relative;display:flex;min-height:165px;flex-direction:column;justify-content:center;align-items:center;gap:9px;border:1px solid #7293ae77;background:#081322f7;color:#f5f8ff;transition:background .12s,transform .12s,border .12s}.upgrade-card:hover,.upgrade-card:focus-visible{transform:translateY(-4px);border-color:var(--cyan);background:#173852}.upgrade-card kbd{position:absolute;top:9px;left:9px;font:11px ui-monospace,monospace;border:1px solid #8799b3;padding:3px 6px;color:#b4c6da}.upgrade-icon{font-size:32px;color:#fff7ae}.upgrade-card strong{font-size:17px}.upgrade-card small{font-size:11px;color:#aabacc}.power-help{font-size:12px;color:#a1b4c6;margin-top:18px}@media(max-width:600px){.upgrade-grid{gap:5px}.upgrade-card{min-height:140px;padding:8px}.upgrade-card strong{font-size:13px}.upgrade-card small{font-size:9px}.upgrade-icon{font-size:25px}.power-inner h2{font-size:31px}}
.event-banner{position:absolute;z-index:4;top:93px;left:50%;transform:translateX(-50%) rotate(-1deg);min-width:230px;padding:8px 30px 12px;text-align:center;background:#ffe58d;color:#081120;box-shadow:9px 9px 0 #040a19b9,0 0 25px #ffd76b55;pointer-events:none;animation:event-pop .22s ease-out}.event-banner small{display:block;font:800 9px ui-monospace,monospace;letter-spacing:2px}.event-banner strong{display:block;font-size:clamp(18px,2.8vw,30px);line-height:1.1;font-weight:1000;letter-spacing:1px}.event-banner.meteor{top:31%;background:transparent;color:#fff5ce;min-width:max-content;box-shadow:none;text-shadow:4px 5px 0 #050916,0 0 25px #000d}.event-banner.meteor strong{font-size:clamp(38px,7.5vw,100px)}.event-banner.meteor small{display:none}@keyframes event-pop{from{opacity:0;transform:translateX(-50%) scale(.75) rotate(-3deg)}to{opacity:1;transform:translateX(-50%) scale(1) rotate(-1deg)}}@media(max-width:720px){.event-banner{top:92px;min-width:160px;padding:6px 12px}.event-banner.meteor strong{font-size:39px}}
/* Official start presentation keeps HUD/leaderboard sharp while softly blurring gameplay only. */
.start-screen{background:transparent;backdrop-filter:none}
#app:has(#startScreen:not(.hidden)) #arena{filter:blur(4px) brightness(.54)}
.super-control:disabled{opacity:.64;cursor:not-allowed}
.super-control:not(:disabled){border-color:#a6fff2;background:#124352eb;box-shadow:0 0 20px #79f2ff44}

/* Air-slam becomes available as the pet grows; keep the hint away from the board. */
.slam-hint{position:absolute;top:176px;right:270px;z-index:3;pointer-events:none;padding:9px 12px;background:#ffe58e;color:#071222;border:2px solid #0a1424;box-shadow:5px 5px 0 #040914af;font-size:12px;line-height:1.2;font-weight:1000;letter-spacing:1.1px;transform:rotate(1deg)}
.warp-countdown{position:absolute;top:50%;left:50%;z-index:4;transform:translate(-50%,-50%) rotate(-2deg);width:110px;min-height:142px;border:3px solid #f9d675;background:#070e1fea;color:#ffe99e;box-shadow:11px 13px 0 #030911b8,0 0 30px #ffe78b44;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;animation:warp-pop .24s ease-out}
.warp-countdown small{font:900 10px "Noto Sans SC",sans-serif;letter-spacing:2px;color:#d4e1e6}
.warp-countdown strong{font:1000 76px/1 "Noto Sans SC",system-ui,sans-serif;text-shadow:3px 4px 0 #aa8133}
.city-intro{position:absolute;top:28%;left:50%;transform:translateX(-50%);z-index:3;text-align:center;pointer-events:none;white-space:nowrap;text-shadow:0 4px 0 #091125,0 9px 25px #000e;animation:city-pop .35s ease-out}
.city-intro strong{display:block;font-size:clamp(26px,5vw,62px);font-weight:1000;letter-spacing:5px}
.city-intro span{display:block;color:#ffe5a4;font:900 13px ui-monospace,"Noto Sans SC",sans-serif;letter-spacing:2px}
@keyframes warp-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-7deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}}
@keyframes city-pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:1050px){.slam-hint{right:225px;top:165px;font-size:11px;padding:7px}}
@media(max-width:720px){
  .slam-hint{left:8px;right:auto;top:166px;font-size:9px;max-width:calc(100vw - 168px)}
  .warp-countdown{width:83px;min-height:107px}.warp-countdown strong{font-size:55px}
  .city-intro{top:38%;left:43%}.city-intro strong{letter-spacing:2px}
  .event-banner:not(.meteor){left:8px;top:128px;transform:none;min-width:0;max-width:calc(100vw - 168px);padding:7px 10px;box-shadow:4px 4px 0 #040a19b9}
  .touch-controls{bottom:max(10px,env(safe-area-inset-bottom))}
}
/* Landscape phones and tablets often have >720px CSS width but still need touch input. */
@media(pointer:coarse){
  .keyboard-help,.super-control{display:none}
  .touch-controls{display:flex;position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom));padding:0 max(10px,env(safe-area-inset-left));justify-content:space-between;z-index:4;pointer-events:none}
  .touch-left,.touch-right{display:flex;gap:7px;pointer-events:auto}
  .touch-controls button{border:1px solid #a4d9edaa;border-radius:8px;background:#08172abd;color:#f5faff;font-weight:900;min-width:48px;height:55px;box-shadow:0 3px 15px #0008;touch-action:none}
  .touch-controls button:active,.touch-controls button.pressed{background:#287b99d9}
}
@media(prefers-reduced-motion:reduce){.event-banner,.warp-countdown,.city-intro{animation:none}.game-message,.upgrade-card,.pet-card{transition:none}}

/* Opt-in gameplay diagnostics live inside pause; the normal HUD stays uncluttered. */
#pauseScreen .modal-box{max-height:calc(100dvh - 30px);overflow:auto}
.diagnostics{border-top:1px solid #86b7d238;margin-top:22px;padding-top:14px}
.diagnostics-toggle{border:0;background:transparent;color:#8beaff;font-size:12px;font-weight:800;padding:7px 10px}
.diagnostics-toggle:hover,.diagnostics-toggle:focus-visible{text-decoration:underline}
.diagnostics #diagnosticsPanel>p{font-size:11px;line-height:1.5;margin:8px 0;color:#a8c9dc}
.diagnostics-output{max-height:170px;overflow:auto;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#020817;border:1px solid #5e9db55c;border-radius:5px;color:#bfeefe;font:11px/1.5 ui-monospace,Consolas,monospace}
.diagnostics #copyDiagnosticsBtn{padding:9px 13px;font-size:11px}
/* A thumb-first control bar for portrait and landscape touch devices. */
.touch-settings{display:none;margin:17px auto 0;padding:10px;border:1px solid #79d1e444;border-radius:10px;background:#0c2033a8}
.touch-settings .subtle-btn{width:100%;padding:11px;border-radius:8px;font-size:12px;color:#b9f5ff}
.touch-settings small{display:block;color:#a1b9cc;margin-top:8px;font-size:10px}
@media(max-width:720px),(pointer:coarse){
  .touch-settings{display:block}
  .touch-controls{gap:10px;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
  .touch-controls.swapped{flex-direction:row-reverse}
  .touch-left,.touch-right{gap:clamp(4px,1.4vw,9px)}
  .touch-controls button{width:clamp(46px,12vw,62px);min-width:0;height:clamp(50px,9vh,64px);border-radius:14px;border-width:2px;background:#0c2139db;box-shadow:0 4px 0 #030a17bd,0 6px 20px #0009;user-select:none;-webkit-user-select:none}
  .touch-left button{font-size:23px}
  .touch-right button,.touch-right button:last-child{width:clamp(46px,12vw,62px);font-size:12px;background:#113149df}
  .touch-right [data-key="jump"]{border-color:#ffe1a8;background:#68472bbf}
  .touch-right [data-key="bonk"]{border-color:#ffadc5}
  .touch-controls button:active,.touch-controls button.pressed{background:#3794b6;box-shadow:0 1px 0 #020817,0 0 20px #53d3fd77;transform:translateY(3px)}
}
@media(max-height:480px) and (pointer:coarse){
  .touch-controls{bottom:max(5px,env(safe-area-inset-bottom))}
  .touch-controls button{height:50px}
}