/*
 * Design v3 — komponenty: przyciski, chipy zasobów (HUD), art-card (karty z ilustracjami), siatki bento, paski postępu, stany.
 * Zasada: płasko i czysto — gradient + subtelna poświata akcentu zamiast ramek i faktur. Bez wytłoczeń i pasów ostrzegawczych.
 */

/* ======================================================= PRZYCISKI ======================================================= */
.btn-primary, .btn-secondary, .gather-btn, .upgrade-btn, .w-btn-main, .w-btn-sub, .acct-primary {
    --press: 1;
    position: relative;
    min-height: var(--touch);
    padding: 0 var(--s4);
    border-radius: var(--radius-pill);
    font-weight: 650;
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 0;
    transition: transform 110ms var(--ease-out), filter var(--t-fast), box-shadow var(--t-med), background var(--t-fast);
}

.btn-primary, .gather-btn, .acct-primary {
    background: linear-gradient(180deg, #f8c457, #e29a24);
    color: var(--accent-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 16px -6px rgba(240, 160, 40, 0.6);
}

.upgrade-btn, .w-btn-main {
    background: linear-gradient(180deg, #9ccb58, #6f9d3a);
    color: var(--good-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 6px 16px -6px rgba(127, 174, 69, 0.55);
}

.btn-secondary, .w-btn-sub {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border-strong);
}

:is(.btn-primary, .btn-secondary, .gather-btn, .upgrade-btn, .w-btn-main, .w-btn-sub, .acct-primary):hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

:is(.btn-primary, .btn-secondary, .gather-btn, .upgrade-btn, .w-btn-main, .w-btn-sub, .acct-primary):active:not(:disabled) {
    transform: scale(0.96);
    filter: brightness(0.96);
    transition-duration: 60ms;
}

:is(.btn-primary, .btn-secondary, .gather-btn, .upgrade-btn, .w-btn-main, .w-btn-sub, .acct-primary, .season-join):disabled {
    background: var(--surface-3);
    color: var(--disabled-ink);
    box-shadow: none;
    border: 1px dashed var(--border-strong);
    cursor: not-allowed;
}

.gather-btn:not(:disabled) { animation: d-pulse-ring 2.8s ease-in-out infinite; }
.gather-btn.pulse { animation: none; transform: scale(1.06); }

/* ======================================================= HUD: chip surowca ======================================================= */
.resource-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head btn" "bar bar" "meta meta";
    align-items: center;
    gap: 6px var(--s2);
    padding: 10px 12px 11px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: border-color var(--t-med), box-shadow var(--t-med);
}

.resource-card .tip-wrap { display: block; }
@media (min-width: 640px) and (max-width: 1179px) {
    .resource-card { grid-template-columns: 1fr; grid-template-areas: "head" "btn" "bar" "meta"; }
    .resource-card > :is(.gather-btn, .tip-wrap) { justify-self: stretch; }
    .resource-card .gather-btn { width: 100%; }
}
.resource-card .r-label { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.resource-card .r-head { grid-area: head; display: flex; align-items: center; gap: 10px; min-width: 0; }

.resource-card .r-icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(240, 180, 64, 0.22), rgba(240, 180, 64, 0.06));
    box-shadow: inset 0 0 0 1px rgba(240, 180, 64, 0.2);
}

.resource-card[data-res="WATER"] .r-icon { background: linear-gradient(145deg, rgba(111, 179, 209, 0.28), rgba(111, 179, 209, 0.06)); box-shadow: inset 0 0 0 1px rgba(111, 179, 209, 0.28); }
.resource-card[data-res="FOOD"] .r-icon { background: linear-gradient(145deg, rgba(169, 207, 106, 0.26), rgba(169, 207, 106, 0.06)); box-shadow: inset 0 0 0 1px rgba(169, 207, 106, 0.26); }
.resource-card[data-res="SCRAP"] .r-icon { background: linear-gradient(145deg, rgba(190, 180, 160, 0.22), rgba(190, 180, 160, 0.05)); box-shadow: inset 0 0 0 1px rgba(190, 180, 160, 0.22); }

.resource-card .r-icon .ico { width: 22px; height: 22px; }
.resource-card .r-text { min-width: 0; display: flex; flex-direction: column; gap: 0; }

.resource-card .r-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Etykieta surowca („ŻYWNOŚĆ”): tekst skraca się sam, ⓘ ma stałe miejsce obok i na niego nie nachodzi. */
.resource-card .r-label { display: flex; align-items: center; gap: 3px; min-width: 0; overflow: visible; letter-spacing: 0.03em; }
.resource-card .r-label-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card .r-label > :not(.r-label-txt) { flex: none; }
/* kilka pikseli więcej na etykietę (pełne „ŻYWNOŚĆ” obok ⓘ na kartach ~240 px) */
.resource-card .r-head { gap: 8px; }
.resource-card .r-value-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: nowrap; }
.resource-card .r-value { font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.resource-card .r-cap { font-size: var(--fs-xs); color: var(--text-faint); margin-left: 2px; font-weight: 500; }
.resource-card .r-rate { font-size: var(--fs-xs); font-weight: 650; margin: 0; font-variant-numeric: tabular-nums; }
.r-rate.pos { color: var(--good); }
.r-rate.neg { color: var(--danger); }

.resource-card .r-bar-track { grid-area: bar; height: 5px; background: rgba(255, 233, 180, 0.08); border-radius: var(--radius-pill); overflow: hidden; }

.resource-card .r-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #c47a2a, #f0b440);
    transition: width 0.5s var(--ease-out);
}

