/**
 * Brotato tracker — styles.
 * Scoped under .brt-tracker.
 *
 * Sized for the fullscreen view first (TRACKER-ARCHITECTURE.md): this table
 * goes on stream, so the counts carry the weight and the labels stay out of
 * the way. The mini preview renders the same markup at scale(0.5).
 */

.brt-tracker {
    color: #e0e0e0;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
}
.brt-tracker * { box-sizing: border-box; }

.brt-tracker.brt-empty p {
    margin: 0;
    padding: 24px;
    text-align: center;
    color: #999;
    background: #2d2d2d;
    border-radius: 8px;
}

/* ===== Summary bar =====
   One slab with hairline dividers rather than a row of floating capsules:
   these are five readings off the same instrument, so they belong on the same
   panel. Each zone is tied to its column by a short rule under the label —
   a thin accent identifies without turning the figure into a coloured chip.

   Sticky, because the roster is 60-odd rows: the totals are the reason to
   scroll and are useless if they scroll away.

   The height is fixed and the bar never wraps (it scrolls sideways instead) so
   the table headers below can pin to a known offset. */
/* Fixed, not min-, and kept in step with --brt-summary-h by hand. The table
   headers below pin to exactly this offset, so if the bar can grow the headers
   hide behind it. Everything inside is vertically centred, so there is room to
   spare without the height moving. */
.brt-tracker { --brt-summary-h: 74px; }

.brt-summary {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    height: var(--brt-summary-h);
    margin: 0 0 14px;
    background: linear-gradient(180deg, #242424 0%, #1b1b1b 100%);
    border: 1px solid #343434;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.brt-stat {
    --brt-accent: #4da44b;
    flex: 1 0 auto;
    min-width: 112px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border-left: 1px solid #303030;
}
.brt-stat:first-child { border-left: 0; }

.brt-stat-num {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: #ededed;
    font-variant-numeric: tabular-nums;
}
.brt-stat-label {
    position: relative;
    padding-top: 6px;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8b8b8b;
    white-space: nowrap;
}
/* The zone's colour, as a rule rather than a fill. */
.brt-stat-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: var(--brt-accent);
}
/* The headline figure earns its size, and the site green. */
.brt-stat-hero { min-width: 148px; }
.brt-stat-hero .brt-stat-num { font-size: 33px; color: #4da44b; }

/* ===== Roster ===== */
/* auto-fit rather than a fixed count: three columns at 1920 (the stream), two
   on a laptop, one stacked list on a phone. The floor fits the widest thing a
   column has to carry — a name, two counts and four toggles — and nothing more.
   Raising it to make room for something inside a cell is the wrong lever: it
   costs a whole column and makes the roster scroll for longer. */
.brt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(470px, 1fr));
    gap: 8px 16px;
    align-items: start;
}

