/*
 * Design v3 — ikony SVG (img/sprite.svg, js/ui/icons.js), ikony zakładek, ilustracje pustych stanów i drobiazgi.
 * Faktury, rdza, kurz, winieta, nity i pasy ostrzegawcze z motywu v1/v2 zostały usunięte (płaski, czysty wygląd).
 * Ikony SVG służą wyłącznie do małych oznaczeń (koszty, statystyki, nawigacja) — budynki, technologie i stalkerzy mają ilustracje (art-card).
 */

/* ---------- ikony SVG ---------- */
.ico {
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    vertical-align: -0.28em;
    flex: none;
    overflow: visible;
}

.ico-missing { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; }

.b-icon .ico { width: 1em; height: 1em; vertical-align: middle; }
.lock-icon .ico { width: 28px; height: 28px; }
.tab-icon .ico { width: 100%; height: 100%; }
.emblem { vertical-align: middle; flex: none; margin-right: 4px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }

.empty-art { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 16px; text-align: center; }
.empty-art img { max-width: min(100%, 200px); height: auto; opacity: 0.95; }
.empty-art-text { color: var(--text-soft); font-weight: 650; }
.empty-art-hint { color: var(--text-muted); font-size: var(--fs-sm); max-width: 34em; }

/* ---------- ikony zakładek (SVG jako tło, po data-tab) ---------- */
.tab-btn .tab-icon, .more-tile .tab-icon {
    display: inline-block;
    box-sizing: content-box;
    font-size: var(--tab-fs, 21px);
    line-height: 1;
    width: var(--tab-w, auto);
    height: var(--tab-h, auto);
    background: var(--tab-ico, none) center / contain no-repeat;
    transition: transform var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}

.tab-btn[data-tab], .more-tile[data-tab] { --tab-w: 26px; --tab-h: 26px; }
.tab-btn.tab-more { --tab-w: auto; --tab-h: auto; }
.tab-btn[data-tab] .tab-icon, .more-tile[data-tab] .tab-icon { opacity: 0.78; }
.tab-btn.active .tab-icon, .more-tile.active .tab-icon { opacity: 1; filter: drop-shadow(0 0 6px var(--glow-accent)); }
.tab-btn:hover .tab-icon { transform: translateY(-1px); }

[data-tab="dashboard"] { --tab-ico: url("../img/icons/tab-dashboard.svg"); --tab-fs: 0; }
[data-tab="economy"] { --tab-ico: url("../img/icons/tab-economy.svg"); --tab-fs: 0; }
[data-tab="stalkers"] { --tab-ico: url("../img/icons/tab-stalkers.svg"); --tab-fs: 0; }
[data-tab="map"] { --tab-ico: url("../img/icons/tab-map.svg"); --tab-fs: 0; }
[data-tab="science"] { --tab-ico: url("../img/icons/tab-science.svg"); --tab-fs: 0; }
[data-tab="technologies"] { --tab-ico: url("../img/icons/tab-technologies.svg"); --tab-fs: 0; }
[data-tab="archive"] { --tab-ico: url("../img/icons/tab-archive.svg"); --tab-fs: 0; }
[data-tab="region"] { --tab-ico: url("../img/icons/tab-region.svg"); --tab-fs: 0; }
[data-tab="treasury"] { --tab-ico: url("../img/icons/tab-treasury.svg"); --tab-fs: 0; }
[data-tab="trade"] { --tab-ico: url("../img/icons/tab-trade.svg"); --tab-fs: 0; }
[data-tab="market"] { --tab-ico: url("../img/icons/tab-market.svg"); --tab-fs: 0; }
[data-tab="politics"] { --tab-ico: url("../img/icons/tab-politics.svg"); --tab-fs: 0; }
[data-tab="council"] { --tab-ico: url("../img/icons/tab-council.svg"); --tab-fs: 0; }
[data-tab="factions"] { --tab-ico: url("../img/icons/tab-factions.svg"); --tab-fs: 0; }
[data-tab="global"] { --tab-ico: url("../img/icons/tab-global.svg"); --tab-fs: 0; }
[data-tab="season"] { --tab-ico: url("../img/icons/tab-season.svg"); --tab-fs: 0; }
[data-tab="help"] { --tab-ico: url("../img/icons/tab-help.svg"); --tab-fs: 0; }
[data-tab="account"] { --tab-ico: url("../img/icons/tab-account.svg"); --tab-fs: 0; }

