/* ==========================================================================
   Madness Index — mobile.css  v1.0
   Focused mobile overrides loaded after styles2.css.
   All fixes are organized here; styles2.css is never touched.
   Load order: <link href="styles2.css?v=21"> → <link href="mobile.css">
   ========================================================================== */


/* =============================================
   § GLOBAL — Safe area + touch scrollbar
   ============================================= */

/* Honor iPhone notch / home-bar safe areas */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
}

/* Hide scrollbars on touch devices — cosmetic noise on mobile */
@media (pointer: coarse) {
  *                      { scrollbar-width: none !important; }
  *::-webkit-scrollbar   { display: none !important; }
}

@media (max-width: 720px) {

  /* ==========================================
     KICKER SKIN — force reuse (does not rely on class being present)
     ========================================== */

  #matchupBar .matchup-controls-label,
  #matchupBar .mi-log-label,
  #interactionsSection .legend-header--interactions .int-console-pill.interactions-header-pill,
  #cindCard #marksTileA .marks-header-text.matchup-kicker,
  #cindCard #marksTileB .marks-header-text.matchup-kicker,
  #favCard  #marksTileA .marks-header-text.matchup-kicker,
  #favCard  #marksTileB .marks-header-text.matchup-kicker,
  #cindCard .section-header .matchup-kicker,
  #favCard  .section-header .matchup-kicker,
  #matchupBar.is-editing .matchup-controls-label.matchup-kicker,
  #summarySection .matchup-kicker.syn-kicker,
  #summarySectionMobile .mi-sum-mob-title.matchup-kicker {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 750 !important;
    line-height: 1 !important;

    color: rgba(249,246,238,0.9) !important;
    background-color: rgba(3, 7, 18, 0.55) !important;
    border: 1px solid rgba(148,163,184,0.18) !important;
    border-radius: 12px !important;

    padding: 6px 8px !important;
    margin: 0 !important;
    white-space: nowrap !important;

    box-shadow:
      0 10px 22px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 0 0 1px rgba(255,255,255,0.03);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
    user-select: none !important;
  }

/* =============================================
   § HEADER — Mobile layout
   ============================================= */
@media (max-width: 720px) {

  /* Stack the header contents top-to-bottom with breathing room */
  .enhanced-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 16px 16px !important;
    gap: 10px !important;
  }

  /* Logo: let it breathe */
  .hero-logo-wrap {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-logo {
    max-height: 80px !important;
    width: auto !important;
  }

  /* Tagline + subtitle */
  .hero-text-wrap {
    position: static !important;
    width: 100% !important;
    text-align: center !important;
  }

  .hero-tagline {
    letter-spacing: 0.08px;
  }

  .app-shell.pre-matchup .hero-logo {
    padding: 3px;
  }

  /* Version badge stays in flow, but must remain the positioning anchor */
  .version-badge-btn {
    position: relative !important;
    align-self: center !important;
    margin-top: 4px !important;
    z-index: 10020 !important;
  }

  /* Patch notes panel: anchor to the badge itself and float above all mobile content */
  .version-notes {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    bottom: auto !important;
    transform: translateX(-50%) translateY(-6px) !important;

    width: min(340px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(52vh, 320px) !important;
    overflow: auto !important;

    z-index: 10030 !important;
  }

  .version-notes.is-open {
    transform: translateX(-50%) translateY(0) !important;
  }

  .enhanced-header,
  .app-header,
  .enhanced-header * {
    overflow: visible !important;
  }
}

/* =============================================
   § ≤960px — Tablet edge cases
   ============================================= */
@media (max-width: 960px) {

  /* Team selects: stack vertically so they're not pinched side-by-side */
  .control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Round button + sandbox toggle: stack cleanly */
  .round-control-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* =============================================
   § PRE-SETUP ROW — Force stack on mobile
   (overrides a later non-media-query rule in
   styles2.css that resets to repeat(3, 1fr))
   ============================================= */
@media (max-width: 960px) {

  #preSetupRow.pre-setup-row,
  .pre-setup-row.top-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  #preSetupRow.pre-setup-row > *,
  .pre-setup-row.top-bar > * {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 960px) {

  /* ── Card-level text centering ── */
  #preSetupRow .card {
    text-align: center !important;
  }

  /* ── Step labels ── */
  #preSetupRow .round-step-label,
  #preSetupRow .step-label {
    text-align: center !important;
  }

  /* ── Team selects: center and full-width ── */
  #preSetupRow .control-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #preSetupRow .select-wrap {
    width: 100% !important;
  }

  #preSetupRow select {
    width: 100% !important;
  }

  /* ── Round row: center the button and sandbox toggle ── */
  #preSetupRow .round-control-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #preSetupRow .round-selector-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #preSetupRow .round-btn {
    width: 100% !important;
    flex: unset !important;
    min-height: 44px !important;
  }

  #preSetupRow .sandbox-toggle.enhanced-sandbox {
    flex: 1 1 0 !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
  }

  #preSetupRow .round-btn {
    flex: 1 1 auto !important;
    max-width: 240px !important;
  }

  /* ── Compare Matchup button: centered and full-width ── */
  #preSetupRow .matchup-actions-row {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #preSetupRow #compareBtn {
    width: 100% !important;
    max-width: 340px !important;
  }

  /* ── Helper text under Step 3 ── */
  #preSetupRow .helper-text {
    text-align: center !important;
  }

  .pre-hub-title {
    display: none;
  }

  .or-divider {
    display: none;
  }

  .controls-card.is-primary-entry .file-label.file-label--manual {
    display: none;
  }

  #preMatchupHub .pre-step{
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-template-areas: "num copy status"!important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  #preMatchupHub .pre-step-copy{
    align-items: flex-start !important;
    text-align: left !important;
  }

  #preMatchupHub .pre-step-status{
    justify-self: end !important;
    align-self: center !important;
    white-space: nowrap !important;
  }

  #preMatchupHub .pre-step-label,
  #preMatchupHub .pre-step-text{
    text-align: left !important;
  }
}

/* =============================================
   § ≤720px — Full mobile pass
   ============================================= */
@media (max-width: 720px) {

  /* ── Edit-mode matchup bar overflow fix ──────────────────────────────
     styles2.css uses minmax(240px, 520px) in edit mode, which forces a
     480px+ minimum width → hard overflow on any phone. Override to 1fr. */

  #matchupBar.is-editing .matchup-bar-main {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #matchupBar.is-editing .matchup-bar-left,
  #matchupBar.is-editing .matchup-bar-right,
  #matchupBar.is-editing .matchup-bar-center {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Score Synthesis table: horizontal scroll container ──────────────
     7-column table-layout:fixed table crushes to near-zero column widths
     below ~600px. Wrap it in a scroll container and set a safe min-width
     so the table renders legibly and the user can scroll to see all data. */

  /* ── Pre-setup row: consistent gap when stacked ─────────────────────  */
  .pre-setup-row {
    gap: 12px !important;
  }

  /* ── Minimum tap targets (44px = HIG / WCAG minimum) ────────────────  */
  .round-btn,
  .sandbox-toggle,
  select,
  input[type="file"],
  .matchup-quick-run,
  .matchup-quick-cancel {
    min-height: 44px !important;
  }

  /* ── Run / Cancel buttons: share the available row width ────────────  */
  .matchup-quick-run,
  .matchup-quick-cancel {
    flex: 1 1 auto;
  }

  /* ── Version badge: stay readable at phone density ──────────────────  */
  .version-badge-btn {
    font-size: 10px !important;
    padding: 6px 10px !important;
    min-height: 36px !important;
  }

  /* ── Bottom breathing room above the glossary bottom bar ────────────  */
  .app-shell {
    padding-bottom: 72px !important;
  }
}


/* =============================================
   § ≤600px — Small phone density
   ============================================= */
@media (max-width: 600px) {

  /* Core Traits table: allow label text to wrap in tight cells */
  .mi-core-battlefield,
  .mi-core-tier {
    font-size: 10px !important;
    white-space: normal !important;
    word-break: break-word;
  }

  /* Tighten vertical spacing inside the analysis shell */
  .analysis-shell > section,
  .analysis-shell > div {
    margin-top: 10px !important;
  }
}


/* =============================================
   § ≤420px — Extra-small phones
   ============================================= */
@media (max-width: 420px) {

  /* Synthesis table: narrower safe minimum for 375px handsets */
  #summarySection .summary-synthesis-table {
    min-width: 480px !important;
    width: 480px !important;
  }

  /* Sandbox toggle: force its own row so it doesn't crowd the round button */
  .round-control-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sandbox-toggle.enhanced-sandbox {
    justify-content: flex-start !important;
  }
}

/* =============================================
   § MATCHUP LOG — Hidden on mobile
   (Desktop-optimized grid; not viable at mobile
   widths. Removed entirely to avoid layout noise.)
   ============================================= */
@media (max-width: 720px) {

  .mi-matchup-backplate {
    display: none !important;
  }
}

/* =============================================
   § MATCHUP CONTROLS DOCK — Mobile
   ============================================= */
@media (max-width: 720px) {

  /* ── BOTH STATES: shared base ── */
  .mi-matchup-dock {
    padding: 12px !important;
  }

  .matchup-controls-label.matchup-kicker {
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

/* ── NON-EDITING STATE ── */

  #matchupBar:not(.is-editing) .matchup-bar-main {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    align-items: center !important;
    gap: 10px 8px !important;
    padding: 14px 12px 16px !important;
    width: 100% !important;
  }

  /* Kicker: row 1, full width */
  #matchupBar:not(.is-editing) .matchup-controls-label {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }

  /* Team A: row 2, left col */
  #matchupBar:not(.is-editing) .matchup-bar-left {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: 2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Team B: row 2, right col */
  #matchupBar:not(.is-editing) .matchup-bar-right {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 2px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Team name: truncate, no wrapping */
  #matchupBar:not(.is-editing) .matchup-bar-team {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  #matchupBar:not(.is-editing) .matchup-bar-label {
    font-size: 10px !important;
    opacity: 0.65 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
  }

  #matchupBar:not(.is-editing) .matchup-bar-seed {
    font-size: 10px !important;
    opacity: 0.7 !important;
    white-space: nowrap !important;
  }
 
  #matchupBar:not(.is-editing) .matchup-controls-label {
    position: static !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  /* =========================================
   MOBILE — WORKFLOW ACTION BUTTONS
   ========================================= */

  .matchup-actions-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .clear-workflow-btn {
    width: 100%;
    margin-left: 0;
    font-size: 0.9rem;
    padding: 10px 12px;
  }

  #shareMatchupBtn,
  #saveMatchupImageBtn {
    width: 50%;
    min-width: 0;
    font-size: 0.9rem;
    padding: 10px 12px;
  }
}

/* =============================================
   § VERDICT — Mobile proclamation layout
   ============================================= */
@media (max-width: 600px) {

  /* Strip away the desktop rail feel */
  #verdictShell .mi-verdict-shell-inner::before {
    display: none !important;
  }

  /* Tighten the left proclamation block itself */
  #verdictShell .mi-verdict-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    margin: 0 !important;
  }

  /* True vertical stack: logo → headline → supporting line */
  #verdictShell .mi-scorebug-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;

    width: 100% !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    margin: 0 !important;

    text-align: center !important;
  }

  /* Kill the desktop vertical logo */
  #verdictShell .mi-vert-logo {
    display: none !important;
  }

  /* Make the mobile kicker/logo row compact */
  #verdictShell .mi-scorebug-kicker {
    width: 100% !important;
    min-height: 0 !important;
    margin-top: 4px;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Remove any inherited rail divider behavior */
  #verdictShell .mi-scorebug-kicker::before {
    display: none !important;
  }

  #verdictShell .mi-scorebug-kicker::after {
    content: '' !important;
    position: static !important;
    display: block !important;

    width: clamp(140px, 46vw, 200px) !important;
    height: 34px !important;
    margin: 0 auto !important;

    background: url("assets/img/logos/madness-index-home-logo.png") center / contain no-repeat !important;
  }

  /* Wrapper for headline + why */
  #verdictShell .mi-scorebug-line,
  #verdictShell .mi-scorebug-line.is-structured,
  #verdictShell .mi-scorebug-line:not(.is-structured) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    text-align: center !important;
  }

  #verdictShell .mi-scorebug-line.is-structured .mi-verdict-headline,
