:root {
    color-scheme: dark;
    --bg: #0f1115;
    --text: #e6e6e6;
    --muted: #aab3c5;
    --border: #2a3142;
    --panel1: #141b29;
    --panel2: #0b0f17;
    --yellow: #f4e43b;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 24px;
}

h1 {
    text-align: center;
    margin: 0 0 16px 0;
    color: var(--yellow);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.wip-disclaimer {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: #bbb;
    text-align: center;
}

.controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

select, button {
    background: #1b1f2a;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 8px;
}

    button:hover {
        filter: brightness(1.08);
        cursor: pointer;
    }

#status {
    margin: 10px 0 16px 0;
    color: var(--muted);
}

/* ======================================================
   LOADOUT LAYOUT (FINAL – FLEX ONLY, RESPONSIVE)
   ====================================================== */

.results.loadout-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

/* LEFT: Primary / Secondary / Grenade */
.loadout-left {
    flex: 1 1 360px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* RIGHT: Stratagems */
.loadout-right {
    flex: 1.2 1 420px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    /* IMPORTANT: never allow nested scrolling */
    max-height: none;
    overflow: visible;
}

/* ======================================================
   SLOT CARDS
   ====================================================== */

.slot-card {
    background: radial-gradient(circle at top left, var(--panel1), var(--panel2));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

    /* Section headers */
    .slot-card > strong {
        display: block;
        margin-bottom: 12px;
        color: var(--yellow);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

/* ======================================================
   ITEM ROWS / ICONS
   ====================================================== */

.item-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Base icon styling (applies to ALL icons) */
.item-icon {
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.35);
    padding: 10px;
}

/* Large icons (Primary / Secondary / Grenade) */
.item-icon-large {
    width: 110px;
    height: 110px;
}

/* Names */
.item-name,
.stratagem-list li span {
    color: var(--yellow);
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
}

/* Stratagem list */
.stratagem-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .stratagem-list li {
        display: flex;
        align-items: center;
        gap: 14px;
        background: linear-gradient(145deg, #0f1520, #0b0f17);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
    }

    /* Stratagem icons */
    .stratagem-list .item-icon {
        width: 88px;
        height: 88px;
    }

/* ======================================================
   RESPONSIVE TUNING
   ====================================================== */

@media (max-width: 900px) {
    .item-icon-large {
        width: 88px;
        height: 88px;
    }

    .stratagem-list .item-icon {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 700px) {
    .loadout-left,
    .loadout-right {
        min-width: 240px;
    }
}

@media (max-width: 480px) {
    body {
        margin: 16px;
    }

    .slot-card {
        padding: 12px;
    }

    .item-row {
        gap: 12px;
    }

    .item-icon-large {
        width: 72px;
        height: 72px;
    }

    .stratagem-list .item-icon {
        width: 60px;
        height: 60px;
    }
}

/* Footer */
.license-footer {
    padding-top: 120px; /* ~3 lines worth of space */
    text-align: center;
    color: #c9c9c9;
    font-size: 0.9rem;
}

    .license-footer p {
        margin: 0 0 10px 0; /* keeps paragraphs tidy */
    }

    .license-footer a {
        color: #c9c9c9;
    }