/* Shared neutral surfaces and MVF red in both themes. */
:root{--mvf-red:#f80615;--ui-surface:#fff;--ui-inset:#f2f2f2;--ui-line:#d8d8d8;--ui-text:#292929;--ui-muted:#737373}
:root[data-theme="dark"]{--ui-surface:#262626;--ui-inset:#303030;--ui-line:#484848;--ui-text:#f5f5f5;--ui-muted:#b5b5b5}
:root .overlay-card,:root .support-card{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-text)}
:root .overlay.welcome-overlay .overlay-card{width:420px;max-width:100%;padding:26px!important;border-radius:24px}
:root .overlay.support-floating .support-card{width:460px;max-width:100%;padding:26px!important;border-radius:24px}
:root .small-stamp,:root .support-card .small-stamp,:root .leaderboard-head .eyebrow{color:var(--mvf-red)}
:root .overlay p,:root .quick-rules li,:root .start-hint,:root .name-entry label,:root #program-info p{color:var(--ui-muted)}
:root .overlay h2,:root .quick-rules b,:root #program-amount{color:var(--ui-text)}
:root .quick-rules li:before{background:var(--ui-inset);color:var(--mvf-red)}
:root #program-info,:root .name-entry input{background:var(--ui-inset);border-color:var(--ui-line);color:var(--ui-text)}
:root #program-link{color:var(--mvf-red);border-color:var(--mvf-red)}
:root #lives,:root #speed,:root #ranking-status,:root .ranking-place{color:var(--mvf-red)}
:root #armor,:root .play-layout #armor,:root #armor.charged,:root .collected-chip{background:var(--ui-inset);border-color:var(--ui-line);color:var(--mvf-red);box-shadow:none}
:root .ranking-row.podium{background:var(--ui-inset)}:root .ranking-row.podium-1{background:var(--mvf-red);color:white}
:root .podium-1 .ranking-name,:root .podium-1 .ranking-place{color:white}
:root .welcome-overlay h2{font-size:32px;line-height:1.08;letter-spacing:-1px}
:root .quick-rules{gap:10px;margin:16px 0 18px}
@media(max-width:600px){:root .overlay.welcome-overlay .overlay-card,:root .overlay.support-floating .support-card{padding:22px!important}}

/* Rules are a distinct, scannable part of the welcome screen. */
:root #quick-rules{gap:8px;margin:18px 0 20px;padding:0;counter-reset:rules}
:root #quick-rules::before{content:'Как играть';display:block;margin-bottom:2px;font-size:14px;font-weight:700;letter-spacing:0;color:var(--ui-text)}
:root #quick-rules li{padding:11px 12px 11px 45px;background:var(--ui-inset);border:1px solid var(--ui-line);border-radius:12px;line-height:1.45;font-size:11px;color:var(--ui-muted)}
:root #quick-rules li::before{left:12px;top:12px;width:23px;height:23px;background:#f80615;color:#fff;font-size:12px;border-radius:7px}
:root #quick-rules li b{display:block;margin-bottom:3px;font-size:12px;font-weight:700;color:var(--ui-text)}
:root #quick-rules li span{display:block}
:root .welcome-overlay h2{font-size:30px;margin:12px 0}
@media(max-width:600px){:root #quick-rules li{padding-top:9px;padding-bottom:9px}:root #quick-rules li::before{top:10px}}

/* Landscape welcome: entry on the left, four rules on the right. */
@media(min-width:720px){
:root .overlay.welcome-overlay{padding:20px}
:root .overlay.welcome-overlay .overlay-card{width:860px;max-width:calc(100vw - 40px);padding:28px!important;display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.35fr);column-gap:32px;text-align:left;align-items:start;max-height:calc(100dvh - 40px)}
:root .welcome-overlay #overlay-tag{grid-column:1;grid-row:1;align-self:end}
:root .welcome-overlay #overlay-title{grid-column:1;grid-row:2;font-size:38px;margin:10px 0 24px;line-height:1.05}
:root .welcome-overlay #quick-rules{grid-column:2;grid-row:1 / 6;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;align-self:center}
:root .welcome-overlay #quick-rules::before{grid-column:1 / -1;font-size:16px;margin-bottom:2px}
:root .welcome-overlay #quick-rules li{padding:43px 12px 13px;min-height:132px}
:root .welcome-overlay #quick-rules li::before{top:12px;left:12px}
:root .welcome-overlay #quick-rules li b{font-size:12px;line-height:1.3;margin-bottom:6px}
:root .welcome-overlay #quick-rules li span{font-size:11px;line-height:1.45}
:root .welcome-overlay #name-entry{grid-column:1;grid-row:3;margin:0 0 14px}
:root .welcome-overlay #start{grid-column:1;grid-row:4;width:100%;align-self:start}
:root .welcome-overlay #start-hint{grid-column:1;grid-row:5;text-align:center;margin-top:12px;font-size:9px}
}
@media(min-width:720px) and (max-height:560px){
:root .overlay.welcome-overlay .overlay-card{padding:20px!important;column-gap:24px}
:root .welcome-overlay #overlay-title{font-size:30px;margin-bottom:15px}
:root .welcome-overlay #quick-rules li{min-height:118px;padding-top:39px}
}

/* The support indicator uses the same MVF mark as the pickup. */
:root .play-layout #armor{display:flex;align-items:center;justify-content:center;text-align:center;gap:5px;min-width:80px;min-height:48px;padding:7px 10px;max-width:150px;border-radius:14px}
:root #armor .armor-label{display:block;flex-basis:100%;width:100%;text-align:center;line-height:1.2;font-size:7px;letter-spacing:.5px}
:root #armor .support-mark{display:block;width:25px;height:13px;flex:none;color:#f80615}
:root #armor .support-mark.empty{opacity:.25}

/* A charged support must override inherited neutral HUD styles. */
:root #armor .support-mark{color:#929292;fill:currentColor;transition:color .2s}
:root #armor .support-mark.empty{opacity:.45}
:root .play-layout #armor.charged{border-color:#f80615;background:var(--ui-inset);color:#f80615;box-shadow:inset 0 0 0 1px #f80615}
:root #armor.charged .support-mark{color:#f80615!important;opacity:1}
:root #armor.charged .armor-label{color:#f80615}
:root #armor .support-count{font-size:11px;font-weight:700;line-height:13px;color:#f80615}
:root #armor.support-acquired{animation:support-acquired .8s ease-out}
@keyframes support-acquired{0%{box-shadow:0 0 0 0 #f8061580}45%{box-shadow:0 0 0 7px #f8061525}100%{box-shadow:0 0 0 12px #f8061500}}
@media(prefers-reduced-motion:reduce){:root #armor.support-acquired{animation:none}}

/* Explicit dimensions also win over generic site SVG rules. */
:root .play-layout #armor{min-width:70px;min-height:46px;padding:6px 9px;gap:4px;max-width:116px}
:root #armor svg.support-mark{width:30px!important;height:13px!important;max-width:30px!important;flex:0 0 30px!important;margin:0}
:root #armor .support-count{font-size:10px;line-height:13px;align-self:center}
:root #lives{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1}
:root #lives svg.life-heart{width:16px!important;height:17px!important;flex:none;display:block;overflow:visible}
:root #lives .life-heart path{fill:#f80615;stroke:#f80615;stroke-width:1.2;stroke-linejoin:round}
:root #lives .life-heart.lost path{fill:none;stroke:#f80615;opacity:.65}
@media(max-width:600px){:root #lives{gap:4px}:root #lives svg.life-heart{width:13px!important;height:14px!important}}

@media(min-width:720px){:root.embedded-game .overlay.welcome-overlay{padding:14px}:root.embedded-game .overlay.welcome-overlay .overlay-card{max-height:calc(100dvh - 28px);padding:20px!important}:root.embedded-game .welcome-overlay #quick-rules li{min-height:112px;padding-top:39px}:root.embedded-game .welcome-overlay #overlay-title{font-size:34px;margin-bottom:16px}}

/* A content-sized badge: label above, mark and count centered below. */
:root .play-layout #armor,:root .play-layout #armor.charged{display:grid!important;grid-template-columns:30px max-content;justify-content:center;align-items:center;align-content:center;column-gap:4px;row-gap:5px;flex:0 0 auto!important;width:max-content!important;min-width:0!important;max-width:none!important;min-height:46px;padding:7px 10px;box-sizing:border-box}
:root #armor .armor-label{grid-column:1 / -1;grid-row:1;width:auto;min-width:0;flex-basis:auto;text-align:center;margin:0}
:root #armor .support-mark{grid-column:1;grid-row:2;justify-self:center}
:root #armor .support-count{grid-column:2;grid-row:2;justify-self:center;margin:0}
:root #armor:not(.charged){grid-template-columns:30px}

.victory-party{display:block;width:100%;height:130px;object-fit:contain;margin:-8px 0 6px}.victory-party[hidden]{display:none!important}

:root .overlay:has(.victory-party:not([hidden])){position:fixed;inset:0;z-index:50;padding:16px;backdrop-filter:blur(5px)}:root .overlay:has(.victory-party:not([hidden])) .overlay-card{max-height:calc(100dvh - 32px)}

/* Every dialog uses the whole game viewport, never the shorter arena. */
:root #overlay{position:fixed!important;inset:0!important;z-index:50;padding:14px!important;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
:root #overlay[hidden]{display:none!important}
:root #overlay .overlay-card{box-sizing:border-box;width:min(540px,100%);max-height:calc(100dvh - 28px)!important;padding:22px!important;border-radius:22px}
:root #overlay h2{font-size:30px;line-height:1.08;letter-spacing:-1px;margin:12px 0}
:root #overlay p{font-size:12px;line-height:1.5;margin:0 0 14px}
:root #overlay .small-stamp{font-size:8px;line-height:1.4}
:root #overlay #start{width:100%;padding:13px 19px;font-size:13px;min-height:44px}
:root #overlay #start-hint{font-size:10px;line-height:1.4;margin-top:10px}
:root #overlay #program-info{padding:12px;margin-bottom:12px}
:root #overlay #program-amount{font-size:20px}
:root #overlay #support-note{font-size:10px;line-height:1.4;margin-bottom:12px}
:root #overlay .victory-party{height:95px;margin:-5px 0 0}
@media(min-width:720px){:root #overlay.welcome-overlay .overlay-card{width:860px;max-width:calc(100vw - 28px)}:root #overlay.support-floating .overlay-card{width:680px;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;text-align:left}:root #overlay.support-floating #overlay-tag{grid-column:1 / -1}:root #overlay.support-floating #overlay-title{grid-column:1;grid-row:2}:root #overlay.support-floating #overlay-copy{grid-column:1;grid-row:3 / 5}:root #overlay.support-floating #program-info{grid-column:2;grid-row:2 / 4;margin-top:12px}:root #overlay.support-floating #support-note{grid-column:2;grid-row:4}:root #overlay.support-floating #start{grid-column:2;grid-row:5}:root #overlay.support-floating #start-hint{grid-column:1 / -1;text-align:center}}
@media(max-height:450px){:root #overlay .overlay-card{padding:16px!important}:root #overlay h2{font-size:25px;margin:8px 0}:root #overlay p{font-size:11px;margin-bottom:10px}:root #overlay .victory-party{height:64px}:root #overlay #start-hint{margin-top:7px;font-size:9px}}

/* Size the label track by its text, including when there is no charge counter. */
:root .play-layout .hud-right{flex-shrink:0;flex-wrap:nowrap;gap:10px}
:root .play-layout #armor,:root .play-layout #armor.charged{display:grid!important;grid-template-columns:max-content max-content;justify-content:center;align-items:center;min-width:88px!important;width:max-content!important;max-width:none!important;min-height:48px;padding:7px 12px;column-gap:5px;row-gap:5px;flex:0 0 auto!important;line-height:1;box-sizing:border-box}
:root .play-layout #armor .armor-label{display:block;grid-column:1 / -1;grid-row:1;font-size:8px;line-height:11px;letter-spacing:.25px;font-weight:500;white-space:nowrap;width:max-content;min-width:max-content;justify-self:center;margin:0;text-align:center}
:root .play-layout #armor .support-mark{grid-column:1;grid-row:2;justify-self:center}
:root .play-layout #armor .support-count{grid-column:2;grid-row:2;line-height:13px;font-size:10px}
:root .play-layout #armor:not(.charged){grid-template-columns:max-content}
@media(max-width:600px){:root .play-layout .hud-right{gap:7px}:root .play-layout #armor,:root .play-layout #armor.charged{min-width:82px!important;padding:6px 9px}}