#verdictShell .mi-scorebug-line:not(.is-structured) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    font-size: clamp(16px, 5vw, 22px) !important;
    line-height: 1.08 !important;
    font-weight: 860 !important;
    letter-spacing: -0.025em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  #verdictShell .mi-scorebug-line.is-structured .mi-verdict-why {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: clamp(4px, 0.6vw, 10px) !important;
    margin-top: clamp(1px, 0.6vw, 2px) !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.34 !important;
    font-weight: 540 !important;
    letter-spacing: -0.005em !important;
    text-align: center !important;
    color: rgba(226,232,240,0.76) !important;
    text-wrap: pretty !important;
  }

  /* No divider needed in the mobile stacked version */
  #verdictShell .mi-scorebug-line.is-structured .mi-verdict-break {
    display: none !important;
  }

  /* Pull the score tile a bit closer, but not cramped */
  #verdictShell .mi-verdict-rail {
    margin-top: 1px !important;
  }

  /* Reduce the space inside the metrics tile so the whole top section feels lighter */
  #miVerdictMetricsTile .tile-face.tile-front {
    padding: 12px 12px 10px !important;
  }

  #miVerdictMetricsTile .mi-scorebug-grid {
    padding-bottom: 6px !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-grid {
    gap: 10px !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-team-lines {
    gap: 6px !important;
  }

  #verdictShell .mi-verdict-shell-inner > .mi-verdict-actions.mi-verdict-actions-rail{
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (max-width: 600px) {

  #miVerdictMetricsTile .tile-face.tile-front {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* =============================================
   § CORE TRAITS TABLE — Mobile
   ============================================= */
@media (max-width: 720px) {

  /* Table base */
  #cindCard .explain-table,
  #favCard .explain-table {
    font-size: 10px !important;
    table-layout: fixed !important;
    width: 100% !important;
  }

  .mi-eff-header {
    padding: 6px 4px !important;
    font-size: 12px !important;
  }

  .mi-eff-label {
    font-size: 10px !important;
  }

  .mi-eff-value {
    font-size: 12px !important;
    font-weight: 750 !important;
    align-items: center !important;
    letter-spacing: 0.03em !important;
  }

  .mi-eff-module {
    padding: 4px !important;
  }

  .profile-support-row .context-tile.flip-tile .flip-tile-inner {
    height: 75% !important;
  }

  #resumeTileA .tile-face.tile-back,
  #resumeTileB .tile-face.tile-back,
  .mi-metrics-back-text {
    display: block !important;
    font-size: 8px !important;
    padding: 6px !important;
  }
  
  #identityTileA .tile-face.tile-back .back-line,
  #identityTileB .tile-face.tile-back .back-line,
  #resumeTileA .tile-face.tile-back .back-line, 
  #resumeTileB .tile-face.tile-back .back-line {
    font-size: 8px !important;
    padding: 0 !important;
  }

  .context-tile.flip-tile .tile-front {
    height: 100% !important;
  }

  .context-tile.flip-tile .tile-back {
    height: 75% !important;
  }

  .mi-eff-module .mi-eff-header {
    margin-bottom: 0 !important;
  }

  .profile-support-row .context-tile .tile-face.tile-front,
  .profile-support-row .context-tile .tile-face.tile-back {
    gap: 1px !important;
  }

  .mi-eff-module .mi-eff-seg {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* All cells: tighter padding, no wrapping */
  #cindCard .explain-table th,
  #cindCard .explain-table td,
  #favCard .explain-table th,
  #favCard .explain-table td {
    font-size: 8px !important;
    padding: 8px 4px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }

  /* Hide column 2 (Field Spread — σ values) */
  #cindCard .explain-table th:nth-child(2),
  #cindCard .explain-table td:nth-child(2),
  #favCard .explain-table th:nth-child(2),
  #favCard .explain-table td:nth-child(2) {
    display: none !important;
  }

  /* Redistribute widths across the 4 remaining columns:
     Col 1: Battlefield | Col 3: Team Score | Col 4: Tier | Col 5: Impact */
  #cindCard .explain-table th:nth-child(1),
  #cindCard .explain-table td:nth-child(1),
  #favCard .explain-table th:nth-child(1),
  #favCard .explain-table td:nth-child(1) {
    width: 32% !important;
  }

  #cindCard .explain-table th:nth-child(3),
  #cindCard .explain-table td:nth-child(3),
  #favCard .explain-table th:nth-child(3),
  #favCard .explain-table td:nth-child(3) {
    width: 20% !important;
  }

  #cindCard .explain-table th:nth-child(4),
  #cindCard .explain-table td:nth-child(4),
  #favCard .explain-table th:nth-child(4),
  #favCard .explain-table td:nth-child(4) {
    width: 30% !important;
  }

  #cindCard .explain-table th:nth-child(5),
  #cindCard .explain-table td:nth-child(5),
  #favCard .explain-table th:nth-child(5),
  #favCard .explain-table td:nth-child(5) {
    width: 20% !important;
  }

  /* Section header rows span all visible columns */
  #cindCard .mi-core-section-row th,
  #favCard .mi-core-section-row th {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    padding: 6px 4px !important;
  }

  /* Standing bar: constrain to its cell */
  #cindCard .mi-standing-bar,
  #favCard .mi-standing-bar {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 720px) {
  .team-card,
  .profile-section.flip-tile,
  #cindCard .tile-face.tile-front,
  #favCard .tile-face.tile-front {
    padding: 2px !important;
  }
}

@media (max-width: 720px) {
  #cindCard .profile-support-row,
  #favCard .profile-support-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

@media (max-width: 720px) {
  #cindCard .mi-eff-seg,
  #favCard .mi-eff-seg {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #cindCard .mi-eff-meta,
  #favCard .mi-eff-meta {
    text-align: right !important;
    flex: 0 0 auto !important;
  }

  #cindCard .mi-eff-value,
  #favCard .mi-eff-value {
    flex: 0 0 auto !important;
    text-align: center !important;
    margin: 0px;
  }

  #cindCard .mi-eff-seg.is-emphasis,
  #favCard .mi-eff-seg.is-emphasis {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 720px) {


  .team-card-header {
    margin-bottom: 0;
  }
}

@media (max-width: 720px) {


  #cindCard .profile-resume-tile .mi-flip-hint,
  #favCard .profile-resume-tile .mi-flip-hint {

    bottom: 8px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
  }
}

@media (max-width: 720px) {
  #cindCard .profile-subtotal-row,
  #favCard .profile-subtotal-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #identityInlineA,
  #identityInlineB {
    width: 100% !important;
    max-width: 100%;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 720px) {
  #identityInlineA,
  #identityInlineB {
    width: 100% !important;
    padding: 2px 8px;
  }

  #identityInlineA .identity-inline-kicker,
  #identityInlineB .identity-inline-kicker {
     margin-bottom: 3px;
     font-size: 13px;
     font-weight: 850;
     color: var(--mi-text-primary);
  } 
   
  #identityInlineA .identity-inline-main,
  #identityInlineB .identity-inline-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 4px 4px !important;
  }

  /* Badge: big and centered — it's the headline number */
  #identityInlineA .identity-inline-badge,
  #identityInlineB .identity-inline-badge {
    text-align: center !important;
    flex: none !important;
  }

  /* Meta: centered, both lines */
  #identityInlineA .identity-inline-meta,
  #identityInlineB .identity-inline-meta {
    text-align: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #identityInlineA .identity-inline-label,
  #identityInlineB .identity-inline-label {
    display: block !important;
    text-align: center !important;
  }

  #identityInlineA .identity-inline-detail,
  #identityInlineB .identity-inline-detail {
    display: none !important;
  }

  /* Meter: full width so it feels intentional, not like an afterthought */
  #identityInlineA .identity-meter,
  #identityInlineB .identity-meter {
    width: 80% !important;
    max-width: 200px !important;
    flex: none !important;
    margin: 2px auto !important;
  }
}

@media (max-width: 720px) {
  #cindCard .profile-section .tile-face.tile-front > .mi-flip-hint:last-child,
  #favCard .profile-section .tile-face.tile-front > .mi-flip-hint:last-child {
    display: none !important;
  }
}

@media (max-width: 720px) {

  #cindCard .profile-subtotal-row,
  #favCard .profile-subtotal-row {
    position: relative !important;
    margin: 10px 0 !important;
    padding: 8px 0 !important;
  }

  /* Bottom divider — same treatment */
  #cindCard .profile-subtotal-row::after,
  #favCard .profile-subtotal-row::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: -12px !important;
    right: -12px !important;
    height: 1px !important;
    background: linear-gradient(
      to right,
      transparent,
      rgba(148, 163, 184, 0.35) 20%,
      rgba(56, 189, 248, 0.45) 50%,
      rgba(148, 163, 184, 0.35) 80%,
      transparent
    ) !important;
  }
}

@media (max-width: 720px) {

  #cindCard .subtotal-main,
  #favCard .subtotal-main {
    position: relative !important;
    padding: 16px 0 !important;
  }
}

@media (max-width: 720px) {

  #cindCard .subtotal-main,
  #favCard .subtotal-main {

    box-shadow:
      0 0 0 1px rgba(56, 189, 248, 0.15),
      0 0 18px rgba(56, 189, 248, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    padding: 10px 12px !important;
    margin: 2px 0 !important;

    letter-spacing: 0.04em !important;
  }

  /* "Profile Subtotal" label */
  #cindCard .subtotal-main > span:first-child,
  #favCard .subtotal-main > span:first-child {
    font-size: 14px !important;
    font-weight: 720 !important;
    letter-spacing: 0.04em !important;
    color: var(--mi-text-primary) !important;
  }

  /* The number itself */
  #cindCard .subtotal-main .subtotal-value,
  #favCard .subtotal-main .subtotal-value {
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em !important;
    color: var(--mi-text-primary) !important;
  }

  .subtotal-main {
    gap: 8px !important;
  }
}

@media (max-width: 720px) {

  #marksTileA .flip-tile-inner,
  #marksTileB .flip-tile-inner {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {

  /* Let the marks section grow to fit its content */
  #cindCard .team-card-marks,
  #favCard .team-card-marks {
    height: auto !important;
    min-height: 0 !important;
  }

  #marksTileA,
  #marksTileB {
    height: auto !important;
    min-height: 0 !important;
  }

  #marksTileA .tile-face.tile-front,
  #marksTileB .tile-face.tile-front {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 36px !important; /* room for flip hint */
  }

  /* Marks strip: wrap into a neat grid */
  #inlineMarksA,
  #inlineMarksB {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Both chip types: smaller and square */
  #cindCard .mark-chip,
  #favCard .mark-chip {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    font-size: 8px !important;
    padding: 6px 4px !important;
  }

  .team-card-marks .mark-title {
    font-size: 6.5px;
    font-weight: 550 !important;
    min-height: calc(0.04em* 2) !important;
  }
  
  .team-card-marks .mark-chip .mark-badge {
    height: 48px;
    width: 32px;
  }

  .team-card-marks .mark-info {
    margin-top: 4.5px !important;
  }
 
  .team-card-marks .mark-icon-plate {
    padding: 2px;
    column-gap: 2px;
    display: block;
  }

  .mi-metrics-hint {
    font-size: 8px !important;
    color: var(--mi-text-muted) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .context-tile .tile-face.tile-front {
    row-gap: 2px !important;
  }
}

@media (max-width: 720px) {

  #backMarksTileA,
  #backMarksTileB {
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  #backMarksTileA::-webkit-scrollbar,
  #backMarksTileB::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
  }

  #backMarksTileA::-webkit-scrollbar-thumb,
  #backMarksTileB::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.35) !important;
    border-radius: 999px !important;
  }
}

/* =============================================
   § INTERACTIONS + VOLATILITY — Mobile
   ============================================= */