.resource-card[data-res="WATER"] .r-bar-fill { background: linear-gradient(90deg, #3e86a8, #7fcbea); }
.resource-card[data-res="FOOD"] .r-bar-fill { background: linear-gradient(90deg, #6c9a3b, #b4dc72); }
.resource-card[data-res="SCRAP"] .r-bar-fill { background: linear-gradient(90deg, #8d8470, #d4c9ad); }

.resource-card > :is(.gather-btn, .tip-wrap) { grid-area: btn; justify-self: end; }
.resource-card .gather-btn { min-height: 40px; min-width: 64px; padding: 0 var(--s2); white-space: nowrap; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.resource-card .gather-btn .ico { width: 16px; height: 16px; }

.resource-card .r-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-size: var(--fs-xs); color: var(--text-muted); min-height: 0; }
.resource-card .r-meta:empty { display: none; }
.resource-card .r-runway.warn { color: var(--accent); }
.resource-card .r-runway.alarm { color: var(--danger); font-weight: 700; }
.resource-card .r-sub.bad { color: var(--danger); }
.resource-card .r-cd { color: var(--text-faint); }
.resource-card.warn { border-color: rgba(240, 180, 64, 0.5); }
.resource-card.alarm { border-color: var(--danger); animation: d-alarm 2s ease-in-out infinite; }

/* ======================================================= SIATKI (bento) ======================================================= */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    grid-auto-flow: row dense;
    gap: var(--gap);
    align-content: start;
}

.empty-note { grid-column: 1 / -1; padding: var(--s6) var(--s2); text-align: center; color: var(--text-muted); }
.empty-note.error { color: var(--danger); }

.grid-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s3);
}

.grid-section .gs-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-3); color: var(--accent); flex: none; }
.grid-section h2 { font-size: var(--fs-lg); }
.grid-section small { display: block; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; font-family: var(--font); }
.grid-section::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }

.grid-intro { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--fs-sm); max-width: 78ch; }

/* ======================================================= ART-CARD ======================================================= */
.art-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med);
    animation: d-rise 0.35s var(--ease-out) both;
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
}

.art-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }

