:root{--arcade-blue:#4f86b3;--arcade-blue-soft:#dcebf5;--arcade-mint:#a8d6c4;--arcade-mint-deep:#347461;--arcade-coral:#df6c58;--arcade-yellow:#f1c76e;--arcade-paper:#fffdf8;--arcade-shadow:0 18px 48px #5c4a3214}
body[data-arcade]{overflow-x:hidden;background:radial-gradient(circle at 8% 3%,#dcecdf 0,transparent 29rem),radial-gradient(circle at 93% 8%,#dcebf5 0,transparent 27rem),linear-gradient(150deg,#f6f1e8,#fffaf0);color:#263a34}
body[data-arcade] button{min-width:0;min-height:44px}
.arcade-shell{max-width:1180px}.arcade-main{padding-bottom:8px}.arcade-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin:8px 0 18px;padding:28px 32px;overflow:hidden;border:1px solid #fff;border-radius:28px;background:linear-gradient(135deg,#fffdf7e8,#f3f7eef2);box-shadow:var(--arcade-shadow)}
.arcade-hero:after{content:"";position:absolute;right:-45px;bottom:-90px;width:280px;height:280px;border:40px solid #afd8c82e;border-radius:50%;pointer-events:none}.arcade-hero .eyebrow{margin-bottom:8px;color:var(--arcade-mint-deep)}.arcade-hero h1{margin:0;font:750 clamp(34px,5vw,55px)/1.08 "Noto Serif SC","Songti SC",serif;letter-spacing:-.055em}.arcade-hero h1 span{color:var(--arcade-blue)}.arcade-hero p:not(.eyebrow){max-width:620px;margin:12px 0 0;color:#6b7972;font-size:12px;line-height:1.8}.arcade-stamp{position:relative;z-index:1;width:112px;height:112px;display:grid;place-content:center;border:2px dashed #6ba08c88;border-radius:50%;background:#e4f1e9;color:#36715d;text-align:center;transform:rotate(7deg)}.arcade-stamp strong{font:800 31px/1 Georgia,serif}.arcade-stamp small{margin-top:7px;font-size:7px;font-weight:850;letter-spacing:.14em}.arcade-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}.arcade-play-card{padding:20px;min-width:0}.arcade-side{display:grid;gap:14px}.arcade-side .card{padding:19px;border-radius:20px}.arcade-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.arcade-game-head .eyebrow{margin:0 0 5px;font-size:8px}.arcade-game-head h2{margin:0;font:750 25px/1.15 "Noto Serif SC","Songti SC",serif}.arcade-status{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#e7f0df;color:#537347;font-size:10px;font-weight:850}.arcade-status.danger{background:#fbe9e2;color:#a94d3e}.arcade-status.paused{background:#e7eef6;color:#4a6f92}.arcade-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}.arcade-stat{min-width:0;padding:9px 7px;border:1px solid #e3e9df;border-radius:11px;background:#f2f5ed;text-align:center}.arcade-stat strong{display:block;overflow:hidden;color:#3e705f;font:800 20px/1.1 ui-monospace,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}.arcade-stat span{display:block;margin-top:4px;color:#88938b;font-size:8px}.arcade-canvas-wrap{position:relative;width:min(100%,650px);margin:auto;overflow:hidden;border:1px solid #cddccf;border-radius:20px;background:#e7eee5;box-shadow:0 7px 0 #b8cbbd;isolation:isolate}.arcade-canvas-wrap.square{aspect-ratio:1}.arcade-canvas-wrap.portrait{width:min(100%,560px);aspect-ratio:4/5;background:linear-gradient(#e4f0ed,#f9e8cc)}.arcade-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.game-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:20px;background:#fffdf6c7;backdrop-filter:blur(2px)}.game-overlay-card{max-width:330px;padding:20px;border:1px solid #fff;border-radius:18px;background:#fffdf8ed;box-shadow:0 15px 42px #41564a24;text-align:center}.game-overlay-card b{display:block;color:#305e51;font:750 24px/1.2 "Noto Serif SC","Songti SC",serif}.game-overlay-card p{margin:8px 0 14px;color:#718078;font-size:11px;line-height:1.7}.game-overlay-card .btn{width:100%}.arcade-message{min-height:20px;margin:12px 2px 0;color:#a64f40;font-size:11px;line-height:1.7}.arcade-message:empty{display:none}.arcade-note{margin:11px 2px 0;color:#8d968e;font-size:9px;line-height:1.8}.arcade-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px}.dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,48px);gap:5px;touch-action:none}.control-key{display:grid;place-items:center;padding:0;border:1px solid #ceddce;border-radius:12px;background:#edf3e7;color:#356d59;font-size:21px;font-weight:900;box-shadow:0 3px 0 #bbccba;user-select:none;-webkit-user-select:none}.control-key[data-direction="up"]{grid-column:2;grid-row:1}.control-key[data-direction="left"]{grid-column:1;grid-row:2}.control-key[data-direction="down"]{grid-column:2;grid-row:2}.control-key[data-direction="right"]{grid-column:3;grid-row:2}.control-key.pause-key{grid-column:2;grid-row:3;font-size:13px}.control-key.active{background:#cfe8db;transform:translateY(2px);box-shadow:0 1px 0 #aabfad}.arcade-action{min-width:96px;min-height:58px;padding:0 18px;border-radius:18px;background:var(--arcade-blue);color:#fff;font-size:13px;font-weight:850;box-shadow:0 5px 0 #35688f}.arcade-action.coral{width:104px;height:104px;border-radius:50%;background:var(--arcade-coral);box-shadow:0 6px 0 #b44e3d;font-size:15px}.arcade-action:disabled{box-shadow:none}.arcade-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.name-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.name-form label{font-size:9px}.name-form input{min-height:44px}.name-form .btn{min-height:44px}.connection-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:10px 12px;border:1px solid #e7d7b5;border-radius:12px;background:#fff6de;color:#8c6534;font-size:10px;line-height:1.6}.connection-note.online{border-color:#cae0d2;background:#eaf4ec;color:#47735e}.connection-note.error{border-color:#efd5cb;background:#fff0ea;color:#9d5846}.connection-note button{flex:0 0 auto;padding:0 10px;border-radius:9px;background:#ffffffb5;color:inherit;font-size:10px;font-weight:800}.leader-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.leader-title h2{margin:0;font-size:17px}.leader-title span{color:#8c978f;font-size:8px}.leaderboard{display:grid;gap:5px;margin:0;padding:0;list-style:none}.leaderboard li{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:7px;padding:8px;border-radius:9px;background:#f3f5ec;color:#68776e;font-size:10px}.leaderboard li.me{background:#e5f0e5;color:#3e6d56}.leaderboard .rank{color:#b08340;font:800 11px ui-monospace,monospace}.leaderboard .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .score{color:#3f705d;font:800 12px ui-monospace,monospace}.leader-empty{padding:17px 8px;border:1px dashed #d8dfd2;border-radius:10px;color:#91998f;font-size:10px;line-height:1.7;text-align:center}.personal-record{margin-top:10px;padding:10px 11px;border-radius:10px;background:#f9f0d7;color:#8b7041;font-size:9px;line-height:1.6}.personal-record strong{font:800 17px ui-monospace,monospace}.arcade-rules h2{margin:0 0 9px;font-size:15px}.arcade-rules ul{margin:0;padding-left:17px;color:#758278;font-size:10px;line-height:1.9}.arcade-rules li+li{margin-top:3px}.local-badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 8px;border-radius:999px;background:#edf0e5;color:#788371;font-size:8px;font-weight:800}.tank-controls{display:grid;grid-template-columns:minmax(170px,1fr) minmax(110px,.75fr);align-items:center;gap:18px;max-width:480px;margin-inline:auto}.tank-controls .dpad{justify-self:end}.fire-zone{display:grid;justify-items:center;gap:7px}.fire-zone small{color:#90998f;font-size:8px}.tank-hud-line{display:flex;align-items:center;gap:7px;color:#748177;font-size:9px}.life-dots{display:inline-flex;gap:3px}.life-dots i{width:9px;height:9px;border-radius:3px;background:var(--arcade-coral)}.life-dots i.empty{background:#e5ddd2}.stack-tap{display:grid;place-items:center;margin-top:13px}.stack-tap .arcade-action{width:min(100%,280px)}.perfect-flash{position:absolute;z-index:3;left:50%;top:24%;padding:7px 12px;border-radius:999px;background:#fff4c9;color:#a56b1e;font-size:12px;font-weight:900;opacity:0;transform:translate(-50%,12px);pointer-events:none}.perfect-flash.show{animation:perfect-pop .65s ease-out}.stack-guide{position:absolute;z-index:2;left:50%;bottom:13px;transform:translateX(-50%);max-width:calc(100% - 24px);padding:7px 11px;border-radius:999px;background:#ffffffe3;color:#59706a;font-size:9px;font-weight:750;white-space:nowrap;pointer-events:none}.stack-score-big{position:absolute;z-index:2;top:12px;left:16px;color:#315f57;font:900 clamp(25px,5vw,42px)/1 ui-monospace,monospace;text-shadow:0 2px #fff}.stack-score-big small{display:block;margin-top:4px;font:800 7px system-ui,sans-serif;letter-spacing:.15em}.keys-hint{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.key-hint{padding:5px 7px;border:1px solid #dfe3d8;border-radius:6px;background:#f8f8f1;color:#7f897f;font-size:8px}.key-hint kbd{font:800 9px ui-monospace,monospace}.arcade-footer{margin-top:22px}
@keyframes perfect-pop{0%{opacity:0;transform:translate(-50%,12px) scale(.8)}35%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,-18px) scale(1)}}
@media(max-width:850px){.arcade-layout{grid-template-columns:1fr}.arcade-side{grid-template-columns:1fr 1fr}.arcade-side .leader-card{grid-column:1/-1}.arcade-play-card{padding:18px}.arcade-canvas-wrap{max-width:620px}}
@media(max-width:620px){.arcade-shell{width:calc(100% - 20px)}.arcade-hero{min-height:180px;margin-top:2px;padding:23px 20px;border-radius:22px}.arcade-hero h1{font-size:38px}.arcade-hero p:not(.eyebrow){max-width:76%;font-size:10px}.arcade-stamp{position:absolute;right:16px;bottom:19px;width:78px;height:78px}.arcade-stamp strong{font-size:23px}.arcade-stamp small{font-size:5px}.arcade-layout{gap:12px}.arcade-play-card{padding:12px;border-radius:19px}.arcade-game-head{margin-bottom:10px}.arcade-game-head h2{font-size:22px}.arcade-status{padding-inline:9px;font-size:9px}.arcade-stats{gap:5px;margin-bottom:9px}.arcade-stat{padding:7px 3px}.arcade-stat strong{font-size:18px}.arcade-canvas-wrap{border-radius:14px;box-shadow:0 5px 0 #b8cbbd}.arcade-controls{margin-top:11px;gap:10px}.dpad{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,44px);gap:4px}.control-key{border-radius:10px}.tank-controls{grid-template-columns:minmax(158px,1fr) minmax(92px,.68fr);gap:7px}.tank-controls .dpad{justify-self:center}.arcade-action.coral{width:84px;height:84px;min-width:84px;min-height:84px}.arcade-side{grid-template-columns:1fr;gap:10px}.arcade-side .card{padding:16px}.name-form{grid-template-columns:minmax(0,1fr) 104px}.name-form .btn{padding-inline:7px;font-size:10px}.connection-note{font-size:9px}.stack-guide{font-size:8px}.arcade-footer{font-size:8px}}
@media(max-width:390px){.arcade-shell{width:calc(100% - 14px)}.arcade-hero{padding-inline:16px}.arcade-hero h1{font-size:34px}.arcade-stamp{right:10px;width:68px;height:68px}.arcade-game-head{gap:8px}.arcade-game-head h2{font-size:20px}.dpad{grid-template-columns:repeat(3,47px);grid-template-rows:repeat(3,44px)}.tank-controls{grid-template-columns:151px minmax(80px,1fr)}.arcade-action.coral{width:78px;height:78px;min-width:78px;min-height:78px;font-size:13px}.arcade-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){.perfect-flash.show{animation:none;opacity:1}.arcade-status,.game-overlay{transition:none}}