@media (max-width: 720px) {

  /* ── Wrap both sections in a shared visual container ── */
  #interactionsSection {
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* ── Legend header: only show INTERACTION METRICS pill ── */
  .interactions-head--right {
    display: none !important;
  }

  .legend-header--interactions {
    justify-content: center !important;
    padding: 12px 12px 0 !important;
  }

  /* ── Stack the two panels ── */
  .interactions-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .interactions-left,
  .interactions-right {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Divider between the two panels — matches the app's cyan line aesthetic */
  .interactions-right {
    position: relative !important;
    padding-top: 44px !important; /* room for the injected kicker label */
    border-top: 1px solid rgba(56, 189, 248, 0.20) !important;
    margin: 6px 1px !important;
  }

  /* Inject MATCHUP VOLATILITY kicker above the volatility panel */
  .interactions-right::before {
    content: 'MATCHUP VOLATILITY' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    right: 0 !important;
    height: 28px !important;

    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 0.75;

    color: rgba(249,246,238,0.9);
    background-color: rgba(3, 7, 18, 0.55);
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 12px;

    padding: 0 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;

    transform: translateX(-50%) !important;

    box-shadow:
      0 10px 22px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 0 0 1px rgba(255,255,255,0.03);
    text-shadow: 0 1px 0 rgba(0,0,0,0.35);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content !important;

    pointer-events: none;
    user-select: none;
  }

  /* Interaction table: horizontal scroll for narrow widths */
  .interaction-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .interaction-table,
  .mi-interaction-table {
    min-width: 300px !important;
    width: 100% !important;
  }

  /* Volatility gauge: scale down to fit mobile width */
  .volatility-gauge-wrap {
    padding: 0 8px !important;
  }

  .volatility-gauge-svg {
    width: 100% !important;
    height: auto !important;
  }

  /* Quarter cards: 2-up grid */
  .volatility-quarters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 4px 6px !important;
  }

  #volatilityPanel #volatilityTierPill {
    margin-top: 25px;
  }
  /* Tighten spacing between tier pill and gauge */
  #volatilityPanel {
    row-gap: 6px !important;     /* controls vertical spacing between rows */
  }

  #volatilityPanel #volatilityTierPill {
    margin-top: 6px !important;  /* was 25px */
    margin-bottom: 0 !important;
  }

  #volatilityPanel .volatility-gauge-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

/* tighten the whole volatility stack */
  #interactionsSection #volatilityPanel {
    row-gap: 4px !important;
    gap: 4px !important;
    padding-top: 4px !important;
  }

  /* remove extra vertical space around the pill/header row */
  #interactionsSection #volatilityPanel .volatility-head {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #interactionsSection #volatilityPanel #volatilityTierPill {
    margin: 0 !important;
  }

  /* pull the gauge upward */
  #interactionsSection #volatilityPanel .volatility-gauge-wrap {
    margin-top: -6px !important;
    padding-top: 0 !important;
  }

  #interactionsSection #volatilityPanel .volatility-gauge-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  /* remove inline svg whitespace behavior */
  #interactionsSection #volatilityPanel .volatility-gauge-svg {
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* tighten the whole volatility stack */
  #interactionsSection #volatilityPanel {
    row-gap: 4px !important;
    gap: 4px !important;
    padding: 6px !important;
  }

  /* remove extra vertical space around the pill/header row */
  #interactionsSection #volatilityPanel .volatility-head {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #interactionsSection #volatilityPanel #volatilityTierPill {
    margin: 0 !important;
  }

  #interactionsSection {
    margin-bottom: 4px !important;
  }

  /* pull the gauge upward */
  #interactionsSection #volatilityPanel .volatility-gauge-wrap {
    margin-top: -6px !important;
    padding-top: 0 !important;
  }

  #interactionsSection #volatilityPanel .volatility-gauge-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: 0 !important;
  }

  /* remove inline svg whitespace behavior */
  #interactionsSection #volatilityPanel .volatility-gauge-svg {
    display: block !important;
  }
}

@media (max-width: 720px) {
  #volatilityTierPill {
    position: relative;
    top: 34px;
  }

  #interactionsSection .volatility-tier-pill {
    font-size: 9px !important;
    font-weight: 750 !important;
    min-width: 0 !important;
    width: 75px !important;
  }

  #interactionsSection .interactions-left-tile.flip-tile .tile-face.interactions-front-face {
    padding: 4px !important;
    row-gap: 4px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-wrap {
    height: 12px !important;
    width: 100%;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-row.tier-mid .mi-int-bar {
    height: 12px !important;
    width: 100% !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-row.tier-mid .mi-int-bar {
    height: 12px !important;
    width: 100% !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-row.tier-high .mi-int-bar {
    height: 14px !important;
    width: 100% !important;
  }
}

/* =============================================
   § SCORE SYNTHESIS — Mobile layout
   ============================================= */

/* Hide original table on mobile, show mobile layout */
@media (max-width: 720px) {
  #summarySection {
    display: none !important;
  }

  #summarySectionMobile {
    display: block !important;
  }
}

/* Hide mobile layout on desktop */
#summarySectionMobile {
  display: none;
}

@media (max-width: 720px) {

  /* =========================================================
     MOBILE SCORE SYNTHESIS — branded shell
     ========================================================= */

  #summarySectionMobile.mi-sum-mob-wrap {
    position: relative !important;
    overflow: hidden !important;

    padding: 12px 12px 6px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;

    background:
      radial-gradient(
        120% 160% at 0% 0%,
        rgb(var(--mi-brand-a-rgb, 107 114 128) / 0.14),
        transparent 42%
      ),
      radial-gradient(
        110% 150% at 12% 8%,
        rgb(var(--mi-brand-a-tertiary-rgb, 107 114 128) / 0.10),
        transparent 34%
      ),
      radial-gradient(
        120% 160% at 100% 0%,
        rgb(var(--mi-brand-b-rgb, 107 114 128) / 0.14),
        transparent 42%
      ),
      radial-gradient(
        110% 150% at 88% 8%,
        rgb(var(--mi-brand-b-tertiary-rgb, 107 114 128) / 0.10),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(8, 14, 28, 0.94) 0%,
        rgba(3, 7, 18, 0.96) 100%
      ) !important;

    box-shadow:
      0 18px 42px rgba(0,0,0,0.46),
      inset 0 1px 0 rgba(255,255,255,0.05),
      inset 0 0 0 1px rgba(255,255,255,0.03) !important;

    isolation: isolate !important;
  }

  #summarySectionMobile.mi-sum-mob-wrap::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;

    background:
      linear-gradient(
        90deg,
        rgb(var(--mi-winner-primary-rgb, 148 163 184) / 0.08) 0%,
        rgb(var(--mi-winner-tertiary-rgb, 148 163 184) / 0.05) 16%,
        transparent 34%,
        transparent 66%,
        rgb(var(--mi-loser-tertiary-rgb, 107 114 128) / 0.025) 84%,
        rgb(var(--mi-loser-primary-rgb, 107 114 128) / 0.04) 100%
      );

    opacity: 0.95 !important;
    z-index: 0 !important;
  }

  #summarySectionMobile > * {
    position: relative !important;
    z-index: 1 !important;
  }

  /* =========================================================
     MOBILE — SUMMARY WINNER OWNERSHIP (SIDE-LEVEL, NOT SHELL)
     ========================================================= */

  /* -----------------------------------------
   Keep shell neutral
   ----------------------------------------- */
  #summarySectionMobile.mi-winner-a,
  #summarySectionMobile.mi-winner-b {
    border-color: rgba(148,163,184,0.22) !important;
    box-shadow:
      0 18px 42px rgba(0,0,0,0.46),
      inset 0 1px 0 rgba(255,255,255,0.05),
      inset 0 0 0 1px rgba(255,255,255,0.03) !important;
  }

  /* =========================================================
   TEAM HEADER SLOT — WINNER EMPHASIS
   ========================================================= */

  #summarySectionMobile.mi-winner-a .mi-sum-mob-team-slot-a,
  #summarySectionMobile.mi-winner-b .mi-sum-mob-team-slot-b {
    border-color: rgba(255,255,255,0.92) !important;
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.65),
      0 0 0 2px rgb(var(--mi-winner-primary-rgb) / 0.22),
      0 0 18px rgb(var(--mi-winner-tertiary-rgb, var(--mi-winner-primary-rgb)) / 0.12) !important;

    transform: translateY(-1px);
  }

  /* =========================================================
   FINAL MI CARD — WINNER EMPHASIS
   ========================================================= */

  #summarySectionMobile.mi-winner-a .mi-sum-mob-final-a,
  #summarySectionMobile.mi-winner-b .mi-sum-mob-final-b {
    border-color: rgba(255,255,255,0.96) !important;
    background:
      radial-gradient(
        120% 120% at 50% 0%,
        rgb(var(--mi-winner-primary-rgb) / 0.12),
        rgba(255,255,255,0.00) 48%
      ),
      radial-gradient(
        120% 120% at 50% 10%,
        rgb(var(--mi-winner-tertiary-rgb, var(--mi-winner-primary-rgb)) / 0.10),
        rgba(255,255,255,0.00) 58%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.00) 34%
      ),
      rgba(2, 6, 23, 0.36) !important;

    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.66),
      0 0 0 2px rgb(var(--mi-winner-primary-rgb) / 0.28),
      0 0 24px rgb(var(--mi-winner-tertiary-rgb, var(--mi-winner-primary-rgb)) / 0.16),
      0 14px 28px rgba(0,0,0,0.32) !important;

    transform: translateY(-2px) scale(1.01);
  }

  /* =========================================================
   LOSING SIDE — SUBTLE DE-EMPHASIS
   ========================================================= */

  #summarySectionMobile.mi-winner-a .mi-sum-mob-team-slot-b,
  #summarySectionMobile.mi-winner-b .mi-sum-mob-team-slot-a,
  #summarySectionMobile.mi-winner-a .mi-sum-mob-final-b,
  #summarySectionMobile.mi-winner-b .mi-sum-mob-final-a {
    opacity: 0.74 !important;
    filter:
      saturate(0.72)
      brightness(0.86);
  }

  #summarySectionMobile.mi-winner-neutral {
    border-color: rgba(148, 163, 184, 0.24) !important;
  }

  /* Title */
  #summarySectionMobile .mi-sum-mob-title {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
    align-self: center !important;
    align-items: center !important;
    left: 78px !important;

    width: 50% !important;
    margin: 0 0 12px !important;
    padding: 9px 12px !important;

    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    color: rgba(226,232,240,0.92) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
      rgba(3, 7, 18, 0.54) !important;
    border: 1px solid rgba(148,163,184,0.18) !important;
    border-radius: 12px !important;

    box-shadow:
      0 10px 22px rgba(0,0,0,0.42),
      inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }

  /* =========================================================
   MOBILE HEADER ROW
   ========================================================= */

  #summarySectionMobile .mi-sum-mob-header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;

    margin-bottom: 10px !important;
    padding-bottom: 10px !important;

    border-bottom: 1px solid rgba(148,163,184,0.14) !important;
  }

  #summarySectionMobile .mi-sum-mob-team-slot {
    min-width: 0 !important;
  }

  #summarySectionMobile .mi-sum-mob-team-slot-a,
  #summarySectionMobile .mi-sum-mob-team-slot-b {
    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,0.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      rgba(10, 16, 30, 0.70) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 10px 24px rgba(0,0,0,0.30) !important;
  }

  #summarySectionMobile .mi-sum-mob-team-slot-a {
    background:
      radial-gradient(
        120% 160% at 10% 0%,
        rgb(var(--team-a-primary-rgb, var(--mi-brand-a-rgb, 107 114 128)) / 0.18),
        transparent 52%
      ),
      radial-gradient(
        115% 145% at 22% 12%,
        rgb(var(--team-a-tertiary-rgb, var(--mi-brand-a-tertiary-rgb, 107 114 128)) / 0.14),
        transparent 38%
      ),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      rgba(10, 16, 30, 0.72) !important;
  }

  #summarySectionMobile .mi-sum-mob-team-slot-b {
    background:
      radial-gradient(
        120% 160% at 90% 0%,
        rgb(var(--team-b-primary-rgb, var(--mi-brand-b-rgb, 107 114 128)) / 0.18),
        transparent 52%
      ),
      radial-gradient(
        115% 145% at 78% 12%,
        rgb(var(--team-b-tertiary-rgb, var(--mi-brand-b-tertiary-rgb, 107 114 128)) / 0.14),
        transparent 38%
      ),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      rgba(10, 16, 30, 0.72) !important;
  }

  #summarySectionMobile .mi-team-brand--summary-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 6px !important;
  }

  #summarySectionMobile .mi-team-brand--summary-mobile .mi-team-brand-logo {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    object-fit: contain !important;
  }

  #summarySectionMobile .mi-sum-mob-team-name {
    display: block !important;
    min-width: 0 !important;

    font-size: 11px !important;
    font-weight: 750 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #summarySectionMobile .mi-sum-mob-team-name-a {
    text-align: left !important;
    color: rgb(var(--mi-brand-a-rgb, 226 232 240)) !important;
    text-shadow: 0 0 14px rgb(var(--mi-brand-a-rgb, 107 114 128) / 0.18) !important;
  }

  #summarySectionMobile .mi-sum-mob-team-name-b {
    text-align: left !important;
    color: rgb(var(--mi-brand-b-rgb, 226 232 240)) !important;
    text-shadow: 0 0 14px rgb(var(--mi-brand-b-rgb, 107 114 128) / 0.18) !important;
  }

  #summarySectionMobile .mi-sum-mob-col-spacer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  #summarySectionMobile .mi-sum-mob-col-spacer::before {
    content: "vs" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 28px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(148,163,184,0.14) !important;
    background: rgba(255,255,255,0.03) !important;

    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em !important;
    color: rgba(148,163,184,0.70) !important;
  }

  /* =========================================================
     METRIC ROWS
     ========================================================= */

  #summarySectionMobile .mi-sum-mob-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }

  #summarySectionMobile .mi-sum-mob-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 4px !important;

    min-height: 34px !important;
    padding: 7px 0 !important;

    border-bottom: 1px solid rgba(148,163,184,0.10) !important;
  }

  #summarySectionMobile .mi-sum-mob-label {
    font-size: 10px !important;
    font-weight: 600;
    text-align: center !important;
    color: var(--mi-text-primary) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    line-height: 1 !important;
    padding: 0 4px !important;
  }

  #summarySectionMobile .mi-sum-mob-val {
    font-size: 14px !important;
    font-weight: 750 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  #summarySectionMobile .mi-sum-mob-val-a {
    text-align: center !important;
    color: rgba(241,245,249,0.94) !important;
  }

  #summarySectionMobile .mi-sum-mob-val-b {
    text-align: center !important;
    color: rgba(241,245,249,0.94) !important;
  }

  /* Value-state colors */
  #summarySectionMobile [data-value-state="pos"].mi-sum-mob-val-a,
  #summarySectionMobile [data-value-state="pos"].mi-sum-mob-final-val[data-value="a.final"] {
    color: rgb(var(--mi-brand-a-rgb, 125 211 252)) !important;
  }

  #summarySectionMobile [data-value-state="neg"].mi-sum-mob-val-a,
  #summarySectionMobile [data-value-state="neg"].mi-sum-mob-final-val[data-value="a.final"] {
    color: rgba(248,250,252,0.76) !important;
  }

  #summarySectionMobile [data-value-state="pos"].mi-sum-mob-val-b,
  #summarySectionMobile [data-value-state="pos"].mi-sum-mob-final-val[data-value="b.final"] {
    color: rgb(var(--mi-brand-b-rgb, 125 211 252)) !important;
  }

  #summarySectionMobile [data-value-state="neg"].mi-sum-mob-val-b,
  #summarySectionMobile [data-value-state="neg"].mi-sum-mob-final-val[data-value="b.final"] {
    color: rgba(248,250,252,0.76) !important;
  }

  /* =========================================================
     FINALS / DELTA CARD
     ========================================================= */

  #summarySectionMobile .mi-sum-mob-finals {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;

    padding: 10px !important;
    margin-bottom: 2px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(148,163,184,0.16) !important;
    background:
      radial-gradient(
        120% 160% at 50% -10%,
        rgb(var(--mi-winner-primary-rgb, 148 163 184) / 0.14),
        transparent 58%
      ),
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      rgba(10, 16, 30, 0.76) !important;

    box-shadow:
      0 14px 32px rgba(0,0,0,0.32),
      inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }

  #summarySectionMobile .mi-sum-mob-final {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    min-width: 0 !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148,163,184,0.12) !important;
    background: rgba(255,255,255,0.03) !important;
  }

  #summarySectionMobile .mi-sum-mob-final-label {
    font-size: 11px !important;
    font-weight: 750 !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    color: var(--mi-text-primary) !important;
    line-height: 1 !important;
  }

  #summarySectionMobile .mi-sum-mob-final-val {
    font-size: 16px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    text-align: center !important;
    color: rgba(241,245,249,0.98) !important;
  }

  #summarySectionMobile .mi-sum-mob-final-a .mi-sum-mob-final-val {
    color: rgb(var(--mi-brand-a-rgb, 226 232 240)) !important;
  }

  #summarySectionMobile .mi-sum-mob-final-b .mi-sum-mob-final-val {
    color: rgb(var(--mi-brand-b-rgb, 226 232 240)) !important;
  }

  #summarySectionMobile .mi-sum-mob-delta-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    min-width: 42px !important;
    padding: 2px 0 !important;
  }

  #summarySectionMobile .mi-sum-mob-delta-col .mi-delta-mark {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  #summarySectionMobile .mi-sum-mob-delta-col .syn-delta-value {
    font-size: 18px !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums !important;
    color: rgba(241,245,249,0.98) !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  /* =========================================================
     FOOTER
     ========================================================= */

  #summarySectionMobile .mi-sum-mob-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;

    padding-top: 10px !important;
    border-top: 1px solid rgba(148,163,184,0.14) !important;
  }

  #summarySectionMobile .mi-sum-mob-vol {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  #summarySectionMobile .mi-sum-mob-vol-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: rgba(148,163,184,0.76) !important;
  }

  #summarySectionMobile .mi-sum-mob-vol-val {
    font-size: 14px !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    color: rgba(241,245,249,0.96) !important;
  }

  #summarySectionMobile .mi-sum-mob-lean {
    font-size: 11px !important;
    text-align: center !important;
    color: rgba(203,213,225,0.84) !important;
    line-height: 1.35 !important;
    max-width: 34ch !important;
  }
}

