/* ==========================================================================
   Results panel: gold, black and white. Loads after podium.css and overrides
   the results rules in premium.css. Everything is scoped to #results.
   Gold matches the podium (#c9a25a). Team colour is only a muted hint.
   ========================================================================== */
#results {
  --rg: #c9a25a;            /* gold */
  --rg-hi: #ecd9a4;         /* gold highlight */
  --rg-lo: #6e5524;         /* gold shadow */
  --rw: #f2efe6;            /* warm white */
  --rd: #8f8c83;            /* muted text */
  --rline: rgba(201, 162, 90, .34);
}

#results .panel.results { background: linear-gradient(180deg, rgba(10, 10, 10, .94), rgba(2, 2, 2, .97)); border-color: rgba(201, 162, 90, .32); }

/* banner: black, team tint muted to a hint, one slim gold rule */
#results .res-banner { border-bottom: 1px solid var(--rg); }
#results .res-banner::before { background: linear-gradient(100deg, color-mix(in srgb, var(--team) 22%, #000) 0 46%, color-mix(in srgb, var(--team) 8%, #000) 46% 62%, transparent 62%); }
#results .res-kicker { color: var(--rg); letter-spacing: .46em; font-size: 10px; }
#results .res-title { color: var(--rw); text-shadow: 6px 6px 0 rgba(0, 0, 0, .6); }
#results .res-score { color: var(--rg-hi); font-size: 13px; letter-spacing: .26em; }

/* tab strip: four equal tabs, gold underline slides under the active one */
#results .res-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 14px; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
#results .res-tab { appearance: none; -webkit-appearance: none; margin: 0; padding: 14px 6px 12px; border: 0; border-radius: 0; background: none; box-shadow: none; clip-path: none; transform: none; filter: none; cursor: pointer; font: 600 11px var(--f-mono); letter-spacing: .3em; color: rgba(242, 239, 230, .46); transition: color .3s var(--ease), background .3s var(--ease); }
#results .res-tab:hover { color: var(--rw); background: rgba(201, 162, 90, .05); }
#results .res-tab.on { color: var(--rg-hi); }
#results .res-tab:focus-visible { outline: 1px solid var(--rg); outline-offset: -3px; }
#results .res-tab-bar { position: absolute; left: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--rg-lo), var(--rg-hi), var(--rg-lo)); box-shadow: 0 0 12px rgba(201, 162, 90, .45); transition: transform .5s var(--ease), width .5s var(--ease); }

