/* Stats2Pitch v1.11.2 — explicit desktop/mobile board architecture.
 * Desktop is a wide dashboard. Mobile is the compact app-card experience.
 * Tablet/foldable is a controlled bridge between the two, not a stretched phone UI.
 */
:root{
  --s2p-neon:#9cff00;
  --s2p-neon-2:#82e900;
  --s2p-bg:#02070b;
  --s2p-panel:#07121c;
  --s2p-panel-2:#0a1722;
  --s2p-line:#203645;
  --s2p-text:#f6fbff;
  --s2p-muted:#93a8b8;
}

html.s2p-v111 #s2p-card-board,
html.s2p-v111 #s2p-card-board *{box-sizing:border-box}
html.s2p-v111 #s2p-card-board{color:var(--s2p-text)}
html.s2p-v111 .s2p-match-card,
html.s2p-v111 .s2p-main-tabs,
html.s2p-v111 .s2p-mobile-nav,
html.s2p-v111 .s2p-desktop-nav{font-family:inherit}
html.s2p-v111 .s2p-team-row strong,
html.s2p-v111 .s2p-prediction,
html.s2p-v111 .s2p-competition strong{overflow-wrap:anywhere}
html.s2p-v111 .s2p-team-row img,
html.s2p-v111 .s2p-competition img{display:block}

/* Desktop-only navigation injected by board-responsive-v1.11.2.js. */
.s2p-desktop-nav{display:none}

/* =========================
   DESKTOP: 1024px and wider
   ========================= */