@media (max-width: 720px) {
  #interactionsSection .mi-interaction-table td,
  #interactionsSection .mi-interaction-table th {
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* =============================================
   § GLOSSARY DRAWER — Mobile bottom sheet
   ─────────────────────────────────────────────
   On desktop the glossary is a left-anchored
   fixed overlay. On mobile that panel collides
   with the full-width layout — the JS clamp
   logic resolves to 260px which covers ~70%
   of a 375px screen.

   Fix: convert to a bottom sheet at ≤720px.
   • Handle becomes a full-width bottom tab bar.
   • Panel slides up from just above the handle.
   • A scrim darkens the page behind the panel.
   ============================================= */
@media (max-width: 720px) {

  /* Container: pin to the bottom of the viewport */
  .mi-glossary {
    position: fixed !important;
    inset: auto 0 0 0 !important;   /* top:auto right:0 bottom:0 left:0 */
    width: 100% !important;
    z-index: 9999 !important;
    pointer-events: none;            /* children opt back in individually */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Handle: full-width bottom tab */
  .mi-glossary-handle {
    pointer-events: auto !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
    height: 48px !important;
    border-radius: 14px 14px 0 0 !important;
    justify-content: center !important;

    background: rgba(10, 16, 30, 0.95) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-bottom: none !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    /* Remove the rightward-fade mask — looks wrong full-width */
    -webkit-mask-image: none !important;
    mask-image: none !important;

    transition: filter 160ms ease !important;
  }

  /* No Y-lift on tap — that's a hover pattern only */
  .mi-glossary-handle:hover {
    transform: none !important;
    filter: brightness(1.08) !important;
  }

  .mi-glossary-handle-text {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Panel: starts below the screen, slides up on open */
  .mi-glossary-panel {
    top: auto !important;
    pointer-events: auto !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 48px !important; /* sits flush above the 48px handle */
    width: min(320px, calc(100vw - 32px)) !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
    max-height: min(65vh, calc(100dvh - 72px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 16px 16px 0 0 !important;
    margin-right: 0 !important;

    transform: translateX(-50%) translateY(110%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1) !important;
  }

  /* Open state: panel slides into view */
  .mi-glossary.mi-glossary--open .mi-glossary-panel {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Keep handle fully visible when panel is open
     (styles2.css sets opacity: 0.30 on the open handle — wrong on mobile) */
  .mi-glossary.mi-glossary--open .mi-glossary-handle {
    opacity: 1 !important;
    filter: none !important;
  }

  /* Scrim: dim the page behind the open panel */
  .mi-glossary.mi-glossary--open::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    inset: 0 0 48px 0 !important;   /* covers viewport; leaves handle row clear */
    background: rgba(0, 0, 0, 0.50) !important;
    z-index: -1 !important;
  }

  .mi-glossary-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;

    background: linear-gradient(
      180deg,
      rgba(10, 16, 30, 0.98) 0%,
      rgba(10, 16, 30, 0.96) 100%
    ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  }

  .mi-glossary-title {
    position: relative !important;
    z-index: 21 !important;
  }  

  /* Verdict scorebug team-name side accents */
  #verdictShell #miVerdictMetricsTile .mi-scorebug-team--a .mi-scorebug-team-name {
    color: var(--syn-role-a) !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-team--b .mi-scorebug-team-name {
    color: var(--syn-role-b) !important;
  }
}
/* =========================================================
   TEAM LOGOS / TEAM CARDS — mobile recovery
   ========================================================= */

@media (max-width: 720px) {

  /* =========================
     SCOREBUG
     ========================= */

  #verdictShell .mi-scorebug-team-head{
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    margin-bottom: 6px !important;
  }

  #verdictShell .mi-scorebug-team-logo{
    width: 20px !important;
    height: 20px !important;
  }

  #verdictShell .mi-scorebug-team-name{
    font-size: 12px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* =========================
     TEAM CARD OUTER SPACING
     ========================= */

  .team-card{
    padding: 8px !important;
  }

  #cindCard .tile-face.tile-front,
  #favCard .tile-face.tile-front{
    padding: 8px !important;
  }

  .profile-section.flip-tile{
    padding: 6px !important;
  }

  /* =========================
     TEAM CARD HEADER
     ========================= */

  .team-card-header{
    padding: 10px 10px 8px !important;
  }

  .team-card-header-main{
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .team-card-logo{
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .team-card-header .team-label-wrap{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .team-card-header h2#teamATitle,
  .team-card-header h2#teamBTitle{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    font-size: calc(20px * var(--mi-scale-scorecard)) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .team-card-header .seed-label{
    margin-top: 4px !important;
  }
}

@media (max-width: 600px) {

  .team-card{
    padding: 6px !important;
  }

  #cindCard .tile-face.tile-front,
  #favCard .tile-face.tile-front{
    padding: 6px !important;
  }

  .profile-section.flip-tile{
    padding: 4px !important;
  }

  .team-card-header{
    padding: 8px 8px 6px !important;
  }

  .team-card-header-main{
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  .team-card-logo{
    width: 36px !important;
    height: 36px !important;
  }

  .team-card-header h2#teamATitle,
  .team-card-header h2#teamBTitle{
    font-size: calc(17px * var(--mi-scale-scorecard)) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 420px) {

  .team-card-header-main{
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  .team-card-logo{
    width: 32px !important;
    height: 32px !important;
  }

  .team-card-header h2#teamATitle,
  .team-card-header h2#teamBTitle{
    font-size: calc(15px * var(--mi-scale-scorecard)) !important;
  }

  .app-shell.has-matchup .team-card-header .team-role-pill,
  .app-shell.has-matchup .team-card-header .cind-tag,
  .app-shell.has-matchup .team-card-header .fav-tag,
  .app-shell.has-matchup .team-card-header .chalk-tag,
  .app-shell.has-matchup .team-card-header .chaos-tag,
  .app-shell.has-matchup .team-card-header .neutral-tag{
    letter-spacing: 0.08em !important;
    margin-top: 0;
  }
}

/* =============================================
   § VERDICT SCOREBUG — Mobile team head stack
   Team name on top, logo underneath
   ============================================= */
@media (max-width: 600px) {

  #verdictShell #miVerdictMetricsTile .mi-scorebug-team-head {
    width: 100% !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-team-brand--scorebug {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-team-brand--scorebug .mi-team-brand-name {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;

    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;

    line-height: 1.05 !important;
    font-size: 14px !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-team-brand--scorebug .mi-team-brand-logo {
    order: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 72px !important;
    max-height: 42px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
  }

  #verdictShell #miVerdictMetricstile .mi-team-brand--scorebug .mi-team-brand-name::after {
    position: relative;
    margin-top: 62px;
  }

  .mi-team-brand--scorebug .mi-team-brand-name {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    width: 100%;     
    padding-bottom: 6px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.015em;
    color: var(--team-primary);
    text-shadow: var(--text-glow);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--line-color);
  }

  #verdictShell {
    padding-top: 2px !important;
  }

  #verdictShell .mi-verdict-shell-inner{
    padding: 1px !important;
  }

  #verdictShell .mi-verdict-grid{
    padding: 3px !important;
    row-gap: 6px !important;
  }
}

@media (max-width: 768px){
  #verdictShell.mi-winner-a::after,
  #verdictShell.mi-winner-b::after,
  #verdictShell.mi-winner-neutral::after{
    content: none !important;
  }
}

