:root{color-scheme:dark;--bg:#090f25;--panel:#101a36;--line:#243254;--blue:#77b8ff;--cyan:#6ff3df;--text:#eef4ff;--muted:#8d9bb9;--purple:#b5a0ff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,#172344 0,transparent 45%),var(--bg);color:var(--text);min-height:100dvh}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.topbar{max-width:1120px;margin:auto;display:flex;justify-content:space-between;align-items:center;height:106px;padding:12px 36px;border-bottom:1px solid #ffffff0d}.brand{display:flex;gap:13px;align-items:center;font-size:20px;font-weight:750}.brand small{display:block;font-size:8px;letter-spacing:2.2px;color:var(--muted);margin-top:5px}.brand-icon{width:31px;height:31px;display:grid;grid-template-columns:1fr 1fr;gap:4px;transform:rotate(-8deg)}.brand-icon i{background:var(--blue);box-shadow:0 0 14px #66aaff35}.brand-icon i:nth-child(2){background:var(--cyan)}.brand-icon i:nth-child(3){opacity:.4}.energy{display:flex;gap:11px;align-items:center}.bolt{font-size:35px;color:var(--cyan);font-weight:800}.energy strong{font-size:21px;font-variant-numeric:tabular-nums}.energy em{font-size:12px;font-style:normal;color:var(--muted);font-weight:500}.energy small{display:block;font-size:10px;color:var(--muted);margin-top:4px}main{max-width:1120px;margin:auto;padding:0 36px 24px}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:55px 0 38px}.eyebrow{display:block;font-size:11px;letter-spacing:2px;color:var(--blue);margin-bottom:22px}h1{font-size:62px;line-height:1.15;letter-spacing:-2px;margin:0;font-weight:780}h1 span{color:var(--blue)}.hero-copy p{color:var(--muted);font-size:15px;margin-top:22px}.hero-meta{display:flex;gap:18px;font-size:10px;color:#a2b3d5;margin-top:32px}.hero-meta span:before{content:'+';color:var(--cyan);margin-right:7px}.hero-art{position:relative;background:linear-gradient(145deg,#18295099,#101a36);border:1px solid #31486d;border-radius:4px;overflow:hidden;min-height:288px}.art-label{padding:18px 20px;font-size:11px;letter-spacing:1px;display:flex;justify-content:space-between;color:#bdd7fa}.art-label span{color:#7186a9;font-size:8px;padding-top:2px}.hero-art canvas{width:100%;display:block;height:212px;object-fit:contain}.art-footer{padding:12px 20px 16px;font-size:10px;color:var(--muted)}.live-dot{display:inline-block;background:var(--cyan);width:5px;height:5px;border-radius:50%;margin-right:8px;box-shadow:0 0 8px #6ff3df88}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.mode{text-align:left;border:1px solid #334d76;border-radius:4px;padding:23px 25px;background:linear-gradient(120deg,#173663,#152241);transition:transform .16s,border-color .16s}.mode:hover{transform:translateY(-3px);border-color:var(--blue)}.mode.friends{background:linear-gradient(120deg,#2b234c,#1d1b37);border-color:#4b3d6c}.mode-number{font-size:9px;color:#87b8f2;letter-spacing:2px}.friends .mode-number{color:#bca5e4}.mode strong{display:flex;justify-content:space-between;font-size:25px;margin-top:13px}.mode strong span{font-size:24px;color:var(--blue)}.friends strong span{color:var(--purple)}.mode p{font-size:12px;color:#a5b6d2;margin:10px 0 24px}.mode footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff15;padding-top:15px;font-size:12px}.mode footer small{font-size:10px;color:#839cbd}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:38px 0 18px}.section-heading h2{font-size:17px;margin:0;font-weight:600}.section-heading>span{font-size:11px;color:var(--muted)}.level-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.level-card{text-align:left;padding:12px 10px 9px;background:#101a31;border:1px solid var(--line);border-radius:3px;transition:background .15s}.level-card:hover:not(:disabled){background:#1b2b48}.level-card.current{border-color:#6ca9f7}.level-card canvas{display:block;width:100%;height:52px;object-fit:contain;margin-bottom:9px}.level-card .level-id{display:flex;justify-content:space-between;font-size:10px;color:#a9bad5}.level-card .level-id em{font-style:normal;color:var(--cyan)}.level-card .level-name{font-size:10px;margin-top:6px;color:#d7e2f6;white-space:nowrap}.level-card:disabled{opacity:.33}.page-footer{display:flex;justify-content:space-between;align-items:center;margin-top:28px;font-size:10px;color:#637593}.page-footer button{background:none;color:#8d9bb9;font-size:10px;padding:12px 0}.narrow{max-width:460px;margin:32px auto 0}.back{display:block;background:none;padding:10px 0;color:var(--muted);font-size:13px;min-height:44px;margin-bottom:26px}.narrow h1{font-size:43px;line-height:1.3;letter-spacing:-1px}.muted{font-size:14px;color:var(--muted);line-height:1.9;margin:24px 0}.fee{border-left:2px solid var(--purple);background:#b5a0ff09;padding:18px 20px;margin:28px 0}.fee>span{display:block;font-size:11px;color:var(--purple)}.fee strong{display:block;font-size:21px;margin:9px 0}.fee small{font-size:11px;color:var(--muted);line-height:1.8}.primary,.secondary{min-height:52px;border-radius:4px;padding:14px 20px;font-weight:650;transition:filter .15s}.primary{color:#09162c;background:var(--blue);border:1px solid #9acbff}.primary:hover{filter:brightness(1.1)}.secondary{background:#1a2845;border:1px solid #3c5074;color:#d4e5ff}.full{width:100%;display:flex;justify-content:space-between;align-items:center}.divider{display:flex;align-items:center;gap:14px;margin:28px 0;color:#5e7395;font-size:11px}.divider:before,.divider:after{content:'';height:1px;background:#24314e;flex:1}.input-label{font-size:11px;color:var(--muted);display:block;margin-bottom:10px}.join-row{display:flex;gap:12px}.join-row input{min-width:0;width:100%;height:54px;background:#0e1831;border:1px solid #30466a;color:#fff;border-radius:4px;letter-spacing:3px;padding:10px 16px}.join-row button{white-space:nowrap}.hint{color:#667b9f;font-size:11px;line-height:1.9;margin-top:24px}.room-code{background:#111f3c;border:1px solid #2f4568;text-align:center;padding:25px;border-radius:4px;margin:28px 0}.room-code small{color:var(--muted);font-size:12px}.room-code strong{display:block;font-size:48px;letter-spacing:8px;font-weight:600;margin:14px 0}.room-code button{background:none;color:var(--blue);padding:10px;font-size:12px}.players{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:22px 0}.player{background:#111c34;border:1px solid #293957;padding:22px 14px;text-align:center;border-radius:4px}.avatar{width:44px;height:44px;margin:0 auto 14px;display:grid;place-items:center;font-size:22px;color:var(--cyan);background:#6ff3df10;border:1px solid #6ff3df30}.player strong{display:block;font-size:16px}.player small{display:block;font-size:11px;color:var(--muted);margin-top:9px}.room-info{text-align:center;font-size:13px;line-height:1.9;color:var(--muted);margin:24px 0}.arena{max-width:420px;margin:20px auto 0}.arena-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.arena-heading>div{flex:1}.arena-heading small{font-size:9px;letter-spacing:2px;color:var(--blue)}.arena-heading h2{font-size:19px;margin:5px 0 0;letter-spacing:.5px}.icon-button{width:44px;height:44px;background:#131f38;border:1px solid #2b3f60;border-radius:6px;font-size:20px;flex-shrink:0}.hud{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;margin-bottom:12px;background:#111c35;border:1px solid #263b5a;border-radius:4px}.hud small{font-size:9px;color:var(--muted);display:block}.hud strong{display:block;font-size:22px;margin-top:6px;font-variant-numeric:tabular-nums}.hud-stars{text-align:center}.hud-stars>span{letter-spacing:4px;color:#aeeede;font-size:20px}.hud-stars small{font-size:8px;margin-top:8px}.remaining{text-align:right}.remaining strong{font-size:19px}.board-wrap{position:relative;border:1px solid #314a70;box-shadow:0 0 30px #3786e509;background:#0c1636;border-radius:4px;overflow:hidden;touch-action:none}#board{display:block;width:100%;height:auto;touch-action:none}.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#09132bdc;padding:28px;backdrop-filter:blur(5px)}.game-overlay.ready-overlay{background:transparent;backdrop-filter:none;justify-content:flex-end;padding:30px 25px 110px;pointer-events:none}.game-overlay.ready-overlay button{pointer-events:auto;box-shadow:0 4px 40px #0006}.overlay-eyebrow{font-size:10px;letter-spacing:3px;color:var(--blue);margin-bottom:13px}.game-overlay h2{font-size:32px;margin:0 0 18px;letter-spacing:1px}.game-overlay p{color:#9cafcd;font-size:12px;line-height:1.9;margin:9px 0}.game-overlay .big-score{font-size:58px;color:#dbeaff;font-weight:700;letter-spacing:5px;margin:7px 0 20px}.game-overlay .result-stars{color:var(--cyan);font-size:34px;letter-spacing:9px;margin:2px 0 20px}.result-stats{width:100%;padding:12px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;margin:15px 0 22px}.result-stats>div{display:flex;justify-content:space-between;font-size:12px;margin:13px 0;color:#9badc7}.result-stats strong{color:#e5efff}.game-overlay button{width:100%;margin-top:12px}.countdown{font-size:76px;font-weight:700;color:var(--cyan);margin:20px}.drag-zone{height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;color:#8aa6cc;font-size:11px;background:#13203b;border:1px solid #293e61;margin-top:10px;border-radius:4px;touch-action:none;user-select:none}.drag-zone>span:first-child,.drag-zone>span:last-child{font-size:20px;color:#45638e}.controls-hint{font-size:9px;color:#5e7395;text-align:center;margin:12px 0 16px}#opponent-bar{background:#211d3c;color:#bbaaf1;padding:9px 13px;font-size:10px;border:1px solid #433963;border-radius:4px;margin-bottom:10px;display:flex;justify-content:space-between}#toast{position:fixed;left:50%;bottom:35px;transform:translate(-50%,15px);background:#e5efff;color:#142037;font-size:13px;line-height:1.5;padding:14px 22px;border-radius:5px;box-shadow:0 10px 40px #0007;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:90vw;width:max-content}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{background:#121f3a;color:var(--text);border:1px solid #3b557c;border-radius:8px;max-width:390px;width:90%;padding:30px}dialog::backdrop{background:#030815c9;backdrop-filter:blur(4px)}dialog h2{font-size:24px;margin-top:0}dialog p,dialog li{font-size:13px;color:#abbcda;line-height:1.9}#dialog-actions{display:flex;gap:10px;margin-top:25px}#dialog-actions button{flex:1}.loading{position:fixed;inset:0;background:var(--bg);z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading .brand-icon{margin:0 0 20px}.loading p{font-size:16px}.loading small{color:var(--muted);font-size:11px}
@media(min-width:900px){body:has(.arena:not([hidden])) .topbar{height:78px}.arena{max-width:370px;margin-top:16px}.arena-heading{margin-bottom:12px}.hud{padding:10px 14px}.drag-zone{height:47px}.hero-art canvas{height:235px}}
@media(max-width:700px){.topbar{height:82px;padding:12px 20px}.brand{font-size:18px;gap:10px}.brand-icon{width:26px;height:26px}.brand small{font-size:7px}.energy strong{font-size:18px}.energy small{font-size:9px}main{padding:0 18px 20px}.hero{padding:30px 0 22px;gap:10px;grid-template-columns:1fr 1fr}.hero .eyebrow{font-size:8px;letter-spacing:.7px;margin-bottom:16px}h1{font-size:39px;letter-spacing:-1px}.hero-copy p{font-size:10px;line-height:1.8;margin:14px 0}.hero-meta{font-size:8px;gap:8px;flex-direction:column;margin-top:16px}.hero-art{min-height:195px}.art-label{padding:11px 10px;font-size:8px;letter-spacing:0}.art-label span{display:none}.hero-art canvas{height:126px}.art-footer{font-size:8px;padding:8px 10px 12px}.mode-grid{gap:12px}.mode{padding:17px 14px}.mode-number{font-size:7px;letter-spacing:1.1px}.mode strong{font-size:20px;margin-top:12px}.mode strong span{font-size:19px}.mode p{font-size:10px;margin:12px 0 20px}.mode footer{display:block;padding-top:12px;font-size:11px}.mode footer small{font-size:8px;display:block;margin-top:7px}.section-heading{margin:29px 0 14px}.section-heading h2{font-size:15px}.section-heading>span{font-size:10px}.level-grid{grid-template-columns:repeat(4,1fr);gap:9px}.level-card{padding:11px 8px}.level-card canvas{height:44px}.level-card .level-name{font-size:9px}.page-footer{font-size:8px;gap:10px;margin-top:18px}.page-footer button{font-size:9px}.narrow{margin-top:20px;padding:0 3px}.narrow h1{font-size:37px}.narrow .eyebrow{font-size:10px}.arena{margin-top:16px}.arena-heading h2{font-size:17px}.hud{padding:11px 13px}.hud strong{font-size:20px}.arena-heading{gap:11px}.controls-hint{font-size:8px}.game-overlay{padding:23px}.game-overlay h2{font-size:28px}.game-overlay.ready-overlay{padding-bottom:100px}.room-code strong{font-size:42px}.hint{font-size:10px}body:has(.arena:not([hidden])) .topbar{height:68px}.arena-heading small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.primary{background:#057af1 url('/assets/button-primary-clean.png') center/100% 100% no-repeat;color:#fff;border:0;text-shadow:0 1px 2px #002a63}
body:has(.arena:not([hidden])) .arena{max-width:min(420px,calc(63.158dvh - 189.474px));width:100%}
@media(max-height:600px){body:has(.arena:not([hidden])) .arena{max-width:260px}}
body:has(.arena:not([hidden])) .topbar{height:56px}
body:has(.arena:not([hidden])) main{padding-bottom:4px}
body:has(.arena:not([hidden])) .arena{margin-top:10px}
.arena .arena-heading{margin-bottom:10px}.arena .hud{padding:8px 12px;margin-bottom:8px}.arena .drag-zone{height:46px;margin-top:8px}.arena .controls-hint{margin:6px 0 8px}

.brick-legend{display:flex;justify-content:center;gap:14px;font-size:8px;color:#95a7c4;margin-top:9px}.brick-legend span{display:flex;align-items:center;gap:5px}.brick-legend i{width:7px;height:7px;display:inline-block}.brick-legend .normal{background:#69e9d7}.brick-legend .durable{background:#b9a0ff}.brick-legend .fixed{background:linear-gradient(135deg,#727d9b 40%,#25304a 41%,#25304a 58%,#727d9b 59%)}

body:has(.arena:not([hidden])) .arena:has(#opponent-bar:not([hidden])){max-width:min(420px,calc(63.158dvh - 220px))}

.footer-links{display:flex;gap:16px}.power-hud{position:absolute;top:0;left:0;right:0;min-height:26px;padding:8px 10px;color:#a9bbd6;font-size:9px;letter-spacing:.2px;background:linear-gradient(#0c1737ee,#0c173700);pointer-events:none;z-index:1;white-space:nowrap}.release-ball{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);min-height:44px;width:205px;padding:9px 12px;font-size:12px;z-index:2;background:#3d234bdd;border-color:#bd81b8;color:#ffddf6}.game-overlay{z-index:3}.ready-guide{background:none;color:#9eafc9;font-size:11px;padding:8px 10px;min-height:38px;text-decoration:underline;pointer-events:auto}.game-overlay.ready-overlay .ready-guide{box-shadow:none}.power-guide-list{margin:18px 0}.power-guide-item{display:flex;align-items:flex-start;gap:12px;margin:17px 0}.power-guide-item>i{width:30px;height:30px;border:1px solid var(--power-color);color:var(--power-color);display:grid;place-items:center;font:700 16px monospace;font-style:normal;flex-shrink:0;border-radius:4px;background:#0a142d}.power-guide-item>div{flex:1}.power-guide-item strong{font-size:14px;display:flex;justify-content:space-between;gap:12px}.power-guide-item small{font-size:10px;color:#8d9bb9;font-weight:400}.power-guide-item p{margin:6px 0 0;font-size:11px;line-height:1.7}dialog{max-height:85dvh;overflow-y:auto}