/* Match report - Leetify design system.
 *
 * Loaded only by templates/report_base.html, and every rule is scoped under
 * body.lt, so the rest of DotaLAN Stats keeps its own look.
 *
 * Tokens are named after Leetify's "Design System 2026" Figma variables:
 * surface levels, data tiers, brand pink. Radiant and Dire take the place
 * of League's blue and red sides in Leetify's LoL report.
 */

.lt {
  /* Surfaces (background/surface/level-1..7) */
  --s1: #19171e;
  --s2: #201e25;
  --s3: #25222c;
  --s4: #2a2732;
  --s5: #2f2b38;
  --s6: #373243;
  --s7: #403b4f;
  --border: #2f2b38;          /* border/card/Default */
  --border-light: #403b4f;    /* border/card/Lighter */
  --sep: #5a526b;             /* Game Info/Separator */

  /* Content */
  --text: #ffffff;
  --text-data: #dedede;       /* Text/Data/Average */
  --text-subtle: #b3b3b3;     /* content/text/subtle */
  --text-inactive: rgba(255, 255, 255, 0.65);
  --brand: #f84982;           /* brand/500 */
  --brand-600: #e72b67;

  /* Data tiers (data/great .. data/poor) */
  --great: #4dc49e;
  --good: #9ccc73;
  --average: #dedede;
  --subpar: #f7cd60;
  --poor: #f77c60;

  /* Sides */
  --radiant: #66c94b;         /* Lime Green/600 */
  --radiant-dark: #34542c;    /* Lime Green/900 */
  --dire: #d34347;            /* LoL/Red */
  --dire-dark: #572a28;       /* Red/900 */

  /* Medals (System Misc/Gold, Silver, Bronze) */
  --gold-a: #fbd998;  --gold-b: #b87d46;
  --silver-a: #e9e9e9; --silver-b: #8a8a8a;
  --bronze-a: #f0b48a; --bronze-b: #a0522d;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-xs: 3px;

  background: var(--s1);
  color: var(--text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The site's own top bar keeps the site's font. */
.lt .topbar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.lt main {
  max-width: 1640px;
  padding: 32px 40px 64px;
}

.lt h2, .lt h3 { font-family: "Poppins", sans-serif; }
.lt .muted { color: var(--text-subtle); }
.lt a { color: inherit; }

/* ------------------------------------------------------------------ */
/* Banner                                                              */
/* ------------------------------------------------------------------ */

.lt-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--s2);
  padding: 24px 24px 0;
  margin-bottom: 24px;
  isolation: isolate;
}

.lt-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: 70% 25%;
  filter: blur(6px) saturate(0.9);
  transform: scale(1.08);
  opacity: 0.55;
}

.lt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(25, 23, 30, 0.92) 0%, rgba(25, 23, 30, 0.55) 55%, rgba(25, 23, 30, 0.35) 100%),
    linear-gradient(180deg, rgba(25, 23, 30, 0) 40%, rgba(25, 23, 30, 0.85) 100%);
}

.lt-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.lt-result {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  background: rgba(25, 23, 30, 0.88);
  border: 1px solid var(--border);
  font-weight: 700;
  line-height: 1;
}

.lt-result-side { font-size: 24px; letter-spacing: 0.02em; text-transform: uppercase; }
.lt-result-side.radiant { color: var(--radiant); }
.lt-result-side.dire { color: var(--dire); }
.lt-result-word { font-size: 44px; text-transform: uppercase; }
.lt-score { font-size: 44px; margin-left: 10px; font-variant-numeric: tabular-nums; }
.lt-score .win { color: var(--great); }
.lt-score-sep { margin: 0 4px; }

.lt-meta {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--text-data);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.lt-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  margin: 0 10px;
  vertical-align: -2px;
  background: var(--sep);
}

.lt-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: 18px;
  border-radius: var(--radius-sm);
  background: var(--s1);
  border: 1px solid var(--border);
  fill: var(--text);
  text-decoration: none;
}
.lt-icon-btn:hover { background: var(--s4); }

.lt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px 0 10px;
  border-radius: var(--radius-sm);
  background: rgba(25, 23, 30, 0.88);
  border: 1px solid var(--border);
  font-size: 17px;
  font-weight: 600;
}
.lt-chip-sub { color: var(--text-subtle); font-weight: 400; font-size: 15px; }
.lt-chip-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.lt-chip-icon-clock { background: rgba(73, 123, 248, 0.22); color: #688ff0; }
.lt-chip-icon-tower { background: rgba(247, 205, 96, 0.18); color: var(--subpar); }
.lt-chip-hero {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--s4);
  object-fit: cover;
}

.lt-pill {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.lt-pill.radiant { background: rgba(102, 201, 75, 0.22); color: var(--radiant); }
.lt-pill.dire { background: rgba(211, 67, 71, 0.25); color: #f07067; }

/* Tab bar - Leetify Tab Menu: Poppins Medium 16, pink 2px underline. */
.lt .report-tabs {
  display: flex;
  /* Ten tabs: one row that scrolls on narrow screens, never two rows. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  margin: 18px -24px 0;
  padding: 0 24px;
}
.lt .report-tab {
  position: relative;
  padding: 14px 16px 16px;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-inactive);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.lt .report-tab:hover { color: var(--text); background: none; }
.lt .report-tab.active { color: var(--text); background: none; }
.lt .report-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--brand);
}

/* ------------------------------------------------------------------ */
/* Podium                                                              */
/* ------------------------------------------------------------------ */

.lt-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 16px;
}

.lt-podium-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 94px;
  padding: 12px 24px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--s3);
  text-decoration: none;
  isolation: isolate;
}
.lt-podium-card:hover { background: var(--s4); }

.lt-podium-art {
  position: absolute;
  top: 0;
  right: 72px;
  height: 100%;
  width: 48%;
  object-fit: cover;
  object-position: 50% 20%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
  opacity: 0.9;
}

.lt-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--medal-b, #2f2b38) 100%), var(--s4);
}
.lt-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--s5);
}
.medal-1 { --medal-a: var(--gold-a); --medal-b: var(--gold-b); }
.medal-2 { --medal-a: var(--silver-a); --medal-b: var(--silver-b); }
.medal-3 { --medal-a: var(--bronze-a); --medal-b: var(--bronze-b); }