@media (max-width: 768px){

  /* Make the grid the positioning context */
  #verdictShell .mi-verdict-grid{
    position: relative !important;
  }

  /* Base rail — mirrors the existing ::before style */
  #verdictShell.mi-winner-a .mi-verdict-grid::after,
  #verdictShell.mi-winner-b .mi-verdict-grid::after,
  #verdictShell.mi-winner-neutral .mi-verdict-grid::after{
    content: "" !important;
    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;

    left: 0 !important;
    width: 6px !important;

    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;

    /* Match scorebug rail geometry */
    border-radius: 0 !important;
  }

  /* Winner A — identical gradient logic */
  #verdictShell.mi-winner-a .mi-verdict-grid::after{
    background:
      linear-gradient(
        180deg,
        rgb(var(--mi-max-owner-rgb)),
        rgb(var(--mi-max-owner-secondary-rgb))
      ) !important;

    box-shadow:
      0 0 8px rgb(var(--mi-max-owner-rgb) / 0.32),
      0 0 18px rgb(var(--mi-max-owner-rgb) / 0.18) !important;
  }

  /* Winner B */
  #verdictShell.mi-winner-b .mi-verdict-grid::after{
    background:
      linear-gradient(
        180deg,
        rgb(var(--mi-max-owner-rgb)),
        rgb(var(--mi-max-owner-secondary-rgb))
      ) !important;

    box-shadow:
      0 0 8px rgb(var(--mi-max-owner-rgb) / 0.32),
      0 0 18px rgb(var(--mi-max-owner-rgb) / 0.18) !important;
  }

  /* Neutral */
  #verdictShell.mi-winner-neutral .mi-verdict-grid::after{
    background:
      linear-gradient(
        180deg,
        rgba(148,163,184,0.85),
        rgba(148,163,184,0.55)
      ) !important;

    box-shadow:
      0 0 6px rgba(148,163,184,0.18) !important;
  }
}

/* =============================================
   § MOBILE TOP-OF-PAGE COMPACTION
   ============================================= */
@media (max-width: 720px) {

  /* Pull the entire page upward */
  .app-shell {
    padding-top: 6px !important;
  }

  /* Reduce header dead space */
  .enhanced-header {
    padding: 8px 12px 8px !important;
    gap: 4px !important;
    margin-bottom: 2px !important;
  }

  .hero-logo {
    max-height: 56px !important;
  }

  .version-badge-btn {
    margin-top: 0 !important;
  }

  /* Reduce spacing between major mobile sections */
  .analysis-shell > section,
  .analysis-shell > div {
    margin-top: 6px !important;
  }

  /* Tighten the matchup controls dock shell */
  .mi-matchup-dock {
    padding: 6px !important;
    margin-bottom: 6px !important;
  }

  /* Tighten the closed dock */
  #matchupBar:not(.is-editing) .matchup-bar-main {
    gap: 6px 6px !important;
    padding: 8px 8px 10px !important;
    border-radius: 16px !important;
  }

  #matchupBar:not(.is-editing) .matchup-controls-label,
  .matchup-controls-label.matchup-kicker {
    margin-bottom: 2px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  #matchupBar:not(.is-editing) .matchup-bar-team {
    font-size: 12px !important;
    line-height: 1.08 !important;
  }

  #matchupBar:not(.is-editing) .matchup-bar-label,
  #matchupBar:not(.is-editing) .matchup-bar-seed,
  #matchupBar:not(.is-editing) .matchup-bar-vs {
    font-size: 9px !important;
  }

  #matchupBar:not(.is-editing) #matchupRoundPill {
    margin: 1px auto 0 !important;
    transform: scale(0.96) !important;
    transform-origin: center !important;
  }

  #matchupBar:not(.is-editing) #editMatchupBtn {
    min-height: 38px !important;
    margin-top: 2px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.95rem !important;
  }
}

@media (max-width: 600px) {
  .enhanced-header {
    padding: 6px 10px 6px !important;
    gap: 2px !important;
  }

  .hero-logo {
    max-height: 48px !important;
  }

  .mi-matchup-dock {
    padding: 4px !important;
  }

  #matchupBar:not(.is-editing) .matchup-bar-main {
    padding: 7px 7px 8px !important;
    gap: 5px 5px !important;
  }

  #matchupBar:not(.is-editing) .matchup-bar-team {
    font-size: 11px !important;
  }

  #matchupBar:not(.is-editing) #editMatchupBtn {
    min-height: 36px !important;
    font-size: 0.9rem !important;
  }

  .matchup-bar {
    margin: 2px !important;
  }

  .pre-setup-row {
    margin: 0 !important;
  }
}

/* =============================================
   § MOBILE MICRO-COLLAPSED MATCHUP HANDLE
   Closed state becomes a slim top handle so
   verdictShell is effectively first on screen.
   ============================================= */
@media (max-width: 720px) {

  /* Tight outer shell */
  .mi-matchup-dock {
    padding: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Closed state: collapse the full grid into one compact row */
  #matchupBar:not(.is-editing) .matchup-bar-main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 4px !important;
    gap: 0 !important;
    border-radius: 14px !important;
  }

  /* Hide all summary content in closed state */
  #matchupBar:not(.is-editing) .matchup-controls-label,
  #matchupBar:not(.is-editing) .matchup-bar-left,
  #matchupBar:not(.is-editing) .matchup-bar-right,
  #matchupBar:not(.is-editing) .matchup-bar-vs,
  #matchupBar:not(.is-editing) #matchupRoundPill,
  #matchupBar:not(.is-editing) #matchupQuickRound,
  #matchupBar:not(.is-editing) .matchup-quick-actions {
    display: none !important;
  }

  /* Dissolve the center wrapper so the button can own the row */
  #matchupBar:not(.is-editing) .matchup-bar-center {
    display: contents !important;
  }

  /* Turn the edit button into the collapsed handle */
  #matchupBar:not(.is-editing) #editMatchupBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 999px !important;

    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      rgba(6, 12, 24, 0.88) !important;

    border: 1px solid rgba(120, 170, 255, 0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 4px 14px rgba(0,0,0,0.24) !important;
  }

  /* Optional: make the caret feel smaller/more handle-like */
  #matchupBar:not(.is-editing) #editMatchupBtn .caret,
  #matchupBar:not(.is-editing) #editMatchupBtn .dropdown-caret,
  #matchupBar:not(.is-editing) #editMatchupBtn i,
  #matchupBar:not(.is-editing) #editMatchupBtn svg {
    transform: scale(0.82) !important;
  }

  /* Pull verdictShell closer to the handle */
  #verdictShell {
    margin-top: 4px !important;
  }
}

@media (max-width: 600px) {
  #matchupBar:not(.is-editing) .matchup-bar-main {
    min-height: 36px !important;
    padding: 3px !important;
  }

  #matchupBar:not(.is-editing) #editMatchupBtn {
    min-height: 30px !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    padding: 0 12px !important;
  }

  #verdictShell {
    margin-top: 6px !important;
  }
}

/* =========================================================
   TEAM CARDS — MOBILE HEADER RESCUE
   Append at very bottom of mobile.css
   ========================================================= */

@media (max-width: 720px) {

  /* Keep the front face tight, but not crushed */
  #cindCard .tile-face.tile-front,
  #favCard .tile-face.tile-front {
    padding: 2px !important;
  }

  /* Header wrapper itself */
  #cindCard .team-card-header,
  #favCard .team-card-header {
    padding: 6px 6px 4px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  /* Main logo + text row */
  #cindCard .team-card-header-main,
  #favCard .team-card-header-main {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Logo */
  #cindCard .team-card-logo,
  #favCard .team-card-logo {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    align-self: center !important;
  }

  /* Text column */
  #cindCard .team-card-header .team-label-wrap,
  #favCard .team-card-header .team-label-wrap {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Team name */
  #cindCard .team-card-header h2#teamATitle,
  #favCard .team-card-header h2#teamBTitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    line-height: 1.02 !important;
    letter-spacing: -0.02em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Keep any header meta from adding hidden height pressure */
  #cindCard .team-card-header .seed-label,
  #favCard .team-card-header .seed-label,
  #cindCard .team-card-header [class*="seed"],
  #favCard .team-card-header [class*="seed"] {
    margin-top: 2px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 420px) {
  #cindCard .team-card-header-main,
  #favCard .team-card-header-main {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  #cindCard .team-card-logo,
  #favCard .team-card-logo {
    width: 22px !important;
    height: 22px !important;
  }

  #cindCard .team-card-header h2#teamATitle,
  #favCard .team-card-header h2#teamBTitle {
    font-size: calc(20px * var(--mi-scale-scorecard)) !important;
  }
}

/* =========================================================
   TEAM CARDS — MOBILE STACK + SELECTOR FIX
   Canonical bottom-of-file override
   ========================================================= */
@media (max-width: 720px) {

  /* 1) STACK THE TWO TEAM CARDS VERTICALLY */
  #result.result-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
  }

  #cindCard,
  #favCard {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 2) UNDO THE OVER-COMPRESSION */
  .team-card {
    padding: 8px !important;
  }

  #cindCard .card-face.card-front,
  #favCard .card-face.card-front,
  #cindCard .tile-face.tile-front,
  #favCard .tile-face.tile-front {
    padding: 2px !important;
  }

  #cindCard .profile-section.flip-tile,
  #favCard .profile-section.flip-tile {
    padding: 2px !important;
  }

  /* 3) FIX THE HEADER USING THE ACTUAL HTML STRUCTURE */
  #cindCard .team-card-header,
  #favCard .team-card-header {
    padding: 4px 4px 2px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* actual wrapper in HTML is .mi-team-brand--card */
  #cindCard .team-card-header-main,
  #favCard .team-card-header-main {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #cindCard .mi-team-brand--card,
  #favCard .mi-team-brand--card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* actual logo class in HTML is .mi-team-brand-logo */
  #cindCard .mi-team-brand--card .mi-team-brand-logo,
  #favCard .mi-team-brand--card .mi-team-brand-logo {
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }

  #cindCard .team-label-wrap,
  #favCard .team-label-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #cindCard #teamATitle,
  #favCard #teamBTitle {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* scorebug-style brand treatment */
    color: var(--team-primary) !important;
    font-weight: 800 !important;
    text-shadow: var(--text-glow) !important;
    border-bottom: 1px solid var(--line-color) !important;
    padding-bottom: 3px !important;
  }

  #cindCard .seed-label,
  #favCard .seed-label {
    margin-top: 4px !important;
  }
}

@media (max-width: 420px) {
  #result.result-layout {
    gap: 10px !important;
  }

  #cindCard .mi-team-brand--card,
  #favCard .mi-team-brand--card {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 4px !important;
  }

  #cindCard .mi-team-brand--card .mi-team-brand-logo,
  #favCard .mi-team-brand--card .mi-team-brand-logo {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 720px) {

  #cindCard .team-card-brand-stack,
  #favCard .team-card-brand-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #cindCard .mi-team-brand--card,
  #favCard .mi-team-brand--card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #cindCard .mi-team-brand--card .mi-team-brand-logo,
  #favCard .mi-team-brand--card .mi-team-brand-logo {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  #cindCard .mi-team-brand--card .mi-team-brand-name,
  #favCard .mi-team-brand--card .mi-team-brand-name {
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #cindCard #roleTagA,
  #favCard #roleTagB {
    align-self: flex-start !important;
    font-size: 10px !important;
    line-height: .5 !important;
    padding: 3px !important;
  }

  #cindCard .profile-section .matchup-kicker,
  #favCard .profile-section .matchup-kicker {
    font-size: 8px !important;
    padding: 5px 9px !important;
    letter-spacing: 0.12em !important;
  }
}

