:root{--bg:#241c36;--bg-deep:#1b1529;--card:#342a4f;--card-hi:#45386a;--line:#5a4c80;--ink:#fff6ea;--ink-dim:#c9bfdc;--ink-faint:#9a8fb4;--accent:#f6a23c;--accent-hi:#ffc06b;--accent-ink:#2b1606;--pink:#ff7eb6;--shadow:#120d1d;--radius:14px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at 20% 0%, #3a2c5c 0%, transparent 55%), radial-gradient(circle at 100% 100%, #3b2344 0%, transparent 50%), var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;background-attachment:fixed;font-family:Mitr,Noto Sans Thai,Sukhumvit Set,Thonburi,system-ui,sans-serif;font-weight:400;line-height:1.55}h1,h2,h3{margin:0;font-weight:600;line-height:1.2}p{margin:0}.pixel{image-rendering:pixelated;image-rendering:crisp-edges}.muted{color:var(--ink-dim)}.small{font-size:.85rem}.center{text-align:center}.btn{font:inherit;cursor:pointer;border:2px solid var(--shadow);background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 var(--shadow);border-radius:12px;padding:.6em 1.2em;font-weight:500;transition:transform 60ms,box-shadow 60ms,background .15s}.btn:hover:not(:disabled){background:var(--accent-hi)}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--shadow);transform:translateY(3px)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn.secondary{background:var(--card-hi);color:var(--ink)}.btn.secondary:hover:not(:disabled){background:#54457d}.btn.ghost{box-shadow:none;color:var(--ink-dim);background:0 0;border-color:#0000}.btn.ghost:hover{color:var(--ink);background:0 0}.btn.big{padding:.7em 1.2em;font-size:1.15rem}.btn.small{box-shadow:0 3px 0 var(--shadow);border-radius:9px;padding:.3em .75em;font-size:.85rem}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.tank-shell{place-items:center;min-height:100vh;padding:24px 16px;display:grid}.panel{background:var(--card);border:2px solid var(--shadow);border-radius:var(--radius);width:min(100%,460px);box-shadow:0 6px 0 var(--shadow);flex-direction:column;gap:16px;padding:28px 24px;display:flex}.panel.wide{width:min(100%,760px)}.panel-title{text-align:center;font-size:1.6rem}.panel>.btn.ghost{align-self:center}.tank-logo{text-align:center}.logo-art{justify-content:center;align-items:flex-end;gap:14px;margin-bottom:12px;display:flex}.logo-art img{width:56px;height:56px}.logo-art img:first-child{margin-bottom:24px}.tank-logo h1{color:var(--accent);text-shadow:0 3px 0 var(--shadow);font-size:clamp(1.6rem,6vw,2.2rem)}.tank-logo p{color:var(--ink-dim);margin-top:6px}.menu{flex-direction:column;gap:12px;display:flex}.stage-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px;display:grid}.difficulty{justify-content:center;gap:8px;display:flex}.difficulty-btn{font:inherit;cursor:pointer;border:2px solid var(--shadow);background:var(--card-hi);min-width:84px;color:var(--ink);box-shadow:0 3px 0 var(--shadow);border-radius:999px;padding:.45em 1em;font-weight:500}.difficulty-btn.is-on{background:var(--accent);color:var(--accent-ink)}.hud-loop{color:var(--pink);font-size:.8em}.stage-btn{font:inherit;color:var(--ink);cursor:pointer;border:2px solid var(--shadow);background:var(--card-hi);box-shadow:0 4px 0 var(--shadow);text-align:left;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.stage-btn:hover:not(:disabled){background:#54457d}.stage-btn span{color:var(--ink-dim)}.stage-btn:disabled{opacity:.45;cursor:not-allowed}.howto{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px 28px;display:grid}.howto section{flex-direction:column;gap:8px;display:flex}.howto h2{color:var(--accent);font-size:1.1rem}.howto-row{align-items:center;gap:12px;display:flex}.howto-row img{flex:none;width:32px;height:32px}.howto-row .item-badge{background:#fff7d6;border:2px solid #3b2414;border-radius:6px;width:36px;height:36px}.keys{gap:4px;margin:0;padding-left:1.1em;display:grid}kbd{background:var(--bg-deep);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:0 6px;font-family:inherit;font-size:.85em}.flash{color:#ff4d6d}.field{flex-direction:column;gap:6px;display:flex}.field.check{flex-direction:row;align-items:center;gap:10px}.field input[type=range]{accent-color:var(--accent)}.field input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent)}.support-link{border:2px solid var(--shadow);color:#4a1730;box-shadow:0 3px 0 var(--shadow);background:#ffd6e7;border-radius:999px;align-self:center;align-items:center;gap:8px;padding:6px 14px 6px 10px;font-size:.9rem;font-weight:500;text-decoration:none;display:inline-flex}.support-link:hover{background:#ffe6f0}.support-link:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(2px)}a.btn{text-align:center;text-decoration:none;display:inline-block}.features{color:var(--ink-dim);gap:4px;margin:0;padding-left:1.2em;font-size:.9rem;display:grid}.account{background:var(--bg-deep);border-radius:12px;flex-direction:column;align-items:center;gap:8px;padding:12px;display:flex}.account-who{align-items:center;gap:10px;font-size:.9rem;display:flex}.account-actions{gap:8px;display:flex}.account-error{color:#ff9aac;font-size:.9rem}.google-button{justify-content:center;min-height:44px;display:flex}.avatar{border:2px solid var(--shadow);border-radius:50%;flex:none}.avatar.placeholder{background:var(--card-hi);width:28px;height:28px;display:inline-block}.leaderboard{gap:6px;margin:0;padding:0;list-style:none;display:grid}.leaderboard li{background:var(--card-hi);font-variant-numeric:tabular-nums;border-radius:10px;grid-template-columns:2em 28px 1fr auto;align-items:center;gap:10px;padding:6px 10px;display:grid}.leaderboard li.is-you{outline:2px solid var(--accent)}.leaderboard .rank{color:var(--accent);text-align:center;font-weight:600}.leaderboard .who{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.footer-link,.link-button{font:inherit;color:var(--ink-faint);cursor:pointer;background:0 0;border:none;align-self:center;padding:0;font-size:.8rem;text-decoration:underline}.privacy section{flex-direction:column;gap:6px;display:flex}.privacy h2{color:var(--accent);font-size:1.1rem}.privacy ul{gap:4px;margin:0;padding-left:1.2em;display:grid}.privacy a{color:var(--accent-hi)}.play{background:var(--bg);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.play.desktop{align-items:center;gap:10px;padding:12px 16px}.play.touch{padding:max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;gap:4px}html:has(.play.touch){overscroll-behavior:none}.hud{border:2px solid var(--shadow);background:#1b1529d9;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;max-width:100%;min-height:40px;padding:3px 4px 3px 12px;font-size:.95rem;display:flex}.play.touch .hud{flex-wrap:nowrap;width:100%;min-height:38px}.hud-stage{white-space:nowrap;align-items:baseline;gap:8px;min-width:0;display:flex}.hud-stage strong{color:var(--accent)}.hud-stage span{color:var(--ink-dim);text-overflow:ellipsis;overflow:hidden}.hud-score{white-space:nowrap;font-variant-numeric:tabular-nums}.hud-right{align-items:center;gap:12px;margin-left:auto;display:flex}.hud-item{align-items:center;gap:4px;display:flex}.hud-item b{font-variant-numeric:tabular-nums;min-width:1.1em;font-weight:600}.hud-hearts{gap:2px}.hud-hearts img:first-child{margin-right:3px}.pause-btn{border:2px solid var(--shadow);background:var(--card-hi);width:36px;height:36px;box-shadow:0 2px 0 var(--shadow);cursor:pointer;border-radius:50%;flex:none;justify-content:center;align-items:center;gap:4px;padding:0;display:flex}.pause-btn span{background:var(--ink);border-radius:1px;width:4px;height:14px}.pause-btn:active{box-shadow:none;transform:translateY(2px)}@media (width<=560px){.hud-stage span{display:none}}.game-area{flex:1 1 0;justify-content:center;align-items:center;width:100%;min-height:0;display:flex;position:relative}.play.touch.portrait .game-area{align-items:flex-start}.stage-wrap{flex:none;position:relative}.stage-wrap canvas{box-shadow:0 0 0 2px var(--shadow);border-radius:4px;display:block}.play.touch .stage-wrap canvas{touch-action:none}.play-hint{color:var(--ink-faint);text-align:center;font-size:.85rem}.overlay{z-index:10;background:#120d1d99;place-items:center;padding:12px;display:grid;position:fixed;inset:0}.overlay.see-through{pointer-events:none;background:0 0}.banner{background:var(--card);border:2px solid var(--shadow);box-shadow:0 5px 0 var(--shadow);border-radius:var(--radius);text-align:center;flex-direction:column;padding:14px 32px;font-size:clamp(1.3rem,4vw,2.4rem);font-weight:600;animation:.35s ease-out pop;display:flex}.banner small{color:var(--accent);font-size:.55em;font-weight:500}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.ov-card{background:var(--card);border:2px solid var(--shadow);box-shadow:0 6px 0 var(--shadow);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:12px;width:min(100%,420px);max-height:100%;padding:20px 24px;animation:.25s ease-out pop;display:flex;overflow:auto}.ov-card h2{font-size:1.5rem}.ov-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.hint{color:var(--ink-faint);font-size:.8rem}.cat-portrait{width:64px;height:64px}.tally{font-variant-numeric:tabular-nums;gap:6px;width:100%;display:grid}.tally-row{text-align:left;grid-template-columns:32px 1fr auto auto;align-items:center;gap:10px;display:grid}.tally-row img{width:32px;height:32px}.tally .num{text-align:right;min-width:4.5em}.tally-total{border-top:2px dashed var(--line);justify-content:space-between;margin-top:4px;padding-top:8px;font-weight:600;display:flex}.touch-layer{--ring:clamp(104px, 30vh, 140px);--fire:clamp(58px, 18vh, 74px);--edge:14px;pointer-events:none;position:absolute;inset:0}.touch-zone{pointer-events:auto;touch-action:none;position:absolute}.touch-stick-zone{width:50%;top:0;bottom:0;left:0}.stick-ring{left:calc(var(--edge) + var(--ring) / 2);top:calc(100% - var(--edge) - var(--ring) / 2);width:var(--ring);height:var(--ring);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);pointer-events:none;background:#d6c8ff1a;border:2px solid #e8deff59;border-radius:50%;place-items:center;transition:left .12s ease-out,top .12s ease-out,background .12s;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 0 18px #ffffff14}.stick-ring.is-active{background:#d6c8ff29;transition:none}.stick-knob{background:radial-gradient(circle at 35% 30%,#ffffffbf,#c8b9f08c 45%,#9682d280);border:2px solid #ffffff80;border-radius:50%;width:44%;height:44%;box-shadow:0 3px 8px #0000004d}.stick-arrow{opacity:.5;border:6px solid #0000;width:0;height:0;position:absolute}.stick-arrow.up{border-top-width:0;border-bottom-color:#f4ecff;top:6px}.stick-arrow.down{border-top-color:#f4ecff;border-bottom-width:0;bottom:6px}.stick-arrow.left{border-left-width:0;border-right-color:#f4ecff;left:6px}.stick-arrow.right{border-left-color:#f4ecff;border-right-width:0;right:6px}.touch-fire-zone{width:calc(var(--fire) + var(--edge) * 2 + 40px);height:calc(var(--ring) + var(--edge) * 2 + 20px);padding:0 calc(var(--edge) + 6px) calc(var(--edge) + (var(--ring) - var(--fire)) / 2);justify-content:flex-end;align-items:flex-end;display:flex;bottom:0;right:0}.fire-button{width:var(--fire);height:var(--fire);font-size:calc(var(--fire) * .3);color:#fff6ea;text-shadow:0 1px 2px #0000008c;-webkit-backdrop-filter:blur(2px)saturate(1.2);backdrop-filter:blur(2px)saturate(1.2);pointer-events:none;background:radial-gradient(circle at 35% 28%,#ffe2aab3,#ff9e2e8c 55%,#e8781e80);border:2px solid #ffecc8b3;border-radius:50%;place-items:center;font-weight:600;transition:transform 50ms,background 50ms;display:grid;box-shadow:inset 0 2px 6px #ffffff59,0 4px 14px #00000047}.fire-button.is-down{background:radial-gradient(circle at 35% 28%,#ffe6becc,#f6a23cb3 55%,#c8702aa6);transform:scale(.94)}.rotate-screen{z-index:20;text-align:center;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:24px;display:flex;position:fixed;inset:0}.rotate-screen p{max-width:300px}.rotate-phone{border:4px solid var(--accent);border-radius:10px;width:46px;height:78px;margin-bottom:18px;animation:2.2s ease-in-out infinite rotate-hint}@keyframes rotate-hint{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}