.hud-button{--hud-edge:var(--panel-edge);height:calc(var(--game-unit) * 2);padding-inline:calc(var(--game-unit) * .75);border-radius:calc(var(--game-unit) * .75);box-shadow:0 calc(var(--game-unit) * .25) 0 var(--hud-edge);white-space:nowrap;font-size:.9375em;position:relative}.hud-button:active:not(:disabled,[aria-disabled=true]){transform:translateY(calc(var(--game-unit) * .1875));box-shadow:0 calc(var(--game-unit) * .0625) 0 var(--hud-edge);transition-duration:0s}.hud-icon{width:1.5rem;height:1.5rem;display:none}.hud-button--icon{width:calc(var(--game-unit) * 2);padding-inline:0}.hud-button--icon .hud-label{display:none}.hud-button--icon .hud-icon{width:1.25em;height:1.25em;display:block}@media (prefers-reduced-motion:no-preference){.hud-button--icon .hud-icon{transition:transform var(--duration-hover) ease}}.hud-button--icon:hover .hud-icon{transform:rotate(45deg)}.tanks-game{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:calc(var(--game-unit) * var(--hud-units,2.75)) minmax(0, 1fr);height:100%;min-height:0;color:var(--cream);font-family:var(--body);--tanks-red:#f28c7a;--tanks-blue:#86c8f0;--tanks-green:#82dca6;--tanks-sand:#e7d4a9;--plan-grass:#39c272;--plan-sand:#e7d4a9;--plan-grass-road:#89a4a6;--plan-sand-road:#d9b17b;--plan-grass-soft:#af783f;--plan-sand-soft:#ad9e7e;--plan-grass-tree:#1a7b44;--plan-sand-tree:#c26536;--plan-block:#697e80;--plan-barrel:#e74c3c;--plan-oil:#403c2f;--plan-pit:#000;grid-template-areas:"stats modes controls""arena arena arena";display:grid;position:relative}.tanks-game[data-controls=touch]{touch-action:none}.tanks-hud__stats,.tanks-hud__modes,.tanks-hud__controls{font-size:var(--game-unit);align-self:center}.tanks-hud__modes{grid-area:modes;justify-self:center;gap:.25em;display:flex}.tanks-hud__mode{border-radius:calc(var(--game-unit) * .75);color:var(--cream);font-family:var(--display);white-space:nowrap;padding:.25em .75em;font-weight:600;text-decoration:none}.tanks-hud__mode:hover{background:#0000001f}.tanks-hud__mode[aria-current=page]{color:var(--cream);background:#00000038}.tanks-hud__stats{margin-left:var(--game-unit);grid-area:stats;justify-self:start;align-items:center;gap:1.25em;display:flex}.tanks-hud__controls{margin-right:var(--game-unit);grid-area:controls;justify-self:end;align-items:center;gap:.5em;display:flex}.tanks-hud__stat{white-space:nowrap;align-items:baseline;gap:.25em;display:flex}.tanks-hud__stat-label{color:var(--tanks-team,var(--cream));font-size:.875em}.tanks-hud__stat-value{font-size:1.0625em;font-weight:700}.tanks-hud__stat[data-idle]{visibility:hidden}.tanks-hud__stat[data-team=red]{--tanks-team:var(--tanks-red)}.tanks-hud__stat[data-team=blue]{--tanks-team:var(--tanks-blue)}.tanks-hud__stat[data-team=green]{--tanks-team:var(--tanks-green)}.tanks-hud__stat[data-team=sand]{--tanks-team:var(--tanks-sand)}.tanks-hud__icon{width:1.25em;height:1.25em;display:block}.tanks-arena{grid-area:arena;min-width:0;min-height:0;position:relative;overflow:hidden}.tanks-arena__stage{position:absolute;inset:0}.tanks-arena__canvas{width:100%;height:100%;display:block}.tanks-arena__canvas:focus{outline:none}.tanks-banner{border-radius:var(--radius-panel);color:var(--cream);font-family:var(--display);font-size:calc(var(--game-unit) * 1.5);text-align:center;pointer-events:none;background:#00000073;margin:0;padding:.5rem 1.25rem;font-weight:700;position:absolute;top:12%;left:50%;translate:-50%}.tanks-banner__count{font-size:calc(var(--game-unit) * 3);line-height:1.1;display:block}@media (prefers-reduced-motion:no-preference){.tanks-banner{animation:.2s ease-out tanks-banner-in}.tanks-banner__count{animation:.3s ease-out tanks-count-in}}@keyframes tanks-count-in{0%{opacity:0;transform:scale(1.6)}}@keyframes tanks-banner-in{0%{opacity:0;transform:translateY(-.5rem)}}.tanks-end{background:#00000073;padding:1rem}.tanks-end__panel{text-align:center}.tanks-end__title{margin:0 0 .25rem}.tanks-end__reading{color:var(--ink-soft);margin:0 0 1.25rem}.tanks-end__actions{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.tanks-setup{z-index:var(--layer-overlay);place-items:safe center;padding:1rem;display:grid;position:absolute;inset:0;overflow:hidden}.tanks-setup__panel{flex-direction:column;gap:.75rem;width:min(100%,34rem);max-height:100%;display:flex;overflow:hidden}.tanks-setup__title{flex:none;margin:0}.tanks-setup__body{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--panel-edge) transparent;flex:0 auto;align-content:start;gap:.75rem;min-height:0;display:grid;overflow:auto}.tanks-setup__play{flex:none;margin-top:.25rem}.tanks-setup__body .setting{flex-direction:column;align-items:stretch;gap:.5em}.tanks-setup__body .segmented{flex-wrap:wrap;display:flex}.tanks-setup__body .segmented label{flex:1 1 0}.tanks-setup__body .segmented span{text-align:center;white-space:nowrap;padding-inline:.5em}.tanks-setup__more{border-top:.0625rem solid var(--panel-edge);padding-top:.75rem}.tanks-setup__more-head{border-radius:var(--radius-control);cursor:pointer;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;list-style:none;display:flex}.tanks-setup__more-head::-webkit-details-marker{display:none}.tanks-setup__more-head:focus-visible{outline:.1875rem solid var(--focus-ring);outline-offset:.25rem}.tanks-setup__more-name:before{content:"";border-top:.3125rem solid #0000;border-bottom:.3125rem solid #0000;border-left:.4375rem solid;width:0;height:0;margin-right:.5rem;display:inline-block}.tanks-setup__more[open] .tanks-setup__more-name:before{rotate:90deg}@media (prefers-reduced-motion:no-preference){.tanks-setup__more-name:before{transition:rotate .12s}}.tanks-setup__more-name{font-weight:600}.tanks-setup__more[open] .tanks-setup__more-summary{display:none}.tanks-setup__more-summary{color:var(--ink-soft);font-size:.875rem}.tanks-setup__options{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.75rem 1.25rem;padding-top:.75rem;display:grid}.tanks-maps{border-radius:var(--radius-panel);background:var(--panel-edge);grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;padding:.25rem;display:grid}.tanks-map{display:grid;position:relative}.tanks-map input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.tanks-map__tile{border-radius:calc(var(--radius-panel) - .25rem);gap:.25rem;padding:.25rem;display:grid}.tanks-map input:checked+.tanks-map__tile{background:var(--panel)}.tanks-map input:not(:checked):hover+.tanks-map__tile{background:color-mix(in srgb, var(--panel) 45%, transparent)}.tanks-map input:focus-visible+.tanks-map__tile{outline:.1875rem solid var(--focus-ring);outline-offset:.125rem}.tanks-map__plan{border-radius:calc(var(--radius-panel) - .5rem);background:var(--plan-floor);width:100%;height:auto;display:block}.tanks-map__plan[data-floor=grass]{--plan-floor:var(--plan-grass);--plan-road:var(--plan-grass-road);--plan-soft:var(--plan-grass-soft);--plan-tree:var(--plan-grass-tree)}.tanks-map__plan[data-floor=sand]{--plan-floor:var(--plan-sand);--plan-road:var(--plan-sand-road);--plan-soft:var(--plan-sand-soft);--plan-tree:var(--plan-sand-tree)}.tanks-map__ground{fill:var(--plan-floor)}.tanks-map__roads{fill:var(--plan-road)}.tanks-map__oil{fill:var(--plan-oil);fill-opacity:.55}.tanks-map__pits{fill:var(--plan-pit);fill-opacity:.62}.tanks-map__soft{fill:var(--plan-soft)}.tanks-map__blocks{fill:var(--plan-block)}.tanks-map__trees{fill:var(--plan-tree)}.tanks-map__barrels{fill:var(--plan-barrel)}.tanks-map__name{color:var(--ink-soft);font-family:var(--display);text-align:center;font-size:.9375rem;font-weight:600}.tanks-map input:checked+.tanks-map__tile .tanks-map__name{color:var(--ink)}.tanks-stick{border:.125rem solid color-mix(in srgb, var(--cream) 35%, transparent);pointer-events:none;background:#00000038;border-radius:50%;width:7rem;height:7rem;margin:-3.5rem 0 0 -3.5rem;position:absolute}.tanks-stick__thumb{background:color-mix(in srgb, var(--cream) 50%, transparent);border-radius:50%;width:3rem;height:3rem;margin:-1.5rem 0 0 -1.5rem;position:absolute;top:50%;left:50%}.tanks-touch{z-index:var(--layer-float);flex-direction:column-reverse;grid-area:arena;place-self:end;align-items:center;gap:.75rem;margin:0 1rem 3.5rem;display:flex}.tanks-touch__button{background:color-mix(in srgb, var(--panel) 55%, transparent);color:var(--ink);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:grid}@media (prefers-reduced-motion:no-preference){.tanks-touch__button{transition:background-color 80ms,transform 80ms}}.tanks-touch__button:active{background:var(--panel);transform:scale(.94)}.tanks-touch__button--fire{width:4rem;height:4rem}.tanks-touch__button--mine{width:3rem;height:3rem}.tanks-touch__button .tanks-hud__icon{width:50%;height:50%}@media (width<=48rem),(height<=30rem){.tanks-hud__stats,.tanks-hud__controls{flex-wrap:nowrap;font-size:.875rem}.tanks-hud__stats{gap:.75em}.tanks-hud__stat[data-team] .tanks-hud__stat-label{clip-path:inset(50%);white-space:nowrap;width:.0625rem;height:.0625rem;margin:-.0625rem;position:absolute;overflow:hidden}.tanks-hud__stat[data-team]:before{content:"";background:var(--tanks-team);border-radius:50%;align-self:center;width:.625rem;height:.625rem}.tanks-hud__button{border-radius:var(--radius-control);width:2.25rem;height:2.25rem;box-shadow:0 .25rem 0 var(--hud-edge);padding-inline:0}.tanks-hud__button:active:not(:disabled){box-shadow:0 .0625rem 0 var(--hud-edge);transform:translateY(.1875rem)}.tanks-hud__button--icon .tanks-hud__icon{width:1.25rem;height:1.25rem}}@media (width<=48rem) and (height>=24rem){.tanks-game{grid-template:"stats stats stats stats""arena arena arena arena"minmax(0,1fr)".modes controls."/minmax(0,1fr) auto auto minmax(0,1fr)}.tanks-hud__stats{margin-inline:.75rem;padding-block:.5rem}.tanks-hud__modes{margin-right:.5rem;font-size:.875rem}.tanks-hud__controls{justify-self:center;margin:0;padding-block:.5rem .75rem}}@media (orientation:landscape) and (height<=30rem){.tanks-game{grid-template:"arena"minmax(0,1fr)/minmax(0,1fr)}.tanks-hud__stats,.tanks-hud__controls{z-index:var(--layer-over-overlay);grid-area:arena;align-self:start;margin:0}.tanks-hud__stats{border-radius:0 0 var(--radius-control) 0;background:#00000059;justify-self:start;padding:.25rem .75rem}.tanks-hud__controls{justify-self:end;padding:.25rem}.tanks-hud__modes{display:none}.tanks-setup__panel{gap:.75rem;width:min(100%,44rem);padding:1.25rem}.tanks-maps{grid-template-columns:repeat(6,minmax(0,1fr))}}