/* Boards. Everything here belongs to this addon, not to the CMS: a site
   without it has no board and no styles for one. Colours come from whatever
   theme is running, so a board looks like the rest of the site rather than
   like a plugin bolted onto it. */

.lb-board { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; }

.lb-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--cms-line, rgb(255 255 255 / 0.09));
}

.lb-row:first-child { border-top: 1px solid var(--cms-line, rgb(255 255 255 / 0.09)); }
.lb-row:hover { background: var(--cms-pane, rgb(255 255 255 / 0.02)); }

.lb-rank {
    min-width: 2.5ch;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--cms-dim, #9AA1B1);
    text-align: end;
}

/* A board people can win is worth showing a winner on. */
.lb-row:nth-child(1) .lb-rank { color: var(--cms-accent, #D2432A); font-size: 1.25em; }
.lb-row:nth-child(2) .lb-rank,
.lb-row:nth-child(3) .lb-rank { color: var(--cms-accent, #D2432A); }

.lb-face { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; }

.lb-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lb-who a { color: inherit; text-decoration: none; }
.lb-who a:hover { color: var(--cms-accent, #D2432A); }

.lb-cols { display: flex; gap: 22px; margin-inline-start: auto; }

.lb-col {
    text-align: end;
    font-variant-numeric: tabular-nums;
    min-width: 4.5ch;
}

.lb-col b { display: block; font-weight: 700; font-size: 0.95em; }
.lb-col span { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cms-dim, #9AA1B1); }

.lb-score { text-align: end; min-width: 6ch; padding-inline-start: 8px; }
.lb-score b { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-score span { display: block; font-size: 11px; color: var(--cms-dim, #9AA1B1); }

/* The signed-in player's own row, wherever it lands. */
.lb-row-you { background: color-mix(in srgb, var(--cms-accent, #D2432A) 12%, transparent); }
.lb-row-you .lb-who::after { content: ' — you'; color: var(--cms-accent, #D2432A); font-weight: 600; }

.lb-yours {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 13px 16px;
    border: 1px solid var(--cms-accent, #D2432A);
    border-radius: var(--cms-radius, 14px);
}

/* Which server a board is showing. */
.lb-servers { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }

.lb-server {
    padding: 6px 13px;
    border: 1px solid var(--cms-line, rgb(255 255 255 / 0.12));
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--cms-dim, #9AA1B1);
}

.lb-server:hover { color: var(--cms-txt, #E9EAEE); border-color: var(--cms-dim, #9AA1B1); }

.lb-server[aria-current='true'] {
    color: var(--cms-txt, #E9EAEE);
    border-color: var(--cms-accent, #D2432A);
    background: color-mix(in srgb, var(--cms-accent, #D2432A) 14%, transparent);
}

.lb-note { font-size: 13px; color: var(--cms-dim, #9AA1B1); margin: 10px 0 0; }
.lb-more { display: inline-block; margin-top: 16px; color: var(--cms-accent, #D2432A); font-weight: 600; text-decoration: none; }
.lb-more:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .lb-cols { display: none; }
}

/* ---- the titles page ---- */

.lb-head { margin-bottom: 18px; }
.lb-sep { width: 1px; align-self: stretch; background: var(--cms-line, rgb(255 255 255 / 0.12)); margin: 0 4px; }

/*
 * Three across, or none.
 *
 * auto-fit dropped to two columns on a normal screen and left third place
 * sitting alone on the next row, which reads as a mistake rather than a
 * ranking. Below the breakpoint they stack, in order, which is still a podium.
 */
.lb-podium {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 22px;
}

@media (min-width: 860px) {
    /* First is wider as well as brighter: the shape says who won before any
       of the writing is read. */
    .lb-podium { grid-template-columns: 1.25fr 1fr 1fr; align-items: start; }
}

.lb-seat {
    position: relative;
    border: 1px solid var(--cms-line, rgb(255 255 255 / 0.1));
    border-radius: var(--cms-radius, 14px);
    padding: 15px 17px;
    background: var(--cms-pane, rgb(255 255 255 / 0.02));
    overflow: hidden;
}

/* A bar along the top, brightest for first and fading back for the others. */
.lb-seat::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
    background: var(--cms-dim, #9AA1B1); opacity: .35;
}

.lb-seat-1 { border-color: var(--cms-accent, #D2432A); }
.lb-seat-1::before { background: var(--cms-accent, #D2432A); opacity: 1; height: 3px; }
.lb-seat-2::before { opacity: .55; }

@media (min-width: 860px) {
    .lb-seat-1 { padding: 19px 21px; }
    .lb-seat-1 .lb-seat-who a { font-size: 1.4em; }
    .lb-seat-1 .lb-seat-who img { width: 58px; height: 58px; }
    .lb-seat-1 .lb-seat-titles li { font-size: 14px; }
}

.lb-seat > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-place { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cms-accent, #D2432A); }
.lb-held { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-held small { font-weight: 400; font-size: 12px; color: var(--cms-dim, #9AA1B1); }

.lb-seat-who { display: flex; align-items: center; gap: 11px; margin: 13px 0; }
.lb-seat-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.lb-seat-who a { font-size: 1.15em; font-weight: 700; color: inherit; text-decoration: none; }
.lb-seat-who a:hover { color: var(--cms-accent, #D2432A); }

.lb-seat-titles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.lb-seat-titles li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.lb-seat-titles b { font-weight: 600; }
.lb-seat-titles span { color: var(--cms-dim, #9AA1B1); font-variant-numeric: tabular-nums; }

.lb-tools { margin-top: 26px; }
.lb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.lb-search input {
    width: 100%;
    padding: 11px 15px;
    border-radius: 999px;
    border: 1px solid var(--cms-line, rgb(255 255 255 / 0.12));
    background: var(--cms-pane, rgb(255 255 255 / 0.03));
    color: inherit;
    font: inherit;
}

.lb-search input:focus { outline: 2px solid var(--cms-accent, #D2432A); outline-offset: 2px; }

.lb-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.lb-cat {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--cms-line, rgb(255 255 255 / 0.12));
    background: none;
    color: var(--cms-dim, #9AA1B1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.lb-cat span { opacity: 0.65; font-variant-numeric: tabular-nums; }
.lb-cat:hover { color: var(--cms-txt, #E9EAEE); }

.lb-cat[aria-pressed='true'] {
    color: var(--cms-txt, #E9EAEE);
    border-color: var(--cms-accent, #D2432A);
    background: color-mix(in srgb, var(--cms-accent, #D2432A) 14%, transparent);
}

.lb-titles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.lb-title {
    border: 1px solid var(--cms-line, rgb(255 255 255 / 0.1));
    border-radius: var(--cms-radius, 14px);
    padding: 13px 15px;
    background: var(--cms-pane, rgb(255 255 255 / 0.02));
}

.lb-title {
    display: flex; flex-direction: column;
    transition: border-color .16s ease, transform .16s ease;
}
.lb-title:hover { border-color: var(--cms-dim, #9AA1B1); transform: translateY(-1px); }

.lb-title > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lb-title > header b {
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--cms-dim, #9AA1B1);
}
.lb-title > header span {
    flex: 0 0 auto;
    font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--cms-dim, #9AA1B1); opacity: .7;
}

/* The person is what a player looks for, so it is pushed to the bottom of the
   card and the count sits under it. Every card lines up the same way. */
.lb-title-who { margin-block: 12px 10px !important; }
.lb-title > footer { margin-block-start: auto; }

.lb-title-who { display: flex; align-items: center; gap: 9px; margin: 11px 0; }
.lb-title-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.lb-title-who a { font-weight: 600; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-title-who a:hover { color: var(--cms-accent, #D2432A); }

.lb-title > footer { display: flex; align-items: baseline; gap: 7px; }
.lb-title > footer b {
    font-size: 1.7em; font-weight: 800; line-height: 1;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    color: var(--cms-txt, #E9EAEE);
}
.lb-title > footer span { font-size: 12px; color: var(--cms-dim, #9AA1B1); }

@media (prefers-reduced-motion: reduce) {
    .lb-title { transition-duration: 1ms; }
    .lb-title:hover { transform: none; }
}

.lb-none { margin-top: 20px; color: var(--cms-dim, #9AA1B1); }
.lb-boardblock { margin-top: 30px; }

/* The page is one themed block with parts inside it, never several blocks in a
   row. A theme puts its own section padding on .cms-block - Nexus uses 120px -
   so three stacked blocks put three lots of dead space down the middle of one
   screen, and no negative margin can guess a number the theme is free to
   change. */
.lb-part { margin-top: 42px; }

/* ---- one player, everything about them ---- */

.lb-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; }

.lb-badges li {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cms-accent, #D2432A);
    border: 1px solid var(--cms-accent, #D2432A);
    background: color-mix(in srgb, var(--cms-accent, #D2432A) 12%, transparent);
}

/* Categories are wildly different lengths - PVP has a dozen rows, Fishing has
   one - so a grid left a hole under every short one. Columns let them flow. */
.lb-sheet { columns: 250px 4; column-gap: 26px; }
.lb-sheet > section { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 22px; }
.lb-sheet h3 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cms-dim, #9AA1B1); margin: 0 0 8px; }
.lb-sheet dl { margin: 0; display: flex; flex-direction: column; }

.lb-sheet dl > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cms-line, rgb(255 255 255 / 0.07));
}

.lb-sheet dt { color: var(--cms-dim, #9AA1B1); font-size: 13px; }
.lb-sheet dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* A row they are currently best at on the whole server. */
.lb-sheet .lb-holds dd { color: var(--cms-accent, #D2432A); }
.lb-sheet .lb-holds dt::after { content: ' ★'; color: var(--cms-accent, #D2432A); }