#results .res-stage { min-height: min(40vh, 340px); }
#results .res-pane[hidden] { display: none !important; }
#results .res-pane.on { animation: resPane .5s var(--ease) both; }
@keyframes resPane { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* slim gold rule under headings */
#results .res-h { position: relative; margin: 20px 0 12px; padding-bottom: 9px; font: 600 10px var(--f-mono); letter-spacing: .42em; color: var(--rg); }
#results .res-h::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--rg), rgba(201, 162, 90, .08) 75%, transparent); }

/* stat cards: black glass, thin gold border, one slow sheen */
#results .res-cards, #results .res-combat .res-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; }
#results .rcard { position: relative; display: grid; gap: 7px; align-content: center; padding: 16px 14px 14px; text-align: left; overflow: hidden; isolation: isolate; border: 1px solid var(--rline); border-radius: 0; background: linear-gradient(160deg, rgba(201, 162, 90, .08), rgba(255, 255, 255, .012) 45%, rgba(0, 0, 0, .45)); clip-path: none; animation: resCard .5s var(--ease) both; animation-delay: .12s; }
#results .rcard::before { content: ''; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; border-top: 1px solid var(--rg-hi); border-left: 1px solid var(--rg-hi); }
#results .rcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 220, .13) 50%, transparent 62%); transform: translateX(-120%); animation: resShine 3.2s 1.2s var(--ease) 1 both; pointer-events: none; }
#results .rcard b { font: 300 clamp(22px, 3.6vh, 34px)/1 var(--f-hud); color: var(--rw); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#results .rcard b.na { font: 600 10px var(--f-mono); letter-spacing: .2em; color: rgba(242, 239, 230, .3); }
#results .rcard span { font: 500 9px var(--f-mono); letter-spacing: .28em; color: var(--rd); text-transform: uppercase; }
#results .rcard.gold b { color: var(--rg-hi); }
#results .rcard.res b { font: 600 clamp(12px, 1.9vh, 16px)/1.2 var(--f-disp); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
#results .rcard b.txt { font: 500 clamp(15px, 2.4vh, 21px)/1.2 var(--f-hud); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
@keyframes resCard { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes resShine { to { transform: translateX(120%); } }

#results .mvp { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid var(--rline); border-left: 3px solid var(--rg); background: linear-gradient(100deg, rgba(201, 162, 90, .16), rgba(201, 162, 90, .02)); clip-path: none; }
#results .mvp em { font: 700 10px var(--f-disp); letter-spacing: .34em; font-style: normal; color: #000; background: var(--rg); padding: 4px 10px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
#results .mvp b { font: 600 17px var(--f-hud); letter-spacing: .16em; color: var(--rw); text-transform: uppercase; }
#results .mvp span { margin-left: auto; font: 500 11px var(--f-mono); letter-spacing: .22em; color: var(--rg-hi); }
#results .rcard.topk { grid-column: 1 / -1; gap: 5px; padding: 14px 18px; border-left: 3px solid var(--rg); }
#results .rcard.topk em { font: 600 9px var(--f-mono); letter-spacing: .4em; font-style: normal; color: var(--rg); }
#results .rcard.topk b { font: 600 20px var(--f-hud); letter-spacing: .06em; text-transform: uppercase; color: var(--rw); }

/* combat: weapon kill bars */
#results .wk { display: grid; grid-template-columns: minmax(96px, 200px) 1fr 44px; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font: 500 11px var(--f-mono); letter-spacing: .18em; color: var(--rw); text-transform: uppercase; }
#results .wk i { position: relative; height: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
#results .wk u { position: absolute; inset: 0; background: linear-gradient(90deg, var(--rg-lo), var(--rg-hi)); transform-origin: left; transform: scaleX(var(--w)); animation: resGrow .9s .25s var(--ease) both; text-decoration: none; }
#results .wk b { text-align: right; font-weight: 500; color: var(--rg-hi); font-variant-numeric: tabular-nums; }
@keyframes resGrow { from { transform: scaleX(0); } }

/* operators: full scoreboard */
#results .res-ops { overflow-x: auto; }
#results .res-ops-tbl { width: 100%; border-collapse: collapse; font: 500 12px var(--f-mono); letter-spacing: .12em; color: var(--rw); }
#results .res-ops-tbl th { padding: 8px 10px; border-bottom: 1px solid var(--rline); font: 500 9px var(--f-mono); letter-spacing: .3em; color: var(--rd); text-align: right; white-space: nowrap; }
#results .res-ops-tbl td { padding: 9px 10px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, .05); font-variant-numeric: tabular-nums; }
#results .res-ops-tbl th:first-child, #results .res-ops-tbl td:first-child { text-align: left; }
#results .res-ops-tbl tbody tr { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--tc) 70%, #000); }
#results .res-ops-tbl tbody tr td.nm { font: 600 14px var(--f-hud); letter-spacing: .08em; text-transform: uppercase; color: var(--rw); white-space: nowrap; }
#results .res-ops-tbl td.tm { font-size: 10px; letter-spacing: .24em; color: var(--rd); white-space: nowrap; }
#results .res-ops-tbl tr.me td { background: rgba(201, 162, 90, .1); }
#results .res-ops-tbl tr.me td.nm em { margin-left: 10px; padding: 2px 6px; font: 600 9px var(--f-mono); letter-spacing: .2em; font-style: normal; color: #000; background: var(--rg); vertical-align: 2px; }
#results .res-ops-tbl tr.grp td { padding: 14px 10px 6px; text-align: left; border-bottom: 1px solid var(--rline); font: 600 10px var(--f-mono); letter-spacing: .36em; color: var(--rg); }
#results .res-ops-tbl tr.grp td b { float: right; font-weight: 500; letter-spacing: .12em; color: var(--rw); }
#results .res-note { margin: 10px 0 0; font: 400 9px var(--f-mono); letter-spacing: .2em; color: var(--rd); }

/* medals: grid of every medal earned, with counts */
#results .rmed-sum { display: flex; gap: 22px; margin-bottom: 14px; font: 600 10px var(--f-mono); letter-spacing: .32em; color: var(--rg); }
#results .rmed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
#results .rmed { position: relative; display: grid; gap: 6px; padding: 14px 14px 12px 40px; border: 1px solid var(--rline); background: linear-gradient(160deg, rgba(201, 162, 90, .08), rgba(0, 0, 0, .45)); animation: resCard .45s var(--ease) both; animation-delay: .08s; }
#results .rmed i { position: absolute; left: 15px; top: 50%; width: 11px; height: 11px; margin-top: -6px; background: var(--rg); transform: rotate(45deg); box-shadow: 0 0 12px rgba(201, 162, 90, .45); }
#results .rmed b { font: 300 26px/1 var(--f-hud); color: var(--rg-hi); font-variant-numeric: tabular-nums; }
#results .rmed span { font: 500 9px var(--f-mono); letter-spacing: .2em; color: var(--rw); text-transform: uppercase; }
#results .res-empty { margin: 0; padding: 28px 0; text-align: center; font: 500 11px var(--f-mono); letter-spacing: .3em; color: var(--rd); }

/* legacy list containers that main.js still fills; the tabs above replace them */
#results .res-legacy { display: none; }

/* XP / mission block: black with gold rules, no team colour */
#results .res-xp { margin-top: 14px; border: 1px solid var(--rline); border-radius: 0; background: rgba(0, 0, 0, .5); clip-path: none; }
#results .res-xp .rx-h b, #results .res-xp .rx-r b { color: var(--rg-hi); }
#results .res-xp .rx-up { color: #000; background: linear-gradient(100deg, var(--rg-lo), var(--rg-hi), var(--rg)); border-radius: 0; }
#results .res-xp .xp-bar i { background: linear-gradient(90deg, var(--rg-lo), var(--rg-hi)); box-shadow: 0 0 12px rgba(201, 162, 90, .5); }
#results .rm { border-radius: 0; border-color: var(--rline); background: rgba(201, 162, 90, .06); color: var(--rg-hi); }
#results .ms-res { border-color: var(--rg); background: rgba(201, 162, 90, .07); }
#results .ms-res em { color: var(--rg); }
#results .ms-res span { color: var(--rg-hi); }

@media (max-width: 900px) { #results .res-cards, #results .res-combat .res-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px) {
  #results .res-cards, #results .res-combat .res-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #results .res-tab { padding: 12px 2px 10px; font-size: 9px; letter-spacing: .16em; }
  #results .res-ops-tbl { font-size: 10px; }
  #results .res-ops-tbl tbody tr td.nm { font-size: 12px; }
  #results .wk { grid-template-columns: 96px 1fr 36px; gap: 10px; }
}
@media (max-height: 720px) { #results .res-stage { min-height: 0; } #results .res-h { margin: 12px 0 8px; } #results .rcard { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) {
  #results .res-pane.on, #results .rcard, #results .rcard::after, #results .rmed, #results .wk u { animation: none !important; }
  #results .res-tab-bar { transition: none; }
}