:root{
    --bg:#0a0e0b;
    --panel:#121810;
    --panel-2:#171f16;
    --line:#26301f;
    --text:#f2efe4;
    --muted:#8d9686;
    --gold:#d4af37;
    --pitch:#0f7a4a;
    --red:#c1272d;

    --c-dhj:#c1272d;
    --c-dechira:#1b7a6e;
    --c-mekness:#d98e2a;
    --c-merrakch:#b5542c;
    --c-wac:#8e1b2e;
    --c-fus:#1f5fa8;
    --c-fes:#0f7a4a;

    --shadow-card:0 10px 24px -10px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.5);
    --shadow-card-hover:0 16px 34px -12px rgba(0,0,0,0.65), 0 4px 10px -3px rgba(0,0,0,0.55);
    --shadow-panel:0 18px 40px -18px rgba(0,0,0,0.65), 0 4px 12px -4px rgba(0,0,0,0.5);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Manrope', sans-serif;
    line-height:1.5;
    overflow-x:hidden;
    position:relative;
  }

  /* ambient eFootball pattern */
  .zellige-bg{
    position:fixed;
    inset:0;
    z-index:0;
    opacity:0.11;
    pointer-events:none;
    background-image:url('assets/efootball-pattern.webp');
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
  }

  .wrap{max-width:1080px; margin:0 auto; padding:0 24px; position:relative; z-index:1;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:110px 24px 90px;
    text-align:center;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .floodlight{
    position:absolute;
    top:-260px; left:50%; transform:translateX(-50%);
    width:900px; height:600px;
    background:radial-gradient(ellipse at center, rgba(212,175,55,0.20) 0%, rgba(15,122,74,0.10) 40%, transparent 72%);
    filter:blur(10px);
    opacity:0.9;
    z-index:0;
  }
  .eyebrow{
    position:relative; z-index:1;
    font-family:'Teko', sans-serif;
    font-size:18px;
    letter-spacing:0.42em;
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .hero-crest{
    position:relative; z-index:1;
    display:block;
    width:clamp(260px, 34vw, 420px);
    height:auto;
    margin:0 auto 4px;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,0.45));
  }
  .powered-by{
    position:relative; z-index:1;
    margin-top:14px;
    font-family:'Manrope', sans-serif;
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .powered-by b{color:var(--gold); font-weight:700;}
  .hero .sub{
    position:relative; z-index:1;
    max-width:520px;
    margin:22px auto 0;
    color:var(--muted);
    font-size:16px;
  }
  .hero .facts{
    position:relative; z-index:1;
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:34px;
  }
  .facts span{
    font-family:'Teko', sans-serif;
    font-size:15px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:8px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--text);
    background:rgba(255,255,255,0.02);
  }
  .facts span b{color:var(--gold); font-weight:600;}


  /* ---------- COUNTDOWN ---------- */
  .countdown-card{
    position:absolute;
    left:40px; top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:188px;
    padding:22px 18px 18px;
    border-radius:14px;
    text-align:center;
    background:linear-gradient(180deg, rgba(23,31,22,0.82), rgba(15,20,13,0.88));
    backdrop-filter:blur(8px);
    border:1px solid rgba(212,175,55,0.28);
    box-shadow:0 0 0 1px rgba(212,175,55,0.05), 0 24px 48px -24px rgba(0,0,0,0.7), 0 0 34px -14px rgba(212,175,55,0.35);
  }
  .countdown-card::before{
    content:'';
    position:absolute; top:0; left:14px; right:14px; height:2px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:0.6;
    animation:cdShimmer 3.5s ease-in-out infinite;
  }
  @keyframes cdShimmer{
    0%,100%{opacity:0.35;}
    50%{opacity:0.85;}
  }
  .countdown-label{
    font-family:'Teko', sans-serif;
    font-size:12px;
    letter-spacing:0.34em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:16px;
  }
  .countdown-grid{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
  }
  .countdown-unit{
    display:flex; flex-direction:column; align-items:center;
    width:38px;
  }
  .countdown-unit span{
    font-family:'Teko', sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1;
    color:var(--text);
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px 0;
    width:100%;
    display:block;
    font-variant-numeric:tabular-nums;
    transition:transform 0.15s ease, color 0.15s ease;
  }
  .countdown-unit span.tick{
    animation:cdTick 0.4s ease;
  }
  @keyframes cdTick{
    0%{transform:scale(1.18); color:var(--gold);}
    100%{transform:scale(1); color:var(--text);}
  }
  .countdown-unit small{
    margin-top:5px;
    font-size:9px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .countdown-sep{
    font-family:'Teko', sans-serif;
    font-size:24px;
    color:var(--gold);
    opacity:0.55;
    padding-top:5px;
  }
  .countdown-date{
    margin-top:14px;
    font-size:10px;
    color:var(--muted);
    letter-spacing:0.03em;
  }
  .countdown-edit{
    position:absolute;
    top:9px; right:9px;
    width:22px; height:22px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.05);
    color:var(--muted);
    font-size:11px;
    line-height:1;
    cursor:pointer;
    display:none;
    align-items:center; justify-content:center;
  }
  .countdown-edit:hover{color:var(--gold); border-color:var(--gold);}
  .countdown-card.is-admin .countdown-edit{display:flex;}
  .countdown-card.is-live .countdown-grid,
  .countdown-card.is-live .countdown-date{display:none;}
  .countdown-live{
    display:none;
    align-items:center; justify-content:center; gap:8px;
    font-family:'Teko', sans-serif;
    font-size:19px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--pitch);
    padding:12px 0 4px;
  }
  .countdown-card.is-live .countdown-live{display:flex;}
  .live-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--pitch);
    box-shadow:0 0 8px var(--pitch);
    animation:cdLiveDot 1.4s ease-in-out infinite;
    flex-shrink:0;
  }
  @keyframes cdLiveDot{
    0%,100%{opacity:1; transform:scale(1);}
    50%{opacity:0.35; transform:scale(0.65);}
  }
  .countdown-card.is-empty .countdown-grid,
  .countdown-card.is-empty .countdown-date{display:none;}
  .countdown-empty{
    display:none;
    flex-direction:column; align-items:center; gap:10px;
  }
  .countdown-card.is-empty .countdown-empty{display:flex;}
  .countdown-empty p{color:var(--muted); font-size:11px; line-height:1.4;}
  .countdown-set-btn{
    font-family:'Teko', sans-serif;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:7px 16px;
    border-radius:999px;
    border:1px solid var(--gold);
    background:transparent;
    color:var(--gold);
    cursor:pointer;
  }
  .countdown-set-btn:hover{background:var(--gold); color:#1a1a12;}
  .countdown-social{
    margin-top:16px;
    padding-top:13px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
  }
  .social-icon-btn{
    width:26px; height:26px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--line);
    color:var(--muted);
    flex-shrink:0;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .social-icon-btn svg{width:14px; height:14px; fill:currentColor;}
  .social-icon-btn:hover{
    background:#5865F2;
    border-color:#5865F2;
    color:#fff;
    transform:translateY(-2px);
  }
  @media (max-width:980px){
    .countdown-card{
      position:static;
      transform:none;
      width:min(260px, 82%);
      margin:0 auto 32px;
    }
  }

  /* ---------- HERO STANDINGS CARD ---------- */
  /* .hero-standings-card is now just a positioning/layout wrapper — the
     ticker banner and the standings table live in their own separate
     boxes (.hs-ticker / .hs-notice-empty and .hs-panel) stacked inside it. */
  .hero-standings-card{
    position:absolute;
    right:40px; top:50%;
    transform:translateY(-50%);
    z-index:2;
    width:400px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .hs-panel{
    max-height:420px;
    display:flex;
    flex-direction:column;
    border-radius:14px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(23,31,22,0.82), rgba(15,20,13,0.88));
    backdrop-filter:blur(8px);
    border:1px solid rgba(212,175,55,0.28);
    box-shadow:0 0 0 1px rgba(212,175,55,0.05), 0 24px 48px -24px rgba(0,0,0,0.7), 0 0 34px -14px rgba(212,175,55,0.35);
  }
  .hs-panel .hs-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px 10px;
    flex-shrink:0;
  }
  .hs-panel .hs-title{
    font-family:'Teko', sans-serif;
    font-size:14px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .hs-panel .hs-legend{
    display:flex; align-items:center; gap:6px;
    color:var(--muted);
    font-size:10px;
  }
  .hs-panel .hs-legend .sw{width:8px; height:8px; border-radius:2px; background:var(--gold); flex-shrink:0;}

  /* Scrolling announcement banner, sits above the standings panel */
  .hs-ticker{
    display:none;
    position:relative;
    overflow:hidden;
    padding:9px 34px 9px 12px;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(23,31,22,0.9), rgba(15,20,13,0.94));
    backdrop-filter:blur(8px);
    border:1px solid rgba(212,175,55,0.35);
    box-shadow:0 12px 28px -16px rgba(0,0,0,0.7), 0 0 20px -10px rgba(212,175,55,0.3);
    flex-shrink:0;
  }
  .hs-ticker.show{display:block;}
  .hs-ticker::after{
    /* fade the text out under the edit button instead of a hard clip */
    content:'';
    position:absolute;
    top:0; right:0; bottom:0;
    width:34px;
    background:linear-gradient(90deg, rgba(15,20,13,0), rgba(15,20,13,0.95) 70%);
    pointer-events:none;
  }
  .hs-ticker-track{
    display:flex;
    width:max-content;
    animation:hs-ticker-scroll 16s linear infinite;
  }
  .hs-ticker.show:hover .hs-ticker-track{animation-play-state:paused;}
  .hs-ticker-item{
    display:inline-block;
    white-space:nowrap;
    padding-right:64px;
    color:#f0e2b0;
    font-size:11.5px;
    letter-spacing:0.02em;
  }
  @keyframes hs-ticker-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .hs-notice-edit{
    display:none;
    position:absolute;
    top:6px; right:6px;
    width:20px; height:20px;
    align-items:center; justify-content:center;
    border-radius:6px;
    border:1px solid rgba(212,175,55,0.4);
    background:rgba(0,0,0,0.25);
    color:var(--gold);
    font-size:11px;
    cursor:pointer;
    line-height:1;
    z-index:1;
  }
  .hs-notice-edit:hover{background:rgba(212,175,55,0.2);}
  .hero-standings-card.is-admin .hs-notice-edit{display:flex;}
  .hero-standings-card.is-admin .hs-notice-empty{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:7px 12px;
    border-radius:8px;
    border:1px dashed rgba(212,175,55,0.3);
    color:var(--muted);
    font-size:11px;
    flex-shrink:0;
  }
  .hs-notice-empty{display:none;}
  .hs-notice-empty button{
    border:1px solid rgba(212,175,55,0.4);
    background:transparent;
    color:var(--gold);
    font-size:10px;
    padding:3px 8px;
    border-radius:6px;
    cursor:pointer;
  }
  .hs-notice-empty button:hover{background:rgba(212,175,55,0.15);}

  /* ---------- FEATURED VIDEO (admin-controlled, shown to everyone) ---------- */
  /* Hidden entirely for regular visitors when no link is set — the page
     just looks like it never had a video section. Admins always see at
     least the "no video set" prompt so they know the option exists. */
  .video-section{
    display:none;
    position:relative;
    z-index:1;
    max-width:720px;
    margin:30px auto 0;
  }
  .video-section.show{display:block;}
  .video-embed-wrap{
    display:none;
    position:relative;
    width:100%;
    padding-top:56.25%; /* 16:9 */
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#000;
    box-shadow:0 18px 40px rgba(0,0,0,0.45);
  }
  .video-embed-wrap iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
  .video-edit-btn{
    display:none;
    position:absolute;
    top:-12px; right:-12px;
    width:26px; height:26px;
    align-items:center; justify-content:center;
    border-radius:8px;
    border:1px solid rgba(212,175,55,0.4);
    background:rgba(0,0,0,0.55);
    color:var(--gold);
    font-size:12px;
    cursor:pointer;
    line-height:1;
    z-index:2;
  }
  .video-edit-btn:hover{background:rgba(212,175,55,0.2);}
  .video-section.is-admin .video-edit-btn{display:flex;}
  .video-empty{
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:18px;
    border-radius:14px;
    border:1px dashed rgba(212,175,55,0.3);
    color:var(--muted);
    font-size:13px;
  }
  .video-empty button{
    border:1px solid rgba(212,175,55,0.4);
    background:transparent;
    color:var(--gold);
    font-size:11px;
    padding:5px 12px;
    border-radius:6px;
    cursor:pointer;
  }
  .video-empty button:hover{background:rgba(212,175,55,0.15);}
  @media (max-width:600px){
    .video-section{max-width:100%; padding:0 16px;}
  }

  /* ---------- NAV: LIVE TAB ---------- */
  .nav-link-live{color:var(--red);}
  .nav-link-live:hover{color:var(--red); background:var(--panel-2);}
  .nav-link-live.active{color:var(--red); background:var(--panel);}
  .nav-live-dot{
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
    background:var(--red);
    box-shadow:0 0 7px var(--red);
    animation:cdLiveDot 1.4s ease-in-out infinite;
  }

  /* ---------- LIVE TAB (match stream + its own chat) ---------- */
  .live-section-head .live-badge{
    display:inline-flex; align-items:center; gap:7px;
    font-family:'Teko', sans-serif;
    font-size:15px; letter-spacing:0.12em;
    color:var(--red);
    background:rgba(193,39,45,0.12);
    border:1px solid rgba(193,39,45,0.4);
    border-radius:6px;
    padding:4px 10px;
  }
  .live-layout{
    display:flex;
    align-items:flex-start;
    gap:24px;
  }
  .live-video-col{flex:1; min-width:0;}
  .live-video-section.video-section{
    display:block;
    max-width:none;
    margin:0;
  }
  .live-video-section .video-empty{
    display:none;
    flex-direction:column;
    aspect-ratio:16/9;
    border-radius:14px;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:18px;
  }
  .live-chat-col{
    width:320px;
    flex-shrink:0;
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px;
    align-self:stretch;
    display:flex;
  }
  .live-chat-widget{
    margin-top:0; border-top:none; padding-top:0;
    display:flex; flex-direction:column; flex:1; min-width:0;
  }
  .live-chat-widget .chat-messages{
    flex:1;
    max-height:none;
    min-height:320px;
  }
  @media (max-width:900px){
    .live-layout{flex-direction:column;}
    .live-chat-col{width:100%;}
    .live-chat-widget .chat-messages{min-height:220px; max-height:320px;}
  }
  .hs-panel .standings-wrap{
    background:transparent;
    border:none;
    border-radius:0;
    overflow:auto;
  }
  .hs-panel table{min-width:480px; font-size:11px;}
  .hs-panel thead th{padding:8px 6px; font-size:10px;}
  .hs-panel tbody td{padding:8px 6px; font-size:11px;}
  .hs-panel .rk{font-size:15px;}
  .hs-panel .pts{font-size:15px;}
  @media (max-width:1180px){
    .hero-standings-card{
      position:static;
      transform:none;
      width:min(420px, 92%);
      margin:32px auto 0;
    }
    .hs-panel{max-height:none;}
  }

  /* ---------- MAIN NAV / TABS ---------- */
  .tab-section{display:none;}
  .tab-section.tab-active{display:block;}
  .tab-section{scroll-margin-top:64px;}
  @media (max-width:900px){
    .tab-section{scroll-margin-top:100px;}
  }
  @media (max-width:640px){
    .tab-section{scroll-margin-top:94px;}
  }

  .main-nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; gap:12px;
    background:rgba(10,14,11,0.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:8px 16px;
  }
  body{padding-top:52px;}
  @media (max-width:900px){
    body{padding-top:92px;}
  }
  @media (max-width:640px){
    body{padding-top:86px;}
  }

  .nav-lang-wrap{
    position:relative;
    flex-shrink:0;
  }
  .nav-lang-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.03em;
    transition:border-color 0.15s, background 0.15s;
  }
  .nav-lang-toggle:hover{
    border-color:var(--gold);
    background:rgba(212,175,55,0.08);
  }
  .nav-lang-icon{flex-shrink:0;}
  .nav-lang-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:4px;
    min-width:130px;
    display:none;
    flex-direction:column;
    gap:2px;
    z-index:200;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
  }
  .nav-lang-menu.open{display:flex;}
  .nav-lang-option{
    background:transparent;
    border:none;
    color:var(--text);
    text-align:left;
    padding:8px 10px;
    border-radius:6px;
    cursor:pointer;
    font-family:inherit;
    font-size:13.5px;
  }
  .nav-lang-option:hover{
    background:rgba(212,175,55,0.12);
    color:var(--gold);
  }
  .nav-lang-option.active{
    color:var(--gold);
    font-weight:700;
  }
  @media (max-width:640px){
    .nav-lang-wrap{margin-right:6px;}
    .nav-lang-current{display:none;}
    .nav-lang-toggle{padding:6px 8px;}
  }

  /* ---------- LEFT STACK (language switcher) ---------- */
  .nav-left-stack{
    order:-1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-right:10px;
    flex-shrink:0;
  }
  @media (max-width:640px){
    .nav-left-stack{margin-right:6px; gap:4px;}
  }

  /* ---------- FLOATING LIVE BUTTON (in-page, not in the nav bar) ----------
     Fixed-positioned just below the nav so it lands in the top-left of the
     page content on every tab/page, instead of living inside .main-nav. */
  .floating-live-btn{
    position:fixed;
    top:60px;
    left:16px;
    z-index:900;
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:transparent;
    border:none;
    padding:0;
    color:var(--red);
    font-family:'Teko', sans-serif;
    font-size:14px;
    letter-spacing:0.1em;
    text-decoration:none;
    transition:opacity 0.15s;
  }
  .floating-live-btn:hover{color:var(--red); opacity:0.8;}
  .floating-live-btn.active{color:var(--red);}
  @media (max-width:900px){
    .floating-live-btn{top:100px;}
  }
  @media (max-width:640px){
    .floating-live-btn{top:94px; left:12px; font-size:13px;}
  }

  .nav-links{
    display:flex; flex-wrap:wrap; gap:4px;
    flex:1;
    justify-content:center;
    min-width:0;
  }
  .nav-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    text-decoration:none;
    font-family:'Teko', sans-serif;
    font-size:16px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:8px 14px;
    border-radius:8px;
    transition:color 0.15s ease, background 0.15s ease;
    white-space:nowrap;
  }
  .nav-link:hover{color:var(--text); background:var(--panel-2);}
  .nav-link.active{color:var(--gold); background:var(--panel);}

  /* ---------- NAV OVERFLOW ("More ▾") ---------- */
  .nav-more-wrap{position:relative;}
  .nav-more-toggle{
    display:inline-flex; align-items:center; gap:4px;
    background:transparent; border:none;
    cursor:pointer;
    font-family:'Teko', sans-serif;
  }
  .nav-more-toggle.active{color:var(--gold); background:var(--panel);}
  .nav-more-caret{
    font-size:12px;
    transition:transform 0.15s ease;
  }
  .nav-more-wrap.open .nav-more-caret{transform:rotate(180deg);}
  .nav-more-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:6px;
    min-width:190px;
    display:none;
    flex-direction:column;
    gap:2px;
    z-index:1001;
    box-shadow:0 12px 30px rgba(0,0,0,0.45);
  }
  .nav-more-wrap.open .nav-more-menu{display:flex;}
  .nav-more-menu .nav-link{
    text-transform:none;
    font-family:'Manrope', sans-serif;
    font-size:13.5px;
    font-weight:600;
    padding:9px 10px;
    white-space:nowrap;
  }

  /* eNation animated brand logo */
  .nav-link.nav-brand{
    width:auto;
    height:38px;
    padding:0 10px 0 8px;
    margin-right:2px;
    justify-content:center;
    overflow:visible;
    background:transparent;
    border-radius:10px;
    gap:2px;
  }
  .nav-brand-logo{
    display:block;
    width:70px;
    height:42px;
    object-fit:contain;
    transform-origin:center center;
    filter:drop-shadow(0 0 10px rgba(212,175,55,.18));
    animation:enationNavLogoFloat 4s ease-in-out infinite;
    will-change:transform, filter;
  }
  .nav-link.nav-brand:hover .nav-brand-logo,
  .nav-link.nav-brand.active .nav-brand-logo{
    filter:drop-shadow(0 0 13px rgba(212,175,55,.34));
  }

  /* "Nation" wordmark next to the animated crest, using the styled
     "E" artwork in place of a plain letter E */
  .nav-brand-word{
    display:inline-flex;
    align-items:center;
    gap:1px;
    color:var(--text);
    font-family:'Teko', sans-serif;
    font-size:20px;
    letter-spacing:0.03em;
    text-transform:none;
    line-height:1;
    white-space:nowrap;
  }
  .nav-brand-e{
    display:block;
    width:16px;
    height:16px;
    object-fit:contain;
    transform:translateY(-1px);
  }
  .nav-link.nav-brand:hover .nav-brand-word,
  .nav-link.nav-brand.active .nav-brand-word{
    color:var(--gold);
  }
  @keyframes enationNavLogoFloat{
    0%,100%{transform:translateY(0) scale(1); filter:drop-shadow(0 0 9px rgba(212,175,55,.18));}
    50%{transform:translateY(-7px) scale(1.025); filter:drop-shadow(0 0 15px rgba(212,175,55,.34));}
  }
  @media (prefers-reduced-motion:reduce){
    .nav-brand-logo{animation:none;}
  }
  .nav-link-icon{
    width:18px;
    height:18px;
    object-fit:contain;
    flex-shrink:0;
    opacity:0.85;
    transition:opacity 0.15s ease;
  }
  .nav-link:hover .nav-link-icon,
  .nav-link.active .nav-link-icon{opacity:1;}

  .nav-link-icon.enl-coin-icon{
    width:19px;
    height:19px;
    opacity:1;
    filter:drop-shadow(0 0 4px rgba(212,175,55,.35));
  }

  .section-coin-icon{
    width:30px;
    height:30px;
    vertical-align:-6px;
    margin-right:2px;
    filter:drop-shadow(0 0 5px rgba(212,175,55,.3));
  }

  /* When a logged-in player has an avatar, #navProfileIcon swaps from the
     generic silhouette icon to their avatar image (see renderPlayerStatus
     in main.js) — give it a round, full-opacity treatment so it reads as
     "your face", not just another nav glyph. */
  .nav-link-icon.is-avatar{
    width:20px;
    height:20px;
    border-radius:50%;
    object-fit:cover;
    opacity:1;
    box-shadow:0 0 0 1.5px rgba(212,175,55,.55);
  }

  /* Caps the "My Profile" tab label so a long player name can't stretch
     the whole nav bar — full name still shows via the title tooltip. */
  #navProfileLabel{
    display:inline-block;
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
  }
  @media (max-width:900px){
    #navProfileLabel{max-width:80px;}
  }

  /* ---------- NAV AUTH (Register / Login / Admin) ---------- */
  .nav-auth{
    display:flex; align-items:center; gap:8px;
    flex-shrink:0;
  }
  .nav-status-picker{
    display:flex; align-items:center;
  }
  .nav-status-picker:empty{display:none;}
  .nav-auth-btn{
    font-family:'Manrope', sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.03em;
    white-space:nowrap;
    padding:8px 14px;
    border-radius:999px;
    cursor:pointer;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text);
    transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .nav-auth-btn:hover{background:var(--panel-2); transform:translateY(-1px);}
  .nav-auth-btn.primary{
    border-color:var(--gold);
    background:var(--gold);
    color:#1a1a12;
  }
  .nav-auth-btn.primary:hover{background:#e6c453;}

  .nav-admin-wrap{position:relative;}

  .nav-patch-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    height:34px; padding:0 11px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(212,175,55,0.05);
    color:var(--muted);
    font-family:'Manrope', sans-serif;
    font-size:11px; font-weight:800;
    letter-spacing:0.04em; text-transform:uppercase;
    white-space:nowrap; cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .nav-patch-btn:hover{
    background:rgba(212,175,55,0.12); color:var(--gold);
    border-color:var(--gold); transform:translateY(-1px);
  }
  .nav-patch-icon{width:18px; height:18px; object-fit:contain; display:block; flex:0 0 18px;}

  .nav-notif-wrap{position:relative;}
  .nav-notif-toggle{
    position:relative;
    display:none;
    width:34px; height:34px;
    align-items:center; justify-content:center;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    font-size:15px;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .nav-notif-toggle:hover{background:var(--panel-2); color:var(--gold); border-color:var(--gold);}
  .nav-notif-toggle:disabled{opacity:0.45; cursor:default;}
  .nav-notif-toggle:disabled:hover{background:transparent; color:var(--muted); border-color:var(--line);}
  .nav-notif-icon{width:18px; height:18px; object-fit:contain;}
  .nav-notif-badge{
    position:absolute;
    top:-3px; right:-3px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    font-size:10px;
    font-weight:800;
    line-height:1;
    border:2px solid var(--bg);
  }
  .nav-admin-toggle{
    display:none;
    width:34px; height:34px;
    align-items:center; justify-content:center;
    border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    font-size:15px;
    cursor:pointer;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .nav-admin-toggle.visible{display:flex;}
  .nav-admin-toggle:hover{background:var(--panel-2); color:var(--text);}
  .patch-notes-modal{max-width:720px; width:min(720px, calc(100vw - 28px));}
  .patch-notes-admin-modal{max-width:620px; width:min(620px, calc(100vw - 28px));}
  .patch-notes-admin-existing{margin-top:18px; border-top:1px solid var(--line); padding-top:16px;}
  .patch-notes-admin-existing-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
  .patch-notes-admin-existing-head strong{font-size:13px; color:var(--text);}
  .patch-notes-admin-existing-head span{font-size:10px; color:var(--muted); text-align:right;}
  .patch-notes-admin-list{display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; padding-right:2px;}
  .patch-note-admin-row{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); padding:10px 11px;}
  .patch-note-admin-info{min-width:0; display:flex; flex-direction:column; gap:4px;}
  .patch-note-admin-title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .patch-note-admin-info strong{font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .patch-note-admin-info > span:last-child{font-size:10px; color:var(--muted);}
  .patch-note-delete-btn{flex:0 0 auto; padding:6px 10px; font-size:10px;}
  .patch-note-admin-empty{padding:18px 10px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:9px; font-size:11px;}
  .patch-notes-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px;}
  .patch-notes-head h3{margin:2px 0 0;}
  .patch-notes-kicker{font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);}
  .patch-notes-close{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); font-size:22px; line-height:1; cursor:pointer;}
  .patch-notes-close:hover{border-color:var(--gold); color:var(--gold);}
  .patch-notes-list{display:flex; flex-direction:column; gap:10px; max-height:58vh; overflow-y:auto; padding-right:2px;}
  .patch-note-card{border:1px solid var(--line); border-radius:12px; background:var(--panel-2); padding:15px 16px;}
  .patch-note-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
  .patch-note-version{display:inline-flex; align-items:center; border:1px solid rgba(212,175,55,.35); border-radius:999px; padding:3px 8px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;}
  .patch-note-title{margin:9px 0 5px; font-size:17px; font-weight:800; color:var(--text);}
  .patch-note-date{font-size:11px; color:var(--muted); white-space:nowrap;}
  .patch-note-body{margin:0; color:var(--muted); font-size:13px; line-height:1.65; white-space:pre-wrap; word-break:break-word;}
  .patch-note-by{margin-top:10px; font-size:10px; color:var(--muted);}
  .patch-note-empty{padding:28px 12px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:10px;}
  @media (max-width:640px){
    .nav-patch-btn{padding:0 9px; font-size:10px;}
    .patch-note-top{flex-direction:column; gap:5px;}
    .patch-note-date{white-space:normal;}
  }

  .nav-admin-panel{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:260px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.45);
    flex-direction:column;
    gap:8px;
    z-index:1001;
  }
  .nav-admin-panel.open{display:flex;}
  .nav-admin-panel .admin-status{
    display:flex; flex-wrap:wrap; gap:6px;
    font-family:'Manrope', sans-serif;
    font-size:12px;
    align-items:center;
  }
  .nav-admin-panel .online-status{
    font-family:'Manrope', sans-serif;
    font-size:11px;
    color:var(--muted);
  }

  @media (max-width:900px){
    .main-nav{flex-wrap:wrap; row-gap:8px;}
    .nav-links{
      order:2; width:100%;
      justify-content:flex-start; overflow-x:auto;
      gap:2px;
    }
    .nav-link{font-size:14px; padding:7px 10px;}
    .nav-link-icon{width:16px; height:16px;}
    .nav-auth{order:1; width:100%; justify-content:flex-end; flex-wrap:wrap; row-gap:6px;}
    .nav-more-menu{left:auto; right:0;}
  }
  @media (max-width:420px){
    .nav-auth-btn{padding:7px 10px; font-size:11px;}
  }

  /* ---------- PROFILE TAB (profile modal reused as a full section) ---------- */
  #profile .modal-overlay{
    position:static;
    inset:auto;
    z-index:auto;
    background:none;
    padding:0;
    display:flex;
  }
  #profileOverlay.profile-hidden{display:none;}
  #profile .profile-modal{max-width:640px; margin:0 auto; width:100%; max-height:none; border-radius:16px;}
  #profile .profile-close{display:none;}
  .profile-login-prompt{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:32px 24px;
    text-align:center;
    color:var(--muted);
    max-width:420px;
    margin:0 auto;
  }
  .profile-login-prompt p{margin-bottom:16px;}

  /* ---------- MINI GAME: PENALTY SHOOTOUT ---------- */
  .pk-section{padding-top:56px;}
  .pk-card{
    position:relative;
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px 24px 32px;
    overflow:hidden;
  }
  .pk-card::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.05) 100%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 44px);
    pointer-events:none;
  }
  .pk-top{
    position:relative; z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:18px;
  }
  .pk-top-left{display:flex; align-items:center; gap:10px;}
  .pk-ball-ico{font-size:20px; line-height:1;}
  .pk-title{font-family:'Teko', sans-serif; font-size:22px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text);}
  .pk-sub{font-size:12px; color:var(--muted); margin-top:2px;}
  .pk-stats{display:flex; gap:10px; flex-wrap:wrap;}
  .pk-stat{
    font-family:'Teko', sans-serif;
    font-size:14px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:7px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,0.02);
    color:var(--text);
  }
  .pk-stat b{color:var(--gold); font-weight:700;}
  .pk-stat.pk-timer b{color:var(--red);}

  .pk-layout{
    position:relative; z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:38px;
  }
  .pk-field{
    position:relative; z-index:1;
    flex:0 1 460px;
    min-width:0;
  }
  .pk-leaderboard{
    position:relative; z-index:1;
    width:280px;
    flex-shrink:0;
    background:
      radial-gradient(circle at 100% 0%, rgba(212,175,55,0.08), transparent 55%),
      linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.02), -14px 0 28px -20px rgba(0,0,0,0.65), 0 18px 40px -24px rgba(0,0,0,0.5);
  }
  .pk-lb-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .pk-lb-title{
    font-family:'Teko', sans-serif;
    font-size:18px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .pk-lb-title-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px; height:26px;
    border-radius:50%;
    font-size:13px;
    background:linear-gradient(160deg, rgba(212,175,55,0.22), rgba(212,175,55,0.05));
    border:1px solid rgba(212,175,55,0.4);
    flex-shrink:0;
  }
  .pk-lb-live{
    display:flex; align-items:center; gap:5px;
    font-family:'Teko', sans-serif;
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--muted);
    flex-shrink:0;
  }
  .pk-lb-live-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--pitch);
    box-shadow:0 0 0 0 rgba(15,122,74,0.6);
    animation:pkLbPulse 2s infinite;
  }
  @keyframes pkLbPulse{
    0%{box-shadow:0 0 0 0 rgba(15,122,74,0.55);}
    70%{box-shadow:0 0 0 6px rgba(15,122,74,0);}
    100%{box-shadow:0 0 0 0 rgba(15,122,74,0);}
  }
  .pk-lb-caption{
    font-size:10.5px;
    color:var(--muted);
    margin:3px 0 14px;
    padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  .pk-lb-list{display:flex; flex-direction:column; gap:8px;}
  .pk-lb-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    color:var(--text);
    padding:9px 10px 12px;
    border-radius:10px;
    background:rgba(255,255,255,0.02);
    border:1px solid transparent;
    overflow:hidden;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .pk-lb-row:hover{background:rgba(255,255,255,0.045);}
  .pk-lb-row.pk-lb-me{
    background:rgba(212,175,55,0.10);
    border-color:rgba(212,175,55,0.35);
  }
  .pk-lb-row.pk-lb-podium-1{background:linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.02));}
  .pk-lb-row.pk-lb-podium-2{background:linear-gradient(90deg, rgba(200,205,214,0.10), rgba(200,205,214,0.015));}
  .pk-lb-row.pk-lb-podium-3{background:linear-gradient(90deg, rgba(198,124,74,0.12), rgba(198,124,74,0.02));}
  .pk-lb-row .pk-lb-rank{
    font-family:'Teko', sans-serif;
    font-size:14px;
    color:var(--muted);
    text-align:center;
    width:20px;
    flex-shrink:0;
  }
  .pk-lb-row.pk-lb-podium-1 .pk-lb-rank,
  .pk-lb-row.pk-lb-podium-2 .pk-lb-rank,
  .pk-lb-row.pk-lb-podium-3 .pk-lb-rank{font-size:15px;}
  .pk-lb-avatar{
    width:28px; height:28px;
    border-radius:50%;
    flex-shrink:0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
    overflow:hidden;
  }
  .pk-lb-avatar-img{object-fit:cover;}
  .pk-lb-avatar-fallback{
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif;
    font-size:13px;
    font-weight:700;
    color:#10150d;
  }
  .pk-lb-namewrap{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px;}
  .pk-lb-nameline{display:flex; align-items:baseline; gap:6px; min-width:0;}
  .pk-lb-name{
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
  }
  .pk-lb-chips{display:flex; flex-wrap:wrap; gap:4px 5px;}
  .pk-lb-chip{
    display:inline-flex; align-items:center; gap:3px;
    font-size:9.5px;
    line-height:1.5;
    color:var(--muted);
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
    border-radius:999px;
    padding:0px 6px;
    white-space:nowrap;
  }
  .pk-lb-totalwrap{
    flex-shrink:0;
    display:flex; flex-direction:column; align-items:flex-end;
    margin-left:auto; padding-left:4px;
  }
  .pk-lb-row .pk-lb-score{
    font-family:'Teko', sans-serif;
    font-size:19px;
    line-height:1;
    color:var(--gold);
    font-weight:700;
  }
  .pk-lb-score-unit{
    font-size:8px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin-top:2px;
  }
  .pk-lb-row .pk-lb-lvl{
    font-family:'Teko', sans-serif;
    font-size:10.5px;
    color:var(--muted);
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:0 4px;
    flex-shrink:0;
  }
  .pk-lb-bar{
    position:absolute; left:10px; right:10px; bottom:0;
    height:2.5px;
    border-radius:2px;
    background:rgba(255,255,255,0.05);
    overflow:hidden;
  }
  .pk-lb-bar-fill{
    height:100%;
    border-radius:2px;
    background:linear-gradient(90deg, var(--gold), #f0dd9a);
  }
  .pk-lb-empty{
    color:var(--muted);
    font-size:12px;
    font-style:italic;
    text-align:center;
    padding:22px 6px;
  }
  .pk-lb-note{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11px;
    line-height:1.4;
  }
  @media (max-width:820px){
    .pk-layout{flex-direction:column; align-items:center; gap:0;}
    .pk-leaderboard{width:100%; max-width:460px; margin-top:34px;}
  }
  .pk-goal{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(212,175,55,0.10), transparent 55%),
      var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
  }
  .pk-net{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(242,239,228,0.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242,239,228,0.14) 1px, transparent 1px);
    background-size:12.5% 16.6%;
    opacity:0.7;
  }
  .pk-zones{
    position:absolute; inset:0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(2,1fr);
    gap:3px;
    padding:3px;
  }
  .pk-zone{
    background:rgba(255,255,255,0.015);
    border:1px dashed rgba(212,175,55,0.18);
    border-radius:6px;
    cursor:pointer;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .pk-zone:hover{background:rgba(212,175,55,0.08); border-color:rgba(212,175,55,0.4);}
  .pk-zone.pk-flash-goal{background:rgba(15,122,74,0.4); border-color:var(--pitch);}
  .pk-zone.pk-flash-save{background:rgba(193,39,45,0.4); border-color:var(--red);}

  .pk-keeper{
    position:absolute;
    bottom:6%;
    left:50%;
    width:15%;
    aspect-ratio:1/2;
    transform:translateX(-50%);
    transition:left 0.28s cubic-bezier(.3,1.5,.4,1), transform 0.28s cubic-bezier(.3,1.5,.4,1);
    z-index:2;
    pointer-events:none;
  }
  .pk-keeper .pk-keeper-body{
    width:100%; height:100%;
    background:linear-gradient(180deg, var(--gold), #b8912a);
    border-radius:6px 6px 3px 3px;
    box-shadow:0 4px 10px rgba(0,0,0,0.5);
  }
  .pk-keeper.pk-dive-left{left:16.6%; transform:translateX(-50%) rotate(-24deg);}
  .pk-keeper.pk-dive-mid-left{left:33.3%; transform:translateX(-50%) rotate(-8deg);}
  .pk-keeper.pk-dive-right{left:83.3%; transform:translateX(-50%) rotate(24deg);}
  .pk-keeper.pk-dive-mid-right{left:66.6%; transform:translateX(-50%) rotate(8deg);}

  .pk-ball{
    position:absolute;
    width:9%;
    aspect-ratio:1/1;
    left:50%; top:88%; bottom:auto;
    transform:translate(-50%, 0) scale(1);
    border-radius:50%;
    background:
      radial-gradient(circle at 32% 28%, #fff, #d9d9d0 55%, #b7b7ac 100%);
    box-shadow:0 3px 8px rgba(0,0,0,0.5);
    transition:left 0.3s ease-out, top 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
    z-index:3;
  }

  /* ---------- ARCADE (Precision Finisher + Last Man Standing) ----------
     New retro-arcade minigame section, replacing the old Free Kick
     Challenge's power/aim meter entirely. Built on top of the existing
     .pk-card/.pk-stats/.pk-leaderboard/.pk-btn chrome above (unchanged —
     duel.js also depends on some of those, this only adds new classes). */
  .arc-game-tabs{
    position:relative; z-index:1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:2px 0 22px;
  }
  .arc-game-tab{
    font-family:'Teko', sans-serif;
    font-size:14px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:9px 10px;
    border-radius:10px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    color:var(--muted);
    cursor:pointer;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .arc-game-tab:hover{border-color:rgba(212,175,55,0.4); color:var(--text);}
  .arc-game-tab.active{
    background:var(--gold);
    border-color:var(--gold);
    color:#1a1a12;
  }
  .arc-game-tabs.arc-tabs-locked .arc-game-tab{
    opacity:0.45;
    pointer-events:none;
  }
  .arc-field{max-width:560px;}
  .arc-canvas-wrap{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    background:#0a0e0b;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 0 3px rgba(212,175,55,0.05);
    cursor:pointer;
    touch-action:none;
  }
  .arc-canvas-wrap::after{
    /* faint scanline overlay for the retro-arcade feel */
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px);
    pointer-events:none;
    opacity:0.5;
    z-index:2;
  }
  #arcadeCanvas{display:block; width:100%; height:100%;}
  .arc-overlay{
    position:absolute; inset:0;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    padding:20px;
    background:rgba(10,14,11,0.66);
    backdrop-filter:blur(1px);
  }
  .arc-overlay-title{
    font-family:'Press Start 2P', 'Teko', sans-serif;
    font-size:15px;
    letter-spacing:0.03em;
    color:var(--gold);
    text-shadow:0 0 12px rgba(212,175,55,0.5);
  }
  .arc-overlay-msg{
    font-size:12px;
    color:var(--text);
    max-width:320px;
    line-height:1.5;
    white-space:pre-line;
  }
  #arcScore, #arcBest, #arcStreak{font-family:'Press Start 2P','Teko', sans-serif; font-size:12px;}
  #arcStreakStat{white-space:nowrap;}
  @media (max-width:560px){
    .arc-overlay-title{font-size:12px;}
    .arc-game-tab{font-size:11.5px; padding:9px 4px; letter-spacing:0.03em;}
  }

  .pk-msg{
    position:relative; z-index:1;
    text-align:center;
    font-family:'Teko', sans-serif;
    font-size:20px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--gold);
    min-height:28px;
    margin-top:16px;
  }
  .pk-controls{
    position:relative; z-index:1;
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:16px;
  }
  .pk-btn{
    font-family:'Teko', sans-serif;
    font-size:16px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:11px 26px;
    border-radius:999px;
    border:1px solid var(--gold);
    background:var(--gold);
    color:#1a1a12;
    cursor:pointer;
    transition:background 0.2s ease, transform 0.1s ease;
  }
  .pk-btn:hover{background:#e6c453;}
  .pk-btn:active{transform:scale(0.97);}
  .pk-btn.pk-btn-ghost{background:transparent; color:var(--gold);}
  .pk-btn.pk-btn-ghost:hover{background:rgba(212,175,55,0.08);}
  .pk-hint{
    position:relative; z-index:1;
    text-align:center;
    font-size:11px;
    color:var(--muted);
    margin-top:10px;
    letter-spacing:0.02em;
  }
  @media (max-width:560px){
    .pk-top{justify-content:center; text-align:center;}
    .pk-top-left{justify-content:center;}
  }

  /* ---------- PENALTY DUEL (friend-vs-friend) ---------- */
  .duel-invite-modal{max-width:360px; text-align:center;}
  .duel-invite-ico{font-size:34px; margin-bottom:6px;}
  .duel-invite-sub{color:var(--muted); font-size:13px; margin:4px 0 2px;}

  .duel-modal{max-width:460px;}
  .duel-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:14px;
  }
  .duel-score-side{display:flex; flex-direction:column; align-items:center; gap:2px; flex:1;}
  .duel-score-name{
    font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .duel-score-num{font-family:'Teko', sans-serif; font-size:34px; color:var(--gold); line-height:1;}
  .duel-score-mid{flex:0 0 auto; text-align:center;}
  .duel-kick-label{
    font-family:'Teko', sans-serif; font-size:14px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--muted);
  }
  .duel-field{margin-top:0;}
  .duel-keeper-controls{
    position:relative; z-index:1;
    display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap;
  }
  .duel-keeper-controls .pk-btn{padding:10px 16px; font-size:13px;}
  .duel-result{text-align:center; margin-top:10px;}
  .duel-result-title{
    font-family:'Teko', sans-serif; font-size:28px; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--gold);
  }
  .duel-result-sub{color:var(--muted); font-size:13px; margin-top:4px;}
  #duelLeaveRow{justify-content:center; margin-top:16px;}
  #duelLeaveRow button{border-color:var(--red); color:var(--red);}
  #duelLeaveRow button:hover{background:var(--red); color:#fff;}

  .req-actions .duel-btn{border-color:var(--gold); color:var(--gold);}
  .req-actions .duel-btn:hover{background:var(--gold); color:#1a1a12;}
  .req-actions .duel-btn:disabled{opacity:0.45; cursor:default; background:none; color:var(--muted); border-color:var(--line);}

  /* ---------- CO-OP DUO TEAMS ---------- */
  .req-actions .duo-btn{border-color:var(--pitch); color:var(--pitch);}
  .req-actions .duo-btn:hover{background:var(--pitch); color:#fff;}

  /* ---------- SECTION SHELL ---------- */
  section{padding:80px 0;}
  .section-head{
    display:flex;
    align-items:baseline;
    gap:16px;
    margin-bottom:38px;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
  }
  .section-head .num{
    font-family:'Teko', sans-serif;
    font-size:44px;
    color:var(--gold);
    line-height:1;
  }
  .section-head h2{
    font-family:'Teko', sans-serif;
    font-size:34px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-weight:600;
  }
  .section-head p{
    margin-left:auto;
    color:var(--muted);
    font-size:14px;
    max-width:260px;
    text-align:right;
  }

  /* ---------- COMPETITORS ---------- */
  .roster-layout{
    display:flex;
    align-items:flex-start;
    gap:24px;
  }
  .roster{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:16px;
    flex:1;
    min-width:0;
  }
  .presence-panel{
    width:220px;
    flex-shrink:0;
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px;
    box-shadow:var(--shadow-card);
  }
  .presence-group + .presence-group{margin-top:22px;}
  .presence-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Teko', sans-serif;
    font-size:16px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text);
    margin-bottom:10px;
  }
  .presence-title span:last-child{color:var(--muted); font-size:13px; font-family:'Manrope', sans-serif; letter-spacing:0;}
  .presence-title-off{color:var(--muted);}
  .offline-dot{background:var(--muted); width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0;}
  .presence-list{display:flex; flex-direction:column; gap:6px; max-height:190px; overflow-y:auto; padding-right:2px;}
  .presence-list::-webkit-scrollbar{width:5px;}
  .presence-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
  .presence-row{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    color:var(--text);
    padding:5px 8px;
    border-radius:8px;
    background:rgba(255,255,255,0.02);
    transition:background 0.15s ease;
  }
  .presence-row:hover{background:rgba(255,255,255,0.05);}
  .presence-row .presence-avatar{
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif; font-size:12px; font-weight:600;
    background:var(--panel); color:var(--muted);
    border:1px solid var(--line);
  }
  .presence-row .presence-avatar-img{object-fit:cover; padding:0;}
  .presence-row.is-online .presence-avatar{color:var(--pitch); border-color:rgba(76,201,120,0.35);}
  .presence-row .presence-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; justify-content:center;}
  .presence-row .presence-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .presence-row .presence-lastactive{font-size:11px; line-height:1.2; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .presence-row .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--pitch); box-shadow:0 0 6px var(--pitch); animation:presencePulse 1.8s ease-in-out infinite;}
  .presence-row.is-online .dot.status-idle{background:var(--gold); box-shadow:0 0 6px var(--gold);}
  .presence-row.is-online .dot.status-dnd{background:var(--red); box-shadow:0 0 6px var(--red); animation:none;}
  .presence-row.is-offline .dot{background:var(--line); box-shadow:none; animation:none;}
  .presence-row.is-offline{color:var(--muted);}
  .presence-empty{color:var(--muted); font-size:12px; font-style:italic; padding:4px 8px;}

  /* ---------- STATUS PICKER (Online / Idle / Do Not Disturb) ---------- */
  .status-dot{
    display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background:var(--pitch); box-shadow:0 0 6px var(--pitch);
  }
  .status-dot.status-idle{background:var(--gold); box-shadow:0 0 6px var(--gold);}
  .status-dot.status-dnd{background:var(--red); box-shadow:0 0 6px var(--red);}
  .status-picker{position:relative; display:inline-flex; align-items:center;}
  .status-picker-btn{
    display:flex; align-items:center; justify-content:center;
    width:20px; height:20px; padding:0; border-radius:50%;
    border:1px solid var(--line); background:var(--panel-2); cursor:pointer;
    transition:border-color 0.15s ease;
  }
  .status-picker-btn:hover{border-color:var(--gold);}
  .status-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:40;
    display:flex; flex-direction:column; gap:2px;
    min-width:172px; padding:6px; border-radius:10px;
    background:var(--panel-2); border:1px solid var(--line);
    box-shadow:0 10px 28px rgba(0,0,0,0.45);
  }
  .status-menu[hidden]{display:none;}
  .status-menu-item{
    display:flex; align-items:center; gap:9px;
    padding:7px 9px; border-radius:7px; border:none; background:transparent;
    color:var(--text); font-size:13px; font-family:'Manrope', sans-serif;
    text-align:left; cursor:pointer; white-space:nowrap;
  }
  .status-menu-item:hover{background:rgba(255,255,255,0.06);}
  .status-menu-item.active{background:rgba(212,175,55,0.12); color:var(--gold);}
  @keyframes presencePulse{
    0%, 100%{opacity:1; transform:scale(1);}
    50%{opacity:0.55; transform:scale(0.85);}
  }
  .chat-widget{margin-top:22px; border-top:1px solid var(--line); padding-top:18px;}
  .chat-messages{
    display:flex; flex-direction:column; gap:8px;
    max-height:220px; overflow-y:auto;
    margin:10px 0;
    padding-right:4px;
  }
  .chat-messages::-webkit-scrollbar{width:5px;}
  .chat-messages::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
  .chat-msg{font-size:12px; line-height:1.4; word-break:break-word;}
  .chat-msg .chat-name{color:var(--gold); font-weight:600; margin-right:4px;}
  .chat-msg .chat-time{color:var(--muted); font-size:10px; margin-left:4px;}
  .chat-empty{color:var(--muted); font-size:12px; font-style:italic;}
  .chat-input-row{display:flex; gap:6px;}
  .chat-input-row input{
    flex:1; min-width:0;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 10px;
    color:var(--text);
    font-family:'Manrope', sans-serif;
    font-size:12px;
  }
  .chat-input-row input:focus{outline:none; border-color:var(--gold);}
  .chat-input-row button{
    background:var(--pitch);
    border:none;
    border-radius:8px;
    color:#fff;
    width:34px;
    cursor:pointer;
    font-size:14px;
    flex-shrink:0;
  }
  .chat-input-row button:disabled{opacity:0.4; cursor:not-allowed;}
  .chat-login-hint{color:var(--muted); font-size:12px; font-style:italic;}
  @media (max-width: 780px){
    .roster-layout{flex-direction:column;}
    .presence-panel{width:100%;}
  }
  .card{
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px 20px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow-card-hover);}
  .card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--accent);
  }
  .card .del-player{
    position:absolute;
    top:10px; right:10px;
    width:22px; height:22px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(0,0,0,0.3);
    color:var(--muted);
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .card .del-player:hover{border-color:var(--red); color:var(--red);}
  .badge-wrap{position:relative; display:inline-flex; margin-bottom:16px;}
  .badge-wrap .badge{margin-bottom:0;}
  .lvl-chip{
    position:absolute; bottom:-6px; right:-7px;
    min-width:22px; height:22px; padding:0 5px;
    border-radius:999px;
    background:var(--panel);
    border:2px solid var(--gold);
    color:var(--gold);
    font-family:'Teko', sans-serif;
    font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    line-height:1;
    pointer-events:none;
  }
  .lvl-chip.maxed{
    background:var(--gold); color:var(--panel); border-color:var(--gold);
    box-shadow:0 0 8px color-mix(in srgb, var(--gold) 55%, transparent);
  }
  .badge{
    width:48px; height:48px;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif;
    font-size:22px;
    font-weight:700;
    background:color-mix(in srgb, var(--accent) 22%, transparent);
    color:var(--accent);
    border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    margin-bottom:16px;
    overflow:hidden;
  }
  .badge img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .card .player{
    font-family:'Teko', sans-serif;
    font-size:26px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    margin-bottom:2px;
  }
  .card .team{
    font-size:13px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .card .pstats{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
    flex-wrap:wrap;
  }
  .card .pstat-goals{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:'Teko', sans-serif;
    font-size:17px;
    letter-spacing:0.02em;
    color:var(--text);
    margin-right:auto;
  }
  .card .pstat-goals .ico{font-size:13px;}
  .card .pstat-goals b{color:var(--gold); font-weight:700;}
  .card .prec{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:5px;
    font-family:'Teko', sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
  }
  .card .prec-w{background:color-mix(in srgb, var(--pitch) 24%, transparent); color:#5fd68c;}
  .card .prec-d{background:color-mix(in srgb, var(--muted) 22%, transparent); color:var(--muted);}
  .card .prec-l{background:color-mix(in srgb, var(--red) 24%, transparent); color:#e8737a;}

  /* ---------- DUO TEAMS (2v2 coop) ---------- */
  .duo-teams-toolbar{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
  }
  .duo-teams-search{
    flex:1;
    max-width:320px;
    background:rgba(255,255,255,0.03);
    border:1px solid var(--line);
    border-radius:8px;
    padding:9px 12px;
    color:var(--text);
    font-family:'Manrope', sans-serif;
    font-size:13px;
  }
  .duo-teams-search:focus{outline:none; border-color:var(--gold);}
  .duo-teams-count{
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    white-space:nowrap;
  }
  .duo-teams-count b{color:var(--gold); font-weight:700;}
  .duo-teams-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
  }
  .duo-card{
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:10px;
    padding:18px 20px 16px;
    position:relative;
    overflow:hidden;
    transition:transform 0.25s ease, border-color 0.25s ease;
  }
  .duo-card:hover{transform:translateY(-4px); border-color:var(--gold);}
  .duo-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--pitch));
  }
  .duo-card-name{
    font-family:'Teko', sans-serif;
    font-size:22px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .duo-card-members{
    display:flex;
    flex-direction:column;
    gap:0;
    position:relative;
  }
  .duo-member{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 0;
    position:relative;
  }
  .duo-member .badge{
    width:34px; height:34px;
    font-size:15px;
    margin-bottom:0;
    flex-shrink:0;
  }
  .duo-member-name{
    font-family:'Teko', sans-serif;
    font-size:17px;
    letter-spacing:0.02em;
    text-transform:uppercase;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .duo-connector{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding-left:17px;
    height:20px;
  }
  .duo-connector span{
    width:16px; height:16px;
    border-radius:50%;
    background:var(--panel);
    border:1px solid var(--line);
    color:var(--muted);
    font-size:11px;
    display:flex; align-items:center; justify-content:center;
    line-height:1;
  }
  .duo-card-meta{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  .duo-teams-empty{
    color:var(--muted);
    font-size:14px;
    text-align:center;
    padding:60px 20px;
    border:1px dashed var(--line);
    border-radius:10px;
  }
  .duo-teams-empty b{color:var(--gold);}
  @media (max-width: 560px){
    .duo-teams-toolbar{flex-direction:column; align-items:stretch;}
    .duo-teams-search{max-width:none;}
  }

  /* ---------- FIXTURES ---------- */
  .round{margin-bottom:30px;}
  .round-title{
    font-family:'Teko', sans-serif;

    font-size:15px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:12px;
    display:flex; align-items:center; gap:10px;
  }
  .round-title::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }
  .bye-tag{color:var(--gold); font-size:12px; letter-spacing:0.05em;}
  .matches{display:flex; flex-direction:column; gap:8px;}
  .fixtures-notice{
    color:var(--muted);
    background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line);
    border-radius:10px;
    padding:22px 20px;
    margin:10px 0;
    text-align:center;
    box-shadow:var(--shadow-card);
  }
  .match{
    display:grid;
    grid-template-columns:1fr auto auto auto 1fr;
    align-items:center;
    gap:10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 16px;
    box-shadow:var(--shadow-card);
  }
  .match .side{display:flex; align-items:center; gap:10px; font-size:14px;}
  .match .side.right{flex-direction:row-reverse; text-align:right;}
  .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--accent);}
  .match .name{font-weight:700;}
  .match .team-name{color:var(--muted); font-size:12px; display:block;}
  .score-in{
    width:38px;
    text-align:center;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    font-family:'Teko', sans-serif;
    font-size:20px;
    padding:4px 0;
  }
  .score-in:focus{outline:1px solid var(--gold); border-color:var(--gold);}
  .vs{
    font-family:'Teko', sans-serif;
    color:var(--muted);
    font-size:14px;
    letter-spacing:0.05em;
  }

  /* ---------- GOLDEN SQUARE (home & away two-legged ties) ---------- */
  .playoff-tbd{color:var(--muted); font-style:italic;}
  .playoff-round.playoff-final .round-title{color:var(--gold);}
  .playoff-match{position:relative;}
  .leg-tag{
    position:absolute;
    top:-9px; left:12px;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--muted);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:1px 8px;
  }
  .playoff-agg-row{
    color:var(--text);
    padding:6px 16px 0;
    text-align:center;
    font-family:'Teko', sans-serif;
    letter-spacing:0.03em;
    font-size:16px;
  }
  .playoff-win-row{
    font-size:12px;
    color:var(--gold);
    padding:2px 16px 4px;
    text-align:center;
    letter-spacing:0.04em;
  }
  .playoff-pen-row{
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-size:12px; color:var(--muted);
    padding:4px 16px 4px;
  }
  .pen-btn{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    font-size:12px;
    padding:4px 10px;
    cursor:pointer;
  }
  .pen-btn:hover{border-color:var(--gold);}
  .pen-btn.active{border-color:var(--gold); color:var(--gold); background:color-mix(in srgb, var(--gold) 14%, transparent);}

  /* ---------- STANDINGS ---------- */
  .standings-wrap{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    overflow-x:auto;
    box-shadow:var(--shadow-card);
  }
  table{width:100%; border-collapse:collapse; min-width:640px;}
  thead th{
    font-family:'Teko', sans-serif;
    font-size:14px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    text-align:center;
    padding:14px 8px;
    border-bottom:1px solid var(--line);
  }
  thead th:nth-child(2){text-align:left;}
  tbody td{
    text-align:center;
    padding:12px 8px;
    font-size:14px;
    border-bottom:1px solid var(--line);
  }
  tbody td:nth-child(2){text-align:left;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr.qualify td:first-child{
    position:relative;
  }
  tbody tr.qualify td:first-child::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--gold);
  }
  .rk{font-family:'Teko', sans-serif; font-size:20px; color:var(--muted);}
  tr.qualify .rk{color:var(--gold);}
  .pname{font-weight:700;}
  .pteam{display:flex; align-items:center; gap:8px;}
  .swatch{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
  .pts{font-family:'Teko', sans-serif; font-size:20px; color:var(--gold);}

  .standings-callouts{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-bottom:18px;
  }
  .standings-callout{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .standings-callout .sc-label{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .standings-callout .sc-name{
    font-family:'Teko', sans-serif;
    font-size:22px;
    color:var(--text);
    line-height:1.15;
  }
  .standings-callout .sc-value{
    font-size:13px;
    color:var(--gold);
  }
  @media (max-width:640px){
    .standings-callouts{grid-template-columns:1fr;}
  }

  .legend{
    display:flex; align-items:center; gap:8px;
    margin-top:14px; color:var(--muted); font-size:12px;
  }
  .legend .sw{width:9px; height:9px; border-radius:2px; background:var(--gold);}

  /* ---------- DAILY XP CLAIM ---------- */
  .daily-xp-fab{
    position:fixed;
    right:18px;
    bottom:24px;
    z-index:60;
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    border-radius:999px;
    border:1px solid var(--gold);
    background:linear-gradient(135deg, #2a2210, var(--panel));
    color:var(--gold);
    font-family:'Manrope', sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:0.03em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 8px 26px rgba(212,175,55,0.35);
    animation:dailyXpPulse 1.8s ease-in-out infinite;
  }
  .daily-xp-fab:hover{transform:translateY(-2px); box-shadow:0 12px 32px rgba(212,175,55,0.5);}
  .daily-xp-fab-ico{font-size:20px; line-height:1;}
  @keyframes dailyXpPulse{
    0%, 100%{box-shadow:0 8px 26px rgba(212,175,55,0.35);}
    50%{box-shadow:0 8px 34px rgba(212,175,55,0.75);}
  }
  .daily-xp-modal{text-align:center;}
  .daily-xp-chest{font-size:44px; line-height:1; margin-bottom:8px;}
  .daily-xp-amount{
    font-family:'Teko', sans-serif;
    font-size:44px;
    letter-spacing:0.03em;
    color:var(--gold);
    margin:6px 0 4px;
  }
  .daily-xp-sub{color:var(--muted); font-size:12.5px; margin-bottom:6px;}
  @media (max-width:640px){
    .daily-xp-fab{right:12px; bottom:16px; padding:10px 14px; font-size:12px;}
    .daily-xp-fab-label{display:none;}
    .daily-xp-fab-ico{font-size:22px;}
  }

  .create-account-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:250px;
    padding:12px 24px;
    border-radius:999px;
    font-family:'Manrope', sans-serif;
    font-size:14px;
    font-weight:800;
    letter-spacing:0.04em;
    text-transform:uppercase;
    cursor:pointer;
    border:1px solid var(--gold);
    background:var(--gold);
    color:#1a1a12;
    box-shadow:0 8px 25px rgba(212,175,55,0.16);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .create-account-btn:hover{
    background:#e6c453;
    box-shadow:0 10px 30px rgba(212,175,55,0.24);
    transform:translateY(-1px);
  }

  /* ---------- ADMIN BUTTON STYLES (used inside nav admin dropdown) ---------- */
  .admin-btn{
    background:transparent;
    border:1px solid var(--line);
    color:var(--text);
    padding:7px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .admin-btn:hover{border-color:var(--gold); color:var(--gold);}
  .admin-btn.primary{
    background:var(--gold);
    border-color:var(--gold);
    color:#1a1a12;
    font-weight:700;
  }
  .admin-btn.primary:hover{background:#e6c453; border-color:#e6c453; color:#1a1a12;}
  .admin-btn.danger{
    border-color:rgba(193,39,45,0.5);
    color:#e0868a;
  }
  .admin-btn.danger:hover{background:var(--red); border-color:var(--red); color:#fff;}
  .admin-btn:disabled{
    opacity:0.45;
    cursor:default;
    border-color:var(--line);
    color:var(--muted);
  }
  .admin-btn:disabled:hover{border-color:var(--line); color:var(--muted);}
  .admin-btn.mode-active{background:var(--pitch); border-color:var(--pitch); color:#fff;}
  .admin-btn.mode-active:hover{background:var(--pitch); border-color:var(--pitch); color:#fff;}

  /* ---------- eNL TOKENS ---------- */
  .nav-link-wallet{color:var(--gold); font-weight:700;}
  .enl-balance-strip{
    background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:12px 16px; margin-bottom:16px; font-size:15px;
  }
  .enl-balance-strip strong{color:var(--gold);}
  .enl-transfer-box{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; margin-bottom:22px;
  }
  .enl-transfer-box h3{margin:0 0 10px; font-size:15px;}
  .enl-transfer-form{display:flex; gap:8px; flex-wrap:wrap;}
  .enl-input{
    background:var(--bg); border:1px solid var(--line); color:var(--text);
    border-radius:8px; padding:8px 10px; font-size:14px;
  }
  .enl-input-amount{width:110px;}
  .enl-autocomplete-wrap{position:relative;}
  .enl-suggestions{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
    overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.35);
  }
  .enl-suggestion-item{
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; font-size:14px; cursor:pointer; color:var(--text);
  }
  .enl-suggestion-item:hover, .enl-suggestion-item.enl-suggestion-active{
    background:var(--panel);
  }
  .enl-suggestion-avatar{
    flex:none; width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif; font-size:15px; font-weight:700;
    background:color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent);
    color:var(--accent, var(--gold));
    border:1px solid color-mix(in srgb, var(--accent, var(--gold)) 55%, transparent);
    overflow:hidden;
  }
  .enl-suggestion-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
  .enl-suggestion-text{display:flex; flex-direction:column; min-width:0;}
  .enl-suggestion-name{font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .enl-suggestion-item.enl-suggestion-active .enl-suggestion-name,
  .enl-suggestion-item:hover .enl-suggestion-name{color:var(--gold);}
  .enl-suggestion-fullname{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .enl-tx-list, .enl-pred-list{margin-bottom:22px;}
  .enl-tx-row, .enl-pred-row{
    display:flex; gap:12px; align-items:center; padding:9px 4px;
    border-bottom:1px solid var(--line); font-size:14px; flex-wrap:wrap;
  }
  .enl-tx-amount{min-width:80px; font-weight:700;}
  .enl-pos{color:var(--pitch);}
  .enl-neg{color:var(--red);}
  .enl-tx-desc{flex:1; color:var(--muted);}
  .enl-tx-date{color:var(--muted); font-size:12px;}
  .enl-pred-fixture{font-weight:600; min-width:180px;}
  .enl-pred-pick{color:var(--muted);}
  .enl-pred-status{margin-left:auto; font-size:12.5px; padding:2px 10px; border-radius:999px; border:1px solid var(--line);}
  .enl-status-won{color:var(--pitch); border-color:var(--pitch);}
  .enl-status-lost{color:#e0868a; border-color:rgba(193,39,45,0.5);}
  .enl-status-refunded{color:var(--gold); border-color:var(--gold);}

  .enl-leaderboard{display:flex; flex-direction:column; gap:6px;}
  .enl-leaderboard-row{
    display:flex; align-items:center; gap:14px; padding:10px 16px;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
  }
  .enl-leaderboard-row.enl-top3{border-color:var(--gold); background:var(--panel-2);}
  .enl-lb-rank{width:40px; font-weight:700;}
  .enl-lb-name{flex:1; font-weight:600;}
  .enl-lb-balance{color:var(--gold); font-weight:700;}

  .enl-group-title{margin:22px 0 10px; font-size:15px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
  .enl-events-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;}
  .enl-event-card{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px;
    display:flex; flex-direction:column; gap:8px;
  }
  .enl-event-type{
    align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:0.05em;
    padding:2px 10px; border-radius:999px; background:var(--panel-2); color:var(--muted);
  }
  .enl-event-fixture{font-weight:700; font-size:16px;}
  .enl-event-meta{font-size:12.5px; color:var(--muted);}
  .enl-event-options{display:flex; gap:8px; flex-wrap:wrap;}
  .enl-option-btn{
    flex:1; min-width:90px; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    border-radius:8px; padding:8px 10px; cursor:pointer; font-size:13.5px; transition:border-color .2s, color .2s;
  }
  .enl-option-btn:hover:not(:disabled){border-color:var(--gold); color:var(--gold);}
  .enl-option-btn:disabled{opacity:0.55; cursor:default;}
  .enl-option-mine{border-color:var(--gold); color:var(--gold); font-weight:700;}
  .enl-option-winner{border-color:var(--pitch); color:var(--pitch); font-weight:700;}
  .enl-event-status{font-size:12.5px;}
  .enl-event-tag{color:var(--muted);}
  .enl-tag-open{color:var(--pitch);}
  .enl-tag-mine{color:var(--gold);}
  .enl-tag-locked{color:var(--muted);}
  .enl-tag-won{color:var(--pitch); font-weight:600;}
  .enl-tag-lost{color:#e0868a;}
  .enl-tag-cancelled{color:var(--muted); font-style:italic;}
  .enl-admin-event-controls{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
  .enl-mini-btn{
    background:transparent; border:1px solid var(--line); color:var(--muted);
    border-radius:999px; padding:4px 10px; font-size:11.5px; cursor:pointer;
  }
  .enl-mini-btn:hover{border-color:var(--gold); color:var(--gold);}
  .enl-mini-danger:hover{border-color:var(--red); color:#e0868a;}

  /* ---------- 2v2 COOP BRACKET ---------- */
  .bracket-wrap{display:flex; flex-direction:column; gap:28px; margin-top:10px;}
  .bracket-col-group{}
  .bracket-label{
    font-family:'Teko', sans-serif;
    font-size:18px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:10px;
  }
  .bracket-cols{
    display:flex;
    gap:18px;
    overflow-x:auto;
    padding-bottom:8px;
  }
  .bracket-col{
    flex:0 0 240px;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.015);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02), var(--shadow-card);
  }
  .bracket-col-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--muted);
    padding-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  .coop-match{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto;
    padding:10px 12px;
  }
  /* Explicit grid-column on every cell, not just grid-row: with only
     grid-row set, grid auto-placement packs items left-to-right in DOM
     order within that row, which put the away team's name into the narrow
     middle ("vs") column instead of the right-hand column — squeezing the
     name and leaving it visually floating over the wrong score box. */
  .coop-match .side{grid-row:1; grid-column:1; font-size:12px;}
  .coop-match .side.right{grid-row:1; grid-column:3;}
  .coop-match .score-in{grid-row:2; width:100%;}
  .coop-match .score-in[data-slot="h"]{grid-column:1;}
  .coop-match .score-in[data-slot="a"]{grid-column:3;}
  .coop-match .vs{grid-row:2; grid-column:2;}
  .coop-match.bye-match{grid-template-columns:1fr; padding:10px 12px;}
  .coop-match .name{font-size:13px;}
  .champion-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    border-color:var(--gold);
    background:color-mix(in srgb, var(--gold) 10%, var(--panel));
    box-shadow:0 10px 26px -10px rgba(212,175,55,0.3), 0 2px 6px -2px rgba(0,0,0,0.5);
  }
  .champion-card .name{color:var(--gold); font-size:16px;}
  .create-account-btn:disabled{
    background:var(--panel-2);
    border-color:var(--line);
    color:var(--muted);
    box-shadow:none;
    cursor:default;
  }
  .create-account-btn:disabled:hover{
    background:var(--panel-2);
    box-shadow:none;
    transform:none;
  }
  .admin-status{
    display:flex; align-items:center; gap:8px;
    color:var(--muted);
    font-size:12px;
  }
  .admin-status b{color:var(--gold);}

  .online-status{
    display:flex; align-items:center; gap:6px;
    color:var(--muted);
    font-size:11px;
    padding-left:10px;
    border-left:1px solid var(--line);
  }
  .online-status b{color:var(--text); font-weight:600;}

  .online-dot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--pitch);
    flex-shrink:0;
    animation:onlinePulse 1.6s ease-in-out infinite;
  }
  .online-dot.status-idle{background:var(--gold);}
  .online-dot.status-dnd{background:var(--red); animation:none;}
  @keyframes onlinePulse{
    0%,100%{opacity:1;}
    50%{opacity:0.4;}
  }

  .modal-overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,0.6);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
  }
  .modal-overlay.open{display:flex;}
  /* The crop step can be opened from *inside* another already-open modal
     (register wizard, change-avatar picker, admin edit-player picker, etc).
     All .modal-overlay elements share z-index:100, so stacking otherwise
     falls back to DOM order — and this overlay sits earlier in index.html
     than some of the modals it can be opened from (e.g. registerOverlay),
     which made it render invisibly *behind* them. Bump it above the shared
     100 so it's always on top no matter which modal it was opened from. */
  #avatarCropOverlay{
    z-index:200;
  }
  /* An incoming call is an unsolicited real-time notification, same as a
     duel/duo invite or admin message — any of those can legitimately pop
     open while the player already has some other modal open (patch notes,
     video overlay, admin panel, etc). At the shared z-index:100, stacking
     falls back to DOM order and incomingCallOverlay sits earlier in
     index.html than most other overlays, so it would silently render
     *behind* whichever modal is currently open — the phone rings (audio
     still plays) but nothing is visible to answer. Bump it above the
     shared 100, same fix as avatarCropOverlay above. */
  #incomingCallOverlay{
    z-index:200;
  }
  .modal{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px;
    max-width:340px;
    width:100%;
    box-shadow:var(--shadow-panel);
  }
  .modal h3{
    font-family:'Teko', sans-serif;
    font-size:26px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    margin-bottom:16px;
    color:var(--gold);
  }
  .modal label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .modal input{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    padding:10px 12px;
    font-size:14px;
    margin-bottom:14px;
  }
  .modal input:focus{outline:none; border-color:var(--gold);}
  .modal textarea{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:6px;
    color:var(--text);
    padding:10px 12px;
    font-size:14px;
    margin-bottom:14px;
    font-family:inherit;
    resize:vertical;
  }
  .modal textarea:focus{outline:none; border-color:var(--gold);}
  .announce-row{align-items:flex-start;}
  .announce-row .who{flex:1; min-width:0;}
  .announce-row .who .announce-row-text{font-size:13px; color:var(--text); line-height:1.4; margin-top:4px; white-space:pre-wrap; word-break:break-word;}
  .modal label.remember-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    margin:-4px 0 14px;
    padding:0;
    color:var(--muted);
    font-size:12px;
    cursor:pointer;
    user-select:none;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .modal label.remember-row input[type="checkbox"]{
    flex:0 0 15px;
    width:15px !important;
    height:15px;
    min-width:15px;
    margin:0 !important;
    padding:0;
    accent-color:var(--gold);
    cursor:pointer;
  }
  .modal label.remember-row span{
    display:inline-block;
    margin:0;
    padding:0;
    letter-spacing:0.02em;
    line-height:15px;
  }
  .modal .modal-actions{display:flex; gap:10px; margin-top:6px;}
  .modal .modal-actions button{
    flex:1;
    padding:10px 0;
    border-radius:6px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--text);
    cursor:pointer;
    font-size:13px;
  }
  .modal .modal-actions button.primary{
    background:var(--gold);
    color:#1a1a12;
    border-color:var(--gold);
    font-weight:700;
  }
  .modal .error{color:var(--red); font-size:12px; margin:-6px 0 12px; display:none;}
  .modal .error.show{display:block;}

  /* ---------- AUTH MODAL (player register / player login only) ---------- */
  .auth-modal{
    max-width:380px;
    position:relative;
    animation:authPop 0.22s ease;
  }
  @keyframes authPop{
    from{opacity:0; transform:translateY(6px) scale(0.98);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }
  .auth-modal .auth-icon{
    width:44px; height:44px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px;
    color:var(--gold);
    background:radial-gradient(circle at 30% 30%, rgba(212,175,55,0.22), rgba(212,175,55,0.06));
    border:1px solid rgba(212,175,55,0.35);
  }
  .auth-modal h3{text-align:center;}

  .auth-steps{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    margin:0 0 22px;
  }
  .auth-step-item{
    display:flex; flex-direction:column; align-items:center;
    gap:6px;
  }
  .auth-step-item span{
    width:22px; height:22px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif;
    font-size:13px;
    font-weight:700;
    color:var(--muted);
    background:var(--panel-2);
    border:1px solid var(--line);
    transition:all 0.2s ease;
  }
  .auth-step-item span.active{
    color:#1a1a12;
    background:var(--gold);
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(212,175,55,0.18);
  }
  .auth-step-item label{
    margin:0;
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .auth-step-line{
    width:28px; height:1px;
    background:var(--line);
    margin-top:11px;
  }

  .auth-modal .input-wrap{position:relative; margin-bottom:14px;}
  .auth-modal .input-icon{
    position:absolute; left:11px; top:50%; transform:translateY(-50%);
    color:var(--muted); pointer-events:none;
  }
  .auth-modal .input-wrap input{
    display:block;
    margin-bottom:0;
    padding-left:34px;
  }
  .auth-modal .input-wrap input[type="password"]{
    padding-right:38px;
  }
  .auth-modal .pw-toggle{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none;
    color:var(--muted); cursor:pointer;
    border-radius:6px;
  }
  .auth-modal .pw-toggle:hover{color:var(--gold); background:rgba(212,175,55,0.08);}
  .auth-modal .pw-toggle.is-visible{color:var(--gold);}

  .field-hint{
    font-size:11px;
    margin:-10px 0 12px;
    min-height:14px;
    letter-spacing:0.02em;
  }
  .field-hint.ok{color:var(--pitch);}
  .field-hint.bad{color:var(--red);}
  .field-hint.checking{color:var(--muted);}

  .link-btn{
    background:none; border:none; padding:0;
    font-size:12px; color:var(--gold); cursor:pointer;
    text-decoration:underline; letter-spacing:0.02em;
  }
  .link-btn:hover{opacity:0.8;}
  .link-btn:disabled{color:var(--muted); cursor:default; text-decoration:none;}

  .email-verify-banner{
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; justify-content:center; gap:16px;
    flex-wrap:wrap;
    background:linear-gradient(90deg, rgba(212,175,55,0.16), rgba(212,175,55,0.08));
    border-bottom:1px solid rgba(212,175,55,0.4);
    padding:10px 20px;
    font-size:13px;
    color:var(--text);
  }
  .email-verify-banner button.primary{
    padding:6px 14px; font-size:12px; border-radius:8px;
    background:var(--gold); color:#1a1400; border:none;
    font-weight:700; cursor:pointer;
  }
  .email-verify-banner button.primary:hover{opacity:0.9;}
  @media (max-width:640px){
    .email-verify-banner{font-size:12px; padding:10px 14px;}
  }

  .pw-strength{
    height:4px;
    border-radius:2px;
    background:var(--line);
    overflow:hidden;
    margin:-10px 0 14px;
  }
  .pw-strength-bar{
    height:100%; width:0%;
    border-radius:2px;
    background:var(--red);
    transition:width 0.2s ease, background 0.2s ease;
  }
  .pw-strength-bar.weak{width:33%; background:var(--red);}
  .pw-strength-bar.medium{width:66%; background:var(--gold);}
  .pw-strength-bar.strong{width:100%; background:var(--pitch);}

  .auth-modal .error{
    display:none;
    align-items:center; gap:8px;
    background:rgba(193,39,45,0.1);
    border:1px solid rgba(193,39,45,0.35);
    border-radius:6px;
    padding:9px 10px;
    margin:-4px 0 14px;
    font-size:12px;
    color:#ff9c9c;
  }
  .auth-modal .error.show{display:flex;}
  .auth-modal .error::before{
    content:'!';
    flex:0 0 14px; width:14px; height:14px;
    border:1.5px solid #ff9c9c;
    border-radius:50%;
    font-size:10px; font-weight:800;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
  }

  .auth-modal .modal-actions button.primary{position:relative;}
  .auth-modal .modal-actions button.primary.is-loading{
    color:transparent;
    pointer-events:none;
  }
  .auth-modal .modal-actions button.primary.is-loading::after{
    content:'';
    position:absolute; left:50%; top:50%;
    width:15px; height:15px;
    margin:-8px 0 0 -8px;
    border-radius:50%;
    border:2px solid rgba(26,26,18,0.35);
    border-top-color:#1a1a12;
    animation:authSpin 0.6s linear infinite;
  }
  @keyframes authSpin{to{transform:rotate(360deg);}}

  .score-in[disabled]{
    opacity:0.7;
    cursor:default;
    background:var(--panel);
  }
  .admin-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:6px;
    margin-bottom:8px;
    font-size:13px;
  }
  .admin-row .del-btn{
    background:transparent;
    border:1px solid var(--red);
    color:var(--red);
    border-radius:6px;
    padding:3px 9px;
    cursor:pointer;
    font-size:12px;
  }
  .admin-row .del-btn:hover{background:var(--red); color:#fff;}
  .admin-empty{color:var(--muted); font-size:12px; margin-bottom:10px;}
  .admin-save-status{
    font-family:'Manrope', sans-serif;
    font-size:12px;
    margin-top:8px;
    min-height:16px;
  }
  .admin-save-status.saving{color:var(--muted);}
  .admin-save-status.ok{color:var(--pitch, #2fae66);}
  .admin-save-status.fail{color:var(--red, #e0868a);}

  .sync-note{
    text-align:center;
    color:var(--muted);
    font-size:12px;
    margin-top:10px;
  }

  .fixtures-admin-bar{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 14px;
    margin-bottom:16px;
    background:rgba(212,175,55,0.06);
    border:1px solid rgba(212,175,55,0.28);
    border-radius:10px;
  }
  .save-scores-btn{
    background:var(--gold);
    border-color:var(--gold);
    color:#1a1a12;
    font-weight:700;
  }
  .save-scores-btn:hover:not(:disabled){background:#e6c453; border-color:#e6c453; color:#1a1a12;}
  .save-scores-btn:disabled{
    opacity:0.45;
    cursor:default;
    background:transparent;
    color:var(--muted);
    border-color:var(--line);
  }
  .save-status{
    font-size:12px;
    letter-spacing:0.02em;
    color:var(--muted);
  }
  .save-status.pending{color:var(--gold);}
  .save-status.ok{color:var(--pitch);}
  .save-status.err{color:var(--red); font-weight:600;}

  /* ---------- PLAYER BAR / REGISTRATION ---------- */
  .player-bar{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 16px;
    margin:26px auto 0;
    background:rgba(10,14,11,0.85);
    backdrop-filter:blur(6px);
    border-radius:999px;
    border:1px solid var(--line);
    flex-wrap:wrap;
  }
  .player-bar button{
    font-family:'Manrope', sans-serif;
    font-size:12px;
    letter-spacing:0.03em;
  }
  .player-status{
    display:flex; align-items:center; gap:8px;
    color:var(--muted);
    font-size:12px;
    flex-wrap:wrap;
  }
  .player-status b{color:var(--pitch);}
  .pending-tag{
    color:var(--gold);
    border:1px solid var(--gold);
    border-radius:999px;
    padding:2px 8px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }

  .wizard-step{display:none;}
  .wizard-step.active{display:block;}
  .wizard-dots{display:flex; gap:6px; margin-bottom:16px;}
  .wizard-dots span{width:6px; height:6px; border-radius:50%; background:var(--line);}
  .wizard-dots span.active{background:var(--gold);}
  .avatar-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
    margin:10px 0 16px;
  }
  .avatar-option{
    position:relative;
    aspect-ratio:1/1;
    border-radius:10px;
    overflow:hidden;
    border:2px solid var(--line);
    cursor:pointer;
    background:var(--panel-2);
    transition:border-color 0.15s ease, transform 0.15s ease;
  }
  .avatar-option img{width:100%; height:100%; object-fit:cover; display:block;}
  .avatar-option:hover{transform:translateY(-2px); border-color:var(--muted);}
  .avatar-option.selected{border-color:var(--gold); box-shadow:0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent);}
  .avatar-option .av-check{
    position:absolute; top:4px; right:4px;
    width:18px; height:18px; border-radius:50%;
    background:var(--gold); color:#0a0e0b;
    display:none; align-items:center; justify-content:center;
    font-size:12px; font-weight:800;
  }
  .avatar-option.selected .av-check{display:flex;}
  .avatar-option .av-label{
    position:absolute; left:0; right:0; bottom:0;
    padding:3px 5px;
    font-size:10px; text-transform:uppercase; letter-spacing:0.03em;
    background:linear-gradient(transparent, rgba(0,0,0,0.75));
    color:var(--text);
  }
  .avatar-option.none-option{
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif; font-size:14px; color:var(--muted); text-align:center;
  }
  .avatar-option.avatar-upload-option{
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
    font-family:'Teko', sans-serif; font-size:12px; color:var(--muted); text-align:center;
    border-style:dashed;
  }
  .avatar-option.avatar-upload-option .upload-icon{font-size:20px; line-height:1;}
  .avatar-option.avatar-upload-option:hover{border-color:var(--gold); color:var(--text);}

  .avatar-crop-modal{max-width:320px;}
  .crop-viewport{
    position:relative;
    width:260px; height:260px; max-width:100%;
    margin:10px auto 14px;
    border-radius:14px;
    overflow:hidden;
    background:var(--panel-2);
    border:2px solid var(--line);
    cursor:grab;
    touch-action:none;
  }
  .crop-viewport:active{cursor:grabbing;}
  .crop-viewport img{
    position:absolute; top:0; left:0;
    max-width:none;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
  }
  .crop-zoom-slider{width:100%; accent-color:var(--gold); margin-bottom:6px;}

  .request-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:8px;
    font-size:13px;
  }
  .request-row .who{display:flex; flex-direction:column; gap:2px;}
  .request-row .who b{font-size:14px;}
  .request-row .who span{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.05em;}
  .request-row .req-actions{display:flex; gap:6px; flex-shrink:0;}
  .req-actions button{
    border-radius:6px;
    border:1px solid var(--line);
    padding:5px 10px;
    cursor:pointer;
    font-size:12px;
    background:transparent;
    color:var(--text);
  }
  .req-actions .approve-btn{border-color:var(--pitch); color:var(--pitch);}
  .req-actions .approve-btn:hover{background:var(--pitch); color:#fff;}
  .req-actions .reject-btn{border-color:var(--red); color:var(--red);}
  .req-actions .reject-btn:hover{background:var(--red); color:#fff;}
  .requests-empty{color:var(--muted); font-size:12px;}
  .request-row.admin-msg-row{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .admin-msg-text{
    font-size:13px;
    color:var(--text);
    line-height:1.4;
    white-space:pre-wrap;
    word-break:break-word;
  }
  .manage-player-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px;
    padding:11px 12px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:8px;
  }
  .manage-player-main{min-width:0;}
  .manage-player-main .mp-name{font-weight:700; font-size:14px;}
  .manage-player-main .mp-meta{display:block; color:var(--muted); font-size:11px; margin-top:2px;}
  .manage-player-main .mp-xp{color:var(--gold); font-weight:600;}
  .manage-player-actions{display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap;}
  .manage-player-actions select{
    background:var(--panel); color:var(--text); border:1px solid var(--line);
    border-radius:6px; padding:6px 8px; font-size:11px;
  }
  .manage-player-actions select:focus{outline:none; border-color:var(--gold);}
  .chat-timeout-note{
    display:none; padding:7px 10px; margin-top:7px; border:1px solid rgba(193,39,45,0.45);
    border-radius:7px; color:#e0868a; background:rgba(193,39,45,0.08); font-size:11px;
    text-align:center;
  }
  .chat-timeout-note.show{display:block;}
  .chat-input-row.is-muted input{opacity:.55;}
  .chat-input-row.is-muted button{opacity:.45; cursor:not-allowed;}
  .admin-edit-avatar-grid{max-height:290px; overflow-y:auto; padding-right:3px;}
  @media(max-width:700px){
    .manage-player-row{grid-template-columns:1fr;}
    .manage-player-actions{justify-content:flex-start;}
  }
  .badge-count{
    background:var(--red);
    color:#fff;
    font-size:10px;
    font-weight:700;
    border-radius:999px;
    padding:1px 6px;
    margin-left:4px;
  }

  footer{
    text-align:center;
    padding:50px 24px 60px;
    color:var(--muted);
    font-size:13px;
    border-top:1px solid var(--line);
  }
  footer .mark{
    font-family:'Teko', sans-serif;
    font-size:22px;
    letter-spacing:0.06em;
    color:var(--text);
    margin-bottom:8px;
  }
  footer .footer-tagline{
    margin:0;
    color:var(--muted);
    font-size:13px;
  }
  /* Scrolling team ticker, replacing the old plain string that just wrapped
     into a chaotic multi-line block once enough teams had registered. Fixed
     single-line height, fade-masked edges, team list scrolls through
     continuously — same idea as a broadcast lower-third. */
  footer .footer-ticker{
    margin:14px auto 0;
    max-width:640px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  footer .footer-ticker-track{
    display:inline-flex;
    white-space:nowrap;
    animation:footerTickerScroll 32s linear infinite;
  }
  footer .footer-ticker-track span{
    padding-right:8px;
    font-size:12.5px;
    color:var(--muted);
  }
  footer .footer-ticker:hover .footer-ticker-track{
    animation-play-state:paused;
  }
  @keyframes footerTickerScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    footer .footer-ticker-track{
      animation:none;
    }
    footer .footer-ticker{
      overflow-x:auto;
      -webkit-mask-image:none;
      mask-image:none;
    }
  }
  footer .discord-card{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 18px 10px 10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:100px;
    text-decoration:none;
    transition:border-color 0.2s ease, transform 0.2s ease;
  }
  footer .discord-card:hover{
    border-color:var(--gold);
    transform:translateY(-1px);
  }
  footer .discord-card img{
    width:40px;
    height:40px;
    border-radius:50%;
    display:block;
  }
  footer .discord-card .discord-text{
    text-align:left;
  }
  footer .discord-card .discord-name{
    font-family:'Teko', sans-serif;
    font-size:18px;
    letter-spacing:0.04em;
    color:var(--text);
    line-height:1.2;
  }
  footer .discord-card .discord-sub{
    font-size:12px;
    color:var(--gold);
  }
  footer .discord-widget-block{
    max-width:350px;
    margin:26px auto 0;
    padding:16px 16px 4px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow-card);
  }
  footer .discord-widget-head{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:6px;
  }
  footer .discord-widget-head svg{
    width:20px;
    height:20px;
    fill:#5865F2;
    flex-shrink:0;
  }
  footer .discord-widget-head h3{
    font-family:'Teko', sans-serif;
    font-size:20px;
    letter-spacing:0.04em;
    color:var(--text);
    font-weight:600;
  }
  footer .discord-widget-sub{
    font-size:12px;
    color:var(--muted);
    margin-bottom:12px;
  }
  footer .discord-widget-block iframe{
    display:block;
    width:100%;
    max-width:350px;
    height:400px;
    margin:0 auto;
    border-radius:10px;
    border:1px solid var(--line);
  }
  @media(max-width:420px){
    footer .discord-widget-block{
      max-width:calc(100% - 32px);
    }
    footer .discord-widget-block iframe{
      width:100%;
    }
  }

  footer .footer-cards{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:22px;
  }
  footer .donate-card{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 18px 10px 10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:100px;
    text-decoration:none;
    transition:border-color 0.2s ease, transform 0.2s ease;
  }
  footer .donate-card:hover{
    border-color:var(--gold);
    transform:translateY(-1px);
  }
  footer .donate-card img{
    width:40px;
    height:40px;
    border-radius:50%;
    display:block;
    background:#fff;
    padding:6px;
    box-sizing:border-box;
  }
  footer .donate-card .donate-text{
    text-align:left;
  }
  footer .donate-card .donate-name{
    font-family:'Teko', sans-serif;
    font-size:18px;
    letter-spacing:0.04em;
    color:var(--text);
    line-height:1.2;
  }
  footer .donate-card .donate-sub{
    font-size:12px;
    color:var(--gold);
  }

  @media(max-width:640px){
    .match{grid-template-columns:1fr auto auto auto 1fr; padding:10px 10px;}
    .match .name{font-size:13px;}
    .section-head{flex-wrap:wrap;}
    .section-head p{text-align:left; margin-left:0;}
    .player-bar{max-width:100%; justify-content:center;}
  }

  /* ---------- FRIENDS / PRIVATE CHAT ---------- */

  .friends-modal{max-width:520px; max-height:82vh; overflow-y:auto;}
  .friends-add-row{display:flex; gap:8px; margin:4px 0 6px;}
  .friends-add-row input{flex:1; min-width:0;}
  .friends-section{margin-top:18px;}
  .friends-section-title{
    font-family:'Teko', sans-serif;
    font-size:15px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:8px;
  }
  .friends-list .request-row:last-child{margin-bottom:0;}
  .friend-row .who span{display:block; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .friend-row .online-dot{
    display:inline-block; width:7px; height:7px; border-radius:50%;
    background:var(--pitch); box-shadow:0 0 5px var(--pitch); margin-left:4px;
    vertical-align:middle;
  }
  .friend-row .online-dot.status-idle{background:var(--gold); box-shadow:0 0 5px var(--gold);}
  .friend-row .online-dot.status-dnd{background:var(--red); box-shadow:0 0 5px var(--red); animation:none;}
  .friend-unread-badge{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px;
    border-radius:999px; background:var(--red); color:#fff;
    font-size:11px; font-weight:800;
  }

  .private-chat-messages{max-height:320px; min-height:180px;}
  .chat-msg.chat-msg-mine .chat-name{color:var(--pitch);}

  /* ---------- PRIVATE VOICE CALL ---------- */
  .private-chat-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-bottom:16px;
  }
  .private-chat-header h3{margin-bottom:0;}
  .call-btn{
    flex:0 0 auto;
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--pitch);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s, border-color 0.15s, transform 0.1s;
  }
  .call-btn svg{width:17px; height:17px;}
  .call-btn:hover{background:rgba(15,122,74,0.18); border-color:var(--pitch);}
  .call-btn:active{transform:scale(0.94);}
  .call-btn:disabled{opacity:0.4; cursor:not-allowed;}

  .call-modal{text-align:center;}
  .call-avatar-pulse{
    width:72px; height:72px;
    margin:0 auto 14px;
    border-radius:50%;
    background:rgba(15,122,74,0.18);
    border:1px solid rgba(15,122,74,0.4);
    color:var(--pitch);
    display:flex; align-items:center; justify-content:center;
    animation:callPulse 1.4s ease-in-out infinite;
  }
  .call-avatar-pulse svg{width:30px; height:30px;}
  @keyframes callPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(15,122,74,0.45);}
    50%{box-shadow:0 0 0 12px rgba(15,122,74,0);}
  }
  .call-subtitle{color:var(--muted); font-size:13px; margin-bottom:22px;}

  .call-actions{display:flex; justify-content:center; align-items:flex-start; gap:36px;}
  .call-circle-btn{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:none; border:none; padding:0; cursor:pointer;
    font-weight:600; color:var(--muted); font-size:12px;
  }
  .call-circle-btn svg{
    width:26px; height:26px;
  }
  .call-circle-btn::before{
    content:'';
    width:60px; height:60px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-panel);
  }
  /* The icon needs to render inside the circle, so we lay it out with a
     wrapping span via flex on the button itself rather than ::before alone. */
  .call-circle-btn{position:relative;}
  .call-circle-btn > svg{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:60px; height:60px; padding:17px; box-sizing:border-box;
    border-radius:50%;
    transition:transform 0.12s, filter 0.12s;
  }
  .call-circle-btn .call-circle-label{margin-top:68px; display:block;}
  .call-circle-btn:hover > svg{filter:brightness(1.08);}
  .call-circle-btn:active > svg{transform:translateX(-50%) scale(0.92);}
  .decline-call-btn > svg{background:var(--red); color:#fff; box-shadow:0 6px 18px rgba(193,39,45,0.4);}
  .accept-call-btn > svg{background:var(--pitch); color:#fff; box-shadow:0 6px 18px rgba(15,122,74,0.4);}

  .in-call-bar{
    position:fixed;
    left:50%; bottom:18px; transform:translateX(-50%);
    z-index:150;
    display:flex; align-items:center; gap:10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 10px 8px 16px;
    box-shadow:var(--shadow-panel);
    font-size:13px;
  }
  .in-call-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--pitch);
    animation:onlinePulse 1.3s ease-in-out infinite;
  }
  .in-call-peer{font-weight:700; color:var(--text);}
  .in-call-status{color:var(--muted);}
  .in-call-btn{
    width:34px; height:34px; border-radius:50%;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--text);
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s, border-color 0.15s, transform 0.1s;
  }
  .in-call-btn svg{width:16px; height:16px;}
  .in-call-btn:active{transform:scale(0.92);}
  .in-call-btn.is-muted{background:rgba(193,39,45,0.18); border-color:var(--red); color:var(--red);}
  .in-call-btn.hangup-btn{background:var(--red); border-color:var(--red); color:#fff;}
  .in-call-btn.hangup-btn svg{transform:translateY(0.5px);}
  @media (max-width:480px){
    .in-call-bar{left:12px; right:12px; transform:none; justify-content:space-between;}
  }

  .friend-toast-container{
    position:fixed;
    top:16px;
    right:16px;
    z-index:1000;
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:300px;
  }
  .friend-toast{
    background:var(--panel);
    border:1px solid var(--gold);
    border-left:4px solid var(--gold);
    color:var(--text);
    padding:10px 14px;
    border-radius:8px;
    font-size:12px;
    line-height:1.4;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    opacity:1;
    transition:opacity 0.3s ease, transform 0.3s ease;
  }
  .friend-toast.clickable{cursor:pointer;}
  .friend-toast.clickable:hover{border-left-color:#e6c453;}
  .friend-toast.hide{opacity:0; transform:translateX(8px);}
  .friend-toast-accept{border-left-color:var(--pitch);}
  .friend-toast-request{border-left-color:var(--gold);}
  .friend-toast-message{border-left-color:var(--pitch);}

  @media (max-width: 780px){
    .friends-modal{max-width:100%;}
    .friend-toast-container{left:12px; right:12px; max-width:none;}
  }

  /* ---------- PLAYER PROFILE + HALL OF CHAMPIONS ---------- */
  [data-player]{cursor:pointer;}
  .card .badge[data-player]:hover,
  .card .player[data-player]:hover{color:var(--gold);}
  .pname[data-player]:hover,
  .match .name[data-player]:hover,
  .trophy-champion-name[data-player]:hover,
  .trophy-table .pname[data-player]:hover{color:var(--gold); text-decoration:underline;}

  .profile-modal{
    max-width:440px; text-align:left; max-height:82vh; overflow-y:auto; position:relative;
    padding:0; border-radius:16px; background:var(--panel);
  }
  .profile-close{
    position:absolute; top:14px; right:14px; z-index:2;
    width:30px; height:30px; border-radius:50%;
    background:rgba(0,0,0,0.35);
    border:1px solid var(--line); color:var(--text);
    font-size:18px; line-height:1; cursor:pointer; padding:0;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s ease, transform 0.15s ease, color 0.15s ease;
  }
  .profile-close:hover{background:rgba(0,0,0,0.55); transform:scale(1.06); color:var(--gold);}

  /* ---- Hero header: gradient banner (tinted with the player's own team
     color via the --accent custom property) behind a bigger glowing
     avatar, name, level chip and meta chips ---- */
  .profile-head{
    position:relative;
    display:flex; align-items:center; gap:16px;
    padding:26px 22px 22px;
    background:
      radial-gradient(120% 140% at 15% 0%, color-mix(in srgb, var(--accent, var(--gold)) 30%, transparent), transparent 60%),
      linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--gold)) 16%, var(--panel-2)), var(--panel) 75%);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .profile-head::after{
    content:"";
    position:absolute; inset:0;
    background-image:radial-gradient(circle, color-mix(in srgb, var(--accent, var(--gold)) 55%, transparent) 1px, transparent 1.5px);
    background-size:22px 22px;
    opacity:0.12;
    pointer-events:none;
  }
  .profile-badge{
    width:80px; height:80px; border-radius:50%;
    background:var(--accent, var(--panel-2));
    display:flex; align-items:center; justify-content:center;
    font-family:'Teko', sans-serif; font-size:30px; font-weight:600;
    overflow:hidden; flex-shrink:0; cursor:default;
    border:3px solid var(--accent, var(--line));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent),
      0 6px 18px -6px rgba(0,0,0,0.6);
  }
  .profile-badge img{width:100%; height:100%; object-fit:cover;}
  /* Wraps the badge so the "edit avatar" pencil (own-profile only) can be
     pinned to its corner without disturbing the badge's own sizing. */
  .profile-badge-wrap{position:relative; flex-shrink:0; z-index:1;}
  .profile-badge-edit{
    position:absolute; bottom:-2px; right:-2px;
    width:26px; height:26px; border-radius:50%;
    background:var(--panel);
    border:2px solid var(--accent, var(--line));
    color:var(--accent, var(--text));
    display:flex; align-items:center; justify-content:center;
    font-size:12px; line-height:1; cursor:pointer; padding:0;
    transition:transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .profile-badge-edit:hover{
    transform:scale(1.12);
    background:var(--accent, var(--panel-2));
    color:var(--panel);
  }
  .profile-head-info{position:relative; z-index:1; min-width:0;}
  .profile-name-row{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .profile-name{
    font-family:'Teko', sans-serif; font-size:28px; text-transform:uppercase;
    letter-spacing:0.03em; line-height:1.05;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
  }
  .profile-level-chip{
    flex-shrink:0;
    font-family:'Teko', sans-serif; font-size:12.5px; letter-spacing:0.04em;
    color:var(--panel); background:var(--accent, var(--gold));
    padding:2px 9px; border-radius:999px; font-weight:700;
  }
  .profile-meta-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px;}
  .profile-meta-chip{
    font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px;
    background:rgba(0,0,0,0.25); border:1px solid var(--line); color:var(--muted);
  }
  .profile-titles-chip{color:var(--gold); border-color:color-mix(in srgb, var(--gold) 40%, var(--line));}
  .profile-share-btn{
    margin-top:10px; padding:5px 12px; border-radius:999px;
    background:rgba(0,0,0,0.25); border:1px solid var(--line);
    color:var(--muted); font-size:11.5px; font-weight:600;
    cursor:pointer; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .profile-share-btn:hover{
    background:var(--accent, var(--panel-2)); color:var(--panel); border-color:var(--accent, var(--line));
  }
  .profile-head-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
  .profile-head-actions .profile-share-btn{margin-top:0;}
  .profile-friend-btn.is-none{color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, var(--line));}
  .profile-friend-btn.is-none:hover{background:var(--gold); color:var(--panel); border-color:var(--gold);}
  .profile-friend-btn.is-friends{color:var(--pitch); border-color:color-mix(in srgb, var(--pitch) 45%, var(--line));}
  .profile-friend-btn.is-friends:hover{background:var(--red); color:#fff; border-color:var(--red);}
  .profile-friend-btn.is-incoming{color:var(--panel); background:var(--gold); border-color:var(--gold); font-weight:700;}
  .profile-friend-btn.is-incoming:hover{background:#e6c453; border-color:#e6c453;}
  .profile-friend-btn.is-outgoing{opacity:0.75; cursor:pointer;}
  .profile-friend-btn:disabled{opacity:0.5; cursor:default;}

  /* ---- Settings tab: profile color picker ---- */
  .color-swatch-grid{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:12px;}
  .color-swatch-btn{
    width:30px; height:30px; border-radius:9px; border:2px solid transparent;
    cursor:pointer; padding:0; position:relative;
    box-shadow:0 2px 6px -2px rgba(0,0,0,0.5);
    transition:transform 0.12s ease, border-color 0.12s ease;
  }
  .color-swatch-btn:hover{transform:translateY(-2px);}
  .color-swatch-btn.selected{border-color:var(--text);}
  .color-swatch-btn.selected::after{
    content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,0.6);
  }
  .color-custom-row{display:flex; align-items:center; gap:10px;}
  .color-custom-row label{font-size:13px; color:var(--muted);}
  .color-custom-row input[type="color"]{
    width:40px; height:30px; border-radius:8px; border:1px solid var(--line);
    background:none; cursor:pointer; padding:2px;
  }

  /* ---- Body ---- */
  .profile-body{padding:20px 22px 24px;}

  .xp-bar-wrap{margin:0 0 20px;}
  .xp-bar-label{
    display:flex; justify-content:space-between; align-items:baseline;
    margin-bottom:6px;
  }
  .xp-bar-label span:first-child{
    font-family:'Teko', sans-serif; font-size:16px; letter-spacing:0.02em;
    color:var(--gold); font-weight:700;
  }
  .xp-bar-label span:last-child{font-size:11px; color:var(--muted);}
  .xp-bar-track{
    height:10px; border-radius:6px;
    background:var(--panel-2); border:1px solid var(--line);
    overflow:hidden;
  }
  .xp-bar-fill{
    height:100%; border-radius:6px 0 0 6px;
    background:linear-gradient(90deg, var(--pitch), var(--gold));
    box-shadow:0 0 10px color-mix(in srgb, var(--gold) 50%, transparent);
    transition:width 0.4s ease;
  }

  /* ---- Tabs: pill segmented control (same .profile-tab-btn / data-tab /
     .active hooks main.js already toggles — purely a visual swap from the
     old underline tabs) ---- */
  .profile-tabs{
    display:flex; gap:2px; margin-bottom:18px;
    background:var(--panel-2); border:1px solid var(--line);
    border-radius:999px; padding:4px;
  }
  .profile-tab-btn{
    flex:1; min-width:0; background:none; border:none; cursor:pointer;
    font-family:'Teko', sans-serif; font-size:11.5px; letter-spacing:0;
    text-transform:uppercase; color:var(--muted);
    padding:8px 1px; border-radius:999px;
    display:flex; align-items:center; justify-content:center; gap:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color 0.15s ease, background 0.15s ease;
  }
  .profile-tab-btn + .profile-tab-btn{margin-left:0;}
  .profile-tab-btn:hover{color:var(--text);}
  .profile-tab-btn.active{color:var(--panel); background:var(--gold); font-weight:700;}
  .profile-tab-badge{
    background:var(--red, #c0392b); color:#fff;
    border-radius:999px; min-width:18px; height:18px; padding:0 5px;
    font-family:inherit; font-size:10.5px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center; line-height:1;
  }
  .profile-tab-btn.active .profile-tab-badge{background:var(--panel); color:var(--gold);}

  .profile-badge-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
    gap:10px; margin-bottom:6px;
  }
  .profile-badge-item{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:4px; padding:14px 8px; border-radius:12px;
    background:var(--panel-2); border:1px solid var(--line);
    box-shadow:var(--shadow-card);
    transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .profile-badge-item.earned{
    border-color:var(--gold);
    background:linear-gradient(160deg, color-mix(in srgb, var(--gold) 16%, var(--panel-2)), var(--panel-2));
    box-shadow:0 0 14px -6px color-mix(in srgb, var(--gold) 60%, transparent), var(--shadow-card);
  }
  .profile-badge-item.earned:hover{transform:translateY(-2px);}
  .profile-badge-item.locked{opacity:0.5;}
  .profile-badge-icon{font-size:26px; line-height:1;}
  .profile-badge-label{font-size:12.5px; font-weight:700;}
  .profile-badge-sub{font-size:11px; color:var(--muted);}
  .profile-messages-empty{color:var(--muted); font-size:13px; padding:6px 2px;}
  .profile-msg-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 10px; border-radius:10px; border:1px solid transparent;
    cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease;
  }
  .profile-msg-row + .profile-msg-row{margin-top:4px;}
  .profile-msg-row:hover{background:var(--panel-2); border-color:var(--line);}
  .profile-msg-who{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .profile-msg-who b{font-size:14px; font-weight:600;}
  .profile-msg-who span{
    color:var(--muted); font-size:12px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px;
  }
  .profile-section-title{
    font-family:'Teko', sans-serif; font-size:15px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--muted);
    margin:20px 0 10px; display:flex; align-items:center; gap:8px;
  }
  .profile-section-title::after{content:""; flex:1; height:1px; background:var(--line);}
  .profile-tab-panel > .profile-section-title:first-child{margin-top:0;}
  .profile-stat-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  }
  .profile-stat-grid div{
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
    text-align:center; padding:10px 4px;
    box-shadow:var(--shadow-card);
    transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .profile-stat-grid div:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--gold) 40%, var(--line)); box-shadow:var(--shadow-card-hover);}
  .profile-stat-grid b{display:block; font-family:'Teko', sans-serif; font-size:21px; color:var(--text);}
  .profile-stat-grid span{display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px;}
  .profile-h2h-table{width:100%; border-collapse:collapse; font-size:13px;}
  .profile-h2h-table th{
    text-align:left; color:var(--muted); font-weight:500; font-size:11px;
    text-transform:uppercase; letter-spacing:0.04em; padding:6px;
    border-bottom:1px solid var(--line);
  }
  .profile-h2h-table td{padding:8px 6px; border-bottom:1px solid var(--line);}
  .profile-h2h-table tr:last-child td{border-bottom:none;}
  .profile-h2h-table tr:hover td{background:var(--panel-2);}

  .trophy-card{
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:18px 20px; margin-bottom:14px;
  }
  .trophy-card-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
  .trophy-ico{font-size:26px;}
  .trophy-delete-btn{
    margin-left:auto; align-self:flex-start;
    background:transparent; border:1px solid var(--line); border-radius:6px;
    color:var(--muted); font-size:13px; line-height:1; padding:6px 8px;
    cursor:pointer;
  }
  .trophy-delete-btn:hover{border-color:var(--red); color:var(--red);}
  .trophy-season-name{font-family:'Teko', sans-serif; font-size:22px; letter-spacing:0.03em; text-transform:uppercase;}
  .trophy-date{color:var(--muted); font-size:12px;}
  .trophy-champion{
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
    padding:10px 14px; margin-bottom:10px;
  }
  .trophy-champion-label{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--gold);}
  .trophy-champion-name{font-family:'Teko', sans-serif; font-size:20px; font-weight:600;}
  .trophy-champion-team{color:var(--muted); font-size:12.5px;}
  .trophy-meta{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:8px;}
  .trophy-meta b{color:var(--text); font-weight:600;}
  .trophy-table-details summary{cursor:pointer; font-size:12.5px; color:var(--muted); user-select:none;}
  .trophy-table-details summary:hover{color:var(--text);}
  .trophy-table{width:100%; border-collapse:collapse; margin-top:8px; font-size:13px;}
  .trophy-table td{padding:5px 6px; border-bottom:1px solid var(--line);}
  .trophy-table tr:last-child td{border-bottom:none;}
  .trophy-table .rk{color:var(--muted); width:20px;}

  @media (max-width: 480px){
    .profile-stat-grid{grid-template-columns:repeat(2, 1fr);}
    .profile-head{padding:22px 16px 18px; gap:12px;}
    .profile-badge{width:66px; height:66px; font-size:24px;}
    .profile-name{font-size:23px; max-width:150px;}
    .profile-body{padding:16px 16px 20px;}
    .profile-tab-btn{font-size:10.5px; padding:8px 1px;}
  }