.lt-podium-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lt-trophy { display: block; margin-bottom: 4px; fill: var(--medal-a); }
.lt-place {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.06px;
  background: linear-gradient(180deg, var(--medal-a), var(--medal-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lt-podium-name {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lt-podium-hero { font-size: 13px; color: var(--text-subtle); }

.lt-ring {
  position: relative;
  flex: none;
  width: 68px;
  height: 68px;
}
.lt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lt-ring circle { fill: none; stroke-width: 4; }
.lt-ring-track { stroke: var(--s5); }
.lt-ring-fill { stroke: var(--great); stroke-linecap: round; }
.lt-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--great);
  font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Highlight cards (LoL "Highest CS" row)                              */
/* ------------------------------------------------------------------ */

.lt-highlights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.lt-highlight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 110px;
  padding: 18px 18px 16px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--s3);
  border: 1px solid var(--border);
  isolation: isolate;
}
.lt-highlight-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 20%;
  z-index: -1;
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
}
.lt-highlight-title { font-size: 13px; color: var(--text-subtle); }
.lt-highlight-value { font-size: 22px; font-weight: 500; }
.lt-highlight-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
}
.lt-highlight-who img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ------------------------------------------------------------------ */
/* Leetify PMR table                                                   */
/* ------------------------------------------------------------------ */

.lt-table-wrap {
  overflow-x: auto;
  margin-bottom: 8px;
}

.lt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  margin: -2px;
  font-size: 14px;
}

.lt-table th {
  height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--s3);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
}

/* Fixed layout so the Radiant and Dire tables line up column for column. */
.lt-scoreboard { table-layout: fixed; min-width: 1480px; }
.lt-col-player { width: 250px; }
.lt-col-items { width: 232px; }
.lt-scoreboard .lt-player { min-width: 0; overflow: hidden; }
.lt-scoreboard .lt-data { min-width: 0; padding: 0 12px; }
.lt-scoreboard th { padding: 8px 12px; white-space: normal; }

.lt-th-team span:first-child { margin-right: 8px; }

.lt-badge {
  display: inline-block;
  padding: 3px 5px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.55px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  vertical-align: 1px;
}
.lt-badge.win { background: rgba(77, 196, 158, 0.4); }
.lt-badge.loss { background: rgba(246, 120, 98, 0.4); }

.lt-table td {
  height: 48px;
  padding: 0 16px;
  border: 0;
  background: var(--s3);
  vertical-align: middle;
  white-space: nowrap;
}

/* Player cell: side trim, hero portrait with level, name. */
.lt-player {
  position: relative;
  min-width: 260px;
  padding-left: 0 !important;
  border-radius: var(--radius-xs);
}
.lt-player > * { vertical-align: middle; }
.lt-trim {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
.lt-player.radiant .lt-trim { background: var(--radiant); }
.lt-player.dire .lt-trim { background: var(--dire); }

.lt-portrait {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 36px;
  margin: 0 14px 0 17px;
  border-radius: 4px;
  overflow: visible;
  background: var(--s5);
}
.lt-portrait img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}
.lt-level {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 20px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--s1);
  border: 1px solid var(--border-light);
  color: var(--text-data);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.lt-player-text {
  display: inline-flex;
  flex-direction: column;
  max-width: calc(100% - 110px);
  line-height: 1.2;
}
.lt-player-name, .lt-player-hero {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lt-player-name { font-size: 16px; font-weight: 600; color: var(--text-data); }
.lt-player-hero { font-size: 12px; color: var(--text-subtle); }

.lt-pos {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--s5);
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  vertical-align: 1px;
}

/* Items: six slots, like an in-game inventory. */
.lt-items { padding: 0 10px !important; }
.lt-items img, .lt-item-empty, .lt-items .lt-icon-missing {
  display: inline-block;
  width: 33px;
  height: 25px;
  margin-right: 3px;
  border-radius: 3px;
  vertical-align: middle;
  object-fit: cover;
  background: var(--s1);
}
.lt-item-empty { opacity: 0.6; }
.lt-icon-missing {
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: var(--s5);
  color: var(--text-subtle);
  font: 600 9px/1 "Poppins", sans-serif;
  vertical-align: middle;
}

/* Data cell: value tinted by tier over a bar against the match best.
   Figma "Flexible Cell": bar is surface/5 on a surface/3 track. */
.lt-data {
  position: relative;
  min-width: 108px;
  overflow: hidden;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.lt-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--s5);
}
.lt-data-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lt-data.great .lt-data-text { color: var(--great); }
.lt-data.good .lt-data-text { color: var(--good); }
.lt-data.average .lt-data-text, .lt-data.plain .lt-data-text { color: var(--average); }
.lt-data.subpar .lt-data-text { color: var(--subpar); }
.lt-data.poor .lt-data-text { color: var(--poor); }

.lt-star { fill: #e5bb7d; flex: none; }

.lt-footnote {
  margin: 10px 0 28px;
  color: var(--text-subtle);
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Cards (panels)                                                      */
/* ------------------------------------------------------------------ */

.lt-card,
.lt .panel {
  margin: 0 0 24px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--s2);
  border: 1px solid var(--border);
  box-shadow: none;
}
.lt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.lt-card h3,
.lt .panel h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}
.lt-card-head h3 { margin: 0; }
.lt .panel h2 { font-size: 22px; font-weight: 600; }

.lt-legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-subtle); }
.lt-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}
.lt-legend i.radiant { background: var(--radiant); }
.lt-legend i.dire { background: var(--dire); }

/* Net worth lead chart (LoL Income "Gold difference"). */
.lt-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  align-items: start;
}
.lt-flow-chart { position: relative; padding: 0 0 26px 64px; }
.lt-flow-axis-label {
  position: absolute;
  left: 0;
  font-size: 12px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lt-flow-axis-label.top { top: 8px; color: var(--radiant); }
.lt-flow-axis-label.bottom { bottom: 34px; color: var(--dire); }

.lt-flow-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 4px;
  height: 260px;
}
.lt-flow-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--sep);
}
.lt-flow-col { position: relative; }
.lt-flow-col:hover { background: rgba(255, 255, 255, 0.03); }
.lt-flow-bar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 1px;
}
.lt-flow-bar.radiant {
  bottom: 50%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(0deg, var(--radiant-dark), var(--radiant));
}
.lt-flow-bar.dire {
  top: 50%;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--dire-dark), var(--dire));
}
.lt-flow-mark {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  border: 1.5px solid;
  background: var(--s2);
}
.lt-flow-mark.radiant { top: calc(3px + var(--i) * 11px); border-color: var(--radiant); }
.lt-flow-mark.dire { bottom: calc(3px + var(--i) * 11px); border-color: var(--dire); }
.lt-flow-mark.rax { border-radius: 2px; background: currentColor; }
.lt-flow-mark.rax.radiant { background: var(--radiant); }
.lt-flow-mark.rax.dire { background: var(--dire); }

