/* ═══════════════════════════════════════════
   DESKTOP — Analyst workstation layout
   Breakpoint: ≥ 960px

   Design intent: this is not a "sidebar nav app".
   It's a football prediction terminal expanded to
   full-screen. Think broadcast analyst second screen,
   not a SaaS dashboard.

   Structure:
   ┌──────┬────────────────────────┬──────────────┐
   │ RAIL │     MAIN CONTENT                      │
   │ 64px │     max 680px                         │
   └──────┴────────────────────────┴──────────────┘

   The rail is icon-only — no labels, no words.
   The gutter shows contextual live data.
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* ─────────────────────────────────────────
     VIEWPORT GEOMETRY
  ───────────────────────────────────────── */

  html, body {
    height: 100%;
    overflow: hidden;
  }

  /* The pitch background spans the full viewport on desktop
     — the stadium view, not the content column */
  .pitch-bg,
  .atmo-slash {
    position: fixed;
    /* let these breathe across the whole screen */
    left: 0;
  }

  /* Wider center circle, feels like a real stadium top-down */
  .pitch-bg::before {
    width: 520px;
    height: 520px;
    top: 12%;
    opacity: 0.6;
  }

  /* ─────────────────────────────────────────
     LEFT RAIL — icon-only navigation
     Not a sidebar. A rail. 64px wide.
  ───────────────────────────────────────── */

  .bottom-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    right: auto;
    width: 64px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 4px;
    border-top: none;
    border-right: 1px solid var(--nav-border);
    z-index: 200;
    /* glass rail */
    background: rgba(8, 13, 30, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  [data-theme="light"] .bottom-nav {
    background: rgba(248, 248, 248, 0.88);
  }

  /* Logo mark at very top */
  .bottom-nav::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue), var(--blue-bright));
    box-shadow: 0 0 0 3px var(--blue-10), 0 4px 16px rgba(13,79,247,0.3);
    display: block;
  }

  /* Vertical line below logo */
  .bottom-nav::after {
    content: '';
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 24px;
    background: var(--dim);
    display: block;
  }

  /* Nav items: icon centered, labels hidden */
  .nav-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 10px 0;
    width: 44px;
    border-radius: 12px;
    transition: background 0.2s;
    position: relative;
  }

  .nav-item:hover {
    background: var(--overlay);
  }

  /* Tooltip label on hover */
  .nav-item::after {
    content: attr(data-desktop-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--slab);
    border: 1px solid var(--dim);
    color: var(--chalk);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    transform: translateY(-50%) translateX(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 300;
  }

  .nav-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .nav-item-label {
    display: none; /* labels hidden — rail is icon-only */
  }

  .nav-item svg {
    width: 22px; height: 22px;
  }

  /* Active indicator: small left pip */
  .nav-item.active::before {
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 2px 2px 0;
  }

  /* SureBOOM icon gets an accent glow */
  .nav-sureboom.active svg,
  .nav-sureboom:hover svg {
    filter: drop-shadow(0 0 6px rgba(13,79,247,0.5));
  }

  /* ─────────────────────────────────────────
     CONTENT VIEWPORT
     Offset by rail width. Scrollable.
     Content column is naturally wide, not max-width
     crammed — it should breathe.
  ───────────────────────────────────────── */

  #spa-viewport {
    position: fixed;
    top: 0;
    left: 64px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* no visible scrollbar — terminal feel */
    z-index: 1;
  }

  #spa-viewport::-webkit-scrollbar {
    display: none;
  }

  /* App shell: let content breathe, no artificial max-width constraint */
  .app {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 40px !important;
  }

  /* ─────────────────────────────────────────
     HEADER — desktop variant
     Sits flush, no excessive padding
  ───────────────────────────────────────── */

  .header {
    padding: 20px 24px 0 !important;
    padding-top: 20px !important; /* kill safe-area env() override */
  }

  /* ─────────────────────────────────────────
     LAYOUT TWEAKS — component breathing
  ───────────────────────────────────────── */

  .matches-area {
    padding: 0 20px;
  }

  .search-row    { padding: 14px 24px 0; }
  .section-head  { padding: 18px 24px 8px; }
  .streak-banner { margin: 16px 24px 0; }
  .date-strip    { padding: 14px 24px 2px; }
  .league-scroll { padding: 18px 24px 4px; }
  .slips-feed    { padding: 0 20px; }

  /* ─────────────────────────────────────────
     FAB — repositioned to hug right edge of
     content column (not viewport edge)
  ───────────────────────────────────────── */

  .fab {
    right: calc(260px + 20px); /* right gutter width + margin */
    bottom: 28px;
  }

  /* ─────────────────────────────────────────
     SAFE AREA — no notch on desktop
  ───────────────────────────────────────── */

  .app { padding-bottom: 40px !important; }

  /* ─────────────────────────────────────────
     AUTH OVERLAY — centered modal, not full-screen fill
  ───────────────────────────────────────── */

  .auth-overlay {
    /* Keep full-screen but render a centred panel */
    background: rgba(5, 8, 26, 0.8);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
  }

  /* Center the auth card with a glass panel behind it */
  .auth-content,
  .auth-login,
  .auth-dev,
  .auth-error {
    background: var(--slab);
    border: 1px solid var(--dim);
    border-radius: 20px;
    padding: 40px 40px 36px;
    box-shadow:
      0 0 0 1px var(--blue-10),
      0 32px 80px rgba(0,0,0,0.55),
      0 8px 32px rgba(13,79,247,0.08);
    width: 400px;
    max-width: calc(100vw - 48px);
  }

  .auth-login { padding: 40px 40px 36px; }
  .auth-dev   { padding: 36px 40px 32px; max-width: calc(100vw - 48px); }

  /* Pitch atmosphere rings still show through the backdrop */
  .auth-overlay::before { width: 480px; height: 480px; }
  .auth-overlay::after  { width: 720px; height: 720px; }

  /* ─────────────────────────────────────────
     SUREBOOM — cards go side by side on wide enough
  ───────────────────────────────────────── */

  .sb-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  /* Splitter card spans both columns — draws the eye */
  .sb-card:last-child {
    grid-column: 1 / -1;
  }

  /* Hero needs more room to breathe */
  .sb-hero { padding: 32px 24px 0; }
  .sb-stats-ribbon { margin: 0 4px; }

  /* ─────────────────────────────────────────
     MATCH ARENA — wider stage
  ───────────────────────────────────────── */

  .match-arena {
    margin: 16px 20px 0;
  }

  /* ─────────────────────────────────────────
     PLANS — 3-col grid on desktop
  ───────────────────────────────────────── */

  .plan-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px;
  }

  /* ─────────────────────────────────────────
     PROFILE — Scout dossier split layout
     Left: sticky glass identity panel
     Right: scrollable settings stack
  ───────────────────────────────────────── */

  .profile-page .app {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    align-items: start;
    max-width: 840px;
    padding: 0 !important;
  }

  /* Glass identity panel — sticky, full viewport height */
  .profile-identity {
    grid-column: 1;
    grid-row: 1 / 20;
    position: sticky;
    top: 0;
    min-height: 100vh;
    padding: 48px 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(8, 13, 30, 0.52);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--dim);
    box-shadow: inset -1px 0 0 rgba(13, 79, 247, 0.12);
    overflow: hidden;
  }

  [data-theme="light"] .profile-identity {
    background: rgba(242, 243, 248, 0.68);
  }

  /* Corner bracket accents — targeting reticle detail */
  .profile-identity::before {
    content: '';
    position: absolute;
    top: 16px; left: 16px;
    width: 22px; height: 22px;
    border-top: 1.5px solid var(--blue);
    border-left: 1.5px solid var(--blue);
    border-radius: 5px 0 0 0;
    opacity: 0.38;
    pointer-events: none;
  }

  .profile-identity::after {
    content: '';
    position: absolute;
    bottom: 16px; right: 16px;
    width: 22px; height: 22px;
    border-bottom: 1.5px solid var(--blue);
    border-right: 1.5px solid var(--blue);
    border-radius: 0 0 5px 0;
    opacity: 0.38;
    pointer-events: none;
  }

  /* Larger avatar stage on desktop */
  .profile-page .prof-avatar-wrap {
    width: 120px; height: 120px;
    margin-bottom: 22px;
  }

  .profile-page .prof-avatar-img {
    width: 120px; height: 120px;
  }

  .profile-page .prof-avatar-img svg {
    width: 56px; height: 56px;
  }

  .profile-page .prof-user-name {
    font-size: 20px;
    margin-top: 4px;
  }

  /* Action row: horizontal, with a separator rule below */
  .profile-page .prof-actions {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-bottom: 24px;
    width: 100%;
    border-bottom: 1px solid var(--dim);
  }

  /* All sibling sections flow into the right column */
  .profile-identity ~ * {
    grid-column: 2;
  }

  /* Right column — generous padding, more room to breathe */
  .profile-page .prof-section {
    padding: 0 24px;
  }

  .profile-page .prof-notif-settings {
    margin-top: 32px;
  }

  .profile-page .prof-section-label {
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  /* Desktop hover states — desktop has a pointer */
  .profile-page .prof-notif-row {
    border-radius: 10px;
    cursor: default;
  }

  .profile-page .prof-notif-row:hover {
    background: var(--overlay);
  }

  .profile-page .prof-menu-item:hover {
    border-color: rgba(13, 79, 247, 0.28);
    transform: translateX(4px);
  }

  .profile-page .prof-menu-item:hover .prof-menu-chevron {
    color: var(--blue-bright);
    transform: translateX(4px);
  }

  .profile-page .prof-sub-card {
    margin-top: 20px;
  }

  /* Logout — compact pill, not full-width on desktop */
  .profile-page .prof-logout {
    padding: 20px 24px 48px;
  }

  .profile-page .prof-logout-btn {
    width: auto;
    padding: 11px 28px;
    font-size: 13px;
  }

  /* ─────────────────────────────────────────
     EDIT PROFILE — Two-panel form layout
     Topbar: full-width header
     Left: avatar editor (glass panel)
     Right: all form fields + save
  ───────────────────────────────────────── */

  .edit-profile-page .app {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    max-width: 680px;
    padding: 0 !important;
    align-items: start;
  }

  /* Topbar stretches the full width */
  .edit-profile-page .ep-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--dim);
    margin-bottom: 0;
  }

  /* Left column: avatar section as a glass sub-panel */
  .edit-profile-page .ep-avatar-section {
    grid-column: 1;
    grid-row: 2 / 10;
    padding: 44px 28px;
    border-right: 1px solid var(--dim);
    background: rgba(8, 13, 30, 0.44);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    min-height: 380px;
    justify-content: center;
  }

  [data-theme="light"] .edit-profile-page .ep-avatar-section {
    background: rgba(242, 243, 248, 0.6);
  }

  /* Larger avatar on desktop */
  .edit-profile-page .ep-avatar-wrap,
  .edit-profile-page .ep-avatar-img {
    width: 128px; height: 128px;
  }

  .edit-profile-page .ep-avatar-img svg.placeholder-icon {
    width: 58px; height: 58px;
  }

  .edit-profile-page .ep-avatar-hint {
    font-size: 11px;
    margin-top: 14px;
  }

  /* Right column: form + notice + save */
  .edit-profile-page .ep-form,
  .edit-profile-page .ep-notice,
  .edit-profile-page .ep-save-area {
    grid-column: 2;
  }

  /* Two-column form grid: first / last name side by side */
  .edit-profile-page .ep-form {
    padding: 28px 24px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* Email and username span the full form width */
  .edit-profile-page .ep-field:nth-child(3),
  .edit-profile-page .ep-field:nth-child(4) {
    grid-column: 1 / -1;
  }

  .edit-profile-page .ep-notice {
    margin: 16px 24px 0;
  }

  .edit-profile-page .ep-save-area {
    padding: 20px 24px 40px;
  }

  /* Save button: auto-width, right-aligned */
  .edit-profile-page .ep-save-btn {
    width: auto;
    min-width: 180px;
    padding: 14px 32px;
    float: right;
  }

  /* ─────────────────────────────────────────
     SLIPS — Records vault layout
     Cards go 2-wide on the wider canvas,
     timeline dividers stay full-width rulers.
  ───────────────────────────────────────── */

  .slips-page .app {
    max-width: 740px;
    padding-bottom: 48px !important;
  }

  /* Topbar: more room, higher up */
  .slips-page .slips-topbar {
    padding: 22px 24px 0;
  }

  /* Tab switcher: constrained so it doesn't stretch full width */
  .slips-page .slips-tabs {
    margin: 20px 24px 0;
    max-width: 340px;
  }

  /* Timeline date rulers: full-width context markers */
  .slips-page .slips-timeline-date {
    padding: 24px 24px 10px;
  }

  /* Feed grid: 2 cards per row */
  .slips-page .slips-feed {
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }

  /* Card hover: lift + blue edge on desktop */
  .slips-page .slip-card:hover {
    border-color: rgba(13, 79, 247, 0.28);
    transform: translateY(-2px);
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(13, 79, 247, 0.1);
  }

  .slips-page .slip-view-btn:hover {
    border-color: var(--blue);
    background: var(--overlay);
    color: var(--blue-bright);
  }

  .slips-page .slip-view-btn:hover svg {
    color: var(--blue-bright);
  }

  /* Empty state stays centered, unaffected by the grid */
  .slips-page .slips-empty {
    grid-column: 1 / -1;
  }

  /* ─────────────────────────────────────────
     SLIP DETAIL — Evidence board split layout

     Row 1: topbar (full width)
     Row 2: "Predictions" ruler (full width, no competing heights)
     Row 3+: match cards (col 1) | context → tally → booking (col 2)

     Putting the section label in its own full-width row means
     row 2 height = label height only. Matches and context both
     start at row 3, flush against the label. No whitespace.
  ───────────────────────────────────────── */

  .slip-detail-page .app {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: start;
    max-width: 920px;
    min-height: 100vh;
    padding: 0 !important;
  }

  /* Glass background for the right action column */
  .slip-detail-page .app::before {
    content: '';
    display: block;
    grid-column: 2;
    grid-row: 1 / 20;
    background: rgba(8, 13, 30, 0.42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: -1px 0 0 var(--dim);
    pointer-events: none;
    z-index: 0;
  }

  [data-theme="light"] .slip-detail-page .app::before {
    background: rgba(240, 241, 248, 0.62);
  }

  /* All content above the background panel */
  .slip-detail-page .sd-topbar,
  .slip-detail-page .sd-context,
  .slip-detail-page .sd-tally,
  .slip-detail-page .sd-booking,
  .slip-detail-page .app > .sd-section-label,
  .slip-detail-page .sd-matches {
    position: relative;
    z-index: 1;
  }

  /* Row 1: topbar spans both columns */
  .slip-detail-page .sd-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--dim);
  }

  /* Row 2: section label spans both columns — its height is the only thing
     that sets this row height, so no gap appears below the label */
  .slip-detail-page .app > .sd-section-label {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Row 3+, col 1: match prediction cards */
  .slip-detail-page .sd-matches {
    grid-column: 1;
    grid-row: 3 / 8;
    padding: 0 20px 40px;
    align-self: start;
  }

  /* Row 3+, col 2: context → tally → booking stacked in the action panel */
  .slip-detail-page .sd-context {
    grid-column: 2;
    grid-row: 3;
    margin: 16px 16px 0;
  }

  .slip-detail-page .sd-tally {
    grid-column: 2;
    grid-row: 4;
    margin: 12px 16px 0;
  }

  .slip-detail-page .sd-booking {
    grid-column: 2;
    grid-row: 5 / 8;
    padding-bottom: 40px;
  }

  /* Match cards: hover state */
  .slip-detail-page .sd-match:hover {
    border-color: rgba(13, 79, 247, 0.22);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.2),
      0 0 0 1px rgba(13, 79, 247, 0.08);
  }

  /* Bookmaker chips: 3-column grid — no horizontal scroll */
  .slip-detail-page .sd-bookmakers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    padding: 0 16px 14px;
    gap: 8px;
  }

  .slip-detail-page .sd-bookie {
    min-width: 0;
  }

  .slip-detail-page .sd-code-card {
    margin: 0 16px 16px;
  }

  /* Toast: right-anchored, doesn't overlap the action panel */
  .slip-detail-page .sd-toast {
    bottom: 24px;
    left: auto;
    right: 24px;
    max-width: 380px;
  }

}