.brt-table {
    width: 100%;
    /* separate, NOT collapse. A collapsed table hands its borders to the table
       itself, and a sticky <th> then has nothing of its own to stick with —
       the header row scrolls away. border-spacing: 0 keeps the collapsed look. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}
/* Pinned below the summary bar, not to the top of the viewport — otherwise
   the two stack on each other on the way down. */
.brt-table thead th {
    position: sticky;
    top: var(--brt-summary-h);
    z-index: 2;
    background: #1c1c1c;
    padding: 6px 8px 5px;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e7e7e;
    font-weight: 700;
    border-bottom: 1px solid #333;
    text-align: center;
    white-space: nowrap;
}
.brt-table thead .brt-th-name { text-align: left; }
/* The zone owns its column via a rule along the bottom of the header, so the
   label itself can stay plain and readable. */
.brt-table thead .brt-th-mode {
    color: #d4d4d4;
    border-bottom: 2px solid var(--brt-accent);
}


.brt-row > * { border-bottom: 1px solid #333; }
.brt-row:hover { background: #262626; }
.brt-row-active { background: rgba(77, 164, 75, .07); }
.brt-row-active:hover { background: rgba(77, 164, 75, .13); }

/* Brief flash so a save is visibly acknowledged without a toast. */
.brt-row-saved { background: rgba(77, 164, 75, .3); }
.brt-row { transition: background .35s ease; }

.brt-name {
    text-align: left;
    font-weight: 600;
    color: #e0e0e0;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* The 1px/100% pair makes this the column that absorbs the slack, so the
       counts keep their width. The floor stops it giving away so much that
       "Beastmaster" becomes "Bea..." — a roster you cannot read is not one you
       can log runs into. */
    max-width: 1px;
    width: 100%;
    min-width: 150px;
}
/* The character's in-game portrait. Downscaled from a 4x source, so it wants
   smooth resampling rather than the pixelated rendering a native-res sprite
   would get. */
.brt-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: contain;
}
.brt-icon-blank {
    display: inline-block;
    border-radius: 4px;
    background: #2a2a2a;
}

.brt-rank {
    display: inline-block;
    min-width: 26px;
    margin-right: 6px;
    color: #4da44b;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.brt-tier {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #3a3a3a;
    color: #bbb;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.brt-cell {
    position: relative;   /* the win watermark is positioned against this */
    padding: 3px 4px;
    text-align: center;
    /* Floor, because the name column takes all the slack: without it a
       read-only cell collapses to the width of its number and the win
       watermark behind it gets clipped mid-word. Sized to the longest mark
       ("BOSS KILLED", 92px at 14px/900) plus the padding. */
    min-width: 104px;
}
.brt-cell-inner {
    position: relative;
    z-index: 1;           /* the number sits over the watermark, never under */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* A cleared zone is a solid block, not a tint — it has to read as "done" from
   across a room, on a stream, with no interface around it. */
.brt-cell-won { background: #2b2b2b; }

/* ===== Win record ===== */
/* The result, in words, as the cell's background. Out of flow entirely: sitting
   inline beside the count it widened every cell and wrapped onto extra lines,
   which is what turned a dense roster into a long one.

   Big and heavy, but cut from the same black as the cell and read only by its
   stroke — so it carries at a glance without ever competing with the number.
   Large + dark beats small + grey here: a small grey word is a second thing to
   read, an embossed one is texture that resolves into a word. */
.brt-cell-mark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;   /* both marks stack: side by side they overrun a
                                 read-only cell and get clipped mid-word */
    align-items: center;
    justify-content: center;
    gap: 1px;
    /* Darker than the cell it sits on, so it reads as cut into the block
       rather than printed on it. */
    color: #1c1c1c;
    -webkit-text-stroke: .5px rgba(255, 255, 255, .17);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    overflow: hidden;
}
/* Flex items shrink by default, which would squeeze a mark narrower than its
   text and clip it silently rather than showing the overflow. */
.brt-cell-mark-line { flex: 0 0 auto; }
/* Two marks share one cell, so they step down rather than clip. Driven by a
   class the renderer sets, not :has() — the size has to be the same on both
   lines, and a selector that silently no-ops leaves them mismatched. */
.brt-cell-mark.has-two .brt-cell-mark-line { font-size: 10px; }
/* Admins are shown the chips instead — the same fact stated twice in one cell
   is just noise, and the chips are the ones you can click. */
.brt-editable .brt-cell-mark { display: none; }

/* ===== Win toggles (admins only) ===== */
/* Single letters, because these repeat four times in every row: spelling them
   out here cost ~160px per row, which is a whole column off the grid. The words
   live on the watermark and in the title attribute. */
.brt-wins {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
}
.brt-win {
    width: 20px;
    height: 20px;
    padding: 0;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #383838;
    border-radius: 3px;
    background: transparent;
    color: #5f5f5f;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.brt-win:hover {
    border-color: #6a6a6a;
    color: #bbb;
}
/* On reads as "set", not as a trophy — the watermark is the trophy. */
.brt-win.is-on {
    background: rgba(255, 255, 255, .09);
    border-color: #6f6f6f;
    color: #d8d8d8;
}
.brt-win:active { transform: translateY(1px); }
/* The loudest thing in the cell, by a clear margin. The halo is the cell's own
   colour: it carves the number out of the watermark behind it instead of
   letting the two letterforms tangle. */
.brt-num-static {
    display: inline-block;
    min-width: 26px;
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--brt-accent);
}
.brt-cell-won .brt-num-static {
    text-shadow:
        0 0 5px #2b2b2b, 0 0 5px #2b2b2b,
        0 0 2px #2b2b2b;
}
/* A zero recedes — the eye should land on what has actually been played. */
.brt-num-static.brt-zero { color: #555; }

.brt-total {
    padding: 3px 8px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #e0e0e0;
    border-left: 1px solid #333;
}
.brt-row:not(.brt-row-active) .brt-total { color: #555; }

/* ===== Editing controls (admins only) ===== */
.brt-count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.brt-step {
    width: 22px;
    height: 22px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid #444;
    border-radius: 4px;
    background: #333;
    color: #ccc;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.brt-step:hover {
    background: var(--brt-accent);
    border-color: var(--brt-accent);
    color: #fff;
}
.brt-step:active { transform: translateY(1px); }

/* Explicit, because the site's form styles and the dark tracker background
   otherwise leave this as a white box with invisible text. */
.brt-tracker input.brt-num {
    width: 46px;
    height: 24px;
    padding: 0 2px;
    margin: 0;
    border: 1px solid #444;
    border-radius: 4px;
    background: #1f1f1f;
    color: var(--brt-accent);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    -moz-appearance: textfield;
}
.brt-tracker input.brt-num::-webkit-outer-spin-button,
.brt-tracker input.brt-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.brt-tracker input.brt-num:focus {
    outline: none;
    border-color: var(--brt-accent);
    background: #262626;
}

/* A failed save must not look like a successful one. */
.brt-tracker.brt-error .brt-summary {
    outline: 2px solid #e0533d;
    outline-offset: 4px;
}
.brt-tracker.brt-error .brt-summary::after {
    content: 'Save failed — check the browser console.';
    flex: 1 1 100%;
    color: #e0533d;
    font-size: 12px;
}

@media (max-width: 600px) {
    .brt-tracker { --brt-summary-h: 64px; }
    .brt-stat { min-width: 100px; padding: 0 12px; }
    .brt-stat-num { font-size: 20px; }
    .brt-stat-hero { min-width: 126px; }
    .brt-stat-hero .brt-stat-num { font-size: 27px; }
    .brt-grid { grid-template-columns: 1fr; }
}