/*
  SportsBettingSite.org - global mobile optimization layer
  Build: 2026-09-08
  Loaded last so it can safely normalize the site's several legacy page systems.
*/

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:84px;
}
body{max-width:100%;overflow-x:hidden;}
img,svg,video,canvas,iframe{max-width:100%;}
img{height:auto;}
iframe,video{width:100%;}
button,a,summary,select,input,textarea{touch-action:manipulation;}
input,select,textarea,button{font:inherit;}

/* Grid and flex children must be allowed to shrink on small screens. */
main,section,article,aside,header,footer,
.wrap,.container,.article,.article-main,.article-body,.term-main,.legal-copy,
.hero-grid,.guide-hero-grid,.article-grid,.article-layout,.term-layout,.term-hero-grid,
.layout,.cluster-grid,.related-grid,.quick-grid,.grid-2,.grid-3,.grid-4,
.card,.cluster-card,.related-card,.guide-card,.market-card,.stat-card,.side-card,
.mx-market-card,.mx-keyfact,.mx-sport-card,.pc-card,.quick-card,
.foot-col,.footer .top>*{min-width:0;}

/* Long URLs, book names, translated titles and betting terminology must never force overflow. */
p,li,dd,dt,td,th,figcaption,
.card,.panel,.callout,.sidebox,.toc,.side-card,.cluster-card,.related-card,
.article-main,.article-body,.term-main,.legal-copy,
h1,h2,h3,h4,h5,h6{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Bare tables get their own scroller; wrapped tables keep the wrapper as the scroller. */
table{max-width:100%;}
.table-wrap,.enhance-table-wrap{
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.table-wrap>table,.enhance-table-wrap>table{max-width:none;}

/* Prevent off-canvas media from being created by old fixed dimensions. */
figure,picture,.figure,.guide-photo,.article-visual,.review-visual,.hub-visual,
.feature-media,.latam-feature,.br-feature,.ph-feature,.au-feature,
.guide-hero-visual,.term-hero-art{max-width:100%;}

/* Accessible motion handling also improves battery use on mobile. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .ticker-track{animation:none!important;transform:none!important;}
}

/* Tablet / small laptop */
@media (max-width:960px){
  html{scroll-padding-top:76px;}

  /* Global header variants */
  header[data-global-header-build],.site-header{position:sticky!important;top:0!important;}
  header[data-global-header-build] .header-inner,
  header .header-inner,
  .site-header .inner{
    width:auto!important;
    max-width:none!important;
    margin:0 14px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  header[data-global-header-build].nav-open nav.primary,
  header.nav-open nav.primary{
    max-height:calc(100dvh - 76px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  header[data-global-header-build] .country-dropdown-menu{max-height:min(70dvh,520px)!important;overflow-y:auto!important;}

  /* Desktop sidebars and split heroes become normal document flow. */
  .article-layout,.article-grid,.guide-hero-grid,.term-layout,.term-hero-grid,
  .hero-grid,.layout,.legal-shell,.enhance-split,.mini-dashboard,.feature-split,
  .rg-panel,.responsible-band,.two-card,.pros-cons{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .sidebox,.toc,.side-card,.article-layout>aside,.article-grid>aside,.layout>aside,
  .term-layout>aside,.legal-shell>aside{
    position:static!important;
    top:auto!important;
    max-height:none!important;
  }
  .toc{overflow:visible!important;}

  /* Keep images from using desktop crop heights. */
  .hero img,.hero-side img,.hero-visual img,.guide-hero-visual img,.feature-media img,
  .latam-feature img,.br-feature img,.ph-feature img,.au-feature img{
    max-height:none!important;
    height:auto!important;
  }

  /* Footer systems */
  .foot-top,.foot-grid,.footer .top{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;}

  /* Review layouts */
  .rhero-grid,.review-grid,.review-layout,.score-grid{grid-template-columns:minmax(0,1fr)!important;}
}

/* Phones / large phones */
@media (max-width:720px){
  html{scroll-padding-top:68px;}

  body{font-size:15.5px;line-height:1.68;}
  .wrap,.container{
    width:100%!important;
    max-width:none!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  /* Compact, collision-free header */
  header[data-global-header-build] .header-inner,
  header .header-inner,.site-header .inner{
    height:64px!important;
    min-height:64px!important;
    margin-left:12px!important;
    margin-right:12px!important;
    gap:8px!important;
  }
  header[data-global-header-build] .logo,.logo,.brand{gap:8px!important;min-width:0!important;}
  header[data-global-header-build] .logo .mark,.logo .mark,.brand-mark{
    width:32px!important;height:32px!important;min-width:32px!important;border-radius:7px!important;
  }
  header[data-global-header-build] .site-name,.site-name,.brand span{
    font-size:16px!important;line-height:1.05!important;white-space:nowrap!important;
  }
  header[data-global-header-build] .header-cta,.header-cta,.header-actions{gap:6px!important;margin-left:auto!important;}
  header[data-global-header-build] .country-label,header[data-global-header-build] .country-caret{display:none!important;}
  header[data-global-header-build] .burger,.burger,.nav-toggle{
    width:44px!important;height:44px!important;min-width:44px!important;display:grid!important;place-items:center!important;
  }
  header[data-global-header-build].nav-open nav.primary,
  header.nav-open nav.primary{
    top:64px!important;
    width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 68px)!important;
    border-radius:0 0 12px 12px!important;
  }
  header[data-global-header-build].nav-open a.nav-link,
  header.nav-open a.nav-link{min-height:44px!important;display:flex!important;align-items:center!important;}
  header[data-global-header-build].nav-open .dropdown a,
  header.nav-open .dropdown a{min-height:42px!important;display:flex!important;align-items:center!important;}
  header[data-global-header-build] .ticker-track,.ticker-track{padding:7px 0!important;gap:26px!important;}
  header[data-global-header-build] .ticker-item,.ticker-item{font-size:11px!important;}

  /* General rhythm */
  section,.section{padding-top:42px!important;padding-bottom:42px!important;}
  .hero,.page-hero,.term-hero,.guide-hero,.article-hero{padding-top:34px!important;padding-bottom:30px!important;}
  .section-head{margin-bottom:24px!important;}
  .breadcrumb,.crumb{font-size:12px!important;line-height:1.5!important;}

  /* Type scale: large desktop Oswald titles were too tall on phones. */
  h1,.hero h1,.hero-card h1,.guide-hero h1,.article-hero h1,.term-hero h1,.rhero h1{
    font-size:clamp(2rem,10vw,2.75rem)!important;
    line-height:1.04!important;
    letter-spacing:0!important;
    max-width:none!important;
  }
  h2,.article-main h2,.section-head h2,.section-title h2,.review-section h2{
    font-size:clamp(1.55rem,7vw,2rem)!important;
    line-height:1.12!important;
  }
  h3{line-height:1.2;}
  .dek,.lede,.lead,.subtitle,.term-dek{font-size:15px!important;line-height:1.65!important;}

  /* One-column content everywhere content density matters. */
  .grid-2,.grid-3,.grid-4,.cat-grid,.guide-grid,.trust-grid,
  .cluster-grid,.related-grid,.quick-grid,.article-quick,.enhance-cards,.sport-strip,
  .market-grid,.compare-cards,.support-grid,.offer-grid,.stat-grid,.rating-pills,
  .toc-grid,.hero-badges,.hero-score,.practice-grid,.trigger-grid,
  .bet-type-grid,.mistake-grid,.worked-grid,.glossary-grid,.formula-grid,.odds-rule-grid,
  .mx-market-grid,.mx-keyfacts,.mx-checklist,.pe-jump-grid,.pe-safe-grid,.pe-formula-grid,
  .pe-law-grid,.pe-sports-grid,.pe-expanded-cluster .cluster-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Compact tile grids stay useful instead of becoming extremely tall. */
  .state-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}

  /* Country hub / guide cards */
  .hero-side,.quick,.cluster-card,.related-card,.guide-card,.market-card,.stat-card,
  .mx-market-card,.mx-keyfact,.mx-sport-card,.card,.panel,.sidebox,.toc,.side-card,
  .context-box,.callout,.example,.data-panel,.takeaway,.quick-check,.guide-summary-card{
    max-width:100%!important;
  }
  .hero-side,.quick,.cluster-card,.related-card,.guide-card,.market-card,.stat-card,
  .mx-market-card,.mx-keyfact,.mx-sport-card{padding:16px!important;}
  .article-main .panel,.review-section,.term-main section,.legal-copy section{padding:18px!important;}

  /* Hero/action buttons should be easy to tap without becoming oversized everywhere. */
  .hero-actions,.cta-row,.action-row{gap:10px!important;}
  .hero-actions .btn,.hero-actions a.btn,.cta-row .btn,.cta-row a.btn{min-height:46px;}
  .btn,button,[role="button"],summary{min-height:44px;}

  /* Steps/checklists: keep number/icon beside text but make the text shrink correctly. */
  .check-item,.step,.step-row-new,.flow-step,.bullet-card,.callout{
    min-width:0!important;
  }
  .check-item,.step,.step-row-new,.flow-step{grid-template-columns:40px minmax(0,1fr)!important;gap:12px!important;}
  .check-item .num,.step .num,.step-row-new .step-num{width:40px!important;height:40px!important;}

  /* Tables: retain semantics/readability with deliberate horizontal scrolling. */
  .table-wrap,.enhance-table-wrap{border-radius:10px!important;margin-left:0!important;margin-right:0!important;}
  .table-wrap>table,.enhance-table-wrap>table,table.review-table,table.enhance-table{
    min-width:600px!important;
    font-size:12.5px!important;
  }
  th,td,table.review-table th,table.review-table td,table.enhance-table th,table.enhance-table td{
    padding:11px 12px!important;
  }
  table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap>table,.enhance-table-wrap>table{display:table!important;overflow:visible!important;}

  /* Full-line odds widgets are tables in disguise. */
  .full-line{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  .full-line-head,.full-line-row{min-width:580px!important;}

  /* Footer */
  .foot-top,.foot-grid,.footer .top{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;padding-top:32px!important;padding-bottom:30px!important;}
  .foot-brand p{max-width:none!important;}
  .foot-bottom,.footer .bottom,.foot-rg{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;
  }

  /* Glossary and legal page shells */
  .term-hero-art{margin-top:6px!important;}
  .related-strip{grid-template-columns:minmax(0,1fr)!important;}
  .legal-shell{gap:18px!important;}

  /* Review-specific legacy components */
  .rewards-flow{grid-template-columns:minmax(0,1fr)!important;}
  .rewards-flow .rr-arrow{min-height:34px!important;transform:rotate(90deg);}
  .market-grid,.compare-cards,.support-grid,.offer-grid{gap:12px!important;}
  .phone-frame{width:min(230px,84%)!important;}
  .score-card{max-width:none!important;}

  /* Keep embedded controls usable on iOS (16px prevents automatic zoom). */
  input,select,textarea{font-size:16px!important;max-width:100%;}
}

/* Small phones */
@media (max-width:520px){
  .wrap,.container{padding-left:14px!important;padding-right:14px!important;}
  header[data-global-header-build] .header-inner,header .header-inner,.site-header .inner{margin-left:10px!important;margin-right:10px!important;}
  header[data-global-header-build] .site-name,.site-name,.brand span{font-size:15px!important;}
  header[data-global-header-build] .country-dropdown>summary{width:40px!important;height:40px!important;min-height:40px!important;}
  header[data-global-header-build] .country-dropdown-menu{right:-48px!important;width:min(250px,calc(100vw - 20px))!important;}

  section,.section{padding-top:34px!important;padding-bottom:34px!important;}
  .hero,.page-hero,.term-hero,.guide-hero,.article-hero{padding-top:26px!important;padding-bottom:24px!important;}
  h1,.hero h1,.hero-card h1,.guide-hero h1,.article-hero h1,.term-hero h1,.rhero h1{font-size:clamp(1.85rem,10.5vw,2.45rem)!important;}
  h2,.article-main h2,.section-head h2,.review-section h2{font-size:clamp(1.45rem,7.2vw,1.8rem)!important;}

  .hero-card{padding:18px!important;border-radius:18px!important;}
  .card,.cluster-card,.related-card,.guide-card,.market-card,.stat-card,
  .mx-market-card,.mx-keyfact,.mx-sport-card,.sidebox,.toc,.side-card{border-radius:12px!important;}
  .article-main .panel,.review-section,.term-main section,.legal-copy section{padding:16px!important;border-radius:14px!important;}

  .hero-actions,.cta-row,.action-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%;}
  .hero-actions .btn,.hero-actions a.btn,.cta-row .btn,.cta-row a.btn,.action-row .btn,.action-row a.btn{width:100%!important;justify-content:center!important;}

  .state-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .table-wrap>table,.enhance-table-wrap>table,table.review-table,table.enhance-table{min-width:560px!important;}
  th,td,table.review-table th,table.review-table td{padding:10px!important;}

  .faq-q{gap:12px!important;align-items:flex-start!important;}
  .faq-q .plus{flex:0 0 auto;}
  .scroll-top-btn{right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;}

  /* Home scoreboard: prioritize matchup + one price instead of squeezing four columns. */
  .scoreboard .sb-row{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:12px!important;}
  .scoreboard .sb-row .sb-odds:nth-of-type(n+2){display:none!important;}
  .scoreboard-head,.scoreboard-foot{padding-left:12px!important;padding-right:12px!important;}
}

/* Very narrow phones */
@media (max-width:360px){
  .wrap,.container{padding-left:12px!important;padding-right:12px!important;}
  header[data-global-header-build] .site-name,.site-name,.brand span{font-size:14px!important;}
  header[data-global-header-build] .logo .mark,.logo .mark,.brand-mark{width:30px!important;height:30px!important;min-width:30px!important;}
  header[data-global-header-build] .country-dropdown>summary{width:38px!important;padding:0!important;}
  header[data-global-header-build] .burger,.burger,.nav-toggle{width:40px!important;height:40px!important;min-width:40px!important;}
  .eyebrow{font-size:10px!important;letter-spacing:.09em!important;}
  h1,.hero h1,.hero-card h1,.guide-hero h1,.article-hero h1,.term-hero h1,.rhero h1{font-size:1.9rem!important;}
  .table-wrap>table,.enhance-table-wrap>table,table.review-table,table.enhance-table{min-width:520px!important;}
}

/* Tier-3 guides contain a few legacy bare tables without a scrolling wrapper. */
@media (max-width:720px){
  .tier3-guide .article-body>table{
    display:table!important;
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    overflow:visible!important;
  }
  .tier3-guide .article-body>table th,
  .tier3-guide .article-body>table td{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}
@media (max-width:720px){
  .tier3-guide main>table{
    display:table!important;
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
    overflow:visible!important;
  }
  .tier3-guide main>table th,
  .tier3-guide main>table td{white-space:normal!important;overflow-wrap:anywhere!important;}
}


/* Homepage bet-type reference: true card layout on phones, no horizontal table scroll. */
@media (max-width:720px){
  .enhance-table-wrap.bet-type-reference{
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .bet-type-reference-table.enhance-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    border-collapse:separate!important;
  }
  .bet-type-reference-table thead{display:none!important;}
  .bet-type-reference-table tbody{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
  }
  .bet-type-reference-table tr{
    display:block!important;
    width:100%!important;
    padding:14px 14px 12px!important;
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    background:var(--ink-2)!important;
  }
  .bet-type-reference-table td,
  .bet-type-reference-table.enhance-table td{
    display:grid!important;
    grid-template-columns:minmax(100px,.72fr) minmax(0,1.35fr)!important;
    gap:10px!important;
    width:100%!important;
    padding:9px 0!important;
    border:0!important;
    border-bottom:1px solid var(--line)!important;
    color:var(--chalk-dim)!important;
    font-size:13.5px!important;
    line-height:1.5!important;
    align-items:start!important;
  }
  .bet-type-reference-table td::before{
    content:attr(data-label);
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;
    line-height:1.35;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--slate);
  }
  .bet-type-reference-table td:first-child,
  .bet-type-reference-table.enhance-table td:first-child{
    display:block!important;
    padding-top:0!important;
    padding-bottom:11px!important;
    margin-bottom:1px!important;
    font-size:16px!important;
    color:#fff!important;
  }
  .bet-type-reference-table td:first-child::before{display:none!important;}
  .bet-type-reference-table td:last-child,
  .bet-type-reference-table.enhance-table td:last-child{
    border-bottom:0!important;
    padding-bottom:0!important;
  }
}
@media (max-width:420px){
  .bet-type-reference-table td,
  .bet-type-reference-table.enhance-table td{
    display:block!important;
    padding:8px 0!important;
  }
  .bet-type-reference-table td::before{
    margin-bottom:3px;
  }
  .bet-type-reference-table td:first-child,
  .bet-type-reference-table.enhance-table td:first-child{
    padding-top:0!important;
  }
}

/* Country pages: convert dense comparison/reference tables into labelled cards on phones.
   Desktop/tablet table presentation is unchanged. */
@media (max-width:720px){
  .table-wrap:has(> table.country-responsive-table),
  .enhance-table-wrap:has(> table.country-responsive-table){
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  table.country-responsive-table,
  .table-wrap>table.country-responsive-table,
  .enhance-table-wrap>table.country-responsive-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    border-collapse:separate!important;
    border-spacing:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  table.country-responsive-table thead{display:none!important;}
  table.country-responsive-table tbody{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
  }
  table.country-responsive-table tbody>tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    margin:0!important;
    border:1px solid var(--line,rgba(255,255,255,.12))!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    box-shadow:none!important;
  }
  table.country-responsive-table tbody>tr:nth-child(even){background:rgba(255,255,255,.035)!important;}
  table.country-responsive-table td,
  .table-wrap>table.country-responsive-table td,
  .enhance-table-wrap>table.country-responsive-table td{
    display:grid!important;
    grid-template-columns:minmax(112px,.72fr) minmax(0,1.35fr)!important;
    gap:10px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    padding:9px 0!important;
    border:0!important;
    border-bottom:1px solid var(--line,rgba(255,255,255,.10))!important;
    background:transparent!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:13.5px!important;
    line-height:1.5!important;
    color:inherit!important;
    text-align:left!important;
  }
  table.country-responsive-table td::before{
    content:attr(data-label);
    display:block;
    min-width:0;
    font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10px;
    font-weight:700;
    line-height:1.35;
    letter-spacing:.055em;
    text-transform:uppercase;
    color:var(--slate,#8b98aa);
  }
  table.country-responsive-table td:first-child{
    padding-top:0!important;
    font-weight:700!important;
    color:var(--chalk,#f4f7fb)!important;
  }
  table.country-responsive-table td:last-child{
    padding-bottom:0!important;
    border-bottom:0!important;
  }
}
@media (max-width:430px){
  table.country-responsive-table tbody>tr{padding:13px!important;}
  table.country-responsive-table td,
  .table-wrap>table.country-responsive-table td,
  .enhance-table-wrap>table.country-responsive-table td{
    display:block!important;
    padding:8px 0!important;
  }
  table.country-responsive-table td::before{margin-bottom:3px;}
  table.country-responsive-table td:first-child{padding-top:0!important;}
}