@media (max-width: 720px) {

  /* CARD HEADER: make the brand cluster a simple logo + text row */
  #cindCard #teamABrand,
  #favCard #teamBBrand{
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding: 0 !important;

    justify-content: center !important;
    text-align: center !important;
    overflow: visible !important;
  }

  #cindCard #teamALogo,
  #favCard #teamBLogo{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: start !important;
  }

  #cindCard #teamATitle,
  #favCard #teamBTitle{
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;

    text-align: left !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* stop the parent wrappers from re-centering/reboxing it */
  #cindCard .team-card-header-main,
  #favCard .team-card-header-main,
  #cindCard .team-card-brand-stack,
  #favCard .team-card-brand-stack{
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

@media (max-width: 720px) {

  /* Force the actual brand wrapper into one row */
  #cindCard #teamABrand,
  #favCard #teamBBrand{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;

    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
  }

  /* Logo */
  #cindCard #teamALogo,
  #favCard #teamBLogo{
    display: block !important;
    flex: 0 0 24px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
    padding-left: 12px;
  }

  /* Team name */
  #cindCard #teamATitle,
  #favCard #teamBTitle{
    display: block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 12px !important;
    border: 0 !important;

    line-height: 1.05 !important;
    text-align: left !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  /* Parent wrappers should not create a fake second layout system */
  #cindCard .team-card-header-main,
  #favCard .team-card-header-main,
  #cindCard .team-card-brand-stack,
  #favCard .team-card-brand-stack{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #cindCard #roleTagA,
  #favCard #roleTagB{
    margin-bottom: 4px !important;
    margin-top: 4px !important;
  }

  #teamLogoA,
  #teamLogoB,
  .mi-team-brand--card .mi-team-brand-logo {
    display: block !important;
    flex: 0 0 auto;
    align-self: center !important;
    position: relative;
    top: 0; /* adjust to 2px if it still looks slightly high */
  }

  .team-card {
    padding: 1px !important;
  }

  .team-card .flip-inner {
    padding: 1px !important;
  }

  .team-card-marks {
    margin: 1px !important
  }

  #cindCard .profile-section.flip-tile .section-header > .matchup-kicker,
#favCard .profile-section.flip-tile .section-header > .matchup-kicker {
    display: none !important;
  }

  #cindCard .profile-section.flip-tile::before,
  #favCard .profile-section.flip-tile::before{
    display: none !important;
    content: none !important; /* ensures the pseudo-element is fully suppressed */
  }

  .mi-verdict-shell {
    margin-bottom: 10px !important;
  }

  #verdictShell #miVerdictMetricsTile .tile-face.tile-front{
    padding: 4px !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-gap {
    padding: 2px !important;
  }

  #verdictShell .mi-verdict-footer {
    padding: 0.5px !important;
  }

  #verdictShell .mi-verdict-disclaimer {
    font-size: 7px !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-team {
    padding: 6px !important;
  }

  #verdictShell .mi-metrics-back-text {
    padding: 0 !important;
    font-size: 12px !important;
  }
  
  #verdictShell .mi-verdict-metrics-tile .tile-back {
    display: block !important;
    justify-content: center;
  }

  #appFooter .footer-inner {
    padding: 1px !important;
  }
  
  #appFooter .footer-contact-label {
    font-size: 8px;
    font-weight: 800px;
    color: var(--mi-text-primary);
  }

  .pre-header-status {
    margin-top: 6px;
    margin-bottom: 6px;
  }
 
  .pre-hub-status {
    margin-top: 4px;
    margin-bottom: 4px; 
    padding: 6px 10px;
  }

  .pre-status-label {
    font-size: 10px;
    font-weight: 550;
    color: var(--mi-text-primary);
  }

  .app-shell .pre-matchup {
    padding: 12px !important;
  }

  #datasetCard #status {
    display: none;
  }
  
  .file-label {
    display: none;
  }

  #interactionsSection .volatility-threshold-text {
   display: none !important
  }

  #interactionsSection .interactions-grid {
   row-gap: 6px !important
  }

  #interactionsSection #interactionTotalsBar, #interactionsSection .interaction-totals-bar {
   padding-top: 3px !important;
   padding-bottom: 3px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table thead th{
   font-size: 9px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-intensity-pill {
   font-size: 8px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-row td {
    padding: 3px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-sub {
    margin-top: 2px !important;
    color: var(--mi-text-primary);
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-label-main {
    font-size: 10px !important;
  }
}

@media (max-width: 720px) {
  /* Never hard-lock page scrolling on mobile */
  html.mi-verdict-scroll-lock,
  body.mi-verdict-scroll-lock {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: auto !important;
    touch-action: auto !important;
    overscroll-behavior-y: auto !important;
  }

  /* Make sure the collapsed edit handle is actually tappable */
  #matchupBar,
  #matchupBar .mi-matchup-dock,
  #matchupBar .matchup-bar-main {
    overflow: visible !important;
  }

  #matchupBar:not(.is-editing) #editMatchupBtn {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation !important;
  }

  /* Decorative layers should never steal taps */
  #matchupBar::before,
  #matchupBar::after,
  #matchupBar .mi-matchup-dock::before,
  #matchupBar .mi-matchup-dock::after,
  #matchupBar .matchup-bar-main::before,
  #matchupBar .matchup-bar-main::after {
    pointer-events: none !important;
  }
}


/* =========================================================
   MOBILE — FIX EDIT MATCHUP TAP TARGET ON IPHONE
   Avoid display: contents on the center wrapper in closed state
   ========================================================= */
@media (max-width: 720px) {

  /* Keep the center wrapper real on mobile */
  #matchupBar:not(.is-editing) .matchup-bar-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;

    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    width: 100% !important;
    min-width: 0 !important;
    pointer-events: auto !important;
  }

  /* Move the edit button into that real wrapper row */
  #matchupBar:not(.is-editing) #editMatchupBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 44px !important;
    margin: 6px 0 0 !important;

    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Keep only the button visible in the center wrapper */
  #matchupBar:not(.is-editing) .matchup-bar-center .matchup-bar-vs,
  #matchupBar:not(.is-editing) .matchup-bar-center #matchupRoundPill,
  #matchupBar:not(.is-editing) .matchup-bar-center #matchupQuickDataset,
  #matchupBar:not(.is-editing) .matchup-bar-center #matchupQuickRound,
  #matchupBar:not(.is-editing) .matchup-bar-center .matchup-quick-actions {
    display: none !important;
  }
}

@media (max-width: 600px) {
  #matchupBar:not(.is-editing) #editMatchupBtn {
    min-height: 40px !important;
  }
}

/* =========================================================
   MOBILE — MATCHUP BAR EDIT MODE
   Excel-map layout:
   header
   dataset
   team A | team B
   round | sandbox
   run | cancel
   ========================================================= */
@media (max-width: 720px) {

  #matchupBar.is-editing .matchup-bar-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "label label"
      "dataset dataset"
      "left right"
      "round sandbox"
      "actions actions" !important;
    gap: 8px !important;
    padding: 7px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  #matchupBar.is-editing .matchup-bar-left,
  #matchupBar.is-editing .matchup-bar-right,
  #matchupBar.is-editing .matchup-bar-center {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* header */
  #matchupBar.is-editing .matchup-controls-label {
    grid-area: label !important;
    position: static !important;
    width: 100% !important;
    margin: 0 0 2px 0 !important;
    text-align: center !important;
  }

  /* team selectors */
  #matchupBar.is-editing .matchup-bar-left {
    grid-area: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  #matchupBar.is-editing .matchup-bar-right {
    grid-area: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* hide display-only stuff in edit mode */
  #matchupBar.is-editing .matchup-bar-label,
  #matchupBar.is-editing .matchup-bar-team,
  #matchupBar.is-editing .matchup-bar-vs,
  #matchupBar.is-editing #matchupRoundPill,
  #matchupBar.is-editing #editMatchupBtn {
    display: none !important;
  }

  #matchupBar.is-editing .matchup-bar-left .matchup-quick-slot,
  #matchupBar.is-editing .matchup-bar-right .matchup-quick-slot {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #matchupBar.is-editing .matchup-bar-left .matchup-quick-slot select,
  #matchupBar.is-editing .matchup-bar-right .matchup-quick-slot select,
  #matchupBar.is-editing #teamAQuickSelectWrap,
  #matchupBar.is-editing #teamBQuickSelectWrap,
  #matchupBar.is-editing #teamAQuick,
  #matchupBar.is-editing #teamBQuick {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* flatten center wrapper so its children can sit in the main grid */
  #matchupBar.is-editing .matchup-bar-center {
    display: contents !important;
  }

  /* dataset row */
  #matchupBar.is-editing #matchupQuickDataset {
    grid-area: dataset !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* round + sandbox
     Keep a REAL wrapper box so the dropdown panel has a correct anchor */
  #matchupBar.is-editing #matchupQuickRound {
    grid-area: round / round / sandbox / sandbox !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  #matchupBar.is-editing #matchupQuickRound #roundQuickSelectWrap,
  #matchupBar.is-editing #matchupQuickRound #miSandboxQuickLabelBar {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #matchupBar.is-editing #matchupQuickRound #roundQuickSelectWrap {
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }

  #matchupBar.is-editing #matchupQuickRound #miSandboxQuickLabelBar {
    grid-column: 2 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #matchupBar.is-editing #matchupQuickRound .round-btn,
  #matchupBar.is-editing #matchupQuickRound .sandbox-toggle {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #matchupBar.is-editing #roundDropdownQuick.round-dropdown,
  #matchupBar.is-editing #roundDropdown.round-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 10050 !important;
  }

  /* run + cancel */
  #matchupBar.is-editing .matchup-quick-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #matchupBar.is-editing .matchup-quick-run,
  #matchupBar.is-editing .matchup-quick-cancel {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
}

/* =========================================================
   MOBILE — FINAL STABILITY RECONCILIATION
   Canonical mobile behavior for all small screens
   ========================================================= */
@media (max-width: 720px) {

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  .app-shell {
    padding-bottom: 88px !important;
  }

  #matchupBar,
  #matchupBar .mi-matchup-dock,
  #matchupBar .matchup-bar-main {
    overflow: visible !important;
  }

  #matchupBar::before,
  #matchupBar::after,
  #matchupBar .mi-matchup-dock::before,
  #matchupBar .mi-matchup-dock::after,
  #matchupBar .matchup-bar-main::before,
  #matchupBar .matchup-bar-main::after {
    pointer-events: none !important;
  }
}

/* =========================================================
   MOBILE — DROPDOWN CLIPPING FIX
   Ensure dropdown panels can escape layout containers
   ========================================================= */

@media (max-width: 720px) {

  /* Primary matchup bar containers */
  #matchupBar,
  #matchupBar.is-editing,
  .matchup-controls,
  .matchup-bar-left,
  .matchup-bar-right,
  .matchup-bar-team,
  .matchup-quick-slot {
    overflow: visible !important;
  }

  .mi-team-dd .mi-team-dd-panel {
    overflow: visible !important;
  }

  .mi-team-dd .mi-team-dd-search {
    overflow: visible !important;
  }
}

@media (max-width: 720px) {

  /* Normalize dropdown panel positioning */
  .mi-team-dd-panel {
    top: 40px !important;
  }
}

/* =============================================
   § MOBILE — INTERACTIONS HEIGHT RELEASE
   Desktop interaction tiles should not own the viewport on phones.
   ============================================= */
@media (max-width: 720px) {

  #interactionsSection .interactions-grid {
    height: auto !important;
    max-height: none !important;
    align-items: stretch !important;
  }

  #interactionsSection .interactions-left,
  #interactionsSection .interactions-right,
  #interactionsSection .interactions-left-tile,
  #interactionsSection .interactions-console-tile,
  #interactionsSection .interaction-table-wrap,
  #interactionsSection .interaction-table,
  #interactionsSection .int-console-body,
  #interactionsSection #interactionConsoleBody {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mi-glossary-panel {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================
   MOBILE — PATCH NOTES TRUE ANCHOR FIX
   ========================================================= */