.lt-flow-ticks { position: relative; height: 20px; margin-top: 8px; }
.lt-flow-ticks span {
  position: absolute;
  left: calc((var(--m) + 0.5) / var(--n) * 100%);
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-subtle);
}

.lt-mini-card {
  padding: 18px;
  border-radius: var(--radius-sm);
  background: var(--s3);
}
.lt-mini-title { margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.lt-mini-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
}
.lt-mini-bar {
  display: block;
  min-width: 48px;
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
}
.lt-mini-bar.radiant { background: linear-gradient(90deg, rgba(102, 201, 75, 0) 0%, var(--radiant) 100%); }
.lt-mini-bar.dire { background: linear-gradient(90deg, rgba(211, 67, 71, 0) 0%, var(--dire) 100%); }

/* Simple tables inside cards (data check, other tabs). */
.lt-table-simple td { background: var(--s3); font-size: 14px; }
.lt-name-cell { font-weight: 600; color: var(--text-data); }
.lt-inline-hero {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

/* Tables on the other tabs share the scoreboard look. */
.lt-fixed { table-layout: fixed; }
.lt-fixed .lt-player { min-width: 0; overflow: hidden; }
.lt-fixed .lt-data { min-width: 0; padding: 0 12px; }
.lt-fixed th { white-space: normal; padding: 8px 12px; }
.lt-wide { min-width: 1500px; }
.lt-card .lt-table-wrap + .lt-table-wrap { margin-top: 14px; }
.lt-intro { margin: -6px 0 16px; color: var(--text-subtle); font-size: 13px; }

.lt-compact th { height: 40px; font-size: 13px; padding: 6px 12px; }
.lt-compact td { height: 40px; padding: 0 12px; }
.lt-compact .lt-data { min-width: 0; font-size: 15px; }
.lt-row-other td { background: var(--s2); height: 32px; font-size: 13px; }

.lt-explainer .wrap-list { margin: 0; padding-left: 18px; color: var(--text-data); font-size: 14px; line-height: 1.65; }
.lt-explainer .wrap-list li + li { margin-top: 6px; }
.lt-explainer p { color: var(--text-subtle); font-size: 13px; }
.lt code { padding: 1px 5px; border-radius: 3px; background: var(--s4); color: var(--text-data); font-size: 12px; }

/* Per-player cards (Spells, Items, Achievements). */
.lt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.lt-grid-2 > .lt-card { margin: 0; }
.lt-player-card { padding: 0 0 20px; overflow: hidden; }
.lt-player-card > :not(.lt-hero-head) { margin-left: 20px; margin-right: 20px; }
.lt-player-card > .lt-table { width: calc(100% - 36px); margin: 0 18px; }

.lt-hero-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 16px 20px;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--s3);
  border-bottom: 1px solid var(--border);
  isolation: isolate;
}
.lt-hero-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.lt-hero-head.radiant::before { background: var(--radiant); }
.lt-hero-head.dire::before { background: var(--dire); }
.lt-hero-head-art {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 55%;
  object-fit: cover;
  object-position: 50% 25%;
  z-index: -1;
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
.lt-hero-head-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--s5); }
.lt-hero-head-text { display: flex; flex-direction: column; line-height: 1.25; }
.lt-hero-head-name { font-size: 18px; font-weight: 600; }
.lt-hero-head-hero { font-size: 13px; color: var(--text-subtle); }
.lt-hero-head-extra {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(25, 23, 30, 0.8);
  font-size: 13px;
  color: var(--text-data);
}