/* ─────────────────────────────────────────
   WIDE DESKTOP — 1280px+
───────────────────────────────────────── */

@media (min-width: 1280px) {

  .app {
    max-width: 720px;
  }

}

/* ─────────────────────────────────────────
   ULTRAWIDE — 1600px+
───────────────────────────────────────── */

@media (min-width: 1600px) {

  .bottom-nav {
    width: 72px;
  }

  #spa-viewport {
    left: 72px;
  }

  .app {
    max-width: 780px;
  }

  .fab {
    right: calc(28px);
  }

}

/* ═══════════════════════════════════════════
   MATCH DETAIL PAGE — Broadcast Split layout
   ═══════════════════════════════════════════

   ┌──────────────── ARENA (full-bleed) ────────────────┐
   ├─────────────────────┬──────────────────────────────┤
   │  LEFT sticky 38%    │  RIGHT scrollable 62%        │
   │  · topbar           │  · tabs                      │
   │  · AI winner pick   │  · active tab content        │
   │  · betslip anchored │                              │
   └─────────────────────┴──────────────────────────────┘
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* ── The md-app becomes the outer broadcast frame ── */
  .md-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    margin-left: 64px; /* offset for the left rail nav */
  }

  /* ── Arena: contained card with breathing room below topbar ── */
  .match-arena {
    flex-shrink: 0;
    margin: 12px 20px 0;
    border-radius: 18px;
    padding: 24px 28px 20px;
  }

  .match-arena::before {
    width: 130px;
    height: 130px;
  }

  /* Bigger crests */
  .arena-crest-wrap  { width: 110px; height: 110px; }
  .arena-crest-ring  { width: 96px;  height: 96px;  }
  .arena-crest-img   { width: 54px;  height: 54px;  }
  .arena-team-name   { font-size: 17px; }
  .arena-kickoff,
  .arena-score       { font-size: 42px; letter-spacing: -2px; }
  .arena-score-sep   { font-size: 32px; }

  /* ── The topbar moves INTO the left column —
     we use the panels-grid to create the split.
     The topbar sits above the arena. ── */
  .md-topbar {
    flex-shrink: 0;
    padding: 18px 24px 0;
  }

  /* ── Broadcast split: two-row grid so tabs align with left col top ── */
  .md-panels-grid {
    display: grid;
    grid-template-columns: 38% 62%;
    grid-template-rows: auto 1fr;
    flex: 1;
    min-height: 0; /* let it shrink inside flex parent */
    overflow: hidden;
  }

  /* ── LEFT col — spans both rows, starts flush with the tab strip ── */
  .md-left-col {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    border-right: 1px solid var(--nav-border);
    padding: 20px 20px 24px;
    gap: 14px;
    background: rgba(8, 13, 30, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  [data-theme="light"] .md-left-col {
    background: rgba(240, 240, 244, 0.55);
  }

  .md-left-col::-webkit-scrollbar { display: none; }

  /* Label inside left col */
  .md-left-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ghost);
  }

  /* ── Tab nav — row 1 of right column ── */
  .md-tabs {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    border-radius: 14px;
    margin: 12px 12px 0;
    align-self: start;
  }

  /* ── RIGHT col — row 2 of right column, scrollable tab content ── */
  .md-right-col {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .md-tab {
    padding: 9px 18px;
    font-size: 12px;
    white-space: nowrap;
    flex: 1;
  }

  /* Hide Predictions tab on desktop — content is always visible in left col */
  .md-tab[data-tab="predictions"] {
    display: none;
  }

  /* Scrollable tab body */
  .md-tab-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 40px;
  }

  .md-tab-body::-webkit-scrollbar { display: none; }

  /* Tab panels inside right col */
  .md-right-col .md-section {
    padding: 16px 20px;
  }

  /* Predictions panel always visible in left col — override tab hide */
  .md-left-col #panelPredictions {
    display: block !important;
    padding: 0;
  }

  /* Match info visible by default in right col when no right-col panel is active */
  .md-right-col:not(:has(.tab-panel.active)) #panelMatchInfo {
    display: block;
  }

  /* ── Hover states ── */
  .pred-row:hover { background: var(--slate); }

  /* ── Betslip pill — sticky, centered within the left col ──
     Scoped to .md-app to win over the global matches-page
     rule later in the file. Keeps the pill shape and centers
     it at the bottom of the visible left col area. */
  .md-app .bs-pill {
    position: sticky;
    bottom: 16px;
    left: auto;
    transform: none;
    /* Center horizontally in the flex column */
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    /* Pill-sized, not full-width */
    width: auto;
    flex-shrink: 0;
    z-index: 2;
    /* Always visible as a persistent UI element */
    opacity: 1;
    pointer-events: auto;
    animation: none;
  }

  /* Empty state: dimmed but still interactive */
  .md-app .bs-pill:not(.has-items) {
    opacity: 0.45;
    transform: none;
  }

  .md-app .bs-pill:active { transform: scale(0.96); }

  /* ── Lineups: landscape pitch ──
     On desktop the pitch flips from portrait (3:5) to landscape (5:3).
     We transpose all pitch marking coordinates and reposition player
     rows so --row-top drives the horizontal axis instead of vertical.
     No rotation — everything is rebuilt for landscape natively.
  */

  /* Landscape container — constrained so the pitch doesn't sprawl */
  .lineup-pitch {
    aspect-ratio: 5 / 3;
    height: auto;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    /* Reorient the pitch glow gradients to left/right sides */
    background:
      radial-gradient(ellipse 30% 120% at 100% 50%, rgba(0,60,20,0.6) 0%, transparent 60%),
      radial-gradient(ellipse 30% 120% at 0%   50%, rgba(0,60,20,0.6) 0%, transparent 60%),
      linear-gradient(90deg, #0a2e14 0%, #0f4020 20%, #16562a 40%, #1a6b2e 50%, #16562a 60%, #0f4020 80%, #0a2e14 100%);
  }

  /* Grass stripes run left→right in landscape */
  .lineup-pitch::before {
    background: repeating-linear-gradient(
      90deg,
      transparent, transparent 18px,
      rgba(255,255,255,0.018) 18px,
      rgba(255,255,255,0.018) 36px
    );
  }

  /* ── Pitch markings transposed for landscape ── */

  /* Touchline: swap top/bottom ↔ left/right margins */
  .pitch-outline {
    top: 3%; left: 1.5%; right: 1.5%; bottom: 3%;
  }

  /* Center line: now vertical */
  .pitch-center-line {
    left: 50%; top: 3%;
    width: 1px; height: 94%;
  }

  /* Center circle and dot stay centered — no change needed */

  /* Penalty boxes: now on left and right sides */
  .pitch-box {
    top: 18%; bottom: 18%;
    height: auto;
    width: 12%;
    left: auto; right: auto;
    border: 1px solid rgba(255,255,255,0.1);
  }

  .pitch-box-top {
    /* was top box → now left box */
    top: 18%; bottom: 18%;
    left: 1.5%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(255,255,255,0.1);
  }

  .pitch-box-bottom {
    /* was bottom box → now right box */
    top: 18%; bottom: 18%;
    right: 1.5%;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-left: 1px solid rgba(255,255,255,0.1);
  }

  /* Goal areas: left and right sides */
  .pitch-goal-area {
    top: 32%; bottom: 32%;
    height: auto;
    width: 5%;
    left: auto; right: auto;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .pitch-goal-top {
    left: 1.5%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-right: 1px solid rgba(255,255,255,0.08);
  }

  .pitch-goal-bottom {
    right: 1.5%;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
  }

  /* Penalty arcs: now on left and right sides, semicircles pointing inward */
  .pitch-arc {
    top: 50%;
    left: auto; right: auto;
    width: 22px; height: 44px;
    transform: translateY(-50%);
    border-radius: 0;
  }

  .pitch-arc-top {
    /* was top arc → now left arc, opening rightward */
    left: 13.5%;
    top: 50%;
    border-radius: 44px 0 0 44px;
    border: 1px solid rgba(255,255,255,0.08);
    border-right: none;
  }

  .pitch-arc-bottom {
    /* was bottom arc → now right arc, opening leftward */
    right: 13.5%;
    top: 50%;
    border-radius: 0 44px 44px 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-left: none;
    bottom: auto;
  }

  /* ── Player rows: horizontal positioning in landscape ── */
  /* --row-top drives left/right instead of top/bottom */
  .pitch-row {
    top: 0;
    bottom: 0;
    left: var(--row-top, 50%);
    right: auto;
    width: 0;
    transform: translateX(-50%);
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
  }

  /* Each player: fixed width so they don't stretch */
  .pitch-player {
    flex: none;
    width: 42px;
  }

  /* Formation labels repositioned to landscape corners */
  .home-half .pitch-formation-label {
    bottom: auto; right: auto;
    top: 4px; right: 10px;
  }

  .away-half .pitch-formation-label {
    top: auto; left: auto;
    bottom: 4px; left: 10px;
  }

  /* Team badges repositioned to landscape corners */
  .home-half .pitch-team-badge {
    bottom: auto; left: auto;
    top: 4px; left: 10px;
  }

  .away-half .pitch-team-badge {
    top: auto; right: auto;
    bottom: 4px; right: 10px;
  }

  /* Hide mobile portrait toggle — both lists always visible on desktop */
  .lineup-team-toggle { display: none; }

  /* Both lineup lists show simultaneously */
  .lineup-list { display: block !important; }

  /* Starting XI — side-by-side columns */
  .lineup-xi-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
  }

  .lineup-xi-wrap .lineup-list {
    margin-top: 0;
  }

}

