/* Content-led responsive layer. Rem thresholds respect browser zoom and font size. */
:root{--page-max:176rem;--page-gutter:clamp(.75rem,2.4vw,4rem);--layout-gap:clamp(1rem,1.8vw,2rem)}
html{scroll-padding-top:5rem}body{min-inline-size:0;min-block-size:100svh}header,main{max-inline-size:var(--page-max);inline-size:100%;padding-inline:max(var(--page-gutter),env(safe-area-inset-left)) max(var(--page-gutter),env(safe-area-inset-right))}main{padding-block-start:clamp(1.25rem,2.5vw,2.75rem)}
header{min-block-size:5rem;height:auto;padding-block:1rem}.brand{min-inline-size:0}.brand>span:last-child{overflow-wrap:anywhere}.local{flex-shrink:0;max-inline-size:16rem;overflow-wrap:anywhere}
h1{font-size:clamp(2.125rem,1.35rem + 2.8vw,3.875rem);letter-spacing:-.035em;line-height:1.1;overflow-wrap:anywhere}.intro{gap:var(--layout-gap);min-inline-size:0}.intro p{max-inline-size:54ch}.hero-aside{max-inline-size:none;min-inline-size:0}.actions{justify-content:flex-end}.hero-emblem{inline-size:clamp(6.5rem,8vw,10rem)}.eyebrow{max-inline-size:none}.mode-tag{flex-wrap:wrap}.builds{margin-block-end:var(--layout-gap)}.builds-top>span{max-inline-size:none;text-align:start}.build-controls{display:flex;gap:.5rem;min-inline-size:0}.build-controls select{flex:1 1 17rem;min-inline-size:min(100%,15rem);max-inline-size:100%}.build-controls button{flex:0 1 auto;white-space:normal}.builds,.workspace,.hangar,.editor-layout{min-inline-size:0}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--layout-gap);align-items:start}.workspace{container-type:inline-size;container-name:board;scroll-margin-top:5rem}.hangar{container-type:inline-size;container-name:hangar;padding-block-start:0;scroll-margin-top:5rem}.editor-nav{display:none}
.board-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;padding:1rem 1.125rem}.board-top>input{inline-size:100%;min-inline-size:0;font-size:1.125rem;line-height:1.4}.board-top>div{inline-size:auto;min-inline-size:0;flex-grow:0;gap:.375rem}.board-top button{white-space:normal}.board-bottom{font-size:.75rem;flex-wrap:wrap;align-items:start;line-height:1.6}.board-bottom>span:last-child{max-inline-size:60ch}.tier{min-block-size:5.8rem}.tier-side{inline-size:clamp(5rem,10cqi,9rem);padding:.375rem}.tier-label{font-size:clamp(1.5rem,1.2rem + .7cqi,2rem);line-height:1.2}.tier-name{font-size:.75rem}.tier-zone{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,7.25rem),1fr));gap:.4rem;padding:.45rem;align-content:start}.tier-zone:empty:after{grid-column:1/-1;align-self:center;font-size:.75rem;margin:auto .5rem}.tier-zone .card{inline-size:100%;block-size:auto;aspect-ratio:1.45;min-block-size:4.8rem}.tier-zone .card .name{font-size:.6875rem;line-height:1.25;overflow-wrap:anywhere}.catalog{grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr));gap:clamp(.5rem,1cqi,.8rem);min-inline-size:0}.catalog .card{block-size:auto;aspect-ratio:1.34;min-block-size:5.5rem}.catalog .card .name{font-size:.75rem;line-height:1.3;overflow-wrap:anywhere}.card .name{white-space:normal;text-wrap:pretty}.card img{max-inline-size:100%}
.hangar-head{gap:1rem;align-items:center;flex-wrap:wrap}.hangar-head>div{min-inline-size:0}.search{min-inline-size:0;flex:0 1 18rem}.search input{inline-size:100%;min-inline-size:0;font-size:.8125rem}.filters{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end}.filters label{flex:1 1 11rem;min-inline-size:min(100%,10rem);font-size:.75rem}.filters select{inline-size:100%;min-inline-size:0;max-inline-size:100%;font-size:.8125rem}.filters #filter-summary{flex:1 1 auto;min-inline-size:0;overflow-wrap:anywhere;margin-inline-start:0;text-align:end}.filters button{white-space:normal}.hangar .eyebrow{font-size:.6875rem;letter-spacing:.03em}.hangar h2{font-size:1.5rem;line-height:1.3}
#selection{position:fixed;inset-inline-start:50%;inset-block-end:max(.75rem,env(safe-area-inset-bottom));transform:translateX(-50%);inline-size:max-content;max-inline-size:min(48rem,calc(100% - 1.5rem));max-block-size:40vh;max-block-size:40dvh;overflow:auto;flex-wrap:wrap;margin:0;z-index:30}#selected-name{overflow-wrap:anywhere;max-inline-size:100%}#quick-tiers{flex-wrap:wrap;justify-content:center}.touch-help{display:none}.pointer-help{display:inline}
footer{padding-block-end:max(1.5rem,env(safe-area-inset-bottom));gap:.75rem}footer>*{min-inline-size:0;overflow-wrap:anywhere}#player-badge{gap:.625rem;padding:1rem;min-inline-size:0}#player-nick,#player-rating{max-inline-size:100%;overflow-wrap:anywhere}dialog{max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;inline-size:min(35rem,calc(100% - 1.5rem));padding:clamp(1rem,3vw,1.75rem)}dialog input,dialog textarea{min-inline-size:0;max-inline-size:100%}.dialog-actions button{flex:1 1 auto;white-space:normal}.tank-context-menu{inline-size:17rem;max-inline-size:calc(100% - 1rem)}.tank-menu-title{font-size:.8125rem}.tank-menu-item{min-block-size:2.5rem;font-size:.8125rem}.tank-menu-tier{inline-size:1.875rem;block-size:1.875rem}#toast{max-inline-size:calc(100% - 1.5rem);max-block-size:40dvh;overflow:auto;inset-block-end:max(1.5rem,env(safe-area-inset-bottom))}
@supports (container-type:inline-size){.tier-zone{--tank-card:clamp(7.25rem,8.4cqi,9.75rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tank-card)),1fr))}}
@container board (max-width:48rem){.board-top{grid-template-columns:auto minmax(0,1fr)}.board-top>div{grid-column:1/-1;justify-content:flex-start;inline-size:100%}.board-top button{font-size:.75rem}.board-bottom{flex-direction:column;gap:.25rem}.tier-side{inline-size:5.5rem}.tier-zone{--tank-card:6.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,6.5rem),1fr))}.tier-name{font-size:.6875rem}}
@container board (max-width:27rem){.board-top{padding:.875rem .75rem;gap:.625rem}.board-top>input{font-size:1rem}.tier-side{inline-size:4rem;padding:.25rem}.tier-label{font-size:1.5rem}.tier-name{font-size:.625rem}.tier-zone{grid-template-columns:repeat(auto-fill,minmax(min(100%,5.75rem),1fr));padding:.375rem;gap:.375rem}.tier-zone .card{aspect-ratio:1.35;min-block-size:4.5rem}.tier-zone .card .name{font-size:.625rem}.tier-zone:empty:after{font-size:.6875rem}.board-bottom{padding:.75rem;font-size:.6875rem}}
@container hangar (max-width:38rem){.hangar-head{gap:.75rem}.search{flex-basis:100%;inline-size:100%}.filters #filter-summary{flex-basis:100%;text-align:start;padding-block-end:0}.catalog{grid-template-columns:repeat(auto-fill,minmax(min(100%,7.5rem),1fr))}}
@container hangar (max-width:25rem){.filters label{flex-basis:8rem;min-inline-size:0}.filters select{padding:.625rem .5rem;font-size:.75rem}.catalog{grid-template-columns:repeat(auto-fill,minmax(min(100%,6.75rem),1fr));gap:.5rem}.catalog .card{aspect-ratio:1.27}.catalog .card .name{font-size:.6875rem}.hangar h2{font-size:1.375rem}}
/* A wide editor gains a second column only when height also permits it. */
@media (min-width:108rem) and (min-height:54rem){.editor-layout{grid-template-columns:minmax(0,1.65fr) minmax(23rem,.9fr);gap:var(--layout-gap)}.workspace{position:sticky;inset-block-start:1rem}.workspace.board-tall{position:static}.hangar{padding:1.25rem;border:1px solid var(--line);border-radius:12px;background:#111a26}.intro{padding-block-end:2rem}.builds{margin-block-end:1.5rem}}
@media (max-width:68rem){.intro{gap:1.25rem}.actions{justify-content:flex-start}.builds-top{flex-wrap:wrap}.builds-top>span{max-inline-size:100%;font-size:.75rem}.hero-aside{max-inline-size:19rem}.board-top>input{min-inline-size:0}}
@media (max-width:47.5rem){header{padding-block:.875rem;min-block-size:4.5rem}.brand{font-size:.8125rem}.brand small{font-size:.6875rem}.logo{inline-size:2.125rem;block-size:2.5rem;flex-shrink:0}.local{font-size:.625rem;max-inline-size:7rem}main{padding-block-start:1.5rem}.intro{display:block;padding-block-end:1.5rem}.hero-aside{max-inline-size:none}.hero-emblem{position:absolute;inset-inline-end:0;inset-block-start:.5rem;inline-size:clamp(3rem,13vw,5.25rem);opacity:.25;pointer-events:none}.mode-tag{font-size:.6875rem;max-inline-size:calc(100% - 4.5rem)}.eyebrow{font-size:.6875rem;max-inline-size:calc(100% - 3rem);letter-spacing:.02em}.intro p{font-size:.875rem;max-inline-size:38ch}.actions{gap:.5rem;margin-block-start:1.25rem}.actions button{font-size:.75rem;flex:1 1 auto;min-block-size:2.5rem;padding:.625rem}.editor-nav{position:sticky;inset-block-start:max(.5rem,env(safe-area-inset-top));z-index:15;display:flex;gap:.5rem;width:max-content;max-inline-size:100%;padding:.375rem;margin-block:0 1rem;background:#142030ed;border:1px solid #40516b;border-radius:10px;backdrop-filter:blur(14px)}.editor-nav a{display:grid;place-items:center;min-block-size:2.5rem;min-inline-size:6.5rem;padding:.5rem 1rem;color:#e7d0a7;font-size:.8125rem;font-weight:500;text-decoration:none;border-radius:6px}.editor-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.builds{padding:1rem .875rem}.builds-top{gap:.5rem}.build-controls{gap:.5rem}.build-controls select{flex-basis:100%;min-inline-size:0;font-size:1rem}.build-controls button{flex:1 1 7rem;min-block-size:2.5rem;font-size:.75rem}.hangar-head{align-items:start}.hangar .eyebrow{max-inline-size:100%}.tier-label{min-block-size:2.25rem}.tier-name{min-block-size:1.75rem}.board-top button{min-block-size:2.5rem}#player-rating{font-size:.75rem}footer{flex-direction:column;gap:.75rem}.privacy-note,.author-note{font-size:.75rem;line-height:1.75}.footer-brand{font-size:.6875rem}#selection{gap:.5rem;padding:.625rem}#quick-tiers button{min-block-size:2.5rem}#selected-name{font-size:.75rem}#deselect{min-block-size:2.5rem;min-inline-size:2.5rem}.tank-context-menu{border-radius:14px}.dialog-actions{gap:.5rem}dialog h2{font-size:1.375rem}dialog p{font-size:.875rem}}
@media (pointer:coarse){button:not(.card){min-block-size:2.75rem}.editor-nav a{min-block-size:2.75rem}.tank-menu-item{min-block-size:2.875rem}.tier-label{min-block-size:2.75rem}.tier-name{min-block-size:2.25rem}.filters select,.search input,dialog input,#player-dialog input,dialog textarea{font-size:1rem}.search{min-block-size:2.75rem}.touch-help{display:inline}.pointer-help{display:none}.tier-zone:empty:after{content:'Коснитесь танка в ангаре и выберите тир'}.card{touch-action:manipulation}.card:hover{transform:none}.card .name{font-weight:600}}
@media (max-height:32rem) and (orientation:landscape){header{min-block-size:3.5rem;padding-block:.5rem}.intro{display:flex;align-items:center;padding-block-end:1rem;gap:1rem}.hero-emblem{display:none}.mode-tag{margin-block-end:.5rem}.intro h1{font-size:2rem;margin-block:.5rem}.intro p{font-size:.75rem}.hero-aside{max-inline-size:17rem}.actions{margin-block-start:0}.eyebrow{font-size:.625rem}.editor-nav{inset-block-start:.25rem}.editor-nav a{min-block-size:2rem}.tank-menu-item{min-block-size:2.25rem}.tank-menu-title{padding-block:.25rem}#selection{max-block-size:48dvh}}
@media (max-width:22rem){.brand{font-size:.75rem}.brand small{font-size:.625rem}.local{max-inline-size:5.5rem;font-size:.5625rem}.board-top button{padding-inline:.5rem}.actions button{flex-basis:45%}.hero-emblem{display:none}.mode-tag,.eyebrow{max-inline-size:100%}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,button{transition:none}}
header{padding-block-start:max(1rem,env(safe-area-inset-top))}
@container board (max-width:27rem){.tier{display:grid;grid-template-columns:minmax(0,1fr);min-block-size:6rem}.tier-side{inline-size:100%;flex-direction:row;justify-content:flex-start;gap:.5rem;padding:.25rem .625rem;border-inline-end:0;border-block-end:1px solid #334358}.tier-label{inline-size:2.5rem;flex-shrink:0;min-block-size:2.25rem}.tier-name{flex:1;inline-size:0;min-inline-size:0;text-align:start;font-size:.8125rem;padding-inline:.25rem}.tier-zone{min-block-size:3.5rem;align-content:start}.tier-zone:empty:after{margin:.625rem .25rem}.tier-zone .card .name{font-size:.6875rem}}
@media(pointer:coarse){.tier-name{font-size:1rem}}
#drag-scroll-up{padding-block-start:calc(1rem + env(safe-area-inset-top))}#drag-scroll-down{padding-block-end:calc(1rem + env(safe-area-inset-bottom))}
.icon-select-trigger{display:flex;align-items:center;gap:.625rem;inline-size:100%;min-inline-size:0;min-block-size:2.75rem;background:#111a26;border:1px solid #3c4960;border-radius:8px;padding:.625rem .75rem;color:#e3eaf4;text-align:start;font-size:.8125rem;font-weight:400;letter-spacing:0}.icon-select-trigger[aria-expanded=true]{border-color:var(--accent);background:#1c2b3f}.icon-select-value{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-select-chevron{font-size:1rem;line-height:1;color:#b9c7da}.filter-option-icon{display:block;flex-shrink:0;inline-size:1.75rem;block-size:1.375rem;object-fit:contain}.filter-option-icon.class{inline-size:1.5rem;block-size:1.375rem}.icon-select-popup{position:fixed;z-index:55;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-inline-size:0;padding:.375rem;background:#162233f7;backdrop-filter:blur(16px);border:1px solid #53637a;border-radius:12px;box-shadow:0 14px 45px #0008;color:#eef2f8;font-family:var(--font)}.icon-select-option{display:flex;align-items:center;gap:.75rem;inline-size:100%;min-block-size:2.75rem;padding:.5rem .625rem;border:1px solid transparent;border-radius:7px;background:transparent;text-align:start;font-size:.8125rem;font-weight:400}.icon-select-option:hover,.icon-select-option:focus-visible{background:#30415b;border-color:#637794;outline:none;transform:none}.icon-select-option[aria-selected=true]{background:#dfbd7f13}.icon-option-name{flex:1;min-inline-size:0;overflow-wrap:anywhere}.icon-option-check{color:var(--accent);opacity:0;font-weight:600}.icon-select-option[aria-selected=true] .icon-option-check{opacity:1}@media(pointer:coarse){.icon-select-option{min-block-size:3rem;font-size:.875rem}.icon-select-trigger{min-block-size:3rem;font-size:.875rem}}

/* Non-modal Easter egg: no focus trap and no interruption of other cards. */
.artillery-secret{position:fixed;z-index:2500;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:min(430px,calc(100vw - 32px));box-sizing:border-box;max-height:calc(100dvh - 40px);overflow-y:auto;padding:clamp(150px,43vw,205px) 24px 24px;border:1px solid #d6bc8066;border-radius:20px;color:#f6f3ec;background-color:#101116;background-image:linear-gradient(180deg,transparent 95px,#101116aa 170px,#101116 225px),url('assets/ui/secret-club.png');background-position:center top;background-size:100% 100%,100% auto;background-repeat:no-repeat;box-shadow:0 20px 80px #000b;font:inherit;isolation:isolate}
.artillery-secret[hidden]{display:none}
.artillery-secret strong{display:block;font-size:19px;line-height:1.3;color:#f3d48f}
.artillery-secret p{margin:12px 0 16px;font-size:16px;line-height:1.65;color:#f6f3ec}
.artillery-secret small{font-size:12px;line-height:1.5;color:#b6b4ba}
.artillery-secret-close{position:absolute;right:10px;top:10px;width:40px;height:40px;padding:0;border:1px solid #ffffff35;border-radius:50%;background:#11131bd9;color:white;font-size:26px;cursor:pointer}
.artillery-secret-close:focus-visible{outline:2px solid #f3d48f;outline-offset:3px}
@media(max-width:480px){.artillery-secret{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:clamp(150px,43vw,190px) 20px 20px}.artillery-secret p{font-size:15px}}