.lt-side-tag {
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.lt-side-tag.radiant { background: rgba(102, 201, 75, 0.25); color: var(--radiant); }
.lt-side-tag.dire { background: rgba(211, 67, 71, 0.3); color: #f07067; }
.lt-side-text.radiant { color: var(--radiant); }
.lt-side-text.dire { color: #f07067; }

.lt-ability { font-weight: 500; color: var(--text-data); }
.lt-ability img, .lt-ability .lt-icon-missing {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 4px;
  vertical-align: middle;
  object-fit: cover;
  background: var(--s1);
}
.lt-ability img.lt-item-icon, .lt-ability .lt-icon-missing { width: 37px; height: 28px; }
.lt-ability .lt-icon-missing { display: inline-grid; }

.lt-label {
  margin: 4px 0 10px;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lt-inventory { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.lt-inv-item { margin: 0; width: 72px; text-align: center; }
.lt-inv-item img, .lt-inv-item .lt-icon-missing {
  display: block;
  width: 72px;
  height: 53px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--border);
}
.lt-inv-item .lt-icon-missing { display: grid; font-size: 13px; }
.lt-inv-item figcaption {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-subtle);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Awards. */
.lt-fb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--s2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
}
.lt-fb-tag {
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: var(--brand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}
.lt-fb-clock { font-family: "Lato", sans-serif; font-size: 16px; color: var(--text-data); }
.lt-fb-who { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.lt-fb-who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.lt-fb-sword { color: var(--dire); }
.lt-fb-assist { font-size: 14px; }

.lt-mvp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.lt-mvp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 212px;
  padding: 24px 28px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--s3);
  border: 1px solid rgba(229, 187, 125, 0.45);
  isolation: isolate;
}
.lt-mvp-art {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 70%;
  object-fit: cover;
  object-position: 50% 20%;
  z-index: -1;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.lt-mvp-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.lt-mvp-crown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e5bb7d;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lt-mvp-name { font-size: 32px; font-weight: 600; line-height: 1.15; }
.lt-mvp-hero { font-size: 14px; color: var(--text-subtle); }
.lt-mvp-parts { list-style: none; margin: 14px 0 0; padding: 0; max-width: 420px; }
.lt-mvp-parts li {
  display: grid;
  grid-template-columns: 140px 1fr 52px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-data);
}
.lt-mvp-parts li + li { margin-top: 6px; }
.lt-mvp-parts strong { color: var(--great); text-align: right; font-family: "Lato", sans-serif; }
.lt-mvp-part-bar { height: 6px; border-radius: 3px; background: var(--s5); overflow: hidden; }
.lt-mvp-part-bar i { display: block; height: 100%; background: var(--great); border-radius: 3px; }
.lt-ring-lg { width: 120px; height: 120px; }
.lt-ring-lg circle { stroke-width: 3; }
.lt-ring-lg .lt-ring-value { font-size: 28px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.lt-ring-lg .lt-ring-value small { font-size: 10px; font-weight: 400; color: var(--text-subtle); letter-spacing: 0.04em; }
.lt-runners { display: grid; gap: 24px; align-content: stretch; }
.lt-runners .lt-podium-card { min-height: 94px; }

.lt-award-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.lt-award { min-height: 128px; }
.lt-highlight-value small { font-size: 12px; font-weight: 400; color: var(--text-subtle); }
.lt-award-note { font-size: 12px; font-style: italic; color: var(--text-subtle); }
.lt-award-empty { font-size: 13px; color: var(--text-subtle); line-height: 1.45; margin-top: 4px; }

.lt .mvp-weights { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.lt .mvp-weight {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--s3);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-data);
}
.lt .mvp-weight-pct { color: var(--brand); font-weight: 600; margin-right: 4px; }

/* Achievements - Leetify achievement cards: tinted, glowing border. */
.lt-ach-list { display: grid; gap: 10px; }
.lt-ach {
  --tier: #8a859b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier) 16%, var(--s3)) 0%, var(--s3) 100%);
}
.lt-ach.tier-s { --tier: #e5bb7d; }
.lt-ach.tier-a { --tier: #f84982; }
.lt-ach.tier-b { --tier: #956bf4; }
.lt-ach.tier-c { --tier: #4dc49e; }
.lt-ach-title { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.lt-ach-detail { margin: 0; font-size: 12px; color: var(--text-data); }
.lt-ach-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tier) 30%, transparent);
  color: var(--tier);
  font-weight: 700;
}

.lt .lan-panel { border-color: rgba(229, 187, 125, 0.35); }
.lt .lan-new-head { color: #e5bb7d; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lt .lan-new-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lt .lan-new-card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--s3);
  border: 1px solid rgba(229, 187, 125, 0.45);
  isolation: isolate;
}
.lt .lan-stat { margin: 0 0 6px; font-size: 12px; color: #e5bb7d; letter-spacing: 0.04em; text-transform: uppercase; }
.lt .lan-value { margin: 0 0 6px; font-size: 24px; font-weight: 600; }
.lt .lan-unit { font-size: 12px; font-weight: 400; color: var(--text-subtle); }
.lt .lan-holder { margin: 0; font-size: 13px; font-weight: 500; }
.lt .lan-prev { margin: 4px 0 0; font-size: 12px; color: var(--text-subtle); font-style: normal; }
.lt .lan-all summary { cursor: pointer; color: var(--text-data); margin-top: 18px; font-size: 14px; }
.lt .lan-tag { padding: 2px 5px; border-radius: 3px; background: var(--brand); font-size: 10px; font-weight: 600; }

.lt-verdict {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}
.lt-verdict.radiant { background: rgba(102, 201, 75, 0.2); color: var(--radiant); border: 1px solid rgba(102, 201, 75, 0.5); }
.lt-verdict.dire { background: rgba(211, 67, 71, 0.2); color: #f07067; border: 1px solid rgba(211, 67, 71, 0.55); }
.lt-verdict.draw { background: var(--s4); color: var(--text-subtle); border: 1px solid var(--border-light); }

/* Notices inside the report keep their meaning but take the card style. */
/* Design system Banner: tinted fill, matching border. */
.lt .warning-banner, .lt .confirm-flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
}
.lt .warning-banner {
  background: rgba(194, 150, 42, 0.3);   /* background/feedback/warning/weaker */
  border: 1px solid #c2962a;             /* border/feedback/warning */
}
.lt .confirm-flash {
  background: rgba(83, 166, 62, 0.3);    /* background/feedback/positive/weaker */
  border: 1px solid #53a63e;             /* border/feedback/positive */
}

/* ------------------------------------------------------------------ */
/* Match Flow (LoL Win Probability)                                    */
/* ------------------------------------------------------------------ */

.lt-wp-card { min-width: 0; padding-bottom: 16px; }

/* "How is this calculated?" chip, top left of the chart card. */
.lt-calc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--s3);
  font-size: 14px;
  color: var(--text-data);
  text-decoration: none;
}
.lt-calc-chip svg { width: 16px; height: 16px; color: var(--text-subtle); }
.lt-calc-chip:hover { background: var(--s4); color: var(--text); }

/* Axis | plot | result badge; event lanes above and below the plot. */
.lt-wp {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 132px;
  padding-right: 8px;
}
.lt-wp > .lt-wp-lane, .lt-wp > .lt-wp-plot, .lt-wp > .lt-wp-ticks { grid-column: 2; }
.lt-wp-axis { grid-column: 1; position: relative; }
.lt-wp-end { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; }

.lt-wp-side {
  position: absolute;
  left: 0;
  width: 18px;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lt-wp-side.radiant { top: 0; color: var(--radiant); }
.lt-wp-side.dire { bottom: 0; color: #f07067; }
.lt-wp-pct {
  position: absolute;
  right: 14px;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.lt-wp-plot { position: relative; height: 280px; }
.lt-wp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lt-wp-grid { stroke: var(--border-light); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lt-wp-grid.v { stroke-dasharray: 2 4; }
.lt-wp-mid { stroke: var(--sep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lt-wp-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lt-wp-line.radiant { stroke: var(--radiant); }
.lt-wp-line.dire { stroke: #f07067; }
.lt-wp-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  cursor: default;
}
.lt-wp-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid var(--s2);
  background: var(--text);
  opacity: 0;
  transition: opacity 0.1s;
}
.lt-wp-dot:hover::after { opacity: 1; }
.lt-wp-dot.radiant::after { background: var(--radiant); }
.lt-wp-dot.dire::after { background: #f07067; }
.lt-wp-dot.final::after { opacity: 1; }

/* "Major swing": a tag above the plot and a dashed line down through it. */
.lt-wp-swing {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--text-subtle);
  pointer-events: none;
}
.lt-wp-swing b {
  position: absolute;
  top: 6px;
  left: 0;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid;
  background: var(--s2);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
  cursor: default;
}
.lt-wp-swing.radiant b { border-color: var(--radiant); color: var(--text); }
.lt-wp-swing.dire b { border-color: #f07067; color: var(--text); }

.lt-wp-winner {
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lt-wp-winner.radiant { background: rgba(102, 201, 75, 0.2); border: 1px solid var(--radiant); color: var(--radiant); }
.lt-wp-winner.dire { background: rgba(211, 67, 71, 0.25); border: 1px solid #f07067; color: #f07067; }

/* Event lanes: round icon badges, like the objective icons in Leetify. */
.lt-wp-lane { position: relative; height: 64px; }
.lt-wp-ev {
  position: absolute;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid;
  background: var(--s2);
  cursor: default;
}
.lt-wp-ev svg { width: 11px; height: 11px; }
.lt-wp-lane.radiant .lt-wp-ev { top: 30%; color: var(--radiant); }
.lt-wp-lane.dire .lt-wp-ev { top: 70%; color: #f07067; }
/* Kills on the outer row, objectives next to the plot, so a teamfight and
   the tower it won never sit on top of each other. */
.lt-wp-lane.radiant .lt-wp-ev:not(.kill) { top: 74%; }
.lt-wp-lane.dire .lt-wp-ev:not(.kill) { top: 26%; }
.lt-wp-ev:not(.kill) { width: 24px; height: 24px; }
.lt-wp-ev:not(.kill) svg { width: 13px; height: 13px; }
.lt-wp-lane.radiant .lt-wp-ev:is(.rax, .ancient, .roshan) { background: var(--radiant); border-color: var(--radiant); color: var(--s1); }
.lt-wp-lane.dire .lt-wp-ev:is(.rax, .ancient, .roshan) { background: #f07067; border-color: #f07067; color: var(--s1); }
.lt-wp-ev.multikill { color: var(--gold-a) !important; border-color: var(--gold-a); }
.lt-wp-ev b {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--s6);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  color: var(--text);
}
.lt-wp-ev:hover { z-index: 2; box-shadow: 0 0 0 3px var(--s5); }

.lt-wp-ticks { position: relative; height: 22px; margin-top: 4px; }
.lt-wp-ticks span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.lt-wp-ticks span.minor { font-weight: 400; color: var(--text-subtle); }

/* Cards under the chart. */
.lt-flow-cards { align-items: stretch; }
.lt-flow-cards > .lt-card { display: flex; flex-direction: column; }
.lt-flow-cards .lt-wp-facts { flex: 1; }
.lt-wp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lt-wp-fact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--s3);
}
.lt-wp-fact-label { font-size: 12px; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.lt-wp-fact-value { font-family: "Lato", sans-serif; font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.lt-wp-fact-value.radiant { color: var(--radiant); }
.lt-wp-fact-value.dire { color: #f07067; }
.lt-wp-fact-value small { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; color: var(--text-subtle); }

.lt-swings { margin: 0; padding: 0; list-style: none; }
.lt-swings li {
  display: grid;
  grid-template-columns: 56px 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--s3);
  font-size: 14px;
}
.lt-swings li + li { margin-top: 8px; }
.lt-swing-delta {
  padding: 3px 6px;
  border-radius: var(--radius-xs);
  font-family: "Lato", sans-serif;
  font-weight: 700;
  text-align: center;
}
.lt-swing-delta.radiant { background: rgba(102, 201, 75, 0.2); color: var(--radiant); }
.lt-swing-delta.dire { background: rgba(211, 67, 71, 0.25); color: #f07067; }
.lt-swing-when { font-family: "Lato", sans-serif; color: var(--text-subtle); white-space: nowrap; }
.lt-swing-what { color: var(--text-data); min-width: 0; }
.lt-swing-after { font-size: 12px; color: var(--text-subtle); white-space: nowrap; }

.lt-wp-log { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.lt-wp-log li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  break-inside: avoid;
  font-size: 14px;
}
.lt-wp-log .lt-inline-hero { margin-right: 0; }
.lt-wp-log-clock { width: 44px; flex: none; font-family: "Lato", sans-serif; color: var(--text-subtle); }
.lt-wp-log-icon { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--text-subtle); }
.lt-wp-log li.radiant .lt-wp-log-icon { color: var(--radiant); }
.lt-wp-log li.dire .lt-wp-log-icon { color: #f07067; }
.lt-wp-log-text { flex: 1; min-width: 0; color: var(--text-data); }

/* ------------------------------------------------------------------ */
/* Damage (LoL Damage / Healing tabs)                                  */
/* ------------------------------------------------------------------ */

.lt-dmg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.lt-dmg-card { margin: 0; min-width: 0; }
.lt-dmg-note { font-size: 13px; color: var(--text-subtle); text-align: right; }
.lt-dmg-split {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.lt-dmg-total { font-family: "Lato", sans-serif; font-size: 20px; font-weight: 700; }
.lt-dmg-total.radiant { color: var(--radiant); }
.lt-dmg-total.dire { color: #f07067; }
.lt-dmg-split-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--dire); }
.lt-dmg-split-bar i.radiant { background: var(--radiant); border-right: 2px solid var(--s2); }
.lt-dmg-split-bar i.dire { flex: 1; background: var(--dire); }
.lt-dmg-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lt-dmg-list { margin: 0; padding: 0; list-style: none; min-width: 0; }
.lt-dmg-list li { display: flex; align-items: center; gap: 10px; }
.lt-dmg-list li + li { margin-top: 10px; }
.lt-dmg-hero { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--s3); }
.lt-dmg-row { flex: 1; min-width: 0; }
.lt-dmg-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.lt-dmg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-data); }
.lt-dmg-value { display: inline-flex; align-items: center; gap: 4px; font-family: "Lato", sans-serif; font-weight: 700; }
.lt-dmg-value .lt-star { margin: 0; }
.lt-dmg-bar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: var(--s3); overflow: hidden; }
.lt-dmg-bar i { display: block; height: 100%; border-radius: 3px; }
.lt-dmg-list.radiant .lt-dmg-bar i { background: linear-gradient(90deg, var(--radiant-dark), var(--radiant)); }
.lt-dmg-list.dire .lt-dmg-bar i { background: linear-gradient(90deg, var(--dire-dark), var(--dire)); }
/* The per-minute chart reuses the net worth chart, inside a card. */
.lt-dmg-grid + .lt-card .lt-flow-chart { margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* You vs You                                                          */
/* ------------------------------------------------------------------ */

.lt-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  padding: 16px 20px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--s2);
}
.lt-picker-side { min-width: 0; }
.lt-picker-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lt-picker-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lt-picker-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--s3);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-subtle);
  font-size: 13px;
  transition: background 0.1s, color 0.1s;
}
.lt-picker-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--s5);
  filter: saturate(0.6) brightness(0.8);
  transition: filter 0.1s;
}
.lt-picker-item span { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-picker-item:hover { background: var(--s4); color: var(--text); }
.lt-picker-item:hover img { filter: none; }
.lt-picker-item.active { border-color: var(--brand); color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }
.lt-picker-item.active img { filter: none; }

/* Two columns: the player on the left, the stat list on the right. */
.lt-yvy {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.lt-yvy-side { display: grid; gap: 24px; min-width: 0; }
.lt-yvy-side > .lt-card, .lt-yvy-stats { margin: 0; }

.lt-player-card.lt-yvy-head { padding: 0 0 20px; }
.lt-yvy-head .lt-hero-head { margin-bottom: 0; }
.lt-yvy-rating { display: flex; align-items: center; gap: 24px; padding-top: 20px; }
.lt-yvy-facts { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.lt-yvy-facts dt { color: var(--text-subtle); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.lt-yvy-facts dd { margin: 0 0 8px; font-family: "Lato", sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
.lt-yvy-facts dd small { font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 400; color: var(--text-subtle); }

/* Design system Banner (info / warning), sized for inside a card. */
.lt-note {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--s3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-data);
}
.lt-note.warning { background: rgba(194, 150, 42, 0.18); border-color: #c2962a; }
.lt-note a { text-decoration: underline; }

.lt-yvy-sum ul { margin: 0; padding: 0; list-style: none; }
.lt-yvy-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 56px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.lt-yvy-list li:last-child { border-bottom: 0; }
.lt-yvy-label { color: var(--text-data); }
.lt-yvy-vals { font-family: "Lato", sans-serif; font-weight: 700; }
.lt-yvy-vals .muted { font-weight: 400; }
.lt-yvy-pct { font-family: "Lato", sans-serif; font-weight: 700; text-align: right; }
.lt-yvy-pct.better { color: var(--great); }
.lt-yvy-pct.worse { color: var(--poor); }
.lt-yvy-sum.better .lt-card-head h3 { color: var(--great); }
.lt-yvy-sum.worse .lt-card-head h3 { color: var(--poor); }

/* Stat list: Leetify's "Statistics" panel - one rounded row per stat, this
   match in the light cell, the average in the darker one. */
.lt-yvy-stats .lt-card-head { padding-bottom: 16px; border-bottom: 1px solid var(--border-light); }
.lt-yvy-stats .lt-card-head h3 { font-size: 20px; }
.lt-yvy-vs { font-size: 13px; color: var(--text-subtle); }
.lt-yvy-vs b { font-weight: 500; color: var(--text-data); }
.lt-yvy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 150px 120px;
  row-gap: 8px;
}
.lt-yvy-grid.no-avg { grid-template-columns: minmax(0, 1fr) 150px 150px; }
.lt-yvy-colhead {
  padding: 4px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: right;
}
.lt-yvy-row { display: contents; }
.lt-yvy-row > span { display: flex; align-items: center; justify-content: flex-end; min-height: 52px; padding: 0 16px; background: var(--s3); }
.lt-yvy-row > span:first-child { justify-content: flex-start; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.lt-yvy-row > span:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.lt-yvy-stat { font-size: 15px; font-weight: 500; color: var(--text); }
.lt-yvy-now { font-family: "Lato", sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }
.lt-yvy-row > .lt-yvy-avg { background: var(--s4); font-family: "Lato", sans-serif; font-size: 15px; color: var(--text-subtle); white-space: nowrap; gap: 4px; }
.lt-yvy-avg small { font-size: 11px; }
.lt-yvy-delta { font-family: "Lato", sans-serif; font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--text-data); }
.lt-yvy-delta.better { color: var(--great); }
.lt-yvy-delta.worse { color: var(--poor); }
.lt-yvy-delta.none, .lt-yvy-delta.same { color: var(--text-subtle); }
.lt-yvy-stats .lt-footnote { margin: 16px 0 0; }

/* ------------------------------------------------------------------ */
/* Laning (Leetify LoL "Laning stats")                                 */
/* ------------------------------------------------------------------ */

.lt-lane-demo { margin: 0 0 20px; }
.lt-lane-empty .lt-calc-chip { margin-top: 16px; }

.lt-lane-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 250px));
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}
.lt-lane-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.lt-lane-tab svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lt-lane-tab svg rect { stroke-width: 1.5; opacity: 0.45; }
.lt-lane-tab:hover { background: var(--s2); color: var(--text); }
.lt-lane-tab.active { background: var(--s4); border-color: var(--s4); color: var(--text); }
.lt-lane-tab-tag {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lt-lane-tab-tag.radiant { background: rgba(102, 201, 75, 0.2); color: var(--radiant); }
.lt-lane-tab-tag.dire { background: rgba(211, 67, 71, 0.25); color: #f07067; }
.lt-lane-tab-tag.draw { background: var(--s5); color: var(--text-subtle); }

/* Head-to-head card: hero art behind each half, heroes at the edges, the
   bars in the middle. */
.lt-h2h {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
  min-height: 420px;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--s2);
  overflow: hidden;
  isolation: isolate;
}
.lt-h2h-bg {
  position: absolute;
  top: 0;
  height: 100%;
  width: 55%;
  object-fit: cover;
  opacity: 0.32;
  z-index: -1;
}
.lt-h2h-bg.radiant {
  left: 0;
  object-position: 30% 20%;
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
}
.lt-h2h-bg.dire {
  right: 0;
  object-position: 70% 20%;
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 95%);
}
.lt-h2h-side { display: flex; gap: 10px; }
.lt-h2h-side.dire { flex-direction: row-reverse; }

.lt-h2h-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 108px;
  border-radius: var(--radius-sm);
  border: 2px solid;
  background: rgba(25, 23, 30, 0.85);
}
.lt-h2h-hero.radiant { border-color: var(--radiant); }
.lt-h2h-hero.dire { border-color: var(--dire); }
.lt-h2h-art { position: relative; display: block; height: 96px; overflow: hidden; border-radius: 4px 4px 0 0; }
.lt-h2h-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lt-h2h-art b {
  position: absolute;
  right: 4px;
  bottom: 4px;
  min-width: 20px;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(25, 23, 30, 0.85);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.lt-h2h-items {
  display: grid;
  grid-template-columns: repeat(2, 36px);
  justify-content: center;
  gap: 6px;
  padding: 10px 0 8px;
  border-top: 1px solid var(--border);
}
.lt-h2h-items .lt-lane-item, .lt-h2h-items .lt-icon-missing, .lt-h2h-slot {
  width: 36px;
  height: 27px;
  border-radius: 3px;
  object-fit: cover;
  background: var(--s3);
}
.lt-h2h-slot { display: block; border: 1px solid var(--border); background: transparent; }
.lt-h2h-more { margin: -2px 0 6px; font-size: 11px; color: var(--text-subtle); text-align: center; cursor: help; }
.lt-h2h-pos {
  padding: 5px 0;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}

.lt-h2h-center { max-width: 560px; width: 100%; justify-self: center; min-width: 0; }
.lt-h2h-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(102, 201, 75, 0.14), rgba(25, 23, 30, 0.6) 50%, rgba(211, 67, 71, 0.16));
}
.lt-h2h-names { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lt-h2h-names.radiant { text-align: right; }
.lt-h2h-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lt-h2h-name b { font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-h2h-name small { font-size: 14px; color: var(--text-subtle); }
.lt-h2h-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Lato", sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
}
.lt-h2h-clock small { font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; color: var(--text-subtle); }
.lt-h2h-sub {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lt-h2h-stats { display: grid; gap: 20px; padding: 18px 0 0; }
.lt-h2h-stat { position: relative; }
.lt-h2h-labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.lt-h2h-label { font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 400; color: var(--text); }
.lt-h2h-bar { display: flex; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--dire); }
.lt-h2h-bar i.radiant { background: var(--radiant); border-right: 2px solid var(--s1); }
.lt-h2h-bar i.dire { flex: 1; background: var(--dire); }
.lt-h2h-ahead {
  position: absolute;
  bottom: -6px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid;
  background: var(--s1);
  font-size: 12px;
  white-space: nowrap;
}
.lt-h2h-ahead.radiant { right: calc(100% + 10px); border-color: var(--radiant); color: var(--text); }
.lt-h2h-ahead.dire { left: calc(100% + 10px); border-color: #f07067; color: var(--text); }

/* Laning phase timeline. */
.lt-ltl-card { padding: 24px 24px 16px; }
.lt-ltl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 150px;
  align-items: center;
  gap: 16px;
}
.lt-ltl-start {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}
.lt-ltl-track { position: relative; height: 200px; }
.lt-ltl-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--sep);
}
.lt-ltl-axis::before, .lt-ltl-axis::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 2px;
  height: 12px;
  background: var(--sep);
}
.lt-ltl-axis::before { left: 0; }
.lt-ltl-axis::after { right: 0; }
.lt-ltl-events { position: absolute; inset: 0; }

.lt-ltl-ev, .lt-ltl-items {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s;
}
.lt-ltl-ev {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid;
  background: var(--s2);
  cursor: default;
}
.lt-ltl-ev svg { width: 14px; height: 14px; }
.lt-ltl-ev.radiant { top: 12%; color: var(--radiant); }
.lt-ltl-ev.dire { top: 88%; color: #f07067; }
.lt-ltl-ev.tower.radiant { background: var(--radiant); border-color: var(--radiant); color: var(--s1); }
.lt-ltl-ev.tower.dire { background: #f07067; border-color: #f07067; color: var(--s1); }
.lt-ltl-items {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 4px;
  border: 1.5px solid;
  background: var(--s2);
  cursor: default;
}
.lt-ltl-items.radiant { top: 32%; border-color: var(--radiant); }
.lt-ltl-items.dire { top: 68%; border-color: #f07067; }
.lt-ltl-item, .lt-ltl-items .lt-icon-missing { width: 24px; height: 18px; border-radius: 2px; object-fit: cover; background: var(--s3); }
.lt-ltl-items b { padding: 0 3px; font-size: 10px; color: var(--text-subtle); }
/* What has not happened yet at the scrubbed minute fades back, as in Leetify. */
.lt-ltl-ev.later, .lt-ltl-items.later { opacity: 0.3; }
.lt-ltl-ev:hover, .lt-ltl-items:hover { z-index: 3; opacity: 1; }

.lt-ltl-cursor {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 2px;
  margin-left: -1px;
  background: var(--brand);
  pointer-events: none;
  z-index: 4;
}
.lt-ltl-cursor i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand);
  background: rgba(248, 73, 130, 0.18);
}
.lt-ltl-cursor i::before, .lt-ltl-cursor i::after {
  position: absolute;
  top: 3px;
  font-style: normal;
  font-size: 13px;
  line-height: 18px;
  color: var(--text);
}
.lt-ltl-cursor i::before { content: "\2039"; left: 9px; }
.lt-ltl-cursor i::after { content: "\203A"; right: 9px; }
/* The real control: an invisible range input over the axis, so dragging,
   clicking and the keyboard all work without any custom code. */
.lt-ltl-range {
  position: absolute;
  left: -26px;
  right: -26px;
  top: 50%;
  width: calc(100% + 52px);
  height: 40px;
  margin: -20px 0 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
}
.lt-ltl-ticks { position: absolute; left: 0; right: 0; bottom: -22px; height: 16px; }
.lt-ltl-ticks span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--text-subtle); }
.lt-ltl-caption {
  margin: 30px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}
