/* =========================================================================
     Dirilis League — "Broadcast Arena" theme
     A premium sports-broadcast look (think Champions League / Sky Sports
     on-screen graphics): frosted glass panels instead of flat boxed cards,
     a signature green gradient for primary actions and links (the club
     color that anchors the single background glow), and a warm gold
     gradient reserved for trophies. Every selector below is unchanged
     from before — app.js and index.html don't know any of this happened —
     only the colors, surfaces, shadows and a few small animations changed.
     ========================================================================= */
  :root{
    /* ---- Light theme: still glassy, just on a bright arena-daylight base ---- */
    --bg:#EEF1F8;
    --surface:rgba(255,255,255,0.72);
    --surface-2:rgba(255,255,255,0.5);
    --surface-3:rgba(255,255,255,0.34);
    --border:rgba(15,23,42,0.10);
    --text:#0F1729;
    --text-muted:#5B6577;
    --accent:#158A4C;
    --accent-2:#0B6B3A;
    --accent-gradient:linear-gradient(135deg,#158A4C 0%,#0B6B3A 100%);
    --accent-soft:rgba(21,138,76,0.10);
    --accent-contrast:#FFFFFF;
    --win:#158A4C;
    --win-soft:rgba(21,138,76,0.12);
    --gold:#B9862C;
    --gold-2:#8A5F17;
    --gold-gradient:linear-gradient(135deg,#F3D48A 0%,#C89536 55%,#93691C 100%);
    --gold-soft:rgba(185,134,44,0.14);
    --info:#5B6577;
    --info-soft:rgba(91,101,119,0.10);
    --danger:#C13434;
    --danger-soft:rgba(193,52,52,0.10);
    --card-header:rgba(15,23,42,0.035);
    --card-header-lit:rgba(255,255,255,0.85);
    --focus:#158A4C;
    --dot-color:rgba(15,23,42,0.05);
    --glass-blur:16px;
    --glass-hairline:rgba(255,255,255,0.7);
    --shadow-ambient:0 1px 2px rgba(15,23,42,0.06), 0 10px 30px rgba(15,23,42,0.08);
    --shadow-lift:0 4px 10px rgba(15,23,42,0.08), 0 20px 40px rgba(15,23,42,0.12);
    --shadow-glow-accent:0 0 0 1px rgba(21,138,76,0.18), 0 8px 24px rgba(21,138,76,0.22);
    --shadow-glow-gold:0 0 0 1px rgba(185,134,44,0.25), 0 8px 22px rgba(185,134,44,0.22);
    --font-display:'Bebas Neue','Arial Narrow',sans-serif;
    --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      /* ---- Dark theme: the real showcase — arena floodlights on a near-black pitch ---- */
      --bg:#05070D;
      --surface:rgba(56, 56, 56, 0.05);
      --surface-2:rgba(255,255,255,0.085);
      --surface-3:rgba(255,255,255,0.13);
      --border:rgba(255,255,255,0.11);
      --text:#F3F6FC;
      --text-muted:#CED4E3;
      --accent:#3DDC97;
      --accent-2:#1FAF6E;
      --accent-gradient:linear-gradient(135deg,#3DDC97 0%,#1FAF6E 100%);
      --accent-soft:rgba(61,220,151,0.16);
      --accent-contrast:#04140D;
      --win:#3DDC97;
      --win-soft:rgba(61,220,151,0.14);
      --gold:#F0C067;
      --gold-2:#C99A34;
      --gold-gradient:linear-gradient(135deg,#FFE8B8 0%,#F0C067 45%,#B4801F 100%);
      --gold-soft:rgba(240,192,103,0.16);
      --info:#9AA5B8;
      --info-soft:rgba(154,165,184,0.14);
      --danger:#FF7285;
      --danger-soft:rgba(255,114,133,0.15);
      --card-header:rgba(255,255,255,0.03);
      --card-header-lit:rgba(255,255,255,0.075);
      --focus:#3DDC97;
      --dot-color:rgba(255,255,255,0.05);
      --glass-blur:20px;
      --glass-hairline:rgba(255,255,255,0.09);
      --shadow-ambient:0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.45);
      --shadow-lift:0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 48px rgba(0,0,0,0.55);
      --shadow-glow-accent:0 0 0 1px rgba(61,220,151,0.35), 0 8px 28px rgba(31,175,110,0.22);
      --shadow-glow-gold:0 0 0 1px rgba(240,192,103,0.4), 0 8px 24px rgba(240,192,103,0.22);
    }
  }
  :root[data-theme="dark"]{
    --bg:#05070D;
    --surface:rgba(255,255,255,0.05);
    --surface-2:rgba(255,255,255,0.085);
    --surface-3:rgba(255,255,255,0.13);
    --border:rgba(255,255,255,0.11);
    --text:#F3F6FC;
    --text-muted:#8C97AE;
    --accent:#3DDC97;
    --accent-2:#1FAF6E;
    --accent-gradient:linear-gradient(135deg,#3DDC97 0%,#1FAF6E 100%);
    --accent-soft:rgba(61,220,151,0.16);
    --accent-contrast:#04140D;
    --win:#3DDC97;
    --win-soft:rgba(61,220,151,0.14);
    --gold:#F0C067;
    --gold-2:#C99A34;
    --gold-gradient:linear-gradient(135deg,#FFE8B8 0%,#F0C067 45%,#B4801F 100%);
    --gold-soft:rgba(240,192,103,0.16);
    --info:#9AA5B8;
    --info-soft:rgba(154,165,184,0.14);
    --danger:#FF7285;
    --danger-soft:rgba(255,114,133,0.15);
    --card-header:rgba(255,255,255,0.03);
    --card-header-lit:rgba(255,255,255,0.075);
    --focus:#3DDC97;
    --dot-color:rgba(255,255,255,0.05);
    --glass-blur:20px;
    --glass-hairline:rgba(255,255,255,0.09);
    --shadow-ambient:0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.45);
    --shadow-lift:0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 48px rgba(0,0,0,0.55);
    --shadow-glow-accent:0 0 0 1px rgba(61,220,151,0.35), 0 8px 28px rgba(31,175,110,0.22);
    --shadow-glow-gold:0 0 0 1px rgba(240,192,103,0.4), 0 8px 24px rgba(240,192,103,0.22);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scrollbar-color:var(--border) transparent;scrollbar-width:thin;}
  ::selection{background:var(--accent);color:#fff;}
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent);}
  body{
    position:relative;
    background-color:var(--bg);
    /* Just the fine dot texture here; the full-bleed artwork + its scrim live
       on body::after (a position:fixed layer, which behaves on mobile where
       background-attachment:fixed does not). Front-to-back the stack is:
       page colour, ::after (artwork + scrim), ::before (champion glow),
       content — so the glow stays visible on top of the image. */
    background-image:radial-gradient(circle at center, var(--dot-color) 1.1px, transparent 1.3px);
    background-size:3px 3px;
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--font-body);
    font-size:14.5px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    padding-bottom:96px;
    min-height:100vh;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--bg) 32%, transparent), color-mix(in srgb, var(--bg) 32%, transparent)),
      url("assets/app-bg.jpg");
    background-size:cover, cover;
    background-repeat:no-repeat, no-repeat;
    background-position:center, center;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  }
  a{color:var(--accent);}
  button{font-family:inherit;}
  .wrap{position:relative;z-index:1;max-width:1056px;margin:0 auto;padding:36px 22px 48px;}
  header.masthead{margin-bottom:22px;position:relative;}
  .header-utility-link{
    position:absolute;top:2px;right:0;
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;padding:0;
    background:none;border:none;border-radius:9px;cursor:pointer;
    color:var(--text-muted);opacity:0.4;
    transition:opacity .15s ease,background .15s ease,color .15s ease;
  }
  .header-utility-link svg{width:21px;height:21px;}
  .header-utility-link:hover,.header-utility-link:focus-visible{
    opacity:1;background:var(--surface-2);color:var(--accent);outline:none;
  }
  /* Backup gear stays flush right; the edit-lock icon sits just to its
     left, so both fit along the same top edge of the masthead. */
  #edit-lock-btn{right:44px;}
  #calendar-btn{right:88px;}
  #edit-lock-btn.unlocked{color:var(--win);opacity:0.75;}
  #edit-lock-btn.unlocked:hover,#edit-lock-btn.unlocked:focus-visible{opacity:1;}
  .edit-lock-panel{position:absolute;top:44px;right:0;z-index:20;width:240px;}
  .edit-lock-panel-inner{
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:14px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    padding:14px;box-shadow:var(--shadow-lift);
    display:flex;flex-direction:column;gap:8px;
    animation:tabEnter .22s cubic-bezier(.22,.8,.22,1);
  }
  .edit-lock-label{font-size:12.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.06em;}
  .edit-lock-panel-inner input[type="password"]{
    font-family:inherit;font-size:14px;padding:8px 10px;
    border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);
    width:100%;box-sizing:border-box;
  }
  .edit-lock-error{color:var(--danger);font-size:12.5px;font-weight:600;margin:0;}
  .edit-lock-actions{display:flex;gap:8px;margin-top:2px;}
  .backup-page{max-width:520px;}
  .backup-page .section-title{margin-top:0;}
  /* Winners calendar — a month grid of past game nights, reached from the
     small calendar icon in the header. Read-only view over the seasons.
     The page fills the full content column so the day cells scale up with it. */
  .calendar-page{max-width:none;}
  .calendar-page .section-title{margin-top:0;}
  .cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px;}
  .cal-nav-label{font-family:var(--font-mono);font-weight:600;font-size:16px;letter-spacing:0.03em;color:var(--text);}
  .cal-nav-btns{display:flex;gap:6px;flex:none;}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .cal-dow{text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);padding:2px 0 6px;}
  .cal-cell{box-sizing:border-box;aspect-ratio:1;border:1px solid var(--glass-hairline);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--surface-2);min-width:0;font:inherit;color:inherit;text-align:left;}
  button.cal-cell{cursor:pointer;transition:border-color .15s ease,background .15s ease;}
  .cal-cell.empty{background:transparent;border-color:transparent;}
  .cal-cell.muted{background:var(--surface);opacity:0.55;}
  .cal-cell.has-wins{background:var(--surface-3);}
  .cal-cell.has-note{background:var(--surface-2);border-style:dashed;border-color:var(--border);}
  .cal-cell.today{border-color:var(--accent);}
  button.cal-cell:hover,button.cal-cell:focus-visible{border-color:var(--accent);outline:none;}
  .cal-cell.selected{border-color:var(--accent);box-shadow:var(--shadow-glow-accent);}
  .cal-daynum{font-size:12px;font-weight:600;color:var(--text-muted);line-height:1;flex:none;}
  .cal-badges{display:flex;flex-wrap:wrap;gap:3px;align-items:center;justify-content:center;flex:1;overflow:hidden;}
  .cal-badges .club-badge{width:30px;height:30px;}
  .cal-more{font-size:11px;font-weight:700;color:var(--text-muted);}
  @media (max-width:640px){
    .cal-grid{gap:4px;}
    .cal-cell{border-radius:9px;padding:4px;}
    .cal-badges{gap:2px;}
    .cal-badges .club-badge{width:20px;height:20px;}
  }
  @media (max-width:460px){
    .cal-grid{gap:3px;}
    .cal-cell{border-radius:8px;padding:3px;}
    .cal-badges{gap:1px;}
    .cal-badges .club-badge{width:15px;height:15px;}
    .cal-daynum{font-size:10px;}
    .cal-nav{flex-wrap:wrap;gap:8px;}
  }
  .cal-day-detail{margin-top:18px;border:1px solid var(--glass-hairline);border-radius:14px;padding:6px 16px 12px;background:var(--surface-2);}
  .cal-day-detail h3{margin:12px 0 4px;font-size:14px;}
  .cal-winner-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--glass-hairline);}
  .cal-winner-row:first-of-type{border-top:none;}
  .cal-winner-row .club-badge{width:34px;height:34px;flex:none;}
  .cal-winner-meta{min-width:0;}
  .cal-winner-season{font-size:11.5px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
  .cal-winner-name{font-weight:700;}
  .cal-empty-note{color:var(--text-muted);font-size:14px;line-height:1.5;}
  .cal-note-hint{margin:2px 0 14px;font-size:12.5px;color:var(--text-muted);line-height:1.5;}
  .cal-note-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
  .cal-note-row label{flex:none;min-width:74px;padding-top:9px;font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;}
  .cal-note-badge{flex:none;margin-top:4px;display:flex;}
  .cal-note-badge .club-badge{width:30px;height:30px;}
  .cal-note-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
  .cal-note-row input,.cal-note-row select{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);}
  .cal-note-row select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:11px;}
  .cal-note-row input:focus,.cal-note-row select:focus{outline:none;border-color:var(--accent);}
  .cal-note-remove{flex:none;width:30px;height:30px;margin-top:3px;border:none;border-radius:8px;background:var(--surface-2);color:var(--text-muted);cursor:pointer;font-size:17px;line-height:1;}
  .cal-note-remove:hover{background:var(--surface-3);color:var(--danger);}
  .cal-note-add{margin-top:4px;}
  .cal-note-actions{display:flex;gap:8px;margin-top:14px;}
  /* Small "— PES 2020" kicker above the title — a short rule, then muted,
     letter-spaced mono text, matching a broadcast title card's eyebrow. */
  .masthead-eyebrow{
    display:flex;align-items:center;gap:10px;margin-bottom:6px;
    font-family:var(--font-mono);font-size:12px;font-weight:600;
    letter-spacing:0.28em;color:var(--text-muted);
  }
  .masthead-eyebrow-rule{width:22px;height:1px;background:var(--text-muted);opacity:0.6;flex:none;}
  .masthead-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:10px;}
  header.masthead h1{
    font-family:var(--font-display);
    font-size:clamp(46px,7.5vw,64px);
    letter-spacing:0.02em;
    line-height:0.95;
    margin:0;
    text-wrap:balance;
    color:#FFFFFF;
  }
  /* First word (the club-agnostic "brand" half of the title) gets a cool
     metallic silver treatment; the rest ("LEAGUE '26") gets the accent
     green — same two-tone split as the reference title card. */
  header.masthead h1 .title-mono{
    background:linear-gradient(180deg,#FFFFFF 0%,#B9C2CE 55%,#8A93A0 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  header.masthead h1 .title-accent{
    background:linear-gradient(180deg,#FFFFFF 0%,var(--accent) 55%,var(--accent-2) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  /* Dark bordered pill, not a filled color chip — "SEASON N" in plain
     white, a faint separator dot, then the status word tinted per state
     (reusing the same win/pending/ended palette other badges use). */
  .season-badge-pill{
    position:relative;top:2px;white-space:nowrap;
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.08em;
    color:var(--text);background:rgba(255,255,255,0.03);
    border:1px solid var(--glass-hairline);border-radius:8px;padding:8px 14px;
  }
  .season-badge-sep{color:var(--text-muted);opacity:0.5;}
  .season-badge-status.win{color:var(--win);}
  .season-badge-status.pending{color:var(--info);}
  .season-badge-status.ended{color:var(--danger);}
  header.masthead .tagline{
    color:var(--text-muted);
    opacity:0.72;
    font-family:var(--font-display);
    font-size:16.5px;
    font-weight:400;
    letter-spacing:0.06em;
    text-transform:uppercase;
    max-width:62ch;
  }
  /* On phones the title is big enough to run under the three top-right
     utility icons — reserve their width on the rows that sit level with
     them so the text wraps before it reaches them. */
  @media (max-width:560px){
    .header-utility-link{top:0;}
    .masthead-eyebrow,
    .masthead-title-row{padding-right:148px;}
  }
  /* Tab bar — a single bordered card with a clipped top-right/bottom-left
     corner (like a broadcast lower-third's angled frame), tabs separated by
     hairline dividers rather than gaps, and the active tab marked by a
     short green underline instead of a filled chip. Still sticky, so it
     carries a translucent blurred background — without that, the row has
     nothing behind it once pinned to the top and scrolled content just
     shows through underneath it, unreadable. */
  .tabbar{
    position:sticky;top:0;z-index:5;
    display:flex;align-items:stretch;gap:0;
    border:1px solid var(--glass-hairline);border-radius:14px;
    margin-bottom:28px;overflow-x:auto;overflow-y:hidden;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  }
  @media (max-width:520px) {
    .tabbar{
      background:#05070d
    }
  }

  .tab-btn{
    font-family:var(--font-display);
    font-size:18px;
    letter-spacing:0.051em;
    background:none;border:none;cursor:pointer;
    padding:16px 20px;
    color:var(--text-muted);
    position:relative;
    white-space:nowrap;flex:none;
    transition:color .15s ease;
  }
  .tab-btn + .tab-btn::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:18px;background:var(--glass-hairline);
  }
  .tab-btn::after{
    content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;
    background:var(--accent);border-radius:2px 2px 0 0;
    transform:scaleX(0);transform-origin:center;
    transition:transform .18s cubic-bezier(.22,.8,.22,1),box-shadow .18s ease;
  }
  .tab-btn:hover{color:var(--text);}
  .tab-btn.active{color:var(--text);}
  /* The underline glows, and that glow reaches back up into the label
     itself (a soft text-shadow in the same accent color) so the active tab
     reads as lit from below rather than just marked with a line. */
  .tab-btn.active::after{
    transform:scaleX(1);
    box-shadow:0 0 8px 1px var(--accent),0 0 16px 3px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .tab-btn.active{text-shadow:0 0 12px color-mix(in srgb, var(--accent) 65%, transparent);}
  .tab-btn.home-btn{
    display:flex;align-items:center;justify-content:center;
    padding:28px 28px;color:var(--text-muted);flex:none;
  }
  .tab-btn.home-btn svg{width:18px;height:18px;display:block;}
  .tab-btn.home-btn:hover{color:var(--text);}
  .tab-btn.home-btn.active{color:var(--accent);}
  .tab-btn.home-btn::after{left:14px;right:14px;}
  /* Home / main menu */
  .home-page{margin-top:6px;}
  .champion-banner{
    position:relative;overflow:hidden;border-radius:20px;
    padding:30px 26px;margin-bottom:30px;min-height:150px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    background:linear-gradient(135deg, var(--champ-bg,var(--surface-2)) 0%, var(--champ-bg2,var(--surface-2)) 100%);
    color:var(--champ-text,var(--text));
    border:1px solid var(--glass-hairline);
    box-shadow:var(--shadow-lift);
  }
  .champion-banner::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(120deg, rgba(255,255,255,0.16) 0%, transparent 32%);
  }
  .champion-banner.empty{background:var(--surface-2);color:var(--text-muted);}
  .champion-blur{
    position:absolute;top:-70px;right:-50px;opacity:0.24;filter:blur(24px);
    pointer-events:none;transform:rotate(-6deg);line-height:0;
  }
  .champion-content{position:relative;z-index:1;}
  /* Same crown glyph as the Trophy Cabinet, sitting just above the eyebrow. */
  .champion-crown{
    display:block;width:22px;height:22px;margin-bottom:10px;
    color:var(--gold);filter:drop-shadow(0 2px 5px rgba(0,0,0,0.4));
  }
  .champion-crown svg{width:100%;height:100%;display:block;}
  .champion-banner.empty .champion-crown{opacity:0.45;}
  .champion-eyebrow{
    text-transform:uppercase;font-size:12px;letter-spacing:0.16em;font-weight:700;
    color:var(--champ-fg,inherit);opacity:0.92;margin-bottom:6px;
  }
  .champion-name{
    font-family:var(--font-display);font-size:clamp(30px,6vw,46px);
    line-height:1;letter-spacing:0.02em;
  }
  .champion-club{font-size:16px;font-weight:700;margin-top:5px;opacity:0.92;}
  .champion-sub{font-size:12.5px;margin-top:9px;opacity:0.8;}
  .champion-crest{position:relative;z-index:1;flex:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,0.35));}
  /* Home showcase — one bordered block: season label, reigning-champion
     banner, then the four award cells butted straight against it (2-up,
     hairline dividers, no gaps). */
  .season-showcase{
    margin-bottom:30px;
    border:1px solid var(--glass-hairline);border-radius:20px;overflow:hidden;
    background:var(--surface);
  }
  .season-showcase-bare{border:none;background:none;box-shadow:none;overflow:visible;}
  .season-showcase-eyebrow{
    text-transform:uppercase;font-size:12px;letter-spacing:0.16em;font-weight:700;
    color:var(--text-muted);padding:16px 22px 12px;
  }
  .season-showcase .champion-banner{
    margin:0;border-radius:0;border-left:0;border-right:0;border-top:0;
    border-bottom:1px solid var(--glass-hairline);box-shadow:none;
  }
  .season-awards-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--glass-hairline);
  }
  .award-card{
    display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;
    background:#0b0d1696;border:none;border-radius:0;padding:20px 22px;min-width:0;
  }
  .award-card-empty{opacity:0.5;}
  .award-text{min-width:0;}
  .award-icon-wrap{
    width:92px;height:92px;flex:none;display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  }
  .award-icon{max-width:100%;max-height:100%;display:block;}
  .award-card-empty .award-icon{filter:grayscale(1);opacity:0.7;}
  .award-label{
    font-family:var(--font-display);font-size:14px;letter-spacing:0.07em;text-transform:uppercase;
    color:var(--accent);
  }
  .award-name{font-weight:700;font-size:15.5px;line-height:1.2;margin-top:3px;word-break:break-word;}
  .award-stat{font-size:11.5px;color:var(--text-muted);line-height:1.3;margin-top:3px;}
  @media (max-width:600px){
    .season-awards-grid{grid-template-columns:1fr;}
    .award-icon-wrap{width:74px;height:74px;}
    .award-card{padding:16px 18px;}
    .season-showcase-eyebrow{padding:14px 18px 10px;}
  }
  /* Home hero controls — the "Kickoff" button (left) and the collapsible
     "Main Menu" (right) share one row. */
  .home-menu-row{display:flex;align-items:stretch;margin-bottom:26px;}
  .hud-div{width:1px;align-self:stretch;margin:14px 0;flex:none;background:currentColor;opacity:0.22;}
  .kickoff-btn{
    flex:0 0 clamp(158px, 27%, 200px);
    position:relative;display:flex;align-items:center;gap:13px;overflow:hidden;
    padding:0 18px;border:none;border-radius:16px 0px 0px 16px;cursor:pointer;
    background:var(--accent-gradient);color:var(--accent-contrast);
    font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.1em;
    font-size:21px;font-weight:500;line-height:1;
    box-shadow:var(--shadow-glow-accent), inset 0 1px 0 rgba(255,255,255,0.22);
    transition:filter .15s ease, box-shadow .15s ease, transform .1s ease;
  }
  .kickoff-btn > *{position:relative;z-index:1;}
  .kickoff-btn::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(118deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 46%);
  }
  .kickoff-btn:hover{filter:brightness(1.05);box-shadow:var(--shadow-glow-accent), var(--shadow-lift);}
  .kickoff-btn:active{transform:translateY(1px);}
  .kickoff-ball{width:24px;height:24px;flex:none;display:block;}
  .kickoff-label{white-space:nowrap;}
  .kickoff-arrow{margin-left:auto;display:flex;flex:none;}
  .kickoff-arrow svg{width:22px;height:22px;display:block;}
  /* Main Menu — collapsed shows just the "Main Menu" bar; the panel is
     absolutely positioned so opening it OVERLAYS the content below instead
     of pushing it down. */
  .home-menu-dd{flex:1;min-width:0;position:relative;z-index:20;}
  .home-menu-toggle{
    position:relative;display:flex;align-items:center;gap:16px;width:100%;height:100%;
    padding:14px 20px;cursor:pointer;text-align:left;
    border:1px solid var(--glass-hairline);border-radius:0px 16px 16px 0px;background:rgb(19, 22, 27);
    color:var(--text);font-family:var(--font-display);text-transform:uppercase;
    transition:background .2s ease;
  }
  .home-menu-toggle:hover{background:rgb(25, 29, 35);}
  .hmt-icon{display:flex;flex:none;color:var(--text-muted);transition:color .2s ease;}
  .hmt-icon svg{width:22px;height:22px;display:block;}
  .home-menu-dd.open .hmt-icon{color:var(--accent);}
  .hmt-text{display:flex;flex-direction:column;gap:3px;margin-right:auto;min-width:0;}
  .hmt-title{font-size:20px;font-weight:500;letter-spacing:0.14em;color:var(--text-muted);transition:color .2s ease;}
  .home-menu-dd.open .hmt-title{color:var(--text);}
  .hmt-sub{
    font-size:11px;font-style:italic;letter-spacing:0.11em;color:var(--text-muted);opacity:0.7;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .home-menu-toggle-chevron{
    display:flex;flex:none;color:var(--text-muted);
    transition:transform .32s cubic-bezier(.4,0,.2,1),color .2s ease;
  }
  .home-menu-toggle-chevron svg{width:16px;height:16px;}
  .home-menu-dd.open .home-menu-toggle-chevron{transform:rotate(180deg);color:var(--accent);}
  .home-menu-panel{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:2;
    border:1px solid var(--glass-hairline);border-radius:16px;background:rgb(10, 13, 19);
    box-shadow:var(--shadow-lift);
    overflow:hidden;max-height:0;opacity:0;pointer-events:none;
    transform:translateY(-6px);
    transition:max-height .34s cubic-bezier(.4,0,.2,1),opacity .22s ease,transform .28s cubic-bezier(.4,0,.2,1);
  }
  .home-menu-dd.open .home-menu-panel{
    max-height:800px;opacity:1;pointer-events:auto;transform:translateY(0);
  }
  .home-menu-panel-inner .menu-link:first-child{border-top:none;}
  @media (max-width:460px){
    .kickoff-btn{flex:0 0 64px;padding:0;justify-content:center;}
    .kickoff-label,.kickoff-arrow,.kickoff-btn .hud-div{display:none;}
    .home-menu-toggle{padding:12px 16px;gap:12px;}
    .hmt-title{font-size:17px;letter-spacing:0.1em;}
    .hmt-sub{font-size:10px;}
  }
  .menu-link{
    position:relative;
    display:flex;align-items:center;gap:18px;width:100%;text-align:left;
    background:none;border:none;border-top:1px solid var(--border);
    padding:20px 22px;cursor:pointer;color:var(--text);
    transition:color .25s ease;
  }
  /* Left-edge accent bar that lights on hover — the tab strip's underline
     glow, rotated to run down the left side and dialled back to a whisper.
     No background fill, nothing shifts. */
  .menu-link::before{
    content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
    background:var(--accent);border-radius:0 2px 2px 0;
    transform:scaleY(0);transform-origin:center;
    transition:transform .22s cubic-bezier(.22,.8,.22,1),box-shadow .22s ease;
  }
  .menu-link:hover::before{
    transform:scaleY(1);
    box-shadow:0 0 6px 1px color-mix(in srgb, var(--accent) 38%, transparent);
  }
  .menu-link:hover .menu-label{
    color:var(--accent);
    text-shadow:0 0 14px color-mix(in srgb, var(--accent) 42%, transparent);
  }
  .menu-link:hover .menu-arrow{color:var(--accent-2);}
  .menu-index{font-family:var(--font-mono);font-size:14px;color:var(--text-muted);min-width:28px;}
  .menu-text{display:flex;flex-direction:column;gap:2px;flex:1;}
  .menu-label{
    font-family:var(--font-display);font-size:clamp(18px,5.5vw,28px);
    letter-spacing:0.03em;line-height:1;color:var(--text);
    transition:color .25s ease,text-shadow .25s ease;
  }
  .menu-sub{font-size:13px;color:#5E6475;}
  .menu-arrow{
    font-family:var(--font-display);font-size:28px;color:var(--text-muted);
    transition:color .25s ease;
  }
  section{margin-bottom:44px;}
  h2.section-title{
    font-family:var(--font-display);
    font-size:28px;
    letter-spacing:0.03em;
    margin:0 0 16px;
    color:var(--text);
  }
  h3.subsection-title{
    font-family:var(--font-display);
    font-size:19px;
    letter-spacing:0.03em;
    margin:0 0 12px;
    color:var(--text);
  }
  /* Career record: all-time / by-league toggle */
  .view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;flex:none;background:var(--surface);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));}
  .view-toggle .toggle-btn{
    font-family:var(--font-body);font-size:13px;font-weight:700;
    padding:8px 14px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;
    transition:color .12s ease,background .12s ease;
  }
  .view-toggle .toggle-btn + .toggle-btn{border-left:1px solid var(--border);}
  .view-toggle .toggle-btn:hover{color:var(--text);}
  .view-toggle .toggle-btn.active{background:var(--accent-gradient);color:var(--accent-contrast);box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);}
  .league-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 18px;text-align:center;}
  .league-nav-btn{
    width:36px;height:36px;border-radius:9px;border:1px solid var(--border);flex:none;
    background:var(--surface);color:var(--text);cursor:pointer;font-size:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .12s ease,color .12s ease,box-shadow .12s ease;
  }
  .league-nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-glow-accent);}
  .league-nav-btn:disabled{opacity:0.35;cursor:default;}
  .league-nav-label{font-family:var(--font-display);font-size:23px;letter-spacing:0.02em;min-width:160px;}
  .career-record-viewport{position:relative;overflow:hidden;}
  .career-record-viewport.is-sliding{transition:height .38s cubic-bezier(.22,.8,.22,1);}
  .career-record-pane{width:100%;}
  .career-record-pane.is-sliding{transition:transform .38s cubic-bezier(.22,.8,.22,1);}
  /* Stats tab */
  /* One uniform tile size — every card is half the grid's width on
     anything wider than a phone, full width below that. No more "wide"
     cards spanning two columns: a mix of quarter- and half-width tiles is
     what made the old grid feel cramped and inconsistent, so match-up
     cards (Biggest Win, Highest-Scoring Match, etc.) now get exactly the
     same footprint as a plain leader card. */
  .stats-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;}
  @media (max-width: 640px){
    .stats-grid{grid-template-columns:1fr;}
  }
  .stat-card{
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:16px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    padding:24px 26px;display:flex;flex-direction:column;min-height:116px;
    transition:box-shadow .18s ease,transform .18s ease;
  }
  .stat-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px);}
  /* Header: label pinned top-left, the number + its unit pinned top-right.
     Nothing below this row unless a card has supporting context to show —
     .stat-card-body's auto top margin below shoves that context down to
     the bottom of the card, so whatever's left in between reads as
     deliberate breathing room rather than a leftover gap. */
  .stat-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
  .stat-card-label{
    text-transform:uppercase;font-size:12.5px;letter-spacing:0.07em;font-weight:800;
    color:#CCD1DC;max-width:56%;line-height:1.35;padding-top:6px;
  }
  .stat-card-metric{flex:none;text-align:right;}
  .stat-card-value{font-family:var(--font-display);font-size:52px;line-height:1;letter-spacing:0.01em;color:var(--accent);}
  .stat-card-unit{font-size:12.5px;font-weight:600;color:var(--text-muted);margin-top:4px;}
  .stat-card-body{margin-top:auto;padding-top:20px;}
  .stat-card-body-empty{display:flex;justify-content:flex-end;}
  .stat-names{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;}
  .stat-chip{
    display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;
    background:var(--surface-2);border-radius:999px;padding:6px 14px 6px 8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);
    transition:background .12s ease,box-shadow .12s ease;
  }
  /* Any club/team cross-link, wherever it appears — standings rows, stat-card
     match sides, opponent chips — shares this one hover/click affordance. */
  [data-action="goto-team"]{cursor:pointer;}
  .stat-chip[data-action="goto-team"]:hover{background:var(--surface-3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 1px var(--accent-soft);}
  .stat-match-side[data-action="goto-team"]{border-radius:10px;transition:background .12s ease;}
  .stat-match-side[data-action="goto-team"]:hover{background:var(--surface-2);}
  .stat-empty{color:var(--text-muted);font-size:13.5px;font-weight:600;}
  .stat-haul-list{display:flex;flex-direction:column;gap:9px;}
  .stat-haul-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .stat-haul-row .stat-league-tag{margin-left:auto;text-align:right;}
  .stat-match{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:12px;}
  .stat-match-side{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13.5px;font-weight:700;max-width:130px;text-align:center;}
  .stat-match-side.winner{color:var(--win);}
  .stat-match-side.loser{color:var(--danger);}
  .stat-match-score{font-family:var(--font-mono);font-size:23px;font-weight:600;flex:none;}
  .stat-league-tag{font-size:12px;color:var(--text-muted);text-align:right;}
  /* Teams tab */
  .team-list{display:flex;flex-direction:column;gap:14px;}
  .team-card{
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:16px;overflow:hidden;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    transition:box-shadow .18s ease;
  }
  .team-card summary{
    cursor:pointer;padding:24px 24px;list-style:none;
    background:var(--card-header);transition:background .15s ease;
  }
  .team-card summary:hover{background:var(--card-header-lit);}
  .team-card[open] summary{background:var(--card-header-lit);}
  .team-card[open]{box-shadow:var(--shadow-lift);}
  .team-card summary::-webkit-details-marker{display:none;}
  .team-card-summary{display:flex;align-items:center;gap:12px;}
  .team-card-summary .arrow{color:var(--text-muted);transition:transform .22s ease;flex:none;}
  .team-card[open] .team-card-summary .arrow{transform:rotate(90deg);color:var(--accent);}
  /* Slightly bigger crest than app.js's default 36px for this one spot —
     it's the first thing you see scanning the Teams list, so it earns a
     bit more visual weight. Overriding the SVG's inline width/height via
     CSS here is safe: this only touches crests inside a team card's
     summary row, nowhere else. */
  .team-card-summary .club-badge{flex:none;width:60px;height:60px;}
  .team-card-name{
    font-family:var(--font-display);font-size:19px;letter-spacing:0.02em;flex:1;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .team-card-record{font-size:13px;color:var(--text-muted);font-weight:600;flex:none;}
  /* Last-6-results form guide on a team's collapsed card header — oldest on
     the left, most recent on the right. .team-card-summary's own flex gap
     already gives it room from the W/D/L record before it. */
  .team-card-form{display:flex;align-items:center;gap:5px;flex:none;}
  .form-dot{
    width:25px;height:25px;border-radius:50%;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-size:12px;font-weight:400;letter-spacing:0;
    border:1.5px solid;line-height:1;
    box-shadow:0 1px 2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .form-dot.form-w{background:var(--win-soft);color:var(--win);border-color:var(--win);}
  .form-dot.form-d{background:var(--info-soft);color:var(--info);border-color:var(--info);}
  .form-dot.form-l{background:var(--danger-soft);color:var(--danger);border-color:var(--danger);}
  @media (max-width:520px){
    /* Six dots plus the record text is too much for one line next to a
       club name on a phone-width screen — wrap the form guide onto its
       own line instead of letting the name get squeezed to almost
       nothing (the ellipsis above is the fallback for that, not the
       primary plan). Reordering (not moving it in the DOM) keeps the
       arrow anchored with the name/record on line one. */
    .team-card-summary{flex-wrap:wrap;row-gap:6px;}
    .team-card-summary .arrow{order:2;}
    .team-card-form{order:3;flex-basis:100%;justify-content:flex-end;gap:4px;}
    .form-dot{width:19px;height:19px;font-size:10px;}1
  }
  .team-card-body{padding:16px 18px 22px;}
  /* Trophy Cabinet — a curated "display case": a header with a totals pill,
     then a framed list of shelves. Each shelf = one honour type, with a
     count strip (a crown per league title, a mini award icon for the rest)
     and a big ×N tally. */
  .cabinet{
    margin:2px 0 10px;
    border:1px solid color-mix(in srgb, var(--accent) 20%, var(--glass-hairline));
    border-radius:18px;
    /* Front to back: the accent glow at the top, a scrim that keeps the
       shelves legible, then the pitch artwork over the surface colour.
       Clipped to the rounded box. */
    background:
      radial-gradient(130% 90% at 50% -18%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%),
      linear-gradient(180deg, color-mix(in srgb, #05070d 58%, transparent) 0%, color-mix(in srgb, #05070d 82%, transparent) 100%),
      url("assets/cabinet-bg.jpg") var(--surface-2);
    background-size:cover,cover,cover;
    background-position:center,center,center;
    background-repeat:no-repeat,no-repeat,no-repeat;
    padding:18px;
  }
  .cabinet-head{
    display:flex;align-items:center;gap:14px;
    padding:0 4px 16px;margin-bottom:16px;
    border-bottom:1px solid var(--glass-hairline);
  }
  .cabinet-head-icon{width:38px;height:38px;flex:none;display:block;filter:drop-shadow(0 4px 9px rgba(0,0,0,0.35));}
  .cabinet-head-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
  .cabinet-head-title{
    font-family:var(--font-display);font-size:20px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text);
  }
  .cabinet-head-sub{
    font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);
  }
  .cabinet-head-count{
    margin-left:auto;flex:none;white-space:nowrap;
    font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--text-muted);
    border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-radius:999px;padding:6px 14px;
  }
  .cabinet-head-count b{color:var(--accent);font-size:14px;margin-right:3px;}
  .cabinet-shelves{border:1px solid var(--glass-hairline);border-radius:14px;overflow:hidden;}
  .cabinet-shelf{
    display:flex;align-items:stretch;gap:16px;
    padding:16px 20px;border-top:1px solid var(--glass-hairline);
  }
  .cabinet-shelf:first-child{border-top:none;}
  .cabinet-shelf-idx{
    flex:none;width:34px;align-self:center;text-align:center;
    font-family:var(--font-display);font-size:24px;letter-spacing:0.04em;color:var(--text-muted);line-height:1;
  }
  .cabinet-shelf-idx::after{
    content:"";display:block;width:20px;height:2px;margin:8px auto 0;
    background:currentColor;opacity:0.45;border-radius:2px;
  }
  .cabinet-shelf-art{
    width:92px;height:92px;flex:none;align-self:center;display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,0.42));
  }
  .cabinet-shelf-icon{max-width:100%;max-height:100%;display:block;}
  .cabinet-shelf-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px;}
  .cabinet-shelf-name{
    font-family:var(--font-display);font-size:17px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text);
  }
  .cabinet-shelf.is-bottler .cabinet-shelf-name{color:var(--text-muted);}
  .cabinet-shelf-sub{font-size:12px;color:var(--text-muted);}
  .cabinet-count-strip{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;}
  .cabinet-count-icon{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;}
  .cabinet-count-icon.is-crown svg{width:100%;height:100%;color:var(--gold);filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45));}
  .cabinet-count-icon img{max-width:100%;max-height:100%;display:block;}
  .cabinet-count-more{font-size:11px;color:var(--text-muted);font-weight:600;margin-left:4px;}
  .cabinet-shelf-tally{
    flex:none;align-self:stretch;display:flex;align-items:center;gap:8px;
    padding-left:22px;border-left:1px solid var(--glass-hairline);
  }
  .cabinet-shelf-x{font-family:var(--font-mono);font-size:18px;color:var(--text-muted);}
  .cabinet-shelf-n{font-family:var(--font-display);font-size:46px;line-height:0.8;color:var(--text);}
  .cabinet-shelf-tally.is-gold .cabinet-shelf-n{color:var(--gold);}
  .cabinet-empty{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:13.5px;padding:6px 2px 2px;line-height:1.5;}
  .cabinet-empty-icon{width:44px;height:44px;flex:none;filter:grayscale(1);opacity:0.5;}

  /* Reputation — recurring-trait badges at the foot of the cabinet */
  .cabinet-rep{margin-top:16px;padding-top:14px;border-top:1px solid var(--glass-hairline);}
  .cabinet-rep-head{
    font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
    color:var(--text-muted);margin-bottom:12px;
  }
  .cabinet-rep-empty{margin:0;font-size:12.5px;font-style:italic;color:var(--text-muted);}
  .rep-chips{display:flex;flex-direction:column;gap:1px;border:1px solid var(--glass-hairline);border-radius:12px;overflow:hidden;}
  .rep-chip{
    display:flex;gap:12px;align-items:flex-start;padding:12px 14px;
    background:color-mix(in srgb, var(--surface-2) 62%, transparent);
  }
  .rep-chip.is-gold{background:color-mix(in srgb, var(--gold) 12%, var(--surface-2));}
  .rep-chip.is-red{background:color-mix(in srgb, #c0392b 12%, var(--surface-2));}
  .rep-chip-icon{flex:none;width:20px;height:20px;margin-top:1px;color:var(--text-muted);}
  .rep-chip.is-gold .rep-chip-icon{color:var(--gold);}
  .rep-chip.is-red .rep-chip-icon{color:#d5674f;}
  .rep-chip-icon svg{width:100%;height:100%;display:block;}
  .rep-chip-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
  .rep-chip-label{
    font-family:var(--font-display);font-size:14px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);
  }
  .rep-chip.is-gold .rep-chip-label{color:var(--gold);}
  .rep-chip.is-red .rep-chip-label{color:#e08069;}
  .rep-chip-text{font-size:12.5px;line-height:1.5;color:var(--text);}
  .rep-chip-ev{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);}
  @media (max-width:600px){
    .cabinet{padding:14px;}
    .cabinet-shelf{gap:10px;padding:14px 12px;}
    .cabinet-shelf-idx{width:22px;font-size:16px;}
    .cabinet-shelf-idx::after{width:14px;margin-top:5px;}
    .cabinet-shelf-art{width:56px;height:56px;}
    .cabinet-shelf-name{font-size:15px;letter-spacing:0.08em;}
    .cabinet-shelf-tally{padding-left:12px;gap:4px;}
    .cabinet-shelf-x{font-size:14px;}
    .cabinet-shelf-n{font-size:32px;}
    .cabinet-count-icon{width:15px;height:15px;}
  }
  .team-fixture-filter{margin-bottom:10px;}
  .team-fixture-filter-toggle{
    display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
    background:var(--surface-2);border:1px solid var(--border);border-radius:20px;
    color:var(--text-muted);font-size:12.5px;font-weight:600;cursor:pointer;
    transition:background .12s ease,color .12s ease,border-color .12s ease;
  }
  .team-fixture-filter-toggle:hover{background:var(--surface-3);color:var(--text);}
  .team-fixture-filter-toggle svg{width:13px;height:13px;flex:none;transition:transform .15s ease;}
  .team-fixture-filter-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  .team-fixture-filter-toggle.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);}
  .team-fixture-filter-panel{
    margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:12px;
    background:var(--surface-2);display:flex;flex-direction:column;gap:10px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    animation:tabEnter .24s cubic-bezier(.22,.8,.22,1);
  }
  .team-fixture-filter-list{display:flex;flex-wrap:wrap;gap:8px;}
  .team-fixture-filter-opt{
    display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    font-size:12.5px;font-weight:500;cursor:pointer;user-select:none;
  }
  .team-fixture-filter-opt:has(input:checked){border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
  .team-fixture-filter-opt input{width:14px;height:14px;flex:none;accent-color:var(--accent);cursor:pointer;}
  .team-fixture-filter-opt svg{width:16px;height:16px;flex:none;}
  .team-fixture-filter-panel .btn.small{align-self:flex-start;}
  .team-fixture-list{display:flex;flex-direction:column;gap:2px;}
  .team-fixture-row{
    display:grid;grid-template-columns:24px 1fr 64px auto;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;
  }
  .team-fixture-row:last-child{border-bottom:none;}
  .team-fixture-result{
    width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;background:var(--surface-2);color:var(--text-muted);
  }
  .team-fixture-result.result-w{background:var(--win-soft);color:var(--win);}
  .team-fixture-result.result-d{background:var(--info-soft);color:var(--info);}
  .team-fixture-result.result-l{background:var(--danger-soft);color:var(--danger);}
  .team-fixture-opp{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0;}
  .team-fixture-opp-link{
    display:flex;align-items:center;gap:8px;font:inherit;font-weight:inherit;color:inherit;
    background:none;border:none;padding:2px 4px;margin:-2px -4px;border-radius:6px;cursor:pointer;min-width:0;
    transition:background .12s ease,color .12s ease;
  }
  .team-fixture-opp-link:hover{background:var(--surface-2);color:var(--accent);}
  .team-fixture-opp .who{color:var(--text-muted);font-weight:500;font-size:12px;}
  .team-fixture-score{font-family:var(--font-mono);font-weight:700;text-align:center;}
  .team-fixture-meta{color:var(--text-muted);font-size:12px;text-align:right;white-space:nowrap;}
  .team-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;}
  .team-fixture-row.has-report{cursor:pointer;border-radius:8px;transition:background .12s ease;}
  .team-fixture-row.has-report:hover{background:var(--surface-2);}
  .team-pager-label{font-size:13px;color:var(--text-muted);}
  @media (max-width:600px){
    .team-fixture-row{grid-template-columns:20px 1fr 50px;}
    .team-fixture-meta{grid-column:1 / -1;text-align:left;margin-top:2px;}
  }
  .eyebrow{
    text-transform:uppercase;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:0.09em;
    color:var(--text-muted);
  }
  /* Head-to-Head tab */
  .h2h-picker-label{
    display:none;text-transform:uppercase;font-size:11.5px;letter-spacing:0.08em;font-weight:700;
    color:var(--text-muted);margin-bottom:10px;text-align:center;
  }
  /* Fighter-select picker: big photo + big name per side, prev/next arrows
     flanking the photo. --face-color (that player's current club color)
     rings the photo tile — a subtle identity cue even though the picture
     itself is the person, not the badge. */
  .h2h-select-row{padding-top: 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;justify-items:center;column-gap:18px;margin-bottom:8px;}
  .h2h-select-unit{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;}
  .h2h-select-face-row{display:flex;align-items:center;gap:5px;}
  .h2h-arrow{
    flex:none;width:38px;height:38px;border-radius:50%;
    border:0px solid var(--border);background:rgba(255, 255, 255, 0);color:var(--text-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .12s ease,color .12s ease,box-shadow .12s ease,background .12s ease;
  }
  .h2h-arrow svg{width:18px;height:18px;}
  .h2h-arrow:hover{border-color:#3DDC9700;color:var(--accent);}
  .h2h-select-face{
    flex:none;width:118px;height:178px;border-radius:22px;overflow:hidden;
    background:var(--surface-2);
    box-shadow:0 0 0 3px var(--face-color,var(--accent)), var(--shadow-lift);
  }
  .h2h-select-photo{display:flex;width:100%;height:100%;align-items:center;justify-content:center;}
  .h2h-select-photo .avatar-img{width:100%;height:100%;object-fit:cover;display:block;}
  .h2h-select-photo .avatar-placeholder svg{width:44%;height:44%;color:var(--text-muted);}
  .h2h-select-name{
    display:none;font-family:var(--font-display);font-size:24px;letter-spacing:0.02em;
    margin-top:14px;text-align:center;
  }
  /* Sits between the two portrait tiles (not the labels), so the swap
     reads as flipping the matchup rather than as a third header. */
  .h2h-swap-col{
    display:flex;align-items:center;justify-content:center;
    height:178px;margin-top:27px;
  }
  .h2h-swap-btn{
    width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-ambient);
    transition:color .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease;
  }
  .h2h-swap-btn svg{width:20px;height:20px;display:block;}
  .h2h-swap-btn:hover{color:var(--accent);border-color:var(--accent);box-shadow:var(--shadow-glow-accent);}
  .h2h-summary-card{
    position:relative;overflow:hidden;
    border:1px solid var(--glass-hairline);border-bottom-width:10px;border-radius:20px;
    /* Gold-beam artwork behind the W/D/L trio, with a scrim over it so the
       numbers and labels stay readable. Clipped to the rounded card. */
    background-color:var(--surface);
    background-image:
      linear-gradient(180deg, color-mix(in srgb, #05070d 58%, transparent) 0%, color-mix(in srgb, #05070d 78%, transparent) 100%),
      url("assets/h2h-bg.jpg");
    background-size:cover,cover;
    background-position:center,center;
    background-repeat:no-repeat,no-repeat;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    padding:30px 26px 26px;margin-top:24px;
  }
  /* Small centered kicker with an accent underline — the "broadcast lower
     third" title treatment the rest of this card borrows from. */
  .h2h-vs-eyebrow{
    display:none;text-align:center;margin-bottom:22px;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3em;
    color:var(--text-muted);
  }
  .h2h-vs-eyebrow span{position:relative;padding-bottom:10px;}
  .h2h-vs-eyebrow span::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:28px;height:2px;background:var(--accent);
  }
  /* Names flank the Wins/Draws/Losses trio — small given-name caption over
     a big bold surname, mirrored on each side, no photo or crest since this
     tab is about the two people and the picker above already showed faces. */
  .h2h-vs-top{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .h2h-vs-side{flex:1 1 0;min-width:0;}
  .h2h-vs-side-b{text-align:right;}
  .h2h-vs-first{font-size:16px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;}
  .h2h-vs-last{
    font-family:var(--font-display);font-size:clamp(28px,4.2vw,30px);
    line-height:1;letter-spacing:0.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .h2h-vs-trio{display:flex;align-items:center;gap:18px;flex:none;}
  .h2h-vs-stat{display:flex;flex-direction:column;align-items:center;min-width:44px;}
  .h2h-vs-stat-num{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--text);}
  .h2h-vs-stat-lbl{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:4px;}
  .h2h-vs-divider{width:1px;align-self:stretch;background:var(--glass-hairline);}
  /* Win-percentage bar: a color-coded, faintly striped pill with each
     side's % pinned right next to it rather than stacked below as a second
     headline — the trio above is already the card's headline. */
  .h2h-vs-bar-row{display:flex;align-items:center;gap:14px;margin-top:26px;}
  .h2h-vs-bar-pct{font-family:var(--font-display);font-size:18px;color:var(--text);flex:none;min-width:3.2ch;}
  .h2h-vs-bar-pct-b{text-align:right;}
  .h2h-vs-bar-row .h2h-bar{flex:1;margin-top:0;}
  .h2h-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--surface-3);}
  .h2h-bar-seg{height:100%;position:relative;}
  .h2h-bar-seg.h2h-bar-d{background:var(--border);}
  /* Straight-stripe texture on every bar segment — a lighter tint of
     whatever color the segment already has (each side's own club color, set
     inline by JS), so it works regardless of which color lands there rather
     than hardcoding one. Kept vertical (an angle at this stripe width just
     anti-aliases into a jagged edge) and thin/faint so it reads as texture
     rather than a pattern. */
  .h2h-bar-seg::after,
  .h2h-metric-bar-seg::after{
    content:"";
    position:absolute;inset:0;
    background-image:repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 1px,
      transparent 2px, transparent 5px);
    pointer-events:none;
    mix-blend-mode:lighten;
  }
  .h2h-vs-hr{height:1px;background:var(--glass-hairline);margin-top:24px;}
  /* Bottom strip: icon-led stat groups (total meetings, avg goals, recent
     form) separated by hairline dividers, like a broadcast graphic's lower
     row of facts. */
  .h2h-vs-footer{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:20px;flex-wrap:wrap;}
  .h2h-vs-footer-stat{display:flex;flex-direction:column;align-items:center;gap:6px;}
  .h2h-vs-footer-top{display:flex;align-items:center;gap:8px;}
  .h2h-vs-icon{width:28px;height:28px;color:var(--text-muted);flex:none;}
  .h2h-vs-footer-num{font-family:var(--font-display);font-size:26px;line-height:1;color:var(--text);}
  .h2h-vs-footer-lbl{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;}
  .h2h-vs-footer-div{width:1px;align-self:stretch;background:var(--glass-hairline);}
  .h2h-vs-footer-dots{display:flex;align-items:center;gap:4px;}
  .h2h-vs-footer-dots .form-dot{width:24px;height:24px;font-size:11px;}
  .h2h-streak-note{
    margin-top:16px;text-align:center;font-size:13px;font-weight:700;
    color:var(--gold);background:var(--gold-soft);border-radius:10px;padding:8px 12px;
  }
  @media (max-width:520px){
    .h2h-vs-top{flex-wrap:wrap;justify-content:center;text-align:center;}
    .h2h-vs-side-b{text-align:center;}
    .h2h-vs-side{flex-basis:100%;order:1;}
    .h2h-vs-side-b{order:3;}
    .h2h-vs-trio{order:2;width:100%;justify-content:center;margin-top:12px;}
    .h2h-vs-stat-num{font-size:36px;}
    .h2h-vs-footer{gap:16px;}
  }
  /* Key Metrics: slim, full-width comparison rows (a value+photo on each
     outer edge, the label and a two-color proportional bar centered) —
     one per metric, stacked, rather than a grid of square tiles. */
  .h2h-metric-list{display:flex;flex-direction:column;gap:8px;}
  .h2h-metric-row{
    display:flex;align-items:center;gap:18px;
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:12px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    padding:16px 22px;
  }
  .h2h-metric-end{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
  .h2h-metric-end-b{flex-direction:row-reverse;}
  .h2h-metric-avatar{
    width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;
    background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  }
  .h2h-metric-avatar .avatar-img{width:100%;height:100%;object-fit:cover;display:block;}
  .h2h-metric-avatar .avatar-placeholder svg{width:46%;height:46%;color:var(--text-muted);}
  .h2h-metric-value{font-family:var(--font-display);font-size:32px;letter-spacing:0.02em;min-width:2.4ch;text-align:center;}
  .h2h-metric-mid{flex:1;min-width:0;text-align:center;}
  .h2h-metric-label{font-family:var(--font-display);font-size:18px;font-weight:400;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted);}
  .h2h-metric-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;margin-top:8px;background:var(--surface-3);}
  .h2h-metric-bar-seg{height:100%;position:relative;}
  .h2h-meeting-opp{justify-content:left;}
  .h2h-meeting-opp .who{color:var(--text-muted);font-weight:500;}
  @media (max-width:640px){
    .h2h-select-row{column-gap:8px;}
    .h2h-select-face{width:98px;height:158px;border-radius:18px;}
    .h2h-swap-col{height:100%;margin-top:0px;align-items: end;}
    .h2h-swap-btn{width:38px;height:38px;}
    .h2h-swap-btn svg{width:17px;height:17px;}
    .h2h-select-name{font-size:19px;margin-top:10px;}
    .h2h-summary-top{flex-direction:column;gap:18px;}
    .h2h-record-trio{gap:36px;}
    .h2h-record-num{font-size:32px;}
    .h2h-bar-pct{font-size:28px;}
    .h2h-summary-stats{gap:26px;}
    .h2h-summary-stat-num{font-size:26px;}
    .h2h-metric-row{flex-wrap:wrap;justify-content:center;gap:10px;padding:14px;}
    .h2h-metric-mid{flex-basis:100%;order:3;}
    .h2h-metric-value{font-size:26px;}
  }
  /* Trophy cards */
  .trophy-grid{display:flex;flex-wrap:wrap;gap:16px;}
  .trophy-card{
    border:1px solid rgba(156, 156, 156, 0.09);
    border-radius:16px;
    background:var(--surface);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    padding:24px 20px 20px;
    min-width:190px;
    flex:1 1 190px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:box-shadow .18s ease,transform .18s ease;
  }
  /* Glass-panel sheen: a soft light streak across the top, like a
     reflection off glass, sitting above the card's own background
     (plain or gold-leader gradient) but below its text/badge content. */
  .trophy-card::before{
    content:"";
    position:absolute;inset:0;
    z-index:0;
    background:linear-gradient(165deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 30%, transparent 55%);
    pointer-events:none;
  }
  .trophy-card > *{position:relative;z-index:1;}
  .trophy-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
  .trophy-card.is-link{cursor:pointer;}
  .trophy-card.is-link:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--glass-hairline));}
  .trophy-card.is-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .trophy-card.leader{
    border-color:var(--gold);
    background:linear-gradient(180deg,var(--gold-soft),var(--surface) 65%);
    box-shadow:0 0 0 1px var(--gold), 0 8px 22px color-mix(in srgb, var(--gold) 28%, transparent);
  }
  .trophy-card-badge{margin-bottom:12px;line-height:0;}
  .trophy-card .name{font-weight:700;font-size:17px;}
  .club-badge{flex:none;display:block;}
  .trophy-card .count{
    font-family:var(--font-display);
    font-size:54px;
    line-height:1;
    margin-top:6px;
    color:#BCC4D2;
  }
  .trophy-card.leader .count{color:var(--gold);}
  .trophy-card .label{
    font-size:11px;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .empty-note{
    color:var(--text-muted);
    font-size:14px;
    background:var(--surface-2);
    border:1px dashed var(--border);
    border-radius:12px;
    padding:14px 16px;
  }
  /* Career table */
  .table-scroll{
    overflow-x:auto;border:1px solid var(--glass-hairline);border-radius:14px;background:var(--surface);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--shadow-ambient);
  }
  table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px;}
  th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;}
  thead th{
    font-size:11.5px;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);
    background:var(--surface-2);font-weight:700;
    box-shadow:inset 0 -2px 0 0 var(--accent-soft);
  }
  tbody tr:last-child td{border-bottom:none;}
  /* Faint zebra striping — a scoreboard/leaderboard convention that makes a
     dense standings table easy to scan at a glance instead of reading as
     one undifferentiated block of rows. tr.rank-1 below always wins over
     this, since it's declared after it and carries its own background. */
  tbody tr:nth-child(even) td{background:var(--surface-2);}
  td.num,th.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;}
  /* Leading rank column — a plain serial number ahead of the player, not
     bundled into their name. */
  th.rank-cell,td.rank-cell{
    font-family:var(--font-mono);font-variant-numeric:tabular-nums;
    color:var(--text-muted);text-align:left;width:1%;white-space:nowrap;
    padding-right:6px;
  }
  tr.rank-1 td.rank-cell{color:var(--gold);font-weight:700;}
  tr.rank-1 td{background:var(--gold-soft);}
  tr.rank-1 td:first-child{box-shadow:inset 3px 0 0 0 var(--gold);}
  td:first-child, th:first-child{padding-left:18px;}
  .club-cell{display:flex;align-items:center;gap:12px;}
  .club-cell .club-text{display:flex;flex-direction:column;line-height:1.3;}
  .club-cell .club{font-weight:700;font-size:16.5px;transition:color .12s ease;}
  .club-cell .who{font-size:12px;color:var(--text-muted);font-weight:500;}
  tbody tr[data-action="goto-team"]{cursor:pointer;}
  tbody tr[data-action="goto-team"]:hover td{background:var(--surface-3);}
  tbody tr.rank-1[data-action="goto-team"]:hover td{background:color-mix(in srgb, var(--gold) 24%, transparent);}
  tbody tr[data-action="goto-team"]:hover .club-cell .club{color:var(--accent);}
  /* Players / current league */
  .league-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
  .league-head .meta{color:var(--text-muted);font-size:14px;}
  .btn{
    font-size:14.5px;font-weight:700;border-radius:10px;border:1px solid var(--border);
    background:var(--surface);color:var(--text);padding:10px 16px;cursor:pointer;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    transition:border-color .15s ease,box-shadow .15s ease,transform .1s ease,filter .15s ease;
  }
  .btn:hover{border-color:var(--accent);box-shadow:var(--shadow-ambient);}
  .btn:active{transform:translateY(1px);}
  .btn:focus-visible, input:focus-visible, summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  .btn.primary{
    background:var(--accent-gradient);border-color:transparent;color:var(--accent-contrast);
    box-shadow:var(--shadow-glow-accent), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .btn.primary:hover{filter:brightness(1.08);box-shadow:var(--shadow-glow-accent), var(--shadow-lift);}
  .btn.small{padding:5px 10px;font-size:12.5px;}
  .btn.success{
    background:linear-gradient(135deg, var(--win) 0%, color-mix(in srgb, var(--win) 70%, var(--accent-2)) 100%);
    border-color:transparent;color:var(--accent-contrast);
    display:inline-flex;align-items:center;gap:8px;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--win) 40%, transparent), 0 8px 22px color-mix(in srgb, var(--win) 28%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .btn.success:hover{filter:brightness(1.08);}
  .btn.success svg{width:16px;height:16px;flex:none;}
  .confirm-box{
    background:var(--danger-soft);border:1px solid var(--danger);border-radius:10px;
    padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-size:13.5px;
  }
  .players-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
  .player-slot{
    border:1px solid var(--glass-hairline);border-radius:12px;padding:10px 12px;background:var(--surface);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    display:flex;flex-direction:column;gap:8px;flex:1 1 150px;position:relative;
  }
  .remove-slot{
    position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
    border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);
    font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
    transition:color .12s ease,border-color .12s ease;
  }
  .remove-slot:hover{color:var(--danger);border-color:var(--danger);}
  .player-field{display:flex;flex-direction:column;gap:4px;}
  .player-field label{font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}
  .player-field input[type="text"],.player-field input[type="date"]{
    font-family:var(--font-body);font-weight:700;font-size:15.5px;
    padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  }
  .player-field input[type="number"]{
    font-family:var(--font-mono);font-weight:700;font-size:15.5px;width:100%;
    padding:9px 32px 9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  }
  .player-field input[type="date"]{color-scheme:light;}
  :root[data-theme="dark"] .player-field input[type="date"]{color-scheme:dark;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .player-field input[type="date"]{color-scheme:dark;}
  }
  .player-slot .readonly-name{font-weight:700;font-size:15.5px;}
  .readonly-club-row{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
  .player-slot .readonly-club{color:var(--text-muted);font-size:13px;}
  .club-input-row{display:flex;align-items:center;gap:8px;}
  .club-input-row input{flex:1;min-width:0;}
  .badge-preview{flex:none;display:flex;}
  /* Squad list — one full-width row per player (Squad & Clubs tab) */
  .squad-list{display:flex;flex-direction:column;margin-bottom:16px;}
  .squad-row{
    position:relative;display:flex;align-items:flex-start;gap:16px;
    padding:18px 4px;border-top:1px solid var(--border);
  }
  .squad-row:last-child{border-bottom:1px solid var(--border);}
  .avatar-btn{
    flex:none;width:64px;height:64px;border-radius:50%;
    border:2px solid var(--border);background:var(--surface-2);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;cursor:pointer;padding:0;color:var(--text-muted);
    transition:border-color .12s ease,color .12s ease,box-shadow .12s ease;
  }
  .avatar-btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-glow-accent);}
  .avatar-btn:disabled{cursor:default;}
  .avatar-btn:disabled:hover{border-color:var(--border);color:var(--text-muted);box-shadow:none;}
  .avatar-img{width:100%;height:100%;object-fit:cover;display:block;}
  .avatar-placeholder{display:flex;}
  .avatar-placeholder svg{width:28px;height:28px;display:block;}
  .visually-hidden-file{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .squad-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding-top:4px;}
  .squad-line-1,.squad-line-2{display:flex;gap:14px;flex-wrap:wrap;}
  .squad-line-1 .player-field,.squad-line-2 .player-field{flex:1 1 200px;min-width:160px;}
  .squad-row .readonly-name{font-weight:700;font-size:16.5px;}
  .squad-row .readonly-club{color:var(--text-muted);font-size:13px;}
  .squad-row .readonly-meta{color:var(--text-muted);font-size:13px;margin-top:2px;}
  /* Squad & Clubs tab for the current, already-started league: a big
     photo tile on the left with a little breathing room top and bottom,
     name and (locked) club on one line beside it. Scoped to
     .squad-row-live so the roster checklist and first-time setup rows
     keep their smaller circular avatar + editable club field untouched. */
  .squad-row.squad-row-live{align-items:stretch;padding:14px 4px;min-height:112px;}
  .squad-row-live .avatar-btn{
    flex:0 0 24%;max-width:130px;min-width:76px;align-self:stretch;
    width:auto;height:auto;border-radius:12px;
  }
  .squad-row-live .avatar-placeholder svg{width:34%;height:34%;max-width:44px;max-height:44px;}
  .squad-row-live .squad-fields{padding:0 4px 0 0;justify-content:center;}
  .squad-identity-row{display:flex;align-items:center;gap:12px;row-gap:4px;flex-wrap:wrap;}
  .squad-identity-row .readonly-name{font-size:18px;}
  .squad-identity-row .readonly-club-row{display:flex;align-items:center;gap:6px;}
  .squad-identity-row .readonly-club{font-size:14px;}
  /* Roster checklist (season setup) + inline rename */
  .checklist-name-row{display:flex;align-items:center;gap:8px;margin-bottom:2px;flex-wrap:wrap;}
  .rename-btn{
    flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);
    background:var(--surface-2);color:var(--text-muted);cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;transition:color .12s ease,border-color .12s ease;
  }
  .rename-btn:hover{color:var(--accent);border-color:var(--accent);}
  .rename-btn svg{width:13px;height:13px;display:block;}
  .roster-rename-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .roster-rename-row input[type="text"]{
    font-family:var(--font-body);font-weight:700;font-size:15.5px;
    padding:7px 9px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  }
  .add-player-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
  .add-player-row input[type="text"]{
    font-family:var(--font-body);font-weight:700;font-size:15.5px;flex:1 1 200px;min-width:160px;
    padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  }
  .squad-row.checklist-row{align-items:flex-start;}
  .squad-row.checklist-row .squad-fields{transition:opacity .12s ease;}
  .squad-row.unchecked .squad-fields{opacity:0.5;}
  .toggle-switch{position:relative;display:inline-flex;align-items:center;flex:none;width:42px;height:24px;cursor:pointer;margin-top:2px;}
  .toggle-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
  .toggle-slider{
    position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);
    border-radius:999px;transition:background .12s ease,border-color .12s ease;
  }
  .toggle-slider::before{
    content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
    background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,0.3);transition:transform .12s ease;
  }
  .toggle-switch input:checked + .toggle-slider{background:var(--accent-gradient);border-color:transparent;}
  .toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px);background:var(--accent-contrast);}
  .toggle-switch input:disabled + .toggle-slider{opacity:0.5;cursor:default;}
  .toggle-switch input:focus-visible + .toggle-slider{outline:2px solid var(--focus);outline-offset:2px;}
  /* Fixtures */
  .matchday{margin-bottom:20px;}
  .matchday h3{
    font-family:var(--font-display);
    font-size:14px;text-transform:uppercase;letter-spacing:0.09em;color:var(--text-muted);
    margin:0 0 8px;font-weight:400;
  }
  .fixture-row{
    display:grid;grid-template-columns:1fr 52px 16px 52px 1fr;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--border);background:transparent;
  }
  .fixture-row.reorderable{grid-template-columns:26px 1fr 52px 16px 52px 1fr;}
  .matchday .fixture-row:last-child{border-bottom:none;}
  .fixture-row.dragging{
    box-shadow:var(--shadow-lift);border-radius:10px;background:var(--surface);
    border-bottom-color:transparent;
  }
  .fixture-row-placeholder{
    border:2px dashed var(--border);border-radius:10px;box-sizing:border-box;margin:4px 0;
  }
  .fixture-reorder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
  .reorder-btn{
    width:22px;height:17px;padding:0;border:none;background:transparent;color:var(--text-muted);
    cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;
  }
  .reorder-btn svg{width:11px;height:11px;display:block;}
  .reorder-btn:hover{color:var(--accent);background:var(--surface-2);}
  .reorder-btn:disabled{opacity:0.25;cursor:default;}
  .reorder-btn:disabled:hover{color:var(--text-muted);background:transparent;}
  .fixture-drag-handle{
    width:22px;height:20px;padding:0;border:none;background:transparent;color:var(--text-muted);
    cursor:grab;display:flex;align-items:center;justify-content:center;border-radius:4px;
    touch-action:none;-webkit-user-select:none;user-select:none;
  }
  .fixture-drag-handle svg{width:14px;height:14px;display:block;}
  .fixture-drag-handle:hover{color:var(--accent);background:var(--surface-2);}
  .fixture-row .home,.fixture-row .away{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;line-height:1.25;}
  .fixture-row .home{justify-content:flex-end;}
  .fixture-row .away{justify-content:flex-start;}
  .fixture-row .home .club-text,.fixture-row .away .club-text{display:flex;flex-direction:column;}
  .fixture-row .home .club-text{align-items:flex-end;text-align:right;}
  .fixture-row .away .club-text{align-items:flex-start;text-align:left;}
  .fixture-row .who{font-size:11.5px;color:var(--text-muted);font-weight:500;display:none;}
  .fixture-row .sep{text-align:center;color:var(--text-muted);font-weight:700;}
  /* Custom number-input steppers — replaces every native OS spin button in
     the app with two real buttons, since the native widget can't be given
     a transparent/gray look or a gap between its up and down halves in
     every browser. Reuses the chevron icons already used for fixture
     reordering. enhanceNumberSteppers() in app.js wraps each
     input[type="number"] in a .num-stepper span and appends these
     buttons; contexts with tight fixed widths (fixture rows, stat grids)
     override the sizing below to fit their column. */
  .num-stepper{position:relative;display:inline-flex;vertical-align:middle;max-width:100%;}
  .num-stepper input[type="number"]{-moz-appearance:textfield;}
  .num-stepper input[type="number"]::-webkit-inner-spin-button,
  .num-stepper input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
  .num-stepper-btns{
    position:absolute;top:3px;bottom:3px;right:3px;width:20px;
    display:flex;flex-direction:column;justify-content:center;gap:3px;
  }
  .num-step{
    flex:1;display:flex;align-items:center;justify-content:center;min-height:0;
    background:none;border:none;padding:0;margin:0;cursor:pointer;
    color:var(--text-muted);border-radius:4px;
    transition:background .12s ease,color .12s ease;
  }
  .num-step:hover{background:var(--surface-3);color:var(--accent);}
  .num-step:active{background:var(--border);}
  .num-step svg{width:12px;height:12px;display:block;pointer-events:none;}
  .fixture-row input[type="number"]{
    width:52px;text-align:right;font-family:var(--font-mono);font-size:19px;font-weight:700;
    padding:7px 19px 7px 4px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  }
  .fixture-row .num-stepper-btns{width:16px;right:2px;top:2px;bottom:2px;gap:2px;}
  .fixture-row .num-step svg{width:9px;height:9px;}
  .fixture-row.has-report{cursor:pointer;transition:background .12s ease;border-radius:8px;}
  .fixture-row.has-report:hover{background:var(--surface-2);}
  .fixture-report{
    grid-column:1/-1;
    display:grid;grid-template-rows:0fr;opacity:0;
    margin-top:0;padding-top:0;border-top:1px solid transparent;
    transition:grid-template-rows .3s cubic-bezier(.22,.8,.22,1),opacity .22s ease,margin-top .3s ease,padding-top .3s ease,border-color .3s ease;
  }
  .fixture-report.is-open{
    grid-template-rows:1fr;opacity:1;
    margin-top:8px;padding-top:10px;border-top:1px dashed var(--border);
  }
  .fixture-report > .fixture-report-inner{min-height:0;overflow:hidden;}
  .fixture-report-inner .fixture-row{background:transparent;border-bottom:none;padding:0 0 4px;}
  /* Setup form */
  .setup-card{
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:14px;padding:24px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--shadow-ambient);
  }
  .setup-card p{color:var(--text-muted);font-size:14px;margin-top:0;}
  /* History */
  /* ---------- Season Story ---------- */
  .season-story{
    margin:22px 0 4px;padding:20px 20px 18px;
    border:1px solid color-mix(in srgb, var(--accent) 20%, var(--glass-hairline));
    border-radius:18px;
    background:
      radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
      var(--surface);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  }
  .season-story-head{margin-bottom:16px;}
  .season-story-eyebrow{
    display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.24em;
    text-transform:uppercase;color:var(--accent);margin-bottom:6px;
  }
  .season-story-title{
    margin:0;font-family:var(--font-display);font-size:24px;letter-spacing:0.06em;
    text-transform:uppercase;line-height:1.05;color:var(--text);
  }
  .season-story-sub{margin:4px 0 0;font-size:12.5px;color:var(--text-muted);font-style:italic;}
  .season-story-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
    border:1px solid var(--glass-hairline);border-radius:12px;overflow:hidden;}
  .story-beat{
    display:flex;gap:13px;align-items:flex-start;padding:13px 15px;
    background:color-mix(in srgb, var(--surface-2) 70%, transparent);
  }
  .story-beat.is-title{background:color-mix(in srgb, var(--gold) 12%, var(--surface-2));}
  .story-beat.is-tight{background:color-mix(in srgb, var(--accent) 11%, var(--surface-2));}
  .story-beat.is-fall{background:color-mix(in srgb, #c0392b 12%, var(--surface-2));}
  .story-beat-icon{flex:none;width:20px;height:20px;margin-top:1px;color:var(--text-muted);}
  .story-beat.is-title .story-beat-icon{color:var(--gold);}
  .story-beat.is-tight .story-beat-icon{color:var(--accent);}
  .story-beat.is-fall .story-beat-icon{color:#d5674f;}
  .story-beat-icon svg{width:100%;height:100%;display:block;}
  .story-beat-text{font-size:13.5px;line-height:1.5;color:var(--text);}
  .story-beat.is-title .story-beat-text{font-weight:600;}
  .season-notes-head{
    margin:18px 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.22em;
    text-transform:uppercase;color:var(--text-muted);
  }
  .season-story-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
    border:1px solid var(--glass-hairline);border-radius:12px;overflow:hidden;}
  .club-note{
    display:flex;gap:11px;align-items:flex-start;padding:11px 14px;
    background:color-mix(in srgb, var(--surface-2) 55%, transparent);
  }
  .club-note .club-badge{flex:none;margin-top:1px;}
  .club-note-text{font-size:13px;line-height:1.5;color:var(--text);}
  .spc-wrap{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .season-pos-chart{display:block;width:100%;min-width:440px;height:auto;}
  .season-pos-chart .spc-grid{stroke:var(--glass-hairline);stroke-width:1;}
  .season-pos-chart .spc-axis{fill:var(--text-muted);font-family:var(--font-mono);font-size:9px;}
  .season-pos-chart .spc-axis.is-future{opacity:0.4;}
  .season-pos-chart .spc-future{fill:color-mix(in srgb, var(--text-muted) 8%, transparent);}
  .season-pos-chart .spc-cap{fill:var(--text-muted);font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.18em;}
  .season-pos-chart .spc-name{fill:var(--text-muted);font-family:var(--font-display);font-size:11px;letter-spacing:0.04em;}
  .season-pos-chart .spc-name.is-champ{fill:var(--gold);}
  @media (max-width:600px){
    .season-story{padding:16px 14px;}
    .season-story-title{font-size:20px;}
    .story-beat-text{font-size:12.5px;}
  }

  /* ---------- Season Story aggregates: Stats tab ---------- */
  .story-sample-note{margin:2px 0 12px;font-size:12px;font-style:italic;color:var(--text-muted);}
  .story-records{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;
    border:1px solid var(--glass-hairline);border-radius:12px;overflow:hidden;
    background:var(--glass-hairline);
  }
  .story-record{
    display:flex;flex-direction:column;gap:3px;padding:12px 14px;
    background:color-mix(in srgb, var(--surface-2) 65%, var(--surface));
  }
  .story-record-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);}
  .story-record-val{font-family:var(--font-display);font-size:17px;letter-spacing:0.04em;color:var(--text);}
  .story-record-ctx{font-size:12px;color:var(--text-muted);}

  /* ---------- Season Story aggregates: Teams tab ---------- */
  .club-journeys{
    margin:2px 0 10px;padding:16px 18px;
    border:1px solid var(--glass-hairline);border-radius:16px;
    background:color-mix(in srgb, var(--surface-2) 45%, var(--surface));
  }
  .club-journeys .cabinet-head{margin-bottom:14px;}
  .journey-charts{display:flex;flex-direction:column;gap:2px;}
  .journey-row{
    display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:8px;
  }
  .journey-row:hover{background:color-mix(in srgb, var(--surface-3) 55%, transparent);}
  .journey-season{
    flex:none;width:34px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  }
  .mini-spark{flex:1;min-width:0;height:34px;display:block;}
  .mini-spark-top{stroke:var(--gold-soft);stroke-width:1;stroke-dasharray:2 3;}
  .journey-finish{
    flex:none;min-width:56px;text-align:right;font-family:var(--font-display);
    font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);
  }
  .journey-finish.is-win{color:var(--gold);}
  .journey-facts{
    margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;
    border:1px solid var(--glass-hairline);border-radius:10px;overflow:hidden;background:var(--glass-hairline);
  }
  .journey-fact{
    display:flex;flex-direction:column;gap:2px;padding:9px 12px;
    background:color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  }
  .journey-fact-k{font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);}
  .journey-fact-v{font-size:12.5px;color:var(--text);line-height:1.4;}
  .journey-notes{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
    border:1px solid var(--glass-hairline);border-radius:10px;overflow:hidden;}
  .journey-note{
    display:flex;gap:10px;align-items:flex-start;padding:10px 13px;
    background:color-mix(in srgb, var(--surface-2) 55%, transparent);
  }
  .journey-note.is-title{background:color-mix(in srgb, var(--gold) 11%, var(--surface-2));}
  .journey-note-season{flex:none;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:2px;width:26px;}
  .journey-note-text{font-size:12.5px;line-height:1.5;color:var(--text);}
  @media (max-width:600px){
    .club-journeys{padding:13px 12px;}
    .journey-season{width:26px;}
    .journey-finish{min-width:46px;font-size:11px;}
  }

  /* ---------- Match Story (per-fixture report) ---------- */
  .match-story{
    margin:14px 0 4px;padding:14px 15px;
    border:1px solid color-mix(in srgb, var(--accent) 18%, var(--glass-hairline));
    border-radius:12px;
    background:color-mix(in srgb, var(--surface-2) 55%, var(--surface));
  }
  .match-story-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
  .match-story-eyebrow{
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);
  }
  .match-char{
    font-family:var(--font-display);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--gold);border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-radius:999px;padding:2px 10px;line-height:1.4;
  }
  .match-beats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
    border:1px solid var(--glass-hairline);border-radius:9px;overflow:hidden;}
  .match-beat{
    display:flex;gap:10px;align-items:flex-start;padding:9px 12px;
    background:color-mix(in srgb, var(--surface-2) 70%, transparent);
  }
  .match-beat.is-tight{background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));}
  .match-beat.is-fall{background:color-mix(in srgb, #c0392b 11%, var(--surface-2));}
  .match-beat-icon{flex:none;width:17px;height:17px;margin-top:1px;color:var(--text-muted);}
  .match-beat.is-tight .match-beat-icon{color:var(--accent);}
  .match-beat.is-fall .match-beat-icon{color:#d5674f;}
  .match-beat-icon svg{width:100%;height:100%;display:block;}
  .match-beat-text{font-size:12.5px;line-height:1.5;color:var(--text);}
  .match-story-hint{margin:9px 0 0;font-size:11px;font-style:italic;color:var(--text-muted);}

  /* ---------- Rivalry Character (Head-to-Head) ---------- */
  .rivalry-character{
    margin:14px 0 0;padding:16px 18px;
    border:1px solid color-mix(in srgb, var(--accent) 20%, var(--glass-hairline));
    border-radius:16px;
    background:
      radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
      color-mix(in srgb, var(--surface-2) 45%, var(--surface));
  }
  .rivalry-character-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
  .rivalry-character-eyebrow{
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);
  }
  .rivalry-character-verdict{
    font-family:var(--font-display);font-size:16px;letter-spacing:0.05em;text-transform:uppercase;color:var(--gold);
  }
  .riv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
    border:1px solid var(--glass-hairline);border-radius:10px;overflow:hidden;}
  .riv-item{
    display:grid;grid-template-columns:auto auto;grid-template-areas:"tag count" "text text";
    gap:4px 10px;align-items:center;padding:11px 13px;
    background:color-mix(in srgb, var(--surface-2) 65%, transparent);
  }
  .riv-item-tag{
    grid-area:tag;justify-self:start;
    font-family:var(--font-display);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);
    border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);border-radius:999px;padding:2px 10px;line-height:1.4;
  }
  .riv-item-count{grid-area:count;justify-self:end;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);}
  .riv-item-text{grid-area:text;font-size:12.5px;line-height:1.5;color:var(--text);}
  .riv-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);font-style:italic;}

  details.history-item{
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:14px;margin-bottom:10px;overflow:hidden;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  }
  details.history-item summary{
    cursor:pointer;padding:35px 16px;font-weight:700;font-size:15px;list-style:none;
    display:flex;justify-content:space-between;gap:10px;align-items:center;
  }
  details.history-item summary::-webkit-details-marker{display:none;}
  details.history-item summary .arrow{color:var(--text-muted);transition:transform .22s ease;}
  details.history-item[open] summary .arrow{transform:rotate(90deg);color:var(--accent);}
  details.history-item .history-body{padding:0 16px 16px;}
  .history-date-row{margin-bottom:12px;}
  /* Condensed fixture list inside a Season History item — same fixture-row
     component the live Season tab uses, just tightened up (smaller crests,
     less padding) since this is a quick past-season recap, not something
     you're meant to edit or reorder. */
  .history-fixtures .matchday{margin-bottom:10px;}
  .history-fixtures .matchday:last-child{margin-bottom:0;}
  .history-fixtures .matchday h3{font-size:11.5px;margin-bottom:2px;}
  .history-fixtures .fixture-row{padding:5px 0;gap:8px;}
  .history-fixtures .club-badge{width:19px;height:19px;}
  .history-fixtures .home .who,.history-fixtures .away .who{display:none;}
  .badge{
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;
    padding:6px 13px;border-radius:100px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
  }
  .badge.win{background:var(--win-soft);color:var(--win);}
  .badge.pending{background:var(--info-soft);color:var(--info);}
  .badge.ended{background:var(--danger-soft);color:var(--danger);}
  .closed-early-tag{font-size:12px;color:var(--text-muted);font-style:italic;}
  .inline-date-edit{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-size:13px;}
  .inline-date-edit input[type="date"]{
    font-family:var(--font-body);font-weight:600;font-size:13px;
    padding:4px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
    color-scheme:light;
  }
  :root[data-theme="dark"] .inline-date-edit input[type="date"]{color-scheme:dark;}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .inline-date-edit input[type="date"]{color-scheme:dark;}
  }
  .fixture-row.not-played{opacity:0.6;}
  .fixture-row .not-played-note{
    grid-column:2 / 5;text-align:center;font-size:12px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.05em;font-weight:600;
  }
  /* Matchday tab */
  @keyframes heroGlowPulse{
    0%,100%{box-shadow:0 0 0 1px var(--accent-soft), 0 0 40px 0 var(--accent-soft);}
    50%{box-shadow:0 0 0 1px var(--accent-soft), 0 0 64px 6px var(--accent-soft);}
  }
  @keyframes tabEnter{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:none;}
  }
  #tab-panel.tab-leave{
    opacity:0;transform:translateY(8px);
    transition:opacity .16s ease,transform .16s ease;
    pointer-events:none;
  }
  #tab-panel.tab-enter{animation:tabEnter .36s cubic-bezier(.22,.8,.22,1) both;}
  .reveal-on-scroll{
    opacity:0;transform:translateY(14px);
    transition:opacity .42s cubic-bezier(.22,.8,.22,1),transform .42s cubic-bezier(.22,.8,.22,1);
    transition-delay:var(--reveal-delay,0ms);
  }
  .reveal-on-scroll.is-in{opacity:1;transform:none;}
  .stat-card.reveal-on-scroll.is-in:hover,
  .trophy-card.reveal-on-scroll.is-in:hover{transform:translateY(-2px);}
  @supports (interpolate-size: allow-keywords){
    html{interpolate-size:allow-keywords;}
    details.team-card::details-content,
    details.history-item::details-content,
    details.md-row::details-content{
      overflow:clip;
      transition:block-size .34s cubic-bezier(.22,.8,.22,1),content-visibility .34s allow-discrete;
    }
    details.team-card:not([open])::details-content,
    details.history-item:not([open])::details-content,
    details.md-row:not([open])::details-content{block-size:0;}
  }
  .md-hero{
    position:relative;overflow:hidden;
    /* Front to back: the existing accent glow at the top, a scrim that keeps
       the score/stat fields legible (heavier toward the bottom where they're
       densest), then the stadium artwork filling the card. */
    background-image:
      radial-gradient(ellipse at top,color-mix(in srgb, var(--accent) 26%, transparent) 0%,transparent 70%),
      linear-gradient(180deg, color-mix(in srgb, #05070d 48%, transparent) 0%, color-mix(in srgb, #05070d 82%, transparent) 100%),
      url("assets/matchday-bg.jpg");
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-position:top,center,center;
    background-size:100% 300px,cover,cover;
    background-color:var(--surface);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--accent);border-radius:18px;
    padding:30px;margin-bottom:22px;
    animation:heroGlowPulse 3.5s ease-in-out infinite;
  }
  .md-hero-eyebrow{
    font-family:var(--font-display);font-size:18px;text-transform:uppercase;letter-spacing:0.09em;
    color:var(--accent);
    margin-bottom:14px;font-weight:400;
  }
  .md-live-match{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;
    margin-bottom:22px;text-align:center;
  }
  .md-live-side{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-width:0;}
  .md-live-crest{width:170px;height:190px;flex:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,0.4));}
  .md-live-crest svg{width:100%;height:100%;display:block;}
  .md-live-club{
    font-family:var(--font-display);font-size:clamp(15px,3.8vw,20px);font-weight:400;
    letter-spacing:0.01em;line-height:1.15;max-width:100%;
  }
  .md-live-player{font-size:12.5px;color:var(--text-muted);font-weight:500;}
  .md-live-score{display:flex;align-items:center;gap:12px;flex:none;}
  .md-score-input{
    width:100px;height:100px;text-align:center;font-family:var(--font-mono);font-size:clamp(30px,7.5vw,38px);
    font-weight:800;border-radius:16px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
    padding:0 24px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  }
  .md-live-score .num-stepper-btns{width:20px;right:5px;top:8px;bottom:8px;gap:6px;}
  .md-live-score .num-step svg{width:13px;height:13px;}
  .md-score-val{
    display:inline-block;min-width:48px;font-family:var(--font-mono);font-size:clamp(28px,8vw,38px);
    font-weight:800;
  }
  .md-score-sep{font-size:clamp(26px,6vw,32px);font-weight:800;color:var(--text-muted);}
  .md-hero-stats-title{
    font-family:var(--font-display);font-size:14px;text-transform:uppercase;letter-spacing:0.09em;
    color:var(--text-muted);margin:4px 0 10px;font-weight:400;
  }
  .md-hero-commit-row{
    display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
    margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  }
  .md-commit-warning{color:var(--danger);font-size:13px;font-weight:600;text-align:right;}
  @media (max-width:520px){
    .md-hero{padding: 20px;}
    .md-hero-commit-row{justify-content:stretch;}
    .md-hero-commit-row .btn.success{width:100%;justify-content:center;}
    .md-hero-eyebrow{text-align: center;}
  }
  .md-stats-grid{display:flex;flex-direction:column;gap:2px;}
  .md-stat-row{
    display:grid;grid-template-columns:70px 1fr 70px;align-items:center;gap:10px;
    padding:8px 0;border-bottom:1px solid var(--border);
  }
  .md-stat-row:last-child{border-bottom:none;}
  .md-stat-label{
    text-align:center;font-family:var(--font-display);font-size:18px;letter-spacing:0.03em;
    color:var(--text-muted);font-weight:400;
  }
  .md-stat-val{text-align:center;font-family:var(--font-mono);font-weight:600;}
  .md-stat-input{
    width:70px;text-align:right;font-family:var(--font-mono);font-size:15px;font-weight:600;
    padding:6px 20px 6px 4px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  }
  .md-stat-row .num-stepper-btns{width:16px;right:2px;top:2px;bottom:2px;gap:2px;}
  .md-stat-row .num-step svg{width:9px;height:9px;}
  .md-row{
    background:var(--surface);border:1px solid var(--glass-hairline);border-radius:20px;margin-bottom:8px;overflow:hidden;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  }
  .md-row-summary{
    cursor:pointer;padding:10px 14px;list-style:none;position:relative;
  }
  .md-row-summary .fixture-row{padding:0;border-bottom:none;background:transparent;}
  details.md-row summary::-webkit-details-marker{display:none;}
  .md-row-body{padding:2px 14px 16px;}
  /* Goal times — one minute field per goal in the scoreline, home / away */
  .md-live-goals{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:0.02em;}
  .md-goals-none{font-size:13px;color:var(--text-muted);}
  .md-goals-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
  .md-goal-col{display:flex;flex-direction:column;gap:6px;min-width:0;}
  .md-goal-col-head{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:13px;letter-spacing:0.03em;color:var(--text-muted);}
  .md-goal-ball{width:15px;height:15px;flex:none;color:var(--text-muted);}
  .md-goal-dash{color:var(--text-muted);font-family:var(--font-mono);font-weight:600;padding:4px 2px;}
  .md-goal-row{display:flex;align-items:center;gap:8px;}
  .md-goal-num{flex:none;width:14px;text-align:center;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-muted);}
  .md-goal-row .num-stepper{flex:1;min-width:0;}
  .md-goal-row .num-stepper-btns{width:16px;right:2px;top:2px;bottom:2px;gap:2px;}
  .md-goal-row .num-step svg{width:9px;height:9px;}
  .md-goal-min{width:100%;min-width:0;font-family:var(--font-mono);font-size:14px;font-weight:600;text-align:left;padding:6px 20px 6px 8px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);}
  .md-goal-min:focus{outline:none;border-color:var(--accent);}
  .md-goal-timeline{display:flex;flex-direction:column;gap:5px;margin-bottom:4px;}
  .md-goal-line{display:flex;align-items:center;gap:8px;font-size:13px;}
  .md-goal-line-ball{width:16px;height:16px;flex:none;color:var(--text-muted);}
  .md-goal-line-min{font-family:var(--font-mono);font-weight:700;color:var(--accent);min-width:34px;}
  .md-goal-line.is-away{flex-direction:row-reverse;text-align:right;}
  @media (max-width: 520px){
    .md-stat-row{grid-template-columns:56px 1fr 56px;gap:6px;}
    .md-stat-input{width:56px;font-size:14px;padding:5px 17px 5px 3px;}
    .md-stat-row .num-stepper-btns{width:13px;right:1px;top:1px;bottom:1px;}
    .md-stat-row .num-step svg{width:7px;height:7px;}
    .md-live-match{gap:10px;}
    .md-live-crest{width:100%;height:100%;}
    .md-score-input{width:56px;height:76px;padding:0 16px;font-size:26px;}
    .md-live-score .num-stepper-btns{width:14px;right:3px;top:5px;bottom:5px;gap:3px;}
    .md-live-score .num-step svg{width:8px;height:8px;}
    .md-goals-grid{gap:8px;}
  }
  /* Banners */
  .banner{border-radius:12px;padding:11px 14px;font-size:13.5px;margin-bottom:20px;}
  .banner.info{background:var(--info-soft);color:var(--info);border:1px solid var(--info);}
  .banner.readonly{display:none;background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);}
  footer.notes{color:#565A63;font-size:12.5px;border-top:0px solid var(--border);padding-top:16px;}
  .backup-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;padding-top:16px;}
  .backup-status{font-size:12.5px;color:var(--text-muted);}
  .backup-hint{margin:0;}
  .backup-panel{
    margin-top:12px;background:var(--surface);border:1px solid var(--glass-hairline);border-radius:14px;padding:14px;
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    box-shadow:var(--shadow-ambient);
  }
  .backup-panel textarea{
    width:100%;min-height:160px;font-family:var(--font-mono);font-size:12px;line-height:1.5;
    padding:10px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);
    resize:vertical;box-sizing:border-box;
  }
  .restore-error{color:var(--danger);font-size:13px;font-weight:600;margin:10px 0 0;}
  /* Save bar */
  #savebar{
    position:fixed;left:0;right:0;bottom:0;
    /* Above .wrap (z-index:1) and every in-page stacking context — without
       this the fixed bar paints behind page content and is unclickable
       except past the end of the page. */
    z-index:1000;
    display:flex;justify-content:center;
    transform:translateY(120%);transition:transform .25s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }
  #savebar.show{transform:translateY(0);}
  #savebar .inner{
    pointer-events:auto;
    margin:0 16px 16px;max-width:976px;width:100%;
    background:var(--surface);color:var(--text);
    border:1px solid var(--glass-hairline);
    -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
    border-radius:16px;padding:12px 16px;
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    box-shadow:var(--shadow-lift);
  }
  :root[data-theme="dark"] #savebar .inner, .savebar-dark{background:var(--surface);color:var(--text);border:1px solid var(--glass-hairline);}
  #savebar .msg{font-size:13.5px;}
  #savebar .msg .err{color:var(--danger);display:block;font-size:12.5px;margin-top:2px;}
  #savebar .actions{display:flex;gap:8px;}
  #savebar .btn.primary{border-color:transparent;}
  #savebar .inner.saved{background:var(--accent-gradient);color:var(--accent-contrast);border-color:transparent;transition:background .2s ease;}
  @media (prefers-reduced-motion: reduce){
    #savebar{transition:none;}
    details.history-item summary .arrow{transition:none;}
    .home-menu-panel{transition-duration:0s;}
    .home-menu-toggle-chevron{transition:none;}
    .md-hero{animation:none;}
    #tab-panel.tab-enter,#tab-panel.tab-leave{animation:none;opacity:1;transform:none;transition:none;}
    .reveal-on-scroll,.reveal-on-scroll.is-in{opacity:1;transform:none;transition:none;}
    .team-fixture-filter-panel,.edit-lock-panel-inner{animation:none;}
    .fixture-report,.fixture-report.is-open{transition:none;}
    .career-record-viewport.is-sliding,.career-record-pane.is-sliding{transition:none;}
  }
  @media (max-width:520px){
    .fixture-row{grid-template-columns:1fr 42px 12px 42px 1fr;gap:6px;}
    .fixture-row.reorderable{grid-template-columns:22px 1fr 42px 12px 42px 1fr;}
    .fixture-row .home,.fixture-row .away{font-size:14px;gap:5px;}
    .fixture-row input[type="number"]{width:42px;font-size:16px;padding:6px 15px 6px 3px;}
    .fixture-row .num-stepper-btns{width:13px;right:1px;top:1px;bottom:1px;gap:1px;}
    .fixture-row .num-step svg{width:7px;height:7px;}
    .fixture-row .club-badge{width:20px;height:20px;}
  }
  /* Mobile paint cost: frosted glass + a fixed, tiled background make
     scrolling hitch on phones. Desktop keeps the broadcast look; phones
     get opaque surfaces, no backdrop blur, and a scrolling (not fixed)
     glow with the 3px dot grid dropped. The full-bleed artwork (body::after)
     stays — it's a position:fixed layer, cheap enough, and worth keeping. */
  @media (max-width: 768px){
    :root{
      --glass-blur:0px;
      --surface:#F4F6FB;
      --surface-2:#ECEFF6;
      --surface-3:#E4E8F2;
    }
    @media (prefers-color-scheme: dark){
      :root:not([data-theme="light"]){
        --surface:#12151C;
        --surface-2:#181C26;
        --surface-3:#1E2430;
      }
    }
    :root[data-theme="dark"]{
      --surface:#12151C;
      --surface-2:#181C26;
      --surface-3:#1E2430;
    }
    body{background-image:none;}
    .edit-lock-panel-inner,
    .tabbar,
    .view-toggle,
    .stat-card,
    .team-card,
    .team-fixture-filter-panel,
    .h2h-summary-card,
    .h2h-metric-row,
    .trophy-card,
    .table-scroll,
    .btn,
    .player-slot,
    .setup-card,
    details.history-item,
    .md-hero,
    .md-score-input,
    .md-row,
    .backup-panel,
    #savebar .inner{
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }
  }