/* ═══════════════════════════════════════════
   SUREBOOM PAGE — desktop layout

   Strategy: work WITH the existing .app centering,
   not against it. Hero stays centered up top.
   Cards go side-by-side in a row below.
   No fixed/sticky tricks, no stacking context fights.
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* Atmosphere: offset from rail, rings grow to fill */
  .sb-atmosphere { left: 64px; }

  .sb-burst { width: 80vw; height: 80vw; top: -10%; }
  .sb-ring--1 { width: 280px; height: 280px; }
  .sb-ring--2 { width: 480px; height: 480px; }
  .sb-ring--3 { width: 680px; height: 680px; }

  /* Widen the app column to fit three cards in a row */
  .page-sureboom .app {
    max-width: 1000px;
    padding-bottom: 60px !important;
  }

  /* Hero: tighter vertical, wider layout */
  .sb-hero {
    padding: 40px 20px 24px;
  }

  .sb-title    { font-size: 44px; letter-spacing: -1.5px; }
  .sb-subtitle { margin-bottom: 20px; }

  /* Stats ribbon: spread the three stats evenly */
  .sb-stats-ribbon { padding: 16px 24px; }
  .sb-stat-value   { font-size: 20px; }

  /* Feature cards: horizontal row */
  .sb-features {
    flex-direction: row;
    align-items: stretch;
    padding: 8px 20px 0;
    gap: 16px;
  }

  .sb-card {
    flex: 1;
    min-width: 0;
    animation: none;
    opacity: 1;
  }

  /* Cards stay vertical — just let the title breathe less */
  .sb-card-title { font-size: 22px; }
  .sb-card-desc  { font-size: 13px; max-width: 100%; }

}

}