@media (max-width: 720px) {

  .enhanced-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
    z-index: 10020 !important;
  }

  .hero-logo-wrap,
  .hero-text-wrap {
    width: 100% !important;
    text-align: center !important;
  }

  .version-notes-anchor {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 6px auto 0 !important;
    overflow: visible !important;
    z-index: 10030 !important;
  }

  .version-badge-btn {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 10040 !important;
  }

  .version-notes {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;

    width: min(340px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(52vh, 320px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 10100 !important;
  }

  .version-notes.is-open {
    transform: translateX(-50%) !important;
  }

  .enhanced-header .version-badge {
    top: 0 !important;
  }

  /* keep following sections below the open notes panel */
  #preHubStatusWrap,
  #preSetupRow,
  #matchupBar,
  #verdictShell {
    position: relative !important;
    z-index: 1 !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-mini-label {
    color: var(--mi-text-primary) !important;
    text-align: center !important;
  }
 
  #verdictShell #miVerdictMetricsTile .mi-scorebug-grid {
    padding: 4px !important;
  }

  #verdictShell #miVerdictMetricsTile .mi-scorebug-mini-label {
    text-transform: none !important;
  }

  #verdictShell .mi-evidence-toggle {
    font-size: 12px !important;
    padding: 4px 2px !important;
  }

  #verdictShell .mi-verdict-metrics-tile .tile-front {
    row-gap: 1px !important;
  }
}

/* =============================================
   § PRE-MATCHUP HUB — compact progress indicator
   Replaces the bulky mini-card feel with a tight
   stacked status list on phones.
   ============================================= */
@media (max-width: 720px) {

  /* Outer shell: less padding, less visual weight */
  #preMatchupHub {
    padding: 10px 10px 8px !important;
    border-radius: 16px !important;
    margin-top: 0 !important;
  }

  #preMatchupHub .pre-hub-inner {
    gap: 8px !important;
  }

  /* Header stays prominent, but tighter */
  #preMatchupHub .round-step-label {
    margin: 0 0 4px 0 !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  /* Stack stays compact */
  #preMatchupHub .pre-hub-steps {
    gap: 6px !important;
    margin-top: 0 !important;
  }

  /* Each step becomes a compact status row, not a full tile */
  #preMatchupHub .pre-step {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    grid-template-areas:
      "num copy"
      "status status" !important;

    row-gap: 5px !important;
    column-gap: 10px !important;
    align-items: start !important;

    padding: 6px 6px 6px !important;
    border-radius: 10px !important;

    background: rgba(15, 23, 42, 0.34) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: none !important;
  }

  /* Keep active row visible, but less huge */
  #preMatchupHub .pre-step.is-next {
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.10) !important;
  }

  /* Number bubble: smaller and less dominant */
  #preMatchupHub .pre-step-num {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    align-self: start !important;
  }

  /* Copy block: tighter vertical rhythm */
  #preMatchupHub .pre-step-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  #preMatchupHub .pre-step-label {
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }

  #preMatchupHub .pre-step-text {
    margin-top: 0 !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    max-width: none !important;
    text-align: left !important;
    color: rgba(226, 232, 240, 0.78) !important;
  }

  /* Status pill: secondary, compact badge */
  #preMatchupHub .pre-step-status {
    justify-self: start !important;
    align-self: start !important;

    padding: 3px 8px !important;
    border-radius: 999px !important;

    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;

    min-height: 0 !important;
    box-shadow: none !important;
  }

  /* Locked rows should recede more */
  #preMatchupHub .pre-step.is-locked {
    opacity: 0.62 !important;
  }

  #preMatchupHub .pre-step {
    min-height: 0 !important;
    height: auto! important;
  }
}

@media (max-width: 420px) {

  #preMatchupHub {
    padding: 8px 8px 7px !important;
  }

  #preMatchupHub .round-step-label {
    font-size: 10px !important;
  }

  #preMatchupHub .pre-hub-steps {
    gap: 5px !important;
  }

  #preMatchupHub .pre-step {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 4px !important;
    padding: 6px !important;
  }

  #preMatchupHub .pre-step-num {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 11px !important;
  }

  #preMatchupHub .pre-step-text {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  #preMatchupHub .pre-step-status {
    font-size: 8px !important;
    padding: 3px 7px !important;
  }
}

@media (max-width: 720px) {
  #preMatchupHub .pre-step {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    grid-template-areas: "num copy status" !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  #preMatchupHub .pre-step-copy {
    grid-area: copy !important;
    min-width: 0 !important;
  }

  #preMatchupHub .pre-step-status {
    grid-area: status !important;
    justify-self: end !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  #preMatchupHub .pre-step {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    grid-template-areas: "num copy status" !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }

  #preMatchupHub .pre-step-status {
    justify-self: end !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
}

#preMatchupHub .pre-step {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  grid-template-areas: "num copy status" !important;
  align-items: center !important;
}

#preMatchupHub .pre-step-num {
  grid-area: num !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#preMatchupHub .pre-step-copy {
  grid-area: copy !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

#preMatchupHub .pre-step-status {
  grid-area: status !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
}

#preMatchupHub .pre-step-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
}

/* =========================================================
   MOBILE — QUICK EDIT TEAM DROPDOWNS ABOVE VERDICTSHELL
   Promote Team A / Team B wrappers into the same stacking
   tier as the quick round control so their panels can float
   over any content below.
   ========================================================= */
@media (max-width: 720px) {

  /* Keep the edit shell itself above surrounding content */
  #matchupBar.is-editing,
  #matchupBar.is-editing .mi-matchup-dock,
  #matchupBar.is-editing .matchup-bar-main,
  #matchupBar.is-editing .matchup-bar-left,
  #matchupBar.is-editing .matchup-bar-right {
    overflow: visible !important;
  }

  /* Real stacking anchors for Team A / Team B quick selects */
  #matchupBar.is-editing #matchupQuickA,
  #matchupBar.is-editing #matchupQuickB,
  #matchupBar.is-editing #teamAQuickSelectWrap,
  #matchupBar.is-editing #teamBQuickSelectWrap,
  #matchupBar.is-editing #teamAQuickSelectWrap .mi-team-dd,
  #matchupBar.is-editing #teamBQuickSelectWrap .mi-team-dd {
    position: relative !important;
    z-index: 10040 !important;
    overflow: visible !important;
  }

  /* Force the actual dropdown panels above EVERYTHING underneath */
  #matchupBar.is-editing #teamAQuickSelectWrap .mi-team-dd-panel,
  #matchupBar.is-editing #teamBQuickSelectWrap .mi-team-dd-panel,
  #matchupBar.is-editing #matchupQuickA .mi-team-dd-panel,
  #matchupBar.is-editing #matchupQuickB .mi-team-dd-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 10050 !important;
  }

  /* Optional safety: when either side is open, keep that column above peers */
  #matchupBar.is-editing .matchup-bar-left:has(.mi-team-dd-panel),
  #matchupBar.is-editing .matchup-bar-right:has(.mi-team-dd-panel) {
    position: relative !important;
    z-index: 10035 !important;
  }
}

/* =========================================================
   MOBILE — QUICK EDIT DROPDOWNS MUST OUTRANK VERDICTSHELL
   The patch-notes anchor fix flattened #matchupBar to z-index:1.
   Restore a higher stacking context when the bar is in edit mode.
   ========================================================= */
@media (max-width: 720px) {

  /* Keep verdict shell low */
  #verdictShell {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Restore the matchup bar as the top stacking context while editing */
  #matchupBar.is-editing {
    position: relative !important;
    z-index: 10040 !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  /* Actual floating team panels */
  #matchupBar.is-editing .mi-team-dd-panel,
  #matchupBar.is-editing #teamAQuickSelectWrap .mi-team-dd-panel,
  #matchupBar.is-editing #teamBQuickSelectWrap .mi-team-dd-panel,
  #matchupBar.is-editing #matchupQuickA .mi-team-dd-panel,
  #matchupBar.is-editing #matchupQuickB .mi-team-dd-panel {
    position: absolute !important;
    z-index: 10051 !important;
  }
}

/* =========================================================
   MOBILE — VERDICT → TEAM CARDS SECTION BREAK
   ========================================================= */
@media (max-width: 720px) {
  #analysisShell{
    margin-top: 14px !important;
    padding-top: 7px !important;
  }

  #analysisShell::before{
    left: 12px !important;
    right: 12px !important;
    height: 1px !important;

    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(148,163,184,0.14) 20%,
      rgba(255,255,255,0.24) 50%,
      rgba(148,163,184,0.14) 80%,
      transparent 100%
    ) !important;

    box-shadow:
      0 0 10px rgba(56,189,248,0.08),
      0 1px 0 rgba(0,0,0,0.30) !important;
  }

  #analysisShell::after{
    left: 8px !important;
    right: 8px !important;
    height: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.025) 0%,
      rgba(56,189,248,0.03) 18%,
      rgba(2,6,23,0.00) 100%
    ) !important;
  }
}

@media (max-width: 720px) {
  .legend-header--interactions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .legend-header--interactions .interactions-head--grid,
  .legend-header--interactions .interactions-head--left {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .legend-header--interactions .interactions-head--right {
    display: none !important;
  }

  #interactionsSection .volatility-tier-pill {
    height: 24px !important;
    width: auto !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  #interactionsSection .interactions-right {
    justify-content: none !important;
  }

  .flip-tile .tile-face.tile-front .mi-flip-hint{
    margin: auto !important;
  }
}

/* =========================================================
   MOBILE — PRE-MATCHUP HUB SINGLE-STEP MODE
   Show only the current actionable step on mobile.
   Desktop remains unchanged because this block is mobile-only.
   Add near the very end of mobile.css so it wins the cascade.
   ========================================================= */
@media (max-width: 720px) {

  /* Tighten the stack when only one row is visible */
  #preMatchupHub[data-mobile-step] .pre-hub-steps {
    gap: 0 !important;
  }

  /* Hide all rows by default once the token exists */
  #preMatchupHub[data-mobile-step] #preStep1,
  #preMatchupHub[data-mobile-step] #preStep2,
  #preMatchupHub[data-mobile-step] #preStep3 {
    display: none !important;
  }

  /* Re-show only the active row */
  #preMatchupHub[data-mobile-step="1"] #preStep1,
  #preMatchupHub[data-mobile-step="2"] #preStep2,
  #preMatchupHub[data-mobile-step="3"] #preStep3 {
    display: grid !important;
  }

  /* Optional: let the single visible row breathe slightly more */
  #preMatchupHub[data-mobile-step] .pre-step {
    margin: 0 !important;
  }
}

/* Tighten vertical spacing between setup sections on mobile */
@media (max-width: 720px) {

  #preSetupRow.pre-setup-row.top-bar {
    row-gap: 8px !important;        /* was 18px */
  }
}

@media (max-width: 720px) {

  /* QUICK EDIT DATASET — new custom dropdown only */
  #matchupBar.is-editing #matchupQuickDataset {
    grid-area: dataset !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 10030 !important;
  }

  #matchupBar.is-editing #datasetQuickSelectWrap,
  #matchupBar.is-editing #matchupQuickDataset .quick-dataset-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* native backing select must remain hidden */
  #matchupBar.is-editing #datasetSelectQuick {
    display: none !important;
  }

  /* visible custom control */
  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd,
  #matchupBar.is-editing #datasetSelectQuickUi {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 10040 !important;
  }

  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd-trigger,
  #matchupBar.is-editing #datasetSelectQuickUi .mi-dataset-dd-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd-label,
  #matchupBar.is-editing #datasetSelectQuickUi .mi-dataset-dd-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd-panel,
  #matchupBar.is-editing #datasetSelectQuickUi .mi-dataset-dd-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    z-index: 10050 !important;
  }
}

/* =========================================================
   MOBILE — QUICK EDIT DATASET DROPDOWN TRUE OVERLAY
   Make the custom dataset panel float over everything below
   exactly like the quick team dropdowns.
   ========================================================= */
@media (max-width: 720px) {

  /* Keep the whole edit shell unclipped */
  #matchupBar.is-editing,
  #matchupBar.is-editing .mi-matchup-dock,
  #matchupBar.is-editing .matchup-bar-main,
  #matchupBar.is-editing .matchup-bar-center,
  #matchupBar.is-editing #matchupQuickDataset,
  #matchupBar.is-editing #datasetQuickSelectWrap {
    overflow: visible !important;
  }

  /* Real stacking anchors for the dataset control */
  #matchupBar.is-editing #matchupQuickDataset,
  #matchupBar.is-editing #datasetQuickSelectWrap,
  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd,
  #matchupBar.is-editing #datasetSelectQuickUi {
    position: relative !important;
    z-index: 10040 !important;
    overflow: visible !important;
  }

  /* Force the actual dataset panel above anything underneath */
  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd-panel,
  #matchupBar.is-editing #datasetSelectQuickUi .mi-dataset-dd-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 10050 !important;
    overflow: auto !important;
  }

  /* Keep the center dataset row above sibling rows when open */
  #matchupBar.is-editing .matchup-bar-main:has(#datasetQuickSelectWrap .mi-dataset-dd.is-open),
  #matchupBar.is-editing #matchupQuickDataset:has(.mi-dataset-dd.is-open) {
    position: relative !important;
    z-index: 10035 !important;
  }
}