.lt-ltl-verdict {
  justify-self: start;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lt-ltl-verdict.radiant { background: var(--radiant); color: var(--s1); }
.lt-ltl-verdict.dire { background: var(--dire); color: var(--text); }
.lt-ltl-verdict.draw { background: var(--s5); color: var(--text-data); }

.lt-lane-creeps { font-size: 13px; }
.lt-lane-table tr.lt-row-off td { opacity: 0.4; }

/* Picking players in a duo lane: the portrait cards are toggles. */
button.lt-h2h-hero { padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; transition: opacity 0.12s, transform 0.12s; }
button.lt-h2h-hero:hover { transform: translateY(-2px); }
button.lt-h2h-hero:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lt-h2h-hero.off { opacity: 0.4; border-color: var(--border-light); }
.lt-h2h-hero.off:hover { opacity: 0.75; }
.lt-h2h-check {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--text);
  background: rgba(25, 23, 30, 0.7);
}
.lt-h2h-hero.radiant:not(.off) .lt-h2h-check { background: var(--radiant); border-color: var(--radiant); }
.lt-h2h-hero.dire:not(.off) .lt-h2h-check { background: var(--dire); border-color: var(--dire); }
.lt-h2h-hero:not(.off) .lt-h2h-check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--s1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lt-h2h-hint { margin: 22px 0 0; font-size: 13px; color: var(--text-subtle); text-align: center; }
.lt-h2h-reset {
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--brand);
  background: rgba(248, 73, 130, 0.15);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.lt-h2h-reset:hover { background: rgba(248, 73, 130, 0.3); }
