@font-face {
  font-family: 'HarmonyOS Sans SC';
  src: url('../fonts/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
       url('../fonts/HarmonyOS_Sans_SC_Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Tianze CSD';
  src: url('../fonts/csd.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

:root {
  --bg: #080c13;
  --bg-elevated: #0d131d;
  --panel: rgba(16, 23, 34, .94);
  --panel-soft: rgba(19, 28, 41, .68);
  --line: rgba(157, 176, 201, .14);
  --line-strong: rgba(157, 176, 201, .25);
  --text: #e9eef5;
  --muted: #8996a9;
  --muted-2: #5f6b7a;
  --accent: #d7ff59;
  --accent-deep: #94b32e;
  --cyan: #54d8dc;
  --danger: #ff6d65;
  --warning: #f4c86d;
  --team-t: #e34b55;
  --team-ct: #3d9be9;
  --shadow: 0 20px 80px rgba(0, 0, 0, .32);
  --radius: 12px;
  --display: 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --body: 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}

/* The hero artwork is deliberately muted so the photographic backdrop stays
   subordinate to the dark command-console UI.  The body mode class is
   toggled by app.js whenever the user switches between ranking modes. */
.command-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: '';
  background-position: center;
  background-size: cover;
  filter: brightness(.42) saturate(.68);
}
body.mode-mix .command-hero::before,
body.mode-death .command-hero::before,
body.mode-warcraft .command-hero::before {
  background-image: url('../hero/hunzhan.png');
}
body.mode-zombie .command-hero::before,
body.mode-doomsday .command-hero::before {
  background-image: url('../hero/jiangshi.png');
}

/* Business-section accents must outrank the generic dossier surface rule.
   Distinct tints make long desktop profiles scannable without turning the
   dark UI into a collection of unrelated bright cards. */
@media (min-width: 1021px) {
  body .drawer-content.dossier-content > .dossier-block.dossier-basic-block {
    border-color: rgba(84, 216, 220, .22);
    border-top-color: rgba(84, 216, 220, .72);
    background: linear-gradient(145deg, rgba(25, 49, 59, .72), rgba(8, 12, 19, .78));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-deep-block {
    border-color: rgba(143, 126, 255, .2);
    border-top-color: rgba(143, 126, 255, .7);
    background: linear-gradient(145deg, rgba(35, 31, 65, .58), rgba(8, 12, 19, .78));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-grindstone-summary-block {
    border-color: rgba(83, 164, 216, .2);
    border-top-color: rgba(95, 181, 255, .72);
    background: linear-gradient(145deg, rgba(20, 44, 70, .58), rgba(8, 12, 19, .78));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-grindstone-block {
    border-color: rgba(115, 139, 222, .2);
    border-top-color: rgba(124, 151, 240, .7);
    background: linear-gradient(145deg, rgba(29, 38, 75, .56), rgba(8, 12, 19, .78));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-weapon-block {
    border-color: rgba(84, 216, 220, .2);
    border-top-color: rgba(84, 216, 220, .62);
    background: linear-gradient(145deg, rgba(22, 43, 52, .62), rgba(8, 12, 19, .8));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-hc-block {
    border-color: rgba(93, 170, 183, .2);
    border-top-color: rgba(105, 188, 201, .62);
    background: linear-gradient(145deg, rgba(21, 41, 48, .6), rgba(8, 12, 19, .8));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-collection-block {
    border-color: rgba(186, 123, 255, .2);
    border-top-color: rgba(186, 123, 255, .62);
    background: linear-gradient(145deg, rgba(43, 29, 61, .55), rgba(8, 12, 19, .8));
  }
  body .drawer-content.dossier-content > .dossier-block.dossier-compact-block {
    border-color: rgba(123, 148, 221, .2);
    border-top-color: rgba(136, 160, 230, .62);
    background: linear-gradient(145deg, rgba(31, 37, 64, .54), rgba(8, 12, 19, .8));
  }
}

/* Interactive live-feed names retain the exact team colour while behaving
   like compact text links instead of inheriting the browser button chrome. */
.live-event-main button.live-player-link {
  display: inline;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  appearance: none;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
}
.live-event-main button.live-player-link.team-t { color: var(--team-t); }
.live-event-main button.live-player-link.team-ct { color: var(--team-ct); }
.live-event-main button.live-player-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.live-event-main button.live-player-link:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

.dossier-identity { min-width: 0; }
.dossier-name-line { display: inline-flex; max-width: 100%; align-items: center; gap: 10px; }
.dossier-name-line > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-status-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}
.account-status-badge svg { display: block; width: 14px; height: 14px; }
.account-status-badge.is-normal { color: var(--accent); background: rgba(215, 255, 89, .07); }
.account-status-badge.is-blocked { color: var(--danger); background: rgba(255, 109, 101, .08); }

/* Live feed names carry the team color independently; event rows keep their
   existing semantic marker and neutral copy color. */
.live-event-main .live-player { color: var(--text); font-weight: 600; }
.live-event-main .live-player.team-t { color: var(--team-t); }
.live-event-main .live-player.team-ct { color: var(--team-ct); }

/* Mix profile: the legacy detail page used red/blue team bars.  Keep the
   same quick visual comparison while retaining exact percentages and round
   counts for keyboard and screen-reader users. */
.dossier-team-ratio { padding: 14px; border: 1px solid rgba(157, 176, 201, .16); background: linear-gradient(135deg, rgba(13, 19, 29, .92), rgba(20, 29, 42, .78)); }
.dossier-team-ratio-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.dossier-team-ratio-heading strong { color: var(--text); font-size: 12px; font-weight: 600; }
.dossier-team-ratio-heading span { color: var(--muted-2); font-size: 10px; }
.dossier-team-ratio-stack { display: flex; width: 100%; height: 12px; overflow: hidden; border: 1px solid rgba(157, 176, 201, .18); border-radius: 3px; background: rgba(157, 176, 201, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28); }
.dossier-team-ratio-segment { display: block; min-width: 0; height: 100%; transition: width .3s ease; }
.dossier-team-ratio-segment.is-t, .dossier-team-ratio-legend-item > i.is-t { background: #e34b55; }
.dossier-team-ratio-segment.is-ct, .dossier-team-ratio-legend-item > i.is-ct { background: #3d9be9; }
.dossier-team-ratio-segment.is-spec, .dossier-team-ratio-legend-item > i.is-spec { background: #7b8794; }
.dossier-team-ratio-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 12px; }
.dossier-team-ratio-legend-item { display: grid; grid-template-columns: 8px auto minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.dossier-team-ratio-legend-item > i { display: block; width: 8px; height: 8px; border-radius: 2px; }
.dossier-team-ratio-legend-item b { color: var(--muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.dossier-team-ratio-legend-item em { overflow: hidden; color: var(--text); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.dossier-detail-table .dossier-flag-icon { display: inline-block; width: 27px; height: 20px; object-fit: contain; vertical-align: middle; }
.dossier-detail-table .dossier-flag-icon.is-off { opacity: .68; }
@media (max-width: 520px) {
  .dossier-team-ratio-legend { grid-template-columns: 1fr; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); font-family: var(--body); font-size: 14px; line-height: 1.6; }
body::before { position: fixed; z-index: -2; inset: 0; content: ''; pointer-events: none; background: radial-gradient(ellipse at 72% -15%, rgba(51, 95, 112, .18), transparent 48%), radial-gradient(ellipse at 3% 30%, rgba(53, 73, 43, .1), transparent 42%), #080c13; }
body::after { position: fixed; z-index: -1; inset: 0; content: ''; opacity: .18; pointer-events: none; background-image: linear-gradient(rgba(157, 176, 201, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 176, 201, .035) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-shell { min-height: 100vh; overflow: clip; }
.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(157, 176, 201, .13); background: rgba(8, 12, 19, .87); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; gap: 28px; width: min(1320px, calc(100% - 48px)); height: 72px; margin: 0 auto; }
.brand, .footer-brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 10px; }
.brand-logo { display: block; flex: 0 0 auto; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(215, 255, 89, .2)); }
.brand-copy, .footer-brand > span:last-child { display: flex; flex-direction: column; gap: 0; line-height: 1; }
.brand-copy strong, .footer-brand strong { letter-spacing: .18em; font: 700 16px/1 var(--display); }
.brand-copy small, .footer-brand small { margin-top: 5px; color: var(--muted-2); font: 8px/1 var(--body); letter-spacing: .2em; }
.site-nav { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; }
.nav-link, .header-action { position: relative; padding: 9px 11px; color: var(--muted); font-size: 12px; letter-spacing: .02em; transition: color .18s, background .18s; }
.nav-link:hover, .nav-link.is-active, .header-action:hover { color: var(--text); }
.nav-link.is-active { color: var(--accent); }.nav-link.is-active::after { position: absolute; right: 11px; bottom: 0; left: 11px; height: 2px; border-radius: 2px; background: var(--accent); content: ''; }
.nav-link-muted { color: var(--muted-2); }.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }.header-action { border: 0; white-space: nowrap; background: transparent; font: inherit; cursor: pointer; }.header-action-login { color: var(--cyan); }.header-action-user { display: inline-flex; max-width: 190px; align-items: center; gap: 7px; overflow: hidden; color: var(--cyan); text-overflow: ellipsis; }.header-action-user::before { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(91, 221, 255, .55); content: ''; }.header-action-user span { overflow: hidden; text-overflow: ellipsis; }.header-action-user i { color: var(--muted-2); font-style: normal; transition: transform .16s ease; }.header-action-user[aria-expanded="true"] i { transform: rotate(180deg); }.header-action-solid { border: 1px solid rgba(215, 255, 89, .4); border-radius: 5px; color: var(--accent); }
.header-profile { position: relative; align-self: stretch; }.header-profile[hidden] { display: none; }.header-profile-popover { position: absolute; top: calc(100% - 5px); right: -70px; width: min(640px, calc(100vw - 48px)); padding-top: 10px; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity .16s, transform .16s, visibility .16s; }.header-profile:hover .header-profile-popover, .header-profile:focus-within .header-profile-popover, .header-profile.is-open .header-profile-popover { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }.header-profile-card { position: relative; overflow: hidden; border: 1px solid rgba(157,176,201,.3); border-top: 2px solid var(--accent); border-radius: 10px; background-color: #0b121d; background-image: linear-gradient(110deg, rgba(8,14,23,.7), rgba(7,11,18,.94) 70%), url('../tea/ui/default_profile_bg.jpg'); background-position: center; background-size: cover; box-shadow: 0 28px 76px rgba(0,0,0,.58); }.header-profile-card::after { position: absolute; z-index: 0; right: -70px; top: -110px; width: 310px; height: 310px; border: 1px solid rgba(91,221,255,.13); border-radius: 50%; box-shadow: 0 0 0 38px rgba(91,221,255,.025), 0 0 0 78px rgba(91,221,255,.018); content: ''; pointer-events: none; }.header-profile-identity { position: relative; z-index: 1; display: grid; grid-template-columns: 84px minmax(0,1fr) auto; min-height: 138px; align-items: center; gap: 20px; padding: 22px 26px; background: linear-gradient(90deg, rgba(46,161,194,.12), transparent 62%); }.header-profile-avatar { display: grid; width: 82px; height: 82px; place-items: center; overflow: hidden; border: 2px solid rgba(91,221,255,.55); border-radius: 50%; color: var(--cyan); background: rgba(8,14,23,.86); box-shadow: inset 0 0 0 5px rgba(8,12,19,.72), 0 0 28px rgba(91,221,255,.16); font: 500 25px/1 var(--display); }.header-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }.header-profile-copy { min-width: 0; }.header-profile-copy > span { display: block; color: var(--cyan); font-size: 10px; letter-spacing: .16em; }.header-profile-copy strong { display: block; overflow: hidden; margin-top: 7px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font: 500 25px/1.15 var(--display); }.header-profile-copy small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }.header-profile-logout { align-self: start; padding: 5px 0 5px 9px; border: 0; color: var(--muted-2); background: transparent; font-size: 10px; cursor: pointer; }.header-profile-logout:hover { color: var(--text); }.header-profile-ranks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 10px 14px 12px; border-top: 1px solid rgba(157,176,201,.22); background: rgba(5,9,15,.48); }.header-profile-ranks a { position: relative; display: grid; min-height: 88px; place-items: center; align-content: center; gap: 4px; padding: 9px 5px; border-left: 1px solid rgba(157,176,201,.14); color: var(--text); text-align: center; }.header-profile-ranks a:first-child { border-left: 0; }.header-profile-ranks a:hover, .header-profile-ranks a:focus-visible { background: rgba(157,176,201,.09); }.header-profile-ranks span { color: var(--muted); font-size: 11px; }.header-profile-ranks strong { font: 500 22px/1 var(--display); font-variant-numeric: tabular-nums; }.header-profile-ranks small { color: var(--muted-2); font-size: 9px; }.header-profile-ranks a.is-best { color: var(--accent); background: linear-gradient(180deg,rgba(215,255,89,.15),rgba(215,255,89,.025)); }.header-profile-ranks a.is-best::before { position: absolute; top: -10px; right: 13px; left: 13px; height: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(215,255,89,.45); content: ''; }.header-profile-ranks a.is-best small::before { content: '最高 · '; color: var(--accent); }.header-profile-ranks a.is-unranked { color: var(--muted-2); cursor: default; }.header-profile-state { position: relative; z-index: 1; min-height: 30px; padding: 7px 18px; border-top: 1px solid rgba(157,176,201,.13); color: var(--muted-2); background: rgba(3,7,12,.7); font-size: 10px; text-align: center; }.header-profile-state.is-ready { color: var(--muted); }
.mobile-toggle { display: none; width: 38px; height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--text); }.mobile-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 3px auto; background: currentColor; }
.main-content { width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding-bottom: 90px; }.command-hero { position: relative; display: flex; align-items: end; justify-content: space-between; min-height: 278px; padding: 76px 44px 45px; overflow: hidden; border-bottom: 1px solid var(--line); }.hero-grid { position: absolute; inset: 0; opacity: .4; background: linear-gradient(105deg, rgba(215, 255, 89, .07), transparent 33%), linear-gradient(90deg, transparent 68%, rgba(84, 216, 220, .04)), repeating-linear-gradient(117deg, transparent 0 38px, rgba(157,176,201,.05) 39px 40px); }.hero-grid::after { position: absolute; right: 8%; bottom: -28%; width: 440px; height: 440px; border: 1px solid rgba(215,255,89,.12); border-radius: 50%; box-shadow: 0 0 0 32px rgba(215,255,89,.025), 0 0 0 82px rgba(215,255,89,.016); content: ''; }
.hero-copy { position: relative; z-index: 1; }.eyebrow, .section-kicker { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }.command-hero h1 { max-width: 610px; margin: 10px 0 8px; color: #f6f8fb; font: 500 clamp(44px, 6vw, 78px)/.98 var(--display); letter-spacing: -.055em; }.command-hero h1 span { color: var(--accent); }.hero-lede { margin: 0; color: var(--muted); font-size: 14px; }
.mode-switcher { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 28px 0; border: 1px solid var(--line); background: var(--line); }.mode-tab { display: flex; align-items: center; gap: 17px; min-height: 78px; padding: 17px 22px; border: 0; color: var(--muted); text-align: left; background: rgba(14, 20, 30, .88); transition: background .18s, color .18s; }.mode-tab:hover { color: var(--text); background: rgba(26, 38, 51, .92); }.mode-tab.is-active { color: var(--text); background: linear-gradient(120deg, rgba(44, 64, 53, .72), rgba(18, 28, 35, .92)); box-shadow: inset 3px 0 var(--accent); }.mode-tab-index { color: var(--muted-2); font: 11px/1 var(--display); }.mode-tab.is-active .mode-tab-index { color: var(--accent); }.mode-tab strong { display: block; font-size: 15px; font-weight: 600; }.mode-tab small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 9px; letter-spacing: .14em; }.mode-tab-arrow { margin-left: auto; color: var(--accent); font-size: 20px; opacity: 0; transition: opacity .18s, transform .18s; }.mode-tab.is-active .mode-tab-arrow { opacity: 1; transform: translate(2px, -2px); }
.board-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 18px; align-items: stretch; }.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }.board-main { min-width: 0; overflow: hidden; }.board-heading, .board-controls, .table-footer { padding-right: 24px; padding-left: 24px; }.board-heading { display: flex; align-items: start; justify-content: space-between; padding-top: 25px; padding-bottom: 20px; }.section-kicker { color: var(--muted-2); font-size: 9px; }.section-kicker i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }.board-heading h2, .panel-title-row h2, .player-section h2, .empty-mode-section h2 { margin: 5px 0 0; color: var(--text); font: 500 25px/1.1 var(--display); letter-spacing: -.03em; }.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgba(215, 255, 89, .18); border-radius: 4px; color: var(--muted); font-size: 10px; }.status-pill i, .live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }.status-pill.is-error { color: var(--danger); border-color: rgba(255,109,101,.3); }.status-pill.is-error i { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.board-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; }.search-box { display: flex; align-items: center; flex: 1 1 230px; max-width: 320px; height: 39px; padding: 0 10px 0 13px; border: 1px solid var(--line); border-radius: 5px; background: rgba(7, 11, 17, .62); }.search-box:focus-within { border-color: rgba(215, 255, 89, .5); box-shadow: 0 0 0 3px rgba(215, 255, 89, .08); }.search-icon { position: relative; width: 13px; height: 13px; margin-right: 10px; border: 1.5px solid var(--muted-2); border-radius: 50%; }.search-icon::after { position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1px; transform: rotate(45deg); background: var(--muted-2); content: ''; }.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 12px; }.search-box input::placeholder { color: var(--muted-2); }.search-box kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted-2); font-size: 9px; }.period-tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 5px; background: rgba(7, 11, 17, .5); }.period-tab { padding: 6px 11px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; font-size: 11px; }.period-tab:hover { color: var(--text); }.period-tab.is-active { color: var(--bg); background: var(--accent); font-weight: 700; }
.table-wrap { position: relative; min-height: 380px; overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.leaderboard-table { width: 100%; min-width: 670px; border-collapse: collapse; text-align: left; }.leaderboard-table th { padding: 12px 15px; color: var(--muted-2); background: rgba(7, 11, 17, .52); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }.leaderboard-table td { padding: 13px 15px; border-top: 1px solid rgba(157,176,201,.085); color: var(--muted); font-size: 12px; vertical-align: middle; }.leaderboard-table tr { transition: background .15s; }.leaderboard-table tbody tr:hover { background: rgba(215, 255, 89, .045); }.rank-cell { width: 50px; color: var(--muted-2) !important; font: 600 13px/1 var(--display); }.rank-cell.rank-1 { color: #f5d278 !important; }.rank-cell.rank-2 { color: #c2cedd !important; }.rank-cell.rank-3 { color: #c99070 !important; }.player-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }.avatar { display: inline-grid; flex: 0 0 29px; width: 29px; height: 29px; place-items: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent); background: linear-gradient(145deg, #23333a, #101620); font-size: 10px; font-weight: 700; }.player-name { display: block; max-width: 156px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.player-uid { display: block; color: var(--muted-2); font: 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; }.metric-strong { color: var(--text) !important; font-weight: 700; }.positive { color: var(--accent) !important; }.negative { color: var(--danger) !important; }.weapon-cell { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }.weapon-icon { display: inline-grid; width: 27px; height: 20px; place-items: center; color: var(--accent); }.weapon-icon svg { width: 25px; height: 20px; }.table-state { position: absolute; inset: 0; display: grid; place-items: center; min-height: 380px; padding: 35px; color: var(--muted); text-align: center; background: rgba(13, 19, 29, .92); }.table-state[hidden] { display: none; }.state-box { max-width: 300px; }.state-icon { display: block; margin-bottom: 12px; color: var(--accent); font-size: 27px; }.state-title { display: block; color: var(--text); font-weight: 600; }.state-copy { display: block; margin-top: 4px; color: var(--muted-2); font-size: 12px; }.state-retry { margin-top: 16px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--accent); background: transparent; font-size: 11px; }.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 61px; }.result-count { color: var(--muted-2); font-size: 11px; }.pagination { display: flex; align-items: center; gap: 4px; }.page-button { display: inline-grid; min-width: 28px; height: 28px; padding: 0 7px; place-items: center; border: 1px solid transparent; border-radius: 4px; color: var(--muted); background: transparent; font-size: 11px; }.page-button:hover, .page-button.is-active { border-color: rgba(215,255,89,.25); color: var(--accent); background: rgba(215,255,89,.07); }.page-button:disabled { cursor: not-allowed; opacity: .3; }.page-ellipsis { padding: 0 3px; color: var(--muted-2); }
.board-aside { display: flex; min-width: 0; min-height: 0; }.live-panel { display: flex; width: 100%; min-height: 0; flex-direction: column; padding: 22px; }.panel-title-row { display: flex; align-items: start; justify-content: space-between; gap: 14px; }.panel-title-row h2 { font-size: 21px; }.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }.live-indicator.is-offline i { background: var(--muted-2); box-shadow: none; }.live-summary { display: flex; align-items: center; gap: 7px; margin: 21px 0 13px; color: var(--muted-2); font-size: 11px; }.live-summary strong { color: var(--cyan); font: 500 22px/1 var(--display); }.quiet-button { margin-left: auto; padding: 3px 0; border: 0; color: var(--muted-2); background: transparent; font-size: 10px; }.quiet-button:hover { color: var(--text); }.live-feed { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 1px; max-height: none; padding: 0; margin: 0; overflow: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }.live-event { position: relative; padding: 10px 0 10px 17px; border-bottom: 1px solid rgba(157,176,201,.08); animation: feed-in .35s ease both; }.live-event::before { position: absolute; top: 17px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); content: ''; }.live-event.event-kill::before { background: var(--danger); box-shadow: 0 0 8px rgba(255,109,101,.45); }.live-event.event-revenge::before { background: var(--warning); }.live-event.event-login::before { background: var(--cyan); }.live-event-main { display: block; color: var(--muted); font-size: 11px; }.live-event-main strong { color: var(--text); font-weight: 600; }.live-event-time { display: block; margin-top: 2px; color: var(--muted-2); font-size: 9px; }.panel-footnote { flex: 0 0 auto; margin-top: 15px; color: var(--muted-2); font-size: 9px; }
.player-section { margin-top: 18px; padding: 24px; }.panel-title-hint { margin-top: 6px; color: var(--muted-2); font-size: 11px; }.player-lookup { display: flex; align-items: center; gap: 18px; min-height: 91px; padding: 16px 18px; margin-top: 22px; border: 1px solid var(--line); background: rgba(7,11,17,.38); }.lookup-art { position: relative; flex: 0 0 66px; height: 58px; overflow: hidden; border-right: 1px solid var(--line); }.lookup-grid { position: absolute; inset: 2px 10px 2px 0; opacity: .38; background: linear-gradient(rgba(84,216,220,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(84,216,220,.3) 1px, transparent 1px); background-size: 12px 12px; }.lookup-crosshair { position: absolute; top: 19px; left: 22px; width: 20px; height: 20px; border: 1px solid var(--accent); border-radius: 50%; }.lookup-crosshair::before, .lookup-crosshair::after { position: absolute; background: var(--accent); content: ''; }.lookup-crosshair::before { top: 9px; right: -7px; left: -7px; height: 1px; }.lookup-crosshair::after { top: -7px; bottom: -7px; left: 9px; width: 1px; }.lookup-copy { display: flex; flex: 1; flex-direction: column; }.lookup-copy strong { color: var(--text); font-weight: 600; }.lookup-copy span { margin-top: 4px; color: var(--muted-2); font-size: 11px; }.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 15px; border: 1px solid rgba(215,255,89,.5); border-radius: 4px; color: var(--bg); background: var(--accent); font-size: 11px; font-weight: 700; transition: background .18s, transform .18s; }.primary-button:hover { background: #e4ff86; transform: translateY(-1px); }.primary-button-wide { width: 100%; }
.empty-mode-section { display: flex; align-items: center; gap: 25px; padding: 32px; margin-top: 18px; border: 1px solid rgba(115, 177, 170, .22); border-radius: var(--radius); background: linear-gradient(120deg, rgba(52,106,100,.16), rgba(13,19,29,.4)); }.empty-mode-section h2 { margin-top: 7px; }.empty-mode-section p { max-width: 550px; margin: 7px 0 0; color: var(--muted); font-size: 12px; }.empty-mode-art { display: grid; flex: 0 0 78px; width: 78px; height: 78px; place-items: center; border: 1px solid rgba(84,216,220,.22); border-radius: 50%; color: var(--cyan); font-size: 29px; box-shadow: 0 0 30px rgba(84,216,220,.08); }
.site-footer { border-top: 1px solid var(--line); background: rgba(7, 10, 16, .62); }.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: min(1320px, calc(100% - 48px)); min-height: 115px; margin: 0 auto; }.footer-brand { opacity: .75; transform: scale(.85); transform-origin: left center; }.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; color: var(--muted-2); font-size: 11px; }.footer-links a:hover { color: var(--text); }.footer-meta { display: flex; flex-direction: column; align-items: end; gap: 3px; color: var(--muted-2); font-size: 9px; }
.drawer-backdrop { position: fixed; z-index: 29; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); }.drawer-backdrop[hidden] { display: none; }.player-drawer { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; display: flex; width: min(460px, 100%); flex-direction: column; border-left: 1px solid var(--line-strong); background: #0b111b; box-shadow: -20px 0 70px rgba(0,0,0,.45); transform: translateX(102%); transition: transform .28s ease; }.player-drawer.is-open { transform: translateX(0); }.player-drawer[aria-hidden="true"] { pointer-events: none; }.drawer-header { display: flex; align-items: start; justify-content: space-between; padding: 28px 26px 22px; border-bottom: 1px solid var(--line); }.drawer-header h2 { margin: 5px 0 0; font: 500 24px/1.1 var(--display); }.icon-button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; }.icon-button:hover { color: var(--text); }.drawer-content { flex: 1; padding: 26px; overflow-y: auto; }.drawer-footer { padding: 18px 26px; border-top: 1px solid var(--line); }.dossier-head { display: flex; align-items: center; gap: 13px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.dossier-head .avatar { width: 54px; height: 54px; font-size: 17px; }.dossier-head strong { display: block; color: var(--text); font-size: 17px; }.dossier-head small { color: var(--muted-2); font: 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }.dossier-rank { margin-left: auto; color: var(--accent); text-align: right; }.dossier-rank b { display: block; font: 500 22px/1 var(--display); }.dossier-rank span { color: var(--muted-2); font-size: 9px; }.dossier-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 20px 0; border: 1px solid var(--line); background: var(--line); }.dossier-stat { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 14px; background: var(--panel); }.dossier-stat-copy { display: block; min-width: 0; }.dossier-stat-copy b { display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font: 500 21px/1 var(--display); }.dossier-stat-copy span { display: block; margin-top: 5px; color: var(--muted-2); font-size: 10px; }.dossier-section-title { margin: 24px 0 9px; color: var(--muted-2); font-size: 9px; letter-spacing: .14em; }.dossier-bars { display: grid; gap: 12px; }.dossier-bar-label { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--muted); font-size: 10px; }.dossier-bar-label b { color: var(--text); }.dossier-bar { height: 4px; overflow: hidden; border-radius: 4px; background: rgba(157,176,201,.13); }.dossier-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.toast-region { position: fixed; z-index: 50; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(330px, calc(100% - 36px)); }.toast { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--text); background: #111a27; box-shadow: var(--shadow); font-size: 12px; animation: toast-in .25s ease both; }.toast.is-error { border-color: rgba(255,109,101,.35); }.toast.is-success { border-color: rgba(215,255,89,.35); }
.dossier-weapons { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.dossier-weapon { position: relative; display: grid; min-height: 74px; grid-template-columns: 62px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 12px; background: var(--panel); transition: border-color .14s, background .14s, box-shadow .14s, transform .14s; }
.dossier-weapon > .weapon-icon { grid-row: 1 / span 3; width: 50px; height: 50px; }
.dossier-weapon > .weapon-icon svg { display: block; width: 50px; height: 50px; }
.dossier-weapon strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; }
.dossier-weapon-stats { color: var(--muted-2); font-size: 9px; }
.dossier-weapon-rank { color: var(--accent); font-size: 9px; font-weight: 650; }
.dossier-weapon:hover, .dossier-weapon:focus-visible, .dossier-weapon.is-hovered { z-index: 1; border-color: rgba(84,216,220,.42) !important; outline: none; background: rgba(20,38,46,.94); box-shadow: inset 3px 0 var(--cyan); transform: translateX(2px); }
.dossier-weapon.is-top-1 .dossier-weapon-rank { color: #f5d278; }
.dossier-weapon.is-top-2 .dossier-weapon-rank { color: #c2cedd; }
.dossier-weapon.is-top-3 .dossier-weapon-rank { color: #c99070; }
.dossier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0; margin: 0; list-style: none; }
.dossier-list li { overflow: hidden; padding: 8px 9px; border: 1px solid var(--line); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; background: var(--panel); font-size: 10px; }

/* Body-level weapon tooltip: fixed positioning avoids clipping inside the
   vertically scrolling player dossier. */
.weapon-hover-card { position: fixed; z-index: 60; width: 360px; min-height: 238px; overflow: hidden; border: 1px solid rgba(84,216,220,.34); border-top: 2px solid rgba(84,216,220,.78); border-radius: 10px; color: var(--text); background: linear-gradient(145deg, rgba(18,38,47,.98), rgba(8,13,21,.99) 68%); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 54px rgba(0,0,0,.58); pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(5px) scale(.985); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.weapon-hover-card.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.weapon-hover-card__backdrop { position: absolute; z-index: 0; top: 35px; right: -24px; width: 245px; height: 135px; color: var(--cyan); opacity: .065; transform: rotate(-5deg); }
.weapon-hover-card__backdrop svg { width: 100%; height: 100%; }
.weapon-hover-card__content { position: relative; z-index: 1; padding: 17px 18px 16px; }
.weapon-hover-card__eyebrow { display: flex; justify-content: space-between; color: rgba(84,216,220,.75); font: 700 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .13em; }
.weapon-hover-card__title { display: block; max-width: 270px; margin-top: 10px; overflow: hidden; color: #eef4f7; text-overflow: ellipsis; white-space: nowrap; font: 600 18px/1.25 var(--display); }
.weapon-hover-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 15px; border: 1px solid rgba(157,176,201,.13); background: rgba(157,176,201,.13); }
.weapon-hover-card__metrics > div { min-width: 0; padding: 9px 10px; background: rgba(7,12,19,.76); }
.weapon-hover-card__metrics b, .weapon-hover-card__metrics span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weapon-hover-card__metrics b { color: #dce8eb; font: 600 14px/1.2 var(--display); }
.weapon-hover-card__metrics span { margin-top: 4px; color: var(--muted-2); font-size: 9px; }
.weapon-hover-card.is-top-1 .weapon-hover-card__metrics > div:last-child b { color: #f5d278; }
.weapon-hover-card.is-top-2 .weapon-hover-card__metrics > div:last-child b { color: #c2cedd; }
.weapon-hover-card.is-top-3 .weapon-hover-card__metrics > div:last-child b { color: #c99070; }
.weapon-hover-card__neighbors { padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(84,216,220,.13); }
.weapon-hover-card__neighbors-title { color: var(--muted-2); font-size: 9px; letter-spacing: .08em; }
.weapon-rank-track { display: grid; grid-template-columns: minmax(0,1fr) 18px minmax(0,1.12fr) 18px minmax(0,1fr); align-items: center; margin-top: 8px; }
.weapon-rank-track > i { height: 1px; background: linear-gradient(90deg, rgba(137,150,169,.18), rgba(84,216,220,.42)); }
.weapon-rank-node { display: flex; min-width: 0; flex-direction: column; text-align: center; }
.weapon-rank-node span { color: var(--muted-2); font-size: 9px; }
.weapon-rank-node b { margin-top: 3px; color: var(--muted); font: 600 14px/1 var(--display); }
.weapon-rank-node.is-me { padding: 7px 5px; border: 1px solid rgba(215,255,89,.26); border-radius: 5px; background: rgba(215,255,89,.07); box-shadow: 0 0 18px rgba(215,255,89,.045); }
.weapon-rank-node.is-me span, .weapon-rank-node.is-me b { color: var(--accent); }
.weapon-hover-card__empty { margin: 10px 0 0; color: var(--muted-2); font-size: 11px; }
@media (hover: none), (max-width: 760px) {
  .weapon-hover-card { right: 14px; bottom: 14px; left: 14px !important; top: auto !important; width: auto; min-height: 0; pointer-events: auto; transform: translateY(12px); }
  .weapon-hover-card.is-visible { transform: none; }
}
.live-event-main .live-weapon { display: inline-grid; width: 28px; height: 16px; margin: 0 3px; vertical-align: middle; }.live-event-main .live-weapon svg { width: 27px; height: 16px; }.live-headshot { width: 17px; height: 17px; margin: 0 2px; vertical-align: middle; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1020px) { .header-inner { gap: 15px; }.site-nav { gap: 0; }.nav-link { padding-right: 8px; padding-left: 8px; }.header-actions { display: none; }.board-layout { grid-template-columns: minmax(0, 1fr); }.board-aside { display: block; } }
@media (max-width: 760px) { .header-inner, .main-content, .footer-inner { width: min(100% - 28px, 1320px); }.site-header { position: sticky; }.header-inner { height: 62px; }.mobile-toggle { display: block; margin-left: auto; }.site-nav { position: absolute; top: 61px; right: 14px; left: 14px; display: none; flex-direction: column; align-items: stretch; padding: 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: #0d141f; box-shadow: var(--shadow); }.site-nav.is-open { display: flex; }.nav-link { padding: 11px 12px; }.nav-link.is-active::after { right: 12px; bottom: 5px; left: auto; width: 4px; height: 4px; border-radius: 50%; }.command-hero { display: block; min-height: 255px; padding: 54px 15px 28px; }.mode-switcher { margin: 18px 0; }.mode-tab { min-height: 69px; padding: 14px; gap: 10px; }.mode-tab strong { font-size: 13px; }.mode-tab-arrow { display: none; }.board-heading, .board-controls, .table-footer { padding-right: 15px; padding-left: 15px; }.board-heading { padding-top: 19px; }.board-controls { display: block; }.search-box { max-width: none; }.period-tabs { width: 100%; margin-top: 10px; }.period-tab { flex: 1; }.table-wrap { min-height: 340px; }.table-state { min-height: 340px; }.board-aside { display: grid; grid-template-columns: 1fr; }.player-section { padding: 17px 15px; }.player-lookup { align-items: flex-start; flex-wrap: wrap; padding: 13px; }.lookup-copy { min-width: calc(100% - 84px); }.player-lookup .primary-button { width: 100%; margin-top: 3px; }.footer-inner { flex-direction: column; align-items: flex-start; padding: 25px 0; }.footer-links { justify-content: flex-start; gap: 8px 16px; }.footer-meta { align-items: flex-start; }.empty-mode-section { align-items: flex-start; padding: 20px 17px; }.empty-mode-art { flex-basis: 55px; width: 55px; height: 55px; font-size: 21px; } }

/* The board stacks below desktop widths, so restore a bounded feed instead of
   letting the event list consume the full page height. */
@media (max-width: 1020px) { .live-feed { flex: 0 1 auto; max-height: 325px; min-height: 160px; } }

/* Ranking semantics: keep the four Tea Zombie metrics visually distinct and
   render mix online status as a compact SVG badge rather than prose. */
.leaderboard-table th.zombie-score, .leaderboard-table td.zombie-score { color: #54d8dc; }
.leaderboard-table th.zombie-infect, .leaderboard-table td.zombie-infect { color: #ff8b5b; }
.leaderboard-table th.zombie-kills, .leaderboard-table td.zombie-kills { color: #d7ff59; }
.leaderboard-table th.zombie-revenge, .leaderboard-table td.zombie-revenge { color: #ba7bff; }
.leaderboard-table td.zombie-score, .leaderboard-table td.zombie-infect, .leaderboard-table td.zombie-kills, .leaderboard-table td.zombie-revenge { font-weight: 700; }
.online-status-cell { min-width: 104px; }
.online-badge {
  display: inline-flex;
  width: max-content;
  height: 24px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 5px;
  color: var(--accent);
  background: rgba(215, 255, 89, .08);
  font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  white-space: nowrap;
}
.online-badge::before { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; content: ''; }
.online-placeholder { display: inline-block; min-width: 74px; color: var(--muted-2); text-align: left; }

/* Detail media is deliberately resilient: a failed avatar or legacy icon
   leaves a readable fallback instead of an empty box. */
.avatar-frame { position: relative; }
.avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; }
.avatar-frame.has-avatar .avatar-fallback { display: none; }
.avatar-large { flex-basis: 54px; width: 54px; height: 54px; }
.dossier-live-section { margin-top: 25px; padding: 14px; border: 1px solid var(--line); background: rgba(13, 19, 29, .76); }
.dossier-live-section h3 { margin: 5px 0 0; color: var(--text); font: 500 17px/1.1 var(--display); }
.dossier-live-section .live-summary { margin: 15px 0 10px; }
.dossier-live-section .live-feed { max-height: 220px; min-height: 90px; }
.dossier-asset-grid, .dossier-equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dossier-asset-card, .equipment-card { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); background: var(--panel); }
.asset-icon { position: relative; display: inline-grid; flex: 0 0 39px; width: 39px; height: 39px; place-items: center; overflow: hidden; border: 1px solid rgba(215,255,89,.15); border-radius: 5px; color: var(--accent); background: #111a26; font: 700 8px/1 ui-monospace, Consolas, monospace; text-align: center; }
.asset-image { width: 100%; height: 100%; object-fit: contain; }
.asset-icon.asset-missing .asset-icon-fallback { display: grid; }
.asset-icon-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: var(--muted-2); }
.asset-copy { min-width: 0; }
.asset-copy strong { display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
.asset-copy small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.dossier-empty { grid-column: 1 / -1; padding: 10px; border: 1px dashed var(--line); }
.equipment-card { border-color: rgba(84,216,220,.18); }
.equipment-icon { border-color: rgba(84,216,220,.28); }
.player-live-feed .live-event { padding-top: 8px; padding-bottom: 8px; }
.dossier-block { min-width: 0; }
.dossier-head { position: relative; flex-wrap: wrap; }
.dossier-legacy-links { display: flex; flex-basis: 100%; gap: 8px; padding-left: 67px; margin-top: -8px; }
.dossier-legacy-links a { padding: 4px 7px; border: 1px solid rgba(84,216,220,.2); border-radius: 3px; color: var(--cyan); font-size: 9px; }
.dossier-legacy-links a:hover { border-color: rgba(215,255,89,.4); color: var(--accent); }
.dossier-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.dossier-info-item { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px 12px; background: var(--panel); }
.dossier-info-copy { display: block; min-width: 0; }
.dossier-info-copy strong { display: block; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font: 500 15px/1.2 var(--display); }
.dossier-info-copy span { display: block; margin-top: 5px; color: var(--muted-2); font-size: 9px; }
.metric-icon { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid rgba(84,216,220,.2); border-radius: 7px; color: var(--cyan); background: rgba(84,216,220,.055); }
.metric-icon svg { display: block; width: 16px; height: 16px; }
.grindstone-avatar { display: inline-grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; overflow: hidden; border: 1px solid rgba(115,191,255,.34); border-radius: 7px; color: var(--grindstone-summary-text, var(--cyan)); background: rgba(64,124,181,.14); font: 600 10px/1 var(--display); }
.grindstone-player-link, .grindstone-player-name { display: block; margin-top: 5px; overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.grindstone-player-link:hover, .grindstone-player-link:focus-visible { color: var(--grindstone-summary-accent, var(--cyan)); text-decoration: underline; text-underline-offset: 2px; outline: none; }
.grindstone-detail-player { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
.grindstone-detail-player .grindstone-player-link, .grindstone-detail-player .grindstone-player-name { margin-top: 0; color: var(--text); font-size: inherit; }
.grindstone-detail-avatar { flex-basis: 28px; width: 28px; height: 28px; }
.grindstone-ranking {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--grindstone-summary-line, rgba(95, 181, 255, .34));
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 34, 52, .82), rgba(7, 13, 22, .96));
}
.grindstone-ranking::before {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(118deg, transparent 0 38px, rgba(115, 191, 255, .045) 39px 40px),
    linear-gradient(rgba(115, 191, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 191, 255, .035) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}
.grindstone-podium {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  min-height: 254px;
  padding: 22px 18px 0;
  margin: 0;
  list-style: none;
}
.grindstone-podium-item { grid-row: 1; align-self: end; min-width: 0; animation: grindstone-rise .28s ease both; }
.grindstone-podium-item.is-rank-1 { grid-column: 2; --rank-color: #f5d278; --step-height: 76px; animation-delay: 55ms; }
.grindstone-podium-item.is-rank-2 { grid-column: 1; --rank-color: #c2cedd; --step-height: 56px; }
.grindstone-podium-item.is-rank-3 { grid-column: 3; --rank-color: #c99070; --step-height: 44px; animation-delay: 110ms; }
.grindstone-entry-link { color: inherit; }
.grindstone-podium-link { display: flex; min-width: 0; flex-direction: column; }
.grindstone-podium-profile {
  display: flex;
  min-width: 0;
  min-height: 126px;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  padding: 10px 8px 12px;
  text-align: center;
}
.grindstone-podium-avatar {
  flex-basis: 54px;
  width: 54px;
  height: 54px;
  border-color: rgba(194, 206, 221, .48);
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.is-rank-1 .grindstone-podium-profile { min-height: 142px; }
.is-rank-1 .grindstone-podium-avatar { flex-basis: 68px; width: 68px; height: 68px; border-color: rgba(245, 210, 120, .6); box-shadow: 0 10px 28px rgba(245, 210, 120, .11); }
.is-rank-3 .grindstone-podium-avatar { border-color: rgba(201, 144, 112, .48); }
.grindstone-podium-name {
  display: block;
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  color: #e8f1fb;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grindstone-podium-score { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 5px; color: var(--rank-color); }
.grindstone-podium-score strong { font: 700 20px/1 var(--display); }
.is-rank-1 .grindstone-podium-score strong { font-size: 24px; }
.grindstone-podium-score small { color: var(--muted-2); font-size: 9px; }
.grindstone-pedestal {
  display: grid;
  height: var(--step-height);
  place-content: center;
  border: 1px solid rgba(115, 191, 255, .32);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(115, 191, 255, .1), transparent 34%), linear-gradient(145deg, rgba(20, 35, 52, .98), rgba(8, 15, 25, .98));
  box-shadow: inset 0 2px var(--rank-color);
  text-align: center;
}
.is-rank-1 .grindstone-pedestal { border-color: rgba(245, 210, 120, .38); background: linear-gradient(180deg, rgba(245, 210, 120, .12), transparent 38%), linear-gradient(145deg, rgba(35, 37, 42, .98), rgba(12, 18, 25, .98)); }
.is-rank-2 .grindstone-pedestal { border-color: rgba(194, 206, 221, .34); }
.is-rank-3 .grindstone-pedestal { border-color: rgba(201, 144, 112, .34); background: linear-gradient(180deg, rgba(201, 144, 112, .1), transparent 38%), linear-gradient(145deg, rgba(29, 31, 38, .98), rgba(10, 16, 24, .98)); }
.grindstone-pedestal small { display: block; color: var(--rank-color); font: 700 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; }
.grindstone-pedestal b { display: block; margin-top: 4px; color: var(--rank-color); font: 700 25px/1 var(--display); }
.grindstone-podium-link:hover .grindstone-podium-avatar { border-color: var(--rank-color); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(115, 191, 255, .14); }
.grindstone-entry-link:focus-visible { border-radius: 4px; outline: 2px solid var(--grindstone-summary-accent, #73bfff); outline-offset: -2px; }
.grindstone-ranking[data-count="1"] .grindstone-podium { max-width: 210px; grid-template-columns: 1fr; margin-right: auto; margin-left: auto; }
.grindstone-ranking[data-count="1"] .is-rank-1 { grid-column: 1; }
.grindstone-ranking[data-count="2"] .grindstone-podium { max-width: 460px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-right: auto; margin-left: auto; }
.grindstone-ranking[data-count="2"] .is-rank-1 { grid-column: 2; }
.grindstone-ranking[data-count="2"] .is-rank-2 { grid-column: 1; }
.grindstone-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  padding: 1px 0 0;
  margin: 0;
  border-top: 1px solid rgba(115, 191, 255, .22);
  list-style: none;
  background: rgba(115, 191, 255, .12);
}
.grindstone-list-link {
  position: relative;
  display: grid;
  min-height: 54px;
  grid-template-columns: 38px 36px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  overflow: hidden;
  background: rgba(10, 19, 31, .94);
  transition: background .15s ease, transform .15s ease;
}
.grindstone-list-link:hover { background: rgba(25, 52, 78, .94); transform: translateY(-1px); }
.grindstone-list-rank { position: relative; z-index: 1; color: rgba(115, 191, 255, .72); font: 700 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .05em; }
.grindstone-list-avatar { position: relative; z-index: 1; flex-basis: 34px; width: 34px; height: 34px; border-radius: 8px; }
.grindstone-list-name { position: relative; z-index: 1; min-width: 0; overflow: hidden; color: #d4e2f1; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.grindstone-list-score { position: relative; z-index: 1; text-align: right; white-space: nowrap; }
.grindstone-list-score strong { color: var(--grindstone-summary-text, #d8eaff); font: 600 16px/1 var(--display); }
.grindstone-list-score small { margin-left: 4px; color: var(--muted-2); font-size: 9px; }
.grindstone-list-bar { position: absolute; right: auto; bottom: 0; left: 0; height: 2px; max-width: 100%; background: linear-gradient(90deg, rgba(115, 191, 255, .1), rgba(115, 191, 255, .52)); pointer-events: none; }
.grindstone-empty { position: relative; z-index: 1; padding: 22px; margin: 0; text-align: center; }
@keyframes grindstone-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1020px) {
  .grindstone-podium { padding-right: 8px; padding-left: 8px; }
  .grindstone-podium-avatar { flex-basis: 48px; width: 48px; height: 48px; }
  .is-rank-1 .grindstone-podium-avatar { flex-basis: 58px; width: 58px; height: 58px; }
  .grindstone-podium-name { max-width: 92px; }
}
@media (max-width: 520px) {
  .grindstone-podium { min-height: 224px; gap: 4px; padding-top: 12px; }
  .grindstone-podium-item.is-rank-1 { --step-height: 64px; }
  .grindstone-podium-item.is-rank-2 { --step-height: 48px; }
  .grindstone-podium-item.is-rank-3 { --step-height: 38px; }
  .grindstone-podium-profile, .is-rank-1 .grindstone-podium-profile { min-height: 130px; padding-right: 3px; padding-left: 3px; }
  .grindstone-podium-avatar { flex-basis: 44px; width: 44px; height: 44px; border-radius: 10px; }
  .is-rank-1 .grindstone-podium-avatar { flex-basis: 54px; width: 54px; height: 54px; }
  .grindstone-podium-name { max-width: 78px; font-size: 10px; }
  .grindstone-podium-score strong { font-size: 17px; }
  .is-rank-1 .grindstone-podium-score strong { font-size: 21px; }
  .grindstone-podium-score small { display: none; }
  .grindstone-list-link { grid-template-columns: 30px 32px minmax(0, 1fr) 54px; gap: 7px; padding-right: 10px; padding-left: 10px; }
  .grindstone-list-avatar { flex-basis: 30px; width: 30px; height: 30px; }
  .grindstone-list-score small { display: none; }
}
.dossier-mix-meta { display: grid; gap: 13px; }
.dossier-subtitle { margin: 0 0 7px; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }
.dossier-subtitle + .dossier-subtitle { margin-top: 15px; }
.dossier-progress-title { color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }
.dossier-progress { display: flex; align-items: center; gap: 9px; }
.dossier-progress-bar { display: block; flex: 1; height: 5px; overflow: hidden; border-radius: 5px; background: rgba(157,176,201,.13); }
.dossier-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--accent)); }
.dossier-progress small { flex: 0 0 auto; color: var(--accent); font-size: 10px; }
.dossier-table-wrap { overflow: auto; border: 1px solid var(--line); }
.dossier-detail-table { width: 100%; min-width: 390px; border-collapse: collapse; font-size: 10px; }
.dossier-detail-table th { padding: 8px 9px; color: var(--muted-2); background: rgba(7,11,17,.52); font-size: 9px; font-weight: 600; text-align: left; }
.dossier-detail-table td { padding: 8px 9px; border-top: 1px solid rgba(157,176,201,.08); color: var(--muted); }
.dossier-detail-table tbody tr:hover td { color: var(--text); background: rgba(215,255,89,.035); }
@media (min-width: 1021px) {
  .player-drawer { width: min(1080px, 82vw); }
  .drawer-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0 26px; padding: 34px 44px; }
  .drawer-content > .dossier-head, .drawer-content > .dossier-stats, .drawer-content > .dossier-live-section { grid-column: 1 / -1; }
  .dossier-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dossier-common-grid > .dossier-info-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .drawer-content > .dossier-block { margin-bottom: 4px; }
}
@media (min-width: 1500px) {
  .player-drawer { width: min(1320px, 78vw); }
  .drawer-content { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 58px; padding-left: 58px; gap: 0 30px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Desktop dossier workspace -------------------------------------------------
   The profile is intentionally a wide, ordered workspace on PC.  Sections
   are assigned explicit tracks so a one-card module cannot create a tall
   empty column beside a large tea inventory. */
@media (min-width: 1021px) {
  .player-drawer {
    right: 14px;
    width: min(1800px, calc(100vw - 28px));
    border-left-color: rgba(215, 255, 89, .2);
  }
  .drawer-header { padding: 22px 42px 18px; }
  .drawer-footer { display: none; }
  .drawer-content.dossier-content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    align-content: start;
    gap: 0 22px;
    padding: 26px 42px 54px;
  }
  .dossier-content > .dossier-head,
  .dossier-content > .dossier-rank-block,
  .dossier-content > .dossier-grindstone-block,
  .dossier-content > .dossier-collection-block,
  .dossier-content > .dossier-weapon-block { grid-column: 1 / -1; }
  .dossier-content > .dossier-basic-block { grid-column: span 4; }
  .dossier-content > .dossier-live-section { grid-column: span 8; }
  .dossier-content > .dossier-mode-block,
  .dossier-content > .dossier-deep-block,
  .dossier-content > .dossier-compact-block,
  .dossier-content > .dossier-grindstone-summary-block { grid-column: span 4; }
  .dossier-content > .dossier-block {
    min-width: 0;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(157, 176, 201, .12);
  }
  .dossier-content > .dossier-head { padding-bottom: 18px; border-top: 0; }
  .dossier-content > .dossier-basic-block,
  .dossier-content > .dossier-live-section { min-height: 250px; }
  .dossier-content > .dossier-live-section {
    margin-top: 0;
    padding: 18px 18px 16px;
    border: 1px solid rgba(84, 216, 220, .2);
    background: linear-gradient(135deg, rgba(84, 216, 220, .08), rgba(13, 19, 29, .82));
  }
  .dossier-content .dossier-section-title { margin: 0 0 11px; color: var(--cyan); }
  .dossier-content .dossier-live-section .panel-title-row { margin-bottom: 2px; }
  .dossier-content .dossier-live-section .live-summary { margin: 13px 0 9px; }
  .dossier-content .dossier-live-section .live-feed { max-height: 205px; min-height: 136px; }
  .dossier-content > .dossier-rank-block { padding-top: 22px; }
  .dossier-content .dossier-stats { grid-template-columns: repeat(8, minmax(0, 1fr)); margin: 0; }
  .dossier-content.dossier-zombie .dossier-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dossier-content > .dossier-grindstone-block { padding-top: 22px; }
  .dossier-grindstone-summary-block { min-width: 0; }
  .dossier-grindstone-block .dossier-table-wrap { border-color: rgba(215, 255, 89, .2); }
  .dossier-content .dossier-detail-table { min-width: 720px; table-layout: fixed; }
  .dossier-content .dossier-detail-table th,
  .dossier-content .dossier-detail-table td { padding: 10px 12px; }
  .dossier-content .dossier-detail-table th:nth-child(1) { width: 24%; }
  .dossier-content .dossier-detail-table th:nth-child(2),
  .dossier-content .dossier-detail-table th:nth-child(3) { width: 10%; text-align: center; }
  .dossier-content .dossier-detail-table th:nth-child(4) { width: 14%; }
  .dossier-content .dossier-detail-table th:nth-child(5) { width: 18%; }
  .dossier-content .dossier-detail-table th:nth-child(6) { width: 24%; }
  .dossier-content .dossier-detail-table td:nth-child(2),
  .dossier-content .dossier-detail-table td:nth-child(3),
  .dossier-content .dossier-detail-table td:nth-child(4) { text-align: center; }
  .dossier-content .dossier-detail-table td:last-child { white-space: nowrap; }
  .dossier-content .dossier-asset-grid,
  .dossier-content .dossier-equipment-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
  .dossier-content .dossier-asset-card,
  .dossier-content .equipment-card { min-height: 62px; padding: 9px; }
  .dossier-content .dossier-weapon-block .dossier-weapons {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    border: 0;
    background: transparent;
  }
  .dossier-content .dossier-weapon-block .dossier-weapon { border: 1px solid var(--line); }
  .dossier-content > .dossier-collection-block { padding-top: 22px; }
}
@media (min-width: 1500px) {
  .dossier-content .dossier-asset-grid,
  .dossier-content .dossier-equipment-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Desktop detail readability and containment --------------------------------
   The live feed is its own scroll context.  Keeping the card clipped while
   the list owns the scroll prevents event rows from painting through the
   drawer layer when the feed is taller than its panel. */
@media (min-width: 1021px) {
  body { font-size: 16px; line-height: 1.65; }
  .nav-link, .header-action { font-size: 13px; }
  .brand-copy strong { font-size: 14px; }
  .brand-copy small { font-size: 10px; }
  .hero-lede { font-size: 16px; }
  .mode-tab strong { font-size: 17px; }
  .mode-tab small { font-size: 11px; }
  .section-kicker, .eyebrow { font-size: 11px; }
  .status-pill { font-size: 12px; }
  .search-box input { font-size: 14px; }
  .period-tab { font-size: 13px; }
  .leaderboard-table th { font-size: 11px; }
  .leaderboard-table td { font-size: 14px; }
  .player-name { max-width: 210px; font-size: 14px; }
  .player-uid { font-size: 12px; }
  .result-count, .page-button { font-size: 13px; }
  .live-panel .live-event-main { font-size: 13px; }
  .live-panel .live-event-time, .panel-footnote { font-size: 11px; }
  .panel-title-hint, .lookup-copy span, .footer-links a, .footer-meta { font-size: 13px; }

  .drawer-content {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  .dossier-content > .dossier-live-section {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 360px;
    max-height: 360px;
    flex-direction: column;
    overflow: hidden;
    border-radius: 8px;
    isolation: isolate;
    contain: layout paint;
  }

  .dossier-content > .dossier-live-section .live-feed {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .dossier-content > .dossier-live-section .live-event,
  .dossier-content > .dossier-live-section .live-event-main,
  .dossier-content > .dossier-live-section .live-event-time {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* The detail drawer uses compact labels extensively; these sizes keep the
     hierarchy legible without enlarging the large display headings. */
  .dossier-content .dossier-head strong { font-size: 20px; }
  .dossier-content .dossier-head small { font-size: 12px; }
  .dossier-content .dossier-rank b { font-size: 26px; }
  .dossier-content .dossier-rank span { font-size: 12px; }
  .dossier-content .dossier-legacy-links a { font-size: 11px; }
  .dossier-content .dossier-stat-copy b { font-size: 25px; }
  .dossier-content .dossier-stat-copy span { font-size: 12px; }
  .dossier-content .dossier-section-title,
  .dossier-content .dossier-subtitle,
  .dossier-content .dossier-progress-title { font-size: 12px; }
  .dossier-content .dossier-info-copy strong { font-size: 16px; }
  .dossier-content .dossier-info-copy span { font-size: 12px; }
  .dossier-content .dossier-progress small { font-size: 12px; }

  .dossier-content .dossier-live-section h3 { font-size: 22px; }
  .dossier-content .dossier-live-section .live-indicator { font-size: 12px; }
  .dossier-content .dossier-live-section .live-summary { font-size: 13px; }
  .dossier-content .dossier-live-section .live-summary strong { font-size: 28px; }
  .dossier-content .dossier-live-section .live-event { padding-top: 10px; padding-bottom: 10px; }
  .dossier-content .dossier-live-section .live-event-main { font-size: 14px; line-height: 1.45; }
  .dossier-content .dossier-live-section .live-event-time { font-size: 12px; }
  .dossier-content .dossier-live-section .panel-footnote { font-size: 11px; }

  .dossier-content .asset-copy strong { font-size: 13px; }
  .dossier-content .asset-copy small { font-size: 11px; }
  .dossier-content .dossier-weapon strong { font-size: 13px; }
  .dossier-content .dossier-weapon-stats,
  .dossier-content .dossier-weapon-rank { font-size: 11px; }
  .dossier-content .dossier-list li { font-size: 12px; }
  .dossier-content .dossier-detail-table { font-size: 12px; }
  .dossier-content .dossier-detail-table th { font-size: 11px; }
  .dossier-content .dossier-empty,
  .dossier-content .state-copy { font-size: 13px; }

  /* Red-tea profile assets use a stable 50x50 visual target on desktop. */
  .dossier-content.dossier-zombie .dossier-asset-card .asset-icon,
  .dossier-content.dossier-zombie .equipment-card .asset-icon {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  .dossier-content > .dossier-hc-block { grid-column: span 8; }
  .dossier-content > .dossier-equipment-block { grid-column: 1 / span 8; padding-top: 24px; }
  .equipment-workbench { display: grid; gap: 16px; }
  .equipment-inspector-host { min-width: 0; padding: 1px; border: 1px solid rgba(157, 176, 201, .2); border-radius: 9px; background: linear-gradient(135deg, rgba(157, 176, 201, .08), rgba(7, 11, 17, .88)); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
  .equipment-inspector {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(310px, 1fr) minmax(300px, .9fr);
    gap: 18px;
    min-height: 340px;
    padding: 22px;
    border: 0;
    border-radius: 8px;
    background: transparent;
  }
  .equipment-selected { display: flex; grid-column: 1; align-items: center; gap: 16px; align-self: start; }
  .equipment-selected-image.asset-icon { flex-basis: 96px !important; width: 96px !important; height: 96px !important; border-color: rgba(215, 255, 89, .35); }
  .equipment-selected-copy { min-width: 0; }
  .equipment-selected-copy strong { display: block; color: var(--text); font: 500 25px/1.15 var(--display); }
  .equipment-selected-copy span { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6; }
  .equipment-props { display: grid; grid-column: 1; grid-row: 2; align-content: start; gap: 6px; }
  .equipment-prop { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); background: rgba(13, 19, 29, .82); }
  .equipment-prop.is-primary { border-color: rgba(215, 255, 89, .35); background: rgba(215, 255, 89, .06); }
  .equipment-prop span { color: var(--muted); font-size: 13px; }
  .equipment-prop b { color: var(--accent); font-size: 15px; }
  .equipment-radar { display: grid; grid-column: 2; grid-row: 1 / span 2; min-width: 0; place-items: center; border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
  .equipment-radar > strong, .equipment-totals > strong { color: var(--cyan); font-size: 12px; letter-spacing: .12em; }
  .equipment-radar svg { display: block; width: min(100%, 320px); height: 292px; overflow: visible; }
  .radar-grid { fill: rgba(84, 216, 220, .012); stroke: rgba(157, 176, 201, .22); stroke-width: 1; }
  .radar-axis { stroke: rgba(157, 176, 201, .22); stroke-width: 1; }
  .radar-value { fill: rgba(215, 255, 89, .22); stroke: var(--accent); stroke-width: 2.2; }
  .radar-dot { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(215, 255, 89, .65)); }
  .radar-label { fill: var(--text); font: 600 12px/1 var(--body); }
  .equipment-totals { display: grid; grid-column: 3; grid-row: 1 / span 2; align-content: start; gap: 1px; min-width: 0; }
  .equipment-totals > strong { display: block; margin-bottom: 10px; }
  .equipment-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; background: rgba(13, 19, 29, .76); }
  .equipment-totals span { color: var(--muted); font-size: 13px; }
  .equipment-totals b { color: var(--text); font-size: 14px; }
  .equipment-workbench > .dossier-equipment-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .equipment-card { appearance: none; color: inherit; font: inherit; text-align: left; cursor: default; }
  button.equipment-card { cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
  button.equipment-card:hover { border-color: rgba(84, 216, 220, .45); background: rgba(84, 216, 220, .055); transform: translateY(-1px); }
  button.equipment-card.is-selected { border-color: var(--accent); background: rgba(215, 255, 89, .08); box-shadow: inset 3px 0 var(--accent); }
  button.equipment-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
}

/* Personal dossier desktop composition -------------------------------------
   Keep the live feed in a tall, dedicated right rail while the profile cards
   flow down the wider left rail.  The section surfaces deliberately separate
   labels, metrics and deep modules so the dark page does not collapse into a
   wall of white text. */
@media (min-width: 1021px) {
  .drawer-content.dossier-content {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    align-items: start;
    gap: 18px 22px;
  }

  .dossier-content > .dossier-head {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 16px 18px 20px;
    border: 1px solid rgba(84, 216, 220, .18);
    border-radius: 10px;
    background: linear-gradient(115deg, rgba(84, 216, 220, .08), rgba(13, 19, 29, .72) 54%, rgba(215, 255, 89, .045));
    box-shadow: inset 3px 0 rgba(84, 216, 220, .7), 0 10px 28px rgba(0, 0, 0, .12);
  }

  .dossier-content > .dossier-basic-block,
  .dossier-content > .dossier-rank-block,
  .dossier-content > .dossier-mode-block,
  .dossier-content > .dossier-deep-block,
  .dossier-content > .dossier-grindstone-summary-block,
  .dossier-content > .dossier-grindstone-block,
  .dossier-content > .dossier-weapon-block,
  .dossier-content > .dossier-collection-block,
  .dossier-content > .dossier-compact-block,
  .dossier-content > .dossier-hc-block {
    grid-column: 1 / span 8;
  }

  .dossier-content > .dossier-basic-block { grid-row: 2; }
  .dossier-content > .dossier-rank-block { grid-row: 3; }
  .dossier-content > .dossier-mode-block,
  .dossier-content > .dossier-deep-block { grid-column: span 4; grid-row: 4; }
  .dossier-content > .dossier-mode-block { grid-column: 1 / span 4; }
  .dossier-content > .dossier-deep-block { grid-column: 5 / span 4; }

  .dossier-content > .dossier-live-section {
    grid-column: 9 / -1;
    /* Rows 2-7 cover the profile rail through its last compact module.
       Extending farther creates empty implicit rows and delays every
       full-width modules such as equipment and avatars. */
    grid-row: 2 / span 6;
    align-self: start;
    height: clamp(980px, 115vh, 1280px);
    min-height: 760px;
    max-height: 1280px;
    margin: 0;
    padding: 20px 18px 18px;
    border: 1px solid rgba(84, 216, 220, .35);
    border-top: 3px solid var(--cyan);
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(84, 216, 220, .12), rgba(13, 19, 29, .9) 48%, rgba(7, 11, 17, .98));
    box-shadow: inset 0 0 0 1px rgba(84, 216, 220, .045), 0 16px 36px rgba(0, 0, 0, .2);
  }

  .dossier-content > .dossier-live-section .live-feed {
    min-height: 0;
    max-height: none;
  }

  .dossier-content > .dossier-block:not(.dossier-head):not(.dossier-live-section) {
    min-width: 0;
    margin: 0;
    padding: 16px 16px 18px;
    border-style: solid;
    border-width: 1px;
    border-top-width: 2px;
    border-radius: 9px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .1);
  }

  .dossier-content .dossier-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
    margin: 0 0 14px;
    border-bottom: 1px solid rgba(157, 176, 201, .14);
    color: var(--text);
    font-weight: 700;
    letter-spacing: .12em;
  }

  .dossier-content .dossier-section-title::before {
    display: block;
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(84, 216, 220, .3);
    content: '';
  }

  .dossier-content .dossier-info-grid,
  .dossier-content .dossier-stats {
    border-color: rgba(157, 176, 201, .16);
    background: rgba(157, 176, 201, .14);
  }

  .dossier-content .dossier-info-item,
  .dossier-content .dossier-stat {
    background: rgba(13, 19, 29, .83);
  }

  .dossier-content .dossier-info-item:nth-child(3n),
  .dossier-content .dossier-stat:nth-child(3n) { background: rgba(20, 35, 43, .88); }
  .dossier-content .dossier-info-item:hover,
  .dossier-content .dossier-stat:hover { background: rgba(84, 216, 220, .09); }
  .dossier-content .dossier-info-copy strong,
  .dossier-content .dossier-stat-copy b { color: var(--cyan); }
  .dossier-content .dossier-stat:nth-child(3n) .dossier-stat-copy b { color: var(--accent); }
  .dossier-content .dossier-info-copy span,
  .dossier-content .dossier-stat-copy span { color: var(--muted); }

  .dossier-content .dossier-subtitle,
  .dossier-content .dossier-progress-title { color: var(--muted); }
  .dossier-content .dossier-progress-title { padding-bottom: 4px; }

}

/* Detail-grid containment ---------------------------------------------------
   Keep the two left-rail cards on real, independently sized rows.  Explicit
   row placement prevents an intrinsic-height info grid from being painted
   beneath the ranking card when the profile data changes shape. */
@media (min-width: 1021px) {
  .drawer-content.dossier-content {
    grid-auto-rows: minmax(min-content, auto);
    row-gap: 22px;
  }

  .dossier-content > .dossier-basic-block {
    grid-column: 1 / span 8;
    grid-row: 2;
    align-self: start;
    min-height: 0;
  }

  .dossier-content > .dossier-rank-block {
    grid-column: 1 / span 8;
    grid-row: 3;
    align-self: start;
    min-height: 0;
    margin-top: 0;
  }

  /* Avatar cards follow the same main-rail width as equipment and the other
     profile modules, leaving the live-feed rail structurally independent. */
  .dossier-content > .dossier-avatar-block {
    grid-column: 1 / span 8;
    grid-row: auto;
    width: auto;
  }

  .dossier-content > .dossier-avatar-block .dossier-asset-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    width: 100%;
  }
}

@media (min-width: 1500px) {
  .dossier-content > .dossier-avatar-block .dossier-asset-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

/* Equipment property tree ---------------------------------------------------
   The inspector uses a folder-tree treatment: one trunk, a branch for each
   property group, and a node connector for every individual attribute. */
@media (min-width: 1021px) {
  .equipment-props { min-width: 0; }
  .equipment-props-tree {
    position: relative;
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 5px 0 5px 29px;
  }
  .equipment-props-tree::before {
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 9px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(84, 216, 220, .7), rgba(215, 255, 89, .35));
    content: '';
  }
  .equipment-props-group {
    position: relative;
    display: grid;
    gap: 7px;
    min-width: 0;
  }
  .equipment-props-group::before {
    position: absolute;
    top: 14px;
    left: -20px;
    width: 20px;
    border-top: 1px solid rgba(84, 216, 220, .62);
    content: '';
  }
  .equipment-props-group.is-secondary::before { border-color: rgba(215, 255, 89, .5); }
  .equipment-props-group-title {
    position: relative;
    display: block;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
  }
  .equipment-props-group.is-secondary .equipment-props-group-title { color: var(--accent); }
  .equipment-prop-list {
    position: relative;
    display: grid;
    gap: 6px;
    min-width: 0;
    padding-left: 13px;
  }
  .equipment-prop-list::before {
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 1px;
    width: 1px;
    background: rgba(157, 176, 201, .28);
    content: '';
  }
  .equipment-prop {
    position: relative;
    min-width: 0;
  }
  .equipment-prop::before {
    position: absolute;
    top: 50%;
    left: -13px;
    width: 12px;
    border-top: 1px solid rgba(157, 176, 201, .4);
    content: '';
  }
  .equipment-prop::after {
    position: absolute;
    top: calc(50% - 3px);
    left: -15px;
    width: 5px;
    height: 5px;
    border: 1px solid var(--cyan);
    border-radius: 50%;
    background: var(--bg-elevated);
    box-shadow: 0 0 6px rgba(84, 216, 220, .32);
    content: '';
  }
  .equipment-prop.is-primary::after { border-color: var(--accent); box-shadow: 0 0 6px rgba(215, 255, 89, .32); }
}

/* Desktop asset-card readability ------------------------------------------
   The old fixed six/eight-column tracks reduced left-rail cards to roughly
   114px at common desktop widths.  With a 50px icon and a single-line title
   that left almost no room for red-tea item, equipment, or avatar names.
   Let the grid choose a useful number of columns from a real card minimum;
   cards can then keep their image and copy side by side without truncating
   the content into an unreadable strip. */
@media (min-width: 1021px) {
  .dossier-content .dossier-asset-grid,
  .dossier-content .dossier-equipment-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
  }

  .dossier-content .dossier-asset-card,
  .dossier-content .equipment-card {
    min-width: 0;
    min-height: 84px;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
  }

  .dossier-content .dossier-asset-card .asset-icon,
  .dossier-content .equipment-card .asset-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
  }

  .dossier-content .dossier-asset-card .asset-copy,
  .dossier-content .equipment-card .asset-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding-top: 1px;
  }

  .dossier-content .dossier-asset-card .asset-copy strong,
  .dossier-content .equipment-card .asset-copy strong {
    display: -webkit-box;
    overflow: hidden;
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* The avatar collection has a more specific legacy eight-column rule;
     override that track too so full-width character/skin cards receive the
     same readable minimum width as tea items and equipment. */
  .dossier-content > .dossier-avatar-block .dossier-asset-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .dossier-content .dossier-asset-card .asset-copy small,
  .dossier-content .equipment-card .asset-copy small {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* Mixed-combat ranking metrics: retain the full legacy counter set. */
@media (min-width: 1021px) {
  .dossier-content.dossier-mix > .dossier-rank-block .dossier-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .dossier-content.dossier-mix > .dossier-rank-block .dossier-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Profile command card V2 ---------------------------------------------------
   Identity and the current rank lead; facts, contextual entitlements and the
   five-mode navigation remain compact enough for both the wide drawer and
   its single-column mobile layout. */
body .drawer-content.dossier-content > .dossier-block.dossier-basic-block {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(151,175,194,.18);
  border-radius: 10px;
  background: rgba(11,17,24,.96);
  box-shadow: 0 24px 70px rgba(0,0,0,.44);
}
body .drawer-content.dossier-content > .dossier-block.dossier-basic-block::before { position: absolute; z-index: 1; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg,var(--cyan),transparent 42%); content: ''; pointer-events: none; }
body .drawer-content.dossier-content.dossier-mode-zombie > .dossier-block.dossier-basic-block { border-color: rgba(255,102,196,.3); background: rgba(15,13,22,.97); box-shadow: 0 24px 70px rgba(0,0,0,.44),inset 0 0 42px rgba(255,102,196,.025); }
body .drawer-content.dossier-content.dossier-mode-zombie > .dossier-block.dossier-basic-block::before { background: linear-gradient(90deg,#ff66c4,#b7a7ff,transparent 58%); }
.dossier-basic-profile { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.dossier-v2-section-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; margin: 0; border-bottom: 1px solid rgba(151,175,194,.14); }
.dossier-v2-section-head-title { display: flex; align-items: center; gap: 11px; }
.dossier-v2-section-head-title::before { display: block; width: 5px; height: 21px; flex: 0 0 5px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px rgba(84,216,220,.3); content: ''; }
.dossier-v2-section-head-title > span:first-child { color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.dossier-v2-data-freshness { display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 9px; }
.dossier-v2-data-freshness i { width: 5px; height: 5px; border-radius: 50%; background: #62d98b; box-shadow: 0 0 8px rgba(98,217,139,.5); }
.dossier-mode-zombie .dossier-v2-section-head { border-bottom-color: rgba(255,102,196,.18); }
.dossier-mode-zombie .dossier-v2-section-head-title::before { background: #ff66c4; box-shadow: 0 0 12px rgba(255,102,196,.48); }
.dossier-mode-zombie .dossier-basic-kicker { color: #ff66c4; }
.dossier-basic-kicker {
  display: inline-block;
  color: var(--muted-2);
  font: 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  font-weight: 600;
  letter-spacing: .16em;
}
.dossier-basic-kicker::before {
  display: none;
  content: none;
}
.dossier-v2-shell { display: grid; grid-template-columns: minmax(320px,1.15fr) minmax(420px,1.85fr); }
.dossier-profile-primary {
  display: flex;
  position: relative;
  min-width: 0;
  flex-direction: column;
  padding: 24px;
  border-right: 1px solid rgba(157,176,201,.14);
  background: linear-gradient(145deg,rgba(84,216,220,.055),transparent 48%);
}
.dossier-mode-zombie .dossier-profile-primary { background: linear-gradient(145deg,rgba(255,102,196,.09),transparent 50%); }
.dossier-v2-identity-top { display: grid; width: 100%; min-width: 0; grid-template-columns: 74px minmax(0,1fr) auto; align-items: center; gap: 16px; }
.dossier-v2-identity-top > .avatar { width: 74px; height: 74px; border-color: rgba(84,216,220,.38); border-radius: 8px; color: var(--cyan); font-size: 21px; }
.dossier-mode-zombie .dossier-v2-identity-top > .avatar { color: #ff66c4; border-color: rgba(255,102,196,.52); }
.dossier-profile-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.dossier-v2-identity-label { color: var(--muted-2); font: 9px/1 var(--mono,ui-monospace); letter-spacing: .12em; }
.dossier-profile-identity .dossier-name-line { display: flex; width: 100%; }
.dossier-profile-identity .dossier-name-line > strong { color: var(--text); font: 600 20px/1.2 var(--display); }
.dossier-basic-block .account-status-badge.is-normal {
  border-color: rgba(84, 216, 220, .48);
  color: #86c9cb;
  background: rgba(84, 216, 220, .055);
  box-shadow: none;
}
.dossier-v2-rank-card { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 18px; padding: 18px; margin-top: 22px; border: 1px solid rgba(84,216,220,.32); border-radius: 7px; background: rgba(5,13,17,.52); }
.dossier-mode-zombie .dossier-v2-rank-card { border-color: rgba(255,102,196,.4); background: rgba(27,9,23,.34); }
.dossier-v2-rank-card > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.dossier-v2-rank-card small { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.dossier-v2-rank-card strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1.2 var(--display); }
.dossier-v2-rank-card > b { color: var(--accent); font: 700 35px/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.dossier-mode-zombie .dossier-v2-rank-card > b { color: #ff66c4; }
.dossier-v2-rank-card > b small { font-size: 10px; letter-spacing: 0; }
.dossier-v2-rank-track { grid-column: 1/-1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(157,176,201,.12); }
.dossier-v2-rank-track i { display: block; height: 100%; background: linear-gradient(90deg,var(--cyan),var(--accent)); }
.dossier-mode-zombie .dossier-v2-rank-track i { background: linear-gradient(90deg,#ff66c4,#b7a7ff); }
.dossier-v2-entitlements { width: 100%; padding-top: 22px; margin-top: auto; }
.dossier-v2-micro-title { margin-bottom: 8px; color: var(--muted-2); font-size: 9px; font-weight: 600; letter-spacing: .1em; }
.dossier-v2-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.dossier-v2-chip { display: inline-flex; min-width: 0; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(157,176,201,.16); border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 10px; }
.dossier-v2-chip-icon { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--cyan); background: rgba(84,216,220,.1); font-size: 9px; font-weight: 800; }
.dossier-v2-chip.is-wechat .dossier-v2-chip-icon { color: #65de85; background: rgba(85,215,118,.1); }
.dossier-v2-chip.is-qq .dossier-v2-chip-icon { color: #74c0ff; background: rgba(104,184,255,.1); }
.dossier-v2-chip small { color: var(--muted-2); font: 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.dossier-v2-chip.is-empty { color: #71808a; border-style: dashed; background: rgba(255,255,255,.012); }
.dossier-v2-chip.is-empty .dossier-v2-chip-icon { color: #677781; background: rgba(122,139,150,.08); }
.dossier-v2-chip.is-empty small { color: #53616b; }
.dossier-v2-detail { min-width: 0; padding: 24px; }
.dossier-basic-facts {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
}
.dossier-basic-fact {
  display: flex;
  min-width: 0;
  min-height: 84px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(157,176,201,.14);
  border-radius: 7px;
  background: rgba(8, 15, 21, .7);
  transition: border-color .16s ease, background .16s ease;
}
.dossier-basic-fact:hover { border-color: rgba(84, 216, 220, .3); background: rgba(84, 216, 220, .055); }
.dossier-mode-zombie .dossier-basic-fact { border-color: rgba(255,102,196,.18); }
.dossier-mode-zombie .dossier-basic-fact:hover { border-color: rgba(255,102,196,.4); background: rgba(255,102,196,.065); }
.dossier-mode-zombie .dossier-basic-fact .metric-icon { color: #ff66c4; border-color: rgba(255,102,196,.3); background: rgba(255,102,196,.075); }
.dossier-basic-fact.is-empty { border-style: dashed; background: rgba(8,15,21,.42); }
.dossier-basic-fact.is-empty .metric-icon { color: #657680; border-color: rgba(122,139,150,.18); background: rgba(122,139,150,.045); }
.dossier-basic-fact.is-empty strong { color: #81909a; }
.dossier-basic-fact > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.dossier-basic-fact small { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.dossier-basic-fact strong { overflow: hidden; color: #d9e3e8; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-basic-fact em { overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; font-style: normal; }
.dossier-v2-modules { margin-top: 18px; }
.dossier-v2-module-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.dossier-v2-mode-card { position: relative; min-height: 112px; overflow: hidden; padding: 16px; border: 1px solid rgba(157,176,201,.14); border-radius: 7px; background: #101923; }
.dossier-mode-zombie .dossier-v2-mode-card { border-color: rgba(255,102,196,.24); background: linear-gradient(145deg,rgba(255,102,196,.075),rgba(18,18,31,.96)); }
.dossier-v2-mode-card.is-empty { border-style: dashed; background: rgba(11,18,26,.58); }
.dossier-v2-mode-card.is-empty .dossier-v2-membership-icon { color: #70808a; border-color: rgba(157,176,201,.16); background: rgba(157,176,201,.04); }
.dossier-v2-mode-card.is-empty .dossier-v2-membership-main strong { color: #8b99a2; }
.dossier-v2-mode-card::after { position: absolute; right: -52px; bottom: -68px; width: 120px; height: 120px; border: 1px solid currentColor; border-radius: 50%; opacity: .09; content: ''; }
.dossier-v2-card-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted-2); font: 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .08em; }
.dossier-v2-card-label b { padding: 3px 6px; border-radius: 3px; color: var(--cyan); background: rgba(84,216,220,.08); font-weight: 600; letter-spacing: 0; }
.dossier-mode-zombie .dossier-v2-card-label b { color: #ff66c4; background: rgba(255,102,196,.1); }
.dossier-v2-membership-main { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.dossier-v2-membership-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(243,202,104,.26); border-radius: 6px; color: #f3ca68; background: rgba(243,202,104,.07); font: 700 12px/1 var(--display); }
.dossier-v2-membership-main > span:last-child { min-width: 0; }
.dossier-v2-membership-main strong { display: block; overflow: hidden; color: #f3ca68; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/1.2 var(--display); }
.dossier-v2-membership-main small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.dossier-v2-role-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 9px; }
.dossier-v2-role-caption { margin-right: 2px; color: var(--muted-2); font-size: 8px; }
.dossier-v2-role-pill { display: inline-flex; padding: 4px 7px; border: 1px solid rgba(183,167,255,.28); border-radius: 4px; color: #d7ceff; background: rgba(183,167,255,.075); font-size: 8px; }
.dossier-v2-role-pill.is-empty { border-style: dashed; border-color: rgba(157,176,201,.15); color: #74838d; background: transparent; }
.dossier-v2-battle-main { display: flex; align-items: end; justify-content: space-between; gap: 9px; margin-top: 15px; }
.dossier-v2-battle-main > strong { color: var(--text); font: 650 28px/1 var(--display); }
.dossier-v2-battle-main > strong small { color: var(--muted-2); font-size: 9px; }
.dossier-v2-premium { padding: 5px 7px; border: 1px solid rgba(157,176,201,.16); border-radius: 4px; color: var(--muted-2); font-size: 8px; white-space: nowrap; }
.dossier-v2-premium.is-active { border-color: rgba(243,202,104,.27); color: #f3ca68; background: rgba(243,202,104,.07); }
.dossier-v2-battle-progress { display: block; height: 4px; margin-top: 13px; overflow: hidden; border-radius: 4px; background: rgba(157,176,201,.12); }
.dossier-v2-battle-progress i { display: block; height: 100%; background: linear-gradient(90deg,#ff66c4,#f3ca68); }
.dossier-mode-zombie .dossier-v2-battle-card { border-color: rgba(255,102,196,.26); background: linear-gradient(145deg,rgba(255,102,196,.085),rgba(29,20,36,.95)); }
.dossier-v2-rank-nav { padding: 0 24px 24px; }
.dossier-v2-rank-nav-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-top: 18px; margin-bottom: 10px; border-top: 1px solid rgba(157,176,201,.14); }
.dossier-mode-zombie .dossier-v2-rank-nav-head { border-top-color: rgba(255,102,196,.18); }
.dossier-v2-rank-nav-head strong { color: var(--text); font-size: 11px; }
.dossier-v2-rank-nav-head span { color: var(--muted-2); font-size: 9px; }
.dossier-v2-rank-links { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; }
.dossier-v2-rank-link { display: flex; min-width: 0; min-height: 59px; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid rgba(157,176,201,.14); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.018); transition: border-color .16s ease,background .16s ease,transform .16s ease; }
.dossier-v2-rank-link:hover,.dossier-v2-rank-link:focus-visible { border-color: rgba(84,216,220,.38); color: var(--text); background: rgba(84,216,220,.045); transform: translateY(-1px); outline: 0; }
.dossier-v2-rank-link.is-current { border-color: rgba(84,216,220,.34); color: var(--text); background: rgba(84,216,220,.06); }
.dossier-mode-zombie .dossier-v2-rank-link.is-current { border-color: rgba(255,102,196,.44); background: rgba(255,102,196,.08); }
.dossier-mode-zombie .dossier-v2-rank-link:hover,.dossier-mode-zombie .dossier-v2-rank-link:focus-visible { border-color: rgba(255,102,196,.48); background: rgba(255,102,196,.065); }
.dossier-v2-rank-link > span { min-width: 0; }
.dossier-v2-rank-link small { display: block; margin-bottom: 4px; color: var(--muted-2); font: 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .08em; }
.dossier-v2-rank-link strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.dossier-v2-rank-link > b { flex: 0 0 auto; color: var(--text); font: 650 17px/1 var(--display); white-space: nowrap; }
.dossier-v2-rank-link.is-current > b { color: var(--accent); }
.dossier-mode-zombie .dossier-v2-rank-link.is-current > b { color: #ff66c4; }

@media (min-width: 681px) and (max-width: 1020px) {
  .dossier-v2-shell { grid-template-columns: 1fr; }
  .dossier-profile-primary { border-right: 0; border-bottom: 1px solid rgba(157,176,201,.14); }
  .dossier-v2-rank-links { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .dossier-v2-shell { grid-template-columns: 1fr; }
  .dossier-profile-primary { border-right: 0; border-bottom: 1px solid rgba(157,176,201,.14); }
  .dossier-v2-section-head,.dossier-profile-primary,.dossier-v2-detail,.dossier-v2-rank-nav { padding-right: 15px; padding-left: 15px; }
  .dossier-basic-kicker { display: none; }
  .dossier-v2-data-freshness span { display: none; }
  .dossier-v2-identity-top { grid-template-columns: 58px minmax(0,1fr); }
  .dossier-v2-identity-top > .avatar { width: 58px; height: 58px; }
  .dossier-v2-identity-top > .account-status-badge { grid-column: 2; justify-self: start; }
  .dossier-profile-identity { min-width: 0; }
  .dossier-profile-identity .dossier-name-line > strong { font-size: 20px; }
  .dossier-basic-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dossier-v2-module-grid { grid-template-columns: 1fr; }
  .dossier-v2-rank-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dossier-v2-rank-link:last-child { grid-column: 1/-1; }
}

@media (max-width: 520px) {
  .dossier-basic-facts { grid-template-columns: 1fr; }
  .dossier-v2-rank-nav-head span { display: none; }
  .dossier-v2-rank-link > b { font-size: 12px; }
}

@media (min-width: 1021px) {
  .dossier-content > .dossier-basic-block {
    grid-column: 1 / span 8;
    grid-row: 1;
    min-height: 0;
  }
  .dossier-content > .dossier-live-section { grid-row: 1 / span 6; }
  .dossier-content > .dossier-rank-block { grid-row: 2; }
  .dossier-content > .dossier-mode-block,
  .dossier-content > .dossier-deep-block { grid-row: 3; }
}

/* Tea equipment rarity -----------------------------------------------------
   These gradients and star-strip assets mirror tearank's lv1-lv5 language,
   adapted to the dark dossier instead of flattening every item to cyan. */
.equipment-star-strip { display: inline-flex; width: auto; height: 14px; align-items: center; flex: 0 0 auto; }
.equipment-star-strip img { display: block; width: auto; max-width: 78px; height: 14px; object-fit: contain; }
.equipment-card .equipment-card-meta,
.equipment-selected-copy .equipment-selected-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; }
.equipment-card .equipment-card-meta > span:last-child,
.equipment-selected-copy .equipment-selected-meta > span:last-child { min-width: 0; }
.dossier-hc-block .equipment-card .equipment-card-meta,
.dossier-hc-block .equipment-card .equipment-card-meta > span:last-child { line-height: 1.35; white-space: normal; }

.equipment-icon.rarity-5, .equipment-selected-image.rarity-5 { border-color: rgba(238, 183, 84, .58); background: linear-gradient(58deg, #8c6032 0%, #be7b2c 100%); box-shadow: inset 0 0 18px rgba(255, 217, 133, .12); }
.equipment-icon.rarity-4, .equipment-selected-image.rarity-4 { border-color: rgba(180, 112, 255, .58); background: linear-gradient(58deg, #7d30ff 0%, #c688b6 100%); box-shadow: inset 0 0 18px rgba(228, 177, 255, .1); }
.equipment-icon.rarity-3, .equipment-selected-image.rarity-3 { border-color: rgba(100, 181, 218, .52); background: linear-gradient(58deg, #25475f 0%, #598c9c 100%); }
.equipment-icon.rarity-2, .equipment-selected-image.rarity-2 { border-color: rgba(103, 181, 145, .5); background: linear-gradient(58deg, #506e6a 0%, #54937b 100%); }
.equipment-icon.rarity-1, .equipment-selected-image.rarity-1 { border-color: rgba(157, 166, 184, .45); background: linear-gradient(58deg, #5f636c 0%, #808185 100%); }

.equipment-card.rarity-5 { border-color: rgba(238, 183, 84, .38); background: linear-gradient(115deg, rgba(190, 123, 44, .16), rgba(13, 19, 29, .92) 58%); }
.equipment-card.rarity-4 { border-color: rgba(180, 112, 255, .34); background: linear-gradient(115deg, rgba(125, 48, 255, .13), rgba(13, 19, 29, .92) 58%); }
.equipment-card.rarity-3 { border-color: rgba(100, 181, 218, .28); background: linear-gradient(115deg, rgba(37, 71, 95, .18), rgba(13, 19, 29, .92) 58%); }
.equipment-card.rarity-2 { border-color: rgba(103, 181, 145, .25); background: linear-gradient(115deg, rgba(80, 110, 106, .16), rgba(13, 19, 29, .92) 58%); }
.equipment-card.rarity-1 { border-color: rgba(157, 166, 184, .22); background: linear-gradient(115deg, rgba(95, 99, 108, .13), rgba(13, 19, 29, .92) 58%); }
button.equipment-card.rarity-5.is-selected { border-color: #eeb754; background: linear-gradient(115deg, rgba(190, 123, 44, .26), rgba(13, 19, 29, .94) 62%); box-shadow: inset 3px 0 #eeb754, 0 0 0 1px rgba(238, 183, 84, .13); }
button.equipment-card.rarity-4.is-selected { border-color: #b470ff; background: linear-gradient(115deg, rgba(125, 48, 255, .22), rgba(13, 19, 29, .94) 62%); box-shadow: inset 3px 0 #b470ff, 0 0 0 1px rgba(180, 112, 255, .12); }
button.equipment-card.rarity-3.is-selected { border-color: #64b5da; background: linear-gradient(115deg, rgba(37, 71, 95, .28), rgba(13, 19, 29, .94) 62%); box-shadow: inset 3px 0 #64b5da; }
button.equipment-card.rarity-2.is-selected { border-color: #67b591; background: linear-gradient(115deg, rgba(80, 110, 106, .26), rgba(13, 19, 29, .94) 62%); box-shadow: inset 3px 0 #67b591; }
button.equipment-card.rarity-1.is-selected { border-color: #9da6b8; background: linear-gradient(115deg, rgba(95, 99, 108, .24), rgba(13, 19, 29, .94) 62%); box-shadow: inset 3px 0 #9da6b8; }
.equipment-inspector.rarity-5 { border-color: rgba(238, 183, 84, .38); box-shadow: inset 0 2px rgba(238, 183, 84, .45); }
.equipment-inspector.rarity-4 { border-color: rgba(180, 112, 255, .36); box-shadow: inset 0 2px rgba(180, 112, 255, .42); }
.equipment-inspector.rarity-3 { border-color: rgba(100, 181, 218, .32); box-shadow: inset 0 2px rgba(100, 181, 218, .38); }
.equipment-inspector.rarity-2 { border-color: rgba(103, 181, 145, .3); box-shadow: inset 0 2px rgba(103, 181, 145, .36); }
.equipment-inspector.rarity-1 { border-color: rgba(157, 166, 184, .28); box-shadow: inset 0 2px rgba(157, 166, 184, .34); }

/* The inspector host carries the selected item's rarity through the whole
   workbench.  Keep the dark end of each gradient in the same colour family so
   gold/purple/blue/green/neutral equipment never falls back to the old cyan
   wash while its attributes are being inspected. */
.equipment-inspector-host.rarity-5 { border-color: rgba(238, 183, 84, .64); background: linear-gradient(135deg, rgba(238, 183, 84, .34), rgba(190, 123, 44, .15) 42%, rgba(22, 18, 12, .95)); box-shadow: 0 12px 32px rgba(190, 123, 44, .08), inset 0 1px rgba(255, 217, 133, .28); }
.equipment-inspector-host.rarity-4 { border-color: rgba(180, 112, 255, .62); background: linear-gradient(135deg, rgba(180, 112, 255, .34), rgba(125, 48, 255, .14) 42%, rgba(13, 9, 24, .95)); box-shadow: 0 12px 32px rgba(125, 48, 255, .1), inset 0 1px rgba(228, 177, 255, .24); }
.equipment-inspector-host.rarity-3 { border-color: rgba(100, 181, 218, .56); background: linear-gradient(135deg, rgba(100, 181, 218, .3), rgba(37, 71, 95, .16) 42%, rgba(8, 16, 22, .95)); box-shadow: 0 12px 32px rgba(37, 71, 95, .1), inset 0 1px rgba(155, 226, 255, .2); }
.equipment-inspector-host.rarity-2 { border-color: rgba(103, 181, 145, .54); background: linear-gradient(135deg, rgba(103, 181, 145, .28), rgba(80, 110, 106, .14) 42%, rgba(8, 18, 16, .95)); box-shadow: 0 12px 32px rgba(80, 110, 106, .1), inset 0 1px rgba(166, 241, 202, .2); }
.equipment-inspector-host.rarity-1 { border-color: rgba(157, 166, 184, .5); background: linear-gradient(135deg, rgba(157, 166, 184, .25), rgba(95, 99, 108, .12) 42%, rgba(12, 14, 19, .95)); box-shadow: 0 12px 32px rgba(95, 99, 108, .1), inset 0 1px rgba(216, 222, 236, .18); }

/* Hover previews use the same rarity palette as the selected inspector. */
button.equipment-card.rarity-5:hover { border-color: #eeb754; background: linear-gradient(115deg, rgba(190, 123, 44, .28), rgba(22, 18, 12, .94) 62%); box-shadow: inset 3px 0 #eeb754, 0 0 0 1px rgba(238, 183, 84, .1); }
button.equipment-card.rarity-4:hover { border-color: #b470ff; background: linear-gradient(115deg, rgba(125, 48, 255, .24), rgba(13, 9, 24, .94) 62%); box-shadow: inset 3px 0 #b470ff, 0 0 0 1px rgba(180, 112, 255, .1); }
button.equipment-card.rarity-3:hover { border-color: #64b5da; background: linear-gradient(115deg, rgba(37, 71, 95, .29), rgba(8, 16, 22, .94) 62%); box-shadow: inset 3px 0 #64b5da, 0 0 0 1px rgba(100, 181, 218, .08); }
button.equipment-card.rarity-2:hover { border-color: #67b591; background: linear-gradient(115deg, rgba(80, 110, 106, .27), rgba(8, 18, 16, .94) 62%); box-shadow: inset 3px 0 #67b591, 0 0 0 1px rgba(103, 181, 145, .08); }
button.equipment-card.rarity-1:hover { border-color: #9da6b8; background: linear-gradient(115deg, rgba(95, 99, 108, .25), rgba(12, 14, 19, .94) 62%); box-shadow: inset 3px 0 #9da6b8, 0 0 0 1px rgba(157, 166, 184, .08); }

/* Tea leaderboard reset cadence and rewards. */
.tea-reset-notice {
  display: grid;
  grid-template-columns: 38px minmax(190px, .72fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 0 24px 22px;
  border: 1px solid rgba(180, 112, 255, .24);
  border-left: 3px solid #b470ff;
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(125, 48, 255, .1), rgba(84, 216, 220, .045) 50%, rgba(7, 11, 17, .48));
}
.tea-reset-notice[hidden] { display: none; }
.tea-reset-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(180, 112, 255, .32); border-radius: 50%; color: #c49aff; background: rgba(180, 112, 255, .08); }
.tea-reset-mark svg { width: 19px; height: 19px; }
.tea-reset-mark path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tea-reset-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.tea-reset-copy > span { color: var(--muted-2); font-size: 10px; letter-spacing: .12em; }
.tea-reset-copy strong { color: var(--text); font-size: 13px; font-weight: 500; }
.tea-reset-copy strong b { color: var(--accent); font: 500 22px/1 var(--display); }
.tea-reset-rewards { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding-left: 16px; border-left: 1px solid rgba(157, 176, 201, .14); color: var(--muted); font-size: 11px; line-height: 1.5; }
.tea-reset-rewards b { color: #c49aff; font-weight: 700; }

/* Independent dossier colour scopes ----------------------------------------
   Structural rules may be shared above, but business colours live inside
   their own blocks. Changing one section can no longer recolour another. */
.player-drawer { border-left-color: rgba(163, 180, 199, .48); }

body .drawer-content.dossier-content > .dossier-block.dossier-rank-block {
  --rank-accent: #bfd57b;
  --rank-text: #d3dfcf;
  --rank-line: rgba(172, 192, 126, .32);
  border-color: rgba(172, 192, 126, .24);
  border-top-color: rgba(197, 221, 121, .58);
  background: linear-gradient(145deg, rgba(50, 62, 38, .56), rgba(18, 25, 27, .86) 42%, #080d13 100%);
}
body .dossier-rank-block .dossier-section-title { color: var(--rank-text); }
body .dossier-rank-block .dossier-stats { border-color: var(--rank-line); background: var(--rank-line); }
body .dossier-rank-block .dossier-stat,
body .dossier-rank-block .dossier-stat:nth-child(3n) { background: rgba(13, 21, 28, .9); }
body .dossier-rank-block .dossier-stat:hover { background: rgba(29, 39, 39, .9); }
body .dossier-rank-block .metric-icon { border-color: rgba(191, 213, 123, .3); color: var(--rank-accent); background: rgba(93, 111, 62, .12); }
body .dossier-rank-block .dossier-stat-copy b { color: var(--rank-text); }
body .dossier-content .dossier-rank-block .dossier-stat:nth-child(3n) .dossier-stat-copy b { color: var(--rank-text); }

body .drawer-content.dossier-content > .dossier-block.dossier-mode-block {
  --mode-accent: #d0b782;
  --mode-text: #ddd3c2;
  --mode-line: rgba(187, 158, 109, .3);
  border-color: rgba(187, 158, 109, .22);
  border-top-color: rgba(206, 177, 123, .56);
  background: linear-gradient(145deg, rgba(64, 52, 36, .5), rgba(25, 25, 25, .84) 44%, #080d13 100%);
}
body .dossier-mode-block .dossier-section-title { color: var(--mode-text); }
body .dossier-mode-block .dossier-info-grid { border-color: var(--mode-line); background: var(--mode-line); }
body .dossier-mode-block .dossier-info-item,
body .dossier-mode-block .dossier-info-item:nth-child(3n) { background: rgba(15, 22, 29, .9); }
body .dossier-mode-block .dossier-info-item:hover { background: rgba(38, 35, 31, .9); }
body .dossier-mode-block .metric-icon { border-color: rgba(208, 183, 130, .3); color: var(--mode-accent); background: rgba(112, 88, 51, .12); }
body .dossier-mode-block .dossier-info-copy strong { color: var(--mode-text); }
body .dossier-mode-block .dossier-progress-bar i { background: linear-gradient(90deg, rgba(206, 177, 123, .55), var(--mode-accent)); }
body .dossier-mode-block .dossier-progress small { color: var(--mode-accent); }

/* Only the equipment scope is rarity-driven. The active card controls these
   low-saturation ambient colours; card artwork and star colours stay intact. */
body .drawer-content.dossier-content > .dossier-block.dossier-equipment-block {
  --equipment-accent: #9da6b8;
  --equipment-start: rgba(48, 55, 64, .44);
  --equipment-mid: rgba(29, 38, 48, .42);
  --equipment-line: rgba(165, 174, 185, .4);
  border-color: var(--equipment-line);
  border-top-color: var(--equipment-line);
  background: linear-gradient(145deg, var(--equipment-start), var(--equipment-mid) 48%, #080d13 100%);
  transition: border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
body .drawer-content.dossier-content > .dossier-block.dossier-equipment-block.rarity-5 { --equipment-accent: #eeb754; --equipment-start: rgba(82, 62, 35, .5); --equipment-mid: rgba(49, 39, 27, .38); --equipment-line: rgba(238, 183, 84, .5); }
body .drawer-content.dossier-content > .dossier-block.dossier-equipment-block.rarity-4 { --equipment-accent: #b470ff; --equipment-start: rgba(63, 49, 74, .46); --equipment-mid: rgba(43, 34, 53, .36); --equipment-line: rgba(180, 112, 255, .46); }
body .drawer-content.dossier-content > .dossier-block.dossier-equipment-block.rarity-3 { --equipment-accent: #64b5da; --equipment-start: rgba(36, 56, 69, .48); --equipment-mid: rgba(27, 43, 53, .36); --equipment-line: rgba(100, 181, 218, .44); }
body .drawer-content.dossier-content > .dossier-block.dossier-equipment-block.rarity-2 { --equipment-accent: #67b591; --equipment-start: rgba(38, 60, 52, .44); --equipment-mid: rgba(28, 45, 40, .34); --equipment-line: rgba(103, 181, 145, .42); }
body .drawer-content.dossier-content > .dossier-block.dossier-equipment-block.rarity-1 { --equipment-accent: #9da6b8; --equipment-start: rgba(48, 55, 64, .44); --equipment-mid: rgba(35, 42, 51, .34); --equipment-line: rgba(157, 166, 184, .4); }
body .dossier-equipment-block .dossier-section-title { color: #d2d8df; }
body .dossier-equipment-block .dossier-section-title::before { background: var(--equipment-accent); box-shadow: 0 0 10px var(--equipment-line); }
body .dossier-equipment-block .equipment-inspector-host,
body .dossier-equipment-block .equipment-inspector-host[class*="rarity-"] {
  border-color: var(--equipment-line);
  background: linear-gradient(135deg, var(--equipment-start), rgba(18, 25, 34, .9) 52%, rgba(7, 11, 17, .98));
  box-shadow: inset 0 1px var(--equipment-line), 0 12px 32px rgba(0, 0, 0, .18);
}
body .dossier-equipment-block .equipment-radar > strong,
body .dossier-equipment-block .equipment-totals > strong,
body .dossier-equipment-block .equipment-props-group-title { color: var(--equipment-accent); }
body .dossier-equipment-block .equipment-prop b { color: var(--equipment-accent); }
body .dossier-equipment-block .radar-value { fill: var(--equipment-mid); stroke: var(--equipment-accent); }
body .dossier-equipment-block .radar-dot { fill: var(--equipment-accent); filter: drop-shadow(0 0 4px var(--equipment-line)); }
body .dossier-equipment-block .equipment-props-tree::before { background: linear-gradient(to bottom, var(--equipment-line), var(--equipment-accent)); }
body .dossier-equipment-block .equipment-props-group::before,
body .dossier-equipment-block .equipment-props-group.is-secondary::before,
body .dossier-equipment-block .equipment-prop::before { border-top-color: var(--equipment-line); }
body .dossier-equipment-block .equipment-prop::after,
body .dossier-equipment-block .equipment-prop.is-primary::after {
  border-color: var(--equipment-accent);
  box-shadow: 0 0 6px var(--equipment-line);
}
body .dossier-equipment-block .equipment-prop.is-primary {
  border-color: var(--equipment-line);
  background: var(--equipment-mid);
}

/* Red-tea equipment workspace ---------------------------------------------
   The module stays in the dossier's eight-column main rail. Its previous
   three-wide inspector is reorganised into a switcher, a two-column detail
   layer and a full-width total-attribute layer, so every data group remains
   readable without borrowing width from the live-feed rail. */
body .dossier-equipment-block { overflow: hidden; }
body .dossier-equipment-block .equipment-workbench {
  display: grid;
  gap: 12px;
  min-width: 0;
}
body .dossier-equipment-block .equipment-switcher {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(157, 176, 201, .14);
  border-radius: 8px;
  background: rgba(7, 11, 17, .45);
}
body .dossier-equipment-block .equipment-switcher-head,
body .dossier-equipment-block .equipment-totals-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body .dossier-equipment-block .equipment-switcher-head { margin-bottom: 10px; }
body .dossier-equipment-block .equipment-switcher-head strong,
body .dossier-equipment-block .equipment-totals-head strong {
  color: var(--equipment-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}
body .dossier-equipment-block .equipment-switcher-head span,
body .dossier-equipment-block .equipment-totals-head small {
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}
body .dossier-equipment-block .equipment-switcher > .dossier-equipment-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body .dossier-content .dossier-equipment-block .equipment-card {
  min-width: 0;
  min-height: 64px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  overflow: hidden;
  border-radius: 6px;
}
body .dossier-content .dossier-equipment-block .equipment-card .asset-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
}
body .dossier-content .dossier-equipment-block .equipment-card .asset-copy strong {
  display: block;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .dossier-content .dossier-equipment-block .equipment-card .asset-copy small {
  margin-top: 4px;
  font-size: 11px;
}
body .dossier-equipment-block .equipment-card-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 7px;
}
body .dossier-equipment-block .equipment-card-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .dossier-equipment-block .equipment-inspector-host,
body .dossier-equipment-block .equipment-inspector-host[class*="rarity-"] {
  padding: 0;
  overflow: hidden;
  border-radius: 9px;
}
body .dossier-equipment-block .equipment-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(245px, .88fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(7, 11, 17, .34);
}
body .dossier-equipment-block .equipment-selected {
  display: grid;
  grid-column: 1 / -1;
  grid-row: auto;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(157, 176, 201, .15);
}
body .dossier-equipment-block .equipment-selected-image.asset-icon {
  flex-basis: 78px !important;
  width: 78px !important;
  height: 78px !important;
  border-color: var(--equipment-line);
  border-radius: 8px;
}
body .dossier-equipment-block .equipment-selected-copy { min-width: 0; }
body .dossier-equipment-block .equipment-selected-copy > strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font: 500 clamp(21px, 2vw, 27px)/1.16 var(--display);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .dossier-equipment-block .equipment-selected-copy .equipment-selected-slot {
  display: block;
  margin: 0 0 5px;
  color: var(--equipment-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}
body .dossier-equipment-block .equipment-selected-copy .equipment-selected-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
body .dossier-equipment-block .equipment-selected-copy .equipment-selected-meta > span { margin: 0; }
body .dossier-equipment-block .equipment-selected-state {
  justify-self: end;
  padding: 6px 9px;
  border: 1px solid var(--equipment-line);
  border-radius: 4px;
  color: var(--equipment-accent);
  background: var(--equipment-mid);
  font-size: 12px;
  white-space: nowrap;
}
body .dossier-equipment-block .equipment-props {
  display: block;
  grid-column: 1;
  grid-row: auto;
  min-width: 0;
  padding: 17px 18px 19px;
  border-right: 1px solid rgba(157, 176, 201, .15);
}
body .dossier-equipment-block .equipment-props-tree {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 0;
}
body .dossier-equipment-block .equipment-props-tree::before,
body .dossier-equipment-block .equipment-props-group::before,
body .dossier-equipment-block .equipment-prop-list::before,
body .dossier-equipment-block .equipment-prop::before,
body .dossier-equipment-block .equipment-prop::after { display: none; }
body .dossier-equipment-block .equipment-props-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}
body .dossier-equipment-block .equipment-props-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--equipment-accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
}
body .dossier-equipment-block .equipment-props-group-title::before {
  width: 12px;
  border-top: 1px solid currentColor;
  content: '';
}
body .dossier-equipment-block .equipment-prop-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 0;
}
body .dossier-equipment-block .equipment-props-group.is-secondary .equipment-prop-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body .dossier-equipment-block .equipment-prop {
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 5px;
  background: rgba(9, 14, 21, .62);
}
body .dossier-equipment-block .equipment-prop.is-primary {
  min-height: 58px;
  padding: 12px 14px;
  background: linear-gradient(100deg, var(--equipment-mid), rgba(13, 19, 29, .7));
}
body .dossier-equipment-block .equipment-prop span {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .dossier-equipment-block .equipment-prop b {
  flex: 0 0 auto;
  font: 650 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
body .dossier-equipment-block .equipment-prop.is-primary b { font-size: 22px; }
body .dossier-equipment-block .equipment-prop-empty {
  display: block;
  grid-column: 1 / -1;
  padding: 10px 11px;
  border: 1px dashed rgba(157, 176, 201, .16);
  border-radius: 5px;
  color: var(--muted-2);
  font-size: 12px;
}
body .dossier-equipment-block .equipment-radar {
  display: flex;
  grid-column: 2;
  grid-row: auto;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 17px 14px 13px;
  border: 0;
}
body .dossier-equipment-block .equipment-radar > strong {
  align-self: stretch;
  color: var(--equipment-accent);
  font-size: 12px;
  letter-spacing: .12em;
}
body .dossier-equipment-block .equipment-radar svg {
  display: block;
  width: min(100%, 290px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
}
body .dossier-equipment-block .radar-grid {
  fill: rgba(84, 216, 220, .012);
  stroke: rgba(157, 176, 201, .24);
  stroke-width: 1;
}
body .dossier-equipment-block .radar-axis {
  stroke: rgba(157, 176, 201, .2);
  stroke-width: 1;
}
body .dossier-equipment-block .radar-label {
  fill: var(--text);
  font: 600 12px/1 var(--body);
}
body .dossier-equipment-block .equipment-radar-caption {
  margin-top: -4px;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
body .dossier-equipment-block .equipment-totals {
  display: block;
  grid-column: 1 / -1;
  grid-row: auto;
  min-width: 0;
  padding: 15px 18px 18px;
  border-top: 1px solid rgba(157, 176, 201, .15);
  background: rgba(6, 10, 16, .2);
}
body .dossier-equipment-block .equipment-totals-head { margin-bottom: 9px; }
body .dossier-equipment-block .equipment-totals-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}
body .dossier-equipment-block .equipment-totals > .equipment-totals-head,
body .dossier-equipment-block .equipment-totals > .equipment-totals-grid {
  padding: 0;
  background: transparent;
}
body .dossier-equipment-block .equipment-total-item {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(157, 176, 201, .12);
  border-radius: 4px;
  background: rgba(13, 19, 29, .68);
}
body .dossier-equipment-block .equipment-total-item span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .dossier-equipment-block .equipment-total-item b {
  flex: 0 0 auto;
  color: var(--text);
  font: 650 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 760px) {
  body .dossier-equipment-block .equipment-switcher,
  body .dossier-equipment-block .equipment-selected,
  body .dossier-equipment-block .equipment-props,
  body .dossier-equipment-block .equipment-radar,
  body .dossier-equipment-block .equipment-totals { padding-right: 13px; padding-left: 13px; }
  body .dossier-equipment-block .equipment-switcher > .dossier-equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .dossier-equipment-block .equipment-inspector { grid-template-columns: minmax(0, 1fr); }
  body .dossier-equipment-block .equipment-props,
  body .dossier-equipment-block .equipment-radar { grid-column: 1; }
  body .dossier-equipment-block .equipment-props { border-right: 0; border-bottom: 1px solid rgba(157, 176, 201, .15); }
  body .dossier-equipment-block .equipment-radar svg { width: min(76vw, 285px); }
  body .dossier-equipment-block .equipment-totals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  body .dossier-equipment-block .equipment-switcher-head,
  body .dossier-equipment-block .equipment-totals-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  body .dossier-equipment-block .equipment-switcher-head span,
  body .dossier-equipment-block .equipment-totals-head small { text-align: left; }
  body .dossier-equipment-block .equipment-switcher > .dossier-equipment-grid,
  body .dossier-equipment-block .equipment-props-group.is-secondary .equipment-prop-list { grid-template-columns: minmax(0, 1fr); }
  body .dossier-equipment-block .equipment-selected { grid-template-columns: 64px minmax(0, 1fr); gap: 11px; }
  body .dossier-equipment-block .equipment-selected-image.asset-icon { flex-basis: 64px !important; width: 64px !important; height: 64px !important; }
  body .dossier-equipment-block .equipment-selected-copy > strong { font-size: 20px; }
  body .dossier-equipment-block .equipment-selected-state { grid-column: 1 / -1; justify-self: start; }
}

/* Business-section title markers -------------------------------------------
   The shared title layout above intentionally owns only geometry.  Each
   business block supplies its own marker colour so a later section change
   cannot leak a cyan accent into another module. */
body .dossier-basic-block .dossier-section-title::before {
  background: #54d8dc;
  box-shadow: 0 0 10px rgba(84, 216, 220, .3);
}
body .dossier-rank-block .dossier-section-title::before {
  background: var(--rank-accent);
  box-shadow: 0 0 10px rgba(191, 213, 123, .22);
}
body .dossier-mode-block .dossier-section-title::before {
  background: var(--mode-accent);
  box-shadow: 0 0 10px rgba(208, 183, 130, .2);
}
body .dossier-deep-block {
  --deep-accent: #a58fff;
  --deep-text: #ded8ff;
  --deep-line: rgba(143, 126, 255, .34);
  --deep-cell: rgba(17, 18, 34, .9);
  --deep-cell-alt: rgba(42, 35, 70, .9);
}
body .dossier-deep-block .dossier-section-title { color: var(--deep-text); }
body .dossier-deep-block .dossier-section-title::before {
  background: var(--deep-accent);
  box-shadow: 0 0 10px rgba(165, 143, 255, .24);
}
body .dossier-deep-block .dossier-info-grid {
  border-color: var(--deep-line);
  background: var(--deep-line);
}
body .dossier-deep-block .dossier-info-item {
  background: var(--deep-cell);
}
body .dossier-deep-block .dossier-info-item:nth-child(3n) {
  background: var(--deep-cell);
}
body .dossier-deep-block .dossier-info-item:hover {
  background: var(--deep-cell-alt);
}
body .dossier-deep-block .metric-icon {
  border-color: rgba(165, 143, 255, .34);
  color: var(--deep-accent);
  background: rgba(101, 82, 171, .14);
}
body .dossier-deep-block .dossier-info-copy strong {
  color: var(--deep-text);
}
body .dossier-grindstone-summary-block {
  --grindstone-summary-accent: #73bfff;
  --grindstone-summary-text: #d8eaff;
  --grindstone-summary-line: rgba(95, 181, 255, .34);
  --grindstone-summary-cell: rgba(13, 24, 39, .9);
  --grindstone-summary-cell-alt: rgba(25, 52, 78, .9);
}
body .dossier-grindstone-summary-block .dossier-section-title {
  color: var(--grindstone-summary-text);
}
body .dossier-grindstone-summary-block .dossier-section-title::before {
  background: var(--grindstone-summary-accent);
  box-shadow: 0 0 10px rgba(115, 191, 255, .24);
}
body .dossier-grindstone-summary-block .dossier-info-grid {
  border-color: var(--grindstone-summary-line);
  background: var(--grindstone-summary-line);
}
body .dossier-grindstone-summary-block .dossier-info-item {
  background: var(--grindstone-summary-cell);
}
body .dossier-grindstone-summary-block .dossier-info-item:nth-child(3n) {
  background: var(--grindstone-summary-cell);
}
body .dossier-grindstone-summary-block .dossier-info-item:hover {
  background: var(--grindstone-summary-cell-alt);
}
body .dossier-grindstone-summary-block .metric-icon {
  border-color: rgba(115, 191, 255, .34);
  color: var(--grindstone-summary-accent);
  background: rgba(64, 124, 181, .14);
}
body .dossier-grindstone-summary-block .dossier-info-copy strong {
  color: var(--grindstone-summary-text);
}
body .dossier-grindstone-block .dossier-section-title::before {
  background: #7c97f0;
  box-shadow: 0 0 10px rgba(124, 151, 240, .24);
}
body .dossier-weapon-block .dossier-section-title::before {
  background: #54d8dc;
  box-shadow: 0 0 10px rgba(84, 216, 220, .3);
}
body .dossier-hc-block .dossier-section-title::before {
  background: #69bcc9;
  box-shadow: 0 0 10px rgba(105, 188, 201, .24);
}
body .dossier-collection-block .dossier-section-title::before {
  background: #ba7bff;
  box-shadow: 0 0 10px rgba(186, 123, 255, .24);
}
body .dossier-compact-block .dossier-section-title::before {
  background: #88a0e6;
  box-shadow: 0 0 10px rgba(136, 160, 230, .24);
}
/* Mix multikill ------------------------------------------------------------
   The legacy profile exposed fourteen buckets (2–15 kills).  Keep the same
   one-glance horizontal read on desktop while giving this module its own
   restrained amber scope, independent from averages and grindstone data. */
body .drawer-content.dossier-content > .dossier-block.dossier-multikill-block {
  --multikill-accent: #d9ad5b;
  --multikill-text: #ead9b8;
  --multikill-line: rgba(217, 173, 91, .28);
  border-color: rgba(217, 173, 91, .2);
  border-top-color: rgba(217, 173, 91, .64);
  background: linear-gradient(145deg, rgba(62, 47, 27, .5), rgba(24, 24, 24, .84) 44%, #080d13 100%);
}
body .dossier-multikill-block .dossier-section-title { color: var(--multikill-text); }
body .dossier-multikill-block .dossier-section-title::before {
  background: var(--multikill-accent);
  box-shadow: 0 0 10px rgba(217, 173, 91, .22);
}
.dossier-multikill-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--multikill-line);
  background: var(--multikill-line);
}
.dossier-multikill-cell {
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-rows: auto 1fr;
  background: rgba(13, 19, 27, .92);
  text-align: center;
}
.dossier-multikill-cell span {
  padding: 10px 5px 8px;
  border-bottom: 1px solid rgba(217, 173, 91, .12);
  color: #a99b83;
  font-size: 12px;
  white-space: nowrap;
}
.dossier-multikill-cell strong {
  display: grid;
  min-width: 0;
  padding: 10px 4px;
  place-items: center;
  overflow: hidden;
  color: var(--multikill-accent);
  font: 600 17px/1 var(--display);
  text-overflow: ellipsis;
}
.dossier-multikill-cell:hover { background: rgba(55, 42, 26, .88); }

@media (min-width: 1021px) {
  body .drawer-content.dossier-content > .dossier-multikill-block { grid-column: 1 / span 8; }
}

@media (max-width: 760px) {
  .mode-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared combat record -----------------------------------------------------
   Mix, deathmatch and Warcraft use the same objective schema. The upper
   field prioritises kills/KD; the lower field separates CT and T objectives
   and visualises rank position (first = 100%, last = 0%). */
body .drawer-content.dossier-content > .dossier-block.dossier-combat-record-block {
  --combat-accent: #bfd57b;
  --combat-text: #dbe5d3;
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(172, 192, 126, .24);
  border-top-color: rgba(197, 221, 121, .58);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(50, 62, 38, .5), rgba(18, 25, 27, .9) 40%, #080d13 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .12);
}
body .dossier-combat-record-block::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #3d9be9, var(--combat-accent) 48% 52%, #e34b55);
  content: '';
  pointer-events: none;
}
body .dossier-combat-record-block .dossier-section-title {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 9px;
  padding: 0 0 10px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(172, 192, 126, .16);
  color: var(--combat-text);
}
body .dossier-combat-record-block .dossier-section-title::before {
  background: var(--combat-accent);
  box-shadow: 0 0 10px rgba(191, 213, 123, .24);
}
.dossier-combat-mode-badge {
  padding: 3px 7px;
  border: 1px solid rgba(191, 213, 123, .24);
  border-radius: 999px;
  color: #9cac83;
  background: rgba(191, 213, 123, .055);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
}
.dossier-combat-record { min-width: 0; }
.dossier-combat-score {
  display: flex;
  min-height: 38px;
  margin-left: auto;
  align-items: center;
  gap: 9px;
  color: var(--combat-accent);
  letter-spacing: normal;
  text-align: right;
}
.dossier-combat-score .metric-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-color: rgba(191, 213, 123, .3);
  color: var(--combat-accent);
  background: rgba(191, 213, 123, .08);
}
.dossier-combat-score > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.dossier-combat-score small { color: #839169; font-size: 9px; letter-spacing: .09em; }
.dossier-combat-score strong { color: #dfebb8; font: 600 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-combat-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}
.dossier-combat-metric {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(172, 192, 126, .14);
  border-radius: 6px;
  background: rgba(8, 15, 21, .7);
}
.dossier-combat-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dossier-combat-metric .metric-icon {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
  border-color: rgba(191, 213, 123, .25);
  color: #adbf74;
  background: rgba(93, 111, 62, .1);
}
.dossier-combat-metric-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.dossier-combat-metric-copy strong {
  overflow: hidden;
  color: #d3dfcf;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 20px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.dossier-combat-metric-copy small { color: var(--muted); font-size: 11px; }
.dossier-combat-metric.is-hero {
  min-height: 88px;
  border-color: rgba(197, 221, 121, .3);
  background: linear-gradient(135deg, rgba(116, 137, 67, .18), rgba(8, 15, 21, .76));
}
.dossier-combat-metric.is-hero .metric-icon { flex-basis: 39px; width: 39px; height: 39px; color: #cae077; }
.dossier-combat-metric.is-hero .dossier-combat-metric-copy strong { color: #e2edc1; font-size: clamp(28px, 2vw, 38px); }
.dossier-combat-metric.is-major .dossier-combat-metric-copy strong { font-size: 24px; }
.dossier-combat-objectives {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(172, 192, 126, .16);
}
.dossier-combat-objective {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(146, 164, 181, .17);
  border-radius: 7px;
  background: rgba(8, 14, 21, .8);
}
.dossier-combat-objective.is-defuse { --objective-color: #58aef2; border-top-color: rgba(61, 155, 233, .58); background: linear-gradient(145deg, rgba(61, 155, 233, .1), rgba(8, 14, 21, .88) 50%); }
.dossier-combat-objective.is-plant { --objective-color: #ee626b; border-top-color: rgba(227, 75, 85, .58); background: linear-gradient(215deg, rgba(227, 75, 85, .1), rgba(8, 14, 21, .88) 50%); }
.dossier-combat-objective-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(146, 164, 181, .13);
}
.dossier-combat-objective-heading strong { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--objective-color); font-size: 13px; }
.dossier-combat-objective-heading .metric-icon { flex-basis: 27px; width: 27px; height: 27px; border-color: color-mix(in srgb, var(--objective-color) 35%, transparent); color: var(--objective-color); background: rgba(8, 14, 21, .35); }
.dossier-combat-objective-heading > span { overflow: hidden; color: var(--muted-2); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; letter-spacing: .09em; }
.dossier-combat-objective-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 10px 0; background: rgba(146, 164, 181, .13); }
.dossier-combat-objective-counts > span { display: flex; min-width: 0; min-height: 55px; flex-direction: column; justify-content: center; gap: 4px; padding: 8px 10px; background: rgba(8, 14, 21, .94); }
.dossier-combat-objective-counts small { color: var(--muted); font-size: 10px; }
.dossier-combat-objective-counts strong { color: #dbe4e8; font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-combat-objective-ranking { min-width: 0; padding: 9px 10px 8px; border: 1px solid rgba(146, 164, 181, .13); border-radius: 5px; background: rgba(5, 10, 16, .5); }
.dossier-combat-objective-ranking > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dossier-combat-objective-ranking > div:first-child span { min-width: 0; color: #b9c4cb; font-size: 10px; }
.dossier-combat-objective-ranking > div:first-child strong { flex: 0 0 auto; color: var(--objective-color); font: 600 12px/1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-combat-rank-track { display: block; height: 7px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: rgba(146, 164, 181, .12); }
.dossier-combat-rank-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--objective-color) 55%, transparent), var(--objective-color)); box-shadow: 0 0 10px color-mix(in srgb, var(--objective-color) 25%, transparent); }
.dossier-combat-objective-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; }
.dossier-combat-objective-meta small { color: var(--muted-2); font-size: 8px; }
.dossier-combat-objective-meta small:first-child { color: var(--objective-color); }

@media (min-width: 1021px) {
  .dossier-content > .dossier-combat-record-block { grid-column: 1 / span 8; grid-row: 2; align-self: start; min-width: 0; margin-top: 0; }
  .dossier-combat-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dossier-combat-metric.is-hero { grid-column: span 3; }
  .dossier-combat-metric.is-major,
  .dossier-combat-metric.is-minor { grid-column: span 2; }
  .dossier-combat-metric:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 1280px) {
  .dossier-combat-metrics { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .dossier-combat-metric.is-hero { grid-column: span 3; }
  .dossier-combat-metric.is-major,
  .dossier-combat-metric.is-minor,
  .dossier-combat-metric:last-child:nth-child(odd) { grid-column: span 2; }
  .dossier-combat-metric:nth-child(5) .dossier-combat-metric-copy strong { font-size: 18px; }
}
@media (max-width: 620px) {
  .dossier-combat-objectives { grid-template-columns: 1fr; }
  .dossier-combat-score .metric-icon { display: none; }
  .dossier-combat-score strong { font-size: 24px; }
  .dossier-combat-objective-heading > span { display: none; }
}

/* Zombie faction record -----------------------------------------------------
   This component belongs to the zombie data domain rather than the shared
   combat rank grid.  It intentionally uses only the common zombie summary
   fields so future zombie servers can reuse the same renderer. */
body .drawer-content.dossier-content > .dossier-block.dossier-zombie-faction-block {
  --zombie-faction-human: var(--team-ct);
  --zombie-faction-zombie: var(--team-t);
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(146, 164, 181, .24);
  border-top-color: rgba(146, 164, 181, .28);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(20, 31, 41, .92), rgba(8, 13, 19, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .12);
}
body .dossier-zombie-faction-block::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--zombie-faction-human) 0 48%, rgba(146, 164, 181, .24) 50%, var(--zombie-faction-zombie) 52% 100%);
  content: '';
  pointer-events: none;
}
body .dossier-zombie-faction-block .dossier-section-title {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(157, 176, 201, .14);
  color: #d9e3e8;
}
body .dossier-zombie-faction-block .dossier-section-title::before {
  background: linear-gradient(to bottom, var(--zombie-faction-human), var(--zombie-faction-zombie));
  box-shadow: 0 0 10px rgba(115, 142, 188, .26);
}
.dossier-zombie-faction-record { min-width: 0; }
.dossier-zombie-score {
  display: flex;
  min-height: 38px;
  margin-left: auto;
  align-items: center;
  gap: 9px;
  color: #c7df7a;
  letter-spacing: normal;
  text-align: right;
}
.dossier-zombie-score .metric-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-color: rgba(199, 223, 122, .3);
  color: #c7df7a;
  background: rgba(199, 223, 122, .08);
}
.dossier-zombie-score > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.dossier-zombie-score small { color: #809068; font-size: 9px; letter-spacing: .09em; }
.dossier-zombie-score strong { color: #dbe9b1; font: 600 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-zombie-factions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}
.dossier-zombie-faction {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  padding: 14px;
  border: 1px solid rgba(146, 164, 181, .16);
  border-radius: 8px;
  background: rgba(9, 15, 22, .82);
}
.dossier-zombie-faction.is-human {
  border-top-color: rgba(61, 155, 233, .58);
  background: linear-gradient(145deg, rgba(61, 155, 233, .1), rgba(13, 19, 29, .9) 46%, rgba(7, 12, 18, .96));
}
.dossier-zombie-faction.is-zombie {
  border-top-color: rgba(227, 75, 85, .58);
  background: linear-gradient(215deg, rgba(227, 75, 85, .1), rgba(13, 19, 29, .9) 46%, rgba(7, 12, 18, .96));
}
.dossier-zombie-faction-heading {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(146, 164, 181, .14);
}
.dossier-zombie-faction-name { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: 14px; }
.dossier-zombie-faction-name .metric-icon { flex-basis: 28px; width: 28px; height: 28px; }
.dossier-zombie-faction.is-human .dossier-zombie-faction-name { color: var(--zombie-faction-human); }
.dossier-zombie-faction.is-human .dossier-zombie-faction-name .metric-icon { border-color: rgba(61, 155, 233, .3); color: var(--zombie-faction-human); background: rgba(61, 155, 233, .08); }
.dossier-zombie-faction.is-zombie .dossier-zombie-faction-name { color: var(--zombie-faction-zombie); }
.dossier-zombie-faction.is-zombie .dossier-zombie-faction-name .metric-icon { border-color: rgba(227, 75, 85, .3); color: var(--zombie-faction-zombie); background: rgba(227, 75, 85, .08); }
.dossier-zombie-faction-code { flex: 0 0 auto; color: var(--muted-2); font-size: 9px; letter-spacing: .12em; }
.dossier-zombie-faction-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
  align-content: center;
  padding-top: 12px;
}
.dossier-zombie-faction.is-zombie .dossier-zombie-faction-metrics { align-content: start; }
.dossier-zombie-faction-metric {
  display: grid;
  min-width: 0;
  min-height: 54px;
  grid-template-columns: 3px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(146, 164, 181, .14);
  border-radius: 6px;
  background: rgba(7, 13, 19, .5);
  transition: border-color .16s ease, background .16s ease;
}
.dossier-zombie-faction-metric:hover { border-color: rgba(146, 164, 181, .25); background: rgba(22, 31, 41, .7); }
.dossier-zombie-faction-metric.is-missing { opacity: .72; }
.dossier-zombie-faction-metric-mark { display: block; width: 3px; height: 24px; border-radius: 3px; }
.dossier-zombie-faction.is-human .dossier-zombie-faction-metric-mark { background: var(--zombie-faction-human); }
.dossier-zombie-faction.is-zombie .dossier-zombie-faction-metric-mark { background: var(--zombie-faction-zombie); }
.dossier-zombie-faction-metric-copy { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 7px; }
.dossier-zombie-faction-metric-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dossier-zombie-faction-metric-copy strong { flex: 0 0 auto; color: #d9e3e8; font: 600 21px/1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-zombie-role-ratio {
  padding: 14px;
  margin-top: 14px;
  border-radius: 7px;
  background: rgba(10, 17, 24, .88);
}
.dossier-zombie-role-ratio-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 10px;
}
.dossier-zombie-role-ratio-side { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.dossier-zombie-role-ratio-side.is-nemesis { text-align: right; }
.dossier-zombie-role-ratio-side small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.dossier-zombie-role-ratio-side.is-nemesis small { justify-content: flex-end; }
.dossier-zombie-role-ratio-side small i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.dossier-zombie-role-ratio-side.is-survivor small i { background: var(--zombie-faction-human); }
.dossier-zombie-role-ratio-side.is-nemesis small i { background: var(--zombie-faction-zombie); }
.dossier-zombie-role-ratio-side strong { overflow: hidden; color: #d9e3e8; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dossier-zombie-role-ratio-title { color: var(--muted-2); font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.dossier-zombie-role-ratio-stack { height: 12px; border: 0; border-radius: 6px; }
.dossier-zombie-role-ratio.is-empty .dossier-zombie-role-ratio-stack { background: rgba(146, 164, 181, .1); }

@media (min-width: 1021px) {
  body .drawer-content.dossier-content.dossier-zombie > .dossier-zombie-faction-block {
    grid-column: 1 / span 8;
    grid-row: 2;
    align-self: start;
    min-height: 0;
    margin-top: 0;
  }
  .dossier-zombie-faction-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier-zombie-faction-metric { min-height: 58px; }
  .dossier-zombie-faction-metric-copy small { font-size: 11px; }
  .dossier-zombie-faction-metric-copy strong { font-size: 23px; }
}

@media (max-width: 560px) {
  .dossier-zombie-factions { grid-template-columns: 1fr; }
  .dossier-zombie-faction-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  .dossier-zombie-faction.is-zombie .dossier-zombie-faction-metrics { align-content: start; }
}

@media (max-width: 420px) {
  .dossier-zombie-role-ratio-heading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier-zombie-role-ratio-title { display: none; }
}

@media (max-width: 360px) {
  .dossier-zombie-faction-metrics { grid-template-columns: 1fr; }
}

/* Zombie red-packet record -------------------------------------------------
   The two zombie servers use separate Redis counters.  The restrained red
   and gold treatment distinguishes this business record without overpowering
   the faction dashboard around it. */
body .drawer-content.dossier-content > .dossier-block.dossier-red-packet-block {
  --packet-red: #e45b63;
  --packet-gold: #f0c66b;
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(228, 91, 99, .24);
  border-top-color: rgba(240, 198, 107, .62);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(72, 28, 31, .42), rgba(8, 13, 19, .96) 48%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 22px rgba(0, 0, 0, .12);
}
body .dossier-red-packet-block::after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--packet-red), var(--packet-gold));
  content: '';
  pointer-events: none;
}
body .dossier-red-packet-block .dossier-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(228, 91, 99, .14);
  color: #eadfe0;
}
body .dossier-red-packet-block .dossier-section-title::before {
  background: linear-gradient(to bottom, var(--packet-red), var(--packet-gold));
  box-shadow: 0 0 10px rgba(228, 91, 99, .3);
}
.dossier-red-packet-title-badge {
  padding: 4px 7px;
  margin-left: auto;
  border: 1px solid rgba(240, 198, 107, .24);
  border-radius: 4px;
  color: var(--packet-gold);
  background: rgba(240, 198, 107, .07);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
}
.dossier-red-packet { min-width: 0; }
.dossier-red-packet-primary {
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 16px;
  padding: 15px 17px;
  border: 1px solid rgba(228, 91, 99, .18);
  border-radius: 8px;
  background: rgba(7, 12, 18, .72);
}
.dossier-red-packet-icon {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(228, 91, 99, .3);
  border-radius: 14px;
  color: var(--packet-gold);
  background: linear-gradient(145deg, rgba(228, 91, 99, .15), rgba(240, 198, 107, .06));
}
.dossier-red-packet-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.dossier-red-packet-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.dossier-red-packet-copy > small { color: #aa898c; font-size: 10px; letter-spacing: .08em; }
.dossier-red-packet-copy > span { display: flex; align-items: baseline; gap: 6px; }
.dossier-red-packet-copy strong { color: #f2d7a0; font: 650 31px/1 var(--display); font-variant-numeric: tabular-nums; }
.dossier-red-packet-copy em { color: #aa898c; font-size: 11px; font-style: normal; }
.dossier-red-packet-note { margin: 10px 2px 0; color: #9b7377; font-size: 10px; }
.dossier-red-packet-empty { display: grid; min-height: 92px; place-items: center; margin: 0; border: 1px dashed rgba(228, 91, 99, .2); border-radius: 8px; color: #9b7377; background: rgba(7, 12, 18, .46); font-size: 11px; }

@media (min-width: 1021px) {
  body .drawer-content.dossier-content.dossier-zombie > .dossier-red-packet-block {
    grid-column: 1 / span 8;
    grid-row: 3;
    align-self: start;
    min-height: 0;
    margin-top: 0;
  }
}

@media (max-width: 420px) {
  body .drawer-content.dossier-content > .dossier-block.dossier-red-packet-block { padding: 14px; }
  .dossier-red-packet-primary { min-height: 82px; gap: 13px; padding: 13px; }
  .dossier-red-packet-icon { flex-basis: 46px; width: 46px; height: 46px; border-radius: 12px; }
  .dossier-red-packet-icon svg { width: 27px; height: 27px; }
  .dossier-red-packet-copy strong { font-size: 28px; }
}

/* Red Tea arena record ------------------------------------------------------
   The arena exists only on the Red Tea server. Challenger and target keep a
   stable left/right position while outcome styling makes the winner and loser
   readable without reordering the people between matches. */
body .drawer-content.dossier-content > .dossier-block.dossier-arena-block {
  --arena-gold: #d9ad6a;
  --arena-win: #c7df7a;
  --arena-loss: #e45b63;
  --arena-running: #54d8dc;
  position: relative;
  overflow: hidden;
  border-color: rgba(217, 173, 106, .22);
  border-top-color: rgba(217, 173, 106, .78);
  background: linear-gradient(145deg, rgba(54, 42, 24, .48), rgba(8, 13, 19, .96) 42%);
}
body .dossier-arena-block .dossier-section-title { flex-wrap: wrap; color: #d9e3e8; }
body .dossier-arena-block .dossier-section-title::before {
  background: var(--arena-gold);
  box-shadow: 0 0 10px rgba(217, 173, 106, .28);
}
.arena-title-summary {
  margin-left: auto;
  color: var(--arena-gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
}
.arena-scope {
  padding: 5px 8px;
  border: 1px solid rgba(217, 173, 106, .22);
  border-radius: 4px;
  color: var(--arena-gold);
  background: rgba(217, 173, 106, .07);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
}
.dossier-arena-record { min-width: 0; }
.arena-list {
  max-height: 560px;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(157, 176, 201, .13);
  border-radius: 7px;
  list-style: none;
  scrollbar-color: rgba(217, 173, 106, .35) transparent;
  scrollbar-width: thin;
}
.arena-match {
  display: grid;
  min-width: 0;
  min-height: 108px;
  grid-template-columns: minmax(0, 1fr) 154px minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid rgba(157, 176, 201, .13);
  background: rgba(7, 12, 18, .78);
}
.arena-match:last-child { border-bottom: 0; }
.arena-side {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
  padding: 17px 14px;
}
.arena-side.is-target { flex-direction: row-reverse; text-align: right; }
.arena-side.is-winner { background: linear-gradient(90deg, rgba(199, 223, 122, .1), transparent); }
.arena-side.is-target.is-winner { background: linear-gradient(270deg, rgba(199, 223, 122, .1), transparent); }
.arena-side.is-loser { background: linear-gradient(90deg, rgba(228, 91, 99, .075), transparent); }
.arena-side.is-target.is-loser { background: linear-gradient(270deg, rgba(228, 91, 99, .075), transparent); }
.arena-avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  border: 1px solid rgba(157, 176, 201, .2);
  border-radius: 50%;
  color: var(--muted);
  background: rgba(146, 164, 181, .08);
  font-size: 11px;
}
.arena-side.is-winner .arena-avatar { border-color: rgba(199, 223, 122, .4); color: var(--arena-win); }
.arena-side.is-loser .arena-avatar { opacity: .68; filter: saturate(.58); }
.arena-player { min-width: 0; }
.arena-side-label {
  display: block;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 9px;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arena-player-name {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #d9e3e8;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.arena-player-name:hover,
a.arena-player-name:focus-visible { color: var(--cyan); outline: none; text-decoration: underline; text-underline-offset: 3px; }
.arena-side.is-winner .arena-player-name { color: var(--arena-win); }
.arena-side.is-loser .arena-player-name { color: #8794a3; }
.arena-outcome {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
}
.arena-side.is-winner .arena-outcome { color: var(--arena-win); }
.arena-side.is-loser .arena-outcome { color: var(--arena-loss); }
.arena-side.is-draw .arena-outcome { color: var(--arena-gold); }
.arena-verdict {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 13px 8px;
  text-align: center;
}
.arena-verdict::before,
.arena-verdict::after {
  position: absolute;
  top: 15px;
  bottom: 15px;
  width: 1px;
  background: rgba(157, 176, 201, .14);
  content: '';
}
.arena-verdict::before { left: 0; }
.arena-verdict::after { right: 0; }
.arena-verdict-icon.metric-icon {
  width: 25px;
  height: 25px;
  flex-basis: 25px;
  border: 0;
  color: var(--arena-win);
  background: transparent;
}
.arena-verdict-symbol {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--arena-gold);
  font: 700 15px/1 var(--display);
}
.arena-verdict.is-running .arena-verdict-symbol { color: var(--arena-running); font-size: 11px; }
.arena-verdict.is-invalid .arena-verdict-symbol { color: #f0a067; }
.arena-verdict strong { color: #d9e3e8; font-size: 12px; font-weight: 600; }
.arena-verdict.is-running strong { color: var(--arena-running); }
.arena-verdict.is-draw strong { color: var(--arena-gold); }
.arena-verdict.is-invalid strong { color: #f0a067; }
.arena-pool { color: var(--arena-gold); font-size: 10px; font-weight: 600; }
.arena-verdict.is-running .arena-pool { color: var(--arena-running); }
.arena-verdict.is-invalid .arena-pool { color: #f0a067; }
.arena-meta { overflow: hidden; max-width: 100%; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.arena-empty-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(7, 12, 18, .82);
  isolation: isolate;
}
.arena-demo-list {
  pointer-events: none;
  user-select: none;
  filter: saturate(.36) brightness(.58) blur(.55px);
  opacity: .68;
}
.arena-demo-list .arena-match { position: relative; }
.arena-demo-list .arena-match::after {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 5px;
  border: 1px solid rgba(217, 173, 106, .22);
  border-radius: 3px;
  color: rgba(217, 173, 106, .7);
  background: rgba(7, 12, 18, .5);
  font-size: 7px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  content: '演示';
}
.arena-demo-avatar {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(217, 173, 106, .16), transparent 55%), #131c26;
  font-family: var(--display);
  font-weight: 700;
}
.arena-side.is-draw { background: linear-gradient(90deg, rgba(217, 173, 106, .06), transparent); }
.arena-side.is-target.is-draw { background: linear-gradient(270deg, rgba(217, 173, 106, .06), transparent); }
.arena-empty-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at center, rgba(8, 13, 19, .1) 0 21%, rgba(8, 13, 19, .42) 60%, rgba(8, 13, 19, .72) 100%), linear-gradient(90deg, rgba(8, 13, 19, .5), transparent 24%, transparent 76%, rgba(8, 13, 19, .5));
}
.arena-empty-card {
  position: relative;
  width: min(100%, 430px);
  padding: 28px 24px 25px;
  overflow: hidden;
  border: 1px solid rgba(217, 173, 106, .4);
  border-radius: 10px;
  background: linear-gradient(140deg, rgba(217, 173, 106, .11), transparent 40%), rgba(8, 13, 19, .91);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 255, 255, .035);
  text-align: center;
  backdrop-filter: blur(8px);
}
.arena-empty-card::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 112px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--arena-gold), transparent);
  box-shadow: 0 0 14px rgba(217, 173, 106, .55);
  content: '';
  transform: translateX(-50%);
}
.arena-lock {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 15px;
  place-items: center;
  border: 1px solid rgba(217, 173, 106, .38);
  border-radius: 50%;
  color: var(--arena-gold);
  background: rgba(217, 173, 106, .08);
  box-shadow: 0 0 24px rgba(217, 173, 106, .1);
}
.arena-lock svg { width: 23px; height: 23px; }
.arena-empty-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: rgba(217, 173, 106, .78);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .14em;
}
.arena-empty-title {
  display: block;
  color: #edf2f4;
  font-size: clamp(16px, 2.6vw, 20px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .02em;
}
.arena-empty-description {
  margin: 9px 0 0;
  color: rgba(217, 173, 106, .78);
  font-size: 11px;
  line-height: 1.65;
}

@media (prefers-reduced-transparency: reduce) {
  .arena-empty-card { backdrop-filter: none; background: #0a1017; }
}

@media (min-width: 1021px) {
  body .drawer-content.dossier-content.dossier-zombie > .dossier-arena-block {
    grid-column: 1 / span 8;
    grid-row: 4;
    align-self: start;
    min-height: 0;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  .arena-title-summary { width: 100%; margin-left: 12px; order: 3; }
  .arena-match { min-height: 120px; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); }
  .arena-side { align-items: flex-start; flex-direction: column; gap: 7px; padding: 14px 8px; }
  .arena-side.is-target { align-items: flex-end; flex-direction: column; }
  .arena-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .arena-player-name { font-size: 11px; }
  .arena-side-label,
  .arena-outcome { font-size: 8px; }
  .arena-verdict { padding-right: 4px; padding-left: 4px; }
  .arena-verdict strong { font-size: 10px; }
  .arena-pool { font-size: 8px; }
  .arena-meta { max-width: 76px; }
  .arena-empty-overlay { padding: 15px; }
  .arena-empty-card { width: min(100%, 330px); padding: 24px 15px 21px; }
  .arena-empty-title { max-width: 240px; margin-inline: auto; }
  .arena-empty-description { max-width: 250px; margin-inline: auto; margin-top: 8px; }
}

@media (max-width: 360px) {
  .arena-empty-overlay { padding: 10px; }
  .arena-empty-card { padding-inline: 11px; }
}

/* Realtime combat icon system ---------------------------------------------
   csd.otf glyphs have very different internal bounds. JavaScript measures
   each glyph's actual ink box and paints it into these fixed canvases, so an
   AWP, pistol, knife, custom weapon and infection claw share one baseline. */
.live-combat-event {
  --live-event-color: var(--danger);
  padding: 10px 0 10px 10px;
}
.live-combat-event.event-revenge { --live-event-color: var(--warning); }
.live-combat-event.is-headshot { --live-event-color: #d9ad6a; }
.live-combat-event.is-infection { --live-event-color: #ef5a64; }
.live-combat-event.is-environment { --live-event-color: #7f8b99; }
.live-combat-event::before {
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  height: auto;
  border-radius: 3px;
  background: var(--live-event-color);
  box-shadow: none;
}
.live-event-top {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: center;
  gap: 6px;
}
.live-event-flow {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(60px, 1fr) 92px 10px minmax(62px, 1fr);
  align-items: center;
  column-gap: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.player-live-feed .live-event-flow {
  grid-template-columns: minmax(58px, 1fr) 92px 8px minmax(58px, 1fr);
  font-size: 14px;
}
.live-event-flow .live-player,
.live-event-flow .live-source-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-event-flow .live-player:first-child,
.live-event-flow .live-source-label:first-child { text-align: right; }
.live-event-flow .live-player:last-child,
.live-event-flow .live-source-label:last-child { text-align: left; }
.live-event-flow button.live-player { cursor: pointer; }
.live-event-flow button.live-player:hover { text-decoration: underline; text-underline-offset: 3px; }
.live-event-flow button.live-player:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.live-event-flow .live-player.team-t { color: var(--team-t); }
.live-event-flow .live-player.team-ct { color: var(--team-ct); }
.live-event-flow .live-source-label { color: #7f8b99; font-size: 11px; font-weight: 500; }
.live-event-arrow { color: var(--muted-2); font-size: 11px; text-align: center; }
.live-event-top > .live-event-time {
  display: block;
  width: auto;
  margin: 0;
  overflow: hidden;
  color: var(--muted-2);
  font: 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-weapon-mark {
  position: relative;
  display: grid;
  width: 92px;
  height: 28px;
  grid-template-columns: 68px 24px;
  align-items: center;
  padding: 0;
  overflow: hidden;
  color: #aebbc7;
  background: transparent;
  transform: translateY(1px);
}
.live-weapon-mark::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 68px;
  border-radius: 4px;
  background: rgba(84, 216, 220, .055);
  content: '';
}
.live-weapon-mark.has-headshot::before { width: 92px; }
.live-weapon-mark.is-infection {
  color: #ef5a64;
}
.live-weapon-mark.is-infection::before { background: rgba(239, 90, 100, .13); }
.live-weapon-mark.is-environment { color: #7f8b99; }
.live-weapon-mark.is-environment::before { background: rgba(127, 139, 153, .065); }
.live-weapon-canvas,
.live-headshot-canvas {
  position: relative;
  z-index: 1;
  display: block;
}
.live-weapon-canvas { width: 68px; height: 28px; }
.live-headshot-canvas { width: 24px; height: 28px; color: #d9ad6a; }
.live-weapon-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  width: 68px;
  height: 28px;
  place-items: center;
  border: 1px dashed rgba(157, 176, 201, .3);
  border-radius: 4px;
  color: var(--muted);
  font: 700 13px/1 ui-monospace, Consolas, monospace;
}
.live-event-meta {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(60px, 1fr) 92px 10px minmax(62px, 1fr) 60px;
  column-gap: 5px;
  margin-top: 4px;
}
.player-live-feed .live-event-meta {
  grid-template-columns: minmax(58px, 1fr) 92px 8px minmax(58px, 1fr) 60px;
}
.live-event-meta-content {
  display: flex;
  min-width: 0;
  grid-column: 2 / 5;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: var(--muted-2);
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}
.live-event-meta-content > span { flex: 0 0 auto; }
.live-event-meta-content .live-event-role { color: #86c9cb; }
.live-event-meta-content .live-event-weapon-name { color: #aebbc7; }
.live-event-meta-content .live-event-headshot-label { color: #d9ad6a; }
.live-event-meta-content .live-event-infection-label { color: #ef5a64; }
.live-event-meta-dot { color: var(--muted-2); }

@media (min-width: 1021px) {
  .live-panel .live-event-flow { font-size: 13px; }
  .live-panel .live-event-top > .live-event-time { font-size: 10px; }
  .dossier-content .player-live-feed .live-event-top > .live-event-time { font-size: 11px; }
  .dossier-content .player-live-feed .live-event-meta-content { font-size: 11px; }
}

@media (max-width: 560px) {
  .live-event-top { grid-template-columns: minmax(0, 1fr) 46px; gap: 4px; }
  .live-event-flow,
  .player-live-feed .live-event-flow { grid-template-columns: minmax(68px, 1fr) 92px 8px minmax(68px, 1fr); column-gap: 3px; font-size: 11px; }
  .live-event-meta,
  .player-live-feed .live-event-meta { grid-template-columns: minmax(68px, 1fr) 92px 8px minmax(68px, 1fr) 50px; column-gap: 3px; }
  .live-event-meta-content { gap: 5px; font-size: 9px; }
}

/* Personal live-panel themes -----------------------------------------------
   Theme classes expose a small token contract for future modes. Event types
   and team names keep their own semantic --live-event-color / --team-* rules. */
.dossier-live-section {
  --personal-live-accent: #54d8dc;
  --personal-live-accent-2: #d7ff59;
  --personal-live-kicker: var(--muted-2);
  --personal-live-count: var(--cyan);
  --personal-live-status: var(--accent);
  --personal-live-border: rgba(84,216,220,.35);
  --personal-live-divider: rgba(157,176,201,.08);
  --personal-live-title: var(--text);
  --personal-live-muted: var(--muted-2);
  --personal-live-surface: linear-gradient(160deg,rgba(84,216,220,.12),rgba(13,19,29,.9) 48%,rgba(7,11,17,.98));
  --personal-live-topline: var(--cyan);
  --personal-live-glow: rgba(84,216,220,.045);
  --personal-live-row-hover: transparent;
  --personal-live-empty-marker: var(--muted-2);
  --personal-live-scroll-track: rgba(4,8,13,.46);
  --personal-live-scroll-color: rgba(121,157,166,.58);
  --personal-live-scroll-thumb: linear-gradient(180deg,rgba(84,216,220,.5),rgba(255,109,101,.38));
  --personal-live-scroll-thumb-hover: linear-gradient(180deg,rgba(84,216,220,.74),rgba(255,109,101,.62));
  --personal-live-scroll-thumb-active: rgba(255,109,101,.86);
}
.dossier-live-section.dossier-live-theme-tea {
  --personal-live-accent: #ff66c4;
  --personal-live-accent-2: #b7a7ff;
  --personal-live-kicker: #ff66c4;
  --personal-live-count: #ff8ed3;
  --personal-live-status: #b7a7ff;
  --personal-live-border: rgba(255,102,196,.42);
  --personal-live-divider: rgba(255,102,196,.18);
  --personal-live-title: #fff0fa;
  --personal-live-muted: #b6a2b8;
  --personal-live-surface: radial-gradient(circle at 92% 4%,rgba(183,167,255,.17),transparent 31%),linear-gradient(155deg,rgba(255,102,196,.16),rgba(35,14,32,.94) 48%,rgba(11,9,18,.99));
  --personal-live-topline: linear-gradient(90deg,#ff66c4,#b7a7ff,transparent 82%);
  --personal-live-glow: rgba(255,102,196,.08);
  --personal-live-row-hover: rgba(183,167,255,.055);
  --personal-live-empty-marker: #b7a7ff;
  --personal-live-scroll-track: rgba(13,6,15,.62);
  --personal-live-scroll-color: rgba(228,128,197,.76);
  --personal-live-scroll-thumb: linear-gradient(180deg,rgba(255,102,196,.74),rgba(183,167,255,.52));
  --personal-live-scroll-thumb-hover: linear-gradient(180deg,rgba(255,142,211,.92),rgba(183,167,255,.78));
  --personal-live-scroll-thumb-active: #b7a7ff;
}
.dossier-content > .dossier-live-section:not(.dossier-live-theme-default) {
  position: relative;
  border-color: var(--personal-live-border);
  border-top-color: transparent;
  background: var(--personal-live-surface);
  box-shadow: inset 0 0 0 1px var(--personal-live-glow),0 16px 36px rgba(0,0,0,.2);
}
.dossier-content > .dossier-live-section:not(.dossier-live-theme-default)::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--personal-live-topline);
  content: '';
  pointer-events: none;
}
.dossier-live-section .panel-title-row { position: relative; z-index: 1; }
.dossier-live-section .section-kicker { color: var(--personal-live-kicker); }
.dossier-live-section .panel-title-row h3 { color: var(--personal-live-title); }
.dossier-live-section .live-summary,
.dossier-live-section .live-event-time,
.dossier-live-section .live-event-meta-content,
.dossier-live-section .quiet-button { color: var(--personal-live-muted); }
.dossier-live-section .live-summary strong { color: var(--personal-live-count); }
.dossier-live-section .live-indicator { color: var(--personal-live-muted); }
.dossier-live-section .live-indicator i { background: var(--personal-live-status); box-shadow: 0 0 10px var(--personal-live-status); }
.dossier-live-section .live-indicator.is-offline i { background: var(--muted-2); box-shadow: none; }
.dossier-live-section .quiet-button:hover { color: var(--personal-live-accent); }
.dossier-live-section .live-event { border-bottom-color: var(--personal-live-divider); }
.dossier-live-section .live-event:hover { background: var(--personal-live-row-hover); }
.dossier-live-section .live-empty-event::before { background: var(--personal-live-empty-marker); box-shadow: 0 0 8px var(--personal-live-glow); }
.dossier-live-theme-tea .live-event-meta-content .live-event-role { color: #d0baf5; }
.dossier-live-theme-tea .live-event-meta-content .live-event-weapon-name { color: #c6b8c4; }
.dossier-content > .dossier-live-section .player-live-feed {
  scrollbar-color: var(--personal-live-scroll-color) var(--personal-live-scroll-track);
}

/* Dossier scrollbar system -------------------------------------------------
   The page and dossier use the same calm cyan navigation treatment.  The
   nested combat feed stays narrower and carries a restrained cyan/red cue. */
html,
.drawer-content.dossier-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(84, 216, 220, .48) rgba(4, 8, 13, .78);
}

.dossier-content > .dossier-live-section .player-live-feed {
  scrollbar-width: thin;
  scrollbar-color: var(--personal-live-scroll-color) var(--personal-live-scroll-track);
}

@media (hover: hover) and (pointer: fine) {
  @supports selector(::-webkit-scrollbar) {
    html,
    .drawer-content.dossier-content,
    .dossier-content > .dossier-live-section .player-live-feed {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }

    html::-webkit-scrollbar,
    .drawer-content.dossier-content::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    html::-webkit-scrollbar-track,
    .drawer-content.dossier-content::-webkit-scrollbar-track {
      border-left: 1px solid rgba(157, 176, 201, .08);
      background: rgba(4, 8, 13, .82);
    }

    html::-webkit-scrollbar-thumb,
    .drawer-content.dossier-content::-webkit-scrollbar-thumb {
      min-height: 48px;
      border: 3px solid transparent;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(84, 216, 220, .54), rgba(67, 111, 126, .58));
      background-clip: padding-box;
      box-shadow: inset 0 0 0 1px rgba(84, 216, 220, .14);
    }

    html::-webkit-scrollbar-thumb:hover,
    .drawer-content.dossier-content::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(84, 216, 220, .8), rgba(78, 139, 151, .76));
      background-clip: padding-box;
      box-shadow: inset 0 0 0 1px rgba(84, 216, 220, .3), 0 0 8px rgba(84, 216, 220, .12);
    }

    html::-webkit-scrollbar-thumb:active,
    .drawer-content.dossier-content::-webkit-scrollbar-thumb:active {
      background: rgba(84, 216, 220, .92);
      background-clip: padding-box;
      box-shadow: inset 0 0 0 1px rgba(233, 238, 245, .24);
    }

    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }

    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-track {
      border-radius: 999px;
      background: var(--personal-live-scroll-track);
    }

    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-thumb {
      min-height: 36px;
      border: 2px solid transparent;
      border-radius: 999px;
      background: var(--personal-live-scroll-thumb);
      background-clip: padding-box;
      box-shadow: inset 0 0 0 1px rgba(157, 176, 201, .12);
    }

    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-thumb:hover {
      background: var(--personal-live-scroll-thumb-hover);
      background-clip: padding-box;
      box-shadow: inset 0 0 0 1px rgba(233, 238, 245, .16);
    }

    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-thumb:active {
      background: var(--personal-live-scroll-thumb-active);
      background-clip: padding-box;
    }

    html::-webkit-scrollbar-corner,
    .drawer-content.dossier-content::-webkit-scrollbar-corner,
    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-corner {
      background: var(--bg);
    }

    html::-webkit-scrollbar-button,
    .drawer-content.dossier-content::-webkit-scrollbar-button,
    .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-button {
      display: none;
      width: 0;
      height: 0;
    }
  }
}

@media (pointer: coarse) {
  html,
  .drawer-content.dossier-content,
  .dossier-content > .dossier-live-section .player-live-feed {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
}

@media (forced-colors: active) {
  html,
  .drawer-content.dossier-content,
  .dossier-content > .dossier-live-section .player-live-feed {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  html::-webkit-scrollbar-track,
  .drawer-content.dossier-content::-webkit-scrollbar-track,
  .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-track {
    background: Canvas;
  }

  html::-webkit-scrollbar-thumb,
  .drawer-content.dossier-content::-webkit-scrollbar-thumb,
  .dossier-content > .dossier-live-section .player-live-feed::-webkit-scrollbar-thumb {
    border-color: Canvas;
    background: ButtonText;
    box-shadow: none;
  }
}