/* =========================================================
   MOBILE — DATASET DROPDOWN MUST OUTRANK TEAM B QUICK SELECT
   ========================================================= */
@media (max-width: 720px) {

  /* Dataset row becomes the strongest local stacking anchor */
  #matchupBar.is-editing #matchupQuickDataset,
  #matchupBar.is-editing #datasetQuickSelectWrap,
  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd,
  #matchupBar.is-editing #datasetSelectQuickUi {
    position: relative !important;
    z-index: 10070 !important;
    overflow: visible !important;
  }

  /* Actual dataset panel floats above Team A / Team B quick controls */
  #matchupBar.is-editing #datasetQuickSelectWrap .mi-dataset-dd-panel,
  #matchupBar.is-editing #datasetSelectQuickUi .mi-dataset-dd-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 10080 !important;
    overflow: auto !important;
  }

  /* When the dataset dropdown is open, explicitly keep its slot above both team columns */
  #matchupBar.is-editing #matchupQuickDataset:has(.mi-dataset-dd.is-open) {
    position: relative !important;
    z-index: 10079 !important;
  }

  /* And temporarily demote the side quick-select columns underneath it */
  #matchupBar.is-editing .matchup-bar-main:has(#matchupQuickDataset .mi-dataset-dd.is-open) #matchupQuickA,
  #matchupBar.is-editing .matchup-bar-main:has(#matchupQuickDataset .mi-dataset-dd.is-open) #matchupQuickB,
  #matchupBar.is-editing .matchup-bar-main:has(#matchupQuickDataset .mi-dataset-dd.is-open) #teamAQuickSelectWrap,
  #matchupBar.is-editing .matchup-bar-main:has(#matchupQuickDataset .mi-dataset-dd.is-open) #teamBQuickSelectWrap,
  #matchupBar.is-editing .matchup-bar-main:has(#matchupQuickDataset .mi-dataset-dd.is-open) #teamAQuickSelectWrap .mi-team-dd,
  #matchupBar.is-editing .matchup-bar-main:has(#matchupQuickDataset .mi-dataset-dd.is-open) #teamBQuickSelectWrap .mi-team-dd {
    z-index: 10020 !important;
  }

/* =========================================================
   HARD-OVERLAY FIX: dataset + custom dropdown panels
   Forces open menus to render as fully opaque overlays
   above all matchup controls/content on mobile.
   ========================================================= */

  #matchupBar,
  #matchupBar .matchup-bar-main,
  #matchupQuickDataset,
  #matchupQuickTeams,
  #matchupQuickRound,
  #matchupQuickActions,
  #matchupQuickSlot {
    overflow: visible !important;
  }

  #matchupBar,
  #matchupBar .matchup-bar-main,
  #matchupQuickDataset,
  #matchupQuickSlot,
  .mi-dataset-dd,
  .mi-quick-select {
    position: relative;
    isolation: isolate;
  }

  /* Open dropdown host gets lifted above neighbors */
  .mi-dataset-dd.is-open,
  .mi-quick-select.is-open,
  .mi-quick-select[aria-expanded="true"],
  .mi-dataset-dd[aria-expanded="true"] {
    z-index: 2147482000 !important;
  }

  /* Actual panel/menu */
  .mi-dataset-dd-panel,
  .mi-quick-select-menu,
  .mi-quick-select-panel,
  .mi-select-menu,
  .mi-select-panel {
    position: absolute;
    z-index: 2147483000 !important;

    background: rgb(10, 18, 40) !important;
    background-image: none !important;
    opacity: 1 !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;

    box-shadow:
      0 22px 54px rgba(0, 0, 0, 0.62),
      0 8px 22px rgba(0, 0, 0, 0.42) !important;

    border: 1px solid rgba(90, 140, 220, 0.32) !important;
  }

  /* When specifically open, make sure nothing softens the panel */
  .mi-dataset-dd.is-open .mi-dataset-dd-panel,
  .mi-quick-select.is-open .mi-quick-select-menu,
  .mi-quick-select.is-open .mi-quick-select-panel,
  .mi-quick-select[aria-expanded="true"] .mi-quick-select-menu,
  .mi-quick-select[aria-expanded="true"] .mi-quick-select-panel {
    display: block;
    visibility: visible;
    opacity: 1 !important;

    background: rgb(10, 18, 40) !important;
    background-image: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
  }

  /* Individual options should also be fully opaque */
  .mi-dataset-dd-option,
  .mi-quick-select-option,
  .mi-select-option,
  .mi-dataset-dd-panel > *,
  .mi-quick-select-menu > *,
  .mi-quick-select-panel > * {
    background-color: transparent;
    opacity: 1 !important;
  }

  /* Hover/selected states can glow, but must stay opaque */
  .mi-dataset-dd-option:hover,
  .mi-dataset-dd-option[aria-selected="true"],
  .mi-quick-select-option:hover,
  .mi-quick-select-option[aria-selected="true"],
  .mi-select-option:hover,
  .mi-select-option[aria-selected="true"] {
    background: rgb(14, 35, 70) !important;
    background-image: none !important;
    opacity: 1 !important;
  }
}

/* =========================================
   MOBILE — VERDICT INLINE SHARE / SAVE ACTIONS
   ========================================= */

@media (max-width: 600px) {
  #miVerdictInlineActions.mi-verdict-inline-actions {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 1px !important;
  }

  #miVerdictInlineActions .mi-verdict-action-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 10px 12px !important;

    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
}

/* =========================================
   MOBILE — VERDICT INLINE ACTIONS FIX
   ========================================= */

@media (max-width: 720px) {
  #miVerdictInlineActions.mi-verdict-inline-actions {
    width: 100% !important;
    margin: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #miVerdictInlineActions .mi-verdict-action-btn {
    flex: 0 0 auto !important;
    width: auto !important;

    min-height: 28px !important;
    padding: 4px 8px !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
  }
}

/* =========================================
   MOBILE — SMALLER VERDICT ACTION BUTTONS
   ========================================= */

@media (max-width: 720px) {

  #miVerdictInlineActions.mi-verdict-inline-actions {
    gap: 8px !important;
    margin-top: 1px !important;
    padding-top: 0 !important;
    padding-bottom: 6px !important;
  }

  #miVerdictInlineActions .mi-verdict-action-btn {
    flex: 0 0 auto !important;
    width: auto !important;

    min-height: 28px !important;
    max-height: 28px !important;
    padding: 4px 8px !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    border-radius: 999px !important;
  }

  .mi-marks-back-name {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--mi-text-primary) !important;
  }

  .mi-marks-back-summary {
    font-size: 8px !important;
    font-weight: 550 !important;
    color: var(--mi-text-primary) !important;
  }

  .mi-marks-back-row {
    gap: 1px !important;
  }

  .mi-marks-back-divider {
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }

  .mi-marks-back-sev {
    font-size: 7px !important;
    font-weight: 800 !important;
    margin-top: 1px !important;
  }

  .marks-header-text .matchup-kicker {
    font-size: 11px !important;
  }
  
  .mi-marks-back-desc {
    font-size: 7.5px !important;
    font-weight: 500 !important;
    color: var(--mi-text-muted) !important;
  }

  #resumeTileA .context-label,
  #resumeTileB .context-label {
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  #resumeTileA .context-header,
  #resumeTileB .context-header {
    row-gap: 1px !important;
    margin-top: 16px !important;
  }

  .context-tile {
    width: 100% !important;
    justify-content: center !important;
    align-self: center !important;
    text-align: center !important;
    align-items: center !important;
    height: 75% !important;
  }

  .profile-support-row .context-tier,
  .profile-support-row .context-subrow,
  .profile-support-row .context-note {
    font-size: 7px !important;
  }

  .profile-support-row .context-score {
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  .identity-inline-kicker {
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    font-size: 14px !important;
    font-weight: 720 !important;
  }

  .identity-inline-badge {
    font-size: 9px !important;
    font-weight: 680 !important;
    padding: 3px !important;
  }

  .identity-inline-label {
    font-size: 12px !important;
    font-weight: 690 !important;
  }
}

/* =========================================
   MOBILE — FORCE PROFILE SUPPORT ROW HORIZONTAL
   ========================================= */
@media (max-width: 720px) {

  .profile-support-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .profile-support-row > .mi-eff-module {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .profile-support-row > .context-tile {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* =========================================================
   CONTEXT TILE — FULL TILE BORDER (STRUCTURAL FIX)
   Purpose:
   Ensure border wraps entire tile container,
   not just the front/back face.
   ========================================================= */

  .context-tile.flip-tile .flip-tile-inner {
    /* Ensure container defines the visual frame */
    position: relative;
    border-radius: 16px;
    /* Move border here */
    border: 1.5px solid rgba(239, 68, 68, 0.95);
    /* Keep visual depth */
    box-shadow:
      0 8px 18px rgba(15, 23, 42, 0.45),
      inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
  }

  #marksTileA .context-tile .inline-marks-tile.flip-tile,
  #marksTileB .context-tile .inline-marks-tile.flip-tile {
    width: 100% !important;
  }

  .team-card-marks .marks-header {
    margin-top: 6px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table thead th {
    padding: 6px !important;
    font-weight: 650 !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-label-main {
    font-weight: 600 !important;
    font-size: 9.5px !important;
  }

  #interactionsSection .interaction-table.mi-interaction-table .mi-int-bar-sub {
    font-weight: 575 !important;
    font-size: 9px !important;
    color: var(--mi-text-muted) !important;
  }

  .interaction-table.mi-interaction-table .mi-int-intensity-pill {
    padding: 6px !important;
    font-weight: 675 !important;
  }

  #interactionsSection #interactionTotalsBar, #interactionsSection .interaction-totals-bar {
    min-height: 32px !important;
  }

  #interactionsSection .interaction-totals-bar .totals-inline {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  #interactionsSection .volatility-gauge-score {
    font-size: 30px !important;
    font-weight: 750 !important;
  }

  #interactionsSection .vol-q-label,
  #interactionsSection .vol-q-value {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--mi-text-primary) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
  }

  #interactionsSection .vol-q-driver,
  #interactionsSection .vol-q-lean {
    font-size: 11px !important;
    font-weight: 575 !important;
    color: var(--mi-text-muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
  }
 
  #interactionsSection .volatility-gauge-zones text {
    font-size: 11px !important;
    font-weight: 750 !important;
    color: var(--mi-text-muted) !important;
    letter-spacing: 0.04em !important;
  }

  #interactionsSection .volatility-gauge-label {
    font-size: 12px !important;
    font-weight: 775 !important;
    color: var(--mi-text-primary) !important;
    letter-spacing: 0.04em !important;
  }

  #interactionsSection .volatility-quarters {
    row-gap: 6px !important;
  }

  #summarySectionMobile .mi-sum-mob-title.matchup-kicker {
    margin-bottom: 6px !important;
    display: block !important;
    text-align: center !important;
  }

  #summarySectionMobile.mi-sum-mob-wrap {
    padding-top: 6px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #interactionsSection.card.interactions-card{
    border: 0.5px solid rgba(255,255,255,0.01);
    border-radius: 24px;
    overflow: hidden;
  }

  /* =========================================================
   INTERACTIONS HEADER — DIVIDER LINES
   Matches divider style used elsewhere in the UI
   ========================================================= */

  .legend-header.legend-header--interactions{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* ensures lines respect rounded containers */
  }

  /* LEFT DIVIDER */
  .legend-header.legend-header--interactions::before{
    content: "";
    position: absolute;
    left: 0;
    top: 10%;
    transform: translateY(-50%);

    width: 50%;
    height: 2px;

    background:
      linear-gradient(
        90deg,
        rgba(148,163,184,0.00),
        rgba(148,163,184,0.35),
        rgba(148,163,184,0.00)
      );

    pointer-events: none;
  }

  /* RIGHT DIVIDER */
  .legend-header.legend-header--interactions::after{
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    transform: translateY(-50%);

    width: 50%;
    height: 2px;

    background:
      linear-gradient(
        90deg,
        rgba(148,163,184,0.00),
        rgba(148,163,184,0.35),
        rgba(148,163,184,0.00)
      );

    pointer-events: none;
  }
}