/* Mobile app shell: a focused control-room experience for narrow screens. */

.mobile-app-bar-state,
.mobile-bottom-nav,
.mobile-more-sheet {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --mobile-bg: #050d18;
    --mobile-surface: #0a1727;
    --mobile-surface-raised: #0e1e32;
    --mobile-line: rgba(160, 185, 215, 0.14);
    --mobile-ink: #f4f7fb;
    --mobile-muted: #91a6bd;
    --mobile-gold: #eab13f;
    --mobile-teal: #60d8c5;
    --mobile-bottom-height: 64px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

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

  body {
    min-width: 0;
    padding-bottom: calc(var(--mobile-bottom-height) + var(--mobile-safe-bottom) + 24px);
    background:
      radial-gradient(circle at 90% 0%, rgba(39, 92, 139, 0.22), transparent 30%),
      linear-gradient(180deg, #07111f 0%, var(--mobile-bg) 46%, #07101b 100%);
    color: var(--mobile-ink);
    font-size: 14px;
  }

  body.mobile-more-open {
    overflow: hidden;
  }

  .home-topbar,
  body.home-mode .home-topbar,
  body.dashboard-mode .home-topbar,
  body.sporttery-mode .home-topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mobile-line);
    border-radius: 0;
    background: rgba(5, 13, 24, 0.9);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(18px) saturate(135%);
  }

  .home-logo {
    display: flex;
    align-items: center;
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .home-logo span {
    font-size: 19px;
    line-height: 1;
  }

  .home-logo strong,
  body.home-mode .home-logo strong,
  body.dashboard-mode .home-logo strong {
    max-width: 148px;
    overflow: hidden;
    color: var(--mobile-ink);
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-text-fill-color: var(--mobile-ink);
  }

  .mobile-app-bar-state {
    display: inline-flex;
    align-items: center;
    order: 2;
    min-width: 0;
    margin-left: auto;
    padding: 6px 9px;
    border: 1px solid rgba(96, 216, 197, 0.18);
    border-radius: 999px;
    background: rgba(96, 216, 197, 0.08);
    color: var(--mobile-teal);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .mobile-app-bar-state i {
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--mobile-teal);
    box-shadow: 0 0 0 4px rgba(96, 216, 197, 0.11);
  }

  .home-topbar nav {
    display: none !important;
  }

  .home-topbar .theme-toggle {
    order: 3;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
  }

  .home-topbar .theme-toggle > span {
    font-size: 18px;
  }

  .site-activity-indicator {
    top: calc(62px + env(safe-area-inset-top, 0px) + 8px);
    z-index: 110;
    max-width: calc(100vw - 32px);
    padding: 8px 12px;
    font-size: 11px;
  }

  .back-to-top {
    right: 14px;
    bottom: calc(var(--mobile-bottom-height) + var(--mobile-safe-bottom) + 28px);
    width: 40px;
    height: 40px;
    z-index: 150;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 12px;
    bottom: calc(var(--mobile-safe-bottom) + 10px);
    left: 12px;
    z-index: 180;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    min-height: var(--mobile-bottom-height);
    padding: 6px 8px;
    border: 1px solid rgba(160, 185, 215, 0.18);
    border-radius: 22px;
    background: rgba(5, 13, 24, 0.95);
    box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px) saturate(140%);
  }

  .mobile-bottom-nav button {
    display: grid;
    min-width: 0;
    min-height: 50px;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 5px 2px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #7e94ad;
    cursor: pointer;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .mobile-bottom-nav button:active {
    transform: scale(0.95);
  }

  .mobile-bottom-nav button.active {
    border-color: rgba(234, 177, 63, 0.24);
    background: rgba(234, 177, 63, 0.12);
    color: var(--mobile-gold);
  }

  .mobile-nav-glyph {
    display: grid;
    min-height: 22px;
    place-items: center;
    color: currentColor;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
  }

  .mobile-bottom-nav button:last-child .mobile-nav-glyph {
    font-size: 13px;
    letter-spacing: 2px;
  }

  .mobile-more-sheet:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: block;
  }

  .mobile-more-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(0, 0, 0, 0.58);
    cursor: pointer;
  }

  .mobile-more-panel {
    position: absolute;
    right: 0;
    bottom: calc(var(--mobile-bottom-height) + var(--mobile-safe-bottom) + 22px);
    left: 0;
    max-height: calc(100dvh - var(--mobile-bottom-height) - var(--mobile-safe-bottom) - 38px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px calc(18px + var(--mobile-safe-bottom));
    border: 1px solid rgba(160, 185, 215, 0.17);
    border-radius: 24px;
    background:
      radial-gradient(circle at 100% 0%, rgba(39, 92, 139, 0.24), transparent 36%),
      #091727;
    box-shadow: 0 -20px 54px rgba(0, 0, 0, 0.42);
    animation: mobileSheetUp 180ms ease-out both;
  }

  .mobile-more-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 15px;
  }

  .mobile-more-panel > header > div > span {
    color: var(--mobile-gold);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.16em;
  }

  .mobile-more-panel h2 {
    margin: 4px 0 0;
    color: var(--mobile-ink);
    font-family: "Songti SC", "STSong", serif;
    font-size: 23px;
  }

  .mobile-more-close {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--mobile-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--mobile-ink);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .mobile-more-grid > button {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    min-height: 68px;
    padding: 12px;
    border: 1px solid var(--mobile-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--mobile-ink);
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  .mobile-more-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: rgba(234, 177, 63, 0.13);
    color: var(--mobile-gold);
    font-size: 16px;
    font-weight: 900;
  }

  .mobile-more-grid strong,
  .mobile-more-grid small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-more-grid strong {
    font-size: 13px;
  }

  .mobile-more-grid small {
    margin-top: 4px;
    color: var(--mobile-muted);
    font-size: 10px;
  }

  .home-screen {
    min-height: auto;
    padding-bottom: 12px;
  }

  .home-hero {
    min-height: auto;
    padding: 25px 16px 26px;
    border-radius: 0 0 26px 26px;
    background:
      linear-gradient(180deg, rgba(5, 13, 24, 0.05), rgba(5, 13, 24, 0.78)),
      radial-gradient(circle at 100% 0%, rgba(234, 177, 63, 0.19), transparent 29%),
      url("./assets/home-hero-stadium-v1.jpg") center / cover,
      #07111f;
  }

  .home-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
  }

  .home-copy {
    display: contents;
  }

  .home-copy {
    gap: 14px;
  }

  .home-badge {
    min-height: 25px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  .home-copy h1,
  .home-hero .home-copy h1 {
    order: 2;
    width: 100%;
    max-width: 10em;
    margin-bottom: 0;
    color: #f8f4e9;
    font-size: clamp(35px, 10vw, 46px);
    letter-spacing: -0.055em;
    line-height: 1.04;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-text-fill-color: #f8f4e9;
  }

  .home-hero .home-copy h1 strong {
    width: auto;
    white-space: normal;
    margin-top: 6px;
    color: var(--mobile-gold);
    -webkit-text-fill-color: var(--mobile-gold);
  }

  .home-copy p {
    order: 3;
    display: block;
    max-width: 31em;
    margin-bottom: 0;
    color: rgba(232, 239, 248, 0.78);
    font-size: 13px;
    line-height: 1.65;
  }

  .home-actions {
    order: 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 2px;
  }

  .home-actions button {
    min-height: 47px;
    padding: 0 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 900;
  }

  .home-actions button:first-child {
    grid-column: 1 / -1;
  }

  .home-countdown-card {
    order: 4;
    display: grid;
    grid-template-areas: "kicker kicker" "teams teams" "timer timer";
    grid-template-columns: 1fr 1fr;
    row-gap: 11px;
    min-height: auto;
    padding: 15px;
    border: 1px solid rgba(234, 177, 63, 0.31);
    border-radius: 20px;
    background: rgba(8, 20, 34, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 38px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(12px);
    text-shadow: none;
  }

  .home-countdown-card::before,
  .home-countdown-card::after {
    display: none;
  }

  .home-countdown-kicker {
    grid-area: kicker;
    color: var(--mobile-gold);
    -webkit-text-fill-color: var(--mobile-gold);
    font-size: 11px;
  }

  .home-countdown-card strong {
    grid-area: teams;
    color: var(--mobile-ink);
    font-size: 18px;
    line-height: 1.2;
    -webkit-text-fill-color: var(--mobile-ink);
  }

  .home-countdown-card strong small,
  .home-countdown-card .team-flag {
    color: var(--mobile-muted);
    -webkit-text-fill-color: var(--mobile-muted);
  }

  .home-countdown-grid {
    grid-area: timer;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .home-countdown-grid div {
    min-height: 54px;
    border: 1px solid rgba(160, 185, 215, 0.13);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.07);
  }

  .home-countdown-grid b {
    color: #fff;
    font-size: 25px;
    -webkit-text-fill-color: #fff;
  }

  .home-countdown-grid small {
    color: var(--mobile-muted);
    -webkit-text-fill-color: var(--mobile-muted);
  }

  .home-upcoming,
  .home-products,
  .home-research-lab {
    padding: 25px 14px 10px;
  }

  .home-section-head {
    align-items: end;
    width: 100%;
    margin-bottom: 15px;
  }

  .home-section-head h2 {
    margin-top: 5px;
    color: var(--mobile-ink);
    font-size: 23px;
  }

  .home-section-head span {
    color: var(--mobile-gold);
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .home-section-head .home-section-link,
  .home-section-head button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--mobile-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--mobile-muted);
    font-size: 11px;
  }

  .home-upcoming-grid,
  .home-research-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-match-card {
    min-height: 0;
    padding: 16px;
    border: 1px solid var(--mobile-line);
    border-radius: 18px;
    background: linear-gradient(145deg, var(--mobile-surface-raised), var(--mobile-surface));
    color: var(--mobile-ink);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  }

  .home-match-card .home-match-league {
    padding: 5px 9px;
    background: rgba(234, 177, 63, 0.11);
    color: var(--mobile-gold);
    font-size: 10px;
  }

  .home-match-card .home-match-date {
    color: var(--mobile-muted);
    font-size: 11px;
  }

  .home-match-card .home-match-team {
    color: var(--mobile-ink);
    font-size: 20px;
  }

  .home-match-card .home-match-versus {
    width: 36px;
    height: 30px;
    background: rgba(234, 177, 63, 0.16);
    color: var(--mobile-gold);
    box-shadow: none;
  }

  .home-match-countdown {
    min-height: 48px;
    border-color: var(--mobile-line);
    background: rgba(255, 255, 255, 0.05);
  }

  .home-match-countdown small,
  .home-match-countdown em {
    color: var(--mobile-muted);
  }

  .home-match-footer b,
  .home-match-footer span {
    color: var(--mobile-muted);
    font-size: 11px;
  }

  .home-match-footer span {
    color: var(--mobile-teal);
  }

  .home-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-products .home-section-head {
    grid-column: 1 / -1;
  }

  .home-products article {
    min-height: 104px;
    padding: 14px;
    border: 1px solid var(--mobile-line);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.045);
  }

  .home-products article span {
    color: var(--mobile-gold);
    font-size: 10px;
  }

  .home-products article strong {
    display: block;
    margin-top: 8px;
    color: var(--mobile-ink);
    font-size: 14px;
    line-height: 1.25;
  }

  .home-products article em {
    display: block;
    margin-top: 5px;
    color: var(--mobile-muted);
    font-size: 10px;
    font-style: normal;
    line-height: 1.35;
  }

  .home-research-grid > article,
  .home-research-grid > div {
    border-color: var(--mobile-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
  }

  .dashboard-shell,
  body.sporttery-mode .dashboard-shell {
    width: 100%;
    min-height: auto;
    padding: 12px 12px 28px;
    background: transparent;
  }

  .panel,
  body.sporttery-mode #sporttery-pool,
  body.dashboard-mode .panel {
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--mobile-line);
    border-radius: 21px;
    background: linear-gradient(145deg, rgba(14, 30, 50, 0.96), rgba(8, 21, 36, 0.96));
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.16);
    color: var(--mobile-ink);
  }

  /* The omission heatmap keeps its full-width matrix inside a touch scroll region. */
  body.dashboard-mode #sporttery-goal-track:has(#sporttery-omission-list:not([hidden])) {
    overflow: visible;
  }

  body.dashboard-mode #sporttery-omission-list.sporttery-omission-page {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    contain: paint;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap-wrap.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /* Today Watch is a scanline, not the main research surface. Keep the six
     signals compact so the heatmap starts much earlier on a phone. */
  body.dashboard-mode #sporttery-omission-list .omission-section {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-section > header {
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-section > header h3 {
    margin-top: 2px;
    font-size: 17px;
    line-height: 1.15;
  }

  body.dashboard-mode #sporttery-omission-list .omission-section > header em {
    flex: 0 0 auto;
    font-size: 9px;
    white-space: nowrap;
  }

  body.dashboard-mode #sporttery-omission-list .omission-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-highlights button {
    min-width: 0;
    min-height: 0;
    padding: 9px 10px;
    border-radius: 11px;
    gap: 4px 6px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-highlights button span,
  body.dashboard-mode #sporttery-omission-list .omission-highlights button em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dashboard-mode #sporttery-omission-list .omission-highlights button span {
    font-size: 11px;
    line-height: 1.2;
  }

  body.dashboard-mode #sporttery-omission-list .omission-highlights button strong {
    min-width: 0;
    font-size: 17px;
    line-height: 1;
  }

  body.dashboard-mode #sporttery-omission-list .omission-highlights button em {
    font-size: 9px;
    line-height: 1.2;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap-scroll-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -3px 0 2px;
    color: var(--mobile-muted);
    font-size: 10px;
    line-height: 1.4;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap-scroll-note span:last-child {
    color: var(--mobile-gold);
    font-weight: 850;
    white-space: nowrap;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap {
    width: max-content;
    min-width: 720px;
    contain: layout style;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: 0 64px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap thead th:first-child,
  body.dashboard-mode #sporttery-omission-list .omission-heatmap tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #0c1728;
    box-shadow: 10px 0 16px rgba(3, 10, 18, 0.18);
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap thead th:first-child {
    z-index: 3;
  }

  body.dashboard-mode #sporttery-omission-list .omission-cell {
    contain: layout paint;
    transition: none;
  }

  body.dashboard-mode #sporttery-omission-list .omission-cell.extreme {
    box-shadow: none;
  }

  body.dashboard-mode #sporttery-omission-list .omission-heatmap th,
  body.dashboard-mode #sporttery-omission-list .omission-heatmap td {
    white-space: nowrap;
  }

  .section-head,
  .panel-hero,
  .model-stats-hero,
  .odds-map-hero,
  .model-intro-hero,
  .about-site-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .model-stats-hero,
  .odds-map-hero,
  .model-intro-hero,
  .about-site-hero {
    flex-direction: column;
  }

  .model-stats-hero > aside,
  .odds-map-hero > aside,
  .model-intro-hero > aside,
  .about-site-hero > aside {
    width: 100%;
  }

  .section-head h2,
  .panel-hero h2,
  .model-stats-hero h2,
  .odds-map-hero h2,
  .model-intro-hero h2,
  .about-site-hero h2 {
    color: var(--mobile-ink);
    font-size: 24px;
    line-height: 1.15;
  }

  .panel-hero p,
  .model-stats-hero p,
  .odds-map-hero p,
  .about-site-hero p {
    color: var(--mobile-muted);
    font-size: 12px;
    line-height: 1.6;
  }

  /* Keep mobile panel headers useful without letting the desktop hero become the page. */
  body.dashboard-mode .dashboard-shell > .panel :where(
    .panel-hero,
    .model-intro-hero,
    .model-stats-hero,
    .site-locks-hero,
    .odds-map-hero,
    .about-site-hero
  ) {
    gap: 10px;
    padding: 13px 14px 12px;
    margin-bottom: 12px;
    border-radius: 16px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .panel-hero > div,
    .model-intro-hero > div,
    .model-stats-hero > div,
    .odds-map-hero > div,
    .about-site-hero > div
  ) {
    min-width: 0;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .panel-hero h2,
    .model-intro-hero h2,
    .model-stats-hero h2,
    .odds-map-hero h2,
    .about-site-hero h2
  ) {
    margin: 3px 0 5px;
    font-size: 22px;
    line-height: 1.08;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .panel-hero p:not(.eyebrow),
    .model-intro-hero p:not(.eyebrow),
    .model-stats-hero p:not(.eyebrow),
    .odds-map-hero p:not(.eyebrow),
    .about-site-hero p:not(.eyebrow)
  ) {
    display: -webkit-box;
    max-height: 4.5em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 11px;
    line-height: 1.5;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside,
    .model-stats-hero > aside,
    .odds-map-hero > aside,
    .about-site-hero > aside
  ) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 3px 10px;
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    overflow: hidden;
    border-radius: 14px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside span,
    .model-stats-hero > aside span,
    .odds-map-hero > aside span,
    .about-site-hero > aside span
  ) {
    white-space: nowrap;
    font-size: 10px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside strong,
    .model-stats-hero > aside strong,
    .odds-map-hero > aside strong,
    .about-site-hero > aside strong
  ) {
    min-width: 0;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 20px;
    line-height: 1.08;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside em,
    .model-stats-hero > aside em,
    .odds-map-hero > aside em,
    .about-site-hero > aside em,
    .model-intro-hero > aside small
  ) {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.3;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside small,
    .model-stats-hero > aside small,
    .odds-map-hero > aside small,
    .about-site-hero > aside small
  ) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero::after,
    .model-stats-hero::after,
    .odds-map-hero::after,
    .about-site-hero::after
  ) {
    right: 14px;
    bottom: 9px;
    width: 90px;
    opacity: 0.5;
  }

  /* The omission page owns a different hero markup; keep it a compact mobile
     header so the data-range status does not push the table below the fold. */
  body.dashboard-mode #sporttery-omission-list .omission-hero {
    display: grid;
    gap: 8px;
    padding: 12px 13px;
    border-radius: 16px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero > div {
    min-width: 0;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero h2 {
    margin: 3px 0 4px;
    font-size: 22px;
    line-height: 1.08;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero p:not(.eyebrow) {
    display: -webkit-box;
    max-height: 2.9em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11px;
    line-height: 1.45;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero aside {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 2px 8px;
    width: 100%;
    min-width: 0;
    padding: 8px 10px;
    overflow: hidden;
    border-radius: 13px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero aside span {
    white-space: nowrap;
    font-size: 10px;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero aside strong {
    min-width: 0;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 18px;
    line-height: 1.08;
  }

  body.dashboard-mode #sporttery-omission-list .omission-hero aside em {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 9px;
    line-height: 1.25;
  }

  /* Keep the omission page's outer grid inside the panel. The heatmap may
     scroll horizontally in its own wrapper, but no sibling card should be
     allowed to widen the page or push the Hero beyond the viewport. */
  body.dashboard-mode #sporttery-goal-track #sporttery-omission-list.sporttery-omission-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 100%);
  }

  body.dashboard-mode #sporttery-goal-track #sporttery-omission-list.sporttery-omission-page > * {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.dashboard-mode #sporttery-goal-track #sporttery-omission-list .omission-hero {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
  }

  body.dashboard-mode #sporttery-goal-track #sporttery-omission-list .omission-hero h2,
  body.dashboard-mode #sporttery-goal-track #sporttery-omission-list .omission-hero p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Summary metrics are a one-line data strip on mobile; detailed match cards
     below remain stacked so their context and actions stay readable. */
  body.dashboard-mode .dashboard-shell > .panel .odds-map-cards {
    padding: 10px 0 0;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest {
    padding: 0;
    margin-top: 10px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .odds-radar-summary,
    .sp-backtest-grid
  ) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .odds-radar-summary article,
    .odds-radar-summary > button,
    .sp-backtest-grid article
  ) {
    min-width: 0;
    min-height: 88px;
    padding: 9px 7px;
    border-radius: 12px;
    box-shadow: none;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .odds-radar-summary span,
    .odds-radar-summary em,
    .odds-radar-summary small,
    .sp-backtest-grid span,
    .sp-backtest-grid em
  ) {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 9px;
    line-height: 1.25;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .odds-radar-summary span,
    .sp-backtest-grid span
  ) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .odds-radar-summary strong,
    .sp-backtest-grid strong
  ) {
    min-width: 0;
    margin: 5px 0 3px;
    overflow-wrap: anywhere;
    font-size: 23px;
    line-height: 1;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .odds-radar-summary small,
    .sp-backtest-grid p
  ) {
    display: -webkit-box;
    max-height: 2.5em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 5px;
    font-size: 8px;
    line-height: 1.25;
  }

  /* Spotlight rows are only a quick scan; the full record table below is the
     primary surface on mobile, so keep each signal to a compact two-line row. */
  body.dashboard-mode .dashboard-shell > .panel .odds-spotlight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px;
    margin-top: 8px;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-spotlight-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "meta match flag"
      "meta summary flag";
    align-items: center;
    gap: 2px 8px;
    min-width: 0;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: none;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-spotlight-card span {
    grid-area: meta;
    align-self: start;
    min-width: 0;
    overflow: hidden;
    color: var(--mobile-muted);
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-spotlight-card strong {
    grid-area: match;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--mobile-ink);
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-spotlight-card p {
    display: -webkit-box;
    grid-area: summary;
    min-width: 0;
    max-height: 1.25em;
    margin: 0;
    overflow: hidden;
    color: var(--mobile-muted);
    font-size: 9px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-spotlight-card em {
    grid-area: flag;
    align-self: center;
    max-width: 74px;
    padding: 3px 5px;
    overflow: hidden;
    border: 1px solid rgba(234, 177, 63, 0.24);
    border-radius: 999px;
    background: rgba(234, 177, 63, 0.08);
    color: var(--mobile-gold);
    font-size: 8px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The pre-match table stays a table on mobile, but uses the full shell as a
     deliberate horizontal canvas instead of collapsing its first columns into
     vertical glyphs. */
  body.dashboard-mode .dashboard-shell > .panel .odds-map-wrap:not(:has(.odds-backtest-record-table)) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) {
    width: 954px;
    min-width: 954px !important;
    table-layout: fixed;
    font-size: 12px;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) th,
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) td {
    min-width: 0;
    padding: 11px 7px !important;
    line-height: 1.35;
    vertical-align: middle;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(1) { width: 56px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(2) { width: 60px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(3) { width: 180px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(4) { width: 75px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(5) { width: 56px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(6) { width: 175px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(7) { width: 66px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(8) { width: 66px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(9) { width: 110px; }
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) :is(th, td):nth-child(10) { width: 110px; }

  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) th:nth-child(-n + 2),
  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) td:nth-child(-n + 2) {
    white-space: nowrap;
    text-align: center;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-map-record-table:not(.odds-backtest-record-table) .odds-map-match-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The backtest table becomes a readable record list on narrow screens;
     keeping the desktop table's fixed width here only creates clipped columns. */
  body.dashboard-mode .dashboard-shell > .panel .odds-map-wrap:has(.odds-backtest-record-table) {
    max-height: none;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 10px;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table thead {
    display: none;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody {
    display: grid;
    gap: 8px;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody tr {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 62px;
    grid-template-areas:
      "issue match score"
      "issue lock action"
      "issue signal signal"
      "issue model model"
      "issue hint hint";
    gap: 6px 9px;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--mobile-line);
    border-radius: 14px;
    background: linear-gradient(145deg, var(--mobile-surface-raised), var(--mobile-surface));
    box-shadow: none;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td {
    display: block;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mobile-muted);
    line-height: 1.3;
    text-align: left;
    vertical-align: middle;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--mobile-gold);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(1) {
    display: flex;
    grid-area: issue;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 8px !important;
    border-right: 1px solid var(--mobile-line) !important;
    color: var(--mobile-ink);
    font-size: 12px;
    font-weight: 950;
    text-align: center;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(1)::before { content: "场次"; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(2) {
    grid-area: match;
    overflow-wrap: anywhere;
    color: var(--mobile-ink);
    font-size: 14px;
    font-weight: 950;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(2)::before { content: "对阵"; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(3) {
    grid-area: score;
    color: var(--mobile-ink);
    text-align: right;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(3)::before { content: "比分"; text-align: right; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(3) strong {
    display: block;
    color: var(--mobile-ink);
    font-size: 16px;
    line-height: 1.1;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(4) {
    grid-area: lock;
    overflow-wrap: anywhere;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(4)::before { content: "锁版"; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(5) {
    grid-area: signal;
    overflow-wrap: anywhere;
    color: var(--mobile-gold);
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(5)::before { content: "漂移信号"; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(6) {
    grid-area: model;
    overflow-wrap: anywhere;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(6)::before { content: "模型校验"; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(7) {
    grid-area: hint;
    overflow-wrap: anywhere;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(7)::before { content: "提示"; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(8) {
    display: flex;
    grid-area: action;
    align-items: end;
    justify-content: end;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody td:nth-child(8)::before { display: none; }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table .odds-score-source {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    line-height: 1.2;
    text-align: right;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table .odds-backtest-detail-btn {
    min-width: 48px;
    min-height: 28px;
    padding: 0 9px;
    border-color: rgba(234, 177, 63, 0.34);
    border-radius: 999px;
    background: rgba(234, 177, 63, 0.10);
    color: var(--mobile-gold);
    font-size: 10px;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table tbody tr:has(.empty-cell) {
    display: block;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table .empty-cell {
    display: block;
    padding: 18px !important;
    color: var(--mobile-muted);
    text-align: center;
  }

  body.dashboard-mode .dashboard-shell > .panel .odds-backtest-record-table .empty-cell::before {
    display: none;
  }

  .eyebrow {
    color: var(--mobile-gold);
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .section-head .pill,
  .panel .pill {
    flex: 0 0 auto;
    border-color: rgba(234, 177, 63, 0.24);
    background: rgba(234, 177, 63, 0.09);
    color: var(--mobile-gold);
  }

  .pool-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin: 0 0 13px;
    padding: 12px;
    border-color: var(--mobile-line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: none;
  }

  .pool-toolbar span {
    overflow: hidden;
    color: var(--mobile-muted);
    font-size: 10px;
    line-height: 1.45;
    text-overflow: ellipsis;
  }

  .pool-toolbar strong {
    color: var(--mobile-gold);
    font-size: 16px;
  }

  .pool-view-tabs,
  .goal-track-view-tabs,
  .odds-map-subnav {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0 -3px 14px;
    padding: 2px 3px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pool-view-tabs::-webkit-scrollbar,
  .goal-track-view-tabs::-webkit-scrollbar,
  .odds-map-subnav::-webkit-scrollbar {
    display: none;
  }

  .pool-view-tabs button,
  .goal-track-view-tabs button,
  .odds-map-subnav button {
    flex: 0 0 auto;
    min-height: 35px;
    padding: 0 12px;
    border-color: var(--mobile-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--mobile-muted);
    font-size: 11px;
  }

  .pool-view-tabs button.active,
  .goal-track-view-tabs button.active,
  .odds-map-subnav button.active {
    border-color: rgba(234, 177, 63, 0.45);
    background: var(--mobile-gold);
    color: #101b2a;
    box-shadow: 0 8px 18px rgba(234, 177, 63, 0.16);
  }

  .day-lane + .day-lane {
    margin-top: 18px;
    padding-top: 17px;
    border-top-color: var(--mobile-line);
  }

  .day-lane-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .day-lane-head strong {
    color: var(--mobile-ink);
    font-size: 17px;
  }

  .day-lane-head span,
  .day-lane-head em {
    color: var(--mobile-gold);
    font-size: 10px;
    font-style: normal;
  }

  .match-grid,
  .day-lane .match-grid,
  #today-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body.sporttery-mode #sporttery-pool .match-card,
  .match-card {
    min-height: 0;
    padding: 14px;
    border: 1px solid var(--mobile-line);
    border-radius: 17px;
    background: linear-gradient(145deg, var(--mobile-surface-raised), var(--mobile-surface));
    box-shadow: none;
  }

  body.sporttery-mode #sporttery-pool .match-card:hover,
  .match-card:hover {
    transform: none;
    border-color: rgba(234, 177, 63, 0.35);
    box-shadow: none;
  }

  body.sporttery-mode #sporttery-pool .match-meta,
  body.sporttery-mode #sporttery-pool .card-foot,
  .match-card .match-meta,
  .match-card .card-foot {
    color: var(--mobile-muted);
    font-size: 10px;
  }

  body.sporttery-mode #sporttery-pool .teams strong,
  .match-card .teams strong {
    color: var(--mobile-ink);
    font-size: 18px;
  }

  body.sporttery-mode #sporttery-pool .teams b,
  .match-card .teams b {
    border-color: rgba(234, 177, 63, 0.25);
    background: rgba(234, 177, 63, 0.10);
    color: var(--mobile-gold);
  }

  body.sporttery-mode #sporttery-pool .match-card-insight,
  .match-card-insight {
    border-color: var(--mobile-line);
    background: rgba(0, 0, 0, 0.16);
  }

  body.sporttery-mode #sporttery-pool .match-card-insight strong,
  .match-card-insight strong {
    color: var(--mobile-ink);
  }

  body.sporttery-mode #sporttery-pool .match-card-insight em,
  .match-card-insight em {
    color: var(--mobile-muted);
  }

  .site-footer {
    margin-top: 0;
    padding: 24px 16px;
    border-top: 1px solid var(--mobile-line);
    background: #050d18;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .site-footer-brand p,
  .site-footer p,
  .site-footer button,
  .site-footer-bottom {
    color: var(--mobile-muted);
    font-size: 11px;
    line-height: 1.6;
  }

  .site-footer h3 {
    color: var(--mobile-gold);
    font-size: 13px;
  }

  .site-footer-bottom {
    display: grid;
    gap: 5px;
  }

  body.is-detail-page .shell {
    width: 100%;
    padding: 0 12px 28px;
  }

  body.is-detail-page #match-detail.panel {
    margin: 0 0 12px;
    padding: 0 0 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  @keyframes mobileSheetUp {
    from { transform: translateY(14px); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
  }
}

@media (max-width: 390px) {
  .mobile-app-bar-state {
    display: none;
  }

  .home-logo strong,
  body.home-mode .home-logo strong,
  body.dashboard-mode .home-logo strong {
    max-width: 132px;
  }

  .home-copy h1,
  .home-hero .home-copy h1 {
    font-size: 31px;
  }

  .home-products {
    grid-template-columns: 1fr;
  }

  .home-products article {
    min-height: 88px;
  }

  .mobile-more-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .home-hero {
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .home-copy h1,
  .home-hero .home-copy h1 {
    font-size: 31px;
    line-height: 1.02;
  }

  .home-copy p {
    max-height: 52px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
  }

  .home-countdown-card {
    row-gap: 7px;
    padding: 12px;
  }

  .home-countdown-grid div {
    min-height: 45px;
  }

  .home-countdown-grid b {
    font-size: 22px;
  }

  .home-actions button {
    min-height: 44px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside,
    .model-stats-hero > aside,
    .odds-map-hero > aside,
    .about-site-hero > aside
  ) {
    gap: 2px 8px;
    padding: 8px 10px;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside strong,
    .model-stats-hero > aside strong,
    .odds-map-hero > aside strong,
    .about-site-hero > aside strong
  ) {
    font-size: 18px;
    line-height: 1.12;
  }

  body.dashboard-mode .dashboard-shell > .panel :where(
    .model-intro-hero > aside span,
    .model-stats-hero > aside span,
    .odds-map-hero > aside span,
    .about-site-hero > aside span,
    .model-intro-hero > aside em,
    .model-stats-hero > aside em,
    .odds-map-hero > aside em,
    .about-site-hero > aside em,
    .model-intro-hero > aside small
  ) {
    font-size: 9px;
    line-height: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-more-panel,
  .mobile-bottom-nav button,
  .home-match-card {
    animation: none !important;
    transition: none !important;
  }
}

html[data-theme="light"] {
  --mobile-bg: #f2f6fb;
  --mobile-surface: #ffffff;
  --mobile-surface-raised: #f8fbff;
  --mobile-line: rgba(25, 65, 108, 0.13);
  --mobile-ink: #09233d;
  --mobile-muted: #6b7c91;
  --mobile-gold: #b77908;
  --mobile-teal: #087f79;
}

@media (max-width: 760px) {
  html[data-theme="light"] body {
    background:
      radial-gradient(circle at 100% 0%, rgba(217, 154, 22, 0.12), transparent 28%),
      linear-gradient(180deg, #eef5fc 0%, #f8fbff 100%);
  }

  html[data-theme="light"] .home-topbar,
  html[data-theme="light"] body.home-mode .home-topbar,
  html[data-theme="light"] body.dashboard-mode .home-topbar {
    background: rgba(248, 251, 255, 0.92);
    border-bottom-color: rgba(25, 65, 108, 0.12);
  }

  html[data-theme="light"] .home-logo strong,
  html[data-theme="light"] body.home-mode .home-logo strong,
  html[data-theme="light"] body.dashboard-mode .home-logo strong {
    color: #09233d;
    -webkit-text-fill-color: #09233d;
  }

  html[data-theme="light"] .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(25, 65, 108, 0.12);
  }

  html[data-theme="light"] .mobile-bottom-nav button {
    color: #718299;
  }

  html[data-theme="light"] .mobile-bottom-nav button.active {
    background: rgba(183, 121, 8, 0.10);
    color: #9a6505;
  }

  html[data-theme="light"] .panel,
  html[data-theme="light"] body.sporttery-mode #sporttery-pool,
  html[data-theme="light"] body.dashboard-mode .panel {
    background: linear-gradient(145deg, #ffffff, #f4f8fc);
    color: #09233d;
  }

  html[data-theme="light"] body.sporttery-mode #sporttery-pool .match-card,
  html[data-theme="light"] .match-card,
  html[data-theme="light"] .home-match-card {
    background: linear-gradient(145deg, #ffffff, #f5f9fd);
    color: #09233d;
  }

  html[data-theme="light"] .mobile-more-panel {
    background: linear-gradient(145deg, #ffffff, #eef5fc);
  }

  html[data-theme="light"] body.dashboard-mode #sporttery-omission-list .omission-heatmap thead th:first-child,
  html[data-theme="light"] body.dashboard-mode #sporttery-omission-list .omission-heatmap tbody th:first-child {
    background: #ffffff;
    box-shadow: 10px 0 16px rgba(8, 32, 82, 0.08);
  }

  html[data-theme="light"] .mobile-more-grid > button {
    background: rgba(25, 65, 108, 0.04);
  }

html[data-theme="light"] .site-footer {
    background: #eef4fa;
  }
}

/* Compact detail intelligence on phones: keep the market profile dense without hiding its data. */
@media (max-width: 760px) {
  body.is-detail-page .sporttery-detail-hero .match-page-summary > span {
    box-sizing: border-box;
    min-width: 0;
    padding: 0 3px;
    font-size: clamp(9px, 2.55vw, 10px);
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .polymarket-profile-block {
    margin: 12px 0 10px;
    padding: 10px;
    border-radius: 14px;
  }

  .polymarket-profile-block-head {
    display: grid;
    grid-template-columns: minmax(98px, .46fr) minmax(0, 1fr);
    align-items: start;
    gap: 9px;
  }

  .polymarket-profile-block-head small {
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: .08em;
  }

  .polymarket-profile-block-head strong {
    margin-top: 3px;
    font-size: 16px;
    line-height: 1.15;
  }

  .polymarket-profile-block-head p {
    font-size: 10px;
    line-height: 1.42;
  }

  .polymarket-profile-outcomes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 10px;
  }

  .polymarket-profile-outcome {
    min-width: 0;
    padding: 8px 7px;
    border-top-width: 2px;
    border-radius: 9px;
  }

  .polymarket-profile-outcome small {
    min-height: 30px;
    font-size: 8px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .polymarket-profile-outcome strong {
    margin: 4px 0 2px;
    font-size: 20px;
    line-height: 1;
  }

  .polymarket-profile-outcome-volume {
    margin-top: 5px !important;
    font-size: 9px !important;
    line-height: 1.2;
  }

  .polymarket-profile-outcome-change {
    font-size: 8px !important;
    line-height: 1.2;
  }

  .polymarket-profile-benchmarks {
    gap: 2px;
    margin-top: 6px;
    padding-top: 6px;
  }

  .polymarket-profile-benchmarks span {
    grid-template-columns: 25px 34px minmax(0, 1fr);
    gap: 3px;
    font-size: 8px;
    line-height: 1.2;
  }

  .polymarket-profile-benchmarks span small {
    min-height: 0;
    font-size: 8px;
  }

  .polymarket-profile-benchmarks span b,
  .polymarket-profile-benchmarks span em {
    font-size: 8px;
  }

  .polymarket-profile-benchmarks span b {
    font-size: 9px;
  }

  .polymarket-probability-chart {
    margin-top: 10px;
    padding: 10px 11px;
    border-radius: 9px;
  }

  .polymarket-probability-chart > header {
    gap: 5px;
    margin-bottom: 6px;
  }

  .polymarket-probability-chart > header small {
    font-size: 8px;
  }

  .polymarket-probability-chart > header strong {
    margin-top: 3px;
    font-size: 13px;
  }

  .polymarket-probability-chart > header p {
    font-size: 9px;
    line-height: 1.35;
  }

  .polymarket-probability-chart svg {
    height: 145px;
  }

  .polymarket-probability-caption {
    gap: 8px;
    font-size: 8px;
  }

  .polymarket-probability-caption strong,
  .polymarket-probability-note {
    font-size: 9px;
  }

  .polymarket-validity-card,
  .polymarket-trade-pulse-card {
    margin-top: 9px;
    padding: 10px 11px;
  }

  .polymarket-validity-card > header,
  .polymarket-trade-pulse-card > header {
    gap: 5px;
  }

  .polymarket-validity-card > header small,
  .polymarket-trade-pulse-card > header small {
    font-size: 8px;
  }

  .polymarket-validity-card > header strong,
  .polymarket-trade-pulse-card > header strong {
    margin-top: 3px;
    font-size: 13px;
  }

  .polymarket-validity-card > header p,
  .polymarket-trade-pulse-card > header span {
    font-size: 9px;
    line-height: 1.35;
  }

  .polymarket-validity-grid,
  .polymarket-trade-pulse-grid {
    margin-top: 8px;
  }

  .polymarket-validity-grid article,
  .polymarket-trade-pulse-grid article {
    padding: 7px 8px;
  }

  .polymarket-validity-grid small,
  .polymarket-trade-pulse-grid small,
  .polymarket-validity-grid span,
  .polymarket-trade-pulse-grid span {
    font-size: 8px;
    line-height: 1.35;
  }

  .polymarket-validity-grid strong,
  .polymarket-trade-pulse-grid strong {
    margin: 2px 0;
    font-size: 12px;
  }

  .polymarket-validity-books {
    gap: 5px;
    margin-top: 7px;
  }

  .polymarket-validity-books span {
    padding: 4px 5px;
  }

  .polymarket-profile-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
  }

  .polymarket-profile-metrics article {
    padding: 8px 7px;
  }

  .polymarket-profile-metrics small,
  .polymarket-profile-metrics span {
    font-size: 8px;
    line-height: 1.35;
  }

  .polymarket-profile-metrics strong {
    margin: 2px 0;
    font-size: 13px;
  }

  .polymarket-trade-pulse-outcomes {
    gap: 5px;
    margin-top: 7px;
  }

  .polymarket-trade-pulse-outcomes span {
    padding: 6px 7px;
  }

  .polymarket-trade-pulse-outcomes b,
  .polymarket-trade-pulse-outcomes em {
    font-size: 8px;
  }

  .polymarket-trade-pulse-card > p {
    margin-top: 7px;
    font-size: 8px;
    line-height: 1.35;
  }

  .polymarket-volume-chart {
    margin-top: 10px;
    padding: 0 10px 7px;
  }

  .polymarket-volume-chart > header {
    gap: 5px;
    padding: 10px 2px 3px;
  }

  .polymarket-volume-chart > header small {
    font-size: 8px;
  }

  .polymarket-volume-chart > header strong {
    margin-top: 3px;
    font-size: 13px;
  }

  .polymarket-volume-chart > header p {
    font-size: 9px;
  }

  .polymarket-volume-chart svg {
    height: 160px;
  }

  .polymarket-volume-legend {
    gap: 8px;
    font-size: 8px;
  }

  .polymarket-companion-block {
    margin-top: 10px;
    padding-top: 10px;
  }

  .polymarket-companion-block > header {
    gap: 5px;
  }

  .polymarket-companion-block > header small {
    font-size: 8px;
  }

  .polymarket-companion-block > header strong {
    margin-top: 3px;
    font-size: 13px;
  }

  .polymarket-companion-block > header p {
    font-size: 9px;
    line-height: 1.35;
  }

  .polymarket-companion-charts {
    gap: 7px;
    margin-top: 8px;
  }

  .polymarket-companion-chart {
    padding: 9px 10px;
  }

  .polymarket-companion-chart > header {
    gap: 5px;
    margin-bottom: 8px;
  }

  .polymarket-companion-chart > header small {
    font-size: 8px;
  }

  .polymarket-companion-chart > header strong {
    margin-top: 3px;
    font-size: 12px;
  }

  .polymarket-companion-chart > header > span {
    font-size: 8px;
  }

  .polymarket-companion-chart-row {
    padding: 7px 0;
  }

  .polymarket-companion-chart-row-head {
    gap: 4px;
    margin-bottom: 4px;
  }

  .polymarket-companion-chart-row-head strong {
    min-width: 38px;
    font-size: 11px;
  }

  .polymarket-companion-chart-row-head span,
  .polymarket-companion-chart-row-head small,
  .polymarket-companion-chart-meta {
    font-size: 8px;
  }

  .polymarket-companion-chart-row-head span {
    padding: 2px 4px;
  }

  .polymarket-companion-chart-bar {
    height: 10px;
  }

  .polymarket-companion-chart-labels {
    gap: 4px;
    margin-top: 5px;
  }

  .polymarket-companion-chart-labels span {
    gap: 3px;
    font-size: 8px;
  }

  .polymarket-companion-chart-labels strong {
    font-size: 9px;
  }
}

@media (min-width: 430px) and (max-width: 760px) {
  .polymarket-companion-charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .polymarket-companion-chart > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .polymarket-companion-chart > header > span {
    text-align: left;
  }
}