@media(min-width:1024px){
  html.s2p-v111 .app-shell{
    width:min(1480px,100%)!important;
    padding:26px 30px 42px!important;
  }
  html.s2p-v111 #s2p-card-board{
    max-width:1400px!important;
    margin:0 auto!important;
  }

  .s2p-new-head{
    min-height:86px!important;
    grid-template-columns:58px 1fr 58px!important;
    margin:0 0 14px!important;
  }
  .s2p-brand-lockup{
    height:48px!important;
    max-width:390px!important;
  }
  .s2p-brand-center p{font-size:15px!important}
  .s2p-icon-btn{width:50px!important;height:50px!important;font-size:27px!important}

  .s2p-main-tabs{
    width:min(820px,100%)!important;
    margin:0 auto 14px!important;
    min-height:60px!important;
    border-radius:19px!important;
  }
  .s2p-main-tab{
    min-height:59px!important;
    font-size:15px!important;
    padding:10px 16px!important;
  }
  .s2p-main-tab .count{display:inline-grid!important}

  .s2p-desktop-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    margin:0 auto 22px;
    padding:7px;
    border:1px solid #213643;
    border-radius:16px;
    background:linear-gradient(180deg,#08111a,#050c12);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  .s2p-desktop-nav button{
    border:1px solid transparent!important;
    background:transparent!important;
    color:#9fb0bd!important;
    border-radius:11px!important;
    min-height:38px!important;
    padding:8px 14px!important;
    font-size:13px!important;
    font-weight:800!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    transform:none!important;
  }
  .s2p-desktop-nav button:hover{
    color:#eef5f9!important;
    background:#0b1721!important;
    border-color:#294553!important;
  }
  .s2p-desktop-nav button.active{
    color:#071000!important;
    background:linear-gradient(135deg,#b9ff18,#8cec00)!important;
    border-color:#9cff00!important;
  }

  html.s2p-v111 .s2p-board-tools{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    margin:0 0 12px!important;
    padding:0 2px!important;
  }
  .s2p-board-tools h2{font-size:22px!important}
  .s2p-board-tools span{font-size:13px!important}
  .s2p-mini-refresh{display:inline-flex!important}

  .s2p-card-list{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }
  .s2p-match-card{
    grid-template-columns:minmax(190px,.85fr) minmax(310px,1.35fr) minmax(180px,.8fr) minmax(150px,.62fr) minmax(130px,.54fr)!important;
    grid-template-areas:
      "competition teams prediction kickoff details"
      "competition teams odds kickoff details"!important;
    column-gap:22px!important;
    row-gap:6px!important;
    min-height:132px!important;
    padding:16px 20px!important;
    border-radius:18px!important;
    align-items:center!important;
    background:linear-gradient(145deg,#081520,#050d14)!important;
  }
  .s2p-card-main,.s2p-card-side{display:contents!important}
  .s2p-competition{
    grid-area:competition!important;
    align-self:center!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:auto auto 1fr!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:2px!important;
    min-width:0!important;
  }
  .s2p-competition img{grid-row:1/3;width:26px!important;height:26px!important}
  .s2p-competition .league-badge{grid-row:1/3;width:28px!important;height:28px!important}
  .s2p-competition strong{
    grid-column:3!important;
    font-size:13px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  .s2p-competition small{
    grid-column:3!important;
    display:block!important;
    font-size:11px!important;
  }
  .s2p-team-stack{grid-area:teams!important;align-self:center!important;gap:4px!important}
  .s2p-team-row img,.s2p-team-fallback{width:34px!important;height:34px!important}
  .s2p-team-row strong{font-size:16px!important;line-height:1.2!important;white-space:normal!important}
  .s2p-vs{padding-left:44px!important;font-size:10px!important}
  .s2p-prediction{
    grid-area:prediction!important;
    align-self:end!important;
    text-align:center!important;
    padding:0 0 3px!important;
    font-size:16px!important;
    line-height:1.2!important;
  }
  .s2p-odd-wrap{grid-area:odds!important;align-self:start!important;justify-content:center!important}
  .s2p-odd-pill{min-width:108px!important;font-size:22px!important;padding:8px 14px!important;border-radius:15px!important}
  .s2p-kickoff{
    grid-area:kickoff!important;
    align-self:center!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  .s2p-kickoff b{display:block!important;margin:0!important;font-size:14px!important}
  .s2p-view-details{
    grid-area:details!important;
    align-self:center!important;
    justify-self:end!important;
    width:128px!important;
    min-height:40px!important;
    font-size:12px!important;
  }

  /* Desktop must never look like the phone app dock. */
  .s2p-mobile-nav{display:none!important}
  html.s2p-v111 .app-shell{padding-bottom:42px!important}
}

/* =========================
   TABLET / FOLD: 721–1023px
   ========================= */
@media(min-width:721px) and (max-width:1023px){
  html.s2p-v111 .app-shell{
    width:100%!important;
    padding:18px 16px calc(104px + env(safe-area-inset-bottom,0px))!important;
  }
  html.s2p-v111 #s2p-card-board{max-width:920px!important;margin:0 auto!important}
  .s2p-new-head{min-height:72px!important}
  .s2p-brand-lockup{height:40px!important;max-width:320px!important}
  .s2p-main-tabs{margin-bottom:16px!important}
  .s2p-card-list{grid-template-columns:1fr!important;gap:12px!important}
  .s2p-match-card{
    grid-template-columns:minmax(0,1.25fr) minmax(150px,.72fr) minmax(122px,.58fr)!important;
    grid-template-areas:
      "competition competition kickoff"
      "teams prediction details"
      "teams odds details"!important;
    min-height:164px!important;
    padding:16px!important;
    border-radius:20px!important;
  }
  .s2p-team-row strong{font-size:16px!important}
  .s2p-prediction{font-size:16px!important}
  .s2p-odd-pill{font-size:22px!important}
  .s2p-mobile-nav{display:grid!important}
  .s2p-desktop-nav{display:none!important}
}

/* =========================
   MOBILE: 720px and narrower
   ========================= */
@media(max-width:720px){
  html.s2p-v111 .app-shell{
    width:100%!important;
    padding:10px 9px calc(98px + env(safe-area-inset-bottom,0px))!important;
  }
  html.s2p-v111 #s2p-card-board{max-width:none!important;margin:0!important}
  .s2p-desktop-nav{display:none!important}
  html.s2p-v111 .s2p-board-tools{display:none!important}

  .s2p-new-head{
    min-height:62px!important;
    margin-bottom:9px!important;
    grid-template-columns:40px 1fr 40px!important;
  }
  .s2p-brand-lockup{height:32px!important;max-width:225px!important}
  .s2p-brand-center p{font-size:11px!important;margin-top:1px!important}
  .s2p-icon-btn{width:38px!important;height:38px!important;font-size:21px!important}

  .s2p-main-tabs{
    margin:0 0 12px!important;
    border-radius:16px!important;
    grid-template-columns:repeat(4,minmax(96px,1fr))!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .s2p-main-tabs::-webkit-scrollbar{display:none}
  .s2p-main-tab{
    scroll-snap-align:start;
    min-height:50px!important;
    font-size:12px!important;
    padding:7px 9px!important;
    gap:6px!important;
  }
  .s2p-main-tab .count{display:none!important}

  .s2p-card-list{grid-template-columns:1fr!important;gap:10px!important}
  .s2p-match-card{
    grid-template-columns:minmax(0,1fr) 104px!important;
    grid-template-areas:
      "competition kickoff"
      "teams odds"
      "prediction details"!important;
    min-height:158px!important;
    padding:12px!important;
    border-radius:17px!important;
    column-gap:9px!important;
    row-gap:8px!important;
    background:linear-gradient(145deg,#08141e,#050c13)!important;
  }
  .s2p-card-main,.s2p-card-side{display:contents!important}
  .s2p-competition{grid-area:competition!important;min-width:0!important;margin:0!important;gap:6px!important}
  .s2p-competition img{width:18px!important;height:18px!important}
  .s2p-competition .league-badge{width:20px!important;height:20px!important}
  .s2p-competition strong{
    font-size:11px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .s2p-competition small{display:none!important}
  .s2p-team-stack{grid-area:teams!important;align-self:center!important;gap:4px!important;min-width:0!important}
  .s2p-team-row{gap:7px!important;min-width:0!important}
  .s2p-team-row img,.s2p-team-fallback{width:30px!important;height:30px!important}
  .s2p-team-row strong{
    font-size:14px!important;
    line-height:1.18!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .s2p-vs{padding-left:37px!important;font-size:9px!important}
  .s2p-prediction{
    grid-area:prediction!important;
    align-self:center!important;
    text-align:left!important;
    font-size:14px!important;
    line-height:1.2!important;
    padding:0!important;
    min-width:0!important;
  }
  .s2p-kickoff{
    grid-area:kickoff!important;
    align-self:start!important;
    text-align:right!important;
    font-size:10px!important;
    line-height:1.25!important;
    white-space:normal!important;
  }
  .s2p-kickoff b{display:block!important;margin:0!important;font-size:11px!important}
  .s2p-odd-wrap{grid-area:odds!important;justify-content:flex-end!important;align-self:center!important}
  .s2p-odd-pill{min-width:82px!important;font-size:19px!important;padding:7px 10px!important;border-radius:13px!important}
  .s2p-view-details{
    grid-area:details!important;
    justify-self:end!important;
    align-self:center!important;
    width:98px!important;
    min-height:35px!important;
    padding:6px 8px!important;
    font-size:11px!important;
    border-radius:12px!important;
  }
  .s2p-mobile-nav{
    display:grid!important;
    width:calc(100vw - 10px)!important;
    bottom:max(5px,env(safe-area-inset-bottom,0px))!important;
    min-height:68px!important;
    padding:6px!important;
    border-radius:17px!important;
  }
  .s2p-nav-btn{min-height:53px!important;font-size:10px!important;padding:4px!important}
  .s2p-nav-btn .ico{font-size:19px!important}
}

/* Narrow foldable cover screens. */
@media(max-width:360px){
  html.s2p-v111 .app-shell{padding-inline:6px!important}
  .s2p-brand-lockup{height:28px!important;max-width:192px!important}
  .s2p-main-tab{font-size:11px!important;min-height:47px!important}
  .s2p-match-card{
    grid-template-columns:minmax(0,1fr) 92px!important;
    padding:10px!important;
    column-gap:7px!important;
  }
  .s2p-team-row img,.s2p-team-fallback{width:27px!important;height:27px!important}
  .s2p-team-row strong{font-size:13px!important}
  .s2p-vs{padding-left:34px!important}
  .s2p-prediction{font-size:13px!important}
  .s2p-odd-pill{min-width:74px!important;font-size:18px!important}
  .s2p-view-details{width:88px!important;font-size:10px!important}
  .s2p-nav-btn{font-size:9px!important}
}

/* Keep refresh presentation authoritative on every device. */
html.s2p-refresh-active #s2p-card-board{visibility:hidden!important}