:root {
  color-scheme: dark;
  --bg: #090b12;
  --panel: #141725;
  --panel-2: #1b2132;
  --line: #30374f;
  --text: #f5f8ff;
  --muted: #aab4c8;
  --brand: #27f28b;
  --brand-2: #a855f7;
  --brand-3: #7c3aed;
  --brand-soft: rgba(39, 242, 139, .14);
  --brand-line: rgba(168, 85, 247, .55);
  --good: #27f28b;
  --risk: #ef4444;
  --ok: #8b5cf6;
  --shadow: 0 16px 40px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Friends room */
.community-chat {
  width: min(900px, 100%);
  margin-inline: auto;
}

.chat-hero {
  padding: 24px;
  border: 1px solid #7040a8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(99, 241, 153, .18), transparent 36%),
    linear-gradient(135deg, #17152a, #101522);
}

.chat-hero span,
.chat-title span {
  color: #61f197;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chat-hero h2 {
  margin: 5px 0;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
}

.chat-hero p {
  margin: 0;
  color: #aeb8d4;
}

.chat-join-card,
.chat-composer {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid #323b55;
  border-radius: 16px;
  background: #111622;
}

.chat-join-card label {
  display: grid;
  gap: 7px;
  color: #b9c2dc;
  font-weight: 800;
}

.chat-join-card input,
.chat-composer textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #414b68;
  border-radius: 12px;
  background: #090e18;
  color: #fff;
  font: inherit;
}

.chat-join-card input {
  min-height: 48px;
  padding: 0 14px;
}

.chat-composer textarea {
  min-height: 116px;
  padding: 14px;
  resize: vertical;
}

.chat-join-card .primary,
.chat-post-button {
  min-height: 48px;
  border-color: #a85df5;
  background: linear-gradient(135deg, #7637ea, #b34df0);
  color: #fff;
  font-weight: 900;
}

.chat-post-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.chat-title,
.chat-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-upload {
  display: grid;
  gap: 10px;
}

.chat-upload > label {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px dashed #7242a3;
  border-radius: 12px;
  color: #d8c3ff;
  font-weight: 900;
  cursor: pointer;
}

.chat-upload > label input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.chat-image-preview {
  position: relative;
  overflow: hidden;
  max-width: 420px;
  border: 1px solid #46506c;
  border-radius: 14px;
}

.chat-image-preview img {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  background: #080c14;
}

.chat-image-preview button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(7, 10, 18, .88);
  color: #ff8fc9;
}

.chat-error {
  margin: 0;
  color: #ff7cab;
  font-weight: 800;
}

.chat-feed {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.chat-post {
  padding: 16px;
  border: 1px solid #333d57;
  border-radius: 16px;
  background: linear-gradient(145deg, #151a29, #10141f);
}

.chat-post header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-post header div {
  display: grid;
  gap: 2px;
}

.chat-delete {
  margin-left: auto;
  border: 1px solid rgba(255, 94, 147, .55);
  border-radius: 9px;
  padding: 7px 10px;
  background: rgba(255, 73, 133, .1);
  color: #ff8eb5;
  font-size: .72rem;
  font-weight: 850;
}

.chat-delete:hover,
.chat-delete:focus-visible {
  border-color: #ff5e93;
  background: rgba(255, 73, 133, .2);
  color: #ffd4e3;
}

.chat-post header small,
.chat-upload small {
  color: #8794b4;
}

.chat-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #56e99b;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fbf85, #8d4fea);
  color: #07110e;
  font-weight: 950;
}

.chat-post p {
  margin: 14px 0 0;
  color: #e5e9f5;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-post-image {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 1px solid #3d4865;
  border-radius: 14px;
  background: #080c14;
}

.chat-post-image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.chat-post-image.expanded img {
  max-height: none;
}

@media (max-width: 640px) {
  .community-chat {
    padding: 12px !important;
  }

  .chat-hero,
  .chat-join-card,
  .chat-composer,
  .chat-post {
    padding: 14px;
  }

  .chat-title,
  .chat-composer-head {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-title .button-row,
  .chat-title .button-row button,
  .chat-composer-head button {
    width: 100%;
  }

  .chat-title .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-post-image img {
    max-height: 420px;
  }
}

/* Lineup Generator portrait repair. */
@media (max-width: 639px) and (orientation: portrait) {
  .lineup-generator,
  .lineup-generator .lineup-block,
  .lineup-generator .lineup-results,
  .lineup-generator .lineup-group,
  .lineup-generator .lineup-result-grid,
  .lineup-generator .generated-lineup,
  .lineup-generator .lineup-exposure-report {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    transform: none !important;
    inset: auto !important;
    box-sizing: border-box !important;
  }

  .lineup-generator {
    display: grid !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .lineup-generator .lineup-block {
    display: grid !important;
    gap: 12px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  .lineup-generator .lineup-group {
    display: grid !important;
    gap: 9px !important;
  }

  .lineup-generator .lineup-group + .lineup-group {
    margin-top: 14px !important;
  }

  .lineup-generator .lineup-result-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .lineup-generator .generated-lineup {
    display: block !important;
    overflow: hidden !important;
  }

  .lineup-generator .generated-lineup-head {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .lineup-generator .generated-lineup-head > strong {
    display: block !important;
    min-width: 0 !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .lineup-generator .generated-lineup-head > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .lineup-generator .generated-lineup-head button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 7px 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lineup-generator .generated-lineup ol {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .lineup-generator .generated-lineup li {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .lineup-generator .generated-lineup li span,
  .lineup-generator .generated-lineup li small {
    display: block !important;
    grid-column: 1 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .lineup-generator .generated-lineup li b {
    grid-column: 1 !important;
    justify-self: start !important;
    margin-top: 3px !important;
  }

  .lineup-generator .lineup-exposure-report {
    display: grid !important;
    gap: 9px !important;
    margin-top: 14px !important;
  }

  .lineup-generator .lineup-exposure-report > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

* { box-sizing: border-box; }
html { min-height: 100%; min-height: 100dvh; background: var(--bg); }
body, #app { min-height: 100%; min-height: 100dvh; }
body { margin: 0; background: radial-gradient(circle at top left, rgba(168, 85, 247, .20), transparent 32rem), radial-gradient(circle at 92% 8%, rgba(39, 242, 139, .10), transparent 28rem), var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }

.metric-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.live-line-badge { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid rgba(250, 204, 21, .75); border-radius: 999px; background: rgba(250, 204, 21, .13); color: #fde047; font-size: 10px; font-weight: 850; letter-spacing: .02em; text-transform: none; }
.live-prop-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.prop-edge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; color: #0f172a !important; font-size: 14px; font-weight: 950; letter-spacing: .01em; text-shadow: none !important; }
.prop-edge.over { background: #27f28b; border: 1px solid #8fffc2; box-shadow: 0 0 15px rgba(39, 242, 139, .2); }
.prop-edge.under { background: #ff4f8b; border: 1px solid #ff9fbe; box-shadow: 0 0 15px rgba(255, 79, 139, .2); }
.live-streak { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .045em; }
.live-streak.over { color: #0f172a; background: #27f28b; border: 1px solid #8fffc2; }
.live-streak.under { color: #0f172a; background: #ff4f8b; border: 1px solid #ff9fbe; }
.prop-target-stack { display: grid; justify-items: end; align-content: start; gap: 6px; }
.stat-pill.live-target { color: #0f172a; border-color: #8fffc2; background: linear-gradient(145deg, #27f28b, #a7f3d0); box-shadow: 0 0 22px rgba(39, 242, 139, .18); }
.stat-pill.live-target span { color: #0f172a; letter-spacing: .09em; }
.stat-pill.live-target strong { color: #0f172a; }
.score-pill,
.score-pill *,
.rank-pill,
.rank-pill *,
.prop-edge,
.prop-edge *,
.live-streak,
.live-streak *,
.stat-pill.live-target,
.stat-pill.live-target * { color: #0f172a !important; text-shadow: none !important; }
.tier-chips { display: flex; justify-content: flex-end; gap: 5px; }
.tier-chip { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 7px; font-size: .68rem; font-weight: 950; letter-spacing: .02em; white-space: nowrap; }
.tier-chip.goblin { color: #ffd38a; border: 1px solid rgba(245, 158, 11, .62); background: rgba(245, 158, 11, .12); }
.tier-chip.demon { color: #ff9aa9; border: 1px solid rgba(244, 63, 94, .65); background: rgba(244, 63, 94, .12); }
main { width: min(1120px, 100%); min-height: 100dvh; margin: 0 auto; padding: 18px 14px calc(92px + env(safe-area-inset-bottom, 0px)); }

.app-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 10px 2px 14px;
}

.brand-home {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
}

.brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(39, 242, 139, .55);
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 12px 32px rgba(39, 242, 139, .18), 0 0 0 4px rgba(168, 85, 247, .08);
}

.landing-shell { width: min(1180px, 100%); min-height: 100dvh; margin: 0 auto; padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px) 28px; display: flex; flex-direction: column; }
.landing-header { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 48px); align-items: center; }
.landing-logo { width: 120px; aspect-ratio: 1; border-radius: 28px; object-fit: cover; box-shadow: 0 22px 70px rgba(69, 227, 192, .18), 0 0 0 1px rgba(109, 242, 190, .22); }
.landing-title > span, .portal-heading > span { color: var(--brand); font-size: .76rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.landing-title h1 { margin: 5px 0 8px; font-size: clamp(2.5rem, 7vw, 5.6rem); line-height: .92; letter-spacing: -.065em; }
.landing-title h1 em { color: var(--brand); font-style: normal; }
.landing-title p { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(.95rem, 1.5vw, 1.14rem); line-height: 1.55; }
.landing-access { align-self: start; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .78rem; white-space: nowrap; background: rgba(15, 19, 28, .72); }
.landing-access b { color: var(--text); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 15px var(--brand); }
.sport-portal { margin-top: clamp(44px, 8vw, 86px); }
.portal-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.portal-heading h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.3rem); }
.sport-portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sport-portal-card { position: relative; min-height: 142px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 22px; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: linear-gradient(135deg, rgba(25, 31, 45, .96), rgba(12, 17, 25, .94)); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.sport-portal-card:hover, .sport-portal-card:focus-visible { transform: translateY(-3px); border-color: var(--brand-line); box-shadow: 0 18px 54px rgba(0, 0, 0, .28), 0 0 40px rgba(39, 242, 139, .07); }
.sport-portal-card.all-sports { grid-column: 1 / -1; min-height: 164px; background: linear-gradient(120deg, rgba(40, 20, 66, .92), rgba(13, 32, 39, .95)); border-color: rgba(168, 85, 247, .46); }
.portal-number { align-self: start; color: #64708a; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.portal-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid rgba(82, 236, 188, .3); border-radius: 18px; color: var(--brand); background: rgba(39, 242, 139, .07); font-size: 1.75rem; font-weight: 950; }
.all-sports .portal-icon { width: 82px; color: #e5d6ff; border-color: rgba(168, 85, 247, .5); background: rgba(168, 85, 247, .13); font-size: 1rem; letter-spacing: .08em; }
.portal-copy { display: grid; gap: 7px; }
.portal-copy strong { font-size: clamp(1.15rem, 2vw, 1.65rem); }
.portal-copy small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.portal-arrow { font-size: 1.7rem; color: var(--brand); }
.landing-footer { margin-top: auto; padding-top: 52px; display: flex; justify-content: space-between; gap: 16px; color: #7f8ba3; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }

@media (max-width: 720px) {
  .landing-header { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .landing-logo { width: 76px; border-radius: 20px; }
  .landing-access { grid-column: 1 / -1; justify-self: start; }
  .sport-portal-grid { grid-template-columns: 1fr; }
  .sport-portal-card.all-sports { grid-column: auto; }
  .sport-portal-card { min-height: 116px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 13px; padding: 16px; }
  .portal-number { display: none; }
  .portal-icon, .all-sports .portal-icon { width: 54px; height: 54px; border-radius: 14px; font-size: 1.3rem; }
  .all-sports .portal-icon { font-size: .78rem; }
  .landing-footer { flex-direction: column; padding-top: 34px; }
}

.sport-switch {
  display: inline-flex;
  gap: 8px;
  margin-top: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 28, .88);
}

.sport-switch button {
  min-width: 76px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.sport-switch .active {
  border-color: var(--brand-line);
  color: var(--brand);
  background: linear-gradient(135deg, rgba(39, 242, 139, .13), rgba(168, 85, 247, .18));
}
.sport-quick-select { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.sport-quick-select select { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 34px 0 12px; background: #101521; color: var(--text); font: inherit; text-transform: none; letter-spacing: 0; }
.filter-dropdown { position: relative; width: fit-content; margin-top: 8px; }
.filter-dropdown summary { min-height: 40px; display: flex; align-items: center; gap: 10px; list-style: none; border: 1px solid var(--line); border-radius: 10px; padding: 0 34px 0 13px; background: #101521; color: var(--text); font-size: .82rem; font-weight: 850; cursor: pointer; }
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown summary::after { content: "⌄"; position: absolute; right: 12px; color: var(--muted); }
.filter-dropdown[open] { z-index: 30; }
.filter-dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 31; width: min(560px, calc(100vw - 32px)); max-height: min(60vh, 440px); overflow-y: auto; display: flex; flex-wrap: wrap; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #0d1220; box-shadow: 0 20px 55px rgba(0,0,0,.48); }
.stats-filter { margin: 10px 0 14px; }
.stats-filter .filter-dropdown-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats-filter .filter-dropdown-menu button { min-width: 0; }

.prop-tier-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 2px;
}

.prop-tier-switch button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(16, 20, 28, .9);
  color: var(--muted);
  font-weight: 850;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.prop-tier-switch button:hover { transform: translateY(-1px); }

.prop-tier-switch button.active {
  border-color: rgba(168, 85, 247, .88);
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 8px 24px rgba(124, 58, 237, .28);
}

.prop-tier-switch button[data-prop-tier="regular"].active { border-color: #c4b5fd; color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); }
.prop-tier-switch button[data-prop-tier="goblin"].active { border-color: #86efac; color: #07110d; background: linear-gradient(135deg, #22c55e, #86efac); box-shadow: 0 8px 24px rgba(34, 197, 94, .25); }
.prop-tier-switch button[data-prop-tier="demon"].active { border-color: #f9a8d4; color: #fff; background: linear-gradient(135deg, #be185d, #ec4899); box-shadow: 0 8px 24px rgba(236, 72, 153, .25); }

.stat-pill.live-target.regular { border-color: #d8b4fe; background: linear-gradient(145deg, #c4b5fd, #e9d5ff); }

.stat-pill.live-target.goblin {
  color: #0f172a;
  border-color: #8fffc2;
  background: linear-gradient(145deg, #27f28b, #6ee7b7);
}

.stat-pill.live-target.goblin span,
.stat-pill.live-target.goblin strong { color: #0f172a; }

.stat-pill.live-target.demon {
  color: #0f172a;
  border-color: #f9a8d4;
  background: linear-gradient(145deg, #f472b6, #fbcfe8);
  box-shadow: 0 0 22px rgba(236, 72, 153, .25);
}

.stat-pill.live-target.demon span,
.stat-pill.live-target.demon strong { color: #0f172a; }

.global-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.global-switch button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(16, 20, 28, .88);
  color: var(--muted);
  font-weight: 850;
}

.global-switch button.active {
  border-color: var(--brand-line);
  color: var(--brand);
  background: linear-gradient(135deg, rgba(39, 242, 139, .13), rgba(168, 85, 247, .18));
}

.global-switch b {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #07110d;
  font-size: .75rem;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin: 12px 0 6px;
  font-size: clamp(2rem, 9vw, 4.8rem);
  line-height: .95;
  letter-spacing: 0;
  color: var(--text);
  background: linear-gradient(105deg, #ffffff 0%, #f4f0ff 34%, var(--brand) 62%, var(--brand-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(39, 242, 139, .08);
}
h2 { margin-bottom: 0; font-size: 1.35rem; }
h3 { margin: 22px 0 10px; font-size: 1rem; color: #d9c7ff; }
p { color: var(--muted); line-height: 1.5; }

.panel > h3 {
  color: var(--brand);
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: 0;
}

.date-control {
  justify-self: start;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.date-control input {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--panel);
  color: var(--text);
}

.search-input {
  width: 100%;
  min-height: 46px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  background: #0f131c;
  color: var(--text);
}

.search-input:focus {
  outline: none;
  border-color: var(--brand-line);
  box-shadow: 0 0 0 3px rgba(39, 242, 139, .08);
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 14px;
  background: linear-gradient(180deg, var(--bg) 76%, rgba(13, 15, 20, 0));
}

.tabs button, .ghost, .segmented button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #11151d;
  color: var(--muted);
  padding: 0 12px;
  white-space: nowrap;
}

.tabs .active, .ghost:hover, .segmented .active {
  border-color: var(--brand-line);
  color: var(--brand);
  background: linear-gradient(135deg, rgba(39, 242, 139, .12), rgba(168, 85, 247, .16));
}

.streamlined-tabs { overflow: visible; align-items: center; flex-wrap: wrap; }
.nav-more { position: relative; }
.nav-more summary { list-style: none; display: grid; place-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #11151d; color: var(--muted); font-weight: 800; cursor: pointer; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " +"; }
.nav-more[open] summary::after { content: " −"; }
.nav-more summary.active { border-color: var(--brand-line); color: var(--brand); }
.nav-more > div { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 7px; width: min(390px, calc(100vw - 28px)); padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 15, 23, .98); box-shadow: 0 18px 55px rgba(0, 0, 0, .5); }

.pick-direction-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(3, 5, 10, .74); backdrop-filter: blur(5px); }
.pick-direction-dialog { display: grid; gap: 10px; width: min(360px, 100%); padding: 22px; border: 1px solid var(--brand-line); border-radius: 18px; background: #151a27; box-shadow: 0 24px 80px rgba(0, 0, 0, .62); }
.pick-direction-dialog > span { color: var(--brand); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.pick-direction-dialog > strong { color: #fff; font-size: 1.25rem; }
.pick-direction-dialog > small { margin-bottom: 5px; color: var(--muted); }
.pick-choice { min-height: 52px; border: 0; border-radius: 12px; color: #fff; font-size: 1.12rem; font-weight: 950; }
.pick-choice.over { background: linear-gradient(135deg, #2563eb, #6366f1); }
.pick-choice.under { background: linear-gradient(135deg, #e11d48, #be123c); }
.pick-choice-cancel { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font-weight: 850; }

.chat-rooms { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 14px; padding: 2px 0 8px; }
.chat-rooms button { min-width: 70px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: #11151d; color: var(--muted); font-weight: 900; }
.chat-rooms button.active { border-color: var(--brand-line); background: rgba(39, 242, 139, .13); color: var(--brand); }

.movement-title { align-items: flex-start; }
.movement-title p { max-width: 680px; margin: 8px 0 0; font-size: .86rem; }
.movement-status { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 11px 13px; border: 1px solid rgba(39, 242, 139, .28); border-radius: 10px; background: rgba(39, 242, 139, .07); }
.movement-status span { color: var(--brand); font-weight: 900; }
.movement-status small { color: var(--muted); }
.movement-status.stale { border-color: rgba(250, 204, 21, .38); background: rgba(250, 204, 21, .08); }
.movement-status.stale span { color: #fde047; }
.movement-list { display: grid; gap: 8px; }
.movement-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(16, 20, 28, .88); }
.movement-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font-size: 1.15rem; font-weight: 950; }
.movement-row.up .movement-arrow { background: rgba(244, 63, 94, .16); color: #fb7185; }
.movement-row.down .movement-arrow { background: rgba(39, 242, 139, .14); color: var(--brand); }
.movement-row div { display: grid; gap: 3px; min-width: 0; }
.movement-row div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movement-row div small, .movement-row time { color: var(--muted); font-size: .72rem; text-transform: capitalize; }
.movement-row > b { color: #fff; }

@media (max-width: 620px) {
  main { padding-inline: 10px; }
  h1 { font-size: clamp(2rem, 12vw, 3rem); }
  .sport-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 4px; }
  .sport-switch button { min-width: 0; padding-inline: 4px; font-size: .78rem; }
  .global-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .global-switch button { padding-inline: 7px; }
  .tabs { position: static; top: auto; background: transparent; }
  .streamlined-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .streamlined-tabs > button { min-width: 0; padding-inline: 5px; font-size: .72rem; }
  .nav-more { position: relative; }
  .nav-more[open] { grid-column: 1 / -1; }
  .nav-more > div { position: static; width: 100%; margin-top: 6px; grid-template-columns: 1fr 1fr; box-shadow: none; }
  .movement-title, .movement-status { align-items: stretch; flex-direction: column; }
  .movement-title .button-row { width: 100%; }
  .movement-title .button-row button { flex: 1; }
  .movement-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  .movement-row time { grid-column: 2 / -1; }
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.segmented button {
  min-height: 34px;
  font-size: .86rem;
}

.game-filter {
  padding-bottom: 4px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.game-filter button {
  flex: 0 0 auto;
}

.notice {
  border: 1px solid var(--brand-line);
  background: linear-gradient(135deg, rgba(39, 242, 139, .09), rgba(168, 85, 247, .11));
  color: #d9c7ff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.metric, .panel, .slate-card, .player-card, .prop-card, .weather-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent), var(--panel);
}

.metric { min-height: 106px; padding: 14px; display: grid; align-content: space-between; }
.metric span, .kicker, .section-title span { color: var(--brand); font-size: .72rem; text-transform: uppercase; letter-spacing: 0; font-weight: 800; }
.metric strong { font-size: 2rem; }
.metric small, small { color: var(--muted); }

.panel { padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.stack { display: grid; gap: 10px; }

.slate-card, .player-card, .prop-card, .weather-card {
  width: 100%;
  text-align: left;
  padding: 13px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.slate-card:hover, .player-card:hover, .prop-card:hover, .weather-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand-line);
  background-color: var(--panel-2);
}

.card-top, .context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  color: var(--muted);
  font-size: .8rem;
}

.split-summary {
  justify-content: flex-start;
  padding: 10px 0 14px;
}

.matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}

.matchup div:not(.at) { display: grid; gap: 4px; }
.matchup b { font-size: 1.35rem; }
.matchup span { color: var(--muted); font-size: .8rem; }
.at { color: var(--brand); font-weight: 900; }

.weather-badge {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--muted);
}
.weather-badge strong { color: var(--ok); }
.weather-badge.good strong { color: var(--good); }
.weather-badge.risk strong { color: var(--risk); }

.team-block { margin-top: 18px; }
.player-card { display: grid; gap: 12px; }
.player-card > div:first-child, .prop-card > div:first-child { display: grid; gap: 4px; }
.player-card span { color: var(--muted); font-size: .82rem; }

.injury-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, .45);
  background: rgba(127, 29, 29, .28);
  color: #fecaca;
  font-size: .66rem;
  font-weight: 950;
  vertical-align: middle;
}

.injury-badge.gtd,
.injury-badge.doubtful {
  border-color: rgba(250, 204, 21, .42);
  background: rgba(250, 204, 21, .12);
  color: #fde68a;
}

.injury-grid {
  display: grid;
  gap: 10px;
}

.injury-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(250, 204, 21, .28);
  border-radius: 8px;
  background: rgba(250, 204, 21, .08);
  color: var(--text);
  text-align: left;
}

.injury-card.out {
  border-color: rgba(248, 113, 113, .36);
  background: rgba(127, 29, 29, .18);
}

.injury-card span,
.injury-card small {
  color: var(--muted);
}

.muted-row {
  opacity: .62;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
}
.mini-stats div, .score-grid div, .insight-grid div {
  padding: 10px;
  border-radius: 8px;
  background: #10141c;
}
.mini-row .live-board-line { color: #0f172a; text-shadow: none; }
.mini-row b.tier-badge { display: grid; grid-template-columns: 1fr; gap: 0; min-width: 56px; padding: 4px 7px; color: #0f172a; line-height: 1.05; }
.mini-row b.tier-badge i { color: inherit; font-size: .48rem; font-style: normal; font-weight: 950; letter-spacing: .06em; }
.mini-row b.tier-regular { border: 1px solid #d8b4fe; background: linear-gradient(145deg, #c4b5fd, #e9d5ff); }
.mini-row b.tier-goblin { border: 1px solid #86efac; background: linear-gradient(145deg, #22c55e, #86efac); }
.mini-row b.tier-demon { border: 1px solid #f9a8d4; background: linear-gradient(145deg, #f472b6, #fbcfe8); }
.mini-row b.tier-fallback { border: 1px solid #64748b; color: #e2e8f0; background: #1e293b; }
dt { color: var(--muted); font-size: .68rem; }
dd { margin: 2px 0 0; font-weight: 850; }

.score-pill {
  justify-self: start;
  min-width: 48px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #07110d;
  font-weight: 950;
}

.rank-pill {
  min-width: 58px;
  align-content: center;
  gap: 2px;
  text-align: center;
  line-height: 1;
}

.rank-pill span {
  display: block;
  font-size: .56rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.rank-pill strong {
  display: block;
  font-size: 1.12rem;
}

.prop-grid, .weather-grid, .insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.prop-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.prop-card p { grid-column: 1 / -1; margin: 0; font-size: .86rem; }

.prop-density-toggle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8, 11, 17, .68); }
.prop-density-toggle button { border: 0; border-radius: 7px; padding: 7px 10px; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 850; cursor: pointer; }
.prop-density-toggle button.active { color: var(--text); background: rgba(168, 85, 247, .24); box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .35); }
.prop-density-compact .prop-card { gap: 8px 10px; padding: 10px; }
.prop-density-compact .prop-card > p,
.prop-density-compact .prop-card .mini-prop-chart { display: none; }
.prop-density-compact .prop-card .prop-stat-row { gap: 5px; }
.prop-density-compact .prop-card .prop-stat-row span { padding: 4px 6px; font-size: .68rem; }
.prop-density-compact .prop-card .card-tier-pill { min-height: 40px; padding: 4px 6px; }
.prop-density-compact .prop-card .live-prop-summary { margin-top: 0; padding-top: 7px; }
.prop-density-compact .prop-card .pick-side-controls { margin-top: 0; }

.top-prop-signal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.top-prop-signal strong {
  padding: 4px 8px;
  border-radius: 999px;
  color: #08111b;
  font-size: .7rem;
  letter-spacing: .055em;
}
.top-prop-signal.over strong { background: #39f29a; }
.top-prop-signal.under strong { background: #ff5b91; }
.top-prop-signal span { color: var(--text); font-size: .76rem; font-weight: 850; }
.top-prop-signal small { margin-left: auto; color: var(--muted); font-size: .7rem; font-weight: 750; }

.top-trend-scopes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 4px 0 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 11, 17, .72);
}
.top-sport-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; }
.top-sport-filters button { min-height: 34px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 11, 17, .68); color: var(--muted); font-size: .74rem; font-weight: 850; cursor: pointer; }
.top-sport-filters button.active { border-color: #a855f7; color: #6cf5a6; background: rgba(124, 58, 237, .2); box-shadow: 0 0 16px rgba(124, 58, 237, .12); }
.top-direction-filters { display: inline-flex; gap: 5px; margin: 0 0 10px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 11, 17, .68); }
.top-direction-filters button { min-height: 32px; padding: 5px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .72rem; font-weight: 900; cursor: pointer; }
.top-direction-filters button.active { color: var(--text); background: rgba(168, 85, 247, .22); }
.top-direction-filters button.over.active { color: #07110d; background: #39f29a; }
.top-direction-filters button.under.active { color: #160811; background: #ff5b91; }
.top-trend-scopes button { min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 850; cursor: pointer; }
.top-trend-scopes button.active { color: var(--text); background: rgba(168, 85, 247, .2); box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .38); }
.top-prop-rates { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(5, 8, 13, .7); }
.top-prop-rates > span { display: grid; place-items: center; gap: 1px; min-width: 0; padding: 7px 3px; border-right: 1px solid var(--line); }
.top-prop-rates > span:last-child { border-right: 0; }
.top-prop-rates > span.active { background: rgba(168, 85, 247, .16); }
.top-prop-rates small { color: var(--muted); font-size: .62rem; font-weight: 850; }
.top-prop-rates strong { color: #f5e96b; font-size: .8rem; }
.top-prop-rates span.active strong { color: #66f2a1; }
.top-prop-rates em { color: var(--muted); font-size: .58rem; font-style: normal; }
.best-prop-rates { margin-top: 2px; }

@media (max-width: 520px) {
  .top-prop-signal { gap: 5px 7px; }
  .top-prop-signal small { width: 100%; margin-left: 0; }
  .top-trend-scopes button { min-height: 34px; padding: 5px 2px; font-size: .72rem; }
  .top-prop-rates {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 4px;
    clear: both;
  }
  .top-prop-rates > span { min-width: 0; padding: 6px 1px; overflow: hidden; }
  .top-prop-rates small { font-size: .52rem; white-space: nowrap; }
  .top-prop-rates strong { font-size: .68rem; white-space: nowrap; }
  .top-prop-rates em { font-size: .47rem; white-space: nowrap; }
  .top-sport-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .top-sport-filters button { padding-inline: 5px; }
  .top-direction-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .top-direction-filters button { padding-inline: 5px; }
  .best-prop-rates { display: grid; }
}

.card-tier-pills { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.card-tier-pill { display: grid; place-items: center; min-height: 48px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(9, 11, 18, .72); color: var(--muted); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; }
.card-tier-pill:hover { transform: translateY(-1px); border-color: rgba(168, 85, 247, .65); }
.card-tier-pill small { font-size: .64rem; font-weight: 850; text-transform: uppercase; }
.card-tier-pill strong { color: var(--text); font-size: .94rem; }
.card-tier-pill.selected { border-color: #c084fc; background: linear-gradient(145deg, rgba(124, 58, 237, .3), rgba(168, 85, 247, .14)); box-shadow: 0 0 0 2px rgba(192, 132, 252, .16), 0 8px 24px rgba(124, 58, 237, .2); }
.card-tier-pill.goblin.selected { border-color: #27f28b; box-shadow: 0 0 0 2px rgba(39, 242, 139, .14), 0 8px 24px rgba(39, 242, 139, .12); }
.card-tier-pill.regular.selected { border-color: #c4b5fd; }
.card-tier-pill.demon.selected { border-color: #f472b6; background: linear-gradient(145deg, rgba(190, 24, 93, .3), rgba(236, 72, 153, .14)); box-shadow: 0 0 0 2px rgba(244, 114, 182, .14), 0 8px 24px rgba(190, 24, 93, .16); }

.detail-prop-layout { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 16px; width: 100%; margin-bottom: 18px; }
.detail-prop-copy { display: grid; gap: 7px; min-width: 0; max-width: 100%; }
.detail-prop-heading { color: var(--text); font-size: 1rem; font-weight: 900; }
.detail-hit-summary { display: block; max-width: 38ch; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.detail-prop-actions { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.detail-line-input { display: block !important; }
.detail-line-input input { width: min(100%, 132px); min-width: 0; font-size: 1.1rem; font-weight: 900; }
.detail-favorite { display: flex; align-items: center; margin-top: 8px; }
.detail-tier-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; overflow-x: visible; padding-bottom: 8px; }
.detail-tier-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 10, 17, .76); }
.detail-tier-tabs button { min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-size: .7rem; font-weight: 850; }
.detail-tier-tabs button.active { border-color: #c084fc; color: #fff; background: rgba(124, 58, 237, .38); box-shadow: 0 0 14px rgba(168, 85, 247, .18); }
.detail-tier-tabs button:disabled { opacity: .32; cursor: not-allowed; }
.detail-tier-indicator { display: inline-flex; margin-left: 5px; padding: 2px 6px; border-radius: 999px; font-size: .58rem; font-weight: 900; vertical-align: middle; }
.detail-tier-indicator.regular { color: #d8b4fe; background: rgba(168, 85, 247, .15); }
.detail-tier-indicator.goblin { color: #75ffb2; background: rgba(39, 242, 139, .12); }
.detail-tier-indicator.demon { color: #e9d5ff; background: rgba(124, 58, 237, .2); }
.detail-tier-indicator.manual { color: #fde68a; background: rgba(245, 158, 11, .13); }
.live-prop-summary.dynamic { grid-column: 1 / -1; margin-top: 0; }

@media (min-width: 640px) {
  .detail-prop-layout { flex-direction: row; align-items: center; }
  .detail-favorite { margin-top: 0; }
  .detail-tier-tabs { border-radius: 999px; }
}

@media (max-width: 639px) {
  .manual-line-box { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  .manual-line-box > * { min-width: 0; max-width: 100%; }
  .detail-prop-layout { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .detail-prop-copy { width: 100%; }
  .detail-prop-actions { width: 100%; justify-content: flex-start; }
  .detail-line-input { flex: 1 1 auto; min-width: 0; }
  .detail-line-input input { width: 100%; max-width: 180px; }
  .detail-tier-row, .detail-tier-tabs { width: 100%; }
  .detail-tier-tabs button { flex: 1 1 auto; min-width: 78px; }
}

.mini-prop-chart { position: relative; grid-column: 1 / -1; display: flex; align-items: end; gap: 5px; height: 92px; padding: 15px 8px 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .07); border-radius: 10px; background: rgba(8, 10, 17, .62); }
.mini-prop-chart::after { content: ""; position: absolute; z-index: 2; left: 6px; right: 6px; bottom: var(--target); border-top: 2px dashed #c084fc; pointer-events: none; }
.mini-target-line { position: absolute; z-index: 3; right: 7px; bottom: calc(var(--target) + 3px); color: #e9d5ff; font-size: .62rem; }
.mini-prop-chart i { position: relative; flex: 1 1 0; min-width: 4px; border-radius: 4px 4px 2px 2px; background: rgba(255, 79, 139, .55); }
.mini-prop-chart i.hit { background: linear-gradient(180deg, #27f28b, rgba(39, 242, 139, .38)); }
.mini-prop-chart i em { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); color: var(--muted); font-size: .52rem; font-style: normal; }

.avatar-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.avatar-line > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.player-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(39, 242, 139, .28);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(39, 242, 139, .25), rgba(168, 85, 247, .28));
  color: var(--text);
  font-size: .78rem;
  font-weight: 950;
}

.player-avatar.small {
  width: 34px;
  height: 34px;
  font-size: .66rem;
}

.player-avatar.tiny {
  width: 28px;
  height: 28px;
  font-size: .58rem;
}

.player-avatar.large {
  width: 68px;
  height: 68px;
  font-size: 1rem;
}

.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.target-chip.with-avatar {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.hero-titleline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, var(--panel) 0 56%, transparent 57%), conic-gradient(var(--brand) var(--score), #2a3142 0);
  color: #fff8e9;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.stat-pill {
  justify-self: end;
  min-width: 62px;
  min-height: 50px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(48, 255, 166, .28);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(39, 242, 139, .22), rgba(168, 85, 247, .22));
}

.stat-pill span {
  color: #bbffe1;
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.stat-pill strong {
  color: var(--text);
  font-size: 1.25rem;
}

.prop-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.pick-star {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(168, 85, 247, .55);
  border-radius: 999px;
  background: rgba(16, 20, 28, .9);
  color: #d9c7ff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.pick-star:hover,
.pick-star:focus-visible,
.pick-star.active {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(39, 242, 139, .12);
}

.pick-star.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.line-favorite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pick-builder {
  display: grid;
  gap: 12px;
}

.pick-builder-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pick-builder-head div {
  display: grid;
  gap: 2px;
}

.pick-builder-head span {
  color: var(--brand);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pick-builder-tabs {
  display: flex;
  gap: 6px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 11, 19, .72);
}

.pick-builder-tabs button {
  border: 0;
  border-radius: 9px;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.pick-builder-tabs button.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, .9), rgba(168, 85, 247, .8));
  color: #fff;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .26);
}

.pick-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.pick-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 20, 28, .72);
  cursor: pointer;
}

.pick-card:hover,
.pick-card:focus-visible {
  border-color: rgba(39, 242, 139, .55);
}

.pick-card > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.pick-card b {
  line-height: 1.1;
}

.pick-card small {
  color: var(--muted);
  line-height: 1.25;
}

.pick-remove {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(239, 68, 68, .12);
  color: var(--text);
}

.pick-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.lineup-generator {
  display: grid;
  gap: 14px;
}

.lineup-block {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(21, 25, 40, .94), rgba(11, 14, 24, .92));
}

.lineup-generator button.primary {
  border: 1px solid #c084fc;
  border-radius: 9px;
  padding: 9px 13px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(124, 58, 237, .24);
}

.lineup-generator button.ghost {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 13px;
  background: rgba(124, 58, 237, .08);
  color: #d8ccff;
  font-weight: 850;
}

.lineup-block-head,
.lineup-generate-row,
.generated-lineup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lineup-block-head > div:first-child {
  display: grid;
  gap: 2px;
}

.lineup-block-head span {
  color: var(--brand);
  font-size: .73rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lineup-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lineup-entry-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  background: rgba(7, 10, 18, .68);
}

.lineup-entry-card input,
.lineup-entry-card select,
.lineup-entry-card textarea,
.lineup-size-control input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(10, 13, 23, .92);
  color: var(--text);
  font: inherit;
}

.lineup-entry-card textarea {
  resize: vertical;
  line-height: 1.35;
}

.lineup-manual-fields {
  display: grid;
  grid-template-columns: 1.25fr 1fr .65fr .75fr;
  gap: 7px;
}

.screenshot-upload {
  display: block;
  position: relative;
  min-height: 44px;
  cursor: pointer;
  overflow: hidden;
}

.screenshot-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

.screenshot-upload span {
  display: flex;
  justify-content: center;
  border: 1px dashed rgba(168, 85, 247, .62);
  border-radius: 9px;
  padding: 10px;
  color: #d8ccff;
  font-weight: 900;
  min-height: 44px;
  align-items: center;
}

.screenshot-file-name {
  display: block;
  overflow: hidden;
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screenshot-entry img,
.screenshot-placeholder {
  width: 100%;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 9px;
  object-fit: contain;
  background: #070a12;
}

.screenshot-placeholder {
  display: grid;
  place-content: center;
  gap: 4px;
  color: var(--muted);
  text-align: center;
}

.screenshot-placeholder span { font-weight: 900; }
.screenshot-placeholder small { font-size: .7rem; }
.screenshot-ocr-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem;
  color: #70f3a3;
  font-size: .78rem;
  font-weight: 900;
}
.screenshot-ocr-status .loading-dot {
  width: .7rem;
  height: .7rem;
  border: 2px solid rgba(112, 243, 163, .35);
  border-top-color: #70f3a3;
  border-radius: 50%;
  animation: lineup-ocr-spin .8s linear infinite;
}
@keyframes lineup-ocr-spin { to { transform: rotate(360deg); } }

.lineup-prop-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
}

.lineup-prop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  background: rgba(16, 20, 31, .86);
}

.lineup-prop.locked { border-color: rgba(39, 242, 139, .65); box-shadow: inset 3px 0 0 var(--brand); }
.lineup-prop.excluded { border-color: rgba(244, 114, 182, .45); opacity: .58; }
.lineup-prop > span { display: grid; gap: 3px; min-width: 0; }
.lineup-prop > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineup-prop > span small { color: var(--muted); font-size: .7rem; }

.lineup-prop-actions {
  display: flex;
  gap: 5px;
}

.lineup-prop-actions button,
.generated-lineup-head button {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  background: rgba(124, 58, 237, .08);
  color: #d8ccff;
  font-size: .68rem;
  font-weight: 900;
}

.lineup-prop-actions button.active { border-color: var(--brand); color: var(--brand); background: rgba(39, 242, 139, .1); }
.lineup-prop-actions button.danger { border-color: #f472b6; color: #f9a8d4; background: rgba(219, 39, 119, .12); }

.lineup-package-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  gap: 8px;
}

.lineup-size-control {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px;
  background: rgba(8, 11, 19, .68);
}

.lineup-size-control > span:first-child {
  color: #c4b5fd;
  font-size: .71rem;
  font-weight: 900;
}

.exposure-input {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}

.lineup-generate-row {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.lineup-notice {
  border: 1px solid rgba(39, 242, 139, .28);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(39, 242, 139, .07);
  color: #b8f8d7;
  font-size: .78rem;
}

.lineup-head-actions,
.generated-lineup-head > div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.lineup-group {
  display: grid;
  gap: 9px;
}

.lineup-group h3,
.lineup-exposure-report h3 {
  margin: 0;
  color: var(--brand);
  font-size: .9rem;
}

.lineup-group h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 5px;
  border-radius: 999px;
  background: rgba(39, 242, 139, .14);
  font-size: .68rem;
}

.lineup-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 9px;
}

.generated-lineup {
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, .42);
  border-radius: 10px;
  background: rgba(8, 11, 19, .76);
}

.generated-lineup-head {
  padding: 9px 11px;
  background: linear-gradient(90deg, rgba(124, 58, 237, .2), rgba(39, 242, 139, .05));
}

.generated-lineup ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.generated-lineup li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(73, 82, 108, .4);
  padding: 9px 11px;
}

.generated-lineup li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 850; }
.generated-lineup li small { color: var(--muted); font-size: .68rem; }
.generated-lineup li b { border-radius: 5px; padding: 3px 5px; background: rgba(39, 242, 139, .15); color: var(--brand); font-size: .58rem; }

.lineup-exposure-report {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.lineup-exposure-report > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 7px;
}

.lineup-exposure-report > div > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(8, 11, 19, .62);
}

.lineup-exposure-report b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .73rem; }
.lineup-exposure-report small { grid-column: 1; color: var(--muted); font-size: .63rem; }
.lineup-exposure-report strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--brand); }

.pick-side-controls {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.pick-side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(168, 85, 247, .42);
  border-radius: 9px;
  background: rgba(168, 85, 247, .08);
  color: #d8ccff;
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pick-side:hover { transform: translateY(-1px); border-color: rgba(168, 85, 247, .8); }
.pick-side.active { color: #fff; background: linear-gradient(135deg, #7c3aed, #a855f7); border-color: #c084fc; box-shadow: 0 0 0 1px rgba(192, 132, 252, .2), 0 8px 24px rgba(124, 58, 237, .32); }
.pick-side.under.active { background: linear-gradient(135deg, #7c3aed, #db2777); border-color: #f472b6; }
.pick-side:focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; }

.floating-pick-slip {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 0;
  width: min(920px, calc(100% - 24px));
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(100% + 24px));
  padding-bottom: env(safe-area-inset-bottom, 16px);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.floating-pick-slip.visible { pointer-events: auto; opacity: 1; transform: translate(-50%, -12px); }
.floating-slip-inner { overflow: hidden; border: 1px solid rgba(168, 85, 247, .6); border-radius: 16px; background: rgba(13, 15, 25, .96); box-shadow: 0 -12px 50px rgba(0, 0, 0, .48), 0 0 32px rgba(124, 58, 237, .16); backdrop-filter: blur(18px); }
.floating-slip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(168, 85, 247, .24); background: linear-gradient(90deg, rgba(124, 58, 237, .22), rgba(39, 242, 139, .06)); }
.floating-slip-head > div { display: flex; align-items: baseline; gap: 9px; }
.floating-slip-head span { color: #c4b5fd; font-size: .72rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.floating-slip-head strong { font-size: .92rem; }
.clear-all-picks { border: 1px solid rgba(244, 114, 182, .4); border-radius: 8px; padding: 7px 11px; background: rgba(219, 39, 119, .1); color: #f9a8d4; font-size: .72rem; font-weight: 900; }
.floating-slip-rows { display: grid; gap: 1px; max-height: min(36vh, 300px); overflow-y: auto; }
.floating-slip-row { display: grid; grid-template-columns: auto minmax(130px, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(20, 23, 37, .92); }
.slip-player, .slip-market { display: grid; gap: 2px; min-width: 0; }
.slip-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slip-player small, .slip-market small { color: var(--muted); font-size: .68rem; }
.slip-market { text-align: right; }
.slip-market strong { color: #c4b5fd; font-size: .82rem; text-transform: uppercase; }
.slip-remove { width: 30px; height: 30px; border: 1px solid rgba(244, 114, 182, .32); border-radius: 8px; background: rgba(219, 39, 119, .1); color: #f9a8d4; font-size: 1.15rem; line-height: 1; }
body.has-floating-slip main { padding-bottom: calc(250px + env(safe-area-inset-bottom, 16px)); }

@media (max-width: 620px) {
  html, body {
    width: 100%;
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 16px));
    scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 16px));
  }
  .landing-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    touch-action: pan-y;
  }
  body.has-floating-slip .app-shell {
    padding-bottom: calc(250px + env(safe-area-inset-bottom, 16px));
    scroll-padding-bottom: calc(250px + env(safe-area-inset-bottom, 16px));
  }
  .props-board-shell .prop-grid {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.5rem;
  }
  .floating-pick-slip { width: calc(100% - 14px); }
  .floating-slip-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .slip-market { grid-column: 2; text-align: left; }
  .slip-remove { grid-column: 3; grid-row: 1 / span 2; }
  .pick-builder-tabs { width: 100%; }
  .pick-builder-tabs button { flex: 1; padding-inline: 8px; }
  .lineup-block { padding: 10px; }
  .lineup-block-head,
  .lineup-generate-row { align-items: stretch; flex-direction: column; }
  .lineup-entry-grid { grid-template-columns: 1fr; }
  .lineup-manual-fields { grid-template-columns: 1fr 1fr; }
  .lineup-prop-list { grid-template-columns: 1fr; }
  .lineup-prop { grid-template-columns: auto minmax(0, 1fr); }
  .lineup-prop-actions { grid-column: 1 / -1; }
  .lineup-prop-actions button { flex: 1; min-height: 36px; }
  .lineup-package-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exposure-control { grid-column: 1 / -1; }
  .lineup-head-actions { width: 100%; }
  .lineup-head-actions button { flex: 1; }
  .lineup-result-grid { grid-template-columns: 1fr; }
  .generated-lineup li { grid-template-columns: minmax(0, 1fr) auto; }
  .generated-lineup li b { grid-column: 2; }
}

.prop-stat-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.prop-stat-row span {
  border: 1px solid rgba(168, 85, 247, .24);
  border-radius: 7px;
  padding: 4px 7px;
  background: rgba(168, 85, 247, .08);
  color: #d9c7ff;
  font-size: .76rem;
  font-weight: 800;
}

.hero-player {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 8px;
  background: #10141c;
}
.hero-player h3 { margin-top: 8px; color: var(--text); font-size: 1.2rem; }
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.score-grid span, .insight-grid span { display: block; color: var(--muted); font-size: .72rem; }
.score-grid strong, .insight-grid strong { display: block; margin-top: 4px; font-size: 1.25rem; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; background: #10141c; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .84rem; }
th { color: var(--brand); font-size: .72rem; text-transform: uppercase; }
td { color: #e9edf6; }
tr[data-route] { cursor: pointer; }
tr[data-route]:hover { background: rgba(168, 85, 247, .10); }

.chart {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto 1fr;
  gap: 7px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #10141c;
}
.season-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.season-summary span {
  padding: 6px 9px;
  border: 1px solid rgba(39, 242, 139, .28);
  border-radius: 8px;
  background: rgba(39, 242, 139, .08);
  color: #dce6f5;
  font-size: .78rem;
  font-weight: 800;
}
.chart.season-chart {
  min-height: 240px;
  display: flex;
  grid-template-columns: none;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 16px;
}
.season-chart .chart-line-label {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: 0 0 150px;
  align-self: stretch;
  padding: 8px;
  border-radius: 8px;
  background: rgba(16, 20, 28, .92);
}
.season-chart .bar-wrap {
  flex: 0 0 58px;
  min-width: 58px;
  min-height: 170px;
}
.season-chart .bar-slot {
  height: 132px;
}
.chart-line-label {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--brand);
  font-size: .78rem;
  font-weight: 850;
}
.bar-wrap {
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.bar-slot {
  height: 138px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bar {
  min-height: 8px;
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #07110d;
  font-size: .72rem;
  font-weight: 900;
  padding-top: 4px;
}
.bar-wrap.hit .bar {
  background: linear-gradient(180deg, #30ffa6, #18a76f);
}
.bar-wrap.miss .bar {
  background: linear-gradient(180deg, #ff5f6d, #a8283c);
  color: #fff;
}
.bar-wrap small {
  color: var(--muted);
  font-size: .68rem;
  text-align: center;
  white-space: nowrap;
  min-height: 16px;
}

.scoreboard-grid {
  display: grid;
  gap: 10px;
}

.score-card {
  width: 100%;
  display: grid;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #10141c;
  color: inherit;
}

.score-card:hover {
  border-color: var(--brand-line);
  background: var(--panel-2);
}

.score-card-top,
.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.score-card-top span {
  color: var(--brand);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.score-row {
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}

.score-row div {
  display: grid;
  gap: 2px;
}

.score-row strong {
  font-size: 1.25rem;
}

.score-row b {
  min-width: 48px;
  text-align: right;
  font-size: 1.8rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.boxscore-page {
  display: grid;
  gap: 12px;
}

.line-table-wrap table,
.compact-table table {
  min-width: 0;
}

.line-table th,
.line-table td {
  text-align: center;
  padding: 9px 8px;
}

.line-table tbody th {
  color: var(--text);
  text-align: left;
  font-size: .9rem;
}

.decision-strip {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #10141c;
}

.decision-strip div {
  display: grid;
  gap: 2px;
}

.decision-strip span {
  color: var(--brand);
  font-size: .72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.decision-strip strong {
  font-size: 1rem;
}

.boxscore-grid {
  display: grid;
  gap: 12px;
}

.team-box h4 {
  margin: 12px 0 8px;
  color: var(--brand);
  font-size: .78rem;
  text-transform: uppercase;
}

.team-box .table-wrap {
  border-radius: 7px;
}

.compact-table th,
.compact-table td {
  padding: 7px 8px;
  font-size: .78rem;
  white-space: nowrap;
}

.compact-table td small {
  margin-left: 4px;
}

.compact-table td:first-child,
.compact-table th:first-child {
  white-space: normal;
  min-width: 92px;
}

.lineup-pitcher {
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid rgba(39, 242, 139, .22);
  border-radius: 8px;
  background: rgba(39, 242, 139, .07);
  color: var(--muted);
  font-size: .82rem;
}

.lineup-pitcher b {
  color: var(--text);
}

.scoring-summary {
  display: grid;
  gap: 8px;
}

.scoring-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.scoring-row span {
  color: var(--brand);
  font-weight: 950;
}

.scoring-row strong {
  color: var(--text);
  font-size: .86rem;
  white-space: nowrap;
}

.scoring-row p {
  margin: 0;
  color: #dce6f5;
  font-size: .86rem;
  line-height: 1.35;
}

.scoring-row b {
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}

.manual-line-box {
  display: grid;
  gap: 6px;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #10141c;
}
.manual-line-box label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--text);
  font-weight: 850;
}
.manual-line-box input {
  width: 92px;
  min-height: 36px;
  border: 1px solid rgba(168, 85, 247, .45);
  border-radius: 8px;
  background: #0b0f16;
  color: var(--text);
  padding: 0 9px;
}
.line-setup {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #10141c;
}
.line-setup input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b0f16;
  color: var(--text);
  padding: 0 10px;
}
.line-card,
.line-pill,
.line-read {
  border: 1px solid rgba(48, 255, 166, .28);
  border-radius: 8px;
  padding: 8px;
  background: rgba(48, 255, 166, .07);
  color: var(--text);
}
.line-card {
  display: grid;
  gap: 2px;
}
.line-card span,
.line-card em {
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
}
.line-pill {
  grid-column: 1 / -1;
  font-size: .82rem;
  font-weight: 800;
}
.muted-line {
  border-color: rgba(168, 85, 247, .22);
  background: rgba(168, 85, 247, .08);
  color: var(--muted);
}

.weather-board {
  background:
    linear-gradient(180deg, rgba(21, 48, 26, .76), rgba(19, 18, 26, .94)),
    var(--panel);
}
.weather-targets {
  border: 1px solid rgba(35, 239, 156, .2);
  border-radius: 8px;
  padding: 14px;
  background: rgba(3, 30, 13, .55);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .08);
}
.weather-targets h3 {
  margin: 0 0 10px;
  color: var(--gold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.weather-target-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 10px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.weather-target-row:last-child { border-bottom: 0; }
.weather-target-row b {
  color: var(--gold);
  font-size: .95rem;
}
.weather-target-row strong span,
.weather-target-row small {
  color: var(--muted);
}
.weather-target-row small {
  grid-column: 2;
}
.weather-chip-board {
  margin: 14px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.weather-chip-board > span {
  margin-right: 8px;
  color: var(--gold);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.weather-chip {
  border: 1px solid rgba(35, 239, 156, .22);
  border-radius: 6px;
  padding: 7px 10px;
  background: rgba(35, 239, 156, .1);
  color: var(--text);
  font-weight: 800;
}
.weather-chip.hot {
  border-color: rgba(250, 204, 21, .38);
  background: rgba(250, 204, 21, .13);
}
.weather-chip.risk {
  border-color: rgba(248, 113, 113, .35);
  background: rgba(248, 113, 113, .1);
}
.weather-card {
  display: grid;
  gap: 10px;
  border-left: 3px solid rgba(35, 239, 156, .7);
  background: linear-gradient(90deg, rgba(13, 44, 38, .72), rgba(18, 17, 34, .92));
}
.weather-card.risk {
  border-left-color: rgba(248, 113, 113, .85);
}
.weather-card.roof {
  border-left-color: rgba(168, 85, 247, .8);
}
.weather-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.weather-card-head div {
  display: grid;
  gap: 4px;
}
.weather-card-head b {
  align-self: start;
  padding: 6px 9px;
  border: 1px solid rgba(250, 204, 21, .38);
  border-radius: 7px;
  color: var(--gold);
}
.weather-alert {
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(35, 239, 156, .34);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(35, 239, 156, .16), rgba(168, 85, 247, .13));
  color: #d7fff0;
  font-weight: 900;
}
.weather-card.risk .weather-alert {
  border-color: rgba(248, 113, 113, .35);
  background: rgba(127, 29, 29, .2);
  color: #fecaca;
}
.weather-card.roof .weather-alert {
  border-color: rgba(168, 85, 247, .36);
  background: rgba(168, 85, 247, .14);
  color: #ead7ff;
}
.weather-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.weather-context span {
  padding: 5px 8px;
  border: 1px solid rgba(35, 239, 156, .24);
  border-radius: 7px;
  background: rgba(35, 239, 156, .08);
  color: var(--muted);
  font-size: .85rem;
}
.inline-hand {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
}
.board-grid {
  display: grid;
  gap: 12px;
}
.mini-board {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #10141c;
}
.mini-board h3 {
  margin-top: 0;
}
.mini-row {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 10px 0;
}
.mini-row span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 850;
}
.mini-row em {
  min-width: 34px;
  border: 1px solid rgba(168, 85, 247, .55);
  border-radius: 6px;
  padding: 2px 5px;
  color: #d9c7ff;
  background: rgba(168, 85, 247, .13);
  font-size: .7rem;
  font-style: normal;
  text-align: center;
}
.mini-row small {
  grid-column: 1;
}
.mini-row b {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 42px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #07110d;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.mini-row b.tier-badge { display: grid; grid-template-columns: 1fr; gap: 0; min-width: 56px; padding: 4px 7px; color: #0f172a; line-height: 1.05; text-shadow: none; }
.mini-row b.tier-badge i { color: inherit; font-size: .48rem; font-style: normal; font-weight: 950; letter-spacing: .06em; }
.mini-row b.tier-regular { border: 1px solid #d8b4fe; background: linear-gradient(145deg, #c4b5fd, #e9d5ff); }
.mini-row b.tier-goblin { border: 1px solid #86efac; background: linear-gradient(145deg, #22c55e, #86efac); }
.mini-row b.tier-demon { border: 1px solid #f9a8d4; background: linear-gradient(145deg, #f472b6, #fbcfe8); }
.mini-row b.tier-fallback { border: 1px solid #64748b; color: #e2e8f0; background: #1e293b; }
.mini-link {
  margin-top: 8px;
}
.pitcher-board {
  display: grid;
  gap: 10px;
}
.pitcher-space-links { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.pitcher-space-hero .pitcher-board { align-items: stretch; }
.pitcher-space-links button { border: 1px solid var(--line); border-radius: 10px; background: #0d121c; color: var(--muted); padding: 9px 14px; font-weight: 800; }
.pitcher-space-links button.active { color: #08110d; border-color: #31ef91; background: #31ef91; box-shadow: 0 0 18px rgba(49,239,145,.18); }
.pitcher-lab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pitcher-lab-card { display: grid; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(27,31,48,.98), rgba(14,18,28,.98)); color: var(--text); text-align: left; }
.pitcher-lab-card:hover { border-color: #8751d2; transform: translateY(-1px); }
.pitcher-lab-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; }
.pitcher-rank { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #06120d; background: linear-gradient(135deg,#31ef91,#a855f7); font-weight: 950; }
.pitcher-lab-head > span:nth-child(2) { display: grid; min-width: 0; }
.pitcher-lab-head small,.pitcher-lab-head em { color: var(--muted); font-size: .68rem; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pitcher-lab-head strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pitcher-primary { display: grid; place-items: center; min-width: 58px; padding: 6px 8px; border: 1px solid rgba(49,239,145,.35); border-radius: 10px; background: rgba(49,239,145,.12); }
.pitcher-primary small { color: #66f2a1; }
.pitcher-primary b { font-size: 1.25rem; }
.pitcher-lab-stats,.pitcher-recent-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.pitcher-lab-stats span,.pitcher-recent-strip span { display: grid; place-items: center; min-width: 0; padding: 6px 3px; border-radius: 7px; background: rgba(5,9,15,.72); }
.pitcher-lab-stats b { font-size: .86rem; }.pitcher-lab-stats small,.pitcher-recent-strip small { color: var(--muted); font-size: .58rem; }
.pitcher-recent-strip { grid-template-columns: repeat(5,minmax(0,1fr)); }
.pitcher-recent-strip b { color: #d9c3ff; font-size: .72rem; }
.pitcher-lab-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: .66rem; }
.pitcher-lab-foot strong { color: #66f2a1; white-space: nowrap; }
@media (max-width: 900px) { .pitcher-lab-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .pitcher-lab-grid { grid-template-columns: 1fr; } .pitcher-lab-card { padding: 11px; } }
.pitcher-card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #10141c;
  color: inherit;
}
.pitcher-card strong {
  display: block;
  margin: 4px 0;
  font-size: 1.08rem;
}
.pitcher-card p {
  grid-column: 1 / -1;
  margin: 0;
}
.pitcher-stat-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.pitcher-stat-grid span {
  border: 1px solid rgba(48, 255, 166, .16);
  border-radius: 7px;
  padding: 7px;
  background: rgba(48, 255, 166, .06);
}
.pitcher-stat-grid b {
  display: block;
  color: var(--text);
  font-size: 1rem;
}
.pitcher-stat-grid small {
  color: var(--muted);
  font-size: .72rem;
}
.h2h-strip {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(168, 85, 247, .28);
  border-radius: 8px;
  padding: 9px;
  background: rgba(168, 85, 247, .08);
}
.h2h-strip.has-h2h {
  border-color: rgba(48, 255, 166, .34);
  background: rgba(48, 255, 166, .08);
}
.h2h-strip strong {
  color: var(--brand);
  font-size: .72rem;
  text-transform: uppercase;
}
.h2h-strip em {
  margin-left: 6px;
  color: #d9c7ff;
  font-style: normal;
}
.h2h-strip span {
  color: var(--text);
  font-size: .84rem;
}
.k-log {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h2h-log span {
  border-color: rgba(48, 255, 166, .32);
  color: #bbffe1;
  background: rgba(48, 255, 166, .08);
}
.k-log span {
  border: 1px solid rgba(168, 85, 247, .35);
  border-radius: 6px;
  padding: 4px 7px;
  color: #d9c7ff;
  background: rgba(168, 85, 247, .10);
  font-size: .78rem;
}
.dashboard-games {
  display: grid;
  gap: 12px;
}
.slate-matchup-card { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg,rgba(28,31,48,.98),rgba(12,17,25,.98)); }
.slate-matchup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; cursor: pointer; }
.slate-matchup-head span { color: #31ef91; text-transform: uppercase; font-size: .67rem; font-weight: 900; }.slate-matchup-head h3 { margin: 2px 0; font-size: 1.15rem; }.slate-matchup-head small { color: var(--muted); }
.slate-time { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #7040a5; border-radius: 9px; color: #66f2a1; background: rgba(112,64,165,.14); font-weight: 900; }
.slate-team-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; background: rgba(5,9,15,.7); }.slate-team-row span { display: grid; place-items: center; }.slate-team-row b { font-size: 1.1rem; }.slate-team-row small,.slate-team-row em { color: var(--muted); font-size: .65rem; font-style: normal; }
.slate-research-head { display: flex; justify-content: space-between; gap: 8px; color: #66f2a1; }.slate-research-head small { color: var(--muted); }
.slate-research-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.slate-research-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,11,18,.82); color: var(--text); text-align: left; }.slate-research-row:hover { border-color: #8751d2; }.slate-research-row > span { display: grid; min-width: 0; }.slate-research-row strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.slate-research-row small { color: var(--muted); font-size: .65rem; }.slate-research-values { text-align: right; }.slate-research-values b { color: #66f2a1; font-size: .72rem; }
.split-game-picker { margin-bottom: 12px; }
@media (max-width: 620px) { .slate-research-grid { grid-template-columns: 1fr; } }
.dash-game {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(168, 85, 247, .08), rgba(39, 242, 139, .04)), #10141c;
  color: inherit;
  padding: 14px;
  display: grid;
  gap: 12px;
}
.dash-game:hover,
.dash-game:focus-within {
  border-color: var(--brand-line);
  background: linear-gradient(135deg, rgba(168, 85, 247, .15), rgba(39, 242, 139, .08)), var(--panel-2);
}
.dash-game-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  cursor: pointer;
}
.dash-game-head span {
  color: var(--muted);
  font-size: .8rem;
}
.dash-game-head h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 1.25rem;
}
.temp-tile {
  min-width: 58px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  color: var(--brand);
  background: rgba(39, 242, 139, .08);
  font-weight: 900;
}
.time-stack {
  display: grid;
  gap: 5px;
  justify-items: end;
}
.time-stack small {
  color: var(--muted);
  font-weight: 800;
}
.weather-callout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(39, 242, 139, .08);
}
.weather-callout strong {
  color: var(--brand);
}
.weather-callout.risk {
  background: rgba(239, 68, 68, .10);
}
.weather-callout.risk strong {
  color: var(--risk);
}
.weather-callout.playable {
  background: rgba(168, 85, 247, .12);
}
.pitcher-row {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .86rem;
}
.target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.target-chip {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(39, 242, 139, .35);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(39, 242, 139, .08);
  color: var(--text);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.target-chip:hover,
.target-chip:focus-visible {
  border-color: var(--brand);
  background: rgba(39, 242, 139, .14);
}
.target-chip b {
  color: var(--brand);
  font-size: .68rem;
  text-transform: uppercase;
}
.chip-name {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chip-name em {
  min-width: 34px;
  border: 1px solid rgba(168, 85, 247, .55);
  border-radius: 6px;
  padding: 2px 5px;
  color: #d9c7ff;
  background: rgba(168, 85, 247, .13);
  font-size: .7rem;
  font-style: normal;
  text-align: center;
}
.target-chip small {
  font-weight: 600;
}
.muted-chip {
  color: var(--muted);
}
.loader {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #2a3142;
  border-top-color: var(--brand);
  animation: spin 1s linear infinite;
}
.empty { margin: 12px 0 0; }

.future-board .future-grid {
  display: grid;
  gap: 10px;
}

.streak-board-panel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 10, 16, .96) 0%, rgba(15, 19, 28, .9) 56%, rgba(7, 10, 16, .72) 100%),
    radial-gradient(circle at 85% 12%, rgba(39, 242, 139, .18), transparent 34%),
    radial-gradient(circle at 78% 78%, rgba(168, 85, 247, .16), transparent 32%),
    var(--panel);
}

.streak-hero {
  display: grid;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.streak-hero h2 {
  margin: 8px 0 2px;
  font-size: clamp(1.35rem, 3.2vw, 2.05rem);
  line-height: 1.05;
  max-width: 760px;
}

.streak-hero p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.9rem, 2vw, 1.12rem);
}

.league-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  font-weight: 900;
}

.streak-table-head,
.streak-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px minmax(92px, auto);
  gap: 10px;
  align-items: center;
}

.streak-table-head {
  padding: 0 14px 8px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.streak-list {
  display: grid;
  gap: 8px;
}

.streak-row {
  width: 100%;
  min-height: 62px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(10, 14, 22, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.streak-row > :not(.pick-star) {
  pointer-events: auto;
}

.streak-row .pick-star {
  pointer-events: auto;
}

.streak-row-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.streak-row-split > .streak-row-route {
  pointer-events: auto;
}

.streak-row-route {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) minmax(92px, auto);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.streak-row-route > * {
  pointer-events: none;
}

.streak-row-split .pick-star {
  justify-self: center;
}

.streak-row:hover {
  border-color: rgba(39, 242, 139, .7);
  transform: translateY(-1px);
}

.team-logo-fallback {
  display: grid;
  place-items: center;
  width: 56px;
  height: 38px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: white;
  font-weight: 1000;
  font-size: 1rem;
  background: linear-gradient(135deg, rgba(39,242,139,.28), rgba(168,85,247,.35));
}

.team-MIL { background: linear-gradient(135deg, #10254e, #d5a841); }
.team-NYM { background: linear-gradient(135deg, #002d72, #ff5910); }
.team-WSH { background: linear-gradient(135deg, #ab0003, #14225a); }
.team-KC { background: linear-gradient(135deg, #004687, #7ab2dd); }
.team-SD { background: linear-gradient(135deg, #2f241d, #ffc425); color: #261a12; }
.team-HOU { background: linear-gradient(135deg, #002d62, #eb6e1f); }
.team-MIA { background: linear-gradient(135deg, #00a3e0, #ef3340); }
.team-CLE { background: linear-gradient(135deg, #00385d, #e31937); }
.team-TB { background: linear-gradient(135deg, #092c5c, #8fbce6); }
.team-SEA { background: linear-gradient(135deg, #005c5c, #0c2c56); }
.team-BOS { background: linear-gradient(135deg, #bd3039, #0c2340); }
.team-NYY { background: linear-gradient(135deg, #0c2340, #c4ced4); color: #07111f; }
.team-LAD { background: linear-gradient(135deg, #005a9c, #ffffff); color: #0b2f5c; }
.team-SF { background: linear-gradient(135deg, #fd5a1e, #27251f); }
.team-PHI { background: linear-gradient(135deg, #e81828, #002d72); }
.team-COL { background: linear-gradient(135deg, #33006f, #c4ced4); color: #1d0b32; }
.team-LV { background: linear-gradient(135deg, #050505, #c7c9cc); color: #121212; }
.team-PHX { background: linear-gradient(135deg, #1d1160, #e56020); }
.team-NY { background: linear-gradient(135deg, #86cebc, #0b1020); }
.team-MIN { background: linear-gradient(135deg, #0c2340, #78be20); }
.team-ATL { background: linear-gradient(135deg, #e31837, #c1d32f); color: #07111f; }
.team-LA { background: linear-gradient(135deg, #552583, #fdb927); color: #190a2d; }
.team-GS { background: linear-gradient(135deg, #1d428a, #ffc72c); color: #06162f; }
.team-DAL { background: linear-gradient(135deg, #002b5c, #c4d600); }
.team-TOR { background: linear-gradient(135deg, #ce1141, #a1a1a4); }
.team-CON { background: linear-gradient(135deg, #0a2240, #ef3e42); }
.team-IND { background: linear-gradient(135deg, #002d62, #ffb81c); color: #081423; }
.team-CHI { background: linear-gradient(135deg, #ce1141, #418fde); }
.team-WAS { background: linear-gradient(135deg, #e03a3e, #002b5c); }

.streak-player {
  min-width: 0;
}

.streak-player strong,
.streak-player small {
  display: block;
}

.streak-player strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}

.streak-player small {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.streak-rate {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-end;
  justify-content: flex-end;
  color: white;
  font-weight: 900;
  font-size: clamp(.9rem, 2.4vw, 1.08rem);
  line-height: 1.02;
  min-width: 62px;
  white-space: nowrap;
}

.streak-rate small {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 719px) {
  .section-title {
    align-items: flex-start;
  }

  .chart {
    display: flex;
    grid-template-columns: none;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 18px;
  }

  .chart .chart-line-label {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: 0 0 128px;
    align-self: stretch;
    padding: 8px;
    border-radius: 8px;
    background: rgba(16, 20, 28, .92);
  }

  .chart .bar-wrap {
    flex: 0 0 58px;
    min-width: 58px;
    min-height: 170px;
  }

  .chart .bar-slot {
    height: 132px;
  }

  .chart .bar-wrap small {
    white-space: normal;
    line-height: 1.05;
  }

  .line-table-wrap {
    overflow-x: auto;
  }

  .line-table {
    min-width: 620px;
  }

  .scoring-row {
    grid-template-columns: auto 1fr;
  }

  .scoring-row p,
  .scoring-row b {
    grid-column: 1 / -1;
  }

  .streak-table-head,
  .streak-row {
    grid-template-columns: 54px minmax(0, 1fr) 34px 54px;
  }

  .streak-row-split {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .streak-row-route {
    grid-template-columns: 54px minmax(0, 1fr) 54px;
  }

  .streak-row .pick-star {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .streak-row-split .pick-star {
    grid-column: 2;
  }

  .streak-rate {
    grid-column: 4;
    align-items: flex-end;
    justify-self: end;
    font-size: .96rem;
  }

  .team-logo-fallback {
    width: 52px;
    height: 38px;
    font-size: .78rem;
  }
}

@media (min-width: 720px) {
  main { padding: 28px 22px 80px; }
  .app-header { grid-template-columns: 1fr auto; align-items: end; }
  .dashboard { grid-template-columns: repeat(4, 1fr); }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .scoreboard-grid { grid-template-columns: repeat(2, 1fr); }
  .decision-strip { grid-template-columns: repeat(3, 1fr); }
  .pitcher-board { grid-template-columns: repeat(2, 1fr); }
  .pitcher-stat-grid { grid-template-columns: repeat(3, 1fr); }
  .prop-grid, .weather-grid { grid-template-columns: repeat(2, 1fr); }
  .pitcher-row { grid-template-columns: 1fr 1fr; }
  .hero-player { grid-template-columns: 1.4fr .9fr; align-items: start; }
  .mini-stats { grid-template-columns: repeat(8, 1fr); }
  .future-board .future-grid { grid-template-columns: repeat(3, 1fr); }
  .streak-hero { grid-template-columns: 1fr auto; }
}

@media (min-width: 980px) {
  .prop-grid, .weather-grid { grid-template-columns: repeat(3, 1fr); }
  .boxscore-grid { grid-template-columns: repeat(2, 1fr); }
  .board-grid { grid-template-columns: repeat(4, 1fr); }
  .pitcher-board { grid-template-columns: repeat(4, 1fr); }
}
/* Mobile streak/cheatsheet cleanup: keep favorite stars and hit-rate text from colliding. */
@media (max-width: 720px) {
  .streak-board h1,
  .cheatsheet-board h1,
  .cheatsheet h1,
  .streaks h1,
  [class*="cheatsheet"] h1,
  [class*="streak"] h1 {
    font-size: clamp(2rem, 8.25vw, 2.75rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  .streak-row,
  .cheatsheet-row,
  .cheat-row,
  [class*="streak-row"],
  [class*="cheatsheet-row"],
  [class*="cheat-row"] {
    display: grid !important;
    grid-template-columns: clamp(3.75rem, 16vw, 5rem) minmax(0, 1fr) 2.65rem clamp(4.35rem, 17vw, 5.25rem) !important;
    column-gap: 0.55rem !important;
    align-items: center !important;
    min-height: 4.85rem !important;
    padding: 0.7rem 0.55rem !important;
    -webkit-tap-highlight-color: transparent;
  }

  .streak-row > [class*="team"],
  .cheatsheet-row > [class*="team"],
  .cheat-row > [class*="team"],
  [class*="streak-row"] > [class*="team"],
  [class*="cheatsheet-row"] > [class*="team"],
  [class*="cheat-row"] > [class*="team"] {
    grid-column: 1 !important;
    width: clamp(3.75rem, 16vw, 5rem) !important;
    min-width: clamp(3.75rem, 16vw, 5rem) !important;
    max-width: clamp(3.75rem, 16vw, 5rem) !important;
  }

  .streak-row > [class*="player"],
  .cheatsheet-row > [class*="player"],
  .cheat-row > [class*="player"],
  [class*="streak-row"] > [class*="player"],
  [class*="cheatsheet-row"] > [class*="player"],
  [class*="cheat-row"] > [class*="player"] {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .streak-row strong,
  .cheatsheet-row strong,
  .cheat-row strong,
  [class*="streak-row"] strong,
  [class*="cheatsheet-row"] strong,
  [class*="cheat-row"] strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.12 !important;
  }

  .streak-row small,
  .cheatsheet-row small,
  .cheat-row small,
  [class*="streak-row"] small,
  [class*="cheatsheet-row"] small,
  [class*="cheat-row"] small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }

  .streak-row .favorite-button,
  .streak-row .star-button,
  .streak-row .pick-star,
  .streak-row [aria-label*="star"],
  .streak-row [aria-label*="favorite"],
  .cheatsheet-row .favorite-button,
  .cheatsheet-row .star-button,
  .cheatsheet-row .pick-star,
  .cheatsheet-row [aria-label*="star"],
  .cheatsheet-row [aria-label*="favorite"],
  .cheat-row .favorite-button,
  .cheat-row .star-button,
  .cheat-row .pick-star,
  .cheat-row [aria-label*="star"],
  .cheat-row [aria-label*="favorite"],
  [class*="streak-row"] .favorite-button,
  [class*="streak-row"] .star-button,
  [class*="streak-row"] .pick-star,
  [class*="streak-row"] [aria-label*="star"],
  [class*="streak-row"] [aria-label*="favorite"],
  [class*="cheatsheet-row"] .favorite-button,
  [class*="cheatsheet-row"] .star-button,
  [class*="cheatsheet-row"] .pick-star,
  [class*="cheatsheet-row"] [aria-label*="star"],
  [class*="cheatsheet-row"] [aria-label*="favorite"] {
    position: static !important;
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .streak-row > [class*="rate"],
  .streak-row > [class*="hit"],
  .cheatsheet-row > [class*="rate"],
  .cheatsheet-row > [class*="hit"],
  .cheat-row > [class*="rate"],
  .cheat-row > [class*="hit"],
  [class*="streak-row"] > [class*="rate"],
  [class*="streak-row"] > [class*="hit"],
  [class*="cheatsheet-row"] > [class*="rate"],
  [class*="cheatsheet-row"] > [class*="hit"] {
    grid-column: 4 !important;
    justify-self: end !important;
    min-width: clamp(4.35rem, 17vw, 5.25rem) !important;
    max-width: clamp(4.35rem, 17vw, 5.25rem) !important;
    text-align: right !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    z-index: 2 !important;
  }

  .streak-row > [class*="rate"] *,
  .streak-row > [class*="hit"] *,
  .cheatsheet-row > [class*="rate"] *,
  .cheatsheet-row > [class*="hit"] *,
  .cheat-row > [class*="rate"] *,
  .cheat-row > [class*="hit"] *,
  [class*="streak-row"] > [class*="rate"] *,
  [class*="streak-row"] > [class*="hit"] *,
  [class*="cheatsheet-row"] > [class*="rate"] *,
  [class*="cheatsheet-row"] > [class*="hit"] * {
    display: block !important;
    white-space: normal !important;
  }
}

@media (hover: none) {
  .streak-row:focus,
  .streak-row:active,
  .cheatsheet-row:focus,
  .cheatsheet-row:active,
  .cheat-row:focus,
  .cheat-row:active,
  [class*="streak-row"]:focus,
  [class*="streak-row"]:active,
  [class*="cheatsheet-row"]:focus,
  [class*="cheatsheet-row"]:active,
  [class*="cheat-row"]:focus,
  [class*="cheat-row"]:active {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}
/* Mobile streak/cheatsheet hard override.
   Keeps favorite stars and hit-rate text in separate lanes on iPhone/PWA. */
@media (max-width: 760px) {
  .streak-board h1,
  .cheatsheet-board h1,
  .cheatsheet h1,
  .streaks h1,
  [class*="cheatsheet"] h1,
  [class*="streak"] h1 {
    font-size: clamp(2rem, 7.4vw, 2.8rem) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
  }

  .streak-row,
  .cheatsheet-row,
  .cheat-row,
  .streak-entry,
  .cheatsheet-entry,
  .cheat-entry,
  .streak-item,
  .cheatsheet-item,
  .cheat-item,
  [class*="streak-row"],
  [class*="cheatsheet-row"],
  [class*="cheat-row"],
  [class*="streak-entry"],
  [class*="cheatsheet-entry"],
  [class*="cheat-entry"] {
    display: grid !important;
    grid-template-columns: clamp(3.8rem, 17vw, 5rem) minmax(0, 1fr) 2.75rem clamp(4.45rem, 18vw, 5.6rem) !important;
    column-gap: 0.65rem !important;
    align-items: center !important;
    min-height: 4.9rem !important;
    padding: 0.7rem 0.65rem !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .streak-row > *,
  .cheatsheet-row > *,
  .cheat-row > *,
  .streak-entry > *,
  .cheatsheet-entry > *,
  .cheat-entry > *,
  .streak-item > *,
  .cheatsheet-item > *,
  .cheat-item > *,
  [class*="streak-row"] > *,
  [class*="cheatsheet-row"] > *,
  [class*="cheat-row"] > *,
  [class*="streak-entry"] > *,
  [class*="cheatsheet-entry"] > *,
  [class*="cheat-entry"] > * {
    min-width: 0 !important;
  }

  .streak-row button,
  .cheatsheet-row button,
  .cheat-row button,
  .streak-entry button,
  .cheatsheet-entry button,
  .cheat-entry button,
  .streak-item button,
  .cheatsheet-item button,
  .cheat-item button,
  [class*="streak-row"] button,
  [class*="cheatsheet-row"] button,
  [class*="cheat-row"] button,
  [class*="streak-entry"] button,
  [class*="cheatsheet-entry"] button,
  [class*="cheat-entry"] button {
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 2.45rem !important;
    height: 2.45rem !important;
    min-width: 2.45rem !important;
    min-height: 2.45rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    z-index: 2 !important;
  }

  .streak-rate,
  .cheatsheet-rate,
  .cheat-rate,
  .hit-rate,
  [class*="streak-rate"],
  [class*="cheatsheet-rate"],
  [class*="cheat-rate"],
  [class*="hit-rate"] {
    grid-column: 4 !important;
    justify-self: end !important;
    text-align: right !important;
    min-width: 4.35rem !important;
    max-width: 5.6rem !important;
    line-height: 1.02 !important;
    white-space: normal !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  .streak-player,
  .cheatsheet-player,
  .cheat-player,
  .streak-copy,
  .cheatsheet-copy,
  .cheat-copy,
  [class*="streak-player"],
  [class*="cheatsheet-player"],
  [class*="cheat-player"],
  [class*="streak-copy"],
  [class*="cheatsheet-copy"],
  [class*="cheat-copy"] {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .streak-player *,
  .cheatsheet-player *,
  .cheat-player *,
  .streak-copy *,
  .cheatsheet-copy *,
  .cheat-copy *,
  [class*="streak-player"] *,
  [class*="cheatsheet-player"] *,
  [class*="cheat-player"] *,
  [class*="streak-copy"] *,
  [class*="cheatsheet-copy"] *,
  [class*="cheat-copy"] * {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .streak-row:focus,
  .streak-row:focus-visible,
  .streak-row:focus-within,
  .streak-row:active,
  .cheatsheet-row:focus,
  .cheatsheet-row:focus-visible,
  .cheatsheet-row:focus-within,
  .cheatsheet-row:active,
  .cheat-row:focus,
  .cheat-row:focus-visible,
  .cheat-row:focus-within,
  .cheat-row:active,
  [class*="streak-row"]:focus,
  [class*="streak-row"]:focus-visible,
  [class*="streak-row"]:focus-within,
  [class*="streak-row"]:active,
  [class*="cheatsheet-row"]:focus,
  [class*="cheatsheet-row"]:focus-visible,
  [class*="cheatsheet-row"]:focus-within,
  [class*="cheatsheet-row"]:active,
  [class*="cheat-row"]:focus,
  [class*="cheat-row"]:focus-visible,
  [class*="cheat-row"]:focus-within,
  [class*="cheat-row"]:active {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}
/* Mobile streak / cheatsheet layout guard.
   Keeps favorite stars and hit-rate text in separate lanes for iPhone/PWA views. */
@media (max-width: 760px) {
  html body #root .streak-row,
  html body #root .streak-card,
  html body #root .streak-entry,
  html body #root .streak-item,
  html body #root .streak-line,
  html body #root .cheatsheet-row,
  html body #root .cheatsheet-card,
  html body #root .cheatsheet-entry,
  html body #root .cheat-row,
  html body #root .cheat-card {
    display: grid !important;
    grid-template-columns: 4.35rem minmax(0, 1fr) 3.25rem 4.85rem !important;
    grid-template-areas: "team info star rate" !important;
    align-items: center !important;
    column-gap: 0.65rem !important;
    min-height: 4.75rem !important;
    padding: 0.75rem 0.72rem !important;
    overflow: hidden !important;
  }

  html body #root .streak-row:focus,
  html body #root .streak-row:active,
  html body #root .streak-row:focus-within,
  html body #root .streak-card:focus,
  html body #root .streak-card:active,
  html body #root .streak-card:focus-within,
  html body #root .cheatsheet-row:focus,
  html body #root .cheatsheet-row:active,
  html body #root .cheatsheet-row:focus-within,
  html body #root .cheatsheet-card:focus,
  html body #root .cheatsheet-card:active,
  html body #root .cheatsheet-card:focus-within {
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  html body #root .streak-row .team-badge,
  html body #root .streak-row .team-chip,
  html body #root .streak-row .team-logo,
  html body #root .streak-card .team-badge,
  html body #root .streak-card .team-chip,
  html body #root .streak-card .team-logo,
  html body #root .cheatsheet-row .team-badge,
  html body #root .cheatsheet-row .team-chip,
  html body #root .cheatsheet-row .team-logo,
  html body #root .cheatsheet-card .team-badge,
  html body #root .cheatsheet-card .team-chip,
  html body #root .cheatsheet-card .team-logo {
    grid-area: team !important;
    width: 3.9rem !important;
    min-width: 3.9rem !important;
    max-width: 3.9rem !important;
    height: 3.05rem !important;
    justify-self: start !important;
  }

  html body #root .streak-row .streak-player,
  html body #root .streak-row .streak-info,
  html body #root .streak-row .player-info,
  html body #root .streak-card .streak-player,
  html body #root .streak-card .streak-info,
  html body #root .streak-card .player-info,
  html body #root .cheatsheet-row .streak-player,
  html body #root .cheatsheet-row .streak-info,
  html body #root .cheatsheet-row .player-info,
  html body #root .cheatsheet-card .streak-player,
  html body #root .cheatsheet-card .streak-info,
  html body #root .cheatsheet-card .player-info {
    grid-area: info !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body #root .streak-row .streak-player *,
  html body #root .streak-row .streak-info *,
  html body #root .streak-row .player-info *,
  html body #root .streak-card .streak-player *,
  html body #root .streak-card .streak-info *,
  html body #root .streak-card .player-info *,
  html body #root .cheatsheet-row .streak-player *,
  html body #root .cheatsheet-row .streak-info *,
  html body #root .cheatsheet-row .player-info *,
  html body #root .cheatsheet-card .streak-player *,
  html body #root .cheatsheet-card .streak-info *,
  html body #root .cheatsheet-card .player-info * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #root .streak-row .favorite-button,
  html body #root .streak-row .favorite-star,
  html body #root .streak-row .star-button,
  html body #root .streak-row .pick-star,
  html body #root .streak-card .favorite-button,
  html body #root .streak-card .favorite-star,
  html body #root .streak-card .star-button,
  html body #root .streak-card .pick-star,
  html body #root .cheatsheet-row .favorite-button,
  html body #root .cheatsheet-row .favorite-star,
  html body #root .cheatsheet-row .star-button,
  html body #root .cheatsheet-row .pick-star,
  html body #root .cheatsheet-card .favorite-button,
  html body #root .cheatsheet-card .favorite-star,
  html body #root .cheatsheet-card .star-button,
  html body #root .cheatsheet-card .pick-star,
  html body #root .streak-row button[aria-label*="favorite" i],
  html body #root .streak-row button[aria-label*="star" i],
  html body #root .streak-card button[aria-label*="favorite" i],
  html body #root .streak-card button[aria-label*="star" i],
  html body #root .cheatsheet-row button[aria-label*="favorite" i],
  html body #root .cheatsheet-row button[aria-label*="star" i],
  html body #root .cheatsheet-card button[aria-label*="favorite" i],
  html body #root .cheatsheet-card button[aria-label*="star" i] {
    grid-area: star !important;
    position: static !important;
    width: 2.55rem !important;
    min-width: 2.55rem !important;
    height: 2.55rem !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  html body #root .streak-row .hit-rate,
  html body #root .streak-row .streak-rate,
  html body #root .streak-row .rate-cell,
  html body #root .streak-row .hit-rate-cell,
  html body #root .streak-card .hit-rate,
  html body #root .streak-card .streak-rate,
  html body #root .streak-card .rate-cell,
  html body #root .streak-card .hit-rate-cell,
  html body #root .cheatsheet-row .hit-rate,
  html body #root .cheatsheet-row .streak-rate,
  html body #root .cheatsheet-row .rate-cell,
  html body #root .cheatsheet-row .hit-rate-cell,
  html body #root .cheatsheet-card .hit-rate,
  html body #root .cheatsheet-card .streak-rate,
  html body #root .cheatsheet-card .rate-cell,
  html body #root .cheatsheet-card .hit-rate-cell {
    grid-area: rate !important;
    position: static !important;
    min-width: 4.65rem !important;
    width: 4.65rem !important;
    justify-self: end !important;
    text-align: right !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    z-index: 2 !important;
  }

  html body #root .streak-row .hit-rate *,
  html body #root .streak-row .streak-rate *,
  html body #root .streak-row .rate-cell *,
  html body #root .streak-row .hit-rate-cell *,
  html body #root .streak-card .hit-rate *,
  html body #root .streak-card .streak-rate *,
  html body #root .streak-card .rate-cell *,
  html body #root .streak-card .hit-rate-cell *,
  html body #root .cheatsheet-row .hit-rate *,
  html body #root .cheatsheet-row .streak-rate *,
  html body #root .cheatsheet-row .rate-cell *,
  html body #root .cheatsheet-row .hit-rate-cell *,
  html body #root .cheatsheet-card .hit-rate *,
  html body #root .cheatsheet-card .streak-rate *,
  html body #root .cheatsheet-card .rate-cell *,
  html body #root .cheatsheet-card .hit-rate-cell * {
    display: block !important;
    text-align: right !important;
  }

  html body #root .cheatsheet-title,
  html body #root .streak-title,
  html body #root .cheatsheet-panel h1,
  html body #root .streak-panel h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
  }
}
/* Mobile/PWA streak rows: keep team, player text, star, and hit rate from colliding. */
@media (max-width: 760px) {
  html body #root .streaks-board,
  html body #root .streak-board,
  html body #root .cheatsheet-board,
  html body #root .cheatsheet-panel {
    padding: 1rem !important;
    overflow-x: hidden !important;
  }

  html body #root .streaks-board h1,
  html body #root .streak-board h1,
  html body #root .cheatsheet-board h1,
  html body #root .cheatsheet-panel h1,
  html body #root .cheatsheet-title {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  html body #root .streak-row,
  html body #root .cheatsheet-row,
  html body #root .streak-card,
  html body #root .cheat-row,
  html body #root .cheatsheet-card,
  html body #root .streak-list > button,
  html body #root .cheatsheet-list > button {
    display: grid !important;
    grid-template-columns: 3.55rem minmax(0, 1fr) 2.35rem 3.8rem !important;
    grid-template-areas: "team info star rate" !important;
    align-items: center !important;
    gap: 0.35rem 0.58rem !important;
    min-height: 4.6rem !important;
    padding: 0.66rem 0.58rem !important;
    overflow: hidden !important;
    outline: none !important;
    box-shadow: none !important;
  }

  html body #root .streak-row:focus,
  html body #root .streak-row:focus-visible,
  html body #root .streak-row:focus-within,
  html body #root .cheatsheet-row:focus,
  html body #root .cheatsheet-row:focus-visible,
  html body #root .cheatsheet-row:focus-within,
  html body #root .streak-card:focus,
  html body #root .streak-card:focus-visible,
  html body #root .streak-card:focus-within,
  html body #root .cheat-row:focus,
  html body #root .cheat-row:focus-visible,
  html body #root .cheat-row:focus-within,
  html body #root .cheatsheet-card:focus,
  html body #root .cheatsheet-card:focus-visible,
  html body #root .cheatsheet-card:focus-within,
  html body #root .streak-list > button:focus,
  html body #root .streak-list > button:focus-visible,
  html body #root .cheatsheet-list > button:focus,
  html body #root .cheatsheet-list > button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  html body #root .streak-row > :nth-child(1),
  html body #root .cheatsheet-row > :nth-child(1),
  html body #root .streak-card > :nth-child(1),
  html body #root .cheat-row > :nth-child(1),
  html body #root .cheatsheet-card > :nth-child(1),
  html body #root .streak-list > button > :nth-child(1),
  html body #root .cheatsheet-list > button > :nth-child(1),
  html body #root .streak-team,
  html body #root .cheat-team,
  html body #root .team-badge,
  html body #root .team-chip {
    grid-area: team !important;
    width: 3.45rem !important;
    min-width: 3.45rem !important;
    max-width: 3.45rem !important;
    height: 2.55rem !important;
    justify-self: start !important;
  }

  html body #root .streak-row > :nth-child(2),
  html body #root .cheatsheet-row > :nth-child(2),
  html body #root .streak-card > :nth-child(2),
  html body #root .cheat-row > :nth-child(2),
  html body #root .cheatsheet-card > :nth-child(2),
  html body #root .streak-list > button > :nth-child(2),
  html body #root .cheatsheet-list > button > :nth-child(2),
  html body #root .streak-main,
  html body #root .streak-info,
  html body #root .cheat-main,
  html body #root .cheatsheet-info,
  html body #root .streak-player,
  html body #root .player-cell {
    grid-area: info !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body #root .streak-row > :nth-child(2) *,
  html body #root .cheatsheet-row > :nth-child(2) *,
  html body #root .streak-card > :nth-child(2) *,
  html body #root .cheat-row > :nth-child(2) *,
  html body #root .cheatsheet-card > :nth-child(2) *,
  html body #root .streak-list > button > :nth-child(2) *,
  html body #root .cheatsheet-list > button > :nth-child(2) *,
  html body #root .streak-main *,
  html body #root .streak-info *,
  html body #root .cheat-main *,
  html body #root .cheatsheet-info *,
  html body #root .streak-player *,
  html body #root .player-cell * {
    min-width: 0 !important;
  }

  html body #root .streak-row > :nth-child(2) strong,
  html body #root .cheatsheet-row > :nth-child(2) strong,
  html body #root .streak-card > :nth-child(2) strong,
  html body #root .cheat-row > :nth-child(2) strong,
  html body #root .cheatsheet-card > :nth-child(2) strong,
  html body #root .streak-list > button > :nth-child(2) strong,
  html body #root .cheatsheet-list > button > :nth-child(2) strong,
  html body #root .streak-title,
  html body #root .streak-name,
  html body #root .streak-prop,
  html body #root .cheat-title {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #root .streak-meta,
  html body #root .cheat-meta,
  html body #root .streak-subtitle,
  html body #root .streak-context {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body #root .streak-row > :nth-child(3),
  html body #root .cheatsheet-row > :nth-child(3),
  html body #root .streak-card > :nth-child(3),
  html body #root .cheat-row > :nth-child(3),
  html body #root .cheatsheet-card > :nth-child(3),
  html body #root .streak-list > button > :nth-child(3),
  html body #root .cheatsheet-list > button > :nth-child(3),
  html body #root .favorite-button,
  html body #root .favorite-star,
  html body #root .star-button,
  html body #root button[aria-label*="favorite" i],
  html body #root button[title*="favorite" i] {
    grid-area: star !important;
    position: static !important;
    inset: auto !important;
    justify-self: center !important;
    align-self: center !important;
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  html body #root .streak-row > :nth-child(4),
  html body #root .cheatsheet-row > :nth-child(4),
  html body #root .streak-card > :nth-child(4),
  html body #root .cheat-row > :nth-child(4),
  html body #root .cheatsheet-card > :nth-child(4),
  html body #root .streak-list > button > :nth-child(4),
  html body #root .cheatsheet-list > button > :nth-child(4),
  html body #root .streak-rate,
  html body #root .hit-rate,
  html body #root .rate-cell,
  html body #root .cheat-rate,
  html body #root .streak-result,
  html body #root .streak-hit-rate {
    grid-area: rate !important;
    justify-self: end !important;
    width: 3.8rem !important;
    min-width: 3.8rem !important;
    max-width: 3.8rem !important;
    text-align: right !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  html body #root .streak-row > :nth-child(4) strong,
  html body #root .cheatsheet-row > :nth-child(4) strong,
  html body #root .streak-card > :nth-child(4) strong,
  html body #root .cheat-row > :nth-child(4) strong,
  html body #root .cheatsheet-card > :nth-child(4) strong,
  html body #root .streak-list > button > :nth-child(4) strong,
  html body #root .cheatsheet-list > button > :nth-child(4) strong,
  html body #root .streak-rate strong,
  html body #root .hit-rate strong,
  html body #root .rate-cell strong,
  html body #root .cheat-rate strong,
  html body #root .streak-result strong,
  html body #root .streak-hit-rate strong {
    display: block !important;
    font-size: 1.12rem !important;
    line-height: 1.05 !important;
  }

  html body #root .streak-row > :nth-child(4) small,
  html body #root .cheatsheet-row > :nth-child(4) small,
  html body #root .streak-card > :nth-child(4) small,
  html body #root .cheat-row > :nth-child(4) small,
  html body #root .cheatsheet-card > :nth-child(4) small,
  html body #root .streak-list > button > :nth-child(4) small,
  html body #root .cheatsheet-list > button > :nth-child(4) small,
  html body #root .streak-rate small,
  html body #root .hit-rate small,
  html body #root .rate-cell small,
  html body #root .cheat-rate small,
  html body #root .streak-result small,
  html body #root .streak-hit-rate small {
    display: block !important;
    font-size: 0.72rem !important;
    line-height: 1.04 !important;
    white-space: normal !important;
  }
}
/* Mobile PWA streak/cheatsheet layout fix.
   Keeps favorite stars in their own column so they never cover hit-rate text. */
@media (max-width: 760px) {
  .streak-board h1,
  .streaks-board h1,
  .cheatsheet-board h1,
  .cheatsheet-shell h1 {
    font-size: clamp(2.25rem, 10vw, 3rem) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  .streak-row,
  .streak-item,
  .streak-card,
  .cheatsheet-row,
  .cheatsheet-item,
  .cheat-card {
    display: grid !important;
    grid-template-columns: 4.35rem minmax(0, 1fr) 2.65rem 4.45rem !important;
    align-items: center !important;
    column-gap: 0.65rem !important;
    row-gap: 0.15rem !important;
    min-height: 5.15rem !important;
    padding: 0.7rem 0.72rem !important;
    overflow: hidden !important;
  }

  .streak-row:focus,
  .streak-row:focus-visible,
  .streak-item:focus,
  .streak-item:focus-visible,
  .streak-card:focus,
  .streak-card:focus-visible,
  .cheatsheet-row:focus,
  .cheatsheet-row:focus-visible,
  .cheatsheet-item:focus,
  .cheatsheet-item:focus-visible,
  .cheat-card:focus,
  .cheat-card:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .streak-row:active,
  .streak-item:active,
  .streak-card:active,
  .cheatsheet-row:active,
  .cheatsheet-item:active,
  .cheat-card:active {
    border-color: rgba(139, 92, 246, 0.55) !important;
  }

  .streak-team,
  .streak-team-tile,
  .streak-logo,
  .cheatsheet-team,
  .cheat-team,
  .team-chip,
  .team-tile {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 4rem !important;
    min-width: 4rem !important;
    height: 3.15rem !important;
    min-height: 3.15rem !important;
    font-size: 1.08rem !important;
    border-radius: 10px !important;
    place-self: center start !important;
  }

  .streak-player,
  .streak-copy,
  .streak-title-wrap,
  .cheatsheet-player,
  .cheat-copy {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .streak-title,
  .cheatsheet-title,
  .cheat-title,
  .streak-player strong,
  .cheatsheet-player strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
  }

  .streak-meta,
  .cheatsheet-meta,
  .cheat-meta,
  .streak-player small,
  .cheatsheet-player small {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  .streak-star,
  .streak-favorite,
  .favorite-star,
  .cheatsheet-star,
  .pick-star,
  .streak-row .star-button,
  .cheatsheet-row .star-button,
  .cheat-card .star-button {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    margin: 0 auto !important;
    place-self: center !important;
    z-index: 1 !important;
  }

  .streak-rate,
  .hit-rate,
  .cheatsheet-rate,
  .cheat-rate,
  .streak-row .rate,
  .cheatsheet-row .rate {
    grid-column: 4 !important;
    grid-row: 1 / span 2 !important;
    min-width: 4.15rem !important;
    text-align: right !important;
    justify-self: end !important;
    align-self: center !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  .streak-rate strong,
  .hit-rate strong,
  .cheatsheet-rate strong,
  .cheat-rate strong {
    display: block !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }

  .streak-rate small,
  .hit-rate small,
  .cheatsheet-rate small,
  .cheat-rate small {
    display: block !important;
    font-size: 0.75rem !important;
    line-height: 1.05 !important;
    opacity: 0.85 !important;
  }
}
/* Mobile streak/cheatsheet rows need fixed lanes so the favorite star never
   sits on top of the hit-rate text in iPhone home-screen/PWA mode. */
@media (max-width: 700px) {
  .streak-shell h1,
  .streak-board h1,
  .cheatsheet-shell h1,
  .cheatsheet-board h1,
  [class*="streak"] h1,
  [class*="cheatsheet"] h1 {
    font-size: clamp(2rem, 9vw, 3.2rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  .streak-row,
  .cheatsheet-row,
  .trend-row,
  [class*="streak-row"],
  [class*="cheat-row"],
  [class*="cheatsheet-row"] {
    display: grid !important;
    grid-template-columns: 4.75rem minmax(0, 1fr) 2.75rem 4.6rem !important;
    align-items: center !important;
    column-gap: 0.75rem !important;
    min-height: 5.6rem !important;
    padding: 0.8rem 0.72rem !important;
    overflow: hidden !important;
  }

  .streak-row > *,
  .cheatsheet-row > *,
  .trend-row > *,
  [class*="streak-row"] > *,
  [class*="cheat-row"] > *,
  [class*="cheatsheet-row"] > * {
    min-width: 0 !important;
  }

  .streak-team,
  .streak-team-badge,
  .cheatsheet-team,
  .cheatsheet-team-badge,
  .trend-team,
  [class*="streak-team"],
  [class*="cheat-team"],
  [class*="team-badge"] {
    width: 4rem !important;
    min-width: 4rem !important;
    max-width: 4rem !important;
    height: 3.15rem !important;
    justify-self: start !important;
  }

  .streak-player,
  .streak-copy,
  .cheatsheet-player,
  .cheatsheet-copy,
  .trend-copy,
  [class*="streak-player"],
  [class*="streak-copy"],
  [class*="cheat-player"],
  [class*="cheat-copy"] {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .streak-title,
  .cheatsheet-title,
  .trend-title,
  [class*="streak-title"],
  [class*="cheat-title"] {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  .streak-meta,
  .cheatsheet-meta,
  .trend-meta,
  [class*="streak-meta"],
  [class*="cheat-meta"] {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .streak-favorite,
  .cheatsheet-favorite,
  .trend-favorite,
  .favorite-star,
  [class*="favorite"],
  [class*="star-button"] {
    position: static !important;
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  .streak-rate,
  .cheatsheet-rate,
  .trend-rate,
  [class*="hit-rate"],
  [class*="streak-rate"],
  [class*="cheat-rate"] {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 4.3rem !important;
    max-width: 4.3rem !important;
    text-align: right !important;
    line-height: 0.98 !important;
    z-index: 1 !important;
  }

  .streak-row:focus,
  .streak-row:focus-visible,
  .streak-row:active,
  .cheatsheet-row:focus,
  .cheatsheet-row:focus-visible,
  .cheatsheet-row:active,
  .trend-row:focus,
  .trend-row:focus-visible,
  .trend-row:active,
  [class*="streak-row"]:focus,
  [class*="streak-row"]:focus-visible,
  [class*="streak-row"]:active,
  [class*="cheat-row"]:focus,
  [class*="cheat-row"]:focus-visible,
  [class*="cheat-row"]:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
  }
}

@media (max-width: 430px) {
  .streak-row,
  .cheatsheet-row,
  .trend-row,
  [class*="streak-row"],
  [class*="cheat-row"],
  [class*="cheatsheet-row"] {
    grid-template-columns: 4.25rem minmax(0, 1fr) 2.4rem 4rem !important;
    column-gap: 0.55rem !important;
    padding: 0.72rem 0.55rem !important;
  }

  .streak-team,
  .streak-team-badge,
  .cheatsheet-team,
  .cheatsheet-team-badge,
  .trend-team,
  [class*="streak-team"],
  [class*="cheat-team"],
  [class*="team-badge"] {
    width: 3.55rem !important;
    min-width: 3.55rem !important;
    max-width: 3.55rem !important;
    height: 2.9rem !important;
  }

  .streak-favorite,
  .cheatsheet-favorite,
  .trend-favorite,
  .favorite-star,
  [class*="favorite"],
  [class*="star-button"] {
    width: 2.1rem !important;
    min-width: 2.1rem !important;
    height: 2.1rem !important;
    min-height: 2.1rem !important;
  }

  .streak-rate,
  .cheatsheet-rate,
  .trend-rate,
  [class*="hit-rate"],
  [class*="streak-rate"],
  [class*="cheat-rate"] {
    min-width: 3.8rem !important;
    max-width: 3.8rem !important;
  }
}

@media (max-width: 760px) {
  .streak-list .mlb-streak-row {
    grid-template-columns: 4.25rem minmax(0, 1fr) 2.7rem 4.3rem !important;
    min-height: 5.25rem !important;
    padding: .72rem !important;
    overflow: hidden !important;
  }
  .streak-list .mlb-streak-row > .team-tile { grid-column: 1 !important; grid-row: 1 !important; }
  .streak-list .mlb-streak-row > .streak-player {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .streak-list .mlb-streak-row > .pick-star { grid-column: 3 !important; grid-row: 1 !important; }
  .streak-list .mlb-streak-row > .streak-rate {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 4.3rem !important;
  }
}

@media (max-width: 430px) {
  .streak-list .mlb-streak-row {
    grid-template-columns: 3.85rem minmax(0, 1fr) 2.35rem 3.65rem !important;
    gap: .45rem !important;
    padding-inline: .55rem !important;
  }
}

/* MLB streak rows contain a clickable inner row plus a separate favorite star.
   Keep that nested structure from inheriting the generic four-column card grid. */
@media (max-width: 760px) {
  .streak-list .streak-row-split {
    grid-template-columns: minmax(0, 1fr) 2.7rem !important;
    gap: .55rem !important;
    min-height: 5.2rem !important;
    padding: .72rem !important;
    overflow: visible !important;
  }

  .streak-list .streak-row-split > .streak-row-route {
    display: grid !important;
    grid-template-columns: 4.25rem minmax(0, 1fr) 4.3rem !important;
    gap: .6rem !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .streak-list .streak-row-split > .streak-row-route .team-tile { grid-column: 1 !important; }
  .streak-list .streak-row-split > .streak-row-route .streak-player {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .streak-list .streak-row-split > .streak-row-route .streak-player strong,
  .streak-list .streak-row-split > .streak-row-route .streak-player small {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  .streak-list .streak-row-split > .streak-row-route .streak-rate {
    grid-column: 3 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .streak-list .streak-row-split > .pick-star { grid-column: 2 !important; }
  .streak-board-panel .streak-table-head {
    grid-template-columns: 4.25rem minmax(0, 1fr) 4.3rem !important;
    gap: .6rem !important;
  }
  .streak-board-panel .streak-table-head span:last-child { grid-column: 3 !important; text-align: right; }
}

@media (max-width: 430px) {
  .streak-list .streak-row-split { grid-template-columns: minmax(0, 1fr) 2.35rem !important; }
  .streak-list .streak-row-split > .streak-row-route,
  .streak-board-panel .streak-table-head {
    grid-template-columns: 3.85rem minmax(0, 1fr) 3.65rem !important;
    gap: .45rem !important;
  }
}

/* Mobile streak PWA spacing fix */
@media (max-width: 700px) {
  .streak-sheet h1,
  .streak-board h1,
  .cheatsheet-panel h1,
  .cheatsheet-title,
  .streak-title-main {
    font-size: clamp(2.1rem, 8vw, 3.25rem) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .streak-row,
  .streak-list-row,
  .cheatsheet-row {
    display: grid !important;
    grid-template-columns: 4.7rem minmax(0, 1fr) 2.9rem 4.6rem !important;
    align-items: center !important;
    column-gap: 0.7rem !important;
    min-height: 4.85rem !important;
    padding: 0.72rem 0.72rem !important;
    -webkit-tap-highlight-color: transparent;
  }

  .streak-row:focus,
  .streak-row:focus-visible,
  .streak-row:focus-within,
  .streak-row:active,
  .streak-list-row:focus,
  .streak-list-row:focus-visible,
  .streak-list-row:focus-within,
  .streak-list-row:active,
  .cheatsheet-row:focus,
  .cheatsheet-row:focus-visible,
  .cheatsheet-row:focus-within,
  .cheatsheet-row:active {
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(139, 151, 178, 0.28) !important;
  }

  .streak-row .team-tile,
  .streak-row .team-badge,
  .streak-list-row .team-tile,
  .streak-list-row .team-badge,
  .cheatsheet-row .team-tile,
  .cheatsheet-row .team-badge {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 4.2rem !important;
    min-width: 4.2rem !important;
    height: 3.1rem !important;
    justify-self: start !important;
  }

  .streak-row .streak-copy,
  .streak-row .streak-player,
  .streak-row .player-copy,
  .streak-list-row .streak-copy,
  .streak-list-row .streak-player,
  .streak-list-row .player-copy,
  .cheatsheet-row .streak-copy,
  .cheatsheet-row .streak-player,
  .cheatsheet-row .player-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .streak-row .streak-copy strong,
  .streak-row .streak-player strong,
  .streak-row .player-copy strong,
  .streak-list-row .streak-copy strong,
  .streak-list-row .streak-player strong,
  .streak-list-row .player-copy strong,
  .cheatsheet-row .streak-copy strong,
  .cheatsheet-row .streak-player strong,
  .cheatsheet-row .player-copy strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  .streak-row .streak-favorite,
  .streak-row .favorite-star,
  .streak-row .star-button,
  .streak-list-row .streak-favorite,
  .streak-list-row .favorite-star,
  .streak-list-row .star-button,
  .cheatsheet-row .streak-favorite,
  .cheatsheet-row .favorite-star,
  .cheatsheet-row .star-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: center !important;
    align-self: center !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .streak-row .hit-rate,
  .streak-row .streak-rate,
  .streak-row .rate,
  .streak-list-row .hit-rate,
  .streak-list-row .streak-rate,
  .streak-list-row .rate,
  .cheatsheet-row .hit-rate,
  .cheatsheet-row .streak-rate,
  .cheatsheet-row .rate {
    grid-column: 4 !important;
    grid-row: 1 !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    text-align: right !important;
    min-width: 0 !important;
    width: 4.55rem !important;
    max-width: 4.55rem !important;
    z-index: 2 !important;
  }
}

@media (max-width: 430px) {
  .streak-row,
  .streak-list-row,
  .cheatsheet-row {
    grid-template-columns: 4.25rem minmax(0, 1fr) 2.55rem 3.95rem !important;
    column-gap: 0.55rem !important;
    padding: 0.65rem 0.55rem !important;
  }

  .streak-row .team-tile,
  .streak-row .team-badge,
  .streak-list-row .team-tile,
  .streak-list-row .team-badge,
  .cheatsheet-row .team-tile,
  .cheatsheet-row .team-badge {
    width: 3.85rem !important;
    min-width: 3.85rem !important;
    height: 2.8rem !important;
  }

  .streak-row .streak-favorite,
  .streak-row .favorite-star,
  .streak-row .star-button,
  .streak-list-row .streak-favorite,
  .streak-list-row .favorite-star,
  .streak-list-row .star-button,
  .cheatsheet-row .streak-favorite,
  .cheatsheet-row .favorite-star,
  .cheatsheet-row .star-button {
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 2.15rem !important;
  }

  .streak-row .hit-rate,
  .streak-row .streak-rate,
  .streak-row .rate,
  .streak-list-row .hit-rate,
  .streak-list-row .streak-rate,
  .streak-list-row .rate,
  .cheatsheet-row .hit-rate,
  .cheatsheet-row .streak-rate,
  .cheatsheet-row .rate {
    width: 3.9rem !important;
    max-width: 3.9rem !important;
  }
}

/* Mobile streak row collision guard - keeps favorite star away from hit-rate on PWA/mobile */
@media (max-width: 760px) {
  .streak-row,
  .streak-list-row,
  .cheatsheet-row,
  .streak-card,
  .cheatsheet-card,
  .streak-item {
    display: grid !important;
    grid-template-columns: 4.75rem minmax(0, 1fr) 2.75rem 4.6rem !important;
    align-items: center !important;
    column-gap: 0.75rem !important;
    min-height: 4.65rem !important;
    padding: 0.72rem 0.72rem !important;
    overflow: hidden !important;
  }

  .streak-row:focus,
  .streak-row:focus-visible,
  .streak-row:active,
  .streak-list-row:focus,
  .streak-list-row:focus-visible,
  .streak-list-row:active,
  .cheatsheet-row:focus,
  .cheatsheet-row:focus-visible,
  .cheatsheet-row:active,
  .streak-card:focus,
  .streak-card:focus-visible,
  .streak-card:active,
  .cheatsheet-card:focus,
  .cheatsheet-card:focus-visible,
  .cheatsheet-card:active,
  .streak-item:focus,
  .streak-item:focus-visible,
  .streak-item:active {
    border-color: rgba(126, 87, 194, 0.45) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .streak-row > *,
  .streak-list-row > *,
  .cheatsheet-row > *,
  .streak-card > *,
  .cheatsheet-card > *,
  .streak-item > * {
    min-width: 0 !important;
  }

  .streak-row .team-tile,
  .streak-row .team-badge,
  .streak-row .team-chip,
  .streak-list-row .team-tile,
  .streak-list-row .team-badge,
  .streak-list-row .team-chip,
  .cheatsheet-row .team-tile,
  .cheatsheet-row .team-badge,
  .cheatsheet-row .team-chip,
  .streak-card .team-tile,
  .streak-card .team-badge,
  .streak-card .team-chip,
  .cheatsheet-card .team-tile,
  .cheatsheet-card .team-badge,
  .cheatsheet-card .team-chip,
  .streak-item .team-tile,
  .streak-item .team-badge,
  .streak-item .team-chip {
    grid-column: 1 !important;
    width: 4.05rem !important;
    min-width: 4.05rem !important;
    max-width: 4.05rem !important;
    height: 3.25rem !important;
    margin: 0 !important;
  }

  .streak-row .streak-copy,
  .streak-row .player-copy,
  .streak-row .streak-player,
  .streak-row .cheatsheet-copy,
  .streak-list-row .streak-copy,
  .streak-list-row .player-copy,
  .streak-list-row .streak-player,
  .streak-list-row .cheatsheet-copy,
  .cheatsheet-row .streak-copy,
  .cheatsheet-row .player-copy,
  .cheatsheet-row .streak-player,
  .cheatsheet-row .cheatsheet-copy,
  .streak-card .streak-copy,
  .streak-card .player-copy,
  .streak-card .streak-player,
  .streak-card .cheatsheet-copy,
  .cheatsheet-card .streak-copy,
  .cheatsheet-card .player-copy,
  .cheatsheet-card .streak-player,
  .cheatsheet-card .cheatsheet-copy,
  .streak-item .streak-copy,
  .streak-item .player-copy,
  .streak-item .streak-player,
  .streak-item .cheatsheet-copy {
    grid-column: 2 !important;
    overflow: hidden !important;
  }

  .streak-row .streak-copy *,
  .streak-row .player-copy *,
  .streak-row .streak-player *,
  .streak-row .cheatsheet-copy *,
  .streak-list-row .streak-copy *,
  .streak-list-row .player-copy *,
  .streak-list-row .streak-player *,
  .streak-list-row .cheatsheet-copy *,
  .cheatsheet-row .streak-copy *,
  .cheatsheet-row .player-copy *,
  .cheatsheet-row .streak-player *,
  .cheatsheet-row .cheatsheet-copy *,
  .streak-card .streak-copy *,
  .streak-card .player-copy *,
  .streak-card .streak-player *,
  .streak-card .cheatsheet-copy *,
  .cheatsheet-card .streak-copy *,
  .cheatsheet-card .player-copy *,
  .cheatsheet-card .streak-player *,
  .cheatsheet-card .cheatsheet-copy *,
  .streak-item .streak-copy *,
  .streak-item .player-copy *,
  .streak-item .streak-player *,
  .streak-item .cheatsheet-copy * {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .streak-row .favorite-star,
  .streak-row .star-button,
  .streak-row .star-btn,
  .streak-row .pick-star,
  .streak-row .builder-star,
  .streak-list-row .favorite-star,
  .streak-list-row .star-button,
  .streak-list-row .star-btn,
  .streak-list-row .pick-star,
  .streak-list-row .builder-star,
  .cheatsheet-row .favorite-star,
  .cheatsheet-row .star-button,
  .cheatsheet-row .star-btn,
  .cheatsheet-row .pick-star,
  .cheatsheet-row .builder-star,
  .streak-card .favorite-star,
  .streak-card .star-button,
  .streak-card .star-btn,
  .streak-card .pick-star,
  .streak-card .builder-star,
  .cheatsheet-card .favorite-star,
  .cheatsheet-card .star-button,
  .cheatsheet-card .star-btn,
  .cheatsheet-card .pick-star,
  .cheatsheet-card .builder-star,
  .streak-item .favorite-star,
  .streak-item .star-button,
  .streak-item .star-btn,
  .streak-item .pick-star,
  .streak-item .builder-star {
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  .streak-row .hit-rate,
  .streak-row .streak-rate,
  .streak-row .rate,
  .streak-row .hit-rate-stack,
  .streak-list-row .hit-rate,
  .streak-list-row .streak-rate,
  .streak-list-row .rate,
  .streak-list-row .hit-rate-stack,
  .cheatsheet-row .hit-rate,
  .cheatsheet-row .streak-rate,
  .cheatsheet-row .rate,
  .cheatsheet-row .hit-rate-stack,
  .streak-card .hit-rate,
  .streak-card .streak-rate,
  .streak-card .rate,
  .streak-card .hit-rate-stack,
  .cheatsheet-card .hit-rate,
  .cheatsheet-card .streak-rate,
  .cheatsheet-card .rate,
  .cheatsheet-card .hit-rate-stack,
  .streak-item .hit-rate,
  .streak-item .streak-rate,
  .streak-item .rate,
  .streak-item .hit-rate-stack {
    grid-column: 4 !important;
    justify-self: end !important;
    text-align: right !important;
    min-width: 4.15rem !important;
    max-width: 4.15rem !important;
    line-height: 1.04 !important;
    white-space: normal !important;
    z-index: 2 !important;
  }
}

@media (max-width: 430px) {
  .streak-row,
  .streak-list-row,
  .cheatsheet-row,
  .streak-card,
  .cheatsheet-card,
  .streak-item {
    grid-template-columns: 4.35rem minmax(0, 1fr) 2.45rem 3.85rem !important;
    column-gap: 0.55rem !important;
    padding: 0.65rem 0.55rem !important;
  }

  .streak-row .team-tile,
  .streak-row .team-badge,
  .streak-row .team-chip,
  .streak-list-row .team-tile,
  .streak-list-row .team-badge,
  .streak-list-row .team-chip,
  .cheatsheet-row .team-tile,
  .cheatsheet-row .team-badge,
  .cheatsheet-row .team-chip,
  .streak-card .team-tile,
  .streak-card .team-badge,
  .streak-card .team-chip,
  .cheatsheet-card .team-tile,
  .cheatsheet-card .team-badge,
  .cheatsheet-card .team-chip,
  .streak-item .team-tile,
  .streak-item .team-badge,
  .streak-item .team-chip {
    width: 3.6rem !important;
    min-width: 3.6rem !important;
    max-width: 3.6rem !important;
    height: 2.85rem !important;
    font-size: 0.88rem !important;
  }

  .streak-row .favorite-star,
  .streak-row .star-button,
  .streak-row .star-btn,
  .streak-row .pick-star,
  .streak-row .builder-star,
  .streak-list-row .favorite-star,
  .streak-list-row .star-button,
  .streak-list-row .star-btn,
  .streak-list-row .pick-star,
  .streak-list-row .builder-star,
  .cheatsheet-row .favorite-star,
  .cheatsheet-row .star-button,
  .cheatsheet-row .star-btn,
  .cheatsheet-row .pick-star,
  .cheatsheet-row .builder-star,
  .streak-card .favorite-star,
  .streak-card .star-button,
  .streak-card .star-btn,
  .streak-card .pick-star,
  .streak-card .builder-star,
  .cheatsheet-card .favorite-star,
  .cheatsheet-card .star-button,
  .cheatsheet-card .star-btn,
  .cheatsheet-card .pick-star,
  .cheatsheet-card .builder-star,
  .streak-item .favorite-star,
  .streak-item .star-button,
  .streak-item .star-btn,
  .streak-item .pick-star,
  .streak-item .builder-star {
    width: 2.12rem !important;
    min-width: 2.12rem !important;
    height: 2.12rem !important;
  }

  .streak-row .hit-rate,
  .streak-row .streak-rate,
  .streak-row .rate,
  .streak-row .hit-rate-stack,
  .streak-list-row .hit-rate,
  .streak-list-row .streak-rate,
  .streak-list-row .rate,
  .streak-list-row .hit-rate-stack,
  .cheatsheet-row .hit-rate,
  .cheatsheet-row .streak-rate,
  .cheatsheet-row .rate,
  .cheatsheet-row .hit-rate-stack,
  .streak-card .hit-rate,
  .streak-card .streak-rate,
  .streak-card .rate,
  .streak-card .hit-rate-stack,
  .cheatsheet-card .hit-rate,
  .cheatsheet-card .streak-rate,
  .cheatsheet-card .rate,
  .cheatsheet-card .hit-rate-stack,
  .streak-item .hit-rate,
  .streak-item .streak-rate,
  .streak-item .rate,
  .streak-item .hit-rate-stack {
    min-width: 3.65rem !important;
    max-width: 3.65rem !important;
  }
}

/* Mobile streak / cheatsheet row fit: keeps star and hit rate from colliding on iPhone/PWA. */
@media (max-width: 760px) {
  .streak-result-row,
  .streak-list-row,
  .streak-row,
  .streak-card,
  .cheatsheet-row,
  .cheatsheet-card,
  .cheat-row,
  .cheat-card,
  .cheatsheet-list-row,
  [class*="streak"][class*="row"],
  [class*="streak"][class*="card"],
  [class*="cheat"][class*="row"],
  [class*="cheat"][class*="card"] {
    display: grid !important;
    grid-template-columns: 4.4rem minmax(0, 1fr) 2.7rem 4.2rem !important;
    align-items: center !important;
    gap: 0.65rem !important;
    min-height: 4.55rem !important;
    padding: 0.65rem !important;
    overflow: hidden !important;
    border-color: rgba(125, 93, 230, 0.42) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .streak-result-row:focus,
  .streak-result-row:focus-visible,
  .streak-result-row:active,
  .streak-list-row:focus,
  .streak-list-row:focus-visible,
  .streak-list-row:active,
  .cheatsheet-row:focus,
  .cheatsheet-row:focus-visible,
  .cheatsheet-row:active,
  .cheat-row:focus,
  .cheat-row:focus-visible,
  .cheat-row:active,
  [class*="streak"][class*="row"]:focus,
  [class*="streak"][class*="row"]:focus-visible,
  [class*="streak"][class*="row"]:active,
  [class*="cheat"][class*="row"]:focus,
  [class*="cheat"][class*="row"]:focus-visible,
  [class*="cheat"][class*="row"]:active {
    border-color: rgba(125, 93, 230, 0.42) !important;
    box-shadow: none !important;
    outline: none !important;
    background: rgba(16, 20, 29, 0.94) !important;
  }

  .streak-result-row > *,
  .streak-list-row > *,
  .streak-row > *,
  .cheatsheet-row > *,
  .cheat-row > *,
  [class*="streak"][class*="row"] > *,
  [class*="cheat"][class*="row"] > * {
    min-width: 0 !important;
  }

  .streak-team,
  .streak-team-chip,
  .streak-team-badge,
  .team-logo-chip,
  .team-tile,
  .cheat-team,
  [class*="streak"] [class*="team"],
  [class*="cheat"] [class*="team"] {
    grid-column: 1 !important;
    width: 3.8rem !important;
    max-width: 3.8rem !important;
    height: 3rem !important;
    min-height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .streak-main,
  .streak-copy,
  .streak-info,
  .streak-detail,
  .cheat-main,
  .cheat-copy,
  .cheat-info,
  .player-streak-copy,
  [class*="streak"] [class*="main"],
  [class*="streak"] [class*="copy"],
  [class*="streak"] [class*="info"],
  [class*="cheat"] [class*="main"],
  [class*="cheat"] [class*="copy"],
  [class*="cheat"] [class*="info"] {
    grid-column: 2 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .streak-main *,
  .streak-copy *,
  .streak-info *,
  .cheat-main *,
  .cheat-copy *,
  .cheat-info *,
  .player-streak-copy *,
  [class*="streak"] [class*="main"] *,
  [class*="streak"] [class*="copy"] *,
  [class*="streak"] [class*="info"] *,
  [class*="cheat"] [class*="main"] *,
  [class*="cheat"] [class*="copy"] *,
  [class*="cheat"] [class*="info"] * {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .favorite-star,
  .favorite-toggle,
  .favorite-btn,
  .star-button,
  .star-btn,
  .star-toggle,
  .pick-star,
  .builder-star,
  [class*="star"],
  [class*="favorite"] {
    grid-column: 3 !important;
    position: static !important;
    inset: auto !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    margin: 0 auto !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .hit-rate,
  .hit-rate-stack,
  .hit-rate-cell,
  .streak-hit-rate,
  .streak-rate,
  .streak-record,
  .cheat-hit-rate,
  .cheat-rate,
  .record,
  [class*="hit-rate"],
  [class*="rate"],
  [class*="record"] {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 4.05rem !important;
    max-width: 4.05rem !important;
    min-width: 4.05rem !important;
    text-align: right !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    overflow: visible !important;
  }

  .hit-rate *,
  .hit-rate-stack *,
  .hit-rate-cell *,
  .streak-hit-rate *,
  .streak-rate *,
  .streak-record *,
  .cheat-hit-rate *,
  .cheat-rate *,
  .record *,
  [class*="hit-rate"] *,
  [class*="rate"] *,
  [class*="record"] * {
    white-space: normal !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 430px) {
  .streak-result-row,
  .streak-list-row,
  .streak-row,
  .streak-card,
  .cheatsheet-row,
  .cheatsheet-card,
  .cheat-row,
  .cheat-card,
  .cheatsheet-list-row,
  [class*="streak"][class*="row"],
  [class*="streak"][class*="card"],
  [class*="cheat"][class*="row"],
  [class*="cheat"][class*="card"] {
    grid-template-columns: 3.95rem minmax(0, 1fr) 2.35rem 3.75rem !important;
    gap: 0.5rem !important;
    padding: 0.58rem !important;
  }

  .streak-team,
  .streak-team-chip,
  .streak-team-badge,
  .team-logo-chip,
  .team-tile,
  .cheat-team,
  [class*="streak"] [class*="team"],
  [class*="cheat"] [class*="team"] {
    width: 3.35rem !important;
    max-width: 3.35rem !important;
    height: 2.7rem !important;
    min-height: 2.7rem !important;
    font-size: 0.9rem !important;
  }

  .favorite-star,
  .favorite-toggle,
  .favorite-btn,
  .star-button,
  .star-btn,
  .star-toggle,
  .pick-star,
  .builder-star,
  [class*="star"],
  [class*="favorite"] {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
  }

  .hit-rate,
  .hit-rate-stack,
  .hit-rate-cell,
  .streak-hit-rate,
  .streak-rate,
  .streak-record,
  .cheat-hit-rate,
  .cheat-rate,
  .record,
  [class*="hit-rate"],
  [class*="rate"],
  [class*="record"] {
    width: 3.7rem !important;
    max-width: 3.7rem !important;
    min-width: 3.7rem !important;
    font-size: 0.92rem !important;
  }
}
/* Final mobile streak / cheatsheet row spacing pass.
   Keeps the favorite star and hit-rate/count in their own columns on iPhone/PWA. */
@media (max-width: 760px) {
  .streak-row,
  .streak-card,
  .streak-list-row,
  .streak-result-row,
  .cheatsheet-row,
  .cheatsheet-card,
  .cheat-row,
  .cheat-card,
  [class*="streak"][class*="row"],
  [class*="cheat"][class*="row"] {
    display: grid !important;
    grid-template-columns: 4.25rem minmax(0, 1fr) 2.7rem 4.3rem !important;
    align-items: center !important;
    column-gap: 0.6rem !important;
    min-height: 4.85rem !important;
    padding: 0.72rem 0.72rem !important;
    overflow: hidden !important;
    touch-action: manipulation;
  }

  .streak-row:focus,
  .streak-card:focus,
  .streak-list-row:focus,
  .streak-result-row:focus,
  .cheatsheet-row:focus,
  .cheatsheet-card:focus,
  .cheat-row:focus,
  .cheat-card:focus,
  [class*="streak"][class*="row"]:focus,
  [class*="cheat"][class*="row"]:focus,
  .streak-row:active,
  .streak-card:active,
  .streak-list-row:active,
  .streak-result-row:active,
  .cheatsheet-row:active,
  .cheatsheet-card:active,
  .cheat-row:active,
  .cheat-card:active,
  [class*="streak"][class*="row"]:active,
  [class*="cheat"][class*="row"]:active {
    outline: none !important;
    box-shadow: none !important;
  }

  .streak-row .team-badge,
  .streak-card .team-badge,
  .streak-list-row .team-badge,
  .streak-result-row .team-badge,
  .cheatsheet-row .team-badge,
  .cheatsheet-card .team-badge,
  .cheat-row .team-badge,
  .cheat-card .team-badge,
  [class*="streak"][class*="row"] [class*="team"],
  [class*="cheat"][class*="row"] [class*="team"] {
    grid-column: 1 !important;
    justify-self: start !important;
    min-width: 3.4rem !important;
    max-width: 4.1rem !important;
  }

  .streak-row .streak-copy,
  .streak-row .streak-main,
  .streak-row .streak-player,
  .streak-row .streak-title,
  .streak-card .streak-copy,
  .streak-card .streak-main,
  .streak-card .streak-player,
  .streak-card .streak-title,
  .cheatsheet-row .cheat-copy,
  .cheatsheet-row .cheat-main,
  .cheatsheet-row .cheat-player,
  .cheatsheet-row .cheat-title,
  .cheat-row .cheat-copy,
  .cheat-row .cheat-main,
  .cheat-row .cheat-player,
  .cheat-row .cheat-title,
  [class*="streak"][class*="row"] [class*="copy"],
  [class*="streak"][class*="row"] [class*="main"],
  [class*="streak"][class*="row"] [class*="player"],
  [class*="streak"][class*="row"] [class*="title"],
  [class*="cheat"][class*="row"] [class*="copy"],
  [class*="cheat"][class*="row"] [class*="main"],
  [class*="cheat"][class*="row"] [class*="player"],
  [class*="cheat"][class*="row"] [class*="title"] {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .streak-row .favorite-star,
  .streak-row .favorite-button,
  .streak-row .star-button,
  .streak-row .star-circle,
  .streak-row .pick-star,
  .streak-card .favorite-star,
  .streak-card .favorite-button,
  .streak-card .star-button,
  .streak-card .star-circle,
  .streak-card .pick-star,
  .cheatsheet-row .favorite-star,
  .cheatsheet-row .favorite-button,
  .cheatsheet-row .star-button,
  .cheatsheet-row .star-circle,
  .cheatsheet-row .pick-star,
  .cheat-row .favorite-star,
  .cheat-row .favorite-button,
  .cheat-row .star-button,
  .cheat-row .star-circle,
  .cheat-row .pick-star,
  [class*="streak"][class*="row"] [class*="favorite"],
  [class*="streak"][class*="row"] [class*="star"],
  [class*="cheat"][class*="row"] [class*="favorite"],
  [class*="cheat"][class*="row"] [class*="star"] {
    grid-column: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: 2 !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    margin: 0 !important;
  }

  .streak-row .hit-rate,
  .streak-row .streak-rate,
  .streak-row .rate-cell,
  .streak-row .result-rate,
  .streak-card .hit-rate,
  .streak-card .streak-rate,
  .streak-card .rate-cell,
  .streak-card .result-rate,
  .cheatsheet-row .hit-rate,
  .cheatsheet-row .streak-rate,
  .cheatsheet-row .rate-cell,
  .cheatsheet-row .result-rate,
  .cheat-row .hit-rate,
  .cheat-row .streak-rate,
  .cheat-row .rate-cell,
  .cheat-row .result-rate,
  [class*="streak"][class*="row"] [class*="hit-rate"],
  [class*="streak"][class*="row"] [class*="rate"],
  [class*="cheat"][class*="row"] [class*="hit-rate"],
  [class*="cheat"][class*="row"] [class*="rate"] {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 3.7rem !important;
    max-width: 4.3rem !important;
    text-align: right !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
}

@media (max-width: 430px) {
  .streak-row,
  .streak-card,
  .streak-list-row,
  .streak-result-row,
  .cheatsheet-row,
  .cheatsheet-card,
  .cheat-row,
  .cheat-card,
  [class*="streak"][class*="row"],
  [class*="cheat"][class*="row"] {
    grid-template-columns: 3.85rem minmax(0, 1fr) 2.35rem 3.65rem !important;
    column-gap: 0.45rem !important;
    padding-inline: 0.55rem !important;
  }

  .streak-row .favorite-star,
  .streak-row .favorite-button,
  .streak-row .star-button,
  .streak-row .star-circle,
  .streak-row .pick-star,
  .streak-card .favorite-star,
  .streak-card .favorite-button,
  .streak-card .star-button,
  .streak-card .star-circle,
  .streak-card .pick-star,
  .cheatsheet-row .favorite-star,
  .cheatsheet-row .favorite-button,
  .cheatsheet-row .star-button,
  .cheatsheet-row .star-circle,
  .cheatsheet-row .pick-star,
  .cheat-row .favorite-star,
  .cheat-row .favorite-button,
  .cheat-row .star-button,
  .cheat-row .star-circle,
  .cheat-row .pick-star,
  [class*="streak"][class*="row"] [class*="favorite"],
  [class*="streak"][class*="row"] [class*="star"],
  [class*="cheat"][class*="row"] [class*="favorite"],
  [class*="cheat"][class*="row"] [class*="star"] {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
  }
}
.model-evidence {
  color: #cbd5e1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.prop-edge.model {
  background: #111827 !important;
  box-shadow: none !important;
  font-size: .75rem;
  letter-spacing: .04em;
}

.prop-edge.model.over {
  color: #6ef5a8 !important;
  border-color: rgba(110, 245, 168, .7);
}

.prop-edge.model.under {
  color: #ff83ad !important;
  border-color: rgba(255, 131, 173, .7);
}

@media (max-width: 640px) {
  .live-prop-summary { flex-wrap: wrap; }
  .model-evidence { width: 100%; white-space: normal; }
}
.news-hub { overflow: hidden; }
.news-feature { display: grid; grid-template-columns: minmax(240px, 42%) 1fr; width: 100%; min-height: 280px; margin: 12px 0 18px; padding: 0; overflow: hidden; border: 1px solid #42506b; border-radius: 18px; background: linear-gradient(135deg, #111722, #19162b); color: #f8fafc; text-align: left; cursor: pointer; }
.news-feature img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.news-feature > span { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(20px, 4vw, 42px); }
.news-feature em, .news-card em { color: #65f6a2; font-size: .72rem; font-style: normal; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.news-feature strong { font-size: clamp(1.35rem, 3vw, 2.25rem); line-height: 1.08; }
.news-feature small, .news-card small { color: #b8c2d8; line-height: 1.5; }
.news-feature b { color: #c59cff; font-size: .8rem; }
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.news-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; padding: 0; border: 1px solid #303b55; border-radius: 14px; background: #111722; color: #f8fafc; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.news-card:hover { transform: translateY(-2px); border-color: #8b5cf6; }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0f17; }
.news-card > span { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px; }
.news-card strong { font-size: 1rem; line-height: 1.25; }
.news-card small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news-card i { margin-top: auto; color: #8fa0bd; font-size: .68rem; font-style: normal; }
.news-reader { max-width: 940px; margin-inline: auto; overflow: hidden; }
.news-back { margin-bottom: 16px; padding: 9px 13px; border: 1px solid #6d4ca1; border-radius: 999px; background: #171326; color: #d8c3ff; font-weight: 800; cursor: pointer; }
.news-reader-image { display: block; width: 100%; max-height: 480px; border-radius: 16px; object-fit: cover; }
.news-reader-copy { max-width: 760px; margin: 0 auto; padding: clamp(22px, 5vw, 52px) 8px; }
.news-reader-copy > em { color: #65f6a2; font-size: .75rem; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.news-reader-copy h2 { margin: 12px 0 26px; font-size: clamp(1.75rem, 5vw, 3.2rem); line-height: 1.08; }
.news-reader-copy p { margin: 0 0 20px; color: #d3daea; font-size: clamp(1rem, 2vw, 1.13rem); line-height: 1.75; }
.news-reader-copy .news-reader-status { padding: 12px 14px; border: 1px solid #4d3c72; border-radius: 12px; background: #171326; color: #cdb7f5; font-size: .9rem; }
.news-source-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px solid #303b55; color: #8fa0bd; font-size: .78rem; }
.news-source-note a { color: #c59cff; font-weight: 800; }
.team-tendency-help { color: #9eacc5; line-height: 1.5; }
.tendency-scope { margin-bottom: 8px; }
.team-tendency-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.team-tendency-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px; border: 1px solid #303b55; border-radius: 14px; background: linear-gradient(145deg, #111722, #171528); }
.tendency-rank { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #7c3aed; color: #fff; font-weight: 900; }
.team-tendency-card > div { display: flex; flex-direction: column; gap: 2px; }
.team-tendency-card small { color: #65f6a2; font-weight: 900; }
.team-tendency-card strong { color: #fff; font-size: 1.75rem; line-height: 1; }
.team-tendency-card em { color: #aebbd1; font-size: .72rem; font-style: normal; }
.team-tendency-card .tendency-mini { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.tendency-mini span { padding: 6px; border: 1px solid #39445d; border-radius: 8px; color: #cbd5e1; font-size: .68rem; text-align: center; }
@media (max-width: 900px) { .team-tendency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .team-tendency-grid { grid-template-columns: 1fr; } }
.injury-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.injury-meta b, .injury-meta i, .injury-meta em { padding: 3px 7px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #dbe5f7; font-size: .67rem; font-style: normal; font-weight: 800; }
.injury-meta em { color: #ffd27a; border-color: rgba(255, 210, 122, .35); }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .news-feature { grid-template-columns: 1fr; } .news-feature img { min-height: 0; aspect-ratio: 16 / 9; } .news-grid { grid-template-columns: 1fr; } }

/* Final readable mobile streak layout: full prop text, no truncation. */
@media (max-width: 760px) {
  .streak-list > .streak-row,
  .streak-list > .mlb-streak-row {
    display: grid !important;
    grid-template-columns: 4.25rem minmax(0, 1fr) 4.3rem !important;
    grid-template-rows: auto auto !important;
    gap: .45rem .7rem !important;
    min-height: 7.25rem !important;
    padding: .85rem .75rem !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .streak-list > .streak-row > .team-tile,
  .streak-list > .mlb-streak-row > .team-tile {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
  }

  .streak-list > .streak-row > .streak-player,
  .streak-list > .mlb-streak-row > .streak-player {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .streak-list > .streak-row > .streak-player strong,
  .streak-list > .streak-row > .streak-player small,
  .streak-list > .mlb-streak-row > .streak-player strong,
  .streak-list > .mlb-streak-row > .streak-player small {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .streak-list > .streak-row > .streak-player strong,
  .streak-list > .mlb-streak-row > .streak-player strong {
    font-size: .96rem !important;
    line-height: 1.22 !important;
  }

  .streak-list > .streak-row > .pick-star,
  .streak-list > .mlb-streak-row > .pick-star {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: end !important;
  }

  .streak-list > .streak-row > .streak-rate,
  .streak-list > .mlb-streak-row > .streak-rate {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 4.3rem !important;
  }

  .streak-board-panel .streak-table-head {
    grid-template-columns: 4.25rem minmax(0, 1fr) 4.3rem !important;
  }
}

@media (max-width: 430px) {
  .streak-list > .streak-row,
  .streak-list > .mlb-streak-row {
    grid-template-columns: 3.85rem minmax(0, 1fr) 3.9rem !important;
    gap: .4rem .55rem !important;
    min-height: 7.5rem !important;
    padding-inline: .6rem !important;
  }
  .streak-board-panel .streak-table-head {
    grid-template-columns: 3.85rem minmax(0, 1fr) 3.9rem !important;
  }
}
.covers-grid { display: grid; gap: 16px; }
.covers-card { border: 1px solid #30394f; border-radius: 16px; padding: 18px; background: #10151f; }
.covers-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid #30394f; padding-bottom: 12px; }
.covers-card header span, .covers-card h4 { color: #2df29b; text-transform: uppercase; }
.covers-card h3, .covers-card h4 { margin: 4px 0 10px; }
.covers-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.covers-summary b { border: 1px solid #6f42a8; border-radius: 999px; padding: 6px 10px; }
.covers-card li { margin: 7px 0; color: #c7d2ee; }
.covers-card table { width: 100%; border-collapse: collapse; }
.covers-card th, .covers-card td { padding: 8px; border-bottom: 1px solid #293248; text-align: left; }
.covers-meetings, .covers-injuries { display: grid; gap: 8px; }
.covers-meetings span, .covers-injuries span { display: grid; gap: 3px; padding: 9px; border: 1px solid #293248; border-radius: 10px; }
.covers-source { display: inline-block; margin-top: 14px; }
.slate-covers-link { margin: 10px 0; }
.covers-matchup-board { padding: 0; overflow: hidden; background: #f5f6f7; color: #172231; border-color: #344054; }
.covers-matchup-board .covers-score-header { padding: 12px 16px; background: #223246; color: #fff; border: 0; }
.covers-matchup-board .covers-score-header span { color: #ff6a1a; font-weight: 900; }
.covers-matchup-board .covers-score-header h3 { color: #fff; }
.covers-matchup-board .covers-score-header small { color: #dbe5f1; }
.covers-market-board { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.55fr) minmax(0,1fr); align-items: stretch; background: #fff; border-bottom: 1px solid #d8dde4; }
.covers-team-side { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; gap: 6px 12px; padding: 20px; }
.covers-team-side.home { text-align: right; }
.covers-team-side > small { grid-column: 1 / -1; color: #667085; font-weight: 800; }
.covers-team-side > strong { font-size: clamp(1.2rem, 3vw, 2rem); color: #111827; }
.covers-team-side > div { grid-row: 3; display: flex; align-items: center; gap: 7px; }
.covers-team-side.home > div { justify-content: flex-end; }
.covers-team-side > div b { padding: 7px 9px; border-radius: 5px; background: #e7faef; color: #107845; font-size: 1.05rem; }
.covers-team-side > div span { color: #667085; font-size: .78rem; }
.covers-team-side > em { grid-column: 2; grid-row: 2 / 4; align-self: center; padding: 8px 11px; border-radius: 7px; background: #f2f4f7; color: #172231; font-size: 1.05rem; font-style: normal; font-weight: 900; }
.covers-market-center { display: grid; place-content: center; text-align: center; gap: 5px; padding: 16px 10px; border-inline: 1px solid #e2e7ed; background: #fafafa; }
.covers-market-center small, .covers-market-center span { color: #667085; }
.covers-market-center strong { color: #172231; font-size: 1.15rem; }
.covers-matchup-board .covers-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 0; background: #fff; border-bottom: 1px solid #d8dde4; }
.covers-matchup-board .covers-summary b { display: grid; gap: 4px; padding: 14px; border: 0; border-right: 1px solid #e2e7ed; border-radius: 0; text-align: center; color: #172231; }
.covers-matchup-board .covers-summary small { color: #667085; font-size: .68rem; }
.covers-matchup-board > h4, .covers-matchup-board > ul, .covers-matchup-board > .table-scroll, .covers-matchup-board > .covers-meetings, .covers-matchup-board > .covers-injuries, .covers-matchup-board > .covers-source { margin-left: 18px; margin-right: 18px; }
.covers-matchup-board > h4 { color: #172231; border-bottom: 2px solid #ff5a1f; padding-bottom: 7px; }
.covers-matchup-board li, .covers-matchup-board td { color: #344054; }
.covers-matchup-board th { color: #172231; background: #e9edf1; }
.covers-matchup-board .covers-meetings span, .covers-matchup-board .covers-injuries span { background: #fff; border-color: #d8dde4; color: #344054; }
.covers-matchup-board .covers-source { margin-bottom: 18px; color: #172231; }
@media (max-width: 640px) {
  .covers-card { padding: 13px; }
  .covers-card header { flex-direction: column; }
  .covers-card ul { padding-left: 20px; }
  .covers-matchup-board { padding: 0; }
  .covers-market-board { grid-template-columns: 1fr 1fr; }
  .covers-market-center { grid-column: 1 / -1; grid-row: 2; border: 0; border-block: 1px solid #e2e7ed; }
  .covers-team-side { padding: 14px 12px; grid-template-columns: 1fr; }
  .covers-team-side.home { text-align: right; }
  .covers-team-side > em { grid-column: 1; grid-row: auto; justify-self: start; }
  .covers-team-side.home > em { justify-self: end; }
  .covers-matchup-board .covers-summary { grid-template-columns: 1fr; }
  .covers-matchup-board .covers-summary b { border-right: 0; border-bottom: 1px solid #e2e7ed; }
}

/* Mobile research controls: keep each control group in normal document flow. */
@media (max-width: 639px) {
  .manual-line-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .manual-line-box > * {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .manual-line-box .line-favorite-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
  }

  .manual-line-box .line-favorite-row label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 6px !important;
  }

  .manual-line-box .line-favorite-row input {
    width: min(100%, 190px) !important;
    max-width: 190px !important;
  }

  .manual-line-box .compact-scope {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .manual-line-box .compact-scope button {
    flex: 1 1 calc(33.333% - 8px) !important;
    width: auto !important;
    min-width: 5.25rem !important;
    max-width: none !important;
    min-height: 44px !important;
    padding: 7px 8px !important;
    white-space: normal !important;
  }

  .manual-line-box > small {
    display: block !important;
    line-height: 1.4 !important;
  }

  .prop-card .top-prop-rates,
  .prop-card .best-prop-rates {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    position: static !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Final portrait cascade guard for generated lineup results. */
@media (max-width: 639px) and (orientation: portrait) {
  body .lineup-generator .lineup-results,
  body .lineup-generator .lineup-group,
  body .lineup-generator .lineup-result-grid,
  body .lineup-generator .generated-lineup {
    position: static !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    inset: auto !important;
  }

  body .lineup-generator .lineup-result-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body .lineup-generator .generated-lineup-head {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body .lineup-generator .generated-lineup-head > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body .lineup-generator .generated-lineup ol,
  body .lineup-generator .generated-lineup li {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body .lineup-generator .generated-lineup li {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3px !important;
  }
}

/* Portrait Lineup Generator: use block flow so Safari cannot create implicit columns. */
@media (max-width: 639px) and (orientation: portrait) {
  html body #app .pick-builder,
  html body #app .lineup-generator,
  html body #app .lineup-generator .lineup-block,
  html body #app .lineup-generator .lineup-results,
  html body #app .lineup-generator .lineup-group,
  html body #app .lineup-generator .lineup-result-grid {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #app .lineup-generator > *,
  html body #app .lineup-generator .lineup-block > *,
  html body #app .lineup-generator .lineup-results > *,
  html body #app .lineup-generator .lineup-group > *,
  html body #app .lineup-generator .lineup-result-grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  html body #app .lineup-generator .lineup-block {
    padding: 12px !important;
    overflow: hidden !important;
  }

  html body #app .lineup-generator .lineup-block + .lineup-block,
  html body #app .lineup-generator .lineup-block > * + *,
  html body #app .lineup-generator .lineup-group + .lineup-group {
    margin-top: 12px !important;
  }

  html body #app .lineup-generator .lineup-block-head,
  html body #app .lineup-generator .lineup-generate-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    text-align: left !important;
  }

  html body #app .lineup-generator .lineup-entry-grid,
  html body #app .lineup-generator .lineup-prop-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body #app .lineup-generator .lineup-package-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #app .lineup-generator .lineup-size-control {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px !important;
  }

  html body #app .lineup-generator .lineup-size-control input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #app .lineup-generator .exposure-control {
    grid-column: 1 / -1 !important;
  }

  html body #app .lineup-generator .lineup-generate-row > button,
  html body #app .lineup-generator .lineup-head-actions,
  html body #app .lineup-generator .lineup-head-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body #app .lineup-generator .lineup-head-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body #app .lineup-generator .generated-lineup {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    text-align: left !important;
  }

  html body #app .lineup-generator .generated-lineup-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    text-align: left !important;
  }

  html body #app .lineup-generator .generated-lineup-head > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body #app .lineup-generator .generated-lineup li {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    text-align: left !important;
  }

  html body #app .lineup-generator .generated-lineup li span,
  html body #app .lineup-generator .generated-lineup li small,
  html body #app .lineup-generator .generated-lineup li b {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }

  html body #app .lineup-generator .lineup-exposure-report,
  html body #app .lineup-generator .lineup-exposure-report > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}