@font-face{font-family:"VALVE Oracle"; src:url(../fonts/valveoracle-semibold.woff2) format("woff2"); font-weight:600; font-display:swap}
  @font-face{font-family:"Radiance"; src:url(../fonts/radiance-regular.woff2) format("woff2"); font-weight:400; font-display:swap}
  @font-face{font-family:"Radiance"; src:url(../fonts/radiance-semibold.woff2) format("woff2"); font-weight:600; font-display:swap}

  /* Deadlock Premier design system tokens */
  :root{
    --gold:#C49C47; --gold-dim:#5C4C28; --white:#F5F5F5; --slot-grey:#949494;
    --card:#181818; --score-box:#242424; --panel:#1D1D1D; --stage-black:#111111; --edge-black:#0E0E0E;
    --divider:#3C3C3C; --twitch:#9146FF; --amber:#FF8408; --amber-muted:#674E38; --sapphire:#649AAE; --sapphire-deep:#2F4E64;
    --on-gold:#181818;
    --display:"VALVE Oracle","Arial Narrow",Impact,sans-serif;
    --body:Radiance,"Segoe UI",Arial,sans-serif;
    --stroke-rule:4px; --stroke-card:3px; --hair:1px;
    --shadow-card:0 8px 24px rgba(0,0,0,.6);
    color-scheme:dark;
  }
  *,*::before,*::after{box-sizing:border-box}
  body{margin:0; min-height:100vh; background:var(--stage-black); color:var(--white); font-family:var(--body); font-size:15px; line-height:1.5;
       -webkit-font-smoothing:antialiased; padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
  a{color:inherit}
  a:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

  /* ---------- Stage: video ground + Amber left / Sapphire right flanks ---------- */
  .bg{position:fixed; inset:0; z-index:-3; background:var(--stage-black) center/cover no-repeat}
  .bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.8); opacity:0; transition:opacity 1.2s ease-in-out}
  .bg video.on{opacity:1}
  .stage{position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:
      radial-gradient(ellipse 45% 70% at 0% 70%, rgba(103,78,56,.85), transparent 70%),
      radial-gradient(ellipse 45% 70% at 100% 35%, rgba(47,78,100,.85), transparent 70%),
      radial-gradient(60% 55% at 50% 40%, rgba(17,17,17,.62), rgba(17,17,17,.4)),
      linear-gradient(180deg, rgba(14,14,14,.85) 0%, rgba(24,24,24,.35) 30%, rgba(24,24,24,.35) 70%, rgba(14,14,14,.95) 100%)}
  .rule{position:fixed; left:6%; right:6%; height:var(--stroke-rule); background:var(--gold); box-shadow:0 2px 0 var(--gold-dim); z-index:5; pointer-events:none}
  .rule--top{top:calc(env(safe-area-inset-top,0px) + 14px)}
  .rule--bottom{bottom:calc(env(safe-area-inset-bottom,0px) + 14px); left:23%; right:20%}

  main{max-width:34rem; margin:0 auto; padding:3.5rem 1rem 4rem}

  /* ---------- Top navigation ---------- */
  .rule--top{display:none}
  [id]{scroll-margin-top:4.75rem}
  .topnav{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1rem; height:3.6rem; padding:0 1rem;
    background:rgba(17,17,17,.72); -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1);
    box-shadow:inset 0 var(--stroke-rule) 0 var(--gold); border-bottom:var(--hair) solid rgba(196,156,71,.35)}
  .topnav__logo{flex:none; display:flex; align-items:center}
  .topnav__logo img{height:2.3rem; width:auto; display:block}
  .topnav__links{display:flex; gap:1.1rem; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; padding:.2rem 0}
  .topnav__links::-webkit-scrollbar{display:none}
  .topnav__links a{flex:none; text-decoration:none; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.95rem; letter-spacing:.03em; color:var(--white);
    padding:.25rem 0; border-bottom:2px solid transparent; transition:color .2s ease-out, border-color .2s ease-out}
  .topnav__links a:hover{color:var(--gold)}
  .topnav__links a.on{color:var(--gold); border-bottom-color:var(--gold)}
  /* event dropdown */
  .nav-group{display:flex; align-items:center; flex:none; position:relative}
  .nav-group__btn{display:grid; place-items:center; width:1.4rem; height:1.6rem; margin-left:-.1rem; padding:0; border:0; background:none; color:var(--white); cursor:pointer}
  .nav-group__btn svg{width:.6rem; height:.4rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
  .nav-group.on .nav-group__btn{color:var(--gold)}
  .nav-group.open .nav-group__btn svg{transform:rotate(180deg)}
  .nav-menu{position:fixed; left:0; right:0; top:3.6rem; z-index:30; display:flex; flex-direction:column; padding:.35rem 0 .5rem; background:var(--stage-black); border-bottom:var(--hair) solid var(--gold-dim); box-shadow:0 14px 30px rgba(0,0,0,.5);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease-out, transform .18s ease-out, visibility 0s linear .18s}
  .nav-menu a{display:block; padding:.65rem 1rem; border-bottom:0!important; font-size:1rem}
  .nav-menu a.on{color:var(--gold)}
  .nav-group.open .nav-menu{opacity:1; visibility:visible; transform:none; transition-delay:0s}
  @media (hover:hover) and (min-width:1024px){
    .topnav__links{overflow:visible}
    .nav-menu{position:absolute; left:50%; right:auto; top:calc(100% + .45rem); min-width:11rem; transform:translate(-50%,-8px); padding:.4rem 0; border:var(--hair) solid var(--gold-dim); border-top:2px solid var(--gold)}
    .nav-menu::before{content:""; position:absolute; left:0; right:0; top:-.7rem; height:.7rem}  /* hover bridge */
    .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu{opacity:1; visibility:visible; transform:translate(-50%,0); transition-delay:0s}
    .nav-group:hover .nav-group__btn svg{transform:rotate(180deg)}
    .nav-menu a{padding:.55rem 1.1rem; white-space:nowrap}
  }
  .topnav__cta{flex:none; display:inline-flex; align-items:center; gap:.45rem; min-height:2.3rem; padding:0 .75rem; background:var(--gold); color:var(--on-gold); text-decoration:none;
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.95rem; transition:background-color .2s ease-out}
  .topnav__cta:hover{background:#D1AB5A}
  .topnav__cta .ico{width:1.15em; height:1.15em}
  @media (max-width:560px){ .topnav__cta span{display:none} .topnav__cta{padding:0 .6rem} .topnav{gap:.75rem; padding:0 .75rem} .topnav__links{gap:.9rem} }

  /* ---------- Title lockup (hero) ---------- */
  .hero{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem}
  .hero img{width:min(62%,15rem); height:auto; display:block; animation:rise .3s ease-out both}
  .eyebrow{font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--white); font-size:1rem; letter-spacing:.04em; margin:0}
  .hero h1{margin:.4rem 0 0; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold);
    font-size:clamp(2.6rem, 11vw, 4rem); line-height:.95; letter-spacing:.01em; text-shadow:0 3px 10px rgba(0,0,0,.7); animation:rise .3s .06s ease-out both}
  .when{font-family:var(--display); font-weight:600; text-transform:uppercase; margin:0; animation:rise .3s .12s ease-out both}
  .when__date{display:block; font-size:clamp(1.4rem,6vw,1.9rem); line-height:1.05}
  .when__time{display:block; font-size:clamp(1.05rem,4.4vw,1.35rem); line-height:1.2; margin-top:.25rem}
  .when__sep{color:var(--gold); padding:0 .35em}
  .charity{font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:.95rem; margin:0; letter-spacing:.02em}
  .charity b{color:var(--white); font-weight:600}
  @keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

  /* ---------- Next up / live banner ---------- */
  .status{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:2rem; padding:.9rem 1rem .9rem 1.15rem;
    background:var(--card); border:var(--stroke-card) solid var(--gold); box-shadow:var(--shadow-card); animation:rise .3s .18s ease-out both}
  .status[hidden]{display:none}
  .status__label{margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.9rem; letter-spacing:.04em; color:var(--gold);
    display:flex; align-items:center; gap:.5rem}
  .status__main{margin:.2rem 0 0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:clamp(1.5rem,6.5vw,2.1rem); line-height:1;
    font-variant-numeric:tabular-nums}
  .status__main small{font-size:.55em; color:var(--slot-grey); margin:0 .35em 0 .08em}
  .status__note{margin:.35rem 0 0; font-size:.85rem; color:var(--slot-grey)}
  .status__cta{flex:none; display:inline-flex; align-items:center; min-height:2.9rem; padding:0 1rem; text-decoration:none; background:var(--gold); color:var(--on-gold);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem; transition:background-color .2s ease-out}
  .status__cta:hover{background:#D1AB5A}
  .live-dot{display:inline-flex; align-items:center; gap:.35rem; padding:.1rem .45rem; background:var(--twitch); color:var(--white); font-size:.85rem; letter-spacing:.06em}
  .live-dot::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--white); animation:pulse 1.4s ease-in-out infinite}
  .status--live{border-color:var(--twitch)}
  .status--live .status__cta{background:var(--twitch); color:var(--white)}
  .status--live .status__cta:hover{background:#A970FF}
  @keyframes pulse{50%{opacity:.25}}
  @media (max-width:480px){ .status{flex-direction:column; align-items:stretch} .status__cta{justify-content:center} }

  /* ---------- Section header (round header style) ---------- */
  h2{display:flex; align-items:center; gap:.75rem; margin:2.75rem 0 .9rem; font-family:var(--display); font-weight:600; text-transform:uppercase;
     color:var(--gold); font-size:1.4rem; line-height:1.1; letter-spacing:.01em}
  h2::after{content:""; flex:1; height:var(--hair); background:var(--gold-dim)}

  /* ---------- Actions ---------- */
  .actions{display:flex; flex-direction:column; gap:.75rem; margin-top:2.25rem}
  .btn{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.5rem; padding:.9rem 1.15rem;
    text-decoration:none; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.35rem; line-height:1;
    border:var(--stroke-card) solid var(--gold); background:var(--card); color:var(--white); box-shadow:var(--shadow-card);
    transition:transform .2s ease-out, background-color .2s ease-out}
  .btn small{font-family:var(--body); font-weight:600; font-size:.9rem; text-transform:none; color:var(--gold); text-align:right}
  .btn:hover{transform:translateY(-2px); background:var(--score-box)}
  .btn--primary{background:var(--gold); color:var(--on-gold); font-size:1.7rem; min-height:4.25rem}
  .btn--primary small{color:var(--on-gold)}
  .btn--primary:hover{background:#D1AB5A}
  .arrow{font-family:var(--body); font-size:1.1rem}

  /* ---------- Event card (match-card anatomy) ---------- */
  .card{background:var(--card); border:var(--stroke-card) solid var(--gold); box-shadow:var(--shadow-card)}
  .card__head{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.3rem .75rem; background:var(--gold); color:var(--on-gold);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.95rem; line-height:1.2}
  .facts{margin:0; display:grid; grid-template-columns:1fr 1fr}
  .facts div{padding:.75rem .9rem; border-top:var(--hair) solid var(--divider)}
  .facts div:nth-child(odd){border-right:var(--hair) solid var(--divider)}
  .facts div:nth-child(-n+2){border-top:0}
  .facts dt{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.8rem; color:var(--gold); letter-spacing:.04em}
  .facts dd{margin:.15rem 0 0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.2rem; line-height:1.1}

  /* nations: equal boxes, flat flags */
  .nations{display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--hair) solid var(--divider)}
  .nation{display:flex; align-items:center; gap:.65rem; height:3rem; padding:0 .9rem; border-top:var(--hair) solid var(--divider);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; white-space:nowrap; overflow:hidden}
  .nation:nth-child(-n+2){border-top:0}
  .nation:nth-child(odd){border-right:var(--hair) solid var(--divider)}
  .nation img{height:1.2rem; width:auto; aspect-ratio:4/3; object-fit:cover; flex:none}

  /* rulebook row */
  .rules{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.75rem; padding:.7rem .75rem .7rem 1.15rem}
  .rules span{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.35rem; line-height:1}
  .langs{display:flex; gap:.4rem}
  .langs a{display:inline-flex; align-items:center; justify-content:center; min-width:2.9rem; min-height:2.6rem; padding:0 .6rem;
    border:var(--hair) solid var(--gold); color:var(--white); text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.05rem;
    letter-spacing:.04em; transition:background-color .2s ease-out, color .2s ease-out}
  .langs a:hover{background:var(--gold); color:var(--on-gold)}

  /* ---------- Broadcast ---------- */
  .live-head{margin:0 0 .75rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem}
  .live-head b{display:inline-flex; align-items:center; gap:.3em; color:var(--twitch); font-weight:600; font-size:1.5rem; vertical-align:-.12em}
  .channels{display:grid; gap:0}
  .channel{display:flex; align-items:center; gap:.75rem; width:100%; padding:.8rem .9rem; margin:0; text-align:left; cursor:pointer;
    background:transparent; color:var(--white); border:0; border-top:var(--hair) solid var(--divider);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; transition:background-color .2s ease-out, color .2s ease-out}
  .channel:first-child{border-top:0}
  .channel img{height:1.1rem; width:auto; flex:none}
  .channel small{margin-left:auto; font-family:var(--body); font-weight:600; font-size:.85rem; text-transform:none; color:var(--slot-grey)}
  .channel:hover{background:var(--score-box)}
  .channel[aria-pressed="true"]{background:var(--gold); color:var(--on-gold)}
  .channel[aria-pressed="true"] small{color:var(--on-gold)}
  .channel[aria-pressed="true"] small::before{content:"Now playing · "}
  .channel:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
  .open-twitch{display:inline-block; margin-top:.6rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.9rem; color:var(--gold); text-decoration:none}
  .open-twitch:hover{text-decoration:underline}
  .player{position:relative; aspect-ratio:16/9; margin-top:.75rem; overflow:hidden; background:var(--card); border:var(--stroke-card) solid var(--gold); box-shadow:var(--shadow-card)}
  .player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

  /* ---------- Brand icons ---------- */
  .ico{width:1em; height:1em; fill:currentColor; flex:none; vertical-align:-.12em}
  .ico--twitch{color:var(--twitch)}
  .btn .name{display:inline-flex; align-items:center; gap:.5em}
  .tile b{display:flex; align-items:center; gap:.45em}
  .tile .ico{width:.95em; height:.95em; color:var(--gold)}
  .watch-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin-top:.75rem}
  .watch-foot .live-head{margin:0}
  .watch-foot .open-twitch{margin-top:0}

  /* ---------- Teams: roster cards (gold frame, notched corners) ---------- */
  .full{margin-top:3.5rem}
  .teams__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem}
  .team{display:flex; flex-direction:column; background:var(--card); border:var(--stroke-card) solid var(--gold); box-shadow:var(--shadow-card)}
  .team__head{display:flex; align-items:center; gap:.65rem; padding:.65rem .85rem; border-bottom:var(--hair) solid var(--divider)}
  .team__head img{height:1.5rem; width:auto; aspect-ratio:4/3; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.4)}
  .team h3{margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:1.3rem; line-height:1}
  .team ul{list-style:none; margin:0; padding:.55rem .85rem .75rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1rem; line-height:1.6}
  .team li.sub{color:var(--gold)}
  .note{margin:.8rem 0 0; font-size:.85rem; color:var(--slot-grey)}
  .note b{color:var(--gold); font-weight:600}

  /* ---------- Events hub ---------- */
  .events__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem; margin-top:1.5rem}
  .event{display:flex; flex-direction:column; background:var(--card); border:var(--stroke-card) solid var(--divider); box-shadow:var(--shadow-card)}
  .event--next{border-color:var(--gold)}
  .event__head{display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.3rem .75rem; background:var(--score-box);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.04em; color:var(--slot-grey)}
  .event--next .event__head{background:var(--gold); color:var(--on-gold)}
  .event__body{display:flex; flex-direction:column; gap:.6rem; flex:1; padding:.9rem .9rem 1rem}
  .event h3{margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.6rem; line-height:1}
  .event--next h3{color:var(--gold)}
  .event dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; font-size:.9rem}
  .event dt{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; color:var(--gold); padding-top:.12rem}
  .event dd{margin:0}
  .event__champ{margin-top:auto; display:flex; align-items:center; gap:.5rem; padding-top:.65rem; border-top:var(--hair) solid var(--divider);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.15rem}
  .event__champ small{font-size:.75rem; color:var(--gold); letter-spacing:.05em}
  .event__champ .tba{color:var(--slot-grey)}
  .event__links{display:flex; gap:1rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.85rem}
  .event__links a{color:var(--gold); text-decoration:none}
  .event__links a:hover{text-decoration:underline}

  /* ---------- Past broadcasts ---------- */
  .vod-group + .vod-group{margin-top:1.6rem}
  .vod-group h3{display:flex; align-items:baseline; gap:.6rem; margin:0 0 .7rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; color:var(--white)}
  .vod-group h3 small{font-size:.8rem; color:var(--slot-grey); letter-spacing:.04em}
  .vod-row{display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent}
  .vod{scroll-snap-align:start; display:flex; flex-direction:column; gap:.45rem; text-decoration:none; color:var(--white)}
  .vod__thumb{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--card); border:var(--hair) solid var(--divider); transition:border-color .2s ease-out}
  .vod__thumb img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s ease-out}
  .vod__len{position:absolute; right:.4rem; bottom:.4rem; padding:.05rem .35rem; background:rgba(17,17,17,.85); font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums}
  .vod__play{position:absolute; inset:0; display:grid; place-items:center; background:rgba(17,17,17,.35); opacity:0; transition:opacity .2s ease-out}
  .vod__play::before{content:""; width:3.4rem; height:3.4rem; border-radius:50%; background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23181818'/%3E%3C/svg%3E") center/55% no-repeat}
  .vod:hover .vod__thumb, .vod:focus-visible .vod__thumb{border-color:var(--gold)}
  .vod:hover .vod__play, .vod:focus-visible .vod__play{opacity:1}
  .vod:hover img{transform:scale(1.03)}
  .vod:focus-visible{outline:none}
  .vod__title{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem; line-height:1.1}
  .vod__meta{display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--slot-grey)}
  .vod__meta img{height:.8rem; width:auto}
  .vod-dialog{width:min(92vw,1100px); padding:0; border:var(--stroke-card) solid var(--gold); background:var(--stage-black); color:var(--white)}
  .vod-dialog::backdrop{background:rgba(8,8,8,.85)}
  .vod-dialog__bar{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem .5rem .5rem .9rem; font-family:var(--display); font-weight:600; text-transform:uppercase}
  .vod-dialog__bar button{min-height:2.4rem; padding:0 .9rem; border:var(--hair) solid var(--gold); background:transparent; color:var(--white); font:inherit; cursor:pointer}
  .vod-dialog__bar button:hover{background:var(--gold); color:var(--on-gold)}
  .vod-dialog__frame{position:relative; aspect-ratio:16/9}
  .vod-dialog__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

  /* ---------- Follow / support: equal pairs ---------- */
  .pair{display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
  .tile{display:flex; flex-direction:column; gap:.3rem; padding:.9rem 1rem; text-decoration:none; color:var(--white);
    background:rgba(17,17,17,.4); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1);
    border:var(--hair) solid var(--divider); border-top-color:rgba(196,156,71,.5); transition:border-color .2s ease-out, background-color .2s ease-out}
  .tile b{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.3rem; line-height:1}
  .tile span{font-size:.9rem; color:var(--slot-grey)}
  .tile:hover{border-color:var(--gold); background:rgba(24,24,24,.75)}
  .wide{grid-column:1 / -1}

  footer{margin-top:3.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem}
  footer .contact{display:inline-flex; align-items:center; gap:.6rem; min-height:2.9rem; padding:0 1.15rem; margin-bottom:.4rem;
    border:var(--stroke-card) solid var(--gold); background:var(--card); color:var(--white); text-decoration:none; box-shadow:var(--shadow-card);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; line-height:1;
    transition:transform .2s ease-out, background-color .2s ease-out}
  footer .contact .ico{width:1.15em; height:1.15em; color:var(--gold); fill:currentColor}
  footer .contact small{font-family:var(--body); font-weight:600; font-size:.85rem; text-transform:none; color:var(--gold)}
  footer .contact:hover{transform:translateY(-2px); background:var(--score-box)}
  @media (max-width:420px){ footer .contact small{display:none} }
  footer .handle{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem; color:var(--white); text-decoration:none}
  footer p{margin:0; font-size:12px; color:var(--slot-grey)}
  .corner-logo{position:fixed; right:14px; bottom:14px; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom)); z-index:40; width:44px; height:auto; padding:4px; margin:0; border:0; background:none; cursor:pointer;
    opacity:.55; transition:opacity .2s ease-out, transform .2s ease-out; -webkit-tap-highlight-color:transparent}
  .corner-logo img{display:block; width:100%; height:auto}
  .corner-logo:hover, .corner-logo:focus-visible{opacity:1; transform:scale(1.08)}
  .corner-logo:focus:not(:focus-visible){outline:0}

  @media (min-width:720px){
    main{max-width:44rem; padding-top:4.5rem}
    .hero img{width:16rem}
  }

  /* ---------- Desktop: full-screen hero over the clips, two-column body ---------- */
  .cue{display:none}
  @media (min-width:1024px){
    main{max-width:80rem; padding:0 2.5rem 4rem}
    .top{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:4.5rem 0 5.5rem}
    .hero{gap:1rem}
    .hero img{width:14rem}
    .eyebrow{font-size:1.15rem}
    .hero h1{font-size:clamp(5rem,8vw,7.5rem)}
    .when__date{font-size:2.4rem}
    .when__time{font-size:1.6rem}
    .charity{font-size:1.15rem}
    .status{width:100%; max-width:54rem; margin:2.25rem auto 0; padding:1.2rem 1.25rem 1.2rem 1.6rem}
    .status__main{font-size:2.8rem}
    .status__cta{min-height:3.4rem; padding:0 1.5rem; font-size:1.2rem}
    .actions{display:grid; grid-template-columns:1.3fr 1fr 1fr; width:100%; max-width:54rem; margin:1rem auto 0}
    .actions .btn{flex-direction:column; align-items:flex-start; justify-content:center; gap:.4rem; min-height:4.75rem; font-size:1.35rem}
    .actions .btn small{text-align:left}
    .actions .btn--primary{font-size:1.6rem}
    .cue{display:flex; position:absolute; left:50%; bottom:2.25rem; transform:translateX(-50%); flex-direction:column; align-items:center; gap:.2rem;
      font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.08em; color:var(--slot-grey); text-decoration:none}
    .cue:hover{color:var(--gold)}
    .cue span{font-family:var(--body); font-size:1.2rem; line-height:1}
    .cols{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"watch info" "watch follow" "watch support"; column-gap:3rem; align-items:start; padding-top:1rem}
    .s-watch{grid-area:watch; position:sticky; top:3rem}
    .s-info{grid-area:info} .s-follow{grid-area:follow} .s-support{grid-area:support}
    .s-watch h2:first-child,.s-info h2:first-child{margin-top:0}
    .live-head{font-size:1.2rem}
    footer{margin-top:5rem}
    .full{margin-top:4.5rem}
    .teams__grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem}
    .team h3{font-size:1.45rem}
    .team ul{font-size:1.1rem}
    .events__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem}
    .event__head{padding:.5rem 1.1rem; font-size:1rem}
    .event__body{padding:1.4rem 1.5rem 1.5rem; gap:1rem; min-height:19rem}
    .event h3{font-size:2.6rem}
    .event dl{font-size:1.1rem; gap:.4rem 1.2rem}
    .event dt{font-size:.9rem}
    .event__champ{font-size:1.8rem; gap:.8rem; padding-top:1rem}
    .event__champ small{font-size:.9rem}
    .event__links{font-size:1.05rem; gap:1.5rem}
    .topnav{padding:0 2.5rem; gap:2rem; height:4rem}
    .topnav__links{gap:1.75rem; justify-content:center}
    .topnav__links a{font-size:1.05rem}
    .top{min-height:calc(100vh - 4rem); min-height:calc(100svh - 4rem)}
    .vod-row{grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; gap:1.25rem}
  }
  @media (min-width:720px) and (max-width:1023px){ .events__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:360px){ .pair{grid-template-columns:1fr} .rules span{font-size:1.15rem} .langs a{min-width:2.5rem} .nation{font-size:.95rem} }
  @media (prefers-reduced-motion:reduce){
    .bg video{display:none}
    *:not(.egg-soul):not(.egg-soul img):not(.egg-confetti):not(.egg-pulse):not(.egg-toast):not(.egg-rejuv):not(.egg-rejuv img):not(.egg-rejuv__ring){animation:none!important; transition:none!important}
  }

  /* ---------- Event archive page ---------- */
  .arch{padding-top:2rem}
  .crumb{display:inline-block; margin-bottom:1.25rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.9rem; color:var(--gold); text-decoration:none}
  .crumb:hover{text-decoration:underline}
  .arch-head .eyebrow{text-align:left}
  .arch-head h1{margin:.3rem 0 .4rem; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:clamp(2.6rem,9vw,5rem); line-height:.95; text-shadow:0 3px 10px rgba(0,0,0,.7)}
  .arch-head p{margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.15rem}
  .arch-head p span{color:var(--slot-grey); font-size:.95rem}
  .podium{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1.75rem}
  .place{background:var(--card); border:var(--stroke-card) solid var(--divider); padding:.8rem 1rem; box-shadow:var(--shadow-card)}
  .place small{display:block; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.8rem; letter-spacing:.05em; color:var(--slot-grey)}
  .place b{display:block; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.35rem; line-height:1.1; margin-top:.15rem}
  .place--1{grid-column:1 / -1; border-color:var(--gold)}
  .place--1 small{color:var(--gold)}
  .place--1 b{font-size:2rem; color:var(--gold)}
  .bracket{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem,1fr); gap:1rem; overflow-x:auto; padding-bottom:.5rem}
  .bracket + h3{margin-top:1.5rem}
  .round{display:grid; grid-template-rows:auto 1fr; gap:.4rem}
  .round__ms{display:flex; flex-direction:column; justify-content:space-around; gap:.75rem}
  .round > h4{margin:0 0 .1rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.85rem; letter-spacing:.05em; color:var(--slot-grey)}
  .bracket-title{margin:0 0 .6rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem}
  .m{background:var(--card); border:var(--stroke-card) solid var(--gold-dim)}
  .m--final{border-color:var(--gold)}
  .m__label{padding:.2rem .6rem; background:var(--score-box); font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; color:var(--slot-grey)}
  .m--final .m__label{background:var(--gold); color:var(--on-gold)}
  .m__row{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.4rem .6rem; border-top:var(--hair) solid var(--divider);
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1rem}
  .m__row b{font-weight:600; min-width:1.9rem; text-align:center; padding:.05rem .3rem; background:var(--score-box); color:var(--slot-grey); font-variant-numeric:tabular-nums}
  .m__row.win{color:var(--white)}
  .m__row.win b{background:var(--gold); color:var(--on-gold)}
  .m__row.lose{color:var(--slot-grey)}
  .m__ids{padding:.3rem .6rem .4rem; border-top:var(--hair) solid var(--divider); font-size:.75rem; color:var(--slot-grey); word-break:break-word}
  .m__ids span{color:var(--white); font-variant-numeric:tabular-nums; user-select:all}
  .m__note{padding:0 .6rem .4rem; font-size:.75rem; color:var(--slot-grey)}
  .groups{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem}
  .gtable{width:100%; border-collapse:collapse; background:var(--card); border:var(--stroke-card) solid var(--gold-dim); font-size:.95rem}
  .gtable caption{text-align:left; padding:.3rem .7rem; background:var(--gold); color:var(--on-gold); font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.9rem}
  .gtable th{padding:.35rem .6rem; text-align:left; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; color:var(--slot-grey); border-bottom:var(--hair) solid var(--divider)}
  .gtable td{padding:.4rem .6rem; border-top:var(--hair) solid var(--divider); font-variant-numeric:tabular-nums}
  .gtable td:nth-child(2){font-family:var(--display); font-weight:600; text-transform:uppercase}
  .gtable tr.adv td:nth-child(2){color:var(--gold)}
  .gtable .num{text-align:right; white-space:nowrap}
  .gtable th{white-space:nowrap}
  details.more{margin-top:1rem; background:var(--card); border:var(--hair) solid var(--divider)}
  details.more summary{cursor:pointer; padding:.7rem 1rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1rem; color:var(--gold)}
  details.more summary:hover{background:var(--score-box)}
  .rounds{padding:.25rem 1rem 1rem; display:grid; grid-template-columns:minmax(0,1fr); gap:1rem}
  .rounds h4{margin:.4rem 0 .3rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.85rem; color:var(--slot-grey)}
  .rounds ul{list-style:none; margin:0; padding:0}
  .rounds li{display:flex; flex-wrap:wrap; gap:.15rem .6rem; padding:.35rem 0; border-top:var(--hair) solid var(--divider); font-size:.88rem}
  .rounds li b{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.95rem}
  .rounds li .w{color:var(--gold)}
  .rounds li em{font-style:normal; color:var(--slot-grey); font-size:.78rem; margin-left:auto}
  .rosters{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
  .roster{background:var(--card); border:var(--hair) solid var(--divider); border-top:var(--stroke-card) solid var(--gold-dim)}
  .roster--top{border-top-color:var(--gold)}
  .roster h3{margin:0; padding:.5rem .75rem; display:flex; justify-content:space-between; gap:.5rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem; line-height:1.1; border-bottom:var(--hair) solid var(--divider)}
  .roster h3 small{color:var(--gold); font-size:.8rem; white-space:nowrap}
  .roster ul{list-style:none; margin:0; padding:.45rem .75rem .6rem; font-size:.9rem; line-height:1.55}
  .src{margin-top:2.5rem; font-size:.8rem; color:var(--slot-grey)}
  @media (min-width:720px){
    .podium{grid-template-columns:2fr 1fr 1fr} .place--1{grid-column:auto}
    .groups{grid-template-columns:repeat(2,minmax(0,1fr))}
    .rounds{grid-template-columns:repeat(2,minmax(0,1fr))}
    .rosters{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (min-width:1024px){
    .arch{padding-top:3rem}
    .groups{grid-template-columns:repeat(4,minmax(0,1fr))}
    .rounds{grid-template-columns:repeat(4,minmax(0,1fr))}
    .rosters{grid-template-columns:repeat(4,minmax(0,1fr))}
    .bracket{overflow:visible}
  }

  /* ---------- Multi-page layout ---------- */
  .page{padding-top:2rem}
  .page-head{margin-bottom:.5rem}
  .page-head .eyebrow{text-align:left}
  .page-head h1{margin:.3rem 0 .4rem; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:clamp(2.6rem,9vw,5rem); line-height:.95; text-shadow:0 3px 10px rgba(0,0,0,.7)}
  .page-head > p{margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.15rem}
  .page-head > p span{color:var(--slot-grey); font-size:.95rem}
  .page .status{margin-top:1.5rem}
  .page section > h2:first-child{margin-top:2.25rem}
  .home-links{display:none}
  .watch-grid{display:grid; gap:.9rem; margin-top:1.5rem}
  .copa-grid{display:grid; gap:1.25rem; margin-top:1.5rem}
  .copa-grid .rules{margin-top:.75rem}
  .copa-cta .rules--cta{margin-top:0}
  .copa-cta{display:flex; flex-direction:column; gap:.75rem}
  .support-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem}
  .support-grid .tile b{font-size:1.25rem}
  @media (min-width:1024px){
    .page{padding-top:3rem}
    .page .status{max-width:none; margin-left:0; margin-right:0}
    .watch-grid .channels{grid-template-columns:repeat(3,minmax(0,1fr))}
    .watch-grid .channel{border-top:0; border-left:var(--hair) solid var(--divider); padding:.9rem 1.1rem}
    .watch-grid .channel:first-child{border-left:0}
    .copa-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start; gap:2rem}
    .support-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem}
    .home .top{min-height:calc(100vh - 4rem - 6rem); min-height:calc(100svh - 4rem - 6rem)}
  }

  /* Easter eggs (js/eggs.js) */
  .egg-layer{position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden}
  .egg-soul{position:absolute; width:52px; transform:scale(var(--scale,1)); opacity:0}
  .egg-soul img{display:block; width:100%; height:auto; transform-origin:50% 30%; animation:egg-bob 1.6s ease-in-out infinite alternate; filter:drop-shadow(0 0 8px rgba(90,255,190,.6))}
  @keyframes egg-bob{from{transform:rotate(-7deg) translateY(0)} to{transform:rotate(7deg) translateY(-6px)}}
  .egg-soul--rise{animation:egg-rise var(--dur,4s) ease-out forwards}
  @keyframes egg-rise{0%{opacity:0; transform:translate(0,0) scale(var(--scale,1))} 12%{opacity:.95} 80%{opacity:.8} 100%{opacity:0; transform:translate(var(--drift,0),-115vh) scale(var(--scale,1))}}
  .egg-soul--trail{animation:egg-trail .9s ease-out forwards}
  @keyframes egg-trail{0%{opacity:.9; transform:translateY(0) scale(var(--scale,.4))} 100%{opacity:0; transform:translateY(-48px) scale(calc(var(--scale,.4) * .6))}}
  .egg-pulse{animation:egg-pulse .65s ease-in-out 4 !important; opacity:1 !important}
  @keyframes egg-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.35); filter:drop-shadow(0 0 10px var(--gold))}}
  .egg-confetti{position:absolute; display:block; width:8px; height:12px; border-radius:1px; opacity:0; animation:egg-fall var(--dur,2s) ease-out forwards}
  @keyframes egg-fall{0%{opacity:1; transform:translate(0,0) rotate(0)} 35%{opacity:1; transform:translate(calc(var(--dx,0) * .5),calc(var(--up,200px) * -1)) rotate(calc(var(--rot,360deg) * .4))} 100%{opacity:0; transform:translate(var(--dx,0),var(--dy,300px)) rotate(var(--rot,360deg))}}
  .egg-toast{position:fixed; left:50%; bottom:28px; z-index:55; transform:translate(-50%,16px); opacity:0; pointer-events:none; text-align:center;
    padding:.6rem 1.1rem; border:var(--stroke-card) solid var(--gold); background:rgba(17,17,17,.9); box-shadow:var(--shadow-card);
    font-family:var(--display); font-weight:600; text-transform:uppercase; transition:opacity .35s ease-out, transform .35s ease-out}
  .egg-toast.on{opacity:1; transform:translate(-50%,0)}
  .egg-toast small{display:block; font-size:.75rem; letter-spacing:.06em; color:var(--gold)}
  .egg-toast b{display:block; font-size:1.6rem; line-height:1.1; color:var(--white)}
  .egg-rejuv{position:absolute; left:50%; bottom:96px; width:120px; margin-left:-60px; transition:opacity .8s ease-out}
  .egg-rejuv img{display:block; width:100%; height:auto; animation:egg-drop 1.1s cubic-bezier(.3,.9,.4,1.15) both}
  .egg-rejuv__ring{position:absolute; left:50%; bottom:16px; width:180px; height:60px; margin-left:-90px; border-radius:50%; border:3px solid rgba(90,255,140,.9);
    box-shadow:0 0 40px 14px rgba(60,255,120,.45), inset 0 0 30px rgba(60,255,120,.4); opacity:0; transform:scale(.2); animation:egg-ring 1.3s ease-out 1s both}
  .egg-rejuv--gone{opacity:0}
  @keyframes egg-drop{0%{transform:translateY(-110vh)} 80%{transform:translateY(0)} 90%{transform:translateY(-10px)} 100%{transform:translateY(0)}}
  @keyframes egg-ring{0%{opacity:0; transform:scale(.2)} 20%{opacity:1} 100%{opacity:0; transform:scale(1.4)}}
  .nf-id{cursor:pointer; font-weight:600; color:var(--white)}
  .nf-id--lost{color:var(--gold); letter-spacing:.04em}
  .nf-hint{margin:.6rem 0 0; font-size:.95rem; color:var(--slot-grey)}
  .nf-hint a{color:var(--gold)}
  footer p{cursor:default}

  /* ---------- Bracket page ---------- */
  .bk-wrap{margin-top:1.5rem}
  .bk-status{color:var(--slot-grey)}
  .bk-title{margin:0 0 1rem; font-family:var(--display); font-weight:600; text-transform:uppercase; color:var(--gold); font-size:1.2rem}
  .bk-title span{color:var(--white); font-size:.95rem}
  .bk-champ{display:flex; align-items:center; gap:.8rem; margin:0 0 1.5rem; padding:.8rem 1rem; background:var(--gold); color:var(--on-gold); box-shadow:var(--shadow-card)}
  .bk-champ small{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem}
  .bk-champ b{font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.6rem; line-height:1}
  .bk-champ .bk-ic{width:2.2rem; height:1.5rem}
  .bk-sec{margin:0 0 1.75rem}
  .bk-sec h3{margin:0 0 .6rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem; letter-spacing:.05em; color:var(--white)}
  .bk-sec--final h3{color:var(--gold)}
  .bk-round--final{margin-left:.6rem; padding-left:1rem; border-left:var(--hair) solid var(--gold-dim)}
  .bk-round--final h4{color:var(--white)}
  .bk-round--final .bk-m{border-left-color:var(--gold); box-shadow:0 0 0 1px var(--gold-dim), 0 6px 18px rgba(0,0,0,.45)}
  .bk-round--final .bk-ms{justify-content:center}
  .bk-rounds{display:flex; gap:.9rem; overflow-x:auto; padding:.25rem .25rem 1rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .bk-round{flex:0 0 15.5rem; display:flex; flex-direction:column; scroll-snap-align:start}
  .bk-round h4{margin:0 0 .5rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; color:var(--gold)}
  .bk-ms{flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:.75rem}
  .bk-m{position:relative; background:var(--card); border-left:3px solid var(--gold-dim); box-shadow:0 6px 18px rgba(0,0,0,.45)}
  .bk-m--live{border-left-color:var(--gold); box-shadow:0 0 0 2px var(--gold), 0 6px 18px rgba(0,0,0,.45)}
  .bk-m--final{border-left-color:var(--gold)}
  .bk-m--bye{opacity:.4}
  .bk-tag{position:absolute; right:0; top:-.95rem; padding:.05rem .45rem; background:var(--gold-dim); color:var(--white); font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.65rem; letter-spacing:.08em}
  .bk-tag--live{background:var(--gold); color:var(--on-gold); animation:bk-blink 1.6s ease-in-out infinite}
  @keyframes bk-blink{50%{opacity:.55}}
  .bk-row{display:flex; align-items:center; gap:.5rem; height:2.4rem; padding-left:.55rem}
  .bk-row+.bk-row{border-top:var(--hair) solid var(--score-box)}
  .bk-ic{display:block; width:1.7rem; height:1.15rem; flex:none; background:var(--score-box) center/cover no-repeat}
  .bk-ic--none{visibility:hidden}
  .bk-name{flex:1; min-width:0; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .bk-score{width:2.4rem; height:2.4rem; flex:none; display:grid; place-items:center; background:var(--score-box); font-family:var(--display); font-weight:600; font-size:1.1rem}
  .bk-row.tbd .bk-name,.bk-row.bye .bk-name{color:#6d6d6d; font-size:.85rem; letter-spacing:.04em}
  .bk-row.lose .bk-name,.bk-row.lose .bk-score{color:#7a7a7a}
  .bk-row.win .bk-score{color:var(--gold)}
  .bk-tables{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
  .bk-actions{margin-top:1.5rem; justify-content:center}
  @media (min-width:1024px){ .bk-actions{grid-template-columns:repeat(2,minmax(0,16rem)); justify-content:center} }
  .bk-note{margin-top:1rem}
  @media (min-width:720px){ .bk-round{flex-basis:17rem} .bk-ms{gap:1rem} }

  /* ---------- Pick'em ---------- */
  .pk{margin-top:1.5rem}
  .pk-body{padding:1rem}
  .pk-hint{margin:0 0 .9rem; color:var(--slot-grey)}
  .pk-hint b{color:var(--gold); font-weight:600}
  .pk-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem .6rem; padding-top:.4rem}
  .pk-tile{position:relative; display:flex; align-items:center; gap:.6rem; min-height:3.4rem; padding:.5rem .7rem; background:var(--score-box); border:2px solid transparent; color:var(--white); cursor:pointer;
    font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.05rem; text-align:left; transition:border-color .15s, transform .15s}
  .pk-tile img{height:1.2rem; width:auto; aspect-ratio:4/3; object-fit:cover; flex:none}
  .pk-tile span{flex:1; min-width:0}
  .pk-tile small{position:absolute; right:-2px; top:-.7rem; font-size:.6rem; letter-spacing:.08em; color:var(--on-gold); background:var(--gold); padding:.15rem .4rem}
  .pk-tile:hover:not(:disabled){border-color:var(--gold-dim); transform:translateY(-1px)}
  .pk-tile--champ{border-color:var(--gold); background:#2a2415; box-shadow:0 0 0 1px var(--gold) inset}
  .pk-tile--runner{border-color:var(--gold-dim)}
  .pk-tile--runner small{background:var(--gold-dim); color:var(--white)}
  .pk-tile:disabled{cursor:default; opacity:.85}
  .pk-form{margin-top:1rem}
  .pk-form label{display:block; margin:0 0 .35rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; color:var(--gold)}
  .pk-form__row{display:flex; gap:.6rem; flex-wrap:wrap}
  .pk-form input{flex:1 1 12rem; min-width:0; height:3.25rem; padding:0 .9rem; background:var(--stage-black); border:2px solid var(--divider); color:var(--white); font:600 1rem var(--body)}
  .pk-form input:focus{outline:0; border-color:var(--gold)}
  .pk-form .btn{min-height:3.25rem; padding:0 1.2rem; font-size:1.2rem}
  .pk-form .btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
  .pk-msg{margin:.6rem 0 0; min-height:1.2em; font-size:.9rem; color:var(--slot-grey)}
  .pk-msg--ok{color:var(--gold)} .pk-msg--err{color:#e0705f}
  .pk-stats h2,.pk-board h2{margin-top:2.25rem}
  .pk-bar{display:grid; grid-template-columns:1.6rem 6.5rem 1fr 3rem; align-items:center; gap:.6rem; padding:.35rem 0; font-family:var(--display); font-weight:600; text-transform:uppercase}
  .pk-bar img{height:1.1rem; width:auto; aspect-ratio:4/3; object-fit:cover}
  .pk-bar__name{font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pk-bar__track{height:.9rem; background:var(--score-box)}
  .pk-bar__track i{display:block; height:100%; background:var(--gold-dim); transition:width .4s ease-out}
  .pk-bar--mine .pk-bar__track i{background:var(--gold)}
  .pk-bar b{text-align:right; font-size:.95rem; font-variant-numeric:tabular-nums}
  .pk-list{list-style:none; margin:.9rem 0 0; padding:0; background:var(--card); border:var(--stroke-card) solid var(--gold-dim)}
  .pk-list li{display:grid; grid-template-columns:2.2rem 1fr auto; grid-template-areas:"rank name pts" "rank pick pts"; align-items:center; column-gap:.6rem; padding:.45rem .7rem; border-top:var(--hair) solid var(--divider)}
  .pk-list li:first-child{border-top:0}
  .pk-list b{grid-area:rank; font-family:var(--display); font-weight:600; color:var(--slot-grey); text-align:center}
  .pk-list span{grid-area:name; font-family:var(--display); font-weight:600; text-transform:uppercase}
  .pk-list small{grid-area:pick; font-size:.8rem; color:var(--slot-grey)}
  .pk-list em{grid-area:pts; font-style:normal; font-family:var(--display); font-weight:600; color:var(--white)}
  .pk-li--pts em{color:var(--gold)} .pk-li--perfect{background:#2a2415} .pk-li--perfect b{color:var(--gold)}
  .pk-li--mine{box-shadow:inset 3px 0 0 var(--gold)}
  @media (min-width:720px){ .pk-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .pk-bar{grid-template-columns:1.6rem 9rem 1fr 3rem} }

  /* Pick'em bracket mode */
  .pk-bracket{margin-top:.5rem}
  .pk-bracket .bk-row{width:100%; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; padding-right:.6rem; transition:background-color .15s}
  .pk-bracket .bk-row:hover:not(:disabled){background:#2a2415}
  .pk-bracket .bk-row:disabled{cursor:default}
  .pk-bracket .bk-row.win{background:#2a2415; box-shadow:inset 3px 0 0 var(--gold)}
  .pk-bracket .bk-row.win .bk-name{color:var(--gold)}
  .pk-bracket .bk-row.lose .bk-name{color:#7a7a7a}
  .pk-bracket .bk-m--todo{box-shadow:0 0 0 1px var(--gold-dim), 0 6px 18px rgba(0,0,0,.45)}
  .bk-tag--pts{background:var(--score-box); color:var(--slot-grey)}
  .bk-ok,.bk-no{font-style:normal; font-size:.95rem; margin-left:.3rem; font-weight:700}
  .bk-ok{color:#6fdc8c} .bk-no{color:#e0705f}
  .bk-pct{font-family:var(--body); font-weight:600; font-size:.72rem; color:var(--slot-grey); margin-left:.3rem}
  .pk-progress{display:flex; align-items:center; gap:.7rem; margin:0 0 .6rem}
  .pk-progress{position:relative; height:1.2rem; background:var(--score-box)}
  .pk-progress i{display:block; height:100%; background:var(--gold); transition:width .3s ease-out}
  .pk-progress span{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--white); text-shadow:0 1px 2px rgba(0,0,0,.6)}
  .pk-bar i:first-child{display:inline-block; width:1.6rem}

  /* Pick'em + Discord */
  .pk-discord{min-height:3.25rem; padding:0 1.1rem; gap:.6rem; justify-content:center; background:#5865F2; color:#fff; border-color:#5865F2; font-size:1.1rem}
  .pk-discord:hover{background:#4752c4}
  .pk-discord .ico{width:1.3em; height:1.3em; fill:currentColor}
  .pk-user{display:inline-flex; align-items:center; gap:.55rem; min-height:3.25rem; padding:0 .9rem 0 .5rem; background:var(--score-box); font-family:var(--display); font-weight:600; text-transform:uppercase}
  .pk-user img{width:1.75rem; height:1.75rem; border-radius:50%; background:var(--card)}
  .pk-user a{font-family:var(--body); font-weight:600; text-transform:none; font-size:.8rem; color:var(--slot-grey)}
  .pk-user a:hover{color:var(--gold)}

  /* ---------- Archive: published match screens (js/site.js fills #match-list and adds View buttons next to match IDs; the page itself is match.html + css/match.css) ---------- */
  .mv-list{margin-top:2.5rem}
  .mv-list__note{color:var(--slot-grey); margin:.2rem 0 1rem}
  .mv-list__grid{display:grid; gap:.75rem}
  .mvl{background:#181818; border:1px solid var(--divider); border-top:3px solid var(--gold-dim)}
  .mvl h3{margin:0; padding:.55rem .8rem .2rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:1.1rem; line-height:1.15}
  .mvl h3 em{font-style:normal; color:var(--gold)}
  .mvl p{margin:0; padding:0 .8rem .5rem; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.8rem; letter-spacing:.04em; color:var(--slot-grey)}
  .mvl ul{list-style:none; margin:0; padding:0}
  .mvl li{display:flex; align-items:center; gap:.6rem; padding:.45rem .8rem; border-top:1px solid var(--divider); font-size:.9rem}
  .mvl li span{flex:1; min-width:0}
  .mvl li b{font-family:var(--display); font-weight:600; text-transform:uppercase}
  .mv-view{display:inline-flex; align-items:center; gap:.3em; padding:.2em .6em; background:var(--gold); color:var(--on-gold); text-decoration:none; font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:.8rem; letter-spacing:.03em; white-space:nowrap; vertical-align:baseline}
  .mv-view:hover{background:#D1AB5A}
  .m__ids .mv-view, .rounds em .mv-view{margin:0 .15rem 0 .35rem; font-size:.7rem; padding:.1em .45em}
  @media (min-width:720px){ .mv-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (min-width:1024px){ .mv-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }