/* =========================================================================
   Fortnite stats module - reskinned to match the site's palette (see
   :root vars in styles.css) instead of generic white-on-dark overlays.
   ========================================================================= */

.fortnite-browser {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* extra accent colors, scoped to this module only, for category/mode
       dropdown coloring (site palette only defines green/yellow/danger) */
    --fn-blue:   #4a9eff;
    --fn-purple: #b47eea;
    --fn-orange: #e0955f;
}

/* ---- search / add bar ------------------------------------------------- */

.fortnite-search {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.fortnite-search__input {
    flex: 1 1 260px;
    padding: 10px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: .95em;
}

.fortnite-search__input:focus {
    outline: 2px solid var(--yellow-glow);
    border-color: var(--yellow-mid);
}

.fortnite-search__btn {
    padding: 10px 18px;
    background: var(--green-deep);
    border: 1px solid var(--green-mid);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: .9em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.fortnite-search__btn:hover {
    background: var(--green-mid);
    border-color: var(--green-glow);
}

.fortnite-message {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: .85em;
    border: 1px dashed var(--yellow-deep);
    color: var(--yellow-mid);
    background: var(--bg-panel-alt);
}

.fortnite-message--error {
    border-color: var(--danger);
    color: var(--danger);
}

/* ---- roster grid (click to browse) ------------------------------------ */

.fortnite-roster {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fortnite-roster__card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-body);
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.fortnite-roster__card:hover {
    border-color: var(--green-mid);
    background: var(--bg-panel-alt);
    transform: translateY(-1px);
}

.fortnite-roster__card--active {
    border-color: var(--green-glow);
    background: var(--green-deep);
}

.fortnite-roster__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--green-mid);
    color: var(--text-hi);
    font-weight: 700;
    font-size: .85em;
}

.fortnite-roster__info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.fortnite-roster__name {
    color: var(--text-hi);
    font-size: .9em;
    font-weight: 600;
}

.fortnite-roster__sub {
    color: var(--text-muted);
    font-size: .72em;
    font-family: var(--font-mono);
}

/* ---- selected player detail panel -------------------------------------- */

.fortnite-detail {
    padding: 18px;
    background: var(--bg-panel-alt);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}

.fortnite-detail__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.fortnite-refresh {
    font-size: .72em;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-decoration: none;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 3px 8px;
    transition: color .15s ease, border-color .15s ease;
}

.fortnite-refresh:hover {
    color: var(--yellow-mid);
    border-color: var(--yellow-deep);
}

.fortnite-stats-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.fortnite-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.fortnite-stats--empty {
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
}

/* ---- header ------------------------------------------------------- */

.fortnite-stats__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.fortnite-stats__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4em;
    color: var(--text-hi);
}

.fortnite-stats__meta {
    margin-top: 2px;
    font-size: .75em;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.fortnite-stats__levelblock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 160px;
}

.fortnite-stats__level {
    color: var(--yellow-mid);
    font-size: .9em;
    font-weight: 600;
}

.fortnite-stats__progress-outer {
    width: 160px;
    height: 6px;
    border-radius: 4px;
    background: var(--bg-void);
    border: 1px solid var(--line);
    overflow: hidden;
}

.fortnite-stats__progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--green-mid), var(--green-glow));
}

/* ---- filter bar: category + sub-category custom dropdowns ------------- */

.fortnite-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}

.fortnite-dropdown {
    position: relative;
    min-width: 170px;
}

.fortnite-dropdown__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: .88em;
    cursor: pointer;
    transition: border-color .15s ease;
}

.fortnite-dropdown__btn:hover { border-color: var(--fn-color, var(--green-mid)); }
.fortnite-dropdown.is-open .fortnite-dropdown__btn { border-color: var(--fn-color, var(--green-glow)); }

.fortnite-dropdown__icon { font-size: 1.05em; line-height: 1; }
.fortnite-dropdown__label { flex: 1; text-align: left; }
.fortnite-dropdown__caret {
    font-size: .75em;
    color: var(--text-muted);
    transition: transform .15s ease;
}
.fortnite-dropdown.is-open .fortnite-dropdown__caret { transform: rotate(180deg); }

.fortnite-dropdown__list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}

.fortnite-dropdown.is-open .fortnite-dropdown__list { display: flex; }

.fortnite-dropdown__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .85em;
    color: var(--text-body);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
    border-left: 2px solid transparent;
}

.fortnite-dropdown__option:hover {
    background: var(--bg-panel-alt);
    color: var(--text-hi);
}

.fortnite-dropdown__option.is-active {
    color: var(--text-hi);
    border-left-color: var(--fn-color, var(--green-glow));
    background: var(--bg-panel-alt);
}