/* ═══════════════════════════════════════════
   MATCHES PAGE — desktop layout
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* ── Header: hide brand logo/name — the rail already has the mark ── */
  .header .brand-logo,
  .header .brand-name,
  .header .brand-tagline {
    display: none;
  }

  .header .header-left {
    gap: 0;
  }

  /* Header becomes a slim toolbar strip */
  .header {
    padding: 16px 24px 0 !important;
    min-height: 0;
  }

  /* Push header controls to the far right */
  .header-right {
    margin-left: auto;
    gap: 8px;
  }

  /* ── Date strip: stop hiding overflow, show all 7 days flat ── */
  .date-strip {
    overflow-x: visible;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 14px 24px 0;
  }

  .date-cell {
    /* equal-width cells across the full column */
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px;
  }

  .date-num {
    font-size: 22px;
  }

  /* ── League scroll: tighter gaps, bigger icons feel more like tabs ── */
  .league-scroll {
    gap: 10px;
    padding: 16px 24px 0;
    /* allow overflow scroll but mask the edges */
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }

  .league-icon {
    width: 56px;
    height: 56px;
  }

  /* ── Search row: search bar goes full width, converter button right ── */
  .search-row {
    padding: 14px 24px 0;
    gap: 12px;
  }

  /* ── Section head: slightly bigger label on desktop ── */
  .section-head {
    padding: 18px 24px 10px;
  }

  .section-title {
    font-size: 12px;
    letter-spacing: 2.5px;
  }

  /* ── Match list: two columns at ≥1100px ── */
  .matches-area {
    padding: 0 20px;
  }

  /* ── Match rows: cursor is already pointer, add hover state for desktop ── */
  .match-row:hover {
    background: var(--slate);
  }

  .league-header:hover {
    background: var(--slate);
  }

  /* ── Bet slip pill: anchor to bottom of content column, not viewport ── */
  .bs-pill {
    /* move it away from the rail and gutter */
    bottom: 24px;
    left: calc(64px + 50%); /* rail width + half content */
    transform: translateX(-50%);
  }

  /* Bet slip modal: centred dialog on desktop, not bottom sheet */
  .bs-overlay {
    align-items: center;
    background: rgba(5, 8, 26, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .bs-modal {
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    max-height: 80vh;
    /* no bottom sheet translate — just fade in centred */
    transform: none !important;
    margin-bottom: 0;
  }

  /* remove the drag handle on desktop */
  .bs-handle {
    display: none;
  }

  /* Code converter modal: centred dialog too */
  .cvt-overlay {
    align-items: center;
    background: rgba(5, 8, 26, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .cvt-modal {
    border-radius: 20px;
    max-width: 460px;
    width: 100%;
    max-height: 80vh;
    transform: none !important;
    padding-bottom: 0;
  }

  .cvt-handle { display: none; }

}

/* Masonry-style two columns at 1100px+ */
@media (min-width: 1100px) {

  .matches-area {
    column-count: 2;
    column-gap: 12px;
    padding: 0 20px;
  }

  /* Each league section is an unbreakable block — never splits mid-card */
  .league-section {
    break-inside: avoid;
    display: inline-block; /* required for break-inside to work reliably */
    width: 100%;
  }

}

/* ═══════════════════════════════════════════
   SLIPS PAGE — desktop layout

   The slip feed is a natural candidate for
   two-column masonry — cards vary in height
   depending on how many legs are in the slip.
   Same column-count trick as matches.
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* Topbar: wider breathing room */
  .slips-topbar {
    padding: 20px 24px 0;
  }

  /* Tabs: don't stretch full width */
  .slips-tabs {
    margin: 16px 24px 0;
  }

  /* Feed: give it space */
  .slips-feed {
    padding: 0 24px;
  }

}

@media (min-width: 1100px) {

  /* Two-column masonry for slip cards */
  .slips-feed {
    column-count: 2;
    column-gap: 14px;
    padding: 0 24px;
  }

  /* Each slip card is an unbreakable column block */
  .slip-card {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
  }

}

/* ═══════════════════════════════════════════
   COPED SLIPS — "Configuration Matrix"
   Four configuration sections arranged in a
   deliberate 2×2 grid: temporal controls left,
   selection controls right. Full-width header
   and CTA frame the matrix above and below.
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* ── Widen and grid-ify the app for this page ── */
  .app:has(.cp-section) {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    align-items: start;
  }

  /* ── Full-width structural rows ── */
  .cp-toast,
  .cp-header,
  .cp-counter-strip,
  .cp-build-section {
    grid-column: 1 / -1;
  }

  /* ── Header: wider breathing room ── */
  .cp-header {
    padding: 22px 16px 0;
  }

  /* ── Counter strip: horizontal info bar ── */
  .cp-counter-strip {
    padding: 16px 16px 0;
  }

  /* ── 2×2 section placement ──
     When (schedule) + Where (leagues) → left column
     What (markets) + How Many (risk) → right column
     No explicit grid-row — auto-placement pairs them correctly
     since they're in column-order in the DOM.
  ── */
  .cp-section[data-section="when"]    { grid-column: 1; }
  .cp-section[data-section="where"]   { grid-column: 1; }
  .cp-section[data-section="what"]    { grid-column: 2; }
  .cp-section[data-section="howmany"] { grid-column: 2; }

  /* ── Tighten vertical spacing between stacked sections ── */
  .cp-section { margin-top: 16px; }

  /* ── Build CTA: horizontal layout on desktop ──
     Summary key-values spread in a 2×2 mini-grid,
     Build button anchored to the right.
  ── */
  .cp-build-section {
    display: flex;
    align-items: stretch;
    gap: 20px;
    padding: 16px 16px 24px;
    margin-top: 8px;
    border-top: 1px solid var(--nav-border);
  }

  .cp-build-summary {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
    border-radius: 14px;
    background: var(--slab);
    border: 1px solid var(--dim);
    padding: 14px 16px;
    align-content: center;
  }

  .cp-build-summary-row {
    padding: 5px 0;
    border-top: none;
  }

  .cp-build-summary-row + .cp-build-summary-row {
    border-top: none;
  }

  /* Alternating rows separated by inner column border */
  .cp-build-summary-row:nth-child(odd) {
    padding-right: 16px;
    border-right: 1px solid var(--dim);
  }
  .cp-build-summary-row:nth-child(even) {
    padding-left: 16px;
  }
  .cp-build-summary-row:nth-child(3),
  .cp-build-summary-row:nth-child(4) {
    border-top: 1px solid var(--dim);
    padding-top: 9px;
    margin-top: 4px;
  }

  .cp-build-btn {
    flex-shrink: 0;
    width: 200px;
    min-height: 56px;
    align-self: stretch;
    font-size: 16px;
  }

  /* ── Overlays: centered dialog instead of bottom sheet ── */
  .cp-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cp-overlay-sheet {
    position: relative;
    bottom: auto; left: auto; right: auto;
    max-width: 480px;
    width: 90%;
    max-height: 78vh;
    border-radius: 20px;
    border: 1px solid var(--dim);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px var(--blue-10);
  }

  .cp-overlay.open .cp-overlay-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .cp-league-overlay .cp-overlay-sheet {
    max-width: 520px;
  }

  .cp-overlay-handle { display: none; }

  /* ── Counter card: edge-to-edge on desktop, no radius clipping needed ── */
  .cp-counter-card {
    border-radius: 12px;
  }

}

/* ═══════════════════════════════════════════
   COPED PREVIEW — "Slip Review Terminal"
   Game feed left (dominant), stat panel right
   (sticky). Counter lives on the right as a
   natural reading sidebar.

   ┌──────┬──────────────────────┬─────────┐
   │ RAIL │  GAME SELECTION FEED │  STATS  │
   │ 64px │  scrollable, 2-col   │  220px  │
   └──────┴──────────────────────┴─────────┘
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* ── App: 2-col grid with named areas.
     Named areas are explicit — no row number ambiguity.
     DOM order: topbar → counter-strip → games → empty → add-section
     counter-strip (panel area) spans both content rows so it
     fills the right column while the left column grows freely.

     ┌─────────────────────────┬──────────┐
     │         topbar          │  topbar  │
     ├─────────────────────────┼──────────┤
     │          games          │  panel   │
     ├─────────────────────────┤  panel   │
     │           add           │  panel   │
     └─────────────────────────┴──────────┘
  ── */
  .cpv-app {
    margin-left: 64px;
    min-height: 100vh;
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-areas:
      "topbar topbar"
      "games  panel"
      "add    panel";
    max-width: 1240px;
    align-items: start;
  }

  /* No pseudo-element needed — border-left on the panel handles the divider */
  .cpv-app::after { display: none; }

  /* ── Topbar ── */
  .cpv-topbar {
    grid-area: topbar;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--nav-border);
  }

  /* ── Left col: game feed ── */
  .cpv-games {
    grid-area: games;
    padding: 20px 24px 0;
  }

  .cpv-empty {
    grid-area: games; /* same cell — JS shows one or the other */
    padding: 60px 24px 0;
  }

  /* ── Left col: Add Random Game — directly below the game list ── */
  .cpv-add-section {
    grid-area: add;
    padding: 12px 24px 100px; /* 100px bottom clears the fixed footer */
  }

  .cpv-add-btn {
    width: 100%;
    padding: 12px 14px;
    font-size: 12px;
    animation: none;
    opacity: 1;
  }

  /* ── Right col: counter panel ──
     Spans both content rows via the "panel" named area.
     Reflows from a horizontal pill to a vertical column.
     border-left is the divider line — simpler than ::after.
     width: 100% keeps it from overflowing the 220px column.

     flex: none on counter-bar is CRITICAL — base CSS has
     flex:1 which stretches a 5px bar to fill full height
     in a flex-direction:column context.
  ── */
  .cpv-counter-strip {
    grid-area: panel;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 22px 16px 20px;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--nav-border);
    min-height: 0;
    background: rgba(8, 13, 30, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 1;
    animation: none;
  }

  [data-theme="light"] .cpv-counter-strip {
    background: rgba(240, 240, 244, 0.6);
  }

  .cpv-counter-strip::before {
    content: 'YOUR SLIP';
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--ghost);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nav-border);
  }

  .cpv-counter-bar {
    flex: none;
    width: 100%;
    height: 5px;
  }

  /* Footer spacer not needed — bottom nav is a left rail */
  .cpv-footer-spacer { display: none; }

  /* ── Footer: spans the game feed column only ── */
  .cpv-footer {
    left: 64px;
    right: 220px;
    bottom: 0;
    padding-bottom: 16px;
  }

  .cpv-continue-btn {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
  }

  .cpv-game:hover { border-color: var(--dim); }

  /* ── Market picker overlay: centered dialog ── */
  .cpv-market-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cpv-market-sheet {
    position: relative;
    bottom: auto; left: auto; right: auto;
    max-width: 420px;
    width: 90%;
    border-radius: 20px;
    border: 1px solid var(--dim);
    margin: 0;
    transform: translateY(12px);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--blue-10);
  }

  .cpv-market-overlay.open .cpv-market-sheet { transform: translateY(0); }
  .cpv-market-handle { display: none; }

}

