/* Shared Tank Pixel landscape mode — used only while actually playing on touch devices. */
.tank-rotate-prompt[hidden]{display:none!important}
.tank-rotate-prompt{position:fixed;z-index:99999;inset:0;display:grid;place-items:center;overflow:auto;padding:max(24px,env(safe-area-inset-top)) 25px max(26px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 35%,#153e44 0%,#081c24 58%,#061118 100%);color:#e6faf2;text-align:center;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.tank-rotate-content{max-width:370px;margin:auto}
.tank-rotate-kicker{font-size:10px;letter-spacing:.21em;font-weight:900;color:#8bdbbd}
.tank-rotate-content h2{font-size:clamp(26px,7vw,40px);line-height:1;letter-spacing:-.05em;margin:20px 0 14px;font-weight:1000}
.tank-rotate-content p{font-size:15px;line-height:1.65;color:#bbd4d6;margin:0 auto 12px}
.tank-rotate-content p strong{color:#77ebba}
.tank-rotate-content .tank-rotate-secondary{font-size:12px;color:#91aeb5;margin-bottom:24px}
.tank-rotate-content button{padding:13px 22px;min-height:44px;border-radius:5px;border:1px solid #678e95;background:#142e39;color:#d5f4ee;font:800 13px system-ui;cursor:pointer}
.tank-rotate-phone{width:140px;height:120px;position:relative;margin:23px auto 4px;display:grid;place-items:center}
.tank-rotate-phone:after{content:'↻';position:absolute;right:-8px;top:0;font-size:51px;line-height:1;color:#70eab6;opacity:.8}
.tank-rotate-display{width:58px;height:99px;position:relative;border:5px solid #8fe6c6;background:#102c38;border-radius:13px;box-shadow:0 0 26px #66e6b12d;transform:rotate(78deg)}
.tank-rotate-display:before{content:'';position:absolute;inset:7px;border:1px solid #52797d;background:linear-gradient(135deg,#183f47,#0a1c25);border-radius:3px}
.tank-rotate-display span,.tank-rotate-display i{position:absolute;top:39px;width:8px;height:12px;background:#66e6b1;border-radius:2px}
.tank-rotate-display span{left:13px}.tank-rotate-display i{right:13px;background:#ef7880}
@media(prefers-reduced-motion:no-preference){.tank-rotate-phone{animation:tank-rotate-hint 1.4s ease-in-out 1}@keyframes tank-rotate-hint{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-18deg)}}}
.tank-portrait-tip{display:none}
@media (orientation:portrait) and (max-width:1100px) and (pointer:coarse){
 .tank-portrait-tip{display:block;margin:13px 0 16px;padding:11px 15px;background:#1f343b;border-left:3px solid #70eab6;color:#d6efe5;font-size:13px;line-height:1.45}
}

/* Combat occupies the visual viewport. Controls and HUD overlay the same surface. */
body.tank-playing{overflow:hidden;overscroll-behavior:none;touch-action:none;background:#162c31}
body.tank-playing .game-shell,body.tank-playing .tp-shell{
 position:fixed;left:var(--tank-vv-left,0px);top:var(--tank-vv-top,0px);width:var(--tank-vv-width,100vw);height:var(--tank-vv-height,100dvh);
 box-sizing:border-box;max-width:none;max-height:none;min-height:0;margin:0;padding:0;overflow:hidden;display:block;
}
body.tank-playing .topbar,body.tank-playing .page-footer,body.tank-playing .howto,body.tank-playing .tp-bar,body.tank-playing .arena-corner,body.tank-playing .tank-release-stamp{display:none}
body.tank-playing .play-layout,body.tank-playing .game-card,body.tank-playing .tp-shell main,body.tank-playing .tp-match:not([hidden]){
 position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;display:block;overflow:hidden;box-shadow:none;
}
body.tank-playing .arena-frame,body.tank-playing .tp-arena{
 position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0;margin:0;overflow:hidden;
}
body.tank-playing .arena-frame canvas,body.tank-playing .tp-arena canvas{display:block;width:100%;height:100%;object-fit:fill;image-rendering:auto;touch-action:none}
body.tank-playing .battle-top{
 position:absolute;z-index:6;top:max(6px,var(--tank-safe-top,0px));left:var(--tank-control-left,12px);right:var(--tank-control-right,12px);
 width:auto;height:46px;min-height:0;margin:0;padding:5px 10px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;
 border:1px solid #9bb8a42b;border-radius:8px;background:linear-gradient(180deg,#0b1d28e8,#0b1d2878);pointer-events:none;
}
body.tank-playing .player-avatar{display:none}
body.tank-playing .player-panel{gap:7px;min-width:0}
body.tank-playing .player-panel>div{width:clamp(75px,12vw,150px);min-width:0}
body.tank-playing .player-panel.p2{justify-content:flex-end}
body.tank-playing .player-label{font-size:9px;line-height:12px;margin-bottom:3px;white-space:nowrap}
body.tank-playing .hp-count{font-size:12px}
body.tank-playing .battle-center{min-width:80px;display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;text-align:center}
body.tank-playing .battle-center .stage{grid-column:1/3;font-size:8px;line-height:10px;letter-spacing:.05em}
body.tank-playing .battle-center .round-badge{font-size:9px;line-height:14px;letter-spacing:.05em}
body.tank-playing .battle-center b{font-size:18px;line-height:20px;margin:0}
body.tank-playing .squad-status{position:absolute;z-index:5;top:calc(max(6px,var(--tank-safe-top,0px)) + 50px);left:50%;transform:translateX(-50%);width:max-content;max-width:75%;border:0;border-radius:4px;background:#071924b3;padding:3px 7px;gap:9px;font-size:8px;pointer-events:none}
body.tank-playing .squad-status span{font-size:8px;padding:0;white-space:nowrap}
body.tank-playing .battle-bottom{
 position:absolute;z-index:9;left:50%;bottom:max(10px,var(--tank-safe-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 2 * var(--tank-control-size,108px) - 60px);
 min-height:0;height:auto;margin:0;padding:4px 6px;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;border:1px solid #769d9538;border-radius:6px;background:#0b1d28c9;
}
body.tank-playing .tactical-status{gap:5px;flex-wrap:nowrap}
body.tank-playing .tactical-status strong{font-size:8px;letter-spacing:.04em}
body.tank-playing .dash-status,body.tank-playing .tactical-status small{display:none}
body.tank-playing .game-actions{display:flex;gap:5px}
body.tank-playing .game-actions button{min-height:32px;font-size:9px;padding:5px 9px;touch-action:none}
body.tank-playing .tank-loadout{gap:4px}
body.tank-playing .tank-loadout .tank-ability{min-height:32px;padding:3px 7px}
body.tank-playing .combat-toast{top:25%;bottom:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:80%;font-size:13px;pointer-events:none}
/* Both sticks sit on the safe bottom edge. Only the right stick owns the action rows. */
body.tank-playing .touch-controls:not([hidden]),body.tank-playing .tp-controllers{
 display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;z-index:15;pointer-events:none;
}
body.tank-playing .touch-pad-wrap,body.tank-playing .tp-controllers .tp-pad{
 position:absolute;left:var(--tank-control-left,12px);right:auto;top:auto;bottom:calc(max(8px,var(--tank-safe-bottom,0px)) + 5px);transform:none;margin:0;
 width:var(--tank-control-size,108px);height:var(--tank-control-size,108px);box-sizing:border-box;pointer-events:none;display:block;
}
body.tank-playing .touch-pad-wrap.right,body.tank-playing .tp-controllers .tp-aim{left:auto;right:var(--tank-control-right,12px)}
body.tank-playing .touch-pad-wrap>span{position:absolute;left:-15px;right:-15px;bottom:38%;font-size:8px;line-height:12px;text-align:center;z-index:2;pointer-events:none;color:#d4e5db;text-shadow:0 1px 3px #06151b;letter-spacing:.02em}
body.tank-playing .touch-pad-wrap.right>span{display:none}
body.tank-playing .touch-pad-wrap .touch-pad,body.tank-playing .tp-controllers .tp-pad{
 width:var(--tank-control-size,108px);height:var(--tank-control-size,108px);min-width:0;min-height:0;pointer-events:auto;touch-action:none;border-width:2px;box-shadow:inset 0 0 16px #08151a88,0 0 0 5px #071c2455;background:radial-gradient(circle,#274a5266,#13283199);
}
body.tank-playing .touch-pad-wrap .touch-knob,body.tank-playing .tp-controllers .tp-pad span{width:40%;height:40%;border-width:2px;opacity:.85}
body.tank-playing .touch-action-panel,body.tank-playing .tp-touch-row{
 position:absolute;left:auto;right:0;top:auto;bottom:calc(var(--tank-control-size,108px) + 16px);width:210px;height:auto;display:flex;flex-direction:column;gap:6px;margin:0;padding:0;pointer-events:none;
}
body.tank-playing .touch-action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:100%}
body.tank-playing .touch-action-row[hidden]{display:none!important}
body.tank-playing .touch-action-panel button,body.tank-playing .tp-touch-row button{
 position:static;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:auto;min-width:0;height:44px;min-height:44px;max-height:none;margin:0;padding:4px 3px;
 border:1px solid #a6bca178;border-radius:8px;background:#122c34e6;color:#e2ead5;font:800 9px/1.2 system-ui;letter-spacing:.01em;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;box-shadow:inset 0 1px 0 #deefd12e;
}
body.tank-playing .touch-action-panel .missile,body.tank-playing .tp-touch-row .missile{color:#f3bc82;border-color:#b7875866}
body.tank-playing .touch-action-panel .shield,body.tank-playing .tp-touch-row .shield{color:#9fdaec;border-color:#79a6bd99}
body.tank-playing .touch-action-panel button:disabled,body.tank-playing .tp-touch-row button:disabled{opacity:.4;background:#0c222cbd}
body.tank-playing .touch-action-panel button.active,body.tank-playing .tp-touch-row button.active{opacity:1;border-color:#c2f8ff;background:#24617bd9;box-shadow:0 0 12px #84cbe451}
body.tank-playing .touch-action-panel button:active,body.tank-playing .tp-touch-row button:active{background:#427367e8}
body.tank-playing .touch-action-panel button strong,body.tank-playing .tp-touch-row button strong{font-size:15px;line-height:15px}
body.tank-playing .touch-action-panel button span,body.tank-playing .tp-touch-row button span{font-size:8px}
/* Online shares the same surface, camera, controls and safe area. */
body.tank-playing .tp-match-top{position:absolute;left:var(--tank-control-left,12px);right:var(--tank-control-right,12px);top:max(6px,var(--tank-safe-top,0px));z-index:6;min-height:0;width:auto;max-width:none;height:auto;margin:0;padding:6px 10px;border:0;border-radius:7px;background:#0a202ae0;font-size:11px;pointer-events:none;display:flex;justify-content:space-between;gap:8px}
body.tank-playing .tp-match-top button{pointer-events:auto}
body.tank-playing .tp-class-label,body.tank-playing .tp-special-status,body.tank-playing .tp-hint{display:none}
body.tank-playing .tp-touch-row{right:var(--tank-control-right,12px);bottom:calc(max(8px,var(--tank-safe-bottom,0px)) + var(--tank-control-size,108px) + 21px);display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
body.tank-playing .tp-back{position:absolute;z-index:18;left:50%;transform:translateX(-50%);bottom:max(10px,var(--tank-safe-bottom,0px));top:auto;padding:9px 15px;font-size:11px;border-radius:5px;background:#0c2532df;margin:0;min-height:38px}
body.tank-playing .tp-invite:not([hidden]),body.tank-playing #tp-rematch:not([hidden]){position:absolute;z-index:20;left:50%;transform:translateX(-50%);bottom:65px;width:min(420px,70%);padding:8px;background:#102832ed}
body.tank-playing .tp-after-action:not([hidden]){position:absolute;z-index:20;left:50%;top:70px;transform:translateX(-50%);width:min(500px,65%);max-height:calc(100% - 145px);overflow:auto;padding:12px;background:#11262df5;margin:0}
@media(pointer:coarse){body.tank-playing .battle-bottom .tank-loadout{display:none}body.tank-playing .tactical-status{display:none}}
@media(max-height:350px){body.tank-playing .battle-top{height:39px;padding:3px 8px}body.tank-playing .squad-status{top:47px}body.tank-playing .touch-action-panel,body.tank-playing .tp-touch-row{width:192px}body.tank-playing .game-actions button{min-height:28px}}