/* ===== Mobile and tablet layer: nothing here applies above 1024px ===== */
.m-topbar, .m-backdrop, .m-drawer-close{display:none;}
@media (max-width:1024px){
  html{scroll-padding-top:68px;}
  body{--sbw:0px;}
  .m-topbar{display:flex; position:sticky; top:0; z-index:90; align-items:center; gap:6px; height:56px; padding:0 8px 0 6px; background:var(--color-navy-base); border-bottom:1px solid rgba(225,230,236,.14);}
  .m-icon-btn{appearance:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:var(--radius-6); background:transparent; color:#E1E6EC; cursor:pointer; flex:0 0 auto;}
  .m-icon-btn:active{background:rgba(225,230,236,.1);}
  .m-icon-btn svg{width:22px; height:22px;}
  .m-logo{display:inline-flex; align-items:center; gap:9px; margin-right:auto; color:#FFFFFF; font-family:var(--font-body); font-weight:800; font-size:15px; letter-spacing:.8px;}
  .m-logo svg{width:22px; height:22px;}
  .m-backdrop{display:block; position:fixed; inset:0; z-index:180; background:rgba(2,19,41,.6); opacity:0; pointer-events:none; transition:opacity .22s ease;}
  body.m-nav-open .m-backdrop{opacity:1; pointer-events:auto;}
  body.m-nav-open{overflow:hidden;}
  .site-sidebar, .site-sidebar.collapsed{position:fixed; top:0; left:0; bottom:0; z-index:200; width:min(86vw,320px); height:100vh; height:100dvh; padding:20px 18px; transform:translateX(-104%); transition:transform .24s ease; box-shadow:none; visibility:hidden;}
  body.m-nav-open .site-sidebar{transform:none; box-shadow:12px 0 32px rgba(2,19,41,.35); visibility:visible;}
  .site-sidebar .sidebar-toggle{display:none;}
  .m-drawer-close{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:auto; border:0; border-radius:var(--radius-6); background:transparent; color:#E1E6EC; cursor:pointer;}
  .m-drawer-close svg{width:20px; height:20px;}
  .m-drawer-close:active{background:rgba(225,230,236,.1);}
  .site-shell{display:block; min-height:0;}
  .quick-cta-bar, :where([data-page="home"]) .quick-cta-bar{top:56px;}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .site-sidebar, .m-backdrop{transition:none;}
}

/* ---- Home: fixture list becomes stacked match cards on phones and small tablets ---- */
@media (max-width:900px){
  main .fixture-module .data-table-wrap{overflow:visible;}
  main .fixture-module .data-table{display:block; min-width:0; width:100%; table-layout:auto;}
  main .fixture-module .data-table thead{display:none;}
  main .fixture-module .data-table tbody{display:block;}
  main .fixture-module .data-table tbody tr.fixture-row{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"meta meta meta" "home score away" "league league signal" "actions actions actions"; align-items:center; column-gap:10px; row-gap:10px; padding:12px 14px; margin:0 0 10px; background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle); border-radius:var(--radius-container);}
  main .fixture-module .data-table tbody tr.fixture-row > td{display:block; padding:0; border:0; min-width:0; width:auto; white-space:normal;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(1){grid-area:meta;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(2){grid-area:home;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(3){grid-area:score; text-align:center;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(4){grid-area:away;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(5){grid-area:league; align-self:center;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(6){grid-area:signal; justify-self:end; text-align:right;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(6):empty{display:none;}
  main .fixture-module .data-table tbody tr.fixture-row > td:nth-child(7){grid-area:actions;}
  main .fixture-module .data-table tbody tr.fixture-row .dt-team{white-space:normal; flex-wrap:nowrap; line-height:1.25; gap:7px; font-size:13px;}
  main .fixture-module .data-table tbody tr.fixture-row .dt-team.right{justify-content:flex-end;}
  main .fixture-module .data-table tbody tr.fixture-row .dt-score .fx-dash{display:none;}
  main .fixture-module .data-table tbody tr.fixture-row .fx-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%;}
  main .fixture-module .data-table tbody tr.fixture-row .fx-actions:has(> :only-child){grid-template-columns:1fr;}
  main .fixture-module .data-table tbody tr.fixture-row .fx-act{width:100%; justify-content:center; min-height:40px;}
  main .fixture-module .data-table tbody tr.fx-stats-row:not([hidden]){display:block; margin:-4px 0 10px;}
  main .fixture-module .data-table tbody tr.fx-stats-row > td{display:block; padding:0; border:0;}
  main .fixture-module .fx-stats-panel{margin-left:0; width:100%; padding:4px 12px;}
}
@media (max-width:640px){ .edge-grid{grid-template-columns:1fr;} }

/* ---- Global: scrolling data tables, buttons, tab bars ---- */
@media (max-width:900px){
  .btn{white-space:nowrap;}
  .data-table-wrap{-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
  .data-table-wrap .data-table{table-layout:auto !important; width:max-content; min-width:100%;}
  .data-table-wrap .data-table th[style*="width"]{width:auto !important;}
  .data-table-wrap .data-table col{width:auto !important;}
  .data-table-wrap .data-table :is(th,td):first-child{position:sticky; left:0; z-index:2; background:var(--color-bg-elevated); box-shadow:1px 0 0 var(--color-border-subtle);}
  .data-table-wrap .data-table :is(th,td){padding-left:12px; padding-right:12px;}
}
@media (max-width:1024px){
  main[data-page="match"] .md-tabbar{flex-direction:column; align-items:stretch; gap:0;}
  
  main[data-page="match"] .md-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin:0 -16px; padding:0 16px; gap:2px;}
  main[data-page="match"] .md-tabs::-webkit-scrollbar, main[data-page="club"] .tm-tabs::-webkit-scrollbar, :is(main[data-page="league"],main[data-page="predictions"],main[data-page="predhist"],main[data-page="h2h"],main[data-page="blog"],main[data-page="blogpost"],main[data-page="profile"]) .lg-tabs::-webkit-scrollbar{display:none;}
  main[data-page="match"] .md-tab, main[data-page="club"] .tm-tab, :is(main[data-page="league"],main[data-page="predictions"],main[data-page="predhist"],main[data-page="h2h"],main[data-page="blog"],main[data-page="blogpost"],main[data-page="profile"]) .lg-tab{flex:0 0 auto; white-space:nowrap;}
  main[data-page="club"] .tm-tabs > .tm-tab:first-child, :is(main[data-page="league"],main[data-page="predictions"],main[data-page="predhist"],main[data-page="h2h"],main[data-page="blog"],main[data-page="blogpost"],main[data-page="profile"]) .lg-tabs > .lg-tab:first-child, main[data-page="match"] .md-tabs > .md-tab:first-child{margin-left:0;}
}
/* ---- Match Detail scoreboard ---- */
@media (max-width:720px){
  main[data-page="match"] .md-scoreboard{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:10px; row-gap:6px; align-items:start; justify-content:stretch;}
  main[data-page="match"] .md-mid{display:contents;}
  main[data-page="match"] .md-scoreboard > .md-side:nth-child(1){grid-column:1; grid-row:1 / span 3; max-width:none; gap:8px;}
  main[data-page="match"] .md-scoreboard > .md-side:nth-child(3){grid-column:3; grid-row:1 / span 3; max-width:none; gap:8px;}
  main[data-page="match"] .md-status-pill{grid-column:2; grid-row:1; justify-self:center;}
  main[data-page="match"] .md-score-big{grid-column:2; grid-row:2; align-self:center; font-size:42px; gap:6px;}
  main[data-page="match"] .md-score-big .md-dash{width:16px; height:5px;}
  main[data-page="match"] .md-score-big .md-score-tick{display:none;}
  main[data-page="match"] .md-reticle{display:none;}
  main[data-page="match"] .md-ht{grid-column:2; grid-row:3; justify-self:center; text-align:center;}
  main[data-page="match"] .md-venue{grid-column:1 / -1; grid-row:4; text-align:center; margin-top:4px;}
  main[data-page="match"] .md-side-crest{width:48px; height:48px;}
  main[data-page="match"] .md-side-name{font-size:13.5px; line-height:1.15; letter-spacing:0; overflow-wrap:break-word;}
  main[data-page="match"] .md-scorer{font-size:11.5px; flex-wrap:wrap; justify-content:center; text-align:center;}
}
/* ---- Home and My Theories: watched and upcoming match lists as cards ---- */
@media (max-width:900px){
  main .watch-table .data-table-wrap, main .up-table .data-table-wrap{overflow:visible; background-image:none;}
  main .watch-table .data-table, main .up-table .data-table{display:block; width:100%; min-width:0; table-layout:auto !important;}
  main .watch-table .data-table thead, main .up-table .data-table thead{display:none;}
  main .watch-table .data-table tbody, main .up-table .data-table tbody{display:block;}
  main .watch-table .data-table tbody tr, main .up-table .data-table tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"meta meta hit" "home score away" "league league league" "theory theory theory"; align-items:center; column-gap:10px; row-gap:8px; padding:12px 14px; margin:0 0 10px; background:var(--color-bg-elevated); border:1px solid var(--color-border-subtle); border-radius:var(--radius-container);}
  main .watch-table .data-table tbody tr > td, main .up-table .data-table tbody tr > td{display:block; padding:0; border:0; min-width:0; white-space:normal; position:static; background:none; box-shadow:none;}
  main .watch-table .data-table tbody tr > td:nth-child(1), main .up-table .data-table tbody tr > td:nth-child(1){grid-area:meta;}
  main .watch-table .data-table tbody tr > td:nth-child(2), main .up-table .data-table tbody tr > td:nth-child(2){grid-area:home;}
  main .watch-table .data-table tbody tr > td:nth-child(3), main .up-table .data-table tbody tr > td:nth-child(3){grid-area:score; text-align:center;}
  main .watch-table .data-table tbody tr > td:nth-child(4), main .up-table .data-table tbody tr > td:nth-child(4){grid-area:away;}
  main .watch-table .data-table tbody tr > td:nth-child(5), main .up-table .data-table tbody tr > td:nth-child(5){grid-area:league;}
  main .watch-table .data-table tbody tr > td:nth-child(6), main .up-table .data-table tbody tr > td:nth-child(6){grid-area:theory; white-space:normal; line-height:1.4;}
  main .watch-table .data-table tbody tr > td:nth-child(7), main .up-table .data-table tbody tr > td:nth-child(7){grid-area:hit; justify-self:end;}
  main .watch-table .dt-team, main .up-table .dt-team{white-space:normal; line-height:1.25; gap:7px; font-size:13px;}
  main .watch-table .dt-score .fx-dash, main .up-table .dt-score .fx-dash{display:none;}
}

/* ---- My Theories builder ---- */
@media (max-width:760px){
  main[data-page="theories"] .tk-zone{padding-right:0;}
  main[data-page="theories"] .tk-trash{display:none;}
  main[data-page="theories"] .tk{max-width:100%; flex-wrap:nowrap; align-items:flex-start;}
  main[data-page="theories"] .tk-text{min-width:0;}
  main[data-page="theories"] .tk-add{white-space:nowrap;}
  main[data-page="theories"] .tk-empty{padding-bottom:10px;}
  main[data-page="theories"] .mt-name-cell{min-width:132px; max-width:132px;}
}

@media (max-width:640px){
  main .builder-card{padding:24px 18px 26px;}
  main[data-page="theories"] .mt-name-row{flex-direction:column; align-items:stretch;}
  main[data-page="theories"] .mt-name-row .btn{width:100%; justify-content:center;}
  main[data-page="theories"] .b-cta-row, main[data-page="home"] .b-cta-row{flex-direction:column; align-items:stretch;}
  main .b-cta-buttons{flex-wrap:wrap;}
  main .b-cta-buttons .btn{flex:1 1 auto; justify-content:center;}
}

/* ---- scroll cue: edge fade on any horizontally scrollable strip (class set by mobile.js) ---- */
@media (max-width:1024px){
  .m-fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);}
  .m-fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);}
  .m-fade-l.m-fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);}
}
/* ---- Match lineups table, club season/league rows ---- */
@media (max-width:760px){
  main[data-page="match"] .md-lineup-table-col{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  main[data-page="match"] .md-lineup-table-col .data-table{min-width:500px;}
  main .pf-chips{flex-wrap:wrap;}
}

/* ---- Popovers and pickers ---- */
@media (max-width:760px){
  .fx-cal-popover{left:auto; right:0; width:min(300px, calc(100vw - 32px));}
}
@media (max-width:640px){
  main[data-page="theories"] .pk{position:fixed !important; left:10px !important; right:10px !important; top:auto !important; bottom:10px !important; width:auto !important; max-width:none !important; transform:none !important; max-height:84vh; z-index:150; flex-direction:column;}
  main[data-page="theories"] .pk:not([hidden]){display:flex;}
  main[data-page="theories"] .pk-body{display:flex; min-height:0; flex:1 1 auto; overflow:hidden;}
  main[data-page="theories"] .pk-topics{width:136px; max-height:none; overflow-y:auto;}
  main[data-page="theories"] .pk-list{max-height:none; overflow-y:auto; min-height:180px;}
  main[data-page="theories"] .pk-item{padding:10px 14px; min-height:42px;}
  main[data-page="theories"] .pk-topic{padding:10px 9px;}
  main[data-page="theories"] .pk-detail{min-height:0; max-height:112px; overflow-y:auto;}
  main[data-page="theories"] .pk-keys{display:none;}
}

/* scroll containers must contain their absolutely positioned (sr-only) children, or the page grows sideways */
@media (max-width:1024px){
  .data-table-wrap, .tm-scroll, .lg-tw, .pr-h2h-table, .pf-chart, .md-lineup-table-col, .md-tabs, .tm-tabs, .lg-tabs{position:relative;}
}

@media (max-width:900px){
  main .fixture-module .data-table-wrap .data-table tbody tr > td:first-child, main .watch-table .data-table-wrap .data-table tbody tr > td:first-child, main .up-table .data-table-wrap .data-table tbody tr > td:first-child{position:static; background:none; box-shadow:none;}
}

@media (max-width:1024px){
  .dark-band{overflow-x:clip;}
}

@media (min-width:761px) and (max-width:1024px){
  :is(main[data-page="league"],main[data-page="predictions"],main[data-page="predhist"],main[data-page="h2h"],main[data-page="blog"],main[data-page="blogpost"],main[data-page="profile"]) .lg-pw-h, :is(main[data-page="league"],main[data-page="predictions"],main[data-page="predhist"],main[data-page="h2h"],main[data-page="blog"],main[data-page="blogpost"],main[data-page="profile"]) .lg-pw-r{grid-template-columns:40px minmax(120px,190px) minmax(140px,1fr) 64px 64px; gap:0 14px;}
}

@media (max-width:900px){
  main .mt-table .data-table-wrap .data-table :is(th,td):first-child{background:var(--color-bg-canvas);}
}

@media (min-width:721px) and (max-width:1024px){
  main[data-page="match"] .md-scoreboard{gap:20px;}
  main[data-page="match"] .md-side{max-width:230px;}
  main[data-page="match"] .md-side-name{font-size:24px; overflow-wrap:break-word;}
  main[data-page="match"] .md-score-big{font-size:72px; gap:16px;}
}

@media (max-width:1024px){
  main[data-page="match"] .ts-glance{row-gap:36px;}
}

/* iOS zooms the page when a focused field is under 16px */
@media (max-width:640px){
  main input[type="text"], main input[type="search"], main input[type="email"], main input[type="number"], main select, main textarea, .sidebar-search-input{font-size:16px;}
}

@media (max-width:720px){
  main[data-page="match"] .md-tl-row{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr); gap:8px;}
  main[data-page="match"] .md-tl-side{min-width:0; font-size:12px; gap:6px;}
  main[data-page="match"] .md-tl-player{min-width:0; overflow-wrap:anywhere;}
}
@media (max-width:640px){
  main[data-page="home"] .hero-slider .hero-h1{font-size:42px !important; line-height:.98;}
}
/* ===== end mobile layer ===== */

/* MOBILE-CSS-END */