.lt-lane-table .lt-player { min-width: 220px; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1280px) {
  .lt-highlights, .lt-award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt .lan-new-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lt-h2h { grid-template-columns: 1fr; gap: 20px; }
  .lt-h2h-side { justify-content: center; }
  .lt-h2h-side.dire { order: 3; flex-direction: row; }
  .lt-h2h-ahead.radiant { right: auto; left: 0; bottom: auto; top: -22px; }
  .lt-h2h-ahead.dire { left: auto; right: 0; bottom: auto; top: -22px; }
  .lt-mvp-row { grid-template-columns: 1fr; }
  .lt-dmg-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  /* The site's own top bar keeps the site's font. */
.lt .topbar { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

.lt main { padding: 20px 16px 48px; }
  .lt-podium { grid-template-columns: 1fr; gap: 12px; }
  .lt-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lt-wp { grid-template-columns: 64px minmax(0, 1fr) 0; }
  .lt-wp-end { display: none; }
  .lt-wp-log { columns: 1; }
  .lt-grid-2 { grid-template-columns: 1fr; }
  .lt-yvy { grid-template-columns: 1fr; }
  .lt-award-grid, .lt .lan-new-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-result-word, .lt-score { font-size: 32px; }
  .lt-result-side { font-size: 18px; }
  .lt-meta { flex-wrap: wrap; font-size: 13px; }
}

@media (max-width: 560px) {
  .lt-hero { padding: 16px 16px 0; }
  .lt .report-tabs { margin: 12px -16px 0; padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; }
  .lt .report-tab { padding: 12px 14px 14px; white-space: nowrap; }
  .lt-chip { height: 44px; font-size: 15px; }
  .lt-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lt-highlight { min-height: 92px; padding: 12px; }
  .lt-highlight-value { font-size: 18px; }
  .lt-award-grid, .lt .lan-new-grid { grid-template-columns: 1fr; }
  .lt-result { flex-wrap: wrap; gap: 6px 10px; padding: 12px 16px; }
  .lt-result-word, .lt-score { font-size: 26px; }
  .lt-score { margin-left: 0; white-space: nowrap; }
  .lt-result-side { font-size: 15px; }
  .lt-legend { flex-direction: column; gap: 4px; }
  .lt-lane-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lt-lane-tab { height: 48px; padding: 0 10px; font-size: 14px; gap: 8px; }
  .lt-lane-tab svg, .lt-lane-tab-tag { display: none; }
  .lt-h2h { padding: 16px; }
  .lt-h2h-head { gap: 10px; padding: 12px; }
  .lt-h2h-name b { font-size: 14px; }
  .lt-h2h-name small { font-size: 12px; }
  .lt-h2h-clock { font-size: 20px; }
  .lt-h2h-label { font-size: 14px; }
  .lt-ltl { grid-template-columns: minmax(0, 1fr); }
  .lt-ltl-start { display: none; }
  .lt-ltl-verdict { justify-self: center; margin-top: 30px; }
  .lt-ltl-items .lt-ltl-item:nth-child(n+2), .lt-ltl-items b { display: none; }
  .lt-mvp { flex-direction: column; align-items: flex-start; }
  .lt-mvp-parts li { grid-template-columns: 110px 1fr 44px; }
  .lt-flow-chart { padding-left: 0; }
  .lt-flow-axis-label { display: none; }
  .lt-wp { grid-template-columns: 0 minmax(0, 1fr) 0; padding-right: 0; }
  .lt-wp-axis, .lt-wp-end { display: none; }
  .lt-wp-plot { height: 200px; }
  /* Too narrow for every kill: keep the objectives, one row per side. */
  .lt-wp-lane { height: 36px; }
  .lt-wp-ev.kill { display: none; }
  .lt-wp-lane .lt-wp-ev:not(.kill) { top: 50%; width: 20px; height: 20px; }
  .lt-wp-facts { grid-template-columns: 1fr; }
  .lt-swings li { grid-template-columns: 56px minmax(0, 1fr); }
  .lt-swing-when, .lt-swing-after { display: none; }
  .lt-wp-ticks .minor { display: none; }
  .lt-wp-log { columns: 1; }
  .lt-dmg-sides { grid-template-columns: 1fr; gap: 16px; }
  .lt-picker { grid-template-columns: 1fr; padding: 12px; gap: 14px; }
  .lt-picker-row { gap: 6px; }
  .lt-picker-item span { padding: 4px 5px; font-size: 11px; }
  .lt-yvy-grid { grid-template-columns: minmax(0, 1fr) 72px 72px 64px; }
  .lt-yvy-grid.no-avg { grid-template-columns: minmax(0, 1fr) 80px 80px; }
  .lt-yvy-row > span, .lt-yvy-colhead { padding: 0 8px; }
  .lt-yvy-colhead { font-size: 9px; letter-spacing: 0.04em; }
    .lt-yvy-stat { font-size: 13px; }
  .lt-yvy-rating { flex-direction: column; align-items: flex-start; }
}