/* ── 2-column masonry for game cards at wider viewports ── */
@media (min-width: 1100px) {

  .cpv-games {
    display: block; /* CSS columns requires block context, not flex */
    column-count: 2;
    column-gap: 12px;
    padding: 20px 24px 0;
  }

  /* Each game card is an unbreakable block */
  .cpv-game {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 12px;
  }

}

/* ═══════════════════════════════════════════
   COPED BOOKING — "Launch Sequence"
   Left panel: bookmaker selector (sticky)
   Right panel: booking code + selections list
   The metaphor: select your platform,
   then see the code and payload side by side.
   ═══════════════════════════════════════════ */

@media (min-width: 960px) {

  /* ── App: grid split offset from rail ── */
  .cs-app {
    margin-left: 64px;
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
    align-items: start;
    padding-bottom: 0;
  }

  /* ── Topbar: stays in the left column ── */
  .cs-topbar {
    grid-column: 1;
    grid-row: 1;
    padding-top: 20px;
    border-right: 1px solid var(--nav-border);
    animation: none;
    opacity: 1;
  }

  /* ── "Choose Bookmaker" label: left col, row 2 ── */
  .cs-app > .cs-section-label {
    grid-column: 1;
    grid-row: 2;
    padding: 16px 20px 8px;
    border-right: 1px solid var(--nav-border);
    animation: none;
    opacity: 1;
  }

  /* ── Bookmaker grid: vertical stack in the left panel ──
     Mobile horizontal scroll becomes a sticky vertical list.
     Gives each platform a proper card row.
  ── */
  .cs-bookmakers {
    grid-column: 1;
    grid-row: 3;
    flex-direction: column;
    overflow-x: visible;
    gap: 6px;
    padding: 4px 16px 24px;
    position: sticky;
    top: 0;
    align-self: start;
    border-right: 1px solid var(--nav-border);
    background: rgba(8, 13, 30, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: calc(100vh - 136px);
    opacity: 1;
    animation: none;
  }

  [data-theme="light"] .cs-bookmakers {
    background: rgba(240, 240, 244, 0.6);
  }

  /* Each bookmaker becomes a horizontal row card */
  .cs-bookie {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
  }

  .cs-bookie:hover {
    background: var(--overlay);
    border-color: var(--dim);
  }

  .cs-bookie.active {
    background: var(--overlay);
    border-color: var(--blue-20);
  }

  /* Override mobile's upward nudge on active icon — looks wrong in a row */
  .cs-bookie.active .cs-bookie-icon {
    transform: none;
  }

  .cs-bookie-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .cs-bookie-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--chalk);
    text-align: left;
  }

  /* ── Right column: booking code + selections ── */
  .cs-code-section {
    grid-column: 2;
    grid-row: 1 / 3;
    opacity: 1;
    animation: none;
    padding-top: 20px;
  }

  .cs-games-section {
    grid-column: 2;
    grid-row: 3;
  }

  /* Code card: slightly larger on desktop */
  .cs-code-card {
    margin: 0 24px;
  }

  .cs-code-value {
    font-size: 24px;
    letter-spacing: 4px;
  }

  /* Selections section label: padded for desktop */
  .cs-games-section .cs-section-label {
    padding: 20px 24px 10px;
  }

  .cs-games {
    padding: 0 24px;
  }

  /* ── Toast: offset to right panel ── */
  .cs-toast {
    left: calc(64px + 300px);
    border-radius: 0 0 16px 16px;
  }

}

/* ─── Wider screens: panels gain breathing room ─── */
@media (min-width: 1280px) {

  /* Preview: wider stat panel */
  .cpv-app {
    grid-template-columns: 1fr 260px;
  }

  .cpv-footer {
    right: 260px;
  }

  /* Booking: wider bookmaker panel */
  .cs-app {
    grid-template-columns: 340px 1fr;
  }

  .cs-toast {
    left: calc(64px + 340px);
  }

}