/* Hold-to-show scoreboard and the end-of-match results flow. */

.ds-scoreboard {
    position: absolute;
    left: 50%;
    top: 11vh;
    transform: translateX(-50%);
    width: min(calc(1380 * var(--u)), 96vw);
    /* Down to a bottom margin: the held board hides the weapon corner, so the rows
       may use the screen's lower part (20v20 fits at 1280x720). */
    max-height: calc(100% - 11vh - 24 * var(--u));
    display: flex;
    flex-direction: column;
    background: rgba(8, 11, 9, 0.78);
    border-top: calc(3 * var(--u)) solid var(--tan);
    box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.5);
    pointer-events: none;
    animation: ds-sb-in 0.14s ease-out both;
    /* Board updates rewrite cell text in place; containment keeps that relayout
       inside the panel. */
    contain: layout style;
}

@keyframes ds-sb-in {
    from { opacity: 0; transform: translate(-50%, calc(-8 * var(--u))); }
}

.ds-sb-top {
    display: flex;
    align-items: baseline;
    gap: calc(16 * var(--u));
    padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u));
    border-bottom: 1px solid var(--line);
}

.ds-sb-title {
    font-family: var(--font-title);
    font-size: calc(30 * var(--t));
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ds-sb-sub { font-size: calc(15 * var(--t)); color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
.ds-sb-clock { margin-left: auto; font-size: calc(26 * var(--t)); font-weight: 700; }

.ds-sb-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: calc(18 * var(--u));
    padding: calc(12 * var(--u)) calc(16 * var(--u));
    overflow: hidden;
}

/* A group column fills the body height; its row list takes what is left, so the
   UI can measure how many rows fit (scoreboard.js fitTable). */
.ds-sb-col {
    --rel: var(--ink);
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;   /* a table that cannot fit clips, it never paints over its neighbour */
}

/* Rows stack in a column; the "+N MORE" line sits after the listed rows and the
   pinned self row after it (CSS order), whatever their DOM order. */
.ds-sb-list { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ds-sb-list > * { flex: none; }

.ds-sb-more {
    order: 1;
    display: flex;
    align-items: center;
    min-height: calc(24 * var(--t));
    padding: 0 calc(10 * var(--u)) 0 calc(40 * var(--t));
    color: var(--muted);
    font-size: calc(13 * var(--t));
    font-weight: 600;
    letter-spacing: 0.16em;
}

.ds-sb-col[data-rel='friend'] { --rel: var(--friend); }
.ds-sb-col[data-rel='enemy'] { --rel: var(--enemy); }

.ds-sb-head {
    display: flex;
    align-items: baseline;
    gap: calc(10 * var(--u));
    padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u));
    border-bottom: calc(2 * var(--u)) solid var(--rel);
}

.ds-sb-team { font-size: calc(22 * var(--t)); font-weight: 700; letter-spacing: 0.16em; }
.ds-sb-col[data-team='alpha'] .ds-sb-team { color: var(--tan-2); }
.ds-sb-col[data-team='beta'] .ds-sb-team { color: var(--green); }
.ds-sb-side { font-size: calc(12 * var(--t)); color: var(--rel); letter-spacing: 0.2em; }
.ds-sb-total { margin-left: auto; font-size: calc(30 * var(--t)); font-weight: 700; color: var(--rel); line-height: 1; }

.ds-sb-row {
    /* Geometry shared with scoreboard.js TABLE_METRICS: rank 30t, callsign at least
       118t, stat cells max(58u, 50t), 10u padding. The UI drops low-priority
       columns (ping, honor, revives, objective) when they do not fit. */
    --cw: max(calc(58 * var(--u)), calc(50 * var(--t)));
    contain: layout style;
    display: grid;
    grid-template-columns: calc(30 * var(--t)) minmax(calc(118 * var(--t)), 1fr) repeat(var(--cols, 6), var(--cw));
    align-items: center;
    min-height: calc(30 * var(--t));
    padding: 0 calc(10 * var(--u));
    font-size: calc(16 * var(--t));
    font-weight: 600;
    border-bottom: 1px solid rgba(236, 232, 220, 0.06);
}