/* per-category / per-mode accent colors, driven by data-color set in PHP */
.fortnite-dropdown__btn[data-color="green"],
.fortnite-dropdown__option[data-color="green"]  { --fn-color: var(--green-glow); }
.fortnite-dropdown__btn[data-color="yellow"],
.fortnite-dropdown__option[data-color="yellow"] { --fn-color: var(--yellow-glow); }
.fortnite-dropdown__btn[data-color="blue"],
.fortnite-dropdown__option[data-color="blue"]   { --fn-color: var(--fn-blue); }
.fortnite-dropdown__btn[data-color="purple"],
.fortnite-dropdown__option[data-color="purple"] { --fn-color: var(--fn-purple); }
.fortnite-dropdown__btn[data-color="orange"],
.fortnite-dropdown__option[data-color="orange"] { --fn-color: var(--fn-orange); }
.fortnite-dropdown__btn[data-color="neutral"],
.fortnite-dropdown__option[data-color="neutral"] { --fn-color: var(--text-muted); }

.fortnite-stats__section.is-hidden,
.fortnite-stats__mode.is-hidden { display: none; }



.fortnite-stats__section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--bg-panel);
}

/* ---- per-mode subsections (overall / solo / duo / squad / ltm) ----- */

.fortnite-stats__mode {
    margin-top: 0;
}

.fortnite-stats__mode + .fortnite-stats__mode {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.fortnite-stats__mode-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: .85em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fortnite-stats__mode-icon { font-size: 1em; }

.fortnite-stats__submode-title {
    margin: 16px 0 8px;
    font-size: .75em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fortnite-stats__submode-title:not(:first-of-type) {
    padding-top: 12px;
    border-top: 1px dashed var(--line-soft);
}

/* ---- stat card grid -------------------------------------------------- */

.fortnite-stats__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fortnite-stats__grid--headline {
    margin-bottom: 2px;
}

.fortnite-stats__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 100px;
    min-width: 100px;
    padding: 12px 8px;
    border-radius: var(--radius);
    background: var(--bg-void);
    border: 1px solid var(--line-soft);
    transition: border-color .15s ease, transform .1s ease;
}

.fortnite-stats__card:hover {
    border-color: var(--green-mid);
    transform: translateY(-1px);
}

/* headline stats (kills, deaths, kd, wins, matches, winrate, score) get
   a bit more visual weight so they read first */
.fortnite-stats__card--headline {
    flex: 1 1 120px;
    min-width: 120px;
    padding: 16px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--green-deep);
}

.fortnite-stats__card--headline:hover {
    border-color: var(--green-glow);
}

.fortnite-stats__card--headline .fortnite-stats__value {
    font-size: 1.4em;
    color: var(--green-glow);
}

.fortnite-stats__icon {
    font-size: 1.2em;
    line-height: 1;
    margin-bottom: 4px;
}

.fortnite-stats__value {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--text-hi);
    text-align: center;
    word-break: break-word;
}

.fortnite-stats__label {
    margin-top: 4px;
    font-size: .72em;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    text-align: center;
}

/* ---- stats table (rows, Keyboard & Mouse vs Gamepad comparison) ------- */

.fortnite-stats__table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line-soft);
}

.fortnite-stats__table thead th {
    text-align: right;
    padding: 10px 14px;
    font-size: .72em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.fortnite-stats__table thead th.fortnite-stats__table-stat,
.fortnite-stats__table thead th:first-child {
    text-align: left;
}

/* single-column (non-comparison) tables, e.g. Battle Pass extras, don't
   need a header row at all */
.fortnite-stats__table--single thead { display: none; }

.fortnite-stats__row td {
    padding: 9px 14px;
    font-size: .88em;
    color: var(--text-body);
    border-bottom: 1px solid var(--line-soft);
}

.fortnite-stats__row:last-child td { border-bottom: none; }

.fortnite-stats__row td:not(:first-child) {
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-hi);
}

.fortnite-stats__row-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fortnite-stats__row-icon { font-size: 1em; line-height: 1; }

/* zebra striping - two alternating row colors */
.fortnite-stats__row--a { background-color: var(--bg-panel); }
.fortnite-stats__row--b { background-color: var(--bg-void); }

/* headline stats (kills/wins/kd/matches/etc) get a bit of extra weight so
   they still read first, same idea as the old headline cards */
.fortnite-stats__row--headline td:not(:first-child) { color: var(--green-glow); }
.fortnite-stats__row--headline td:first-child { color: var(--text-hi); font-weight: 700; }

/* 30% white overlay on hover, layered on top of whichever zebra color the
   row already has - background-image sits above background-color so both
   apply at once without needing a separate wrapper element */
.fortnite-stats__row:hover {
    background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3));
    cursor: default;
}

/* ---- small screens ---------------------------------------------------- */

@media (max-width: 560px) {
    .fortnite-stats__header { flex-direction: column; }
    .fortnite-stats__levelblock { align-items: flex-start; }
    .fortnite-detail__toolbar { justify-content: flex-start; }
}