.ac-media {
    position: relative;
    overflow: hidden;
    width: 100%;
    background:
        radial-gradient(120% 90% at 20% 0%, var(--k-a, rgba(240, 180, 64, 0.3)), transparent 60%),
        linear-gradient(160deg, var(--k-b, #2d2616), #14110b);
    aspect-ratio: 16 / 9;
}

.ac-media.r-4x5 { aspect-ratio: 4 / 5; }
.ac-media.r-thumb { aspect-ratio: 1 / 1; }
.ac-media.r-wide { aspect-ratio: 21 / 9; }
.ac-media.r-portrait { aspect-ratio: 9 / 16; }

.ac-media.k-building { --k-a: rgba(240, 160, 60, 0.32); --k-b: #2e2415; }
.ac-media.k-tech { --k-a: rgba(95, 208, 184, 0.3); --k-b: #11262a; }
.ac-media.k-artifact { --k-a: rgba(190, 130, 255, 0.3); --k-b: #231933; }
.ac-media.k-ruin { --k-a: rgba(240, 119, 90, 0.26); --k-b: #2a1914; }
.ac-media.k-equipment { --k-a: rgba(111, 179, 209, 0.3); --k-b: #14232c; }
.ac-media.k-stalker { --k-a: rgba(169, 207, 106, 0.26); --k-b: #1c2514; }

.ac-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.22) contrast(1.06) saturate(1.1);
    transition: transform 0.6s var(--ease-out), filter var(--t-med);
}

.art-card:hover .ac-img { transform: scale(1.04); }
.r-portrait .ac-img { object-position: center 20%; }

.ac-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 244, 214, 0.9); }
.ac-fallback .ico { width: 56px; height: 56px; opacity: 0.92; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
.ac-media.art-missing .ac-fallback .ico { width: 64px; height: 64px; }
.ac-thumb .ac-fallback .ico { width: 55%; height: 55%; }

.ac-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 8, 5, 0.28) 0%, rgba(10, 8, 5, 0) 30%, rgba(10, 8, 5, 0.32) 60%, rgba(10, 8, 5, 0.82) 100%);
}

.ac-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; z-index: 2; }

.ac-badge, .ac-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(12, 10, 6, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff1cf;
    border: 1px solid rgba(255, 233, 180, 0.2);
}

.ac-badge b { color: var(--accent); font-size: 13px; }
.ac-status.good { color: var(--good); border-color: rgba(169, 207, 106, 0.4); }
.ac-status.warn { color: var(--accent); border-color: rgba(240, 180, 64, 0.45); }
.ac-status.bad { color: #ff9d86; border-color: rgba(240, 119, 90, 0.5); }
.ac-status.info { color: #9fd4ea; border-color: rgba(111, 179, 209, 0.45); }
.ac-badge .ico, .ac-status .ico { width: 14px; height: 14px; }

.ac-title { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 2; color: #fff6dc; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); }
.ac-title h3 { font-size: 19px; line-height: 1.15; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-title small { display: block; margin-top: 2px; font-size: 12.5px; color: #e8dcba; font-weight: 500; }

.ac-body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.ac-body .b-stat { margin: 0; color: var(--text-soft); line-height: 1.45; }
.ac-body .b-stat b { color: var(--text); }
.ac-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s1); }
.ac-foot > .tip-wrap, .ac-foot > button { width: 100%; }
.ac-foot .tip-wrap > button { width: 100%; }

.art-card.locked .ac-media { filter: saturate(0.3) brightness(0.75); }
.art-card.locked { border-style: dashed; }
.art-card.locked:hover { transform: none; }
.art-card.constructing { border-color: rgba(240, 180, 64, 0.55); box-shadow: var(--shadow-1), 0 0 0 1px rgba(240, 180, 64, 0.15), 0 0 30px -8px var(--glow-accent); }
.art-card.is-wide { grid-column: span 2; }

.ac-lock {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 233, 180, 0.05);
    border: 1px dashed var(--border-strong);
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

.ac-lock .ico { flex: none; width: 18px; height: 18px; color: var(--text-muted); margin-top: 1px; }
.ac-lock .lock-list { display: flex; flex-direction: column; gap: 2px; }
.ac-lock small { color: var(--text-muted); }

/* stałe stat-chipy (małe oznaczenia z ikonami SVG) */
.stat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-3); font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.stat-pill .ico { width: 14px; height: 14px; color: var(--text-muted); }
.stat-pill b { color: var(--text); }
.stat-pill.good { color: var(--good); }
.stat-pill.bad { color: var(--danger); }

/* karta pozioma z portretem (stalkerzy) */
.art-card.ar-portrait { flex-direction: row; }
.art-card.ar-portrait > .ac-media { width: 132px; flex: none; align-self: stretch; aspect-ratio: auto; min-height: 236px; }
.art-card.ar-portrait .ac-title { left: 10px; right: 10px; }
.art-card.ar-portrait .ac-title h3 { font-size: 16px; }
.art-card.ar-portrait .ac-body { padding-top: var(--s3); }

/* kafelek wyposażenia / artefaktu (4:5) */
.equip-tile {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-3);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.equip-tile:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 20px -8px var(--glow-accent); }
.equip-tile:active:not(:disabled) { transform: scale(0.96); }
.equip-tile:disabled { opacity: 0.55; cursor: not-allowed; }
.equip-tile .ac-media { aspect-ratio: 4 / 5; border-radius: 0; }
.equip-tile .et-label { position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 2; font-size: 11.5px; line-height: 1.2; color: #fff6dc; text-shadow: 0 1px 6px #000; }
.equip-tile .et-label b { display: block; font-size: 12.5px; }
.equip-tile .et-label small { color: #f0d894; font-size: 10.5px; }
.equip-tile .et-lv { position: absolute; top: 6px; right: 6px; z-index: 2; }

/* miniatura na liście (ruiny) */
.ac-thumb { width: 46px; border-radius: 10px; flex: none; }

/* ======================================================= ZASOBY / KOSZTY / BUDOWA ======================================================= */
.build-progress { display: flex; flex-direction: column; gap: 6px; }
.build-progress .bp-track { height: 8px; background: rgba(255, 233, 180, 0.1); border-radius: var(--radius-pill); overflow: hidden; }
.build-progress .bp-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #d68a25, #ffd36a); box-shadow: 0 0 12px var(--glow-accent); transition: width 0.25s linear; }
.build-progress .bp-text { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.build-progress .bp-of { color: var(--text-faint); }
.cb-actions { display: flex; align-items: center; gap: 4px; }

.cancel-btn {
    min-height: 38px;
    padding: 4px 14px;
    background: transparent;
    color: #ff9d86;
    border: 1px solid rgba(240, 119, 90, 0.5);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--t-fast), transform 100ms;
}

.cancel-btn:hover { background: rgba(240, 119, 90, 0.14); }
.cancel-btn:active { transform: scale(0.96); }

.construction-banner {
    border: 1px solid rgba(240, 180, 64, 0.4);
    background: linear-gradient(180deg, rgba(240, 180, 64, 0.1), rgba(240, 180, 64, 0.03));
    border-radius: var(--radius-sm);
    padding: var(--s2) var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.construction-banner .build-progress { flex: 1 1 260px; }

.workers-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 6px 6px 6px 12px; border-radius: var(--radius-pill); background: var(--surface-3); }
.w-count { font-size: var(--fs-sm); min-width: 64px; text-align: center; display: inline-flex; align-items: center; gap: 6px; }

.w-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-4);
    color: var(--text);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 100ms, background var(--t-fast), border-color var(--t-fast);
}

.w-btn:hover:not(:disabled) { background: #43402e; border-color: var(--accent); }
.w-btn:active:not(:disabled) { transform: scale(0.88); }
.w-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.lock-hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.tech-link { color: var(--accent) !important; }

.req.met { color: var(--good); }
.req.unmet { color: var(--text-soft); }
.req small { color: var(--text-faint); }
.req-list { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }

.placeholder-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); padding: 4px 12px; align-self: flex-start; }

.art-card.placeholder .ac-media { filter: saturate(0.2) brightness(0.55); }

/* ======================================================= SZKIELETY ======================================================= */
.skel {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(100deg, var(--surface) 30%, var(--surface-3) 50%, var(--surface) 70%) 0 0 / 200% 100%;
    animation: d-shimmer 1.6s linear infinite;
}

.skel-hero { height: 220px; }
.skel-card { height: 150px; }
.skel-art { aspect-ratio: 16 / 12; }
.skel-line { height: 14px; margin-top: 8px; border-radius: var(--radius-pill); }
.dash-loading { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

body .empty-note.is-loading { display: flex; flex-direction: column; align-items: center; gap: var(--s3); min-height: 160px; justify-content: center; }
body .empty-note.is-loading::before { content: ""; width: 30px; height: 30px; border: 3px solid var(--surface-4); border-top-color: var(--accent); border-radius: 50%; animation: d-spin 0.9s linear infinite; }

/* ======================================================= WĄSKI EKRAN ======================================================= */
@media (max-width: 639px) {
    :root { --page-pad: 12px; --gap: 12px; }

    .resources {
        gap: 5px;
        margin-left: calc(var(--page-pad) * -1);
        margin-right: calc(var(--page-pad) * -1);
        width: calc(100% + var(--page-pad) * 2);
        max-width: none;
        padding: 6px var(--page-pad);
        top: 0;
        background: linear-gradient(180deg, rgba(15, 14, 11, 0.99), rgba(15, 14, 11, 0.97));
        border-bottom: 1px solid var(--glass-edge);
        box-shadow: none;
    }

    .resource-card {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "bar" "btn" "meta";
        padding: 7px 7px 8px;
        gap: 4px;
        border-radius: 14px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface);
    }

    .resource-card .r-head { flex-direction: column; align-items: flex-start; gap: 3px; }
    .resource-card .r-icon { width: 28px; height: 28px; border-radius: 9px; }
    .resource-card .r-icon .ico { width: 17px; height: 17px; }
    .resource-card .r-label, .resource-card .tip-i, .resource-card .r-cap, .resource-card .r-meta { display: none; }
    .resource-card .r-value { font-size: 17px; }
    .resource-card .r-value-row { flex-direction: column; align-items: flex-start; gap: 0; }
    .resource-card .r-rate { font-size: 11px; }
    .resource-card > :is(.gather-btn, .tip-wrap) { justify-self: stretch; }
    .resource-card .tip-wrap { display: block; }
    .resource-card .gather-btn { width: 100%; min-height: 34px; padding: 0 2px; font-size: 11.5px; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    body .workforce-bar { padding: 8px 12px; gap: 6px 12px; }
    body .workforce-bar .upkeep { display: none; }

    .card-grid { grid-template-columns: 1fr; }
    .art-card.is-wide { grid-column: auto; }
    .ac-media { aspect-ratio: 2 / 1; }
    .ac-media.r-4x5 { aspect-ratio: 4 / 5; }
    .ac-media.r-thumb { aspect-ratio: 1 / 1; }
    .art-card.ar-portrait > .ac-media { width: 112px; min-height: 200px; aspect-ratio: auto; }
}

@media (min-width: 1100px) {
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
}

.hk-guide { grid-column: 1 / -1; }

/* zwarty HUD: meta w jednej linii, bez pomocniczych zdań (pełne dane w podpowiedziach i ostrzeżeniach) */
.resource-card .r-meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; min-height: 18px; }
.resource-card .r-meta .r-sub, .resource-card .r-meta .r-cd { display: none; }
.resource-card .r-runway { overflow: hidden; text-overflow: ellipsis; }

/* QA: „ŻYWNOŚĆ” z ikoną objaśnienia nie mieściła się w karcie surowca przy 1280 px (ucięte „ŻYWNOŚĆ…”) — ciaśniejsze litery. */
.resource-card .r-label { letter-spacing: 0.03em; }

/* ======================================================= UX-P2B: przełączniki segmentowe, podświetlenie celu, przycisk „danger”, menu „⋯”, „O co tu chodzi?” ======================================================= */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2, var(--surface-3)); border: 1px solid var(--border); max-width: 100%; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg-btn .ico { width: 15px; height: 15px; }
.seg-btn:hover { color: var(--text); background: rgba(255, 233, 180, 0.06); }
.seg-btn.on { background: linear-gradient(180deg, rgba(240, 180, 64, 0.24), rgba(240, 180, 64, 0.1)); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(240, 180, 64, 0.35); }
.seg-n { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-4, var(--surface-3)); color: var(--text); font-size: 11px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.seg-btn.on .seg-n { background: rgba(240, 180, 64, 0.3); }