/* Zebra stripe: zero specificity (:where) and the colour only, so the own row's
   highlight (.ds-sb-row.is-self) wins on odd rows too. */
:where(.ds-sb-row:nth-child(odd):not(.ds-sb-header)) { background-color: rgba(236, 232, 220, 0.025); }


.ds-sb-header {
    min-height: calc(26 * var(--t));
    color: var(--muted);
    font-size: calc(12 * var(--t));
    letter-spacing: 0.12em;
    border-bottom-color: var(--line);
}

.ds-sb-header > * { overflow: hidden; white-space: nowrap; text-overflow: clip; }
.ds-sb-header .ds-sb-cell { font-weight: 600; }

.ds-sb-row.is-self {
    background: linear-gradient(90deg, rgba(201, 168, 106, 0.32), rgba(201, 168, 106, 0.12));
    box-shadow: inset calc(3 * var(--u)) 0 0 var(--tan-2);
}

.ds-sb-row.is-pinned { order: 2; margin-top: calc(6 * var(--u)); border-top: 1px dashed var(--line-2); }
.ds-sb-row.is-out .ds-sb-callsign { opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 1px; }

.ds-sb-rank { color: var(--muted); font-size: calc(14 * var(--t)); }
.ds-sb-name { display: flex; align-items: center; gap: calc(7 * var(--u)); min-width: 0; overflow: hidden; }
.ds-sb-callsign { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sb-level,
.ds-sb-bot { flex: none; }

.ds-sb-level {
    min-width: calc(24 * var(--u));
    padding: 0 calc(3 * var(--u));
    border: 1px solid rgba(230, 204, 147, 0.55);
    color: var(--tan-2);
    font-size: calc(11 * var(--t));
    font-weight: 700;
    text-align: center;
}

.ds-sb-bot {
    padding: 0 calc(4 * var(--u));
    background: rgba(236, 232, 220, 0.12);
    color: var(--muted);
    font-size: calc(10 * var(--t));
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ds-sb-cell { text-align: right; white-space: nowrap; }
.ds-sb-score { color: var(--ink); font-weight: 700; }
/* FFA ranks by tags (the win condition): emphasise TAGS instead of SCORE. */
.ds-sb-col[data-rel='none'] .ds-sb-row:not(.ds-sb-header) .ds-sb-tags { color: var(--ink); font-weight: 700; }
.ds-sb-col[data-rel='none'] .ds-sb-row:not(.ds-sb-header) .ds-sb-score { color: var(--ink-2); font-weight: 600; }
.ds-sb-header .ds-sb-cell { text-align: right; }
.ds-sb-ping { color: var(--muted); }
.ds-sb-empty { padding: calc(20 * var(--u)); color: var(--muted); text-align: center; letter-spacing: 0.12em; }

.ds-sb-foot {
    padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(12 * var(--u));
    color: var(--dim);
    font-size: calc(12 * var(--t));
    letter-spacing: 0.16em;
    border-top: 1px solid var(--line);
}

.ds-sb-foot:empty { display: none; }

/* While the board is held, the HUD it would overlap steps aside, as in CoD: the
   corners (minimap, callout, killfeed, weapon panel) and the top-centre column under
   the compass (score bar and clock, which the board repeats, objective strip, safe
   zone, notices, medals). The compass stays above the board, and the connection
   banner stays readable. */
.ds-board-open .ds-top-left,
.ds-board-open .ds-top-right,
.ds-board-open .ds-bottom-left,
.ds-board-open .ds-bottom-right,
.ds-board-open .ds-top-center > :not(.ds-compass):not(.ds-conn-slot) { opacity: 0; transition: opacity 0.12s; }

/* ------------------------------------------------------------------ results */

.ds-results {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    text-shadow: var(--shadow-text);
}

.ds-results[data-stage='summary'],
.ds-results[data-stage='vote'] {
    background: linear-gradient(180deg, rgba(6, 8, 7, 0.84), rgba(6, 8, 7, 0.9));
}

.ds-res-header {
    display: flex;
    align-items: baseline;
    gap: calc(22 * var(--u));
    padding: calc(28 * var(--u)) calc(56 * var(--u)) calc(14 * var(--u));
    background: linear-gradient(180deg, rgba(6, 8, 7, 0.82), rgba(6, 8, 7, 0));
}

.ds-res-outcome {
    font-family: var(--font-title);
    font-size: calc(64 * var(--t));
    line-height: 1;
    letter-spacing: 0.08em;
}

.ds-res-header[data-outcome='victory'] .ds-res-outcome { color: var(--gold); }
.ds-res-header[data-outcome='defeat'] .ds-res-outcome { color: var(--enemy); }
.ds-res-sub { font-size: calc(18 * var(--t)); letter-spacing: 0.16em; color: var(--ink-2); }

.ds-res-timer {
    margin-left: auto;
    font-size: calc(18 * var(--t));
    letter-spacing: 0.2em;
    color: var(--muted);
}

/* Podium overlay: the renderer draws the 3D podium behind these plates. */
.ds-res-podium {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: calc(40 * var(--u));
}

.ds-res-mvp {
    margin-top: calc(6 * var(--u));
    padding: calc(12 * var(--u)) calc(90 * var(--u)) calc(16 * var(--u));
    background: radial-gradient(ellipse at 50% 50%, rgba(6, 8, 7, 0.78) 0%, rgba(6, 8, 7, 0.5) 55%, rgba(6, 8, 7, 0) 75%);
    text-align: center;
    animation: ds-mvp-in 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ds-mvp-in {
    from { opacity: 0; transform: translateY(calc(-16 * var(--u))); letter-spacing: 0.4em; }
}

.ds-mvp-label { font-size: calc(16 * var(--t)); letter-spacing: 0.44em; color: var(--gold); }
.ds-mvp-name { font-family: var(--font-title); font-size: calc(54 * var(--t)); letter-spacing: 0.04em; line-height: 1.1; }
.ds-mvp-stats { font-size: calc(16 * var(--t)); letter-spacing: 0.2em; color: var(--ink-2); }

.ds-res-plates {
    display: grid;
    grid-template-columns: repeat(3, calc(300 * var(--u)));
    align-items: end;
    gap: calc(40 * var(--u));
}

.ds-plate {
    padding: calc(12 * var(--u)) calc(14 * var(--u));
    background: linear-gradient(180deg, rgba(10, 13, 11, 0.55), rgba(10, 13, 11, 0.92));
    border-top: calc(3 * var(--u)) solid var(--line-2);
    text-align: center;
    animation: ds-plate-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ds-plate[data-place='1'] { border-top-color: var(--gold); padding-top: calc(18 * var(--u)); animation-delay: 0.5s; }
.ds-plate[data-place='2'] { border-top-color: #c7ccd1; animation-delay: 0.3s; }
.ds-plate[data-place='3'] { border-top-color: #b98552; animation-delay: 0.1s; }
.ds-plate.is-self { box-shadow: inset 0 0 0 1px rgba(230, 204, 147, 0.6); }
.ds-plate.is-empty { visibility: hidden; }

@keyframes ds-plate-in {
    from { opacity: 0; transform: translateY(calc(20 * var(--u))); }
}

.ds-plate-place { font-size: calc(14 * var(--t)); letter-spacing: 0.3em; color: var(--muted); }
.ds-plate[data-place='1'] .ds-plate-place { color: var(--gold); }
.ds-plate-name { font-size: calc(26 * var(--t)); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-plate-name[data-team='alpha'] { color: var(--tan-2); }
.ds-plate-name[data-team='beta'] { color: var(--green); }
.ds-plate-score { font-size: calc(34 * var(--t)); font-weight: 700; line-height: 1; }
.ds-plate-team { font-size: calc(12 * var(--t)); letter-spacing: 0.24em; color: var(--muted); margin-top: calc(2 * var(--u)); }

/* Summary: scoreboard, awards and XP. */
.ds-res-summary {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(420 * var(--u));
    grid-template-rows: minmax(0, 1fr);
    gap: calc(26 * var(--u));
    padding: calc(4 * var(--u)) calc(56 * var(--u)) calc(40 * var(--u));
    min-height: 0;
    animation: ds-toast-in 0.3s ease-out both;
}

.ds-res-board {
    display: flex;
    gap: calc(16 * var(--u));
    min-height: 0;
    overflow: hidden;
}

.ds-res-board .ds-sb-row:not(.ds-sb-header) { min-height: calc(28 * var(--t)); font-size: calc(15 * var(--t)); }
.ds-res-side {
    display: flex;
    flex-direction: column;
    gap: calc(22 * var(--u));
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ds-res-heading {
    font-size: calc(14 * var(--t));
    letter-spacing: 0.3em;
    color: var(--tan-2);
    border-bottom: 1px solid var(--line);
    padding-bottom: calc(6 * var(--u));
    margin-bottom: calc(8 * var(--u));
}

.ds-res-empty { color: var(--muted); font-size: calc(15 * var(--t)); }

.ds-award {
    display: grid;
    grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(12 * var(--u));
    padding: calc(7 * var(--u)) calc(10 * var(--u));
    margin-bottom: calc(5 * var(--u));
    background: rgba(236, 232, 220, 0.04);
    border-left: calc(2 * var(--u)) solid var(--line-2);
    animation: ds-kf-in 0.3s ease-out both;
}

.ds-award.is-self { border-left-color: var(--gold); background: rgba(242, 193, 78, 0.1); }

.ds-award-emblem {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
    background: linear-gradient(160deg, #f5d27a, #8f6f28);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.ds-award-emblem[data-award='field-medic'],
.ds-award-emblem[data-award='objective-anchor'] { background: linear-gradient(160deg, #9fd6ff, #2d6f9e); }
.ds-award-emblem[data-award='sportsman'],
.ds-award-emblem[data-award='iron-goggles'] { background: linear-gradient(160deg, #b8f5c8, #2f8a4c); }

.ds-award-name { font-size: calc(16 * var(--t)); letter-spacing: 0.14em; }
.ds-award-player { font-size: calc(14 * var(--t)); color: var(--ink-2); }
.ds-award-value { font-size: calc(16 * var(--t)); color: var(--gold); letter-spacing: 0.08em; }

.ds-res-medals { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); }

.ds-medal-chip {
    padding: calc(2 * var(--u)) calc(8 * var(--u));
    border: 1px solid rgba(242, 193, 78, 0.55);
    color: var(--gold);
    font-size: calc(13 * var(--t));
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ds-xp-level { display: flex; align-items: baseline; justify-content: space-between; }
.ds-xp-level-num { font-size: calc(26 * var(--t)); font-weight: 700; letter-spacing: 0.1em; }
.ds-xp-gain { font-size: calc(22 * var(--t)); color: var(--mk-2); font-weight: 700; }

.ds-xp-track {
    position: relative;
    height: calc(10 * var(--u));
    margin: calc(6 * var(--u)) 0;
    background: rgba(236, 232, 220, 0.12);
    overflow: hidden;
}

.ds-xp-ghost,
.ds-xp-fill {
    position: absolute;
    inset: 0 auto 0 0;
}

.ds-xp-ghost { background: rgba(236, 232, 220, 0.35); }
.ds-xp-fill { background: linear-gradient(90deg, var(--mk), var(--mk-2)); box-shadow: 0 0 calc(12 * var(--u)) rgba(74, 222, 128, 0.6); }

.ds-xp-levelup {
    font-family: var(--font-title);
    font-size: calc(26 * var(--t));
    color: var(--gold);
    letter-spacing: 0.1em;
    animation: ds-notice-in 0.4s ease-out both;
}

.ds-xp-breakdown { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }

.ds-xp-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: calc(12 * var(--u));
    font-size: calc(15 * var(--t));
    letter-spacing: 0.12em;
    color: var(--ink-2);
}

/* An awards line names every award ("AWARDS: MVP, LONGEST SHOT"): it wraps, and the
   XP value keeps its place on the right. */
.ds-xp-line-label { min-width: 0; overflow-wrap: anywhere; }
.ds-xp-line-value { flex: none; }

.ds-xp-unlocks { margin-top: calc(10 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); align-items: center; }
.ds-xp-unlock-title { width: 100%; font-size: calc(12 * var(--t)); letter-spacing: 0.3em; color: var(--gold); }

.ds-unlock-chip {
    padding: calc(2 * var(--u)) calc(8 * var(--u));
    background: rgba(242, 193, 78, 0.14);
    border: 1px solid rgba(242, 193, 78, 0.5);
    font-size: calc(13 * var(--t));
    letter-spacing: 0.1em;
}

/* Vote. */
.ds-res-vote {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(22 * var(--u));
    padding-bottom: 8vh;
    animation: ds-toast-in 0.3s ease-out both;
}

.ds-vote-title {
    display: flex;
    align-items: baseline;
    gap: calc(16 * var(--u));
    font-size: calc(22 * var(--t));
    letter-spacing: 0.3em;
}

.ds-vote-count { color: var(--tan-2); font-weight: 700; }
.ds-vote-hint { margin-top: calc(-6 * var(--u)); font-size: calc(14 * var(--t)); letter-spacing: 0.2em; color: var(--muted); }
/* Touch players tap the cards. */
.ds-touch-mode .ds-vote-hint { display: none; }

.ds-vote-cards {
    display: grid;
    grid-template-columns: repeat(3, calc(340 * var(--u)));
    gap: calc(22 * var(--u));
}

.ds-vote-card {
    --p: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(4 * var(--u));
    min-height: calc(190 * var(--u));
    padding: calc(18 * var(--u)) calc(20 * var(--u));
    border: 1px solid var(--line-2);
    background: linear-gradient(160deg, rgba(34, 40, 32, 0.92), rgba(12, 15, 13, 0.94));
    text-align: left;
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
    pointer-events: auto;
}

.ds-vote-card:hover { border-color: var(--tan-2); transform: translateY(calc(-3 * var(--u))); }
.ds-vote-card[data-mine='true'] { border-color: var(--tan-2); box-shadow: inset 0 0 0 1px var(--tan-2), 0 0 calc(24 * var(--u)) rgba(230, 204, 147, 0.25); }

.ds-vote-key {
    position: absolute;
    top: calc(12 * var(--u));
    right: calc(14 * var(--u));
    display: grid;
    place-items: center;
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    border: 1px solid var(--line-2);
    font-size: calc(14 * var(--t));
    color: var(--muted);
}

/* The venue title keeps clear of the [n] key badge (26u wide, 14u from the right
   edge, inside the card's 20u padding) and shrinks to fit the card at large text and
   on phones: the longest venue name (MIDDLETOWN) is 7.1 em wide in the title face, so
   the size is capped at the card's content width (100cqi) less the badge, over 7.4. */
.ds-vote-card { container-type: inline-size; }
.ds-vote-venue {
    max-width: 100%;
    padding-right: calc(28 * var(--u));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-title);
    font-size: min(calc(34 * var(--t)), calc((100cqi - 28 * var(--u)) / 7.4));
    letter-spacing: 0.03em;
    line-height: 1.05;
    text-transform: uppercase;
}
.ds-vote-desc { margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(15 * var(--t)); font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.ds-vote-mode { font-size: calc(17 * var(--t)); letter-spacing: 0.18em; color: var(--tan-2); text-transform: uppercase; }

.ds-vote-bar {
    position: relative;
    width: 100%;
    height: calc(6 * var(--u));
    margin-top: auto;
    background: rgba(236, 232, 220, 0.12);
}

.ds-vote-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p) * 100%);
    background: var(--ink-2);
    transition: width 0.3s ease-out;
}

.ds-vote-card[data-lead='true'] .ds-vote-fill { background: var(--mk-2); }
.ds-vote-pct { font-size: calc(15 * var(--t)); letter-spacing: 0.14em; color: var(--muted); }

/* ------------------------------------------------------------------ small phones */

/* Small phones (scoreboard.js NARROW_WIDTH): a narrower callsign minimum, and the
   results summary gives the board more room. */
@media (max-width: 739px) {
    .ds-sb-row { grid-template-columns: calc(30 * var(--t)) minmax(calc(96 * var(--t)), 1fr) repeat(var(--cols, 6), var(--cw)); }
    .ds-res-header { padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)); }
    .ds-res-summary { grid-template-columns: minmax(0, 1fr) calc(300 * var(--u)); gap: calc(14 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); }
}