/* BritBall EPL widget v3 - iOS Safari-safe team layout, stable scroll insets */
#bb-epl-widget{--bbw-red:var(--brand-red,#cc0000);--bbw-card:var(--bg-card,#fff);--bbw-fg:var(--text-main,#111);--bbw-muted:var(--text-muted,#666);--bbw-border:var(--border-color,#e9e9e9);--bbw-hover:var(--bg-hover,#f6f6f6);font-family:var(--font-main,Roboto,Arial,sans-serif);color:var(--bbw-fg);max-width:100%;min-width:0;margin:18px 0 26px}
#bb-epl-widget *,#bb-epl-widget *::before,#bb-epl-widget *::after{box-sizing:border-box}
#bb-epl-widget .bbw-frame{min-width:0;background:var(--bbw-card);border:1px solid var(--bbw-border);border-radius:12px;padding:15px 0 12px;box-shadow:0 2px 10px rgba(0,0,0,.035)}
#bb-epl-widget .bbw-top{padding:0 14px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
#bb-epl-widget .bbw-heading{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:850;line-height:1.3;margin:0;color:var(--bbw-fg)}
#bb-epl-widget .bbw-accent{background:var(--bbw-red);width:4px;height:20px;border-radius:4px;flex:0 0 4px}
#bb-epl-widget .bbw-switch{display:flex;gap:5px;min-width:0;max-width:100%;overflow-x:auto}
#bb-epl-widget .bbw-tab{border:1px solid var(--bbw-border);background:transparent;color:var(--bbw-muted);font-family:inherit;font-size:12px;font-weight:700;line-height:1.3;padding:7px 10px;white-space:nowrap;border-radius:999px;cursor:pointer}
#bb-epl-widget .bbw-tab[aria-selected=true]{color:#fff;background:var(--bbw-red);border-color:var(--bbw-red)}
#bb-epl-widget .bbw-tab:focus-visible,#bb-epl-widget .bbw-arrow:focus-visible,#bb-epl-widget .bbw-item:focus-visible{outline:2px solid var(--bbw-red);outline-offset:2px}
#bb-epl-widget .bbw-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:14px;scroll-behavior:smooth;overscroll-behavior-x:contain;padding:3px 14px 12px;scrollbar-width:none;-ms-overflow-style:none}
/* Scrollable track with hidden browser scrollbar. */
#bb-epl-widget .bbw-row::-webkit-scrollbar{display:none;width:0;height:0}
@media (hover:hover) and (pointer:fine){
  #bb-epl-widget .bbw-row{cursor:grab;user-select:none;-webkit-user-select:none}
  #bb-epl-widget .bbw-row .bbw-item{cursor:grab}
  #bb-epl-widget .bbw-row.bbw-dragging,
  #bb-epl-widget .bbw-row.bbw-dragging .bbw-item{cursor:grabbing!important}
  #bb-epl-widget .bbw-row.bbw-dragging{scroll-snap-type:none;scroll-behavior:auto}
  #bb-epl-widget .bbw-row.bbw-dragging .bbw-item:hover{transform:none}
}
#bb-epl-widget .bbw-item{flex:0 0 min(76vw,218px);width:min(76vw,218px);min-width:0;scroll-snap-align:start;border:1px solid var(--bbw-border);border-radius:10px;padding:12px 10px 10px;background:var(--bbw-card);color:var(--bbw-fg);text-decoration:none!important;display:flex;flex-direction:column;gap:8px;min-height:145px;transition:border-color .18s,transform .18s}
#bb-epl-widget .bbw-item:hover{border-color:var(--bbw-red);transform:translateY(-2px)}
#bb-epl-widget .bbw-meta{display:flex;justify-content:space-between;align-items:center;gap:5px;color:var(--bbw-muted);font-size:11px;line-height:1.35}
#bb-epl-widget .bbw-live{color:#b30000;font-weight:800}
#bb-epl-widget .bbw-live::before{content:'';display:inline-block;width:6px;height:6px;margin-right:4px;background:#e31e24;border-radius:50%;vertical-align:middle}
#bb-epl-widget .bbw-teams{display:flex;align-items:center;justify-content:space-between;gap:3px;width:100%;min-height:82px;flex:1 0 auto}
#bb-epl-widget .bbw-team{text-align:center;min-width:0;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#bb-epl-widget .bbw-logo{width:35px;height:35px;flex:0 0 35px;object-fit:contain;display:block}
#bb-epl-widget .bbw-logo-empty{width:35px;height:35px;border-radius:50%;background:var(--bbw-hover)}
#bb-epl-widget .bbw-team-name{font-size:11.5px;font-weight:750;line-height:1.3;display:block;overflow:hidden;max-height:31px;min-height:30px;width:100%;overflow-wrap:break-word}
#bb-epl-widget .bbw-score{font-size:18px;font-weight:850;flex:0 0 49px;text-align:center;white-space:nowrap;letter-spacing:-.4px;line-height:1.2;font-variant-numeric:tabular-nums}
#bb-epl-widget .bbw-score.bbw-score-live{color:#e31e24}
#bb-epl-widget .bbw-score-time{font-size:12px;letter-spacing:0}
#bb-epl-widget .bbw-footer{display:flex;justify-content:flex-end;align-items:center;padding:0 14px;gap:10px}
#bb-epl-widget .bbw-footnote{font-size:10px;color:var(--bbw-muted);line-height:1.35}
#bb-epl-widget .bbw-nav{display:flex;gap:6px}
#bb-epl-widget .bbw-arrow{height:28px;width:29px;border:1px solid var(--bbw-border);background:var(--bbw-card);color:var(--bbw-fg);border-radius:7px;cursor:pointer;font-size:18px;line-height:1}
#bb-epl-widget .bbw-arrow:disabled{opacity:.35;cursor:default}
#bb-epl-widget .bbw-empty{font-size:13px;color:var(--bbw-muted);padding:12px 14px}
#bb-epl-widget .bbw-fallback{font-size:12px;color:var(--bbw-muted);margin:0;padding:0 14px}
#bb-epl-widget .bbw-fallback a{color:var(--bbw-red)!important}
@media(min-width:600px){#bb-epl-widget .bbw-item{flex-basis:216px;width:216px}#bb-epl-widget .bbw-heading{font-size:18px}#bb-epl-widget .bbw-frame{padding-top:16px}}
@media(prefers-reduced-motion:reduce){#bb-epl-widget .bbw-item{transition:none}#bb-epl-widget .bbw-row{scroll-behavior:auto}}

/* iOS Safari: prevent a WebKit grid/line-clamp painting issue in horizontal cards.
   Keep the team row as a simple, explicitly sized flex row on all touch screens. */
@media (hover:none), (pointer:coarse){
  #bb-epl-widget .bbw-row{scroll-snap-type:x proximity;touch-action:pan-x pan-y;}
  #bb-epl-widget .bbw-item{height:145px;min-height:145px;transform:none!important;}
  #bb-epl-widget .bbw-teams{display:flex!important;min-height:85px!important;visibility:visible!important;opacity:1!important;}
  #bb-epl-widget .bbw-team,#bb-epl-widget .bbw-score,#bb-epl-widget .bbw-logo,#bb-epl-widget .bbw-team-name{visibility:visible!important;opacity:1!important;}
}

/* STEP 21.3: Compact rows. Change DEFAULT_LAYOUT in JS to classic to restore old cards. */
#bb-epl-widget .bbw-frame-compact{padding:12px 0 9px;}
#bb-epl-widget .bbw-frame-compact .bbw-top{padding-bottom:10px;}
#bb-epl-widget .bbw-compact-list{display:grid;grid-template-columns:minmax(0,1fr);padding:0 12px;min-width:0;}
#bb-epl-widget .bbw-compact-item{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:3px;align-items:center;min-width:0;min-height:55px;padding:7px 8px;color:var(--bbw-fg);text-decoration:none!important;border:1px solid var(--bbw-border);border-bottom:0;background:var(--bbw-card);transition:background .15s;}
#bb-epl-widget .bbw-compact-item:first-child{border-radius:8px 8px 0 0;}
#bb-epl-widget .bbw-compact-item:last-child{border-bottom:1px solid var(--bbw-border);border-radius:0 0 8px 8px;}
#bb-epl-widget .bbw-compact-item:only-child{border-radius:8px;}
#bb-epl-widget .bbw-compact-item:hover{background:var(--bbw-hover);}
#bb-epl-widget .bbw-compact-item:focus-visible{outline:2px solid var(--bbw-red);outline-offset:-2px;position:relative;z-index:1;}
#bb-epl-widget .bbw-compact-team{display:flex;align-items:center;min-width:0;gap:7px;line-height:1.15;}
#bb-epl-widget .bbw-compact-home{justify-content:flex-end;text-align:right;}
#bb-epl-widget .bbw-compact-away{justify-content:flex-start;text-align:left;}
#bb-epl-widget .bbw-compact-team-name{display:block;min-width:0;max-width:100%;font-size:12px;font-weight:700;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;}
#bb-epl-widget .bbw-compact-logo{width:27px;height:27px;flex:0 0 27px;object-fit:contain;display:block;}
#bb-epl-widget .bbw-compact-logo-empty{border-radius:50%;background:var(--bbw-hover);display:flex;align-items:center;justify-content:center;color:var(--bbw-muted);font-size:11px;font-weight:900;}
#bb-epl-widget .bbw-compact-middle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:0;white-space:nowrap;text-align:center;}
#bb-epl-widget .bbw-compact-score{font-size:17px;font-weight:900;line-height:1.15;letter-spacing:-.35px;font-variant-numeric:tabular-nums;}
#bb-epl-widget .bbw-compact-score-live,#bb-epl-widget .bbw-compact-live{color:#e31e24;}
#bb-epl-widget .bbw-compact-kickoff{font-size:14px;letter-spacing:0;}
#bb-epl-widget .bbw-compact-state{font-size:10px;font-weight:700;color:var(--bbw-muted);line-height:1.15;}
#bb-epl-widget .bbw-compact-state.bbw-compact-live{color:#e31e24;}
#bb-epl-widget .bbw-compact-state.bbw-compact-pending{color:#b77a1a;font-size:9px;}
#bb-epl-widget .bbw-compact-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:11px 14px 0;flex-wrap:wrap;}
#bb-epl-widget .bbw-compact-pager{display:flex;gap:10px;align-items:center;}
#bb-epl-widget .bbw-compact-page{font-size:12px;color:var(--bbw-muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:center;white-space:nowrap;}
#bb-epl-widget .bbw-compact-all{font-size:12px;font-weight:700;text-decoration:none!important;color:var(--bbw-muted);border:1px solid var(--bbw-border);border-radius:7px;padding:7px 14px;}
#bb-epl-widget .bbw-compact-all:hover{color:var(--bbw-red);border-color:var(--bbw-red);}
#bb-epl-widget .bbw-compact-list .bbw-empty{margin:0;border:1px solid var(--bbw-border);border-radius:8px;}
@media(min-width:800px){
  #bb-epl-widget .bbw-compact-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
  #bb-epl-widget .bbw-compact-item{border-bottom:1px solid var(--bbw-border);border-radius:0!important;}
  #bb-epl-widget .bbw-compact-item:nth-child(1),#bb-epl-widget .bbw-compact-item:nth-child(2){border-radius:8px 8px 0 0!important;}
  #bb-epl-widget .bbw-compact-item:nth-child(5),#bb-epl-widget .bbw-compact-item:nth-child(6){border-radius:0 0 8px 8px!important;}
  #bb-epl-widget .bbw-compact-item:nth-child(n+3){border-top:0;}
  #bb-epl-widget .bbw-compact-team-name{font-size:13px;}
  #bb-epl-widget .bbw-compact-item{min-height:56px;}
  #bb-epl-widget .bbw-frame-compact{padding:15px 0 12px;}
}
@media(max-width:420px){
  #bb-epl-widget .bbw-frame-compact .bbw-top{padding:0 10px 9px;gap:9px;}
  #bb-epl-widget .bbw-frame-compact .bbw-heading{font-size:15px;}
  #bb-epl-widget .bbw-frame-compact .bbw-tab{font-size:11px;padding:6px 9px;}
  #bb-epl-widget .bbw-compact-list{padding:0 8px;}
  #bb-epl-widget .bbw-compact-item{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);padding:7px 4px;gap:2px;}
  #bb-epl-widget .bbw-compact-team{gap:4px;}
  #bb-epl-widget .bbw-compact-team-name{font-size:11px;}
  #bb-epl-widget .bbw-compact-logo{width:23px;height:23px;flex-basis:23px;}
  #bb-epl-widget .bbw-compact-score{font-size:15px;}
  #bb-epl-widget .bbw-compact-state{font-size:9px;}
  #bb-epl-widget .bbw-compact-footer{padding:9px 10px 0;}
  #bb-epl-widget .bbw-compact-all{font-size:11px;padding:7px 9px;}
}

@media(min-width:800px){#bb-epl-widget .bbw-compact-item:only-child{border-radius:8px!important;}}


/* STEP 21.4 — SMART desktop presentation. Mobile remains Step 21.3 compact. */
@media (min-width:800px){
  #bb-epl-widget .bbw-frame-smart .bbw-top{padding-bottom:10px;}
  #bb-epl-widget .bbw-smart-columns{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:10px;padding:0 12px;align-items:stretch;}
  #bb-epl-widget .bbw-smart-live{min-width:0;min-height:161px;background:var(--bbw-hover);border:1px solid var(--bbw-border);border-radius:9px;color:var(--bbw-fg);padding:12px 14px;display:flex;flex-direction:column;gap:18px;text-decoration:none!important;transition:border-color .15s;}
  #bb-epl-widget .bbw-smart-live:hover,#bb-epl-widget .bbw-smart-next:hover{border-color:var(--bbw-red);}
  #bb-epl-widget .bbw-smart-live:focus-visible,#bb-epl-widget .bbw-smart-next:focus-visible,#bb-epl-widget .bbw-smart-upcoming-all:focus-visible{outline:2px solid var(--bbw-red);outline-offset:2px;}
  #bb-epl-widget .bbw-smart-live-state{color:#e31e24;font-size:10px;font-weight:850;letter-spacing:.5px;}
  #bb-epl-widget .bbw-smart-live-body{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center;}
  #bb-epl-widget .bbw-smart-team{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;text-align:center;}
  #bb-epl-widget .bbw-smart-team-name{font-size:12px;font-weight:800;line-height:1.2;overflow-wrap:anywhere;}
  #bb-epl-widget .bbw-smart-logo{width:38px;height:38px;object-fit:contain;display:block;}
  #bb-epl-widget .bbw-smart-logo-empty{background:var(--bbw-card);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bbw-muted);font-size:15px;}
  #bb-epl-widget .bbw-smart-live-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;white-space:nowrap;min-width:75px;}
  #bb-epl-widget .bbw-smart-score{font-size:26px;font-weight:900;color:#e31e24;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.1;}
  #bb-epl-widget .bbw-smart-minute{font-size:11px;font-weight:800;color:#e31e24;}
  #bb-epl-widget .bbw-smart-upcoming{min-width:0;background:var(--bbw-card);border:1px solid var(--bbw-border);border-radius:9px;padding:10px 9px 9px;display:flex;flex-direction:column;}
  #bb-epl-widget .bbw-smart-upcoming-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 3px 8px;}
  #bb-epl-widget .bbw-smart-upcoming-heading strong{font-size:12px;font-weight:850;}
  #bb-epl-widget .bbw-smart-upcoming-all{border:0;background:transparent;color:var(--bbw-red);cursor:pointer;font-size:11px;font-weight:750;font-family:inherit;padding:3px 5px;}
  #bb-epl-widget .bbw-smart-next-list{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;}
  #bb-epl-widget .bbw-smart-next{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);align-items:center;gap:4px;min-width:0;min-height:39px;padding:5px 6px;border:1px solid var(--bbw-border);border-radius:6px;color:var(--bbw-fg);text-decoration:none!important;}
  #bb-epl-widget .bbw-smart-next-home,#bb-epl-widget .bbw-smart-next-away{display:flex;gap:5px;align-items:center;min-width:0;line-height:1.15;}
  #bb-epl-widget .bbw-smart-next-home{justify-content:flex-end;text-align:right;}
  #bb-epl-widget .bbw-smart-next-away{justify-content:flex-start;text-align:left;}
  #bb-epl-widget .bbw-smart-next-name{font-size:11px;font-weight:700;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
  #bb-epl-widget .bbw-smart-next-logo{width:24px;height:24px;flex:0 0 24px;object-fit:contain;}
  #bb-epl-widget .bbw-smart-next-logo-empty{display:flex;align-items:center;justify-content:center;background:var(--bbw-hover);border-radius:50%;color:var(--bbw-muted);font-size:10px;font-weight:800;}
  #bb-epl-widget .bbw-smart-next-time{font-size:11px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;}
  #bb-epl-widget .bbw-smart-upcoming-empty{font-size:12px;color:var(--bbw-muted);padding:18px 6px;}
  #bb-epl-widget .bbw-smart-footer{padding-top:8px;}
  #bb-epl-widget .bbw-smart-foot-note{font-size:11px;color:var(--bbw-muted);font-weight:600;}
}
@media (min-width:800px) and (max-width:980px){
  #bb-epl-widget .bbw-smart-columns{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);}
  #bb-epl-widget .bbw-smart-live{padding:12px 8px;}
  #bb-epl-widget .bbw-smart-next{grid-template-columns:minmax(0,1fr) 43px minmax(0,1fr);padding:4px 3px;gap:3px;}
  #bb-epl-widget .bbw-smart-next-logo{width:21px;height:21px;flex-basis:21px;}
  #bb-epl-widget .bbw-smart-next-name{font-size:10px;}
}


/* ================================================================
 * BritBall STEP 29 — DESKTOP ONLY (>= 992px)
 * Mobile / tablet compact layout, logos, scores and JS untouched.
 * Compact two-column board, tighter header, grouped footer controls.
 * ================================================================ */
@media (min-width: 992px) {
  #bb-epl-widget .bbw-frame-compact {
    padding-top: 11px;
    padding-bottom: 9px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-top {
    justify-content: flex-start;
    gap: 18px;
    padding: 0 14px 9px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-switch {
    margin-right: 0;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-tab {
    padding: 5px 11px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-list {
    gap: 0 10px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-item {
    min-height: 52px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-team-name {
    font-size: 12px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-footer {
    justify-content: flex-end;
    gap: 14px;
    padding-top: 7px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-pager {
    gap: 7px;
  }
}


/* ===============================================================
 * BritBall STEP 30 — desktop-only ultra-compact header + side pager.
 * At <= 991px: zero CSS changes to existing completed mobile widget.
 * Existing JS already creates all nodes; no JS / API edits required.
 * =============================================================== */
@media (min-width: 992px) {
  #bb-epl-widget .bbw-frame-compact {
    position: relative;
    padding: 10px 0 15px;
  }
  /* Mobile keeps the heading. Desktop only: tabs become left header. */
  #bb-epl-widget .bbw-frame-compact .bbw-heading {
    display: none;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 170px 9px 13px;
    min-height: 36px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-switch {
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-tab {
    padding: 6px 12px;
    font-size: 12px;
  }
  /* Existing link lives in the footer DOM; position it at header right. */
  #bb-epl-widget .bbw-frame-compact .bbw-compact-footer {
    display: contents;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-pager {
    display: contents;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-all {
    position: absolute;
    top: 11px;
    right: 13px;
    z-index: 2;
    min-height: 29px;
    padding: 5px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1.3;
  }
  /* Keep current page visible in the header without adding a footer. */
  #bb-epl-widget .bbw-frame-compact .bbw-compact-page {
    position: absolute;
    top: 19px;
    right: 150px;
    z-index: 2;
    min-width: 0;
    font-size: 10px;
    line-height: 1;
  }
  /* Two actual match columns still use the entire content width.
     44px side rails protect names from the large navigation arrows. */
  #bb-epl-widget .bbw-frame-compact .bbw-compact-list {
    padding: 0 45px 0 13px;
    gap: 0 10px;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-compact-item {
    min-height: 52px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  /* STEP 31: both arrow buttons share one compact rail at the RIGHT. */
  #bb-epl-widget .bbw-frame-compact .bbw-arrow {
    position: absolute;
    top: calc(50% - 5px);
    left: auto;
    right: 9px;
    transform: translateY(-100%);
    z-index: 2;
    width: 29px;
    height: 38px;
    border-radius: 7px;
    background: var(--bbw-card);
    border: 1px solid var(--bbw-border);
    font-size: 23px;
    line-height: 1;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-arrow:last-of-type {
    top: calc(50% + 5px);
    left: auto;
    right: 9px;
    transform: none;
  }
  #bb-epl-widget .bbw-frame-compact .bbw-arrow:not(:disabled):hover {
    color: var(--bbw-red);
    border-color: var(--bbw-red);
  }
  /* Special case: exactly one LIVE fixture remains in the original SMART view.
     Same right-side Match Center link, no fake pagination arrows. */
  #bb-epl-widget .bbw-frame-smart .bbw-smart-footer {
    display: contents;
  }
  #bb-epl-widget .bbw-frame-smart .bbw-smart-foot-note {
    display: none;
  }
}

/* STEP 31 — gesture-only additions; no change to mobile spacing, colours or layout. */
#bb-epl-widget .bbw-compact-list {
  touch-action: pan-y; /* preserve natural vertical page scrolling on mobile */
  -webkit-user-select: none;
  user-select: none;
}
#bb-epl-widget .bbw-compact-item,
#bb-epl-widget .bbw-compact-item img {
  -webkit-user-drag: none;
}
@media (hover:hover) and (pointer:fine) {
  #bb-epl-widget .bbw-compact-list .bbw-compact-item {cursor: grab;}
  #bb-epl-widget .bbw-compact-list.bbw-swipe-dragging .bbw-compact-item {cursor: grabbing;}
}


/* ======================================================================
 * STEP 33.1 — MOBILE ONLY (<800px): visually matches user's screenshot.
 * One seamless compact match card, header outside the card, dots INSIDE.
 * No changes to desktop Step 31, LIVE logic, API or Cron.
 * ====================================================================== */
@media (max-width: 799px), (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 550px) and (max-width: 1180px) {
  #bb-epl-widget .bbw-mobile-frame {
    position:relative; display:block; width:100%;max-width:100%;min-height:0;
    background:transparent; border:0; box-shadow:none; border-radius:0;
    padding:0; margin:0; overflow:visible;
  }
  #bb-epl-widget .bbw-mobile-top {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:nowrap;gap:5px;min-width:0;height:43px;margin-bottom:8px;
  }
  #bb-epl-widget .bbw-mobile-matchcenter {
    display:flex;align-items:center;min-width:0;flex:0 0 auto;
    white-space:nowrap;text-decoration:none!important;
    font-size:clamp(13px,4vw,17px);font-weight:900;
    line-height:1.1;letter-spacing:-.4px;color:var(--bbw-fg);
    border-right:1px solid var(--bbw-border);padding-right:9px;margin-right:1px;
    height:26px;
  }
  #bb-epl-widget .bbw-mobile-matchcenter::before{display:none;content:none}
  #bb-epl-widget .bbw-mobile-matchcenter:hover{color:var(--bbw-red)}
  #bb-epl-widget .bbw-mobile-switch {
    display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;
    min-width:0;max-width:100%;gap:4px;overflow:visible;
  }
  #bb-epl-widget .bbw-mobile-switch .bbw-tab {
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;white-space:nowrap;line-height:1.1;
    border-radius:999px;padding:8px 8px;
    font-size:clamp(9px,2.65vw,12px);font-weight:750;
    background:var(--bbw-card);border-color:transparent;
  }
  #bb-epl-widget .bbw-mobile-switch .bbw-tab[aria-selected=true] {
    background:var(--bbw-red);border-color:var(--bbw-red);color:#fff;
  }
  #bb-epl-widget .bbw-mobile-viewport {
    width:100%;min-width:0;max-width:100%;height:149px;
    display:flex;margin:0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -ms-overflow-style:none;touch-action:pan-x pan-y;
    border-radius:15px;
  }
  #bb-epl-widget .bbw-mobile-viewport::-webkit-scrollbar{display:none;width:0;height:0}
  #bb-epl-widget .bbw-mobile-slide {
    width:100%;min-width:0;flex:0 0 100%;height:149px;
    scroll-snap-align:start;scroll-snap-stop:always;
    -webkit-user-select:none;user-select:none;
  }
  #bb-epl-widget .bbw-mobile-card {
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
    width:100%;height:149px;min-width:0;
    background:var(--bbw-card);color:var(--bbw-fg);
    border:1px solid var(--bbw-border);border-radius:15px;
    text-decoration:none!important;cursor:pointer;
    padding:10px 9px 26px;-webkit-user-drag:none;
  }
  [data-theme="dark"] #bb-epl-widget .bbw-mobile-card,
  html[data-theme="dark"] #bb-epl-widget .bbw-mobile-card{background:#1b1a1e}
  #bb-epl-widget .bbw-mobile-league {
    display:flex;align-items:center;justify-content:center;gap:6px;
    height:21px;min-height:21px;max-width:100%;
    text-align:center;font-size:11px;font-weight:600;line-height:1.2;
    color:var(--bbw-muted);white-space:nowrap;
  }
  #bb-epl-widget .bbw-mobile-league-logo{display:block;width:20px;height:20px;object-fit:contain}
  #bb-epl-widget .bbw-mobile-trio {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(86px,96px) minmax(0,1fr);
    align-items:center;gap:4px;width:100%;min-width:0;flex:1;
    padding-bottom:2px;
  }
  #bb-epl-widget .bbw-mobile-team {
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;text-align:center;min-width:0;
  }
  #bb-epl-widget .bbw-mobile-logo {
    width:48px;height:48px;flex:0 0 48px;display:block;object-fit:contain;
    pointer-events:none;-webkit-user-drag:none;
  }
  #bb-epl-widget .bbw-mobile-logo-empty {
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:var(--bbw-hover);color:var(--bbw-muted);font-size:16px;font-weight:850;
  }
  #bb-epl-widget .bbw-mobile-team-name {
    max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;overflow-wrap:anywhere;
    color:var(--bbw-fg);font-size:12px;font-weight:800;line-height:1.15;
  }
  #bb-epl-widget .bbw-mobile-middle {
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;text-align:center;min-width:0;
  }
  #bb-epl-widget .bbw-mobile-score {
    font-size:27px;font-weight:900;line-height:1.08;letter-spacing:-.6px;
    white-space:nowrap;font-variant-numeric:tabular-nums;
  }
  #bb-epl-widget .bbw-mobile-score-live,
  #bb-epl-widget .bbw-mobile-status-live{color:#e31e24}
  #bb-epl-widget .bbw-mobile-status {
    color:var(--bbw-muted);font-size:11px;line-height:1.1;
    font-weight:600;white-space:nowrap;
  }
  /* Overlay with pagination at the card bottom, not a second external footer. */
  #bb-epl-widget .bbw-mobile-pager {
    position:absolute;left:12px;right:12px;bottom:9px;
    z-index:3;height:15px;min-height:15px;padding:0;
    display:flex;align-items:center;justify-content:center;gap:7px;
    pointer-events:none;
  }
  #bb-epl-widget .bbw-mobile-dot {
    flex:0 0 8px;width:8px;height:8px;min-width:8px;
    display:block;padding:0;border-radius:50%;
    border:1px solid var(--bbw-muted);background:transparent;
    cursor:pointer;pointer-events:auto;
  }
  #bb-epl-widget .bbw-mobile-dot[aria-current=true] {
    background:var(--bbw-red);border-color:var(--bbw-red);
  }
  #bb-epl-widget .bbw-mobile-single{display:block;width:8px;height:8px;border-radius:50%;background:var(--bbw-muted);opacity:.4}
  #bb-epl-widget .bbw-mobile-empty {
    display:flex;align-items:center;justify-content:center;
    height:149px;width:100%;margin:0;padding:15px 15px 26px;
    color:var(--bbw-muted);font-size:12px;text-align:center;
    background:var(--bbw-card);border:1px solid var(--bbw-border);border-radius:15px;
  }
  #bb-epl-widget .bbw-mobile-viewport:focus-visible,
  #bb-epl-widget .bbw-mobile-matchcenter:focus-visible,
  #bb-epl-widget .bbw-mobile-dot:focus-visible,
  #bb-epl-widget .bbw-mobile-switch .bbw-tab:focus-visible{
    outline:2px solid var(--bbw-red);outline-offset:2px;
  }
}
@media (max-width:370px) {
  #bb-epl-widget .bbw-mobile-matchcenter{font-size:13px;padding-right:6px}
  #bb-epl-widget .bbw-mobile-switch{gap:2px}
  #bb-epl-widget .bbw-mobile-switch .bbw-tab{font-size:9px;padding:8px 5px}
  #bb-epl-widget .bbw-mobile-trio{grid-template-columns:minmax(0,1fr) 85px minmax(0,1fr)}
  #bb-epl-widget .bbw-mobile-logo{width:44px;height:44px;flex-basis:44px}
  #bb-epl-widget .bbw-mobile-team-name{font-size:11px}
  #bb-epl-widget .bbw-mobile-score{font-size:25px}
}
@media(max-width:325px) {
  #bb-epl-widget .bbw-mobile-top{gap:2px}
  #bb-epl-widget .bbw-mobile-matchcenter{font-size:12px;padding-right:3px}
  #bb-epl-widget .bbw-mobile-switch .bbw-tab{font-size:8px;padding:7px 4px}
}
@media(prefers-reduced-motion:reduce){
  #bb-epl-widget .bbw-mobile-viewport{scroll-behavior:auto}
}

/* STEP 33.5: no fixed width on landscape phones. The shared mobile layout
   uses the full available container width (same as news content). */