/* Cricket Buzz commits to one visual world: a sunlit, light pitch —
     no dark variant, by design, regardless of the viewer's system theme. */
  :root{
    color-scheme: light;
    --bg:#F5F7EE;
    --bg-stripe:#EEF3E3;
    --sky-1:#EAF4EF;
    --sky-2:#F8F6E9;
    --surface:#FFFFFF;
    --surface-2:#EBF0E1;
    --ink:#1E2A1B;
    --ink-soft:#57634B;
    --accent:#2E6A38;
    --accent-ink:#FFFFFF;
    --accent-2:#B3841C;
    --coral:#C1573D;
    --line:#DCE3CE;
    --shadow: 30,42,27;
    --tag-cpl-bg:#E4F1EE;      --tag-cpl-fg:#1B6E63;
    --tag-hundred-bg:#F1E9F6; --tag-hundred-fg:#6C3E92;
    --tag-asia-bg:#FBEAE3;    --tag-asia-fg:#B5502A;
    --tag-mlc-bg:#FDF0DE;     --tag-mlc-fg:#A9660F;
    --tag-intl-bg:#E6EEF6;    --tag-intl-fg:#2E5B8A;
    --men-bg:#1B6E82; --men-fg:#FFFFFF;
    --women-bg:#A23E72; --women-fg:#FFFFFF;
    font-size:16px;
  }

  *{box-sizing:border-box;}
  ::selection{ background: var(--accent); color: var(--accent-ink); }

  body{
    margin:0;
    background-color: var(--bg);
    background-image:
      radial-gradient(1250px 560px at 50% -10%, color-mix(in srgb, var(--sky-1) 88%, #fff) 0%, transparent 64%),
      radial-gradient(900px 480px at 94% 6%, color-mix(in srgb, var(--sky-2) 82%, #fff) 0%, transparent 62%),
      repeating-linear-gradient(
        100deg,
        var(--bg) 0px, var(--bg) 64px,
        var(--bg-stripe) 64px, var(--bg-stripe) 128px
      );
    background-attachment: fixed, fixed, scroll;
    color: var(--ink);
    font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.3em;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3, .wordmark{
    font-family: "Fraunces", ui-serif, Georgia, serif;
    font-weight: 600;
    text-wrap: balance;
    margin: 0;
  }

  .mono{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; }

  a{ color: var(--accent); }

  .page{
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 4rem;
  }

  /* ---------- top bar ---------- */
  .topbar{
    position: sticky; top:0; z-index: 20;
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem;
    padding: 0.85rem 1.25rem;
    margin: -1.75rem -1.5rem 0;
    background: rgba(var(--shadow), 0.035);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .brand{ display:flex; align-items:center; gap:0.6rem; }
  .brand svg{ width:1.9rem; height:1.9rem; flex:none; }
  .wordmark{ font-size:1.05rem; letter-spacing:0.01em; }
  .topbar .meta{
    font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
    color: var(--ink-soft);
  }
  .topbar .meta strong{
    color: var(--accent); font-weight:600;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- category tiles: the page's front door ---------- */
  .tiles-stage{ padding: 2.4rem 0 1.2rem; text-align:center; }
  .tiles-lede{
    max-width: 34rem; margin: 0 auto;
    color: var(--ink-soft); font-size: 0.95rem;
  }
  .tiles-kicker{
    display:block;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
    color: var(--accent); margin-bottom:0.6rem;
  }
  .tiles-stage h1{
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height:1.1; margin:0 0 0.7rem;
  }
  .tiles{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    max-width: 1080px;
    margin: 2.4rem auto 0;
    justify-items:center; align-items:stretch;
  }
  @media (max-width: 1000px){
    .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); max-width:720px; }
  }
  @media (max-width: 660px){
    .tiles{ grid-template-columns: 1fr; max-width:420px; }
  }

  .tile{
    all:unset; box-sizing:border-box; cursor:pointer;
    position:relative; display:flex; flex-direction:column;
    width:100%; height:100%; text-align:left;
    background: var(--surface);
    border:1px solid var(--line);
    border-radius:1.15rem;
    overflow:hidden;
    /* stacked shadows: a tight contact shadow, a mid lift, and a wide
       ambient pool — one blurred shadow alone reads flat at this size */
    box-shadow:
      0 1px 2px rgba(var(--shadow), .07),
      0 14px 26px -16px rgba(var(--shadow), .38),
      0 34px 60px -32px rgba(var(--shadow), .48);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .2s ease;
  }
  .tile:hover, .tile:focus-visible{
    transform: translateY(-9px);
    border-color: var(--accent);
    box-shadow:
      0 2px 4px rgba(var(--shadow), .09),
      0 26px 42px -18px rgba(var(--shadow), .45),
      0 60px 92px -40px rgba(var(--shadow), .52);
  }
  .tile:focus-visible{ outline:3px solid var(--accent-2); outline-offset:4px; }
  .tile:active{ transform: translateY(-3px); }

  /* every tile image occupies exactly this box, whatever the source */
  .tile-art{
    position:relative; aspect-ratio: 3 / 2; overflow:hidden;
    background: linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 55%, var(--ink)) 100%);
  }
  .tile-art img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition: transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .tile:hover .tile-art img{ transform: scale(1.07); }
  .tile-art::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, rgba(var(--shadow), .05) 0%, transparent 42%, rgba(var(--shadow), .58) 100%);
  }
  .tile-art::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  /* stand-in art for a category whose photo hasn't been supplied yet —
     same box, same crop, so dropping the photo in changes nothing else */
  .tile-art.generated{ display:grid; place-items:center; }
  .tile-art.generated > svg{ width:38%; height:38%; color: rgba(255,255,255,.5); }
  .tile-art.generated .stand-in{
    position:absolute; bottom:.7rem; left:0; right:0; z-index:2;
    font-family:"IBM Plex Mono",monospace; font-size:.6rem;
    letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.72);
    text-align:center;
  }
  .tile-badge{
    position:absolute; left:1rem; bottom:1rem; z-index:2;
    width:2.7rem; height:2.7rem; border-radius:50%;
    display:grid; place-items:center;
    background: var(--surface); color: var(--accent);
    box-shadow: 0 6px 14px -6px rgba(var(--shadow), .6);
  }
  .tile-badge svg{ width:1.4rem; height:1.4rem; }

  .tile-body{ padding: 1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
  .tile h2{
    font-size: clamp(1.65rem, 2.7vw, 2.3rem);
    line-height:1.05; margin:0;
  }
  .tile .tagline{
    font-family:"IBM Plex Mono",monospace;
    font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase;
    color: var(--accent-2); margin:0.4rem 0 0.55rem;
  }
  .tile .blurb{ margin:0; font-size:0.87rem; color: var(--ink-soft); line-height:1.45; }
  .tile .tile-foot{
    margin-top:auto; padding-top:1rem;
    display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  }
  .tile .count{
    font-family:"IBM Plex Mono",monospace; font-size:0.7rem;
    color: var(--ink-soft); font-variant-numeric: tabular-nums;
  }
  .tile .go{
    display:inline-flex; align-items:center; gap:0.4rem;
    font-family:"Karla",sans-serif; font-size:0.75rem; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase;
    color: var(--accent-ink); background: var(--accent);
    border-radius:999px; padding:0.38rem 0.85rem;
    transition: gap .2s ease;
  }
  .tile:hover .go{ gap:0.7rem; }
  .tile .go svg{ width:0.7rem; height:0.7rem; }

  /* ---------- category header (shown once a tile is opened) ---------- */
  .cat-bar{ max-width:920px; margin: 1.6rem auto 0; }
  .cat-back{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:inline-flex; align-items:center; gap:0.45rem;
    font-family:"IBM Plex Mono",monospace; font-size:0.68rem;
    letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-soft);
    padding:0.4rem 0.85rem; border-radius:999px;
    border:1px solid var(--line); background: var(--surface);
    box-shadow: 0 1px 2px rgba(var(--shadow), .06);
    transition: color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .cat-back:hover{ color: var(--accent); border-color: var(--accent); transform: translateX(-2px); }
  .cat-back:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .cat-back svg{ width:0.65rem; height:0.65rem; }
  .cat-id{ display:flex; align-items:center; gap:0.8rem; margin:1.1rem 0 0.35rem; }
  .cat-id .cat-icon{
    width:2.6rem; height:2.6rem; border-radius:0.8rem; flex:none;
    display:grid; place-items:center;
    background: var(--accent); color: var(--accent-ink);
    box-shadow: 0 8px 18px -10px rgba(var(--shadow), .6);
  }
  .cat-id .cat-icon svg{ width:1.35rem; height:1.35rem; }
  .cat-id h1{ font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height:1.1; }
  .cat-blurb{ margin:0; color: var(--ink-soft); font-size:0.92rem; }
  .cat-empty{
    max-width:920px; margin: 2.4rem auto; padding: 2.4rem 1.5rem;
    text-align:center; color: var(--ink-soft);
    background: var(--surface); border:1px dashed var(--line); border-radius:1rem;
  }
  .cat-empty strong{ color: var(--ink); }

  /* view switching: the tile stage and the category view never coexist */
  body[data-view="home"] .cat-bar,
  body[data-view="home"] .cat-empty,
  body[data-view="home"] .toolbar,
  body[data-view="home"] .no-results,
  body[data-view="home"] .layout,
  body[data-view="home"] .rail{ display:none !important; }
  body[data-view="category"] .tiles-stage{ display:none !important; }
  /* a category with nothing in it yet shows only its header and the notice */
  body[data-cat-empty="true"] .toolbar,
  body[data-cat-empty="true"] .no-results,
  body[data-cat-empty="true"] .layout,
  body[data-cat-empty="true"] .rail{ display:none !important; }

  .hero{ padding: 1.6rem 0 0; }
  .hero-art{
    position:relative;
    margin-top: 0.4rem;
    border-radius: 1.1rem;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -24px rgba(var(--shadow), 0.45);
  }
  .hero-art img{
    width:100%;
    height:clamp(240px, 42vw, 460px);
    object-fit:cover; object-position:center 28%;
    display:block;
    transform: scale(1.08); /* headroom for the scroll parallax below */
  }
  .hero-art::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 60%, rgba(var(--shadow), .5) 100%);
    pointer-events:none;
  }
  .hero-art::before{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:5px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    z-index:1;
  }

  /* ---------- search + sort toolbar ---------- */
  .toolbar{
    display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem;
    margin: 1.5rem 0 0.3rem;
  }
  .search-field{
    flex:1 1 260px;
    display:flex; align-items:center; gap:0.6rem;
    background: var(--surface);
    border:1px solid var(--line); border-radius:999px;
    padding: 0.6rem 1.1rem;
    box-shadow: 0 1px 2px rgba(var(--shadow), 0.05);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .search-field:focus-within{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .search-field svg{ width:1rem; height:1rem; color: var(--ink-soft); flex:none; }
  .search-field input{
    all:unset; flex:1 1 auto;
    font-family:"Karla", ui-sans-serif, sans-serif; font-size:0.88rem; color: var(--ink);
  }
  .search-field input::placeholder{ color: var(--ink-soft); }
  .search-field input::-webkit-search-cancel-button{ cursor:pointer; }

  .sort-field{
    display:flex; align-items:center; gap:0.55rem;
    font-family:"IBM Plex Mono",monospace; font-size:0.66rem;
    letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-soft);
  }
  .sort-field select{
    font-family:"Karla", ui-sans-serif, sans-serif; font-size:0.85rem; color: var(--ink);
    background: var(--surface); border:1px solid var(--line); border-radius:999px;
    padding: 0.5rem 2.1rem 0.5rem 1rem;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2357634B'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position: right 0.85rem center; background-size:0.65rem;
    cursor:pointer;
  }
  .sort-field select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .no-results{
    text-align:center; color: var(--ink-soft); font-size:0.92rem;
    padding: 2.75rem 1rem; margin:0;
  }

  /* while a search is active, every visible run stays fully expanded
     regardless of its own open/closed state, so results are never hidden
     behind a collapsed accordion */
  .searching .run .run-body{
    grid-template-rows: 1fr !important;
    visibility: visible !important;
  }
  .filtered-out{ display:none !important; }

  /* ---------- layout: rail + runs ---------- */
  .layout{ display:grid; grid-template-columns: 1fr; gap: 0; position:relative;
    max-width: 920px; margin-inline: auto; width:100%; }
  .toolbar, .no-results, .foot{ max-width: 920px; margin-inline: auto; }
  .rail{
    position: fixed; right: max(1.1rem, calc(50% - 460px - 3rem));
    top: 50%; transform: translateY(-50%);
    display:flex; flex-direction:column; gap:0.9rem;
    z-index: 15;
  }
  /* dot-only by design — a label that expands on hover/active would grow
     this fixed-position, right-anchored box leftward into the page content
     (its width was shrink-wrapped, so any growth ate into the content
     column). A native title tooltip gives the run name without that risk. */
  .rail a{
    display:flex; align-items:center;
    padding: 0.3rem;
    text-decoration:none;
  }
  .rail .dot{
    width:0.5rem; height:0.5rem; border-radius:50%;
    background: var(--line); flex:none;
    transition: background .25s ease, transform .25s ease;
  }
  .rail a:hover .dot{ background: var(--accent-2); }
  .rail a.active .dot{ background: var(--accent); transform:scale(1.5); }

  @media (max-width: 1180px){ .rail{ display:none; } }

  .runs{ display:flex; flex-direction:column; gap:2.75rem; margin-top:1.5rem; }

  .run{ scroll-margin-top: 5.5rem; }
  .run-head{
    all:unset; box-sizing:border-box; cursor:pointer;
    display:flex; flex-wrap:wrap; align-items:baseline; gap:0.6rem 1rem;
    width:100%;
    padding: 0.9rem 1.1rem;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
    border-radius: 0.4rem;
    transition: background .15s ease;
  }
  .run-head:hover{ background: color-mix(in srgb, var(--surface-2) 70%, var(--accent) 8%); }
  .run-head:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  .run-head .tag-run{
    font-family:"IBM Plex Mono",monospace; font-size:0.68rem;
    letter-spacing:0.08em; text-transform:uppercase; color: var(--accent-2);
  }
  .run-head h2{ font-size:1.28rem; flex:1 1 auto; min-width:14rem; }
  .run-head .date{
    font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color: var(--ink-soft);
  }
  .run-head .chev{
    width:1rem; height:1rem; color: var(--ink-soft);
    transition: transform .3s ease;
  }
  .run.open .run-head .chev{ transform: rotate(90deg); }

  /* only rendered when navigator.clipboard is actually usable (a secure
     context — http(s), not file://) */
  .run-head .copy-link{
    all:unset; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    width:1.9rem; height:1.9rem; border-radius:50%;
    color: var(--ink-soft);
    transition: background .15s ease, color .15s ease, transform .2s ease;
  }
  .run-head .copy-link:hover{ background: var(--surface); color: var(--accent); }
  .run-head .copy-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  .run-head .copy-link svg{ width:0.95rem; height:0.95rem; }
  .run-head .copy-link.copied{ color: var(--accent); transform: scale(1.2); }

  /* accordion body — animates via the grid-template-rows trick so height
     never has to be measured in JS, and content stays in the DOM (and
     reachable by ScrollTrigger / pagination) while collapsed. */
  .run-body{
    display:grid; grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .4s ease, visibility 0s linear .4s;
  }
  .run.open .run-body{
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .4s ease, visibility 0s linear 0s;
  }
  .run-body-inner{ overflow:hidden; min-height:0; }
  .run-body-pad{ padding-top: 1.1rem; }
  .new-badge{
    display:inline-flex; align-items:center; gap:0.35rem;
    background: var(--coral); color: var(--surface);
    font-family:"IBM Plex Mono",monospace; font-size:0.6rem;
    letter-spacing:0.08em; text-transform:uppercase;
    padding: 0.2rem 0.5rem; border-radius:999px;
  }
  .new-badge .blip{
    width:0.4rem; height:0.4rem; border-radius:50%; background:var(--surface);
    animation: blip 1.6s ease-in-out infinite;
  }
  @keyframes blip{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }

  /* boundary-rope divider between runs */
  .divider{
    display:flex; align-items:center; justify-content:center;
    margin: 0.4rem 0 -0.6rem;
  }
  .divider svg{ width:100%; max-width:220px; height:16px; }
  .divider path{ fill:none; stroke: var(--accent-2); stroke-width:2; stroke-dasharray: 1 9; stroke-linecap:round; opacity:.6; }
  .divider circle{ fill: var(--accent-2); opacity:.7; }

  .cards{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    padding: 1.2rem;
  }

  .card{
    position:relative;
    display:flex; flex-direction:column;
    text-align:left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 1rem 1.1rem 1.1rem;
    box-shadow:
      0 1px 2px rgba(var(--shadow), 0.06),
      0 8px 18px -12px rgba(var(--shadow), 0.30);
    opacity:0; transform: translateY(14px);
    overflow:hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card.in{ opacity:1; transform:none; }
  .card:hover{
    border-color: var(--accent);
    box-shadow:
      0 2px 4px rgba(var(--shadow), 0.08),
      0 16px 30px -14px rgba(var(--shadow), 0.42);
    transform: translateY(-3px);
  }
  .card .corner-ball{
    position:absolute; top:1.7rem; right:-0.8rem;
    width:2.6rem; height:2.6rem; opacity:0.07;
    transition: transform .5s ease, opacity .3s ease;
  }
  .card:hover .corner-ball{ transform: rotate(140deg); opacity:0.16; }

  /* Match Willow's replay tile: the actual image and its exact listing title
     come first; our neutral identifying details remain visible underneath. */
  .willow-poster{
    position:relative; overflow:hidden; display:block;
    margin:-1rem -1.1rem .85rem; aspect-ratio:16 / 9;
    background:var(--surface-2);
  }
  .willow-poster img{ display:block; width:100%; height:100%; object-fit:cover; }
  a.willow-poster:focus-visible{ outline:3px solid var(--accent-2); outline-offset:-3px; }
  .willow-poster .play-mark{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:2.5rem; height:2.5rem; border-radius:50%; background:rgba(0,0,0,.75);
    display:flex; align-items:center; justify-content:center; color:white;
    font-size:1rem; padding-left:.12rem; pointer-events:none;
  }
  .willow-kicker{
    margin:0 0 .22rem; color:var(--ink-soft); font-size:.66rem;
    font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  }
  .willow-title{
    margin:0 0 .55rem; color:var(--ink); font-family:"Karla",ui-sans-serif,sans-serif;
    font-size:1rem; font-weight:700; line-height:1.35; overflow-wrap:anywhere;
  }
  .willow-unavailable{ color:var(--ink-soft); font-size:.78rem; font-weight:600; margin:0 0 .55rem; }
  .series-name{ margin:0 0 .22rem; color:var(--ink); font-size:.82rem; font-weight:700; line-height:1.35; }
  .series-expansion{ margin:0 0 .65rem; color:var(--ink-soft); font-size:.73rem; line-height:1.4; }
  .card .date{ justify-content:flex-start; }
  .card > .matchno{ align-self:flex-start; }
  .card .matchup{ text-align:left; }
  .card .matchup .team{ font-family:"Karla",ui-sans-serif,sans-serif; font-size:.87rem; font-weight:700; }
  .card .matchup .vs{ display:inline; margin:0 .25rem; font-size:.7rem; }
  .card .matchup .team{ display:inline; }
  /* Keep watched cards readable and usable while making them visually quieter. */
  .card.is-watched{ background:color-mix(in srgb, var(--surface) 72%, #bcc4bc); }
  .card.is-watched .willow-poster img{ filter:grayscale(.8); opacity:.7; }
  .card.is-watched .watch-btn{
    background:var(--surface); color:var(--ink); border-color:var(--ink-soft);
    box-shadow:none;
  }
  .card.is-watched .watch-btn:hover{ background:var(--surface-2); }
  .watched-indicator{
    display:inline-flex; align-self:flex-start; align-items:center; gap:.3rem;
    margin:0 0 .65rem; padding:.2rem .6rem; border-radius:999px;
    border:1px solid var(--ink-soft); color:var(--ink); background:var(--surface);
    font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  }

  /* "mark as watched" — the card's one call to action, so it reads as a
     real button at rest: solid accent fill, a written label, full width.
     It used to be a 55%-opacity icon in the corner that only resolved on
     hover, which made it invisible on touch and easy to miss on desktop. */
  .card .watch-btn{
    all:unset; box-sizing:border-box; cursor:pointer;
    position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center; gap:0.45rem;
    width:100%; min-height:2.3rem;
    margin-top:auto; padding:0.45rem 0.8rem;
    border-radius:999px;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    font-family:"Karla", ui-sans-serif, sans-serif;
    font-size:0.78rem; font-weight:700;
    letter-spacing:0.05em; text-transform:uppercase;
    box-shadow: 0 2px 6px -2px rgba(var(--shadow), 0.45);
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .card .watch-btn svg{ width:1rem; height:1rem; flex:none; }
  .card > .matchno{ align-self:flex-start; }
  .card .watch-btn:hover{
    background: color-mix(in srgb, var(--accent) 82%, #000);
    border-color: color-mix(in srgb, var(--accent) 82%, #000);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(var(--shadow), 0.55);
  }
  .card .watch-btn:active{ transform: translateY(0); box-shadow: 0 1px 3px -1px rgba(var(--shadow), 0.45); }
  .card .watch-btn:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; }
  .card .replay-link{
    display:flex; align-items:center; justify-content:center;
    min-height:2.3rem; margin-top:auto; margin-bottom:.55rem; padding:.45rem .8rem;
    border:1px solid var(--accent); border-radius:999px;
    color:var(--accent); background:var(--surface); text-decoration:none;
    font-family:"Karla", ui-sans-serif, sans-serif; font-size:.78rem;
    font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  }
  .card .replay-link:hover{ background:var(--bg-stripe); }
  .card .replay-link:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }
  .card .replay-link + .watch-btn{ margin-top:0; }
  .card .replay-group{ margin-top:auto; margin-bottom:.55rem; }
  .card .replay-group > summary{ margin:0; cursor:pointer; list-style:none; }
  .card .replay-group > summary::-webkit-details-marker{ display:none; }
  .card .replay-days{ display:grid; grid-template-columns:1fr; gap:.4rem; padding-top:.5rem; }
  .card .replay-days a{
    display:flex; align-items:center; gap:.55rem; min-width:0;
    border:1px solid var(--line); border-radius:.5rem; padding:.4rem;
    color:var(--accent); background:var(--surface-2); text-align:left;
    text-decoration:none; font-size:.78rem; font-weight:700;
  }
  .card .replay-days img{ display:block; width:4rem; aspect-ratio:16 / 9; object-fit:cover; border-radius:.25rem; flex:none; }
  .card .replay-days span{ min-width:0; overflow-wrap:anywhere; line-height:1.3; }
  .card .replay-days a:hover{ background:var(--bg-stripe); }
  .card .replay-days a:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }
  .card .replay-group + .watch-btn{ margin-top:0; }
  .willow-path{ margin:.45rem 0 .7rem; font-size:.76rem; line-height:1.45; }
  .willow-path summary{ cursor:pointer; color:var(--accent); font-weight:700; }
  .willow-path summary:focus-visible, .willow-path a:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }
  .willow-path-warning{ padding:.6rem; margin:.5rem 0; border:1px solid var(--line); border-radius:.4rem; background:var(--surface-2); }
  .willow-path ol{ list-style:none; padding:0; margin:.45rem 0 0; }
  .willow-path li{ display:inline; overflow-wrap:anywhere; }
  .willow-path li + li::before{ content:' → '; color:var(--ink-soft); }
  .willow-path a{ color:var(--accent); }

  /* large, prominent men's/women's section heading — the whole group sits under one */
  .gender-group + .gender-group{ margin-top: 1.6rem; }
  .gender-heading{
    display:flex; align-items:center; gap:0.7rem;
    padding: 0.55rem 0.9rem;
    margin: 0 0 0.9rem;
    border-radius: 0.6rem;
    font-family:"Fraunces", ui-serif, Georgia, serif;
    font-weight:600; font-size:1.08rem; letter-spacing:0.01em;
    width: fit-content;
  }
  .gender-heading svg{ width:1.9rem; height:1.9rem; flex:none; }
  .gender-heading.men{ background: var(--men-bg); color: var(--men-fg); }
  .gender-heading.women{ background: var(--women-bg); color: var(--women-fg); }

  /* series panel — one per competition within a gender group. Banner carries
     the competition name (so cards no longer repeat it) in that competition's
     color; the body gets a subtle tint of the same color instead of plain white. */
  .series-panel{
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 10px 26px -18px rgba(var(--shadow), 0.4);
  }
  .series-panel + .series-panel{ margin-top: 1.2rem; }
  .series-panel .banner{
    display:flex; flex-direction:column; align-items:center; gap:0.15rem;
    text-align:center; color:#fff;
    padding: 1.1rem 1.3rem 1rem;
  }
  .series-panel .banner svg{ width:1.8rem; height:1.8rem; opacity:.92; }
  .series-panel .banner h3{
    font-family:"Oswald", ui-sans-serif, system-ui, sans-serif;
    font-weight:700; font-size: clamp(1.35rem, 3vw, 1.9rem);
    letter-spacing:0.03em; text-transform:uppercase; margin:0.1rem 0 0;
  }
  .series-panel .banner .count{
    font-family:"IBM Plex Mono",monospace; font-size:0.64rem;
    letter-spacing:0.1em; text-transform:uppercase; opacity:.85;
  }
  .series-panel.cpl .banner{ background: var(--tag-cpl-fg); }
  .series-panel.cpl .cards{ background: var(--tag-cpl-bg); }
  .series-panel.hundred .banner{ background: var(--tag-hundred-fg); }
  .series-panel.hundred .cards{ background: var(--tag-hundred-bg); }
  .series-panel.asia .banner{ background: var(--tag-asia-fg); }
  .series-panel.asia .cards{ background: var(--tag-asia-bg); }
  .series-panel.mlc .banner{ background: var(--tag-mlc-fg); }
  .series-panel.mlc .cards{ background: var(--tag-mlc-bg); }
  .series-panel.intl .banner{ background: var(--tag-intl-fg); }
  .series-panel.intl .cards{ background: var(--tag-intl-bg); }
  .series-panel.wbbl .banner{ background: var(--accent); }
  .series-panel.wbbl .cards{ background: var(--bg-stripe); }

  .card .date{
    display:flex; align-items:center; justify-content:flex-start; gap:0.35rem;
    font-family:"IBM Plex Mono",monospace; font-size:0.68rem;
    color: var(--ink-soft);
    margin-bottom: 0.6rem;
  }
  .card .date svg{ width:0.85rem; height:0.85rem; flex:none; }

  /* large, prominent match-number pill — Willow's own label, verbatim */
  .matchno{
    display:inline-flex; align-items:center;
    border: 2px solid transparent;
    font-family:"Oswald", "IBM Plex Mono", monospace;
    font-weight:600; font-size:0.95rem; letter-spacing:0.05em;
    text-transform:uppercase;
    color: var(--accent-ink);
    background: var(--accent);
    padding: 0.32rem 0.9rem; border-radius: 999px;
    white-space: nowrap;
    margin: 0 0 0.65rem;
  }

  .card .matchno{
    background: var(--surface);
    color: var(--accent);
    border-color: var(--accent);
    max-width:100%; white-space:normal; line-height:1.25;
  }

  .matchup{ line-height:1.3; }
  .card .matchup{ margin-bottom:0.95rem; }
  .matchup .team{
    display:block;
    font-family:"Oswald", ui-sans-serif, system-ui, sans-serif;
    font-weight:700; font-size:1.22rem; letter-spacing:0.01em;
    color: var(--ink);
  }
  .matchup .vs{
    display:block; font-family:"IBM Plex Mono",monospace;
    font-size:0.62rem; color: var(--accent-2); margin:0.25rem 0;
    letter-spacing:0.08em;
  }

  /* Live listings are independent of the saved replay archive. */
  .live-section{
    margin:1.2rem 0 0; padding:1.1rem 1.2rem;
    background:var(--surface); border:1px solid var(--line); border-radius:1rem;
    box-shadow:0 6px 20px -18px rgba(var(--shadow), .55);
  }
  .live-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.65rem 1rem; }
  .live-head h2{ font-size:1.35rem; line-height:1.2; }
  .live-head button{
    border:1px solid var(--accent); border-radius:999px; background:var(--surface);
    color:var(--accent); padding:.4rem .8rem; font:inherit; font-size:.8rem;
    font-weight:700; cursor:pointer;
  }
  .live-head button:hover:not(:disabled){ background:var(--bg-stripe); }
  .live-head button:focus-visible, .live-link:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }
  .live-head button:disabled{ opacity:.55; cursor:wait; }
  .live-status{ margin:.55rem 0 0; color:var(--ink-soft); font-size:.85rem; line-height:1.4; }
  .live-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 19rem), 1fr)); gap:.8rem; margin:.8rem 0 0; }
  .live-list:empty{ display:none; }
  .live-card{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
    padding:.9rem 1rem; border:1px solid var(--line); border-radius:.75rem; background:var(--bg); }
  .live-badge{ display:inline-flex; align-items:center; gap:.4rem; color:#9e3829; font-family:"IBM Plex Mono",monospace;
    font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; }
  .live-badge::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
  .live-card h3{ font-family:"Karla",ui-sans-serif,sans-serif; font-size:1rem; line-height:1.35; font-weight:700; }
  .live-series{ margin:0; font-size:.8rem; color:var(--ink-soft); line-height:1.35; }
  .live-link{ margin-top:.25rem; padding:.4rem .8rem; border-radius:999px; background:var(--accent);
    color:var(--accent-ink); font-size:.78rem; font-weight:700; text-decoration:none; }
  .live-link:hover{ background:color-mix(in srgb, var(--accent) 82%, var(--ink)); }
  .live-warning{ margin:.8rem 0 0; color:var(--ink-soft); font-size:.75rem; line-height:1.4; }
  .history-tools{max-width:920px;margin:1.5rem auto;padding:1rem;border:1px solid var(--line);border-radius:.6rem;background:var(--surface);}
  .history-tools summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;}
  .history-actions{display:flex;gap:.6rem;flex-wrap:wrap;}
  .history-actions button{min-height:44px;padding:.5rem .85rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;}
  .history-tools p{font-size:.85rem;line-height:1.5;color:var(--ink-soft);}
  .suite-link{color:var(--accent);min-height:44px;display:inline-flex;align-items:center;}
  @media(max-width:600px){
    .topbar,.availability-banner,.live-head{flex-wrap:wrap;gap:.75rem;}
    button,.live-link,.watch-btn,.replay-link,.cat-back,select,input[type="search"]{min-height:44px;}
    select,input[type="search"]{font-size:16px;}
  }

  .availability-banner{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    margin:1rem 0 0; padding:.75rem 1rem;
    border:1px solid var(--line); border-radius:.75rem;
    background:var(--surface); color:var(--ink-soft);
    font-family:"Karla",ui-sans-serif,sans-serif; font-size:.87rem; line-height:1.4;
  }
  .availability-banner p{ margin:0; }
  .availability-banner button{
    flex:none; border:1px solid var(--accent); border-radius:999px;
    background:var(--surface); color:var(--accent); padding:.45rem .8rem;
    font:inherit; font-weight:700; cursor:pointer;
  }
  .availability-banner button:hover:not(:disabled){ background:var(--bg-stripe); }
  .availability-banner button:focus-visible{ outline:3px solid var(--accent-2); outline-offset:2px; }
  .availability-banner button:disabled{ opacity:.55; cursor:wait; }
  @media (max-width:480px){ .availability-banner{ align-items:flex-start; flex-direction:column; } }

  /* ---------- footer ---------- */
  .foot{
    margin-top:3.5rem; padding-top:1.4rem; border-top:1px solid var(--line);
    color: var(--ink-soft); font-size:0.78rem;
  }

  @media (prefers-reduced-motion: reduce){
    .card{ opacity:1 !important; transform:none !important; transition:none !important; }
    .new-badge .blip{ animation:none !important; }
    .card .corner-ball{ transition:none !important; }
    .run-body{ transition:none !important; }
    .run-head .chev{ transition:none !important; }
  }