@media (min-width: 900px) {
    .tab-btn[data-tab] { --tab-w: 24px; --tab-h: 24px; }
}

/* ---------- rozmiary ikon w kontekstach ---------- */
:is(h2, h3) > .ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 2px; }
.cost-chip .ico { width: 15px; height: 15px; vertical-align: -3px; }
.icon-btn .ico { width: 1.3em; height: 1.3em; vertical-align: middle; }
.map-ctrl button .ico, .map-close .ico { width: 18px; height: 18px; vertical-align: middle; }
.tab-more .tab-icon .ico, .more-close .ico { width: 1em; height: 1em; }
.w-btn-main .ico, .w-btn-sub .ico, .upgrade-btn .ico, .co-btn .ico, .tr-btn .ico, .fx-btn .ico { width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.n-icon .ico, .co-icon .ico { width: 1.3em; height: 1.3em; vertical-align: middle; }
.lock-hint .ico, .req .ico, .b-note .ico, .alert .ico, .w-reason .ico { width: 1.2em; height: 1.2em; }
.prestige-head .ico { margin-right: 8px; vertical-align: middle; }
.badges li .ico { margin-right: 4px; vertical-align: middle; }
.prestige-head > .prestige-who { flex-direction: row; align-items: center; gap: 10px; }
.prestige-who > div { display: flex; flex-direction: column; }
.prestige-who .ico { margin: 0; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); }

/* ---------- powierzchnie funkcji (rady, rynek, skarbiec…): wspólny płaski wygląd kart ---------- */
:is(.tr-card, .co-card, .fx-card, .season-card, .eco-summary, .hk-guide, .world-card, .notif-panel, .region-members, .w-section) {
    background: var(--surface);
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

:is(.tr-btn, .co-btn, .fx-btn, .season-small, .equip-btn, .banner-btn) {
    border-radius: var(--radius-pill);
    transition: transform 110ms var(--ease-out), filter var(--t-fast), background var(--t-fast);
}

:is(.tr-btn, .co-btn, .fx-btn, .season-small, .equip-btn):active:not(:disabled) { transform: scale(0.96); }

#toast { border-left: 0; }
#toast .toast-ico { display: inline-flex; flex: none; font-size: 20px; }
#toast.toast-warn { border-color: rgba(240, 119, 90, 0.6); background: #3a2018; }
#toast.toast-good { border-color: rgba(95, 208, 184, 0.5); }
#toast.toast-bell { border-color: rgba(111, 179, 209, 0.5); }
#toast { display: flex; align-items: center; gap: 10px; }

/* ---------- ostrzeżenia ---------- */
.storm-banner.active, .fx-storm-banner.active { animation: d-alarm 2.4s ease-in-out infinite; }
.tab-badge { animation: none; }

body progress { accent-color: var(--accent); }
body input:focus-visible, body select:focus-visible, body textarea:focus-visible { box-shadow: 0 0 0 3px var(--glow-accent); }

/* ---------- ikonka objaśnienia (ⓘ) ---------- */
.tip-i { border-color: transparent; background: transparent; }
.tip-i .ico { width: 17px; height: 17px; vertical-align: 0; opacity: 0.8; transition: opacity var(--t-fast), transform var(--t-fast); }
.tip-i:hover .ico, .tip-i:focus-visible .ico { opacity: 1; transform: scale(1.1); }

/* ---------- ekran logowania i wybór świata: scenki ---------- */
.acct-overlay { background: radial-gradient(ellipse at 50% 0%, rgba(120, 60, 24, 0.5), transparent 60%), rgba(8, 7, 4, 0.94); }
.world-card.eternal { border-color: rgba(95, 208, 184, 0.4); }
.world-card.seasonal { border-color: rgba(240, 119, 90, 0.4); }