.flash-target { animation: p2b-flash 2.2s ease-out; }
@keyframes p2b-flash {
    0%, 30% { box-shadow: 0 0 0 3px var(--accent), 0 0 28px 4px var(--glow-accent); }
    100% { box-shadow: 0 0 0 0 rgba(240, 180, 64, 0); }
}
@media (prefers-reduced-motion: reduce) { .flash-target { animation: none; outline: 3px solid var(--accent); outline-offset: 2px; } }

.w-btn-danger, .btn-danger { background: linear-gradient(180deg, #e0765a, #b8402a); color: #fff3ec; border: 0; border-radius: var(--radius-pill); min-height: var(--touch); padding: 0 var(--s4); font-weight: 650; font-size: var(--fs-sm); cursor: pointer; }
.w-btn-danger:hover, .btn-danger:hover { filter: brightness(1.08); }

/* menu „⋯” (akcje rzadkie i kosztowne, np. weto) */
.more-menu { position: relative; display: inline-block; }
.more-menu > summary { list-style: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text-soft); cursor: pointer; font-size: 18px; line-height: 1; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu[open] > summary { color: var(--accent); border-color: var(--accent); }
.more-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow-3); }
.more-menu-list button { text-align: left; min-height: 38px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent; color: var(--text-soft); font-size: var(--fs-sm); cursor: pointer; }
.more-menu-list button:hover:not(:disabled) { background: rgba(255, 233, 180, 0.07); color: var(--text); }
.more-menu-list button.danger { color: #ff9d86; }
.more-menu-list button.danger:hover:not(:disabled) { background: rgba(240, 119, 90, 0.14); }
.more-menu-list button:disabled { opacity: 0.5; cursor: not-allowed; }
.more-menu-list small { display: block; padding: 0 12px 4px; color: var(--text-faint); font-size: 11.5px; line-height: 1.35; }

/* zwijane „O co tu chodzi?” */
details.about { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
details.about > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; color: var(--text-soft); font-size: var(--fs-sm); font-weight: 650; }
details.about > summary::-webkit-details-marker { display: none; }
details.about > summary::after { content: "▾"; margin-left: auto; color: var(--text-faint); transition: transform var(--t-fast); }
details.about[open] > summary::after { transform: rotate(180deg); }
details.about > .about-body { padding: 0 14px 12px; color: var(--text-soft); font-size: var(--fs-sm); line-height: 1.5; }

/* UX-P2B: strata łupu przy pełnym magazynie — wyraźnie w raporcie odbioru */
.es-lost { color: #ff9d86; }
.es-lost .ico { width: 15px; height: 15px; vertical-align: -2px; }

/* ======================================================= DOSTĘPNOŚĆ (UX-P3B) ======================================================= */
/* Kontrast AA (≥ 4,5:1 dla tekstu): brakujący koszt był #f0775a na różowawym tle — na --surface-3 tylko 4,35:1. */
html body .cost-chip.lack { color: #ff9c85; }
/* odznaka liczby na zakładce: biały na --rust miał 4,4:1 — ciemniejsza rdza daje 5,2:1 */
html body .tab-badge { background: #b34e26; }

/* Cele dotykowe ≥ 44 px na telefonie: ⓘ i klikalne chipy zostają małe wizualnie, ale ich pole trafienia rośnie (pseudo-element). */
@media (hover: none), (max-width: 639px) {
    html body .tip-i { position: relative; }
    html body .tip-i::after { content: ""; position: absolute; inset: -12px; }
    :is(.fx-chip, .es-chip, .tr-chip, .th-chip, .w-chip, .cost-chip, .slots-chip, .red-chip):is([tabindex], [data-tip], [data-action], .tip-wrap),
    :is(.mk-chip, .gl-chip, .dash-x) {
        position: relative;
    }
    :is(.fx-chip, .es-chip, .tr-chip, .th-chip, .w-chip, .cost-chip, .slots-chip, .red-chip):is([tabindex], [data-tip], [data-action], .tip-wrap)::after,
    :is(.mk-chip, .gl-chip, .dash-x)::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: max(100%, 44px);
        height: max(100%, 44px);
        transform: translate(-50%, -50%);
    }
    .dash-alert { min-height: 44px; }
}