:root {
    --gold:#F5C842; --gold-dark:#C9991A; --green:#1A7A3A; --green-light:#23A352;
    --dark:#0A0F0D; --card:#111916; --border:rgba(245,200,66,0.18);
    --text:#E8F0EA; --muted:#7A9A80;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:var(--dark);color:var(--text);font-family:'Barlow',sans-serif;min-height:100vh;overflow-x:hidden;}
  body::before{content:'';position:fixed;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(255,255,255,0.012) 60px,rgba(255,255,255,0.012) 61px),repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(255,255,255,0.012) 60px,rgba(255,255,255,0.012) 61px);pointer-events:none;z-index:0;}

  /* SETUP */
  #setup-screen{position:fixed;inset:0;background:var(--dark);z-index:100;display:none;align-items:center;justify-content:center;padding:20px;}
  .setup-box{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:40px;max-width:520px;width:100%;text-align:center;}
  .setup-box h2{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--gold);letter-spacing:3px;margin-bottom:8px;}
  .setup-box p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:20px;}
  .setup-steps{text-align:left;margin:20px 0;}
  .step{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
  .step-num{background:var(--gold);color:var(--dark);font-family:'Bebas Neue',sans-serif;font-size:18px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .step-text{font-size:13px;color:var(--text);line-height:1.6;}
  .step-text strong{color:var(--gold);}
  .step-text code{background:rgba(245,200,66,0.1);color:var(--gold);padding:1px 6px;border-radius:3px;font-size:12px;}
  .url-input-wrap{display:flex;gap:8px;margin-top:20px;}

  /* PLAYER LOGIN SCREEN */
  #login-screen{position:fixed;inset:0;background:var(--dark);z-index:90;display:none;align-items:center;justify-content:center;padding:20px;}
  .login-box{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:48px 40px;max-width:420px;width:100%;text-align:center;}
  .login-box h2{font-family:'Bebas Neue',sans-serif;font-size:36px;color:var(--gold);letter-spacing:3px;margin-bottom:8px;}
  .login-box p{color:var(--muted);font-size:14px;margin-bottom:28px;line-height:1.6;}
  .login-id-input{text-align:center;font-size:18px;letter-spacing:3px;font-weight:700;}
  .login-or{color:var(--muted);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin:16px 0;}
  .player-id-badge{display:inline-block;background:rgba(245,200,66,0.1);border:1px solid var(--border);border-radius:4px;padding:6px 14px;font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--gold);letter-spacing:2px;margin-top:4px;}

  /* HEADER */
  header{position:relative;text-align:center;padding:48px 24px 32px;overflow:hidden;z-index:1;}
  header::before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:500px;height:500px;background:radial-gradient(circle,rgba(245,200,66,0.12) 0%,transparent 70%);pointer-events:none;}
  .trophy-icon{font-size:48px;display:block;margin-bottom:10px;animation:float 3s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,8vw,80px);letter-spacing:4px;line-height:0.95;color:var(--gold);text-shadow:0 0 40px rgba(245,200,66,0.3);}
  h1 span{color:var(--text);}
  .subtitle{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:5px;text-transform:uppercase;color:var(--muted);margin-top:10px;}
  .sync-bar{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(35,163,82,0.1);border:1px solid rgba(35,163,82,0.3);border-radius:20px;padding:5px 16px;font-size:12px;color:var(--green-light);font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;cursor:pointer;}
  .sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green-light);animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}

  /* PLAYER BAR */
  .player-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
  .player-bar-name{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;color:var(--text);background:rgba(245,200,66,0.08);border:1px solid var(--border);border-radius:16px;padding:4px 14px;}
  .player-bar-switch{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
  .player-bar-switch:hover{color:var(--gold);}

  /* HERO BANNER */
  .hero-header{position:relative;text-align:center;padding:0 24px 24px;overflow:hidden;z-index:1;}
  .main-banner{width:100%;max-width:1400px;height:auto;display:block;margin:0 auto 14px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);}

  /* COMMUNITY ODDS */
  .community-box{grid-column:1/-1;background:rgba(245,200,66,0.045);border:1px solid var(--border);border-radius:6px;padding:14px;margin-top:4px;}
  .community-title{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .community-count{color:var(--muted);font-size:11px;letter-spacing:1px;}
  .community-row{display:grid;grid-template-columns:105px 1fr 58px 58px;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;}
  .community-row:last-child{margin-bottom:0;}
  .community-label{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .community-bar{height:8px;background:rgba(255,255,255,0.08);border-radius:999px;overflow:hidden;}
  .community-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:999px;}
  .community-pct{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--gold);text-align:right;}
  .community-odd{font-family:'Barlow Condensed',sans-serif;font-size:12px;color:var(--muted);text-align:right;letter-spacing:1px;}
  .community-odd strong{color:var(--text);}
  .odds-grid{display:grid;gap:14px;}
  .odds-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:18px;}
  .odds-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:14px;}
  .odds-match-title{font-weight:800;font-size:16px;}
  .odds-meta{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
  .popular-score{margin-top:12px;font-size:13px;color:var(--muted);}
  .popular-score strong{color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1px;}

  .market-config{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:18px;}
  .market-config-row{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:10px;align-items:end;}
  .market-odds-row{display:grid;grid-template-columns:1fr 70px 90px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
  .market-odds-row:last-child{border-bottom:none;}
  .market-name{font-weight:700;font-size:14px;}
  .market-price{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--gold);text-align:right;}
  .market-implied{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--muted);text-align:right;}
  .value-pill{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 8px;border-radius:3px;margin-left:8px;background:rgba(245,200,66,.12);color:var(--gold);border:1px solid var(--border);}
  .market-note{font-size:11px;color:var(--muted);margin-top:4px;}

  .compact-market-config{margin-bottom:22px;}
  .inline-market-box{border-top:1px solid var(--border);background:rgba(255,255,255,0.025);padding:12px 20px;}
  .inline-market-title{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
  .inline-market-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .inline-market-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.05);border-radius:4px;padding:9px 10px;}
  .inline-market-name{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .inline-market-price{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--gold);line-height:1;margin-top:2px;}
  .inline-market-extra{font-size:11px;color:var(--muted);margin-top:2px;}
  .inline-market-empty{border-top:1px solid var(--border);padding:10px 20px;color:var(--muted);font-size:12px;background:rgba(255,255,255,0.015);}
  @media(max-width:700px){.market-config-row{grid-template-columns:1fr}.market-odds-row{grid-template-columns:1fr auto auto}.inline-market-grid{grid-template-columns:1fr}}



  /* DASHBOARD + ACHIEVEMENTS */
  .dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
  .dash-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:18px;min-height:100px;}
  .dash-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
  .dash-value{font-family:'Bebas Neue',sans-serif;font-size:36px;line-height:1;color:var(--gold);}
  .dash-sub{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.4;}
  .dashboard-panel{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:22px;margin-bottom:18px;}
  .dashboard-panel h3{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;color:var(--gold);margin-bottom:14px;}
  .next-match-box{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center;background:rgba(245,200,66,0.04);border:1px solid var(--border);border-radius:6px;padding:18px;}
  .next-team{font-weight:800;font-size:17px;}
  .next-vs{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--gold);}
  .countdown-big{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--gold);letter-spacing:2px;margin-top:12px;text-align:center;}
  .missing-list{display:grid;gap:8px;}
  .missing-item{display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);border-radius:5px;padding:10px 12px;font-size:13px;}
  .badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
  .badge-card{background:rgba(255,255,255,0.035);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:16px;display:flex;gap:12px;align-items:flex-start;}
  .badge-card.unlocked{border-color:rgba(245,200,66,0.35);background:rgba(245,200,66,0.065);}
  .badge-icon{font-size:28px;line-height:1;}
  .badge-name{font-weight:800;color:var(--text);font-size:14px;}
  .badge-desc{font-size:12px;color:var(--muted);line-height:1.4;margin-top:4px;}
  .badge-status{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-top:8px;}
  @media(max-width:800px){
    .dashboard-grid{grid-template-columns:repeat(2,1fr);}
    .badges-grid{grid-template-columns:1fr;}
  }
  @media(max-width:520px){
    .dashboard-grid{grid-template-columns:1fr;}
    .next-match-box{grid-template-columns:1fr;}
  }



  /* MVP, HALL OF FAME + SHARE CARD */
  .mvp-card{background:linear-gradient(135deg,rgba(245,200,66,.16),rgba(35,163,82,.08));border:1px solid rgba(245,200,66,.35);border-radius:10px;padding:22px;margin-bottom:18px;text-align:center;}
  .mvp-kicker{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
  .mvp-title{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:2px;color:var(--gold);line-height:1;}
  .mvp-player{font-weight:800;font-size:20px;margin-top:10px;}
  .mvp-points{font-family:'Bebas Neue',sans-serif;font-size:42px;color:var(--gold);line-height:1;margin-top:6px;}
  .hall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
  .hall-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px;min-height:130px;}
  .hall-icon{font-size:30px;margin-bottom:8px;}
  .hall-title{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
  .hall-winner{font-weight:800;font-size:18px;color:var(--text);}
  .hall-value{font-family:'Bebas Neue',sans-serif;font-size:34px;color:var(--gold);line-height:1;margin-top:6px;}
  .hall-list{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
  .hall-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);}
  .hall-row:last-child{border-bottom:none;}
  .share-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
  .share-preview-wrap{display:none;justify-content:center;margin-top:18px;}
  .share-preview-wrap.show{display:flex;}
  #share-card-canvas{max-width:100%;border-radius:14px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.35);}
  @media(max-width:800px){.hall-grid{grid-template-columns:1fr}.hall-row{grid-template-columns:36px 1fr auto}}


  /* FINAL VISUAL UPGRADE */
  body::after{
    content:'⚽ 🏆 ⭐ ⚽ ⭐ 🏆';
    position:fixed;
    inset:auto -10% 4% -10%;
    font-size:76px;
    letter-spacing:58px;
    opacity:.025;
    transform:rotate(-8deg);
    pointer-events:none;
    z-index:0;
    white-space:nowrap;
  }

  .setup-box,.login-box,.dash-card,.dashboard-panel,.admin-card,.rules-card,.legend-item,.match-card,.prediction-card,.my-pred-form,.odds-card,.hall-card,.hall-list{
    background:rgba(17,25,22,.72) !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 12px 34px rgba(0,0,0,.22);
  }

  .hero-summary{
    max-width:1100px;
    margin:0 auto 22px;
    padding:18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(17,25,22,.78));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    display:grid;
    grid-template-columns:1.2fr repeat(3,1fr);
    gap:12px;
    text-align:left;
    position:relative;
    z-index:1;
  }
  .hero-summary-title{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:2px;color:var(--gold);line-height:1;}
  .hero-summary-sub{font-size:12px;color:var(--muted);margin-top:5px;}
  .hero-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.055);border-radius:10px;padding:12px;text-align:center;}
  .hero-stat-value{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--gold);line-height:1;}
  .hero-stat-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px;}

  .player-avatar{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(245,200,66,.22),rgba(35,163,82,.18));border:1px solid rgba(245,200,66,.28);font-family:'Barlow Condensed',sans-serif;font-weight:800;color:var(--gold);margin-right:9px;vertical-align:middle;}
  .player-status-dot{width:8px;height:8px;border-radius:50%;background:var(--green-light);box-shadow:0 0 12px rgba(35,163,82,.8);display:inline-block;margin-right:8px;}

  .podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;margin-bottom:24px;}
  .podium-card{border:1px solid var(--border);background:rgba(17,25,22,.72);border-radius:12px;padding:16px 10px;text-align:center;min-height:120px;}
  .podium-card.first{min-height:155px;border-color:rgba(245,200,66,.48);background:linear-gradient(135deg,rgba(245,200,66,.16),rgba(17,25,22,.72));}
  .podium-medal{font-size:32px;line-height:1;margin-bottom:8px;}
  .podium-name{font-weight:800;font-size:15px;}
  .podium-points{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:30px;line-height:1;margin-top:6px;}

  .team-visual{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;min-width:0;}
  .team-flag{font-size:40px;line-height:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));}
  .team-name{font-weight:800;font-size:16px;text-align:center;}
  .team-watermark{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:86px;opacity:.05;pointer-events:none;}
  .match-card.visual-match{grid-template-columns:1fr auto 1fr;padding:22px;}

  .cinema-countdown{display:flex;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap;}
  .cinema-unit{min-width:84px;background:rgba(255,255,255,.045);border:1px solid rgba(245,200,66,.20);border-radius:10px;padding:10px 12px;text-align:center;}
  .cinema-num{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:42px;line-height:1;}
  .cinema-label{font-family:'Barlow Condensed',sans-serif;color:var(--muted);font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-top:4px;}

  .mvp-card.mvp-hero{padding:34px 22px;background:linear-gradient(135deg,rgba(245,200,66,.28),rgba(245,200,66,.08),rgba(35,163,82,.10)) !important;border-color:rgba(245,200,66,.52);box-shadow:0 18px 50px rgba(245,200,66,.10);}
  .mvp-card.mvp-hero .mvp-title{font-size:44px;}
  .mvp-card.mvp-hero .mvp-player{font-size:24px;}
  .mvp-card.mvp-hero .mvp-points{font-size:58px;}

  .points-pop{display:inline-block;animation:pointsPop 1.8s ease-in-out infinite;color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:18px;margin-left:8px;}
  @keyframes pointsPop{0%,100%{transform:translateY(0);opacity:.55}45%{transform:translateY(-9px);opacity:1}}

  .activity-feed{display:grid;gap:10px;}
  .feed-item{display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--text);}
  .feed-icon{font-size:18px;}
  .feed-muted{color:var(--muted);font-size:12px;margin-top:2px;}

  @media(max-width:800px){
    .hero-summary{grid-template-columns:1fr 1fr;margin-left:20px;margin-right:20px;}
    .hero-summary-main{grid-column:1/-1;text-align:center;}
    .podium{grid-template-columns:1fr;}
    .podium-card.first{order:-1;}
  }
  @media(max-width:520px){
    .hero-summary{grid-template-columns:1fr;}
    .team-flag{font-size:46px;}
    .team-watermark{font-size:96px;}
    .cinema-unit{min-width:72px;}
    .cinema-num{font-size:36px;}
  }


  /* REFINED MATCH FLAGS: subtle emoji watermark behind team name */
  .team-visual{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:row !important;
    min-height:74px;
    padding:12px 14px;
    border-radius:10px;
    background:rgba(255,255,255,.025);
    overflow:hidden;
  }
  .team-visual .team-flag{display:none !important;}
  .team-visual .team-watermark{
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    font-size:118px;
    opacity:.075;
    pointer-events:none;
    filter:blur(.2px);
  }
  .team-visual .team-name{
    position:relative;
    z-index:2;
    font-family:'Barlow Condensed',sans-serif;
    font-size:20px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text);
    text-shadow:0 2px 12px rgba(0,0,0,.55);
  }
  .match-card.visual-match{
    grid-template-columns:1fr auto 1fr;
    align-items:center;
  }
  @media(max-width:600px){
    .team-visual{min-height:86px;}
    .team-visual .team-watermark{font-size:138px;}
    .team-visual .team-name{font-size:22px;}
  }



  /* HIDDEN LEGEND ACHIEVEMENTS */
  .secret-badge-card{
    background:linear-gradient(135deg,rgba(245,200,66,.14),rgba(17,25,22,.72)) !important;
    border-color:rgba(245,200,66,.35) !important;
    position:relative;
    overflow:hidden;
  }
  .secret-badge-card::after{
    content:'LEGEND';
    position:absolute;
    top:10px;
    right:-26px;
    transform:rotate(35deg);
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    color:var(--dark);
    background:var(--gold);
    padding:3px 30px;
  }


  /* AUTOMATIC COUNTRY WATERMARKS + PLAYER VISUAL CONSISTENCY */
  .team-visual .team-watermark{opacity:.14 !important;}
  .team-mini{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    min-height:42px;
    padding:8px 12px;
    border-radius:10px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);
    overflow:hidden;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--text);
    text-align:center;
  }
  .team-mini::before{
    content:attr(data-flag);
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%,-50%);
    font-size:58px;
    opacity:.14;
    z-index:0;
  }
  .team-mini span{
    position:relative;
    z-index:1;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
  }
  .my-pred-match-name{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .vs-chip{
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    letter-spacing:2px;
    font-size:18px;
  }
  .player-name.hof-player{
    display:flex;
    align-items:center;
    gap:0;
  }


  /* STRONGER FLAG WATERMARK FIX */
  .team-visual .team-watermark{
    display:block !important;
    opacity:.22 !important;
    font-size:132px !important;
    line-height:1 !important;
    z-index:1 !important;
  }
  .team-visual .team-name{
    z-index:2 !important;
  }
  .team-mini::before{
    opacity:.22 !important;
  }


  /* SPORTS APP LEADERBOARD + MATCH STATES */
  .leaderboard-table{
    border-collapse:separate !important;
    border-spacing:0 8px !important;
  }
  .leaderboard-table thead th{
    border-bottom:none !important;
  }
  .leaderboard-table tbody tr{
    position:relative;
  }
  .leaderboard-table tbody td{
    background:rgba(17,25,22,.72);
    border-top:1px solid rgba(245,200,66,.10);
    border-bottom:1px solid rgba(245,200,66,.10);
  }
  .leaderboard-table tbody td:first-child{
    border-left:1px solid rgba(245,200,66,.10);
    border-radius:10px 0 0 10px;
  }
  .leaderboard-table tbody td:last-child{
    border-right:1px solid rgba(245,200,66,.10);
    border-radius:0 10px 10px 0;
  }
  .leaderboard-table tbody tr:hover td{
    background:rgba(245,200,66,.075) !important;
    transform:translateY(-1px);
  }
  .rank-move{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:22px;
    margin-left:8px;
    border-radius:999px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1px;
    background:rgba(35,163,82,.16);
    color:var(--green-light);
    border:1px solid rgba(35,163,82,.28);
  }
  .streak-pill{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1px;
    color:var(--gold);
    background:rgba(245,200,66,.10);
    border:1px solid rgba(245,200,66,.20);
    vertical-align:middle;
  }
  .match-card.state-open{
    border-color:rgba(35,163,82,.30) !important;
    background:linear-gradient(135deg,rgba(35,163,82,.09),rgba(17,25,22,.72)) !important;
  }
  .match-card.state-locked{
    border-color:rgba(245,200,66,.30) !important;
    background:linear-gradient(135deg,rgba(245,200,66,.08),rgba(17,25,22,.72)) !important;
  }
  .match-card.state-finished{
    border-color:rgba(122,154,128,.20) !important;
    background:linear-gradient(135deg,rgba(122,154,128,.07),rgba(17,25,22,.72)) !important;
  }
  .match-state-chip{
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    padding:3px 9px;
    border-radius:999px;
    margin-left:8px;
  }
  .match-state-chip.open{background:rgba(35,163,82,.16);color:var(--green-light);border:1px solid rgba(35,163,82,.28);}
  .match-state-chip.locked{background:rgba(245,200,66,.12);color:var(--gold);border:1px solid rgba(245,200,66,.26);}
  .match-state-chip.finished{background:rgba(122,154,128,.12);color:var(--muted);border:1px solid rgba(122,154,128,.20);}
  .team-visual .team-watermark{
    opacity:.28 !important;
    font-size:145px !important;
  }
  .team-mini::before{opacity:.26 !important;}

  /* TABS */
  .tabs{display:flex;justify-content:center;gap:4px;padding:0 24px 28px;position:relative;z-index:1;flex-wrap:wrap;}
  .tab{background:transparent;border:1px solid var(--border);color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:10px 20px;cursor:pointer;border-radius:2px;transition:all 0.2s;}
  .tab.active{background:var(--gold);color:var(--dark);border-color:var(--gold);}
  .tab:hover:not(.active){border-color:var(--gold);color:var(--gold);}

  /* SECTIONS */
  .section{display:none;max-width:900px;margin:0 auto;padding:0 20px 60px;position:relative;z-index:1;}
  .section.active{display:block;animation:fadeUp 0.3s ease;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  .section-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:3px;color:var(--gold);border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:24px;}

  /* LEADERBOARD */
  .scoring-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px;justify-content:center;}
  .legend-item{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:10px 16px;text-align:center;}
  .legend-pts{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--gold);line-height:1;}
  .legend-label{font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-top:2px;}
  .leaderboard-table{width:100%;border-collapse:collapse;}
  .leaderboard-table th{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 16px;border-bottom:1px solid var(--border);}
  .leaderboard-table td{padding:14px 16px;font-size:15px;font-weight:500;border-bottom:1px solid rgba(255,255,255,0.04);transition:background 0.15s;}
  .leaderboard-table tr:hover td{background:rgba(245,200,66,0.04);}
  .rank{font-family:'Bebas Neue',sans-serif;font-size:22px;width:48px;}
  .rank-1{color:#FFD700}.rank-2{color:#C0C0C0}.rank-3{color:#CD7F32}.rank-other{color:var(--muted)}
  .player-name{font-weight:700;font-size:16px;}
  .score-pill{background:var(--green);color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:20px;padding:4px 14px;border-radius:3px;display:inline-block;min-width:54px;text-align:center;}
  .score-pill.leader{background:var(--gold);color:var(--dark);}

  /* MATCHES */
  .match-grid{display:grid;gap:12px;}
  .match-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:20px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;transition:border-color 0.2s;}
  .match-card:hover{border-color:rgba(245,200,66,0.4);}
  .match-card.finished{opacity:0.75;}
  .team{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;}
  .team.home{justify-content:flex-end;}
  .vs-block{text-align:center;}
  .vs-score{font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--gold);letter-spacing:2px;line-height:1;}
  .match-meta{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px;}
  .match-stage-row{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);grid-column:1/-1;padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;}
  .deadline-badge{font-size:10px;letter-spacing:1px;padding:2px 8px;border-radius:2px;font-weight:700;}
  .deadline-badge.open{background:rgba(35,163,82,0.15);color:var(--green-light);}
  .deadline-badge.closed{background:rgba(255,80,80,0.12);color:#f87171;}

  /* MY PREDICTIONS */
  .my-pred-form{background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:12px;overflow:hidden;}
  .my-pred-match-header{padding:14px 20px;background:rgba(245,200,66,0.05);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
  .my-pred-match-name{font-weight:700;font-size:15px;}
  .my-pred-entry{padding:16px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .score-inputs{display:flex;align-items:center;gap:10px;}
  .score-input{width:64px;text-align:center;font-size:20px;font-family:'Bebas Neue',sans-serif;padding:8px;border:1px solid var(--border);background:rgba(255,255,255,0.05);border-radius:4px;color:var(--text);}
  .score-input:focus{border-color:var(--gold);outline:none;}
  .score-sep{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--muted);}
  .existing-pred{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1px;color:var(--muted);margin-left:auto;}
  .existing-pred strong{color:var(--gold);}

  /* PREDICTIONS VIEW */
  .predictions-grid{display:grid;gap:16px;}
  .prediction-card{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
  .prediction-header{background:rgba(245,200,66,0.06);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
  .prediction-player{font-weight:700;font-size:15px;}
  .prediction-pts{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--gold);}
  .pred-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 20px;font-size:14px;border-bottom:1px solid rgba(255,255,255,0.03);}
  .pred-row:last-child{border-bottom:none;}
  .pred-score{font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--muted);}
  .pred-score.exact{color:var(--gold);}
  .pred-score.correct{color:var(--green-light);}
  .result-badge{display:inline-block;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;padding:3px 10px;border-radius:2px;text-transform:uppercase;font-weight:700;}
  .result-badge.exact{background:rgba(245,200,66,0.2);color:var(--gold);}
  .result-badge.correct{background:rgba(35,163,82,0.2);color:var(--green-light);}
  .result-badge.wrong{background:rgba(255,80,80,0.12);color:#f87171;}
  .hidden-pred{font-size:12px;color:var(--muted);font-style:italic;padding:2px 0;}

  /* ADMIN */
  .admin-section{display:grid;gap:24px;}
  .admin-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:24px;}
  .admin-card h3{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--gold);margin-bottom:16px;}
  .form-grid{display:grid;gap:12px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px;}
  input[type="text"],input[type="number"],input[type="datetime-local"],select{background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:'Barlow',sans-serif;font-size:14px;font-weight:500;padding:10px 14px;width:100%;outline:none;transition:border-color 0.2s;}
  input:focus,select:focus{border-color:var(--gold);}
  select option{background:#1a1a1a;}
  input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(0.6);}
  .btn{font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:12px 24px;border:none;border-radius:3px;cursor:pointer;transition:all 0.2s;}
  .btn-gold{background:var(--gold);color:var(--dark);}
  .btn-gold:hover{background:#f0d060;transform:translateY(-1px);}
  .btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted);}
  .btn-outline:hover{border-color:var(--gold);color:var(--gold);}
  .btn-danger{background:rgba(255,80,80,0.15);color:#f87171;border:1px solid rgba(255,80,80,0.3);}
  .btn-sm{padding:7px 14px;font-size:11px;}
  .divider{border:none;border-top:1px solid var(--border);margin:20px 0;}
  .empty-state{text-align:center;padding:48px;color:var(--muted);font-style:italic;}
  .loading{text-align:center;padding:40px;color:var(--muted);}
  .loading::after{content:'';display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin 0.8s linear infinite;margin-left:10px;vertical-align:middle;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .player-id-display{font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:2px;color:var(--muted);background:rgba(245,200,66,0.06);border:1px solid var(--border);padding:3px 10px;border-radius:3px;display:inline-block;}
  .toast{position:fixed;bottom:24px;right:24px;background:var(--green);color:white;font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:1px;padding:12px 24px;border-radius:4px;transform:translateY(80px);opacity:0;transition:all 0.3s;z-index:999;}
  .toast.show{transform:translateY(0);opacity:1;}
  .toast.error{background:#b91c1c;}
  /* RULES TAB */
  .rules-hero{text-align:center;padding:32px 0 40px;}
  .rules-hero-icon{font-size:56px;display:block;margin-bottom:12px;}
  .rules-hero h2{font-family:'Bebas Neue',sans-serif;font-size:40px;letter-spacing:4px;color:var(--gold);}
  .rules-hero p{color:var(--muted);font-size:14px;max-width:500px;margin:10px auto 0;line-height:1.7;}
  .rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px;}
  .rules-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:24px;}
  .rules-card-icon{font-size:28px;margin-bottom:10px;display:block;}
  .rules-card h3{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:var(--gold);margin-bottom:10px;}
  .rules-card p,.rules-card li{font-size:13px;color:var(--muted);line-height:1.7;}
  .rules-card ul{padding-left:16px;}
  .rules-card li{margin-bottom:4px;}
  .scoring-table{width:100%;border-collapse:collapse;margin-top:8px;}
  .scoring-table tr{border-bottom:1px solid rgba(255,255,255,0.04);}
  .scoring-table td{padding:9px 0;font-size:13px;color:var(--muted);}
  .scoring-table td:last-child{text-align:right;font-family:'Bebas Neue',sans-serif;font-size:20px;color:var(--gold);}
  .scoring-table tr:last-child{border-bottom:none;}
  .guide-section{margin-bottom:28px;}
  .guide-section h3{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
  .guide-steps{display:grid;gap:10px;}
  .guide-step{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px 20px;display:flex;gap:16px;align-items:flex-start;}
  .guide-step-num{background:var(--green);color:var(--gold);font-family:'Bebas Neue',sans-serif;font-size:16px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
  .guide-step-body{font-size:13px;line-height:1.7;color:var(--muted);}
  .guide-step-body strong{color:var(--text);}
  .guide-step-body .tag{display:inline-block;background:rgba(245,200,66,0.1);color:var(--gold);font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2px;padding:1px 8px;border-radius:2px;margin:0 2px;}
  .example-match{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:20px;margin-top:12px;display:flex;flex-direction:column;gap:10px;}
  .example-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
  .example-row:last-child{border-bottom:none;}
  .example-label{color:var(--muted);}
  .example-score{font-family:'Bebas Neue',sans-serif;font-size:18px;color:var(--text);}
  .example-pts{font-family:'Bebas Neue',sans-serif;font-size:18px;}
  .pts-5{color:var(--gold);} .pts-3{color:var(--green-light);} .pts-1{color:#60a5fa;} .pts-0{color:#f87171;}
  @media(max-width:600px){
    .rules-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr}
    .match-card{grid-template-columns:1fr;text-align:center}
    .team.home,.team.away{justify-content:center}
  }

  /* FINAL FLAG VISIBILITY FIX */
  .team-visual{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:92px !important;
    padding:14px !important;
    overflow:hidden !important;
    position:relative !important;
  }
  .team-flag-visible{
    display:block !important;
    position:relative !important;
    z-index:3 !important;
    font-size:34px !important;
    line-height:1 !important;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  }
  .team-visual .team-watermark{
    display:block !important;
    position:absolute !important;
    inset:50% auto auto 50% !important;
    transform:translate(-50%,-50%) !important;
    font-size:140px !important;
    line-height:1 !important;
    opacity:.16 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }
  .team-visual .team-name{
    position:relative !important;
    z-index:3 !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:19px !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
    text-align:center !important;
    color:var(--text) !important;
    text-shadow:0 2px 12px rgba(0,0,0,.65) !important;
  }
  .team-mini{
    gap:7px !important;
  }
  .team-mini-flag{
    position:relative !important;
    z-index:2 !important;
    font-size:18px !important;
    line-height:1 !important;
    text-shadow:none !important;
  }
  .team-mini::before{
    opacity:.10 !important;
  }


  /* FLAG IMAGES - robust approach, no emoji dependency */
  .team-visual{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-height:104px !important;
    padding:16px !important;
    overflow:hidden !important;
    position:relative !important;
  }
  .team-flag-bg{
    position:absolute;
    inset:0;
    background-image:var(--flag-url);
    background-repeat:no-repeat;
    background-size:78%;
    background-position:center;
    opacity:.10;
    filter:blur(.2px) saturate(1.15);
    z-index:1;
  }
  .team-flag-img{
    display:block !important;
    width:48px !important;
    height:32px !important;
    object-fit:cover !important;
    border-radius:4px !important;
    border:1px solid rgba(255,255,255,.20) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.45) !important;
    position:relative !important;
    z-index:3 !important;
  }
  .team-visual .team-name{
    position:relative !important;
    z-index:3 !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:19px !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
    text-align:center !important;
    color:var(--text) !important;
    text-shadow:0 2px 12px rgba(0,0,0,.75) !important;
  }
  .team-watermark,.team-flag,.team-flag-visible{
    display:none !important;
  }
  .team-mini{
    gap:8px !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .team-mini-bg{
    position:absolute;
    inset:0;
    background-image:var(--flag-url);
    background-repeat:no-repeat;
    background-size:90%;
    background-position:center;
    opacity:.08;
    z-index:0;
  }
  .team-mini-flag{
    position:relative !important;
    z-index:2 !important;
    width:24px !important;
    height:16px !important;
    object-fit:cover !important;
    border-radius:2px !important;
    border:1px solid rgba(255,255,255,.18) !important;
  }
  .team-mini span:not(.team-mini-bg){
    position:relative !important;
    z-index:2 !important;
  }
  .flag-fallback{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }


  /* FINAL CLEAN MY PREDICTIONS ROW */
  .clean-score-entry{
    justify-content:flex-start !important;
    gap:18px !important;
    padding:18px 20px !important;
  }
  .clean-score-entry .score-inputs{
    justify-content:flex-start !important;
  }
  .clean-score-entry .btn{
    margin-left:0 !important;
  }
  .clean-score-entry .existing-pred{
    margin-left:0 !important;
  }
  @media(max-width:600px){
    .clean-score-entry{
      flex-direction:column !important;
    }
  }


  /* BANNER ROTATOR */
  .banner-slider{
    width:100%;
    max-width:1400px;
    margin:0 auto 14px;
    position:relative;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .banner-slider .main-banner{
    margin:0;
    box-shadow:none;
    border-radius:0;
  }
  .banner-slide{
    width:100%;
    display:block;
    opacity:0;
    position:absolute;
    inset:0;
    transition:opacity .85s ease-in-out;
  }
  .banner-slide.active{
    opacity:1;
    position:relative;
  }

  /* GROUP STANDINGS */
  .groups-grid{
    display:grid;
    gap:18px;
  }
  .group-card{
    background:rgba(17,25,22,.72);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    backdrop-filter:blur(12px);
  }
  .group-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:24px;
    letter-spacing:2px;
    color:var(--gold);
    padding:16px 18px;
    border-bottom:1px solid var(--border);
    background:rgba(245,200,66,.06);
  }
  .group-table{
    width:100%;
    border-collapse:collapse;
  }
  .group-table th{
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--muted);
    padding:10px 12px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .group-table th:first-child,.group-table td:first-child{text-align:left;}
  .group-table td{
    padding:11px 12px;
    font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.035);
    text-align:center;
  }
  .group-team{
    font-weight:800;
    color:var(--text);
  }
  .group-points{
    font-family:'Bebas Neue',sans-serif;
    font-size:20px;
    color:var(--gold);
  }

  /* MATCH PRIVACY + NEXT KICKOFF */
  .privacy-note{
    background:rgba(245,200,66,.055);
    border:1px solid var(--border);
    border-radius:8px;
    padding:14px 16px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:16px;
    line-height:1.5;
  }
  .next-kickoff-card{
    background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(17,25,22,.76));
    border:1px solid var(--border);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:18px;
  }
  .next-kickoff-title{
    font-family:'Barlow Condensed',sans-serif;
    font-size:12px;
    letter-spacing:2px;
    color:var(--muted);
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .next-kickoff-match{
    font-weight:800;
    font-size:17px;
    color:var(--text);
  }
  .next-kickoff-times{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .next-kickoff-pill{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    padding:7px 12px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:12px;
    letter-spacing:1px;
    color:var(--gold);
  }


  /* WORLD CUP GROUP FORMAT UPGRADE */
  .groups-layout{
    display:grid;
    gap:22px;
  }
  .groups-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .group-card{
    background:rgba(17,25,22,.72);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    backdrop-filter:blur(12px);
    box-shadow:0 12px 34px rgba(0,0,0,.22);
  }
  .group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .group-title small{
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    letter-spacing:2px;
    color:var(--muted);
  }
  .qual-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:3px 8px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1.4px;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .qual-auto{background:rgba(35,163,82,.16);border:1px solid rgba(35,163,82,.28);color:var(--green-light);}
  .qual-third{background:rgba(245,200,66,.13);border:1px solid rgba(245,200,66,.25);color:var(--gold);}
  .qual-out{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);color:var(--muted);}
  .group-table td:first-child{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .group-table .team-mini-flag{
    flex:0 0 auto;
  }
  .thirds-card,.bracket-card{
    background:rgba(17,25,22,.72);
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px;
    backdrop-filter:blur(12px);
  }
  .thirds-title,.bracket-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:24px;
    color:var(--gold);
    letter-spacing:2px;
    margin-bottom:12px;
  }
  .thirds-grid{
    display:grid;
    gap:8px;
  }
  .third-row{
    display:grid;
    grid-template-columns:42px 1fr auto auto;
    gap:10px;
    align-items:center;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);
    border-radius:8px;
    padding:10px 12px;
    font-size:13px;
  }
  .third-rank{
    font-family:'Bebas Neue',sans-serif;
    font-size:22px;
    color:var(--gold);
  }
  .third-team{
    font-weight:800;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .bracket-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
  }
  .bracket-round{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.055);
    border-radius:10px;
    padding:12px;
    min-height:120px;
  }
  .bracket-round-title{
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:8px;
  }
  .bracket-team{
    background:rgba(255,255,255,.035);
    border-radius:6px;
    padding:7px 8px;
    margin-bottom:6px;
    font-size:12px;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  @media(max-width:900px){
    .groups-grid{grid-template-columns:1fr;}
    .bracket-grid{grid-template-columns:1fr;}
  }


  /* MY PREDICTIONS STATUS FILTER */
  .mypreds-filter-bar{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 18px;
  }
  .mypreds-filter-btn{
    background:rgba(255,255,255,.035);
    border:1px solid var(--border);
    color:var(--muted);
    border-radius:999px;
    padding:8px 13px;
    cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    transition:all .18s ease;
  }
  .mypreds-filter-btn:hover{
    border-color:var(--gold);
    color:var(--gold);
  }
  .mypreds-filter-btn.active{
    background:var(--gold);
    border-color:var(--gold);
    color:var(--dark);
  }
  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    padding:3px 9px;
    border-radius:999px;
    white-space:nowrap;
  }
  .status-pill.open{background:rgba(35,163,82,.16);color:var(--green-light);border:1px solid rgba(35,163,82,.28);}
  .status-pill.locked{background:rgba(245,200,66,.13);color:var(--gold);border:1px solid rgba(245,200,66,.26);}
  .status-pill.published{background:rgba(122,154,128,.12);color:var(--text);border:1px solid rgba(122,154,128,.22);}


  /* TIE-AWARE RANKING + HALL OF FAME */
  .tie-count-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:8px;
    padding:3px 8px;
    border-radius:999px;
    background:rgba(245,200,66,.12);
    border:1px solid rgba(245,200,66,.24);
    color:var(--gold);
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1.3px;
    text-transform:uppercase;
    vertical-align:middle;
  }
  .tied-names{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
  }
  .tied-name-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    color:var(--text);
    font-size:12px;
    font-weight:700;
  }
  .podium-card.empty-podium{
    opacity:.35;
  }
  .podium-tie-list{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    justify-content:center;
    margin-top:8px;
  }
  .podium-tie-chip{
    font-size:11px;
    padding:3px 7px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.06);
    color:var(--text);
  }
  .rank-sub{
    display:block;
    font-family:'Barlow Condensed',sans-serif;
    font-size:9px;
    letter-spacing:1.4px;
    color:var(--muted);
    text-transform:uppercase;
    margin-top:2px;
  }


  /* ENHANCED LEAGUE FEED */
  .feed-filter-bar{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:0 0 12px;
  }
  .feed-filter-btn{
    background:rgba(255,255,255,.035);
    border:1px solid var(--border);
    color:var(--muted);
    border-radius:999px;
    padding:6px 10px;
    cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.3px;
    text-transform:uppercase;
    transition:all .18s ease;
  }
  .feed-filter-btn:hover{border-color:var(--gold);color:var(--gold);}
  .feed-filter-btn.active{background:var(--gold);border-color:var(--gold);color:var(--dark);}
  .feed-item{
    justify-content:space-between;
  }
  .feed-main{
    display:flex;
    gap:10px;
    align-items:flex-start;
    min-width:0;
  }
  .feed-points{
    flex:0 0 auto;
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    font-size:22px;
    line-height:1;
    padding-left:8px;
  }
  .feed-match-chip{
    display:inline-block;
    margin-top:5px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(245,200,66,.08);
    border:1px solid rgba(245,200,66,.14);
    color:var(--gold);
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
  }

  /* MOBILE-FIRST GROUP STANDINGS FIX */
  .group-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .group-table{
    min-width:650px;
  }
  .group-table th:first-child,
  .group-table td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:rgba(17,25,22,.96);
  }
  .group-table th:last-child,
  .group-table td:last-child{
    min-width:110px;
  }
  .group-mobile-teams{
    display:none;
    padding:10px;
    gap:8px;
  }
  .group-mobile-team{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.055);
    border-radius:10px;
    padding:11px 12px;
  }
  .group-mobile-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
  }
  .group-mobile-name{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    font-weight:800;
    color:var(--text);
  }
  .group-mobile-name span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .group-mobile-pts{
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    font-size:26px;
    line-height:1;
    white-space:nowrap;
  }
  .group-mobile-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    margin-bottom:8px;
  }
  .group-mobile-stat{
    background:rgba(0,0,0,.16);
    border-radius:6px;
    padding:6px 4px;
    text-align:center;
  }
  .group-mobile-stat b{
    display:block;
    font-family:'Bebas Neue',sans-serif;
    font-size:18px;
    line-height:1;
    color:var(--text);
  }
  .group-mobile-stat span{
    display:block;
    margin-top:3px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:9px;
    letter-spacing:1.2px;
    color:var(--muted);
    text-transform:uppercase;
  }
  .group-mobile-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .group-mobile-gd{
    font-family:'Barlow Condensed',sans-serif;
    color:var(--muted);
    font-size:12px;
    letter-spacing:1px;
  }
  @media(max-width:700px){
    .groups-grid{grid-template-columns:1fr !important;}
    .group-table-wrap{display:none;}
    .group-mobile-teams{display:grid;}
    .group-title{padding:14px 16px;}
  }


  /* SAVE ALL PREDICTIONS */
  .mypreds-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin:0 0 14px;
  }
  .mypreds-toolbar .mypreds-filter-bar{
    margin:0;
  }
  .save-all-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .bulk-save-message{
    width:100%;
    display:none;
    margin:0 0 18px;
    padding:12px 14px;
    border-radius:8px;
    border:1px solid rgba(245,200,66,.22);
    background:rgba(245,200,66,.07);
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
  }
  .bulk-save-message.show{
    display:block;
  }
  .bulk-save-message strong{
    color:var(--gold);
  }
  .bulk-save-message.error{
    border-color:rgba(248,113,113,.34);
    background:rgba(248,113,113,.08);
    color:#fca5a5;
  }
  @media(max-width:700px){
    .mypreds-toolbar{
      align-items:stretch;
    }
    .mypreds-toolbar .mypreds-filter-bar{
      width:100%;
    }
    .save-all-wrap{
      width:100%;
    }
    .save-all-wrap .btn{
      width:100%;
    }
  }


  /* WORLD CUP JOURNEY */
  .journey-hero{
    background:linear-gradient(135deg,rgba(245,200,66,.14),rgba(17,25,22,.78));
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    margin-bottom:18px;
    display:grid;
    grid-template-columns:1.2fr repeat(3,1fr);
    gap:12px;
    align-items:center;
  }
  .journey-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:34px;
    color:var(--gold);
    letter-spacing:2px;
    line-height:1;
  }
  .journey-sub{
    color:var(--muted);
    font-size:13px;
    margin-top:6px;
    line-height:1.5;
  }
  .journey-stat{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.055);
    border-radius:10px;
    padding:13px;
    text-align:center;
  }
  .journey-stat-value{
    font-family:'Bebas Neue',sans-serif;
    font-size:30px;
    color:var(--gold);
    line-height:1;
  }
  .journey-stat-label{
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    color:var(--muted);
    text-transform:uppercase;
    margin-top:4px;
  }
  .journey-track{
    position:relative;
    display:grid;
    gap:14px;
  }
  .journey-track::before{
    content:'';
    position:absolute;
    left:28px;
    top:20px;
    bottom:20px;
    width:2px;
    background:linear-gradient(180deg,var(--gold),rgba(245,200,66,.08));
    opacity:.55;
  }
  .journey-stop{
    position:relative;
    display:grid;
    grid-template-columns:56px 1fr;
    gap:14px;
    align-items:start;
  }
  .journey-marker{
    width:56px;
    height:56px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(245,200,66,.14);
    border:1px solid rgba(245,200,66,.34);
    box-shadow:0 0 24px rgba(245,200,66,.10);
    z-index:2;
    font-size:24px;
  }
  .journey-card{
    background:rgba(17,25,22,.72);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    backdrop-filter:blur(12px);
    box-shadow:0 12px 34px rgba(0,0,0,.22);
  }
  .journey-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    border-bottom:1px solid rgba(255,255,255,.055);
    padding-bottom:12px;
    margin-bottom:12px;
  }
  .journey-match{
    font-weight:900;
    font-size:17px;
    color:var(--text);
  }
  .journey-location{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
    line-height:1.5;
  }
  .journey-result{
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    font-size:34px;
    line-height:1;
    white-space:nowrap;
  }
  .journey-leaders-title{
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    letter-spacing:2px;
    color:var(--muted);
    text-transform:uppercase;
    margin-bottom:8px;
  }
  .journey-leader-chips{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
  }
  .journey-leader-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(245,200,66,.08);
    border:1px solid rgba(245,200,66,.18);
    border-radius:999px;
    padding:5px 9px;
    color:var(--text);
    font-weight:700;
    font-size:12px;
  }
  .journey-meta-row{
    margin-top:12px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .journey-pill{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    color:var(--muted);
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    padding:5px 9px;
  }
  .journey-plane{
    display:inline-block;
    animation:journeyPlane 1.8s ease-in-out infinite;
    margin-right:4px;
  }
  @keyframes journeyPlane{
    0%,100%{transform:translateX(0) rotate(-8deg)}
    50%{transform:translateX(6px) rotate(4deg)}
  }
  .journey-empty{
    background:rgba(17,25,22,.72);
    border:1px solid var(--border);
    border-radius:12px;
    padding:34px 20px;
    text-align:center;
    color:var(--muted);
  }
  @media(max-width:800px){
    .journey-hero{grid-template-columns:1fr 1fr;}
    .journey-hero-main{grid-column:1/-1;text-align:center;}
  }
  @media(max-width:560px){
    .journey-hero{grid-template-columns:1fr;}
    .journey-stop{grid-template-columns:42px 1fr;gap:10px;}
    .journey-marker{width:42px;height:42px;font-size:19px;}
    .journey-track::before{left:21px;}
    .journey-result{font-size:30px;}
  }


  /* WORLD CUP JOURNEY PHASE 2 MAP */
  .journey-map-card{
    position:relative;
    background:linear-gradient(135deg,rgba(17,25,22,.82),rgba(5,12,18,.82));
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px;
    margin-bottom:18px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
  }
  .journey-map-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }
  .journey-map-title{
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    font-size:28px;
    letter-spacing:2px;
    line-height:1;
  }
  .journey-map-sub{
    color:var(--muted);
    font-size:12px;
    margin-top:4px;
  }
  .journey-map-stage{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .journey-map-stage .journey-pill{
    background:rgba(245,200,66,.08);
    border-color:rgba(245,200,66,.18);
    color:var(--gold);
  }
  .journey-map{
    position:relative;
    width:100%;
    min-height:500px;
    border-radius:14px;
    overflow:hidden;
    background:
      radial-gradient(circle at 20% 18%,rgba(35,163,82,.22),transparent 18%),
      radial-gradient(circle at 72% 66%,rgba(245,200,66,.14),transparent 20%),
      linear-gradient(135deg,#07120f 0%,#0b1620 48%,#0a0f0d 100%);
    border:1px solid rgba(255,255,255,.055);
  }
  .journey-map::before{
    content:'';
    position:absolute;
    inset:0;
    background:
      radial-gradient(ellipse at 24% 50%,rgba(35,163,82,.23) 0 15%,transparent 16%),
      radial-gradient(ellipse at 50% 34%,rgba(35,163,82,.16) 0 20%,transparent 21%),
      radial-gradient(ellipse at 67% 58%,rgba(35,163,82,.12) 0 28%,transparent 29%);
    opacity:.8;
    filter:blur(.2px);
  }
  .journey-map::after{
    content:'NORTH AMERICA';
    position:absolute;
    right:22px;
    bottom:18px;
    font-family:'Bebas Neue',sans-serif;
    font-size:52px;
    letter-spacing:6px;
    color:rgba(255,255,255,.035);
    pointer-events:none;
  }
  .journey-map-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
  }
  .journey-route-line{
    fill:none;
    stroke:rgba(245,200,66,.42);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:8 10;
    filter:drop-shadow(0 0 7px rgba(245,200,66,.28));
  }
  .journey-route-line-glow{
    fill:none;
    stroke:rgba(245,200,66,.13);
    stroke-width:10;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .journey-stadium-pin{
    position:absolute;
    z-index:4;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    cursor:pointer;
  }
  .journey-pin-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(122,154,128,.60);
    border:2px solid rgba(255,255,255,.38);
    box-shadow:0 0 0 6px rgba(255,255,255,.035);
  }
  .journey-stadium-pin.visited .journey-pin-dot{
    background:var(--gold);
    border-color:#fff3b0;
    box-shadow:0 0 0 7px rgba(245,200,66,.10),0 0 24px rgba(245,200,66,.42);
  }
  .journey-stadium-pin.current .journey-pin-dot{
    background:var(--green-light);
    border-color:#dcffe7;
    box-shadow:0 0 0 9px rgba(35,163,82,.13),0 0 28px rgba(35,163,82,.5);
    animation:journeyPinPulse 1.8s infinite;
  }
  @keyframes journeyPinPulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.18)}
  }
  .journey-pin-label{
    white-space:nowrap;
    background:rgba(10,15,13,.76);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    color:var(--text);
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    padding:3px 7px;
    backdrop-filter:blur(8px);
    max-width:125px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .journey-stadium-pin.visited .journey-pin-label{
    color:var(--gold);
    border-color:rgba(245,200,66,.22);
  }
  .journey-trophy-badge{
    position:absolute;
    left:50%;
    top:-28px;
    transform:translateX(-50%);
    background:rgba(245,200,66,.14);
    border:1px solid rgba(245,200,66,.32);
    border-radius:999px;
    padding:3px 7px;
    font-size:13px;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
  }
  .journey-plane-map{
    position:absolute;
    z-index:5;
    transform:translate(-50%,-50%);
    font-size:30px;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));
    animation:journeyMapPlane 2.6s ease-in-out infinite;
  }
  @keyframes journeyMapPlane{
    0%,100%{transform:translate(-50%,-50%) rotate(-8deg) translateY(0)}
    50%{transform:translate(-50%,-50%) rotate(6deg) translateY(-7px)}
  }
  .journey-map-popover{
    position:absolute;
    z-index:7;
    left:18px;
    top:18px;
    max-width:330px;
    background:rgba(10,15,13,.86);
    border:1px solid rgba(245,200,66,.22);
    border-radius:12px;
    padding:14px;
    backdrop-filter:blur(14px);
    box-shadow:0 18px 44px rgba(0,0,0,.35);
  }
  .journey-popover-title{
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    font-size:24px;
    letter-spacing:1.5px;
    line-height:1;
  }
  .journey-popover-sub{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
    line-height:1.45;
  }
  .journey-popover-leaders{
    margin-top:10px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .journey-mini-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    border-radius:999px;
    padding:4px 8px;
    color:var(--text);
    font-size:11px;
    font-weight:700;
  }
  .journey-map-legend{
    position:absolute;
    z-index:6;
    right:14px;
    top:14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    background:rgba(10,15,13,.65);
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    padding:10px;
    backdrop-filter:blur(10px);
  }
  .journey-map-legend span{
    font-size:11px;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:7px;
  }
  .legend-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:inline-block;
    background:rgba(122,154,128,.60);
  }
  .legend-dot.visited{background:var(--gold);}
  .legend-dot.current{background:var(--green-light);}
  @media(max-width:760px){
    .journey-map{min-height:560px;}
    .journey-map-popover{
      left:12px;
      right:12px;
      top:auto;
      bottom:12px;
      max-width:none;
    }
    .journey-map-legend{
      right:10px;
      top:10px;
    }
    .journey-pin-label{
      display:none;
    }
    .journey-map::after{
      font-size:34px;
      right:14px;
      bottom:86px;
    }
  }


  /* JOURNEY MAP VISIBILITY + ACTUAL FLIGHT ANIMATION FIX */
  .journey-map{
    background:
      radial-gradient(ellipse at 28% 26%,rgba(35,163,82,.24) 0 13%,transparent 14%),
      radial-gradient(ellipse at 47% 48%,rgba(35,163,82,.20) 0 25%,transparent 26%),
      radial-gradient(ellipse at 43% 78%,rgba(35,163,82,.24) 0 13%,transparent 14%),
      linear-gradient(135deg,#06121b 0%,#0a1b24 45%,#07120f 100%) !important;
  }
  .journey-country-label{
    position:absolute;
    z-index:1;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:4px;
    color:rgba(255,255,255,.075);
    pointer-events:none;
    text-transform:uppercase;
    text-shadow:0 2px 18px rgba(0,0,0,.5);
  }
  .journey-country-label.canada{left:22%;top:13%;font-size:42px;}
  .journey-country-label.usa{left:48%;top:43%;font-size:58px;}
  .journey-country-label.mexico{left:28%;top:78%;font-size:42px;}
  .journey-map-svg text{
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));
  }
  .journey-map-svg .animated-plane{
    font-size:5px;
  }
  .journey-map-note{
    position:absolute;
    z-index:6;
    left:14px;
    bottom:14px;
    background:rgba(10,15,13,.62);
    border:1px solid rgba(255,255,255,.07);
    border-radius:999px;
    padding:7px 11px;
    color:var(--muted);
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    backdrop-filter:blur(10px);
  }
  @media(max-width:760px){
    .journey-country-label.canada{left:13%;top:16%;font-size:30px;}
    .journey-country-label.usa{left:40%;top:42%;font-size:42px;}
    .journey-country-label.mexico{left:23%;top:78%;font-size:30px;}
    .journey-map-note{bottom:116px;left:12px;right:12px;text-align:center;border-radius:10px;}
  }


  /* JOURNEY STATIC MAP BACKGROUND + DYNAMIC OVERLAY */
  .journey-map{
    min-height:620px !important;
    background:#06100f !important;
    border-color:rgba(245,200,66,.24) !important;
  }
  .journey-map::before,
  .journey-map::after{
    display:none !important;
  }
  .journey-map-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    opacity:.96;
    filter:saturate(1.08) contrast(1.03);
  }
  .journey-map-overlay-vignette{
    position:absolute;
    inset:0;
    z-index:2;
    background:
      linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18)),
      radial-gradient(circle at 50% 50%,transparent 0 56%,rgba(0,0,0,.28) 100%);
    pointer-events:none;
  }
  .journey-map-svg{
    z-index:3 !important;
  }
  .journey-route-line{
    stroke:rgba(245,200,66,.92) !important;
    stroke-width:.55 !important;
    stroke-dasharray:1.2 1.6 !important;
    filter:drop-shadow(0 0 5px rgba(245,200,66,.75));
  }
  .journey-route-line-glow{
    stroke:rgba(245,200,66,.22) !important;
    stroke-width:2.4 !important;
  }
  .journey-map-svg .animated-plane{
    font-size:4.8px;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.75));
  }
  .journey-stadium-pin{
    z-index:5 !important;
  }
  .journey-pin-dot{
    width:14px !important;
    height:14px !important;
    background:rgba(255,255,255,.32);
    border-color:rgba(255,255,255,.5);
  }
  .journey-stadium-pin.visited .journey-pin-dot{
    background:var(--gold) !important;
    border-color:#fff1a8 !important;
  }
  .journey-stadium-pin.current .journey-pin-dot{
    background:var(--green-light) !important;
    border-color:#d9ffe4 !important;
  }
  .journey-pin-label{
    display:none !important;
  }
  .journey-trophy-badge{
    top:-26px !important;
    z-index:6 !important;
  }
  .journey-plane-map{
    display:none !important;
  }
  .journey-map-popover,
  .journey-map-legend,
  .journey-map-note{
    z-index:8 !important;
  }
  .journey-map-note{
    bottom:14px !important;
  }
  .journey-map-legend{
    top:14px !important;
  }
  @media(max-width:760px){
    .journey-map{
      min-height:520px !important;
    }
    .journey-map-bg{
      object-fit:cover;
    }
    .journey-map-popover{
      bottom:12px !important;
    }
    .journey-map-note{
      display:none !important;
    }
  }


  /* JOURNEY REPLAY: STOP 5S AT EACH COMPLETED STADIUM */
  .journey-map-svg .animated-plane{
    display:none !important;
  }
  .journey-live-plane{
    position:absolute;
    z-index:7;
    transform:translate(-50%,-50%);
    font-size:32px;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.65));
    transition:left 2.4s cubic-bezier(.22,.75,.24,1), top 2.4s cubic-bezier(.22,.75,.24,1);
    pointer-events:none;
  }
  .journey-live-plane.flying{
    animation:journeyLivePlaneBob .9s ease-in-out infinite;
  }
  .journey-live-plane.paused{
    animation:journeyPlaneIdle 2s ease-in-out infinite;
  }
  @keyframes journeyLivePlaneBob{
    0%,100%{transform:translate(-50%,-50%) rotate(-7deg) translateY(0)}
    50%{transform:translate(-50%,-50%) rotate(6deg) translateY(-7px)}
  }
  @keyframes journeyPlaneIdle{
    0%,100%{transform:translate(-50%,-50%) rotate(-4deg)}
    50%{transform:translate(-50%,-50%) rotate(4deg)}
  }
  .journey-map-popover.hidden{
    opacity:0;
    transform:translateY(6px);
    pointer-events:none;
  }
  .journey-map-popover{
    transition:opacity .28s ease, transform .28s ease;
  }
  .journey-popover-timer{
    float:right;
    font-family:'Barlow Condensed',sans-serif;
    color:var(--muted);
    font-size:11px;
    letter-spacing:1px;
    margin-left:10px;
  }
  .journey-route-line.replay-active{
    stroke-dasharray:2 1.6 !important;
    animation:journeyRouteDash 1.5s linear infinite;
  }
  @keyframes journeyRouteDash{
    to{stroke-dashoffset:-8}
  }


  /* JOURNEY FINAL EXPERIENCE: REPLAY + SIDE TIMELINE */
  .journey-experience-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:14px;
    align-items:stretch;
  }
  .journey-side{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
  }
  .journey-side-panel{
    background:rgba(10,15,13,.78);
    border:1px solid rgba(245,200,66,.18);
    border-radius:13px;
    padding:14px;
    backdrop-filter:blur(14px);
    box-shadow:0 14px 36px rgba(0,0,0,.22);
  }
  .journey-side-title{
    font-family:'Bebas Neue',sans-serif;
    color:var(--gold);
    font-size:24px;
    letter-spacing:1.5px;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(245,200,66,.18);
  }
  .journey-timeline-list{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .journey-timeline-row{
    display:grid;
    grid-template-columns:34px 34px 1fr auto;
    gap:9px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.055);
    position:relative;
  }
  .journey-timeline-row:last-child{border-bottom:0;}
  .journey-timeline-index{
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid rgba(245,200,66,.55);
    color:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Bebas Neue',sans-serif;
    font-size:16px;
  }
  .journey-timeline-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.07);
    font-size:17px;
  }
  .journey-timeline-row.done .journey-timeline-icon{
    background:rgba(245,200,66,.12);
    border-color:rgba(245,200,66,.28);
  }
  .journey-timeline-row.next .journey-timeline-icon{
    background:rgba(245,200,66,.18);
    border-color:rgba(245,200,66,.38);
    animation:journeyPinPulse 1.8s infinite;
  }
  .journey-timeline-main{
    min-width:0;
  }
  .journey-timeline-stadium{
    color:var(--text);
    font-weight:900;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .journey-timeline-meta{
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
    line-height:1.3;
  }
  .journey-timeline-badge{
    font-family:'Barlow Condensed',sans-serif;
    font-size:10px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    border-radius:6px;
    padding:4px 8px;
    color:var(--text);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    white-space:nowrap;
  }
  .journey-timeline-badge.done{background:rgba(35,163,82,.20);border-color:rgba(35,163,82,.30);color:#b7f7c9;}
  .journey-timeline-badge.next{background:rgba(245,200,66,.20);border-color:rgba(245,200,66,.34);color:var(--gold);}
  .journey-next-match-card{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    padding:14px;
    text-align:center;
  }
  .journey-next-teams{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-family:'Bebas Neue',sans-serif;
    font-size:26px;
    color:var(--text);
    letter-spacing:1px;
  }
  .journey-next-vs{
    color:var(--gold);
    border:1px solid rgba(245,200,66,.25);
    border-radius:999px;
    padding:4px 7px;
    font-size:13px;
    font-family:'Barlow Condensed',sans-serif;
  }
  .journey-next-sub{
    color:var(--muted);
    font-size:12px;
    margin-top:10px;
    line-height:1.45;
  }
  .journey-latest-update{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
  }
  .journey-latest-update-icon{
    font-size:22px;
    color:var(--gold);
  }
  .journey-live-plane{
    transition:left 2.8s cubic-bezier(.18,.74,.24,1), top 2.8s cubic-bezier(.18,.74,.24,1) !important;
  }
  .journey-map-popover.hidden{
    opacity:0 !important;
    transform:translateY(8px) !important;
    pointer-events:none !important;
  }
  .journey-map-popover{
    transition:opacity .25s ease, transform .25s ease !important;
  }
  .journey-route-line.replay-active{
    stroke-dasharray:2 1.6 !important;
    animation:journeyRouteDash 1.5s linear infinite;
  }
  @media(max-width:1100px){
    .journey-experience-grid{
      grid-template-columns:1fr;
    }
    .journey-side{
      display:grid;
      grid-template-columns:1fr 1fr;
    }
    .journey-side-panel:first-child{
      grid-column:1/-1;
    }
  }
  @media(max-width:700px){
    .journey-side{
      display:flex;
    }
    .journey-timeline-row{
      grid-template-columns:30px 30px 1fr;
    }
    .journey-timeline-badge{
      grid-column:2/-1;
      justify-self:start;
      margin-top:-4px;
    }
  }


  /* FINAL POLISH: UNSAVED BAR + JOURNEY REPLAY BUTTON */
  .unsaved-predictions-bar{
    position:sticky;top:10px;z-index:40;display:none;align-items:center;justify-content:space-between;gap:12px;
    margin:0 0 16px;padding:12px 14px;border-radius:12px;border:1px solid rgba(245,200,66,.32);
    background:rgba(10,15,13,.92);backdrop-filter:blur(14px);
    box-shadow:0 14px 36px rgba(0,0,0,.30),0 0 28px rgba(245,200,66,.08);
  }
  .unsaved-predictions-bar.show{display:flex;}
  .unsaved-predictions-title{font-family:'Barlow Condensed',sans-serif;color:var(--gold);font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:800;}
  .unsaved-predictions-sub{color:var(--muted);font-size:12px;margin-top:2px;}
  .journey-replay-btn{display:inline-flex;align-items:center;gap:7px;}
  @media(max-width:620px){
    .unsaved-predictions-bar{flex-direction:column;align-items:stretch;text-align:center;}
    .unsaved-predictions-bar .btn{width:100%;}
  }



/* PERFORMANCE: REDUCE ANIMATIONS FOR MOBILE / ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .journey-live-plane,
  .journey-route-line,
  .points-pop,
  .sync-dot,
  .trophy-icon,
  .journey-plane,
  .journey-stadium-pin.current .journey-pin-dot {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 640px) {
  .points-pop,
  body::after {
    display: none !important;
  }
  .journey-map-bg {
    filter: none !important;
  }
}


/* DEBUG MODE */
.debug-panel {
  display:none;
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:9999;
  max-width:420px;
  max-height:240px;
  overflow:auto;
  background:rgba(10,15,13,.94);
  color:#fca5a5;
  border:1px solid rgba(248,113,113,.45);
  border-radius:10px;
  padding:12px;
  font-family:monospace;
  font-size:11px;
  line-height:1.45;
  box-shadow:0 18px 46px rgba(0,0,0,.4);
}
body.debug-mode .debug-panel {
  display:block;
}
.debug-toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(245,200,66,.16);
  border-radius:8px;
  background:rgba(255,255,255,.025);
}
.debug-toggle-label {
  color:var(--text);
  font-weight:800;
  font-size:13px;
}
.debug-toggle-sub {
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}


/* PLAYER PROFILE MODAL */
.player-profile-modal{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}
.player-profile-modal.show{
  display:flex;
}
.player-profile-card{
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  position:relative;
  border:1px solid rgba(245,200,66,.28);
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%,rgba(245,200,66,.14),transparent 34%),
    linear-gradient(135deg,rgba(17,25,22,.98),rgba(6,16,13,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 40px rgba(245,200,66,.08);
}
.player-profile-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(245,200,66,.25);
  background:rgba(0,0,0,.22);
  color:var(--gold);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.player-profile-head{
  padding:28px 28px 22px;
  border-bottom:1px solid rgba(245,200,66,.16);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
}
.profile-avatar{
  width:82px;
  height:82px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(245,200,66,.22),rgba(35,163,82,.16));
  border:1px solid rgba(245,200,66,.36);
  box-shadow:0 12px 34px rgba(0,0,0,.26);
  font-size:38px;
}
.profile-name{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:44px;
  letter-spacing:2px;
  line-height:1;
}
.profile-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:7px;
}
.profile-rank-box{
  text-align:center;
  min-width:92px;
  background:rgba(245,200,66,.10);
  border:1px solid rgba(245,200,66,.22);
  border-radius:12px;
  padding:12px;
}
.profile-rank-value{
  font-family:'Bebas Neue',sans-serif;
  font-size:42px;
  color:var(--gold);
  line-height:1;
}
.profile-rank-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--muted);
  text-transform:uppercase;
}
.profile-body{
  padding:22px 28px 28px;
}
.profile-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:18px;
}
.profile-stat{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:14px 12px;
  text-align:center;
}
.profile-stat-value{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  line-height:1;
}
.profile-stat-label{
  margin-top:5px;
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.profile-panel{
  background:rgba(255,255,255,.026);
  border:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  padding:16px;
  margin-top:12px;
}
.profile-panel-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:24px;
  letter-spacing:1.5px;
  margin-bottom:12px;
}
.profile-achievements{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.profile-achievement{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px;
  border-radius:10px;
  background:rgba(245,200,66,.055);
  border:1px solid rgba(245,200,66,.14);
}
.profile-achievement-icon{
  font-size:24px;
  line-height:1;
}
.profile-achievement-name{
  font-weight:900;
  color:var(--text);
  font-size:13px;
}
.profile-achievement-desc{
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
  line-height:1.35;
}
.profile-accuracy-bar{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
  margin-top:10px;
}
.profile-accuracy-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--gold));
}
.profile-recent-list{
  display:grid;
  gap:8px;
}
.profile-recent-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.profile-recent-row:last-child{border-bottom:none;}
.profile-clickable{
  cursor:pointer;
  transition:color .18s ease, transform .18s ease;
}
.profile-clickable:hover{
  color:var(--gold);
}
.player-name .profile-clickable:hover{
  transform:translateX(2px);
}
@media(max-width:700px){
  .player-profile-head{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
    padding-top:44px;
  }
  .profile-stat-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .profile-achievements{
    grid-template-columns:1fr;
  }
  .profile-recent-row{
    grid-template-columns:1fr;
  }
}


/* STREAKS + RARE ACHIEVEMENTS */
.streak-level-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  letter-spacing:1px;
  color:var(--gold);
  background:rgba(245,200,66,.12);
  border:1px solid rgba(245,200,66,.24);
  vertical-align:middle;
}
.badge-rarity{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:7px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.badge-card.rare-achievement{
  border-color:rgba(147,197,253,.28) !important;
  background:linear-gradient(135deg,rgba(147,197,253,.08),rgba(17,25,22,.72)) !important;
}
.badge-card.ultra-rare-achievement{
  border-color:rgba(245,200,66,.42) !important;
  background:linear-gradient(135deg,rgba(245,200,66,.14),rgba(147,197,253,.055),rgba(17,25,22,.72)) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.22),0 0 26px rgba(245,200,66,.08);
}
.profile-achievement-rarity{
  margin-top:5px;
  color:var(--gold);
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.profile-streak-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.profile-streak-card{
  background:rgba(245,200,66,.055);
  border:1px solid rgba(245,200,66,.14);
  border-radius:10px;
  padding:12px;
  text-align:center;
}
.profile-streak-card.locked{
  opacity:.45;
  filter:grayscale(.35);
}
.profile-streak-icon{
  font-size:26px;
  margin-bottom:6px;
}
.profile-streak-name{
  font-weight:900;
  color:var(--text);
  font-size:12px;
}
.profile-streak-desc{
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
}
@media(max-width:700px){
  .profile-streak-grid{grid-template-columns:1fr;}
}


/* UPSET DETECTOR */
.upset-card{
  background:linear-gradient(135deg,rgba(248,113,113,.12),rgba(245,200,66,.08),rgba(17,25,22,.74));
  border:1px solid rgba(248,113,113,.30);
  border-radius:14px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:0 16px 44px rgba(0,0,0,.25),0 0 30px rgba(248,113,113,.05);
}
.upset-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);}
.upset-kicker{font-family:'Barlow Condensed',sans-serif;color:#fca5a5;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:5px;}
.upset-title{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:34px;letter-spacing:2px;line-height:1;}
.upset-score{font-family:'Bebas Neue',sans-serif;color:var(--text);font-size:38px;letter-spacing:1px;line-height:1;white-space:nowrap;}
.upset-meta{color:var(--muted);font-size:13px;line-height:1.55;}
.upset-percent{display:inline-flex;align-items:center;gap:6px;margin-top:10px;border-radius:999px;padding:6px 11px;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.26);color:#fca5a5;font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;}
.upset-player-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.upset-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);color:var(--text);font-size:12px;font-weight:800;}
.upset-grid{display:grid;gap:10px;}
.upset-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.055);border-radius:10px;padding:11px 12px;}
.upset-rank{font-family:'Bebas Neue',sans-serif;color:#fca5a5;font-size:24px;}
.upset-row-title{font-weight:900;color:var(--text);font-size:13px;}
.upset-row-sub{color:var(--muted);font-size:11px;margin-top:3px;}
.upset-row-percent{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:24px;white-space:nowrap;}
.profile-upset-highlight{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.18);border-radius:10px;padding:12px;margin-top:10px;}
.profile-upset-highlight strong{color:var(--gold);}
@media(max-width:650px){.upset-row{grid-template-columns:36px 1fr}.upset-row-percent{grid-column:2;justify-self:start}.upset-score{font-size:32px}}


/* POPULAR PICKS / COMMUNITY CONSENSUS */
.consensus-card{background:linear-gradient(135deg,rgba(245,200,66,.10),rgba(35,163,82,.06),rgba(17,25,22,.74));border:1px solid rgba(245,200,66,.24);border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:0 14px 38px rgba(0,0,0,.22);}
.consensus-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.consensus-title{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:28px;letter-spacing:1.8px;line-height:1;}
.consensus-sub{color:var(--muted);font-size:12px;margin-top:5px;line-height:1.45;}
.consensus-status{font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid rgba(245,200,66,.22);color:var(--gold);background:rgba(245,200,66,.08);}
.consensus-status.good{color:var(--green-light);border-color:rgba(35,163,82,.28);background:rgba(35,163,82,.11);}
.consensus-status.bad{color:#fca5a5;border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.10);}
.consensus-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.consensus-outcome{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);border-radius:10px;padding:10px;}
.consensus-outcome-label{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.consensus-outcome-pct{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:30px;line-height:1;margin-top:4px;}
.consensus-bar{height:7px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden;margin-top:7px;}
.consensus-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--gold));}
.consensus-picks{display:grid;gap:8px;}
.consensus-pick-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.055);border-radius:10px;padding:10px 12px;}
.consensus-pick-rank{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:22px;}
.consensus-pick-score{font-weight:900;color:var(--text);font-size:14px;}
.consensus-pick-sub{color:var(--muted);font-size:11px;margin-top:3px;}
.consensus-pick-pct{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:24px;}
.consensus-mini{margin-top:10px;padding:10px;border-radius:10px;background:rgba(245,200,66,.055);border:1px solid rgba(245,200,66,.13);}
.consensus-mini-title{font-family:'Barlow Condensed',sans-serif;color:var(--gold);font-size:11px;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:7px;}
.consensus-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.consensus-dashboard-stat{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.055);border-radius:10px;padding:14px;text-align:center;}
.consensus-dashboard-value{font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:38px;line-height:1;}
.consensus-dashboard-label{font-family:'Barlow Condensed',sans-serif;color:var(--muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-top:5px;}
.profile-consensus-highlight{background:rgba(245,200,66,.065);border:1px solid rgba(245,200,66,.16);border-radius:10px;padding:12px;margin-top:10px;}
.profile-consensus-highlight strong{color:var(--gold);}
@media(max-width:700px){.consensus-outcomes{grid-template-columns:1fr}.consensus-pick-row{grid-template-columns:34px 1fr}.consensus-pick-pct{grid-column:2;justify-self:start}.consensus-dashboard-grid{grid-template-columns:1fr}}


/* COMMUNITY CONSENSUS LAYOUT REFINEMENT */
.match-card.visual-match .consensus-card{
  grid-column:1 / -1;
  width:min(100%, 860px);
  justify-self:center;
  margin:16px auto 0;
}
.consensus-body-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);
  gap:14px;
  align-items:stretch;
}
.consensus-card .consensus-outcomes{
  margin-bottom:0;
}
.consensus-card .consensus-mini{
  margin-top:0;
  height:100%;
}
@media(max-width:820px){
  .consensus-body-grid{
    grid-template-columns:1fr;
  }
  .match-card.visual-match .consensus-card{
    width:100%;
  }
}


/* TEAM ACCURACY TABLE */
.team-accuracy-panel{
  background:linear-gradient(135deg,rgba(35,163,82,.09),rgba(245,200,66,.07),rgba(17,25,22,.74));
  border:1px solid rgba(245,200,66,.20);
  border-radius:14px;
  padding:18px;
  margin-bottom:18px;
}
.team-accuracy-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:14px;
}
.team-accuracy-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:15px;
}
.team-accuracy-kicker{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.team-accuracy-team{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  color:var(--text);
  font-size:15px;
}
.team-accuracy-pct{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:42px;
  line-height:1;
  margin-top:8px;
}
.team-accuracy-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}
.team-accuracy-table{
  display:grid;
  gap:7px;
}
.team-accuracy-row{
  display:grid;
  grid-template-columns:34px 1fr 70px;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.045);
}
.team-accuracy-rank{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:20px;
}
.team-accuracy-bar{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
  margin-top:6px;
}
.team-accuracy-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--gold));
}
.team-accuracy-value{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:24px;
  text-align:right;
}
@media(max-width:700px){
  .team-accuracy-hero{grid-template-columns:1fr;}
  .team-accuracy-row{grid-template-columns:28px 1fr 56px;}
}


/* TEAM INSIGHTS PREMIUM + MODAL */
.team-insights-panel{
  background:linear-gradient(135deg,rgba(35,163,82,.09),rgba(245,200,66,.07),rgba(17,25,22,.74));
  border:1px solid rgba(245,200,66,.20);
  border-radius:14px;
  padding:18px;
  margin-bottom:18px;
}
.team-insights-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.team-insights-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:28px;
  letter-spacing:1.8px;
  line-height:1;
}
.team-insights-sub{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
}
.team-insights-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.team-insight-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:15px;
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.team-insight-kicker{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.team-insight-team{
  font-weight:900;
  color:var(--text);
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
}
.team-insight-value{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:44px;
  line-height:1;
  margin-top:8px;
}
.team-insight-note{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
  line-height:1.35;
}
.team-accuracy-modal{
  position:fixed;
  inset:0;
  z-index:9100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}
.team-accuracy-modal.show{
  display:flex;
}
.team-accuracy-modal-card{
  width:min(860px,100%);
  max-height:90vh;
  overflow:auto;
  position:relative;
  border:1px solid rgba(245,200,66,.28);
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%,rgba(245,200,66,.14),transparent 34%),
    linear-gradient(135deg,rgba(17,25,22,.98),rgba(6,16,13,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 40px rgba(245,200,66,.08);
  padding:26px;
}
.team-accuracy-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(245,200,66,.25);
  background:rgba(0,0,0,.22);
  color:var(--gold);
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.team-accuracy-modal-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:38px;
  letter-spacing:2px;
  line-height:1;
  margin-bottom:6px;
}
.team-accuracy-modal-sub{
  color:var(--muted);
  font-size:13px;
  margin-bottom:18px;
}
.team-accuracy-full-table{
  display:grid;
  gap:8px;
}
.team-accuracy-full-row{
  display:grid;
  grid-template-columns:42px 1fr 82px 82px 82px;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.055);
}
.team-accuracy-full-head{
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  background:transparent;
  border-color:rgba(245,200,66,.12);
}
.team-accuracy-full-rank{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:22px;
}
.team-accuracy-full-team{
  font-weight:900;
  color:var(--text);
}
.team-accuracy-full-value{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:24px;
  text-align:right;
}
@media(max-width:780px){
  .team-insights-grid{grid-template-columns:1fr;}
  .team-accuracy-full-row{
    grid-template-columns:34px 1fr 62px;
  }
  .team-accuracy-full-row > :nth-child(4),
  .team-accuracy-full-row > :nth-child(5){
    display:none;
  }
}


/* PERSONAL STORY */
.personal-story-panel{
  background:linear-gradient(135deg,rgba(245,200,66,.13),rgba(35,163,82,.08),rgba(17,25,22,.76));
  border:1px solid rgba(245,200,66,.26);
  border-radius:14px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:0 16px 44px rgba(0,0,0,.24),0 0 26px rgba(245,200,66,.06);
}
.personal-story-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.personal-story-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  letter-spacing:2px;
  line-height:1;
}
.personal-story-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:5px;
}
.personal-story-rank{
  text-align:center;
  min-width:92px;
  background:rgba(245,200,66,.10);
  border:1px solid rgba(245,200,66,.22);
  border-radius:12px;
  padding:10px 12px;
}
.personal-story-rank-value{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:38px;
  line-height:1;
}
.personal-story-rank-label{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.personal-story-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.personal-story-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  padding:12px 13px;
}
.personal-story-icon{
  font-size:20px;
  line-height:1;
  margin-top:1px;
}
.personal-story-text{
  color:var(--text);
  font-size:13px;
  line-height:1.42;
  font-weight:700;
}
.personal-story-text strong{ color:var(--gold); }
.personal-story-muted{
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
  line-height:1.35;
}
@media(max-width:700px){
  .personal-story-grid{grid-template-columns:1fr;}
  .personal-story-header{text-align:center;justify-content:center;}
}


/* RIVALRIES */
.rivalries-panel{
  background:linear-gradient(135deg,rgba(248,113,113,.10),rgba(245,200,66,.08),rgba(17,25,22,.76));
  border:1px solid rgba(245,200,66,.22);
  border-radius:14px;
  padding:22px;
  margin-bottom:18px;
  box-shadow:0 16px 44px rgba(0,0,0,.23),0 0 26px rgba(248,113,113,.05);
}
.rivalries-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.rivalries-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  letter-spacing:2px;
  line-height:1;
}
.rivalries-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:5px;
}
.rivalries-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.rivalry-card{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:15px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.rivalry-card.hot{
  border-color:rgba(248,113,113,.30);
  background:linear-gradient(135deg,rgba(248,113,113,.10),rgba(255,255,255,.025));
}
.rivalry-kicker{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.rivalry-matchup{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:10px 0;
}
.rivalry-player{
  min-width:0;
  flex:1;
  text-align:center;
}
.rivalry-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(245,200,66,.22),rgba(35,163,82,.16));
  border:1px solid rgba(245,200,66,.28);
  font-size:20px;
  margin-bottom:6px;
}
.rivalry-name{
  font-weight:900;
  color:var(--text);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rivalry-points{
  color:var(--gold);
  font-family:'Bebas Neue',sans-serif;
  font-size:24px;
  line-height:1;
  margin-top:3px;
}
.rivalry-vs{
  font-family:'Bebas Neue',sans-serif;
  color:#fca5a5;
  font-size:24px;
  letter-spacing:1px;
}
.rivalry-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
.rivalry-diff{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:8px;
  border-radius:999px;
  padding:5px 9px;
  background:rgba(245,200,66,.10);
  border:1px solid rgba(245,200,66,.20);
  color:var(--gold);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.rivalries-table{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.rivalry-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.055);
}
.rivalry-row-icon{
  font-size:20px;
}
.rivalry-row-title{
  font-weight:900;
  color:var(--text);
  font-size:13px;
}
.rivalry-row-sub{
  color:var(--muted);
  font-size:11px;
  margin-top:3px;
}
.rivalry-row-diff{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:24px;
  white-space:nowrap;
}
.profile-rivalry-highlight{
  background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.18);
  border-radius:10px;
  padding:12px;
  margin-top:10px;
}
.profile-rivalry-highlight strong{
  color:var(--gold);
}
@media(max-width:800px){
  .rivalries-grid{grid-template-columns:1fr;}
  .rivalry-row{grid-template-columns:30px 1fr;}
  .rivalry-row-diff{grid-column:2;justify-self:start;}
}


/* PREDICTIONS COMBINED TAB */
.prediction-subtabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.prediction-subtab{
  background:rgba(255,255,255,.035);
  border:1px solid var(--border);
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
}
.prediction-subtab.active{
  background:var(--gold);
  color:var(--dark);
  border-color:var(--gold);
}
.league-predictions-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.league-predictions-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.league-filter-btn{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:7px 11px;
  border-radius:999px;
  cursor:pointer;
}
.league-filter-btn.active{
  background:rgba(245,200,66,.16);
  border-color:rgba(245,200,66,.32);
  color:var(--gold);
}
.league-player-card{
  background:rgba(17,25,22,.72);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
}
.league-player-card.me{
  border-color:rgba(245,200,66,.45);
  box-shadow:0 0 26px rgba(245,200,66,.06);
}
.league-player-summary{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  cursor:pointer;
}
.league-player-summary:hover{
  background:rgba(245,200,66,.045);
}
.league-player-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.league-player-name{
  font-weight:900;
  color:var(--text);
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.league-player-meta{
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.league-player-points{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:28px;
  line-height:1;
  white-space:nowrap;
}
.league-expand-indicator{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.league-player-details{
  display:none;
  border-top:1px solid rgba(245,200,66,.16);
}
.league-player-card.open .league-player-details{
  display:block;
}
.league-player-card.open .league-expand-indicator{
  color:var(--gold);
}
.league-empty-details{
  padding:14px 16px;
  color:var(--muted);
  font-size:13px;
}
@media(max-width:620px){
  .league-player-summary{
    grid-template-columns:1fr auto;
  }
  .league-expand-indicator{
    grid-column:1/-1;
  }
}

.rank-up{
  color:#16a34a;
  font-size:.8rem;
  font-weight:700;
  margin-left:6px;
}

.rank-down{
  color:#dc2626;
  font-size:.8rem;
  font-weight:700;
  margin-left:6px;
}

.rank-flat{
  color:#94a3b8;
  font-size:.8rem;
  margin-left:6px;
}

/* ACHIEVEMENT PROGRESS */
.achievement-progress-wrap{
  margin-top:9px;
}
.achievement-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  margin-bottom:5px;
}
.achievement-progress-track{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.04);
}
.achievement-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--gold));
  transition:width .25s ease;
}
.badge-card.unlocked .achievement-progress-fill{
  width:100% !important;
}
.profile-achievement-progress{
  margin-top:7px;
}
.profile-achievement-progress .achievement-progress-track{
  height:6px;
}


/* JOURNEY PHASE 1: FULL WIDTH MAP + TIMELINE BELOW */
.journey-experience-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
}
.journey-map{
  width:100% !important;
  min-height:72vh !important;
  height:72vh !important;
  max-height:860px !important;
  overflow:hidden !important;
}
.journey-map-card{
  padding:18px !important;
}
.journey-map-bg{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:rgba(0,0,0,.25);
}
.journey-side{
  display:grid !important;
  grid-template-columns:1.25fr .85fr .85fr !important;
  gap:14px !important;
  align-items:start !important;
}
.journey-side-panel{
  height:100%;
}
.journey-side .journey-side-panel:first-child{
  grid-column:1 / 2;
}
.journey-timeline-list{
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}
.journey-map-header{
  align-items:flex-start !important;
}
.journey-map-stage{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}
.journey-map-popover{
  max-width:min(440px, calc(100% - 28px)) !important;
}
.journey-map-note{
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:12px !important;
}
@media(max-width:900px){
  .journey-map{
    min-height:68vh !important;
    height:68vh !important;
  }
  .journey-side{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:620px){
  .journey-map-card{
    padding:12px !important;
  }
  .journey-map{
    min-height:62vh !important;
    height:62vh !important;
  }
  .journey-map-header{
    gap:12px !important;
  }
  .journey-map-stage{
    justify-content:flex-start !important;
  }
}


/* JOURNEY PHASE 2 FIX: MAP COORDINATES + CENTERED BOTTOM CARDS */
.journey-map{
  aspect-ratio:3 / 2 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
}
.journey-map-bg{
  width:100% !important;
  height:100% !important;
  object-fit:fill !important;
  object-position:center center !important;
}
.journey-map-svg,
.journey-map-overlay-vignette{
  inset:0 !important;
}
.journey-side{
  grid-template-columns:minmax(320px, 1fr) minmax(260px, 420px) !important;
  justify-content:center !important;
  max-width:980px;
  margin:0 auto;
  width:100%;
}
.journey-side .journey-side-panel:first-child{
  grid-column:auto !important;
}
.journey-side-panel{
  width:100%;
}
.journey-timeline-list{
  max-height:420px;
}
@media(max-width:900px){
  .journey-side{
    grid-template-columns:1fr !important;
    max-width:620px;
  }
}
@media(max-width:620px){
  .journey-map{
    aspect-ratio:3 / 2 !important;
  }
}


/* JOURNEY PHASE 3: GOLDEN TRAIL + CLICK TO FLY */
.journey-route-completed-glow{
  fill:none;
  stroke:rgba(245,200,66,.22);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(245,200,66,.35));
}
.journey-route-completed{
  fill:none;
  stroke:rgba(245,200,66,.88);
  stroke-width:.72;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.journey-route-next{
  fill:none;
  stroke:rgba(245,200,66,.72);
  stroke-width:.55;
  stroke-dasharray:2.4 2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
  animation:journeyDashFlow 1.2s linear infinite;
}
@keyframes journeyDashFlow{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-9}
}
.journey-timeline-row{
  cursor:pointer;
}
.journey-timeline-row:hover{
  background:rgba(245,200,66,.07);
}
.journey-timeline-row.active{
  border-color:rgba(245,200,66,.42) !important;
  background:rgba(245,200,66,.10) !important;
}
.journey-timeline-helper{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  margin:-2px 0 12px;
}
@media (prefers-reduced-motion: reduce){
  .journey-route-next{animation:none !important;}
}


.rank-move{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  font-size:11px;
  font-weight:700;
}
.rank-move.up{
  color:#22c55e;
  text-shadow:0 0 8px rgba(34,197,94,.4);
}

.rank-move.down{
  color:#ef4444;
  text-shadow:0 0 8px rgba(239,68,68,.4);
}

.rank-move.flat{
  color:#888;
}



/* CARD COLLECTION FOUNDATION */
.collection-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px;
  border:1px solid rgba(245,200,66,.18);
  background:linear-gradient(135deg,rgba(245,200,66,.08),rgba(255,255,255,.025));
  border-radius:16px;
  margin-bottom:16px;
}
.collection-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  letter-spacing:1.8px;
  line-height:1;
}
.collection-sub{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  margin-top:6px;
}
.collection-filter-chip{
  border:1px solid rgba(245,200,66,.28);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  border-radius:999px;
  padding:9px 14px;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}
.collection-filter-chip.active,
.collection-filter-chip:hover{
  color:#08110d;
  background:linear-gradient(135deg,var(--gold),#facc15);
}
.collection-progress-card{
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.035);
  border-radius:14px;
  padding:15px;
  margin-bottom:16px;
}
.collection-progress-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.collection-kicker{
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-size:11px;
}
.collection-progress-title{
  color:var(--text);
  font-weight:900;
  font-size:18px;
}
.collection-progress-pct{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:38px;
  line-height:1;
}
.collection-progress-bar{
  height:10px;
  background:rgba(255,255,255,.075);
  border-radius:999px;
  overflow:hidden;
}
.collection-progress-bar.small{height:7px;margin-top:9px;}
.collection-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--green),var(--gold));
  border-radius:999px;
  box-shadow:0 0 14px rgba(245,200,66,.18);
}
.country-collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:10px;
  margin-bottom:18px;
}
.country-collection-card{
  text-align:left;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  border-radius:13px;
  padding:12px;
  color:var(--text);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.country-collection-card:hover,
.country-collection-card.active{
  transform:translateY(-1px);
  border-color:rgba(245,200,66,.42);
  background:rgba(245,200,66,.07);
}
.country-collection-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.country-collection-name{font-weight:900;}
.country-collection-count{
  color:var(--gold);
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
}
.collection-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:12px;
  margin:18px 0 12px;
}
.collection-section-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:28px;
  letter-spacing:1.5px;
}
.collection-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:14px;
}
.collection-card-tile{
  position:relative;
  min-height:232px;
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.collection-card-tile.locked{
  opacity:.62;
  filter:saturate(.45);
}
.collection-card-tile.owned{
  border-color:rgba(245,200,66,.28);
}
.card-rarity-glow{
  position:absolute;
  inset:-40px;
  opacity:.2;
  filter:blur(24px);
}
.rarity-common .card-rarity-glow{background:#94a3b8;}
.rarity-rare .card-rarity-glow{background:#38bdf8;}
.rarity-epic .card-rarity-glow{background:#a855f7;}
.rarity-legendary .card-rarity-glow{background:#f59e0b;}
.rarity-mythic .card-rarity-glow{background:#f43f5e;}
.card-art{
  position:relative;
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 20%,rgba(245,200,66,.14),rgba(255,255,255,.025) 55%,rgba(0,0,0,.18));
}
.card-art-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-art-placeholder{
  font-size:48px;
  opacity:.9;
}
.card-meta{
  position:relative;
  padding:12px;
}
.card-country{
  color:var(--muted);
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  font-family:'Barlow Condensed',sans-serif;
  margin-bottom:5px;
}
.card-name{
  font-weight:900;
  color:var(--text);
  min-height:38px;
  line-height:1.15;
}
.card-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:11px;
}
.card-rarity{
  color:var(--gold);
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:11px;
  font-weight:900;
}
.card-qty,
.card-locked{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.05);
  border-radius:999px;
  padding:3px 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.collection-empty{
  text-align:center;
  padding:44px 22px;
  border:1px dashed rgba(245,200,66,.25);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.collection-empty-icon{font-size:54px;margin-bottom:12px;}
.collection-empty-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  letter-spacing:1.5px;
}
.collection-empty-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
}
.profile-collection-mini{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:10px;
}
.profile-collection-value{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  line-height:1;
}
@media(max-width:620px){
  .collection-hero,.collection-toolbar,.profile-collection-mini{
    flex-direction:column;
    align-items:stretch;
  }
  .collection-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


.collection-rewards-panel{
  border:1px solid rgba(245,200,66,.14);
  background:rgba(245,200,66,.035);
  border-radius:14px;
  padding:14px;
  margin-bottom:16px;
}
.collection-reward-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.collection-reward-row{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.collection-reward-row strong{
  color:var(--text);
}

.profile-stat-grid-compact{
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
}


/* CARD REVEAL MODAL */
.card-reveal-modal{
  position:fixed;
  inset:0;
  z-index:130;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(10px);
}
.card-reveal-modal.show{display:flex;}
.card-reveal-shell{
  width:min(460px,100%);
  position:relative;
  border:1px solid rgba(245,200,66,.34);
  background:radial-gradient(circle at 50% 0%,rgba(245,200,66,.16),rgba(17,25,22,.98) 54%);
  border-radius:24px;
  padding:26px;
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 70px rgba(245,200,66,.12);
  text-align:center;
  overflow:hidden;
}
.card-reveal-shell::before{
  content:'';
  position:absolute;
  inset:-30%;
  background:conic-gradient(from 0deg,transparent,rgba(245,200,66,.18),transparent,rgba(255,255,255,.08),transparent);
  animation:cardRevealSpin 5s linear infinite;
  opacity:.6;
}
.card-reveal-shell>*{position:relative;z-index:1;}
@keyframes cardRevealSpin{to{transform:rotate(360deg)}}
.card-reveal-close{
  position:absolute;
  right:14px;
  top:12px;
  z-index:2;
  border:0;
  background:rgba(255,255,255,.08);
  color:var(--text);
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
}
.card-reveal-kicker{
  font-family:'Barlow Condensed',sans-serif;
  color:var(--muted);
  letter-spacing:2px;
  text-transform:uppercase;
  font-size:12px;
}
.card-reveal-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:38px;
  letter-spacing:2px;
  line-height:1;
  margin-top:6px;
}
.card-reveal-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}
.card-reveal-card{
  position:relative;
  margin:24px auto 22px;
  width:min(290px,88%);
  min-height:390px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.025));
  overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.42);
  transform:perspective(900px) rotateY(0deg);
  animation:cardRevealPop .7s cubic-bezier(.2,1.4,.32,1) both;
}
@keyframes cardRevealPop{
  0%{transform:perspective(900px) rotateY(90deg) scale(.82);opacity:0}
  100%{transform:perspective(900px) rotateY(0deg) scale(1);opacity:1}
}
.card-reveal-glow{
  position:absolute;
  inset:-50px;
  opacity:.35;
  filter:blur(28px);
}
.rarity-common .card-reveal-glow{background:#94a3b8;}
.rarity-rare .card-reveal-glow{background:#38bdf8;}
.rarity-epic .card-reveal-glow{background:#a855f7;}
.rarity-legendary .card-reveal-glow{background:#f59e0b;}
.rarity-mythic .card-reveal-glow{background:#f43f5e;}
.card-reveal-rarity{
  position:absolute;
  left:14px;
  top:14px;
  z-index:2;
  background:rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:6px 11px;
  color:var(--gold);
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:2px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.card-reveal-art{
  height:245px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 20%,rgba(245,200,66,.18),rgba(0,0,0,.18) 70%);
}
.card-reveal-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-reveal-placeholder{
  font-size:88px;
  filter:drop-shadow(0 8px 30px rgba(245,200,66,.32));
}
.card-reveal-name{
  font-family:'Bebas Neue',sans-serif;
  color:var(--text);
  font-size:36px;
  letter-spacing:1.5px;
  line-height:1;
  padding:22px 18px 4px;
}
.card-reveal-country{
  color:var(--muted);
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:2px;
  text-transform:uppercase;
  padding-bottom:18px;
}
.card-reveal-btn{
  width:100%;
  justify-content:center;
}
@media(max-width:520px){
  .card-reveal-shell{padding:20px 16px;}
  .card-reveal-card{width:94%;min-height:350px;}
  .card-reveal-art{height:210px;}
}


/* ADMIN MAINTENANCE */
.maintenance-list{
  display:grid;
  gap:10px;
}
.maintenance-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  border-radius:12px;
}
.maintenance-match{
  font-weight:900;
  color:var(--text);
}
.maintenance-sub,
.maintenance-id{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}
.maintenance-id{
  font-family:monospace;
  opacity:.75;
}
.maintenance-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.btn.danger{
  border-color:rgba(239,68,68,.45);
  color:#fca5a5;
}
.btn.danger:hover{
  background:rgba(239,68,68,.14);
  color:#fecaca;
}
@media(max-width:720px){
  .maintenance-row{
    grid-template-columns:1fr;
  }
  .maintenance-actions{
    justify-content:flex-start;
  }
}

/* ACHIEVEMENT REWARDS */
.profile-panel-title + .profile-collection-mini{
  margin-top:10px;
}


/* REWARD INVENTORY */
.inventory-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px;
  border:1px solid rgba(245,200,66,.18);
  background:linear-gradient(135deg,rgba(245,200,66,.08),rgba(255,255,255,.025));
  border-radius:16px;
  margin-bottom:18px;
}
.inventory-hero-title{
  font-family:'Bebas Neue',sans-serif;
  color:var(--gold);
  font-size:34px;
  letter-spacing:1.8px;
  line-height:1;
}
.inventory-hero-sub{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  margin-top:6px;
}
.inventory-count-badge{
  border:1px solid rgba(245,200,66,.32);
  background:rgba(245,200,66,.08);
  color:var(--gold);
  border-radius:999px;
  padding:9px 14px;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:900;
  white-space:nowrap;
}
.inventory-list{
  display:grid;
  gap:10px;
  margin-bottom:20px;
}
.inventory-item{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}
.inventory-item.unopened{
  border-color:rgba(245,200,66,.25);
  background:rgba(245,200,66,.045);
}
.inventory-pack-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  font-size:26px;
}
.inventory-title{
  font-weight:900;
  color:var(--text);
}
.inventory-sub,.inventory-date{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}
.inventory-actions{
  display:flex;
  justify-content:flex-end;
}
@media(max-width:640px){
  .inventory-hero,.inventory-item{
    grid-template-columns:1fr;
    display:grid;
  }
  .inventory-actions{
    justify-content:flex-start;
  }
}

/* OFFICIAL RPC DATA */
.official-data-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 12px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.28);
  background:rgba(34,197,94,.08);
  color:#86efac;
  font-size:12px;
  font-weight:800;
}
.official-data-pill.warning{
  border-color:rgba(245,158,11,.32);
  background:rgba(245,158,11,.08);
  color:#fcd34d;
}


/* STEAM-LIKE INVENTORY */
.steam-inventory-shell{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.16));
  border-radius:14px;
  padding:16px;
  min-height:460px;
}
.steam-inventory-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.steam-brand{
  display:flex;
  align-items:center;
  gap:13px;
}
.steam-logo-mark{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:24px;
}
.steam-brand-title{
  font-size:24px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--text);
  font-weight:900;
}
.steam-brand-sub{
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
}
.steam-inventory-actions-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.steam-inventory-controls{
  display:grid;
  grid-template-columns:minmax(220px,360px) 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.steam-inventory-select{
  width:100%;
  background:#050807;
  border:1px solid rgba(245,200,66,.28);
  color:var(--text);
  padding:11px 12px;
  border-radius:4px;
  font-weight:900;
  font-size:16px;
}
.steam-search-placeholder{
  color:var(--muted);
  font-size:13px;
  display:flex;
  gap:8px;
  align-items:center;
}
.steam-search-placeholder input{
  flex:1;
  min-width:140px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.09);
  border-radius:4px;
  padding:9px 10px;
  color:var(--muted);
}
.steam-inventory-layout{
  display:grid;
  grid-template-columns:minmax(340px,1fr) minmax(280px,360px);
  gap:14px;
}
.steam-grid-header{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  margin:0 0 8px;
}
.steam-inventory-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:7px;
  padding:8px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  min-height:430px;
  align-content:start;
}
.steam-inventory-slot{
  position:relative;
  min-height:116px;
  padding:8px 6px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border-radius:4px;
  overflow:hidden;
  color:var(--text);
  cursor:pointer;
  text-align:center;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.steam-inventory-slot:hover{
  transform:translateY(-2px);
  border-color:rgba(245,200,66,.38);
  background:linear-gradient(180deg,rgba(245,200,66,.08),rgba(255,255,255,.02));
}
.steam-inventory-slot.selected{
  outline:2px solid rgba(245,200,66,.72);
  outline-offset:1px;
}
.steam-inventory-slot.empty{
  cursor:default;
  border-style:dashed;
  opacity:.52;
}
.steam-inventory-slot.empty:hover{
  transform:none;
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
}
.steam-slot-glow{
  position:absolute;
  inset:-20px;
  opacity:.16;
  filter:blur(16px);
}
.steam-inventory-slot.rarity-rare .steam-slot-glow{background:#38bdf8;}
.steam-inventory-slot.rarity-epic .steam-slot-glow{background:#a855f7;}
.steam-inventory-slot.rarity-legendary .steam-slot-glow{background:#f59e0b;}
.steam-inventory-slot.rarity-mythic .steam-slot-glow{background:#f43f5e;}
.steam-slot-icon{
  position:relative;
  font-size:36px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
}
.steam-slot-icon.muted{
  color:var(--muted);
  opacity:.7;
}
.steam-slot-count{
  position:absolute;
  right:5px;
  bottom:36px;
  background:rgba(59,130,246,.86);
  color:#fff;
  font-size:10px;
  padding:2px 6px;
  border-radius:4px;
  font-weight:900;
}
.steam-slot-title{
  position:relative;
  margin-top:7px;
  font-size:11px;
  font-weight:900;
  line-height:1.15;
  min-height:25px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.steam-slot-sub{
  color:var(--muted);
  font-size:10px;
  margin-top:4px;
}
.steam-detail-panel{
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.18));
  border-radius:8px;
  padding:14px;
  min-height:430px;
}
.steam-detail-art{
  height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 30%,rgba(245,200,66,.14),rgba(0,0,0,.24));
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  margin-bottom:16px;
}
.steam-detail-pack{
  font-size:82px;
  filter:drop-shadow(0 12px 28px rgba(245,200,66,.22));
}
.steam-detail-count{
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.steam-detail-panel h2{
  color:var(--text);
  font-size:24px;
  line-height:1.1;
  margin:0 0 7px;
}
.steam-detail-meta{
  color:var(--muted);
  font-size:13px;
  margin-bottom:10px;
}
.steam-detail-status{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:12px;
}
.steam-detail-status.unopened{
  color:#fde68a;
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.26);
}
.steam-detail-status.opened{
  color:#86efac;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.22);
}
.steam-detail-info{
  display:grid;
  gap:8px;
  margin:10px 0 14px;
}
.steam-detail-info div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:7px;
}
.steam-detail-info strong{
  color:var(--text);
  text-align:right;
}
.steam-detail-btn{
  width:100%;
  justify-content:center;
  margin:4px 0 12px;
}
.steam-detail-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.empty-detail p{
  color:var(--muted);
  line-height:1.5;
}
.steam-loading-panel{
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
@media(max-width:860px){
  .steam-inventory-layout{
    grid-template-columns:1fr;
  }
  .steam-inventory-controls{
    grid-template-columns:1fr;
  }
  .steam-inventory-top{
    align-items:flex-start;
    flex-direction:column;
  }
  .steam-inventory-grid{
    grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  }
}


.inventory-count-badge.muted{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:var(--muted);
}
.steam-inventory-slot.duplicate-card{
  border-color:rgba(96,165,250,.22);
}
.steam-inventory-slot.duplicate-card .steam-slot-count{
  background:rgba(96,165,250,.9);
}


/* ─────────────────────────────────────────────────────────────
   PHASE 1 THEME REFRESH — WORLD CUP 26 APP
   Visual refresh only. No game logic changes.
───────────────────────────────────────────────────────────── */
:root{
  --gold:#D4AF37;
  --gold-dark:#A77E16;
  --gold-soft:#F3D989;
  --green:#006747;
  --green-light:#0B8A5A;
  --dark:#111111;
  --card:#FFFFFF;
  --border:rgba(17,17,17,.10);
  --text:#111111;
  --muted:#667067;
  --cream:#F7F4EE;
  --cream-2:#EFE8DA;
  --surface:#FFFFFF;
  --surface-soft:#FBF8F1;
  --shadow:0 18px 45px rgba(17,17,17,.10);
}

body{
  background:
    radial-gradient(circle at 12% 5%, rgba(212,175,55,.13), transparent 28%),
    radial-gradient(circle at 96% 0%, rgba(0,103,71,.10), transparent 32%),
    linear-gradient(180deg,#fffdf8 0%, var(--cream) 42%, #efe8da 100%) !important;
  color:var(--text) !important;
}

body::before{
  background-image:
    linear-gradient(90deg,rgba(17,17,17,.025) 1px, transparent 1px),
    linear-gradient(0deg,rgba(17,17,17,.025) 1px, transparent 1px) !important;
  background-size:40px 40px !important;
  opacity:.6;
}

#main-app{
  max-width:1380px;
  margin:0 auto;
  padding:18px;
}

/* App-style header */
.hero-header.app-header{
  position:sticky;
  top:12px;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:88px;
  padding:14px 18px;
  margin:0 0 18px;
  border:1px solid rgba(17,17,17,.08);
  border-radius:28px;
  background:rgba(255,255,255,.82);
  box-shadow:0 20px 45px rgba(17,17,17,.10);
  backdrop-filter:blur(18px);
  overflow:hidden;
}

.hero-header.app-header .banner-slider{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.035;
  z-index:0;
}
.hero-header.app-header .main-banner{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.25);
}

.app-brand,
.app-header-right{
  position:relative;
  z-index:2;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:270px;
}

.app-brand-mark{
  position:relative;
  width:62px;
  height:62px;
  flex:0 0 62px;
  border-radius:18px;
  background:#050505;
  border:2px solid var(--gold);
  box-shadow:0 16px 32px rgba(17,17,17,.18);
  overflow:hidden;
}

.app-brand-26{
  position:absolute;
  inset:-18px -9px auto -9px;
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size:82px;
  line-height:.78;
  letter-spacing:-6px;
  opacity:.22;
  transform:scaleX(1.12);
}

.app-brand-dog{
  position:absolute;
  left:13px;
  top:8px;
  width:36px;
  height:36px;
  border-radius:999px;
  background-image:url('banner2.png');
  background-size:235px auto;
  background-position:20% 38%;
  border:2px solid rgba(255,255,255,.88);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}

.app-brand-cup{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  font-size:16px;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
}

.app-brand-title{
  color:var(--dark);
  font-size:20px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.app-brand-subtitle{
  margin-top:4px;
  color:var(--gold-dark);
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;
  font-weight:900;
  letter-spacing:2.4px;
  text-transform:uppercase;
}

.app-header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.sync-bar{
  position:static !important;
  background:#111 !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  padding:9px 13px !important;
}

.player-bar{
  position:static !important;
  display:flex;
  align-items:center;
  min-height:42px;
  background:#fff !important;
  border:1px solid rgba(17,17,17,.08) !important;
  color:var(--dark) !important;
  border-radius:999px !important;
  box-shadow:0 8px 20px rgba(17,17,17,.08);
}

/* App navigation */
.tabs{
  position:sticky;
  top:116px;
  z-index:55;
  display:flex;
  gap:8px;
  padding:10px;
  margin:0 0 22px;
  overflow-x:auto;
  border:1px solid rgba(17,17,17,.08);
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 35px rgba(17,17,17,.07);
  backdrop-filter:blur(18px);
}

.tab{
  min-height:48px;
  flex:0 0 auto;
  padding:0 16px !important;
  border:0 !important;
  border-radius:16px !important;
  background:transparent !important;
  color:#111 !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:13px !important;
  transition:.18s ease !important;
}

.tab:hover{
  background:rgba(212,175,55,.12) !important;
  color:#111 !important;
}

.tab.active{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)) !important;
  color:#111 !important;
  box-shadow:0 10px 20px rgba(212,175,55,.24);
}

/* Main content cards */
.section{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(17,17,17,.08);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:28px !important;
  margin-bottom:24px;
  backdrop-filter:blur(10px);
}

.section-title{
  color:#111 !important;
  font-size:38px !important;
  letter-spacing:1.6px !important;
  border-bottom:1px solid rgba(17,17,17,.08) !important;
  padding-bottom:14px;
  margin-bottom:22px !important;
}

.section-title::first-letter{
  color:var(--gold-dark);
}

/* Cards and panels */
.dashboard-card,
.admin-card,
.profile-panel,
.collection-country-section,
.match-card,
.group-card,
.rules-card,
.leaderboard-table,
.steam-inventory-shell,
.steam-detail-panel,
.steam-inventory-grid,
.setup-box,
.login-box{
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(17,17,17,.09) !important;
  color:#111 !important;
  border-radius:22px !important;
  box-shadow:0 12px 35px rgba(17,17,17,.08) !important;
}

.steam-inventory-shell{
  background:#fff !important;
}

.steam-inventory-grid{
  background:linear-gradient(180deg,#f8f4ea,#efe6d6) !important;
}

.steam-detail-panel{
  background:linear-gradient(180deg,#fff,#f8f4ea) !important;
}

.steam-brand-title,
.steam-detail-panel h2,
.inventory-title,
.maintenance-match,
.profile-panel-title,
.collection-section-title{
  color:#111 !important;
}

/* Buttons */
.btn,
.compare-button,
.mini-compare-btn{
  border-radius:999px !important;
  font-weight:900 !important;
  letter-spacing:.6px !important;
}

.btn-gold,
.btn-primary,
button.btn:not(.btn-outline){
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)) !important;
  color:#111 !important;
  border:0 !important;
  box-shadow:0 10px 20px rgba(212,175,55,.26) !important;
}

.btn-outline,
.compare-button{
  background:#fff !important;
  color:#064c35 !important;
  border:1px solid rgba(0,103,71,.20) !important;
}

/* Leaderboard */
.leaderboard-table{
  overflow:hidden;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

.leaderboard-table th{
  color:#697066 !important;
  background:#fbf8f1 !important;
  border-bottom:1px solid rgba(17,17,17,.08) !important;
}

.leaderboard-table td{
  color:#111 !important;
  border-bottom:1px solid rgba(17,17,17,.06) !important;
}

.score-pill{
  background:#111 !important;
  color:#fff !important;
  border-radius:999px !important;
}

.score-pill.leader{
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)) !important;
  color:#111 !important;
}

/* Inventory: premium app look */
.steam-inventory-slot{
  border-radius:18px !important;
  border:1px solid rgba(17,17,17,.08) !important;
  background:linear-gradient(180deg,#fff,#f3ead7) !important;
  box-shadow:0 8px 18px rgba(17,17,17,.08);
}

.steam-inventory-slot.empty{
  background:rgba(255,255,255,.46) !important;
  border-style:dashed !important;
}

.steam-inventory-slot.selected{
  outline:3px solid rgba(212,175,55,.72) !important;
}

.steam-slot-title{
  color:#111 !important;
}

.steam-slot-sub,
.steam-detail-meta,
.steam-detail-note,
.steam-detail-info div,
.steam-grid-header,
.steam-brand-sub,
.steam-search-placeholder{
  color:#697066 !important;
}

.steam-inventory-select,
.steam-search-placeholder input{
  background:#fff !important;
  color:#111 !important;
  border:1px solid rgba(17,17,17,.10) !important;
  border-radius:14px !important;
}

.inventory-count-badge{
  border:0 !important;
  background:#111 !important;
  color:#fff !important;
}

/* Forms */
input,
select,
textarea{
  background:#fff !important;
  color:#111 !important;
  border:1px solid rgba(17,17,17,.12) !important;
  border-radius:14px !important;
}

input::placeholder,
textarea::placeholder{
  color:#9a9a9a !important;
}

/* Login / setup */
#setup-screen,
#login-screen{
  background:
    radial-gradient(circle at 10% 10%, rgba(212,175,55,.22), transparent 36%),
    linear-gradient(180deg,#fffdf8,#efe8da) !important;
}

.login-box h2,
.setup-box h2{
  color:#111 !important;
}

/* Mobile app behavior */
@media(max-width:760px){
  #main-app{
    padding:10px 10px 88px;
  }

  .hero-header.app-header{
    top:8px;
    min-height:76px;
    border-radius:22px;
    padding:10px 12px;
  }

  .app-brand-copy{
    display:none;
  }

  .app-brand{
    min-width:auto;
  }

  .sync-bar{
    display:none !important;
  }

  .player-bar{
    max-width:210px;
    overflow:hidden;
  }

  .tabs{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    top:auto;
    margin:0;
    z-index:100;
    justify-content:space-around;
    border-radius:24px;
    box-shadow:0 -12px 35px rgba(17,17,17,.16);
  }

  .tab{
    min-width:58px;
    max-width:74px;
    padding:0 8px !important;
    font-size:10px !important;
    white-space:normal;
    line-height:1.05;
  }

  .tab:nth-child(5),
  .tab:nth-child(8),
  .tab:nth-child(9),
  .tab:nth-child(10),
  .tab:nth-child(11){
    display:none;
  }

  .section{
    padding:18px !important;
    border-radius:22px;
  }

  .section-title{
    font-size:30px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   PHASE 2 — APP LAYOUT
   Desktop sidebar + app dashboard. Logic unchanged.
───────────────────────────────────────────────────────────── */
@media(min-width:961px){
  #main-app{
    max-width:none !important;
    padding:24px 28px 28px 292px !important;
  }

  .hero-header.app-header{
    position:fixed !important;
    left:18px;
    top:18px;
    bottom:auto;
    width:246px;
    min-height:226px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:22px 16px !important;
    margin:0 !important;
    border-radius:28px 28px 20px 20px !important;
    background:
      radial-gradient(circle at 50% 8%, rgba(212,175,55,.20), transparent 34%),
      linear-gradient(180deg,#070707 0%,#111 100%) !important;
    border:1px solid rgba(212,175,55,.24) !important;
    box-shadow:0 22px 50px rgba(0,0,0,.24) !important;
    color:#fff !important;
  }

  .hero-header.app-header .banner-slider{
    opacity:.12 !important;
  }

  .app-brand{
    flex-direction:column;
    min-width:0 !important;
    gap:12px !important;
    text-align:center;
  }

  .app-brand-mark{
    width:132px !important;
    height:132px !important;
    flex-basis:132px !important;
    margin:auto;
    border-radius:34px !important;
    background:#050505 !important;
  }

  .app-brand-26{
    font-size:172px !important;
    inset:-38px -21px auto -21px !important;
    opacity:.18 !important;
    letter-spacing:-12px !important;
  }

  .app-brand-dog{
    left:28px !important;
    top:12px !important;
    width:76px !important;
    height:76px !important;
    background-size:460px auto !important;
  }

  .app-brand-cup{
    bottom:17px !important;
    font-size:33px !important;
  }

  .app-brand-title{
    color:#fff !important;
    font-size:25px !important;
  }

  .app-brand-subtitle{
    color:var(--gold) !important;
    font-size:18px !important;
  }

  .app-header-right{
    width:100%;
    justify-content:stretch !important;
    flex-direction:column;
    margin-top:8px;
  }

  .hero-header .sync-bar{
    width:100%;
    justify-content:center;
    background:rgba(255,255,255,.08) !important;
    color:#f5f5f5 !important;
  }

  .hero-header .player-bar{
    width:100%;
    border-radius:18px !important;
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    color:#fff !important;
    box-shadow:none !important;
    padding:10px 12px;
  }

  .tabs{
    position:fixed !important;
    left:18px !important;
    top:262px !important;
    bottom:18px !important;
    width:246px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin:0 !important;
    padding:14px !important;
    border-radius:20px 20px 28px 28px !important;
    background:linear-gradient(180deg,#070707,#111) !important;
    border:1px solid rgba(212,175,55,.20) !important;
    box-shadow:0 24px 55px rgba(0,0,0,.24) !important;
  }

  .tab{
    width:100% !important;
    justify-content:flex-start !important;
    text-align:left !important;
    min-height:50px !important;
    padding:0 16px !important;
    border-radius:14px !important;
    color:#fff !important;
    background:transparent !important;
    font-size:15px !important;
  }

  .tab:hover{
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
  }

  .tab.active{
    background:linear-gradient(135deg,var(--gold-soft),var(--gold)) !important;
    color:#111 !important;
    box-shadow:0 12px 22px rgba(212,175,55,.25);
  }

  .hero-summary{
    display:none !important;
  }

  .section{
    max-width:1180px;
    margin:0 auto 26px !important;
  }

  .section#tab-dashboard{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    backdrop-filter:none !important;
  }

  #tab-dashboard > .section-title{
    display:none;
  }
}

/* App dashboard */
.app-dashboard{
  display:grid;
  gap:18px;
}

.app-welcome{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 4px;
}

.app-welcome-kicker{
  font-size:16px;
  color:#111;
  margin-bottom:4px;
}

.app-welcome h2{
  font-size:38px;
  line-height:1;
  color:#111;
  margin:0;
  letter-spacing:-.8px;
}

.app-role-pill{
  padding:8px 12px;
  border-radius:999px;
  background:#eaf4ef;
  color:#006747;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.app-hero-stats{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:22px;
  box-shadow:0 14px 36px rgba(17,17,17,.08);
  overflow:hidden;
}

.app-hero-stat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:20px 22px;
  border-right:1px solid rgba(17,17,17,.08);
}

.app-hero-stat:last-child{
  border-right:0;
}

.app-stat-label{
  color:#667067;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:800;
}

.app-hero-stat strong{
  display:block;
  font-size:22px;
  color:#111;
  margin:3px 0;
}

.app-hero-stat small{
  color:#667067;
  font-size:12px;
}

.app-stat-icon,
.level-badge{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#111;
  font-size:26px;
  font-weight:900;
  flex:0 0 58px;
}

.level-badge{
  clip-path:polygon(50% 0%, 92% 22%, 92% 76%, 50% 100%, 8% 76%, 8% 22%);
  border-radius:0;
  font-size:24px;
}

.app-xp-bar{
  width:150px;
  height:7px;
  background:#efe8da;
  border-radius:999px;
  overflow:hidden;
  margin:7px 0 4px;
}

.app-xp-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold));
  border-radius:999px;
}

.app-dashboard-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1fr;
  gap:16px;
}

.app-panel,
.app-next-match-card{
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(17,17,17,.08);
  padding:22px;
}

.app-next-match-card{
  min-height:270px;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.74)),
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.25),transparent 35%),
    #111;
  color:#fff;
  overflow:hidden;
}

.app-card-kicker{
  color:var(--gold);
  font-size:17px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900;
  letter-spacing:1.3px;
  text-transform:uppercase;
  margin-bottom:18px;
}

.app-match-teams{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
}

.app-team-pill{
  min-height:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
}

.app-team-pill span{
  font-size:30px;
}

.app-team-pill strong{
  font-size:13px;
  text-transform:uppercase;
}

.app-vs{
  font-size:34px;
  font-weight:900;
}

.app-match-date{
  text-align:center;
  color:#fff;
  margin:18px 0 12px;
  font-weight:800;
}

.app-wide-btn{
  width:100%;
  justify-content:center;
  margin-top:12px;
}

.app-pack-card,
.app-rank-card{
  text-align:center;
}

.app-pack-visual{
  position:relative;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-pack-stack{
  font-size:68px;
  filter:drop-shadow(0 14px 22px rgba(17,17,17,.18));
}

.app-pack-count{
  position:absolute;
  top:4px;
  right:28%;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  color:#111;
  font-size:22px;
  font-weight:900;
}

.app-rank-medal{
  width:118px;
  height:118px;
  margin:8px auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#111;
  font-size:46px;
  font-weight:900;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  clip-path:polygon(50% 0%, 88% 18%, 100% 56%, 73% 92%, 27% 92%, 0 56%, 12% 18%);
}

.app-rank-medal span{
  font-size:13px;
  margin-top:-8px;
}

.app-dashboard-lower{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:16px;
}

.app-dashboard-bottom{
  display:grid;
  grid-template-columns:.9fr 1.15fr .85fr;
  gap:16px;
}

.app-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.app-panel-head h3{
  font-size:20px;
  color:#111;
  margin:0;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.app-text-btn{
  border:0;
  background:transparent;
  color:#006747;
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  cursor:pointer;
}

.app-leaderboard-rows{
  display:grid;
  gap:6px;
}

.app-leaderboard-row{
  display:grid;
  grid-template-columns:28px 34px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
}

.app-leaderboard-row.me{
  background:linear-gradient(90deg,rgba(212,175,55,.18),rgba(212,175,55,.06));
}

.app-rank{
  color:#667067;
  font-weight:800;
}

.app-avatar{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.app-player{
  font-weight:800;
  color:#111;
}

.app-points{
  color:var(--gold-dark);
  font-weight:900;
}

.app-collection-widget{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:center;
}

.app-collection-widget .app-panel-head{
  grid-column:1 / -1;
  margin-bottom:0;
}

.app-progress-circle{
  --pct:0;
  width:138px;
  height:138px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle closest-side,#fff 72%,transparent 73% 100%),
    conic-gradient(var(--green) calc(var(--pct)*1%), #eadfca 0);
}

.app-progress-circle strong{
  font-size:32px;
  color:#111;
}

.app-progress-circle span{
  font-size:11px;
  color:#667067;
  text-transform:uppercase;
  font-weight:900;
}

.app-collection-lines{
  display:grid;
  gap:12px;
}

.app-collection-lines div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid rgba(17,17,17,.08);
  padding-bottom:8px;
}

.app-collection-lines span{
  color:#667067;
}

.app-collection-lines b{
  color:#111;
}

.app-mini-progress{
  height:8px;
  background:#efe8da;
  border-radius:999px;
  overflow:hidden;
  margin:18px 0;
}

.app-mini-progress span{
  display:block;
  height:100%;
  background:var(--green);
}

.app-achievement-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.app-achievement-chip{
  text-align:center;
  border-right:1px solid rgba(17,17,17,.08);
  padding:8px;
}

.app-achievement-chip:last-child{
  border-right:0;
}

.app-achievement-chip div{
  width:64px;
  height:64px;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#111;
  border:2px solid var(--gold);
  font-size:26px;
}

.app-achievement-chip strong{
  display:block;
  color:#111;
  font-size:13px;
}

.app-achievement-chip span{
  display:block;
  margin-top:6px;
  color:#006747;
  font-weight:900;
}

.app-quick-actions{
  display:grid;
  gap:4px;
}

.app-quick-actions button{
  display:grid;
  grid-template-columns:26px 1fr auto;
  gap:10px;
  align-items:center;
  border:0;
  background:#fff;
  border-bottom:1px solid rgba(17,17,17,.08);
  padding:12px 4px;
  color:#111;
  text-align:left;
  font-weight:700;
  cursor:pointer;
}

.app-quick-actions button:last-child{
  border-bottom:0;
}

.app-missing-panel{
  margin-top:0;
}

@media(max-width:1180px) and (min-width:961px){
  .app-hero-stats,
  .app-dashboard-grid,
  .app-dashboard-lower,
  .app-dashboard-bottom{
    grid-template-columns:1fr 1fr;
  }

  .app-next-match-card{
    grid-column:1 / -1;
  }
}

@media(max-width:960px){
  #main-app{
    padding:12px 12px 92px !important;
  }

  .section#tab-dashboard{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-dashboard > .section-title{
    display:none;
  }

  .app-welcome h2{
    font-size:30px;
  }

  .app-hero-stats,
  .app-dashboard-grid,
  .app-dashboard-lower,
  .app-dashboard-bottom{
    grid-template-columns:1fr;
  }

  .app-hero-stat{
    border-right:0;
    border-bottom:1px solid rgba(17,17,17,.08);
  }

  .app-hero-stat:last-child{
    border-bottom:0;
  }

  .app-collection-widget{
    grid-template-columns:1fr;
  }

  .app-progress-circle{
    margin:auto;
  }

  .app-achievement-row{
    grid-template-columns:1fr;
  }

  .app-achievement-chip{
    border-right:0;
    border-bottom:1px solid rgba(17,17,17,.08);
  }

  .app-achievement-chip:last-child{
    border-bottom:0;
  }
}


/* ─────────────────────────────────────────────────────────────
   EXACT APP ICONS / HTML-SVG SYSTEM
   Replaces emoji-like UI with code-only premium dark SVG icons.
───────────────────────────────────────────────────────────── */
.app-svg-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  color:currentColor;
  vertical-align:middle;
}
.app-svg-icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tab .app-svg-icon{
  margin-right:12px;
  color:currentColor;
}
.tab.active .app-svg-icon{
  color:#111;
}
.tab-label{
  display:inline-flex;
  align-items:center;
}

/* Sidebar exact light layout */
@media(min-width:961px){
  .hero-header.app-header,
  .tabs{
    background:#fffdf8 !important;
    border-color:rgba(17,17,17,.08) !important;
    box-shadow:0 18px 45px rgba(17,17,17,.07) !important;
  }

  .hero-header.app-header{
    color:#111 !important;
  }

  .tabs{
    background:#fffdf8 !important;
  }

  .tab{
    color:#111 !important;
    font-family:'Barlow',sans-serif !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:.1px !important;
  }

  .tab:hover{
    background:#f6edd8 !important;
    color:#111 !important;
  }

  .tab.active{
    background:linear-gradient(135deg,#f4d88f,#e0b846) !important;
    color:#111 !important;
  }

  .hero-header .sync-bar{
    background:#111 !important;
    color:#fff !important;
  }

  .hero-header .player-bar{
    background:#fff !important;
    color:#111 !important;
    border-color:rgba(17,17,17,.10) !important;
  }
}

/* Brand: make logo closer to mockup light sidebar */
@media(min-width:961px){
  .app-brand-title{
    color:#a47712 !important;
    font-size:23px !important;
  }
  .app-brand-subtitle{
    color:#8a610e !important;
  }
  .app-brand-mark{
    box-shadow:0 16px 34px rgba(17,17,17,.12) !important;
  }
}

/* Dashboard SVG icon placement */
.app-panel-head h3{
  display:flex;
  align-items:center;
  gap:10px;
}
.app-panel-head h3 .app-svg-icon{
  color:#111;
}
.app-next-match-card .app-svg-icon{
  color:#fff;
}
.app-stat-icon .app-svg-icon,
.app-pack-stack .app-svg-icon{
  width:52px;
  height:52px;
  color:#111;
}
.app-pack-stack .app-svg-icon{
  width:82px;
  height:82px;
  color:#d4af37;
  filter:drop-shadow(0 12px 18px rgba(17,17,17,.16));
}
.app-quick-actions button{
  grid-template-columns:28px 1fr auto !important;
}
.app-quick-actions .app-svg-icon{
  color:#111;
}
.app-achievement-chip .app-svg-icon{
  width:34px;
  height:34px;
  color:#d4af37;
}
.app-achievement-chip div{
  color:#d4af37;
}
.app-match-date{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.app-match-date .app-svg-icon{
  width:18px;
  height:18px;
}

/* Rank medal / laurel closer to mockup */
.app-rank-medal{
  position:relative;
  background:radial-gradient(circle at 35% 25%, #ffe8a3, #d4af37 52%, #9f7318 100%) !important;
  box-shadow:inset 0 3px 8px rgba(255,255,255,.45), 0 14px 24px rgba(136,96,14,.18);
}
.app-rank-medal::before,
.app-rank-medal::after{
  content:'';
  position:absolute;
  width:34px;
  height:84px;
  top:18px;
  border:4px solid #b8860b;
  border-top:0;
  border-bottom:0;
  opacity:.75;
}
.app-rank-medal::before{
  left:-16px;
  border-right:0;
  border-radius:90% 0 0 90%;
  transform:rotate(-18deg);
}
.app-rank-medal::after{
  right:-16px;
  border-left:0;
  border-radius:0 90% 90% 0;
  transform:rotate(18deg);
}

/* Pack card with simple coded pack */
.app-pack-card{
  background:#fff !important;
}
.app-pack-visual{
  height:112px !important;
}
.app-pack-count{
  right:18% !important;
  top:8px !important;
  background:radial-gradient(circle at 35% 25%, #ffe8a3, #d4af37 60%, #a47712) !important;
}

/* Header top-right coded icons */
.app-header-right::before{
  content:'';
}
.app-top-mini-icons{
  display:flex;
  gap:18px;
  align-items:center;
}


.app-coin-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:#f3efe8;
  color:#111;
  font-weight:900;
  box-shadow:0 8px 18px rgba(17,17,17,.06);
}
.app-coin-pill .app-svg-icon{
  width:22px;
  height:22px;
  color:#c18a16;
}
.app-mini-icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111;
  border-radius:50%;
}
.app-mini-icon .app-svg-icon{
  width:25px;
  height:25px;
}
@media(min-width:961px){
  .hero-header.app-header .app-top-mini-icons{
    display:none;
  }
}
@media(max-width:960px){
  .app-top-mini-icons{
    display:flex;
  }
}


/* ─────────────────────────────────────────────────────────────
   FUT / STEAM CARD FRAMEWORK V1
   Ratings are generated by rarity:
   Common 70-79, Rare 80-84, Epic 85-89, Legendary 90-94,
   Mythic / Achievement Exclusive 95-99.
───────────────────────────────────────────────────────────── */
.card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) !important;
  gap:18px !important;
  align-items:start;
}

.fut-card{
  position:relative;
  aspect-ratio: 0.72 / 1;
  min-height:244px;
  border-radius:22px;
  padding:7px;
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .18s ease, filter .18s ease;
}

.fut-card:hover{
  transform:translateY(-5px) scale(1.015);
}

.fut-card.locked{
  filter:grayscale(.7) saturate(.55);
  opacity:.68;
}

.fut-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  background:linear-gradient(135deg,#d7d7d7,#9c9c9c,#efefef);
  z-index:0;
}

.fut-card.rarity-common::before{
  background:linear-gradient(135deg,#d9d9d9 0%,#898989 48%,#f4f4f4 100%);
}
.fut-card.rarity-rare::before{
  background:linear-gradient(135deg,#e6f6ff 0%,#2d8cff 45%,#0b2f85 100%);
}
.fut-card.rarity-epic::before{
  background:linear-gradient(135deg,#ffe6ff 0%,#8a35ff 42%,#2d0d61 100%);
}
.fut-card.rarity-legendary::before{
  background:linear-gradient(135deg,#fff3b0 0%,#d4af37 42%,#7c5108 100%);
}
.fut-card.rarity-mythic::before{
  background:linear-gradient(135deg,#0a0a0a 0%,#1c1c1c 35%,#d4af37 62%,#050505 100%);
}
.fut-card.rarity-achievement-exclusive::before,
.fut-card.rarity-achievement-exclusive-card::before{
  background:linear-gradient(135deg,#0b6b45 0%,#d4af37 45%,#052d20 100%);
}

.fut-card-inner{
  position:relative;
  z-index:2;
  height:100%;
  border-radius:17px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.72),rgba(255,255,255,.18) 32%,rgba(255,255,255,.04) 58%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.58);
  box-shadow:inset 0 1px 18px rgba(255,255,255,.55), inset 0 -14px 24px rgba(0,0,0,.10);
}

.fut-card.rarity-mythic .fut-card-inner,
.fut-card.rarity-achievement-exclusive .fut-card-inner{
  background:
    radial-gradient(circle at 50% 20%,rgba(212,175,55,.42),rgba(255,255,255,.07) 36%,rgba(0,0,0,.12) 64%),
    linear-gradient(180deg,rgba(24,24,24,.94),rgba(4,4,4,.86));
  color:#fff;
  border-color:rgba(212,175,55,.38);
}

.fut-card-shine{
  position:absolute;
  inset:-70%;
  z-index:1;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.45) 48%,transparent 58%);
  transform:translateX(-35%) rotate(8deg);
  opacity:.28;
  pointer-events:none;
}

.fut-card.rarity-legendary .fut-card-shine,
.fut-card.rarity-mythic .fut-card-shine,
.fut-card.rarity-achievement-exclusive .fut-card-shine{
  animation:futShine 3.6s ease-in-out infinite;
}

@keyframes futShine{
  0%,45%{transform:translateX(-60%) rotate(8deg);opacity:.02;}
  70%{transform:translateX(46%) rotate(8deg);opacity:.34;}
  100%{transform:translateX(70%) rotate(8deg);opacity:.02;}
}

.fut-card-top{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:4px;
}

.fut-rating{
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  line-height:.85;
  color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.fut-position{
  min-width:36px;
  padding:5px 7px;
  border-radius:999px;
  background:rgba(17,17,17,.12);
  color:#111;
  font-size:13px;
  font-weight:900;
  text-align:center;
}

.fut-card.rarity-mythic .fut-rating,
.fut-card.rarity-mythic .fut-position,
.fut-card.rarity-achievement-exclusive .fut-rating,
.fut-card.rarity-achievement-exclusive .fut-position{
  color:#fff;
}

.fut-card.rarity-mythic .fut-position,
.fut-card.rarity-achievement-exclusive .fut-position{
  background:rgba(212,175,55,.22);
}

.fut-card-art{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:2px 0 10px;
}

.fut-card-silhouette{
  width:94px;
  height:94px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 35% 24%,rgba(255,255,255,.65),transparent 22%),
    linear-gradient(145deg,rgba(17,17,17,.16),rgba(17,17,17,.34));
  border:2px solid rgba(255,255,255,.65);
  box-shadow:0 18px 28px rgba(0,0,0,.16);
}

.fut-card-silhouette span{
  font-family:'Bebas Neue',sans-serif;
  font-size:36px;
  letter-spacing:1px;
  color:rgba(17,17,17,.72);
}

.fut-card.rarity-mythic .fut-card-silhouette span,
.fut-card.rarity-achievement-exclusive .fut-card-silhouette span{
  color:#fff;
}

.fut-card-photo{
  width:100%;
  height:122px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}

.fut-card-name{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#111;
  font-weight:1000;
  font-size:14px;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.fut-card.rarity-mythic .fut-card-name,
.fut-card.rarity-achievement-exclusive .fut-card-name{
  color:#fff;
}

.fut-card-country{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:7px 8px;
  margin:8px 0;
  border-radius:999px;
  background:rgba(255,255,255,.52);
  color:#111;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.fut-card.rarity-mythic .fut-card-country,
.fut-card.rarity-achievement-exclusive .fut-card-country{
  background:rgba(255,255,255,.10);
  color:#fff;
}

.fut-card-footer{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:auto;
}

.fut-rarity-label{
  flex:1;
  min-width:0;
  padding:5px 8px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.fut-qty,
.fut-locked{
  padding:5px 7px;
  border-radius:999px;
  background:rgba(17,17,17,.10);
  color:#111;
  font-size:10px;
  font-weight:1000;
}

.fut-card.rarity-mythic .fut-qty,
.fut-card.rarity-mythic .fut-locked,
.fut-card.rarity-achievement-exclusive .fut-qty,
.fut-card.rarity-achievement-exclusive .fut-locked{
  background:rgba(212,175,55,.24);
  color:#fff;
}

.fut-card-reveal-size{
  width:min(310px,72vw);
  min-height:430px;
  margin:18px auto 22px;
}

.fut-card-reveal-size .fut-rating{
  font-size:58px;
}
.fut-card-reveal-size .fut-position{
  font-size:16px;
  min-width:48px;
}
.fut-card-reveal-size .fut-card-silhouette{
  width:150px;
  height:150px;
}
.fut-card-reveal-size .fut-card-silhouette span{
  font-size:56px;
}
.fut-card-reveal-size .fut-card-name{
  font-size:22px;
}
.fut-card-reveal-size .fut-card-country{
  font-size:13px;
}

/* Legacy card reveal wrapper cleanup */
.card-reveal-title{
  color:#111;
}
.card-reveal-modal .card-reveal-title{
  color:#fff;
}
.card-reveal-modal .card-reveal-sub,
.card-reveal-modal .card-reveal-kicker{
  color:rgba(255,255,255,.72);
}

/* Small screens */
@media(max-width:640px){
  .card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .fut-card{
    min-height:218px;
    border-radius:18px;
  }
  .fut-card-inner{
    padding:10px;
    border-radius:14px;
  }
  .fut-rating{
    font-size:32px;
  }
  .fut-card-silhouette{
    width:76px;
    height:76px;
  }
  .fut-card-name{
    font-size:12px;
  }
}


/* ─────────────────────────────────────────────────────────────
   COLLECTION SETS + REWARDS
───────────────────────────────────────────────────────────── */
.sets-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:26px;
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 10%,rgba(212,175,55,.22),transparent 32%),
    linear-gradient(135deg,#111,#252019);
  color:#fff;
  margin-bottom:20px;
  box-shadow:0 18px 42px rgba(17,17,17,.16);
}
.sets-kicker{
  color:var(--gold);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:13px;
  margin-bottom:8px;
}
.sets-hero h2{
  margin:0;
  font-size:34px;
  line-height:1;
}
.sets-hero p{
  margin:10px 0 0;
  color:rgba(255,255,255,.72);
  max-width:580px;
}
.sets-hero-stats{
  display:flex;
  gap:10px;
}
.sets-hero-stats div{
  min-width:98px;
  padding:14px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
}
.sets-hero-stats strong{
  display:block;
  font-size:28px;
  color:var(--gold);
}
.sets-hero-stats span{
  color:rgba(255,255,255,.7);
  font-size:11px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:1px;
}
.sets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:16px;
}
.collection-set-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  padding:18px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 14px 34px rgba(17,17,17,.08);
}
.collection-set-card.complete{
  border-color:rgba(212,175,55,.38);
}
.collection-set-card.claimed{
  opacity:.76;
}
.set-card-glow{
  position:absolute;
  inset:-60px -60px auto auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(212,175,55,.14);
  filter:blur(18px);
}
.collection-set-card.tier-mythic .set-card-glow{background:rgba(20,20,20,.18);}
.collection-set-card.tier-gold .set-card-glow{background:rgba(212,175,55,.22);}
.collection-set-card.tier-silver .set-card-glow{background:rgba(120,140,180,.14);}
.set-card-top{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:12px;
  align-items:center;
}
.set-icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#111;
  color:#fff;
  font-size:28px;
  box-shadow:0 10px 24px rgba(17,17,17,.12);
}
.set-name{
  font-size:18px;
  font-weight:1000;
  color:#111;
}
.set-desc{
  color:#667067;
  font-size:12px;
  margin-top:3px;
}
.set-reward{
  align-self:start;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#f4d88f,#d4af37);
  color:#111;
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  white-space:nowrap;
}
.set-progress-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin:18px 0 8px;
}
.set-progress-row strong{
  color:#111;
  font-size:24px;
}
.set-progress-row span{
  color:#667067;
  font-size:12px;
  margin-left:6px;
  font-weight:800;
}
.set-progress-pct{
  color:#006747;
  font-weight:1000;
}
.set-progress-bar{
  height:10px;
  background:#eee4cf;
  border-radius:999px;
  overflow:hidden;
}
.set-progress-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#006747,#d4af37);
  border-radius:999px;
}
.set-preview-strip{
  display:flex;
  gap:7px;
  margin:16px 0;
}
.set-preview-card{
  width:44px;
  height:58px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:linear-gradient(180deg,#fff,#efe5cf);
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 6px 14px rgba(17,17,17,.06);
}
.set-preview-card strong{
  color:#111;
  font-size:11px;
}
.set-preview-card.empty{
  opacity:.44;
  border-style:dashed;
}
.set-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
}
.set-actions .btn{
  justify-content:center;
  min-height:42px;
}
@media(max-width:720px){
  .sets-hero{
    align-items:stretch;
    flex-direction:column;
  }
  .sets-hero-stats{
    width:100%;
  }
  .sets-hero-stats div{
    flex:1;
    min-width:0;
  }
  .sets-grid{
    grid-template-columns:1fr;
  }
  .set-card-top{
    grid-template-columns:48px 1fr;
  }
  .set-reward{
    grid-column:1 / -1;
    justify-self:start;
  }
}


/* Dashboard rectification patch - safe CSS only */
.app-pack-card .app-card-kicker{color:#111 !important;}
.app-pack-card .btn-gold,.app-pack-card .app-wide-btn,.app-pack-card button{background:#0b8f4d !important;border-color:#0b8f4d !important;color:#fff !important;}
.app-pack-card .btn-gold:hover,.app-pack-card .app-wide-btn:hover,.app-pack-card button:hover{background:#087a41 !important;}
.app-rank-card .app-card-kicker{color:#111 !important;}
.app-rank-medal{background:radial-gradient(circle at 35% 25%, #fff0b8 0%, #e1b744 46%, #b88416 75%, #7a4f08 100%) !important;color:#111 !important;border:1px solid rgba(122,79,8,.25) !important;}
.app-rank-medal::before,.app-rank-medal::after{border-color:#b88416 !important;}
.app-team-flag-img,.app-favourite-flag-img{flex:0 0 auto;}
.app-team-flag-img{width:54px !important;height:36px !important;object-fit:cover !important;border-radius:7px !important;border:1px solid rgba(255,255,255,.25) !important;box-shadow:0 8px 18px rgba(0,0,0,.30) !important;}
.app-favourite-flag-img{width:42px !important;height:28px !important;object-fit:cover !important;border-radius:6px !important;border:1px solid rgba(0,0,0,.10) !important;}
.app-hero-stat .app-favourite-flag-img + div{min-width:0;}

/* CUSTOM BRAND LOGO UPDATE - dog trophy image */
.app-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

.app-brand-mark{
  width:92px !important;
  height:auto !important;
  flex:0 0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.app-logo-img{
  width:92px !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
}

.app-brand-26,
.app-brand-dog,
.app-brand-cup{
  display:none !important;
}

@media(min-width:961px){
  .app-brand{
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    min-width:0 !important;
    text-align:center !important;
  }

  .app-brand-mark{
    width:150px !important;
  }

  .app-logo-img{
    width:150px !important;
  }

  .app-brand-title{
    color:#a47712 !important;
    font-size:24px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    line-height:1 !important;
  }

  .app-brand-subtitle{
    color:#a47712 !important;
    font-size:22px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    line-height:1 !important;
    margin-top:2px !important;
  }
}

@media(max-width:960px){
  .app-brand{
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
    text-align:center !important;
  }

  .app-brand-mark{
    width:118px !important;
  }

  .app-logo-img{
    width:118px !important;
  }

  .app-brand-title{
    color:#fff !important;
    font-size:24px !important;
  }

  .app-brand-subtitle{
    color:var(--gold) !important;
    font-size:18px !important;
  }
}


/* ---------------------------------------------------------
   Dashboard + Leaderboard visual fixes requested 2026-06-20
--------------------------------------------------------- */

/* Next match card: stadium/football pitch background */
.app-next-match-card{
  position:relative !important;
  overflow:hidden !important;
  color:#fff !important;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.38) 42%,rgba(0,0,0,.82) 100%),
    url("images/stadium-bg.png") center/cover no-repeat !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.28) !important;
}
.app-next-match-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 70% 0%,rgba(255,255,255,.28),transparent 30%);
  pointer-events:none;
  z-index:0;
}
.app-next-match-card > *{position:relative;z-index:1;}
.app-next-match-card .app-card-kicker{
  color:#f5c842 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.app-next-match-card .app-match-teams{
  margin-top:8px;
}
.app-next-match-card .app-team-pill{
  background:rgba(0,0,0,.22) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.30);
}
.app-next-match-card .app-team-pill strong,
.app-next-match-card .app-vs,
.app-next-match-card .app-match-date{
  color:#fff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.78);
}
.app-next-match-card .app-team-pill strong,
.app-next-match-card .app-match-date,
.app-next-match-card .app-prediction-compact-btn{
  font-weight:500 !important;
}
.app-next-match-card .app-prediction-compact-btn{
  width:auto !important;
  min-width:220px;
  max-width:260px;
  display:flex !important;
  margin:18px auto 0 !important;
  padding:11px 26px !important;
  border-radius:10px !important;
  letter-spacing:.6px !important;
  text-transform:uppercase;
}

/* Open packs button always green */
.app-pack-card .app-card-kicker{
  color:#111 !important;
}
.app-pack-card .btn,
.app-pack-card .btn-gold,
.app-pack-card .app-wide-btn,
.app-pack-card button{
  background:#0b8f4d !important;
  border:1px solid #0b8f4d !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(11,143,77,.18) !important;
}
.app-pack-card .btn:hover,
.app-pack-card .btn-gold:hover,
.app-pack-card .app-wide-btn:hover,
.app-pack-card button:hover{
  background:#087a41 !important;
  border-color:#087a41 !important;
}

/* Dashboard leaderboard: gold trophy, black badges with gold letters, top 5 highlight */
.app-leaderboard-mini .app-panel-head h3,
.app-leaderboard-mini .app-panel-head h3 .app-svg-icon{
  color:#111 !important;
}
.app-leaderboard-mini .app-panel-head h3 .app-svg-icon[data-icon="trophy"],
.app-leaderboard-mini .app-panel-head h3 .app-svg-icon{
  color:#c9991a !important;
}
.app-leaderboard-mini .app-avatar{
  background:#050505 !important;
  color:#f5c842 !important;
  border:1px solid rgba(245,200,66,.42) !important;
}
.app-leaderboard-mini .app-leaderboard-row.top-five{
  background:linear-gradient(90deg,rgba(245,200,66,.20),rgba(245,200,66,.075)) !important;
}
.app-leaderboard-mini .app-leaderboard-row.me{
  background:linear-gradient(90deg,rgba(245,200,66,.34),rgba(245,200,66,.12)) !important;
}
.app-leaderboard-mini .app-player{
  color:#111 !important;
  font-weight:600 !important;
}

/* League rank cup/medal in dashboard remains golden */
.app-rank-medal{
  background:radial-gradient(circle at 35% 25%,#fff2bd 0%,#f5c842 42%,#c9991a 72%,#7a4f08 100%) !important;
  color:#111 !important;
  border:1px solid rgba(122,79,8,.35) !important;
}
.app-rank-medal::before,
.app-rank-medal::after{
  border-color:#c9991a !important;
}

/* Leaderboard tab: dark background, white names, grey points pills except first */
#tab-leaderboard{
  background:#050505 !important;
  border-radius:18px;
  padding-top:22px !important;
  color:#fff !important;
}
#tab-leaderboard .section-title,
#tab-leaderboard .scoring-legend,
#tab-leaderboard .official-data-pill,
#tab-leaderboard .podium{
  display:none !important;
}
#leaderboard-container{
  background:#050505 !important;
  color:#fff !important;
}
#leaderboard-container .leaderboard-table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 8px !important;
  background:#050505 !important;
}
#leaderboard-container .leaderboard-table th{
  color:#c9c9bd !important;
  background:#050505 !important;
  border:0 !important;
  font-weight:500 !important;
  letter-spacing:5px !important;
}
#leaderboard-container .leaderboard-table tbody tr,
#leaderboard-container .leaderboard-table tbody tr[style]{
  background:transparent !important;
}
#leaderboard-container .leaderboard-table tbody td{
  background:#242824 !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.055) !important;
  border-bottom:1px solid rgba(255,255,255,.055) !important;
  font-weight:400 !important;
}
#leaderboard-container .leaderboard-table tbody td:first-child{
  border-left:1px solid rgba(255,255,255,.055) !important;
  border-radius:12px 0 0 12px !important;
}
#leaderboard-container .leaderboard-table tbody td:last-child{
  border-right:1px solid rgba(255,255,255,.055) !important;
  border-radius:0 12px 12px 0 !important;
}
#leaderboard-container .leaderboard-table tbody tr:hover td{
  background:#2d322d !important;
}
#leaderboard-container .player-name,
#leaderboard-container .player-name *:not(.rank-move):not(.streak-pill):not(.mini-compare-btn):not(.score-pill):not(.points-pop),
#leaderboard-container .profile-clickable{
  color:#fff !important;
}
#leaderboard-container .player-avatar{
  background:#050505 !important;
  color:#f5c842 !important;
  border-color:rgba(245,200,66,.42) !important;
}
#leaderboard-container .rank-move{
  background:rgba(35,163,82,.16) !important;
  color:#20c76b !important;
}
#leaderboard-container .score-pill{
  background:#5c625c !important;
  color:#fff !important;
  border-radius:999px !important;
  min-width:58px !important;
  padding:8px 16px !important;
  font-family:'Barlow',sans-serif !important;
  font-size:17px !important;
  font-weight:700 !important;
}
#leaderboard-container .score-pill.leader{
  background:#f5c842 !important;
  color:#050505 !important;
}
#leaderboard-container .points-pop{
  color:#f5c842 !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:500 !important;
}
#leaderboard-container td[style]{
  color:#fff !important;
}
@media(max-width:700px){
  .app-next-match-card .app-prediction-compact-btn{
    width:100% !important;
    max-width:none;
  }
}


/* Hall of Fame visibility fixes */
.hall-winner,
.mvp-player{
  color: var(--gold) !important;
}
.hall-title,
.mvp-kicker,
.hall-card small,
.hall-card .muted,
.hall-card .stage,
.hall-card .subtitle{
  color: var(--gold) !important;
}

/* ==========================================================
   MATCHES SCREEN - light layout + premium featured match
   Inspirado no layout Collection Sets: fundo claro, cards brancos,
   e apenas o jogo principal com fundo escuro/campo de futebol.
   ========================================================== */
#tab-matches{
  max-width:1240px !important;
}
#tab-matches .section-title{
  color:#111111 !important;
  border-bottom:1px solid rgba(20,20,20,.08) !important;
}
#matches-container{
  display:grid !important;
  gap:14px !important;
}
.match-filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 26px;
}
.match-filter-btn{
  background:#ffffff;
  color:#101010;
  border:1px solid rgba(198,153,26,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  border-radius:999px;
  padding:10px 18px;
  cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
  transition:all .18s ease;
}
.match-filter-btn:hover{
  border-color:rgba(198,153,26,.45);
  transform:translateY(-1px);
}
.match-filter-btn.active{
  background:linear-gradient(135deg,#f7dc72,#d9ac2f);
  color:#101010;
  border-color:#d9ac2f;
  box-shadow:0 10px 22px rgba(217,172,47,.22);
}
.match-section-title{
  margin:22px 0 12px;
  color:#d4aa2e !important;
  font-family:'Bebas Neue',sans-serif;
  font-size:28px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.match-card.visual-match{
  position:relative;
  overflow:hidden;
  border-radius:18px !important;
  border:1px solid rgba(198,153,26,.18) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.06) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.match-card.visual-match.match-featured{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  gap:18px !important;
  padding:24px 28px !important;
  min-height:390px;
  align-items:center;
  background:
    linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.84)),
    radial-gradient(circle at 80% 20%,rgba(245,200,66,.26),transparent 34%),
    url('images/stadium-bg.png') center/cover no-repeat,
    #101010 !important;
  border-color:rgba(212,170,46,.55) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.24) !important;
}
.match-card.visual-match.match-compact{
  display:grid !important;
  grid-template-columns:auto 1fr auto 1fr auto !important;
  gap:18px !important;
  align-items:center !important;
  padding:18px 24px !important;
  min-height:110px;
  background:#ffffff !important;
  color:#101010 !important;
}
.match-card.visual-match.match-compact .consensus-card{
  display:none !important;
}
.match-card.visual-match.match-compact .match-stage-row{
  grid-column:auto !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  min-width:210px;
  justify-content:flex-start !important;
}
.match-card.visual-match.match-featured .match-stage-row{
  grid-column:1 / -1 !important;
  border-bottom:1px solid rgba(255,255,255,.11) !important;
  padding:0 0 14px !important;
  margin:0 !important;
  color:#ffffff !important;
}
.match-stage-row{
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:12px !important;
  letter-spacing:2.4px !important;
  text-transform:uppercase !important;
}
.match-stage-row span:first-child{
  color:#d4aa2e !important;
}
.match-state-chip{
  margin-left:10px !important;
}
.match-state-chip.finished,
.match-state-chip.open{
  background:rgba(16,122,79,.14) !important;
  border:1px solid rgba(16,122,79,.20) !important;
  color:#0f7a4f !important;
}
.match-card.match-featured .match-state-chip.finished,
.match-card.match-featured .match-state-chip.open{
  background:rgba(16,122,79,.22) !important;
  border-color:rgba(16,122,79,.38) !important;
  color:#74e6aa !important;
}
.deadline-badge.closed,
.deadline-badge.open{
  background:#fff6d9 !important;
  color:#b8860b !important;
  border:1px solid rgba(198,153,26,.28) !important;
  border-radius:999px !important;
  padding:6px 11px !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:11px !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
}
.match-card.match-featured .deadline-badge.closed,
.match-card.match-featured .deadline-badge.open{
  background:rgba(0,0,0,.28) !important;
  color:#f2c94c !important;
  border-color:rgba(242,201,76,.55) !important;
}
.match-card.visual-match .team-visual{
  background:transparent !important;
  border:0 !important;
  min-height:auto !important;
  padding:0 !important;
  gap:10px !important;
}
.match-card.visual-match.match-featured .team-visual{
  min-height:120px !important;
}
.match-card.visual-match.match-compact .team-visual{
  flex-direction:row !important;
  justify-content:flex-start !important;
}
.match-card.visual-match.match-compact .team.home{
  justify-content:flex-start !important;
}
.match-card.visual-match.match-compact .team.away{
  justify-content:flex-end !important;
}
.match-card.visual-match .team-flag-bg{
  display:none !important;
}
.match-card.visual-match .team-flag-img{
  width:74px !important;
  height:50px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.20) !important;
}
.match-card.visual-match.match-compact .team-flag-img{
  width:52px !important;
  height:34px !important;
  border-color:rgba(0,0,0,.08) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
}
.match-card.visual-match .team-name{
  color:#ffffff !important;
  font-size:24px !important;
  letter-spacing:2.4px !important;
  text-shadow:0 2px 12px rgba(0,0,0,.7) !important;
}
.match-card.visual-match.match-compact .team-name{
  color:#101010 !important;
  font-size:18px !important;
  text-shadow:none !important;
}
.match-card.visual-match .vs-block{
  min-width:150px;
}
.match-card.visual-match .vs-score{
  color:#d4aa2e !important;
  font-size:68px !important;
  font-family:'Bebas Neue',sans-serif !important;
  letter-spacing:4px !important;
  line-height:1 !important;
  text-shadow:0 4px 18px rgba(0,0,0,.35);
}
.match-card.visual-match.match-compact .vs-score{
  font-size:34px !important;
  color:#d4aa2e !important;
  text-shadow:none !important;
}
.match-card.visual-match .match-meta{
  color:rgba(255,255,255,.72) !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:14px !important;
  letter-spacing:3px !important;
  margin-top:8px !important;
}
.match-card.visual-match.match-compact .match-meta{
  color:#7b7b72 !important;
  font-size:12px !important;
  margin-top:2px !important;
}
.match-card.visual-match .consensus-card{
  grid-column:1 / -1 !important;
  width:100% !important;
  margin:12px auto 0 !important;
  padding:18px !important;
  border-radius:15px !important;
  background:rgba(8,8,8,.62) !important;
  border:1px solid rgba(212,170,46,.24) !important;
  box-shadow:0 18px 46px rgba(0,0,0,.28) !important;
}
.consensus-title,
.consensus-mini-title{
  color:#d4aa2e !important;
}
.consensus-sub{
  color:rgba(255,255,255,.78) !important;
}
.consensus-status{
  background:rgba(212,170,46,.13) !important;
  border-color:rgba(212,170,46,.28) !important;
  color:#f1c84c !important;
}
.consensus-status.good{
  background:rgba(16,122,79,.20) !important;
  border-color:rgba(16,122,79,.32) !important;
  color:#70e2a4 !important;
}
.consensus-outcome,
.consensus-mini,
.consensus-pick-row{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.consensus-outcome-label,
.consensus-pick-score{
  color:#ffffff !important;
}
.consensus-outcome-pct,
.consensus-pick-pct,
.consensus-pick-rank{
  color:#d4aa2e !important;
}
.consensus-pick-sub,
.prediction-drill-hint{
  color:rgba(255,255,255,.58) !important;
}
.consensus-bar{
  background:rgba(255,255,255,.16) !important;
}
.consensus-fill{
  background:linear-gradient(90deg,#0f7a4f,#d4aa2e) !important;
}
@media(max-width:760px){
  #tab-matches{max-width:100% !important;}
  .match-card.visual-match.match-featured,
  .match-card.visual-match.match-compact{
    grid-template-columns:1fr !important;
    text-align:center !important;
  }
  .match-card.visual-match.match-compact .match-stage-row{
    min-width:0;
    justify-content:center !important;
  }
  .match-card.visual-match.match-compact .team.home,
  .match-card.visual-match.match-compact .team.away{
    justify-content:center !important;
  }
  .match-card.visual-match .vs-score{
    font-size:50px !important;
  }
}

/* ======================================================================
   PREDICTIONS TAB - LIGHT PREMIUM STYLE
   ----------------------------------------------------------------------
   Harmoniza a tab Predictions com o novo design claro usado em Matches:
   cartões brancos, bordas douradas suaves, texto escuro legível e botões
   em dourado/verde. Estes estilos estão isolados por #tab-predictions
   para não alterar Matches, Dashboard ou Collection Sets.
   ====================================================================== */

#tab-predictions{
  background:#fff;
  border-radius:22px;
  padding-top:28px;
}

#tab-predictions .section-title{
  color:#111;
  border-bottom:1px solid rgba(0,0,0,.08);
}

#tab-predictions .section-title::first-letter{
  color:#a87908;
}

#tab-predictions .prediction-subtabs{
  margin-bottom:20px;
}

#tab-predictions .prediction-subtab{
  background:#fff;
  border:1px solid rgba(201,153,26,.28);
  color:#6f766f;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

#tab-predictions .prediction-subtab.active{
  background:linear-gradient(135deg,#f5c842,#dcae25);
  border-color:#dcae25;
  color:#111;
  box-shadow:0 10px 24px rgba(220,174,37,.22);
}

/* Bloco Next Match no topo de My Predictions */
#tab-predictions .next-kickoff-card{
  background:linear-gradient(100deg,#fffdf7 0%,#f3eddb 48%,#3f4741 100%);
  border:1px solid rgba(201,153,26,.22);
  border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.08);
  color:#111;
}

#tab-predictions .next-kickoff-title{
  color:#6f766f;
  font-weight:800;
}

#tab-predictions .next-kickoff-match{
  color:#111;
}

#tab-predictions .next-kickoff-pill{
  background:rgba(245,200,66,.16);
  border:1px solid rgba(245,200,66,.28);
  color:#c9991a;
  font-weight:800;
}

/* Filtros All / Open / Locked / Result Published */
#tab-predictions .mypreds-toolbar{
  margin-top:18px;
}

#tab-predictions .mypreds-filter-btn,
#tab-predictions .league-filter-btn{
  background:#fff;
  border:1px solid rgba(201,153,26,.24);
  color:#6f766f;
  box-shadow:0 6px 18px rgba(0,0,0,.035);
}

#tab-predictions .mypreds-filter-btn.active,
#tab-predictions .league-filter-btn.active{
  background:linear-gradient(135deg,#f5c842,#dcae25);
  border-color:#dcae25;
  color:#111;
  box-shadow:0 8px 22px rgba(220,174,37,.20);
}

#tab-predictions .save-all-wrap .btn,
#tab-predictions #save-all-predictions-btn{
  background:linear-gradient(135deg,#f5c842,#dcae25);
  color:#111;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(220,174,37,.18);
}

/* Cada cartão de previsão */
#tab-predictions .my-pred-form{
  opacity:1 !important;
  background:#fff !important;
  border:1px solid rgba(201,153,26,.18) !important;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.06) !important;
  color:#111;
}

#tab-predictions .my-pred-match-header{
  background:linear-gradient(90deg,#fffdf7 0%,#f6f1e5 100%);
  border-bottom:1px solid rgba(201,153,26,.18);
}

#tab-predictions .my-pred-match-name{
  color:#111;
}

#tab-predictions .my-pred-match-header span[style*="var(--muted)"]{
  color:#7b817b !important;
}

#tab-predictions .my-pred-entry{
  background:#fff;
  color:#111;
  border-top:1px solid rgba(0,0,0,.035);
}

#tab-predictions .my-pred-entry div[style*="var(--muted)"],
#tab-predictions .my-pred-entry span[style*="var(--muted)"]{
  color:#7b817b !important;
}

#tab-predictions .my-pred-entry strong[style*="var(--text)"]{
  color:#111 !important;
}

/* Pills das equipas dentro da previsão */
#tab-predictions .team-mini{
  background:#fff !important;
  border:1px solid rgba(201,153,26,.18) !important;
  color:#111 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.045);
}

#tab-predictions .team-mini span:not(.team-mini-bg){
  color:#111 !important;
  text-shadow:none !important;
}

#tab-predictions .vs-chip{
  color:#d4af37;
  text-shadow:none;
}

/* Inputs de resultado */
#tab-predictions .score-input{
  background:#fbfaf6;
  border:1px solid rgba(201,153,26,.30);
  color:#111;
}

#tab-predictions .score-input:focus{
  border-color:#d4af37;
  box-shadow:0 0 0 3px rgba(212,175,55,.13);
}

#tab-predictions .score-sep{
  color:#d4af37;
}

#tab-predictions .clean-score-entry .btn,
#tab-predictions .my-pred-entry .btn{
  background:linear-gradient(135deg,#f5c842,#dcae25);
  color:#111;
  border-radius:999px;
}

#tab-predictions .existing-pred{
  color:#6f766f;
}

#tab-predictions .existing-pred strong{
  color:#d4af37;
}

/* Status badges */
#tab-predictions .status-pill{
  font-weight:900;
}

#tab-predictions .status-pill.open{
  background:rgba(10,128,78,.10);
  color:#08764b;
  border-color:rgba(10,128,78,.24);
}

#tab-predictions .status-pill.locked{
  background:rgba(245,200,66,.16);
  color:#a87908;
  border-color:rgba(245,200,66,.32);
}

#tab-predictions .status-pill.published{
  background:rgba(10,128,78,.10);
  color:#08764b;
  border-color:rgba(10,128,78,.24);
}

#tab-predictions .deadline-badge.open{
  background:rgba(10,128,78,.10);
  color:#08764b;
}

#tab-predictions .deadline-badge.closed{
  background:rgba(245,200,66,.16);
  color:#a87908;
}

/* Resultado e pontos */
#tab-predictions .pred-score{
  color:#7b817b;
}

#tab-predictions .pred-score.correct,
#tab-predictions .pred-score.exact{
  color:#08764b;
}

#tab-predictions .result-badge.correct,
#tab-predictions .result-badge.exact{
  background:rgba(10,128,78,.12);
  color:#08764b;
}

#tab-predictions .result-badge.wrong{
  background:rgba(220,38,38,.10);
  color:#b91c1c;
}

/* League Predictions */
#tab-predictions .privacy-note{
  background:#fffdf7;
  color:#6f766f;
  border:1px solid rgba(201,153,26,.20);
  box-shadow:0 8px 24px rgba(0,0,0,.04);
}

#tab-predictions .league-predictions-toolbar .dash-sub{
  color:#6f766f;
}

#tab-predictions .league-player-card{
  background:#fff !important;
  border:1px solid rgba(201,153,26,.18);
  box-shadow:0 10px 26px rgba(0,0,0,.055);
}

#tab-predictions .league-player-card.me{
  border-color:rgba(212,175,55,.45);
  box-shadow:0 12px 30px rgba(212,175,55,.11);
}

#tab-predictions .league-player-summary:hover{
  background:#fff8df;
}

#tab-predictions .league-player-name{
  color:#111;
}

#tab-predictions .league-player-meta,
#tab-predictions .league-expand-indicator,
#tab-predictions .league-empty-details{
  color:#6f766f;
}

#tab-predictions .league-player-points{
  color:#d4af37;
}

#tab-predictions .league-player-details{
  border-top:1px solid rgba(201,153,26,.16);
}

#tab-predictions .pred-row{
  color:#111;
  border-bottom:1px solid rgba(0,0,0,.045);
}

#tab-predictions .pred-row div[style*="var(--muted)"]{
  color:#6f766f !important;
}

#tab-predictions .hidden-pred{
  color:#7b817b;
}

@media(max-width:700px){
  #tab-predictions .next-kickoff-card,
  #tab-predictions .my-pred-form,
  #tab-predictions .league-player-card{
    border-radius:12px;
  }
}

/* ==========================================================
   HALL OF FAME - LIGHT PREMIUM THEME
   Deixa o ecrã Hall of Fame alinhado com Upcoming Matches,
   Collection Sets e o resto do layout claro/dourado.
   ========================================================== */
#tab-halloffame{
  max-width:1240px !important;
}
#tab-halloffame .section-title{
  color:#111111 !important;
  border-bottom:1px solid rgba(20,20,20,.08) !important;
}

/* Hero MVP: mantém o aspecto claro premium */
#tab-halloffame .mvp-card.mvp-hero{
  background:linear-gradient(115deg,#fff8df 0%,#fffdf7 48%,#eef6ef 100%) !important;
  border:1px solid rgba(212,175,55,.36) !important;
  border-radius:14px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.06) !important;
  color:#111111 !important;
}
#tab-halloffame .mvp-kicker,
#tab-halloffame .mvp-title,
#tab-halloffame .mvp-player,
#tab-halloffame .mvp-points{
  color:#d4af37 !important;
  text-shadow:none !important;
}
#tab-halloffame .mvp-player a,
#tab-halloffame .mvp-player span{
  color:#d4af37 !important;
}

/* Cards: Most Exact Scores / Biggest Matchday / Current League King */
#tab-halloffame .hall-grid{
  gap:16px !important;
}
#tab-halloffame .hall-card{
  background:#ffffff !important;
  border:1px solid #ece7da !important;
  border-radius:16px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.055) !important;
  color:#111111 !important;
}
#tab-halloffame .hall-icon{
  color:#d4af37 !important;
}
#tab-halloffame .hall-title{
  color:#d4af37 !important;
  font-weight:800 !important;
  letter-spacing:2px !important;
}
#tab-halloffame .hall-winner,
#tab-halloffame .hall-winner *,
#tab-halloffame .hall-card .dash-sub{
  color:#111111 !important;
}
#tab-halloffame .hall-value{
  color:#d4af37 !important;
  text-shadow:none !important;
}
#tab-halloffame .hall-card .dash-sub{
  opacity:.68 !important;
}

/* Painel Player Records */
#tab-halloffame .dashboard-panel{
  background:#ffffff !important;
  border:1px solid #ece7da !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.055) !important;
  color:#111111 !important;
}
#tab-halloffame .dashboard-panel h3{
  color:#d4af37 !important;
  font-weight:800 !important;
}
#tab-halloffame .hall-list{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  display:grid !important;
  gap:10px !important;
  overflow:visible !important;
}
#tab-halloffame .hall-row{
  background:#ffffff !important;
  border:1px solid #ece7da !important;
  border-radius:14px !important;
  box-shadow:0 7px 18px rgba(0,0,0,.04) !important;
  color:#111111 !important;
  padding:14px 18px !important;
}
#tab-halloffame .hall-row:hover{
  background:#fffaf0 !important;
  border-color:rgba(212,175,55,.34) !important;
}
#tab-halloffame .player-name,
#tab-halloffame .player-name *,
#tab-halloffame .profile-clickable,
#tab-halloffame .hof-player{
  color:#111111 !important;
  font-weight:800 !important;
  text-shadow:none !important;
}
#tab-halloffame .hall-row .dash-sub{
  color:#70776f !important;
  opacity:1 !important;
}

/* Ranking e medalhas */
#tab-halloffame .rank{
  color:#8b7a2d !important;
  font-family:'Barlow',sans-serif !important;
  font-weight:800 !important;
}
#tab-halloffame .rank-1,
#tab-halloffame .rank-2,
#tab-halloffame .rank-3{
  color:#111111 !important;
}
#tab-halloffame .rank-sub{
  color:#7b8178 !important;
}

/* Avatar/badge de iniciais do jogador */
#tab-halloffame .player-avatar,
#tab-halloffame .app-avatar{
  background:#111111 !important;
  border:1px solid rgba(212,175,55,.55) !important;
  color:#d4af37 !important;
  box-shadow:none !important;
}
#tab-halloffame .player-status-dot{
  background:#0f7a4f !important;
  box-shadow:0 0 10px rgba(15,122,79,.45) !important;
}

/* Streak/badges pequenos */
#tab-halloffame .streak-pill,
#tab-halloffame .streak-level-pill,
#tab-halloffame .tie-count-pill{
  background:#f8f3e4 !important;
  border:1px solid rgba(212,175,55,.35) !important;
  color:#b8860b !important;
}

/* Pontos: pill clara; primeiro lugar dourado com texto preto */
#tab-halloffame .score-pill{
  background:#f8f3e4 !important;
  border:1px solid rgba(212,175,55,.35) !important;
  color:#b8860b !important;
  border-radius:999px !important;
  min-width:58px !important;
  padding:8px 16px !important;
  font-family:'Barlow',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}
#tab-halloffame .score-pill.leader{
  background:#f5c842 !important;
  border-color:#f5c842 !important;
  color:#111111 !important;
}

@media(max-width:800px){
  #tab-halloffame .hall-row{
    grid-template-columns:42px 1fr auto !important;
    padding:12px !important;
  }
}

/* =====================================================================
   SIDEBAR PLAYER CARD — profile moved to bottom of desktop sidebar
   - The player card is clickable and opens the player profile modal.
   - Later this is the right place to add avatar/banner customisation.
   ===================================================================== */
@media(min-width:961px){
  /* Leave room at the bottom for the player profile card. */
  .tabs{
    bottom:178px !important;
    padding-bottom:14px !important;
  }

  /* The original player bar lives in the header markup, but visually it is
     positioned at the bottom of the left sidebar on desktop. */
  .hero-header .player-bar,
  .player-bar{
    position:fixed !important;
    left:18px !important;
    bottom:18px !important;
    top:auto !important;
    width:246px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    z-index:70 !important;
  }

  .player-bar-card{
    width:100%;
    border-radius:18px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 18px 45px rgba(17,17,17,.08);
    padding:10px;
  }

  .player-bar-profile{
    width:100%;
    display:grid;
    grid-template-columns:42px 1fr 14px;
    align-items:center;
    gap:10px;
    padding:9px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:14px;
    background:linear-gradient(135deg,#fff,#fbf6e8);
    color:#111;
    cursor:pointer;
    text-align:left;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .player-bar-profile:hover{
    transform:translateY(-1px);
    border-color:rgba(212,175,55,.45);
    box-shadow:0 12px 26px rgba(212,175,55,.14);
  }

  .player-bar-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#f6d978,#d8aa24);
    color:#111;
    font-family:'Barlow Condensed',sans-serif;
    font-size:18px;
    font-weight:900;
    letter-spacing:.7px;
    box-shadow:0 8px 18px rgba(212,175,55,.24);
    overflow:hidden;
  }

  .player-bar-info{
    min-width:0;
    display:block;
  }

  .player-bar-name{
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#111 !important;
    font-family:'Barlow',sans-serif !important;
    font-size:14px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .player-bar-level{
    display:block;
    margin-top:2px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.3px;
    text-transform:uppercase;
    color:#111;
  }

  .player-bar-xp{
    display:block;
    height:6px;
    margin-top:7px;
    border-radius:999px;
    background:#eee6d6;
    overflow:hidden;
  }

  .player-bar-xp span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#007a4d,#d8aa24);
  }

  .player-bar-xp-text{
    display:block;
    margin-top:5px;
    color:#111;
    font-size:11px;
    font-weight:700;
  }

  .player-bar-chevron{
    color:#a47712;
    font-size:20px;
    line-height:1;
    font-weight:900;
  }

  .player-bar-switch{
    display:block !important;
    width:100%;
    margin:8px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#6f716c !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
    text-align:center;
    text-decoration:underline;
    text-underline-offset:4px;
    cursor:pointer;
  }

  .player-bar-switch:hover{
    color:#a47712 !important;
  }

  .app-header-right{
    margin-top:0 !important;
  }
}

@media(max-width:960px){
  .player-bar-card{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .player-bar-profile{
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    background:transparent;
    color:inherit;
  }
  .player-bar-avatar{
    width:28px;
    height:28px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--gold);
    color:#111;
    font-weight:900;
  }
  .player-bar-xp,
  .player-bar-xp-text,
  .player-bar-chevron{
    display:none;
  }
}


/* =====================================================================
   SIDEBAR PLAYER CARD — FINAL POSITION FIX
   What this controls:
   - The player profile box in the left sidebar.
   - It sits BELOW the navigation menu, near the bottom of the sidebar.
   - It is clickable and opens the player's own profile modal.
   - This is the future area for avatar/banner/profile customisation.
   ===================================================================== */
@media(min-width:961px){
  /* Keep the navigation full-height again. The older rule reserved bottom
     space because the card was fixed to the viewport; now the card lives
     inside the sidebar itself, so no bottom offset is needed. */
  .tabs{
    bottom:18px !important;
    padding:14px !important;
  }

  /* Wrapper that pushes the player card to the lower part of the sidebar. */
  .sidebar-player-slot{
    display:block !important;
    margin-top:auto !important;
    padding-top:14px !important;
    border-top:1px solid rgba(212,175,55,.14) !important;
  }

  /* The player bar is now INSIDE .tabs, so cancel all previous fixed/header
     positioning. This is the important part that moves it from the top to
     the bottom red-box area you marked. */
  .tabs .player-bar{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#111 !important;
    z-index:auto !important;
  }

  .tabs .player-bar-card{
    width:100% !important;
    border-radius:18px !important;
    background:#fffdf8 !important;
    border:1px solid rgba(17,17,17,.08) !important;
    box-shadow:0 16px 36px rgba(17,17,17,.08) !important;
    padding:10px !important;
  }

  .tabs .player-bar-profile{
    width:100% !important;
    display:grid !important;
    grid-template-columns:42px 1fr 14px !important;
    align-items:center !important;
    gap:10px !important;
    padding:9px !important;
    border:1px solid rgba(212,175,55,.20) !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,#ffffff,#fbf6e8) !important;
    color:#111 !important;
    cursor:pointer !important;
    text-align:left !important;
  }

  .tabs .player-bar-profile:hover{
    transform:translateY(-1px);
    border-color:rgba(212,175,55,.50) !important;
    box-shadow:0 12px 26px rgba(212,175,55,.16) !important;
  }

  .tabs .player-bar-avatar{
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(135deg,#f6d978,#d8aa24) !important;
    color:#111 !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:18px !important;
    font-weight:900 !important;
    letter-spacing:.7px !important;
  }

  .tabs .player-bar-name{
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#111 !important;
    font-family:'Barlow',sans-serif !important;
    font-size:14px !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .tabs .player-bar-level{
    display:block !important;
    margin-top:2px !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:1.3px !important;
    text-transform:uppercase !important;
    color:#111 !important;
  }

  .tabs .player-bar-xp{
    display:block !important;
    height:6px !important;
    margin-top:7px !important;
    border-radius:999px !important;
    background:#eee6d6 !important;
    overflow:hidden !important;
  }

  .tabs .player-bar-xp span{
    display:block !important;
    height:100% !important;
    border-radius:999px !important;
    background:linear-gradient(90deg,#007a4d,#d8aa24) !important;
  }

  .tabs .player-bar-xp-text{
    display:block !important;
    margin-top:5px !important;
    color:#111 !important;
    font-size:11px !important;
    font-weight:700 !important;
  }

  .tabs .player-bar-chevron{
    color:#a47712 !important;
    font-size:20px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

  .tabs .player-bar-switch{
    display:block !important;
    width:100% !important;
    margin:8px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#6f716c !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:2px !important;
    text-transform:uppercase !important;
    text-align:center !important;
    text-decoration:underline !important;
    text-underline-offset:4px !important;
    cursor:pointer !important;
  }

  .tabs .player-bar-switch:hover{
    color:#a47712 !important;
  }
}

/* Mobile uses the compact bottom navigation, so this desktop sidebar card
   is hidden to avoid crowding the nav bar. */
@media(max-width:960px){
  .sidebar-player-slot{
    display:none !important;
  }
}

/* =====================================================================
   SIDEBAR FIX v3 — keep Dashboard visible after moving player card
   What this controls:
   - Forces all sidebar menu buttons to remain visible in the correct order.
   - Keeps the player profile card at the bottom of the sidebar.
   - Fixes the case where the first Dashboard item could disappear after the
     player card was moved into the sidebar container.
   ===================================================================== */
@media(min-width:961px){
  #main-tabs.tabs{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    top:250px !important;
    bottom:18px !important;
    padding:14px !important;
  }

  #main-tabs.tabs > button.tab{
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    flex:0 0 auto !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #main-tabs.tabs > button.tab:nth-of-type(1){order:1 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(2){order:2 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(3){order:3 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(4){order:4 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(5){order:5 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(6){order:6 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(7){order:7 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(8){order:8 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(9){order:9 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(10){order:10 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(11){order:11 !important;}
  #main-tabs.tabs > button.tab:nth-of-type(12){order:12 !important;}

  #main-tabs.tabs .sidebar-player-slot{
    order:99 !important;
    margin-top:auto !important;
    flex:0 0 auto !important;
  }
}

/* =====================================================================
   SIDEBAR FIX v4 — show Dashboard below the sync pill
   What this controls:
   - After moving the player card to the bottom, the nav list started too high
     and the first item (Dashboard) sat underneath the Live/Supabase pill.
   - This moves the menu down a little so Dashboard is visible again.
   - The player card remains at the bottom of the sidebar.
   ===================================================================== */
@media(min-width:961px){
  #main-tabs.tabs{
    top:318px !important;
    bottom:18px !important;
    padding:12px 14px !important;
    gap:7px !important;
  }

  #main-tabs.tabs > button.tab:first-of-type{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    order:1 !important;
  }

  #main-tabs.tabs .sidebar-player-slot{
    margin-top:auto !important;
  }

  .hero-header.app-header{
    overflow:visible !important;
  }

  .hero-header .sync-bar{
    position:relative !important;
    z-index:90 !important;
  }
}

/* =========================================================
   LEADERBOARD LIGHT / PREMIUM REDESIGN
   Rebuilds the Leaderboard tab to match the light dashboard,
   collection sets and upcoming matches visual language.
   ========================================================= */
#tab-leaderboard .section-title{
  margin-bottom:18px;
}
#leaderboard-container{
  color:#151515;
}
.lb2-shell{
  display:grid;
  gap:18px;
}
.lb2-tabs{
  display:flex;
  align-items:center;
  gap:26px;
  border-bottom:1px solid #ece7da;
  padding:0 0 12px;
  margin-top:-6px;
}
.lb2-tabs button{
  border:0;
  background:transparent;
  color:#8a8f88;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase;
  padding:8px 0;
  cursor:pointer;
  position:relative;
}
.lb2-tabs button.active{
  color:#b8860b;
}
.lb2-tabs button.active::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-13px;
  height:2px;
  background:#d4af37;
  border-radius:99px;
}
.lb2-stage-pill{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #ece7da;
  border-radius:12px;
  padding:9px 14px;
  color:#151515;
  font-size:13px;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}
.lb2-podium-hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  align-items:end;
  gap:18px;
  min-height:260px;
  padding:38px 42px 16px;
  border:1px solid #ece7da;
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 14%,rgba(245,200,66,.22),transparent 34%),
    linear-gradient(90deg,#fff 0%,#fffaf0 54%,#f8fbf7 100%);
  box-shadow:0 12px 34px rgba(0,0,0,.05);
}
.lb2-confetti{
  position:absolute;
  inset:10px 0 auto;
  text-align:center;
  color:rgba(212,175,55,.35);
  letter-spacing:38px;
  font-size:18px;
  pointer-events:none;
}
.lb2-podium-card{
  position:relative;
  min-height:190px;
  background:#fff;
  border:1px solid #ece7da;
  border-radius:18px;
  padding:34px 20px 24px;
  text-align:center;
  box-shadow:0 18px 48px rgba(0,0,0,.07);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.lb2-podium-card.gold{
  min-height:220px;
  transform:translateY(-18px);
  border-color:rgba(212,175,55,.34);
  box-shadow:0 22px 62px rgba(212,175,55,.14),0 18px 48px rgba(0,0,0,.07);
}
.lb2-podium-card.silver{opacity:.95;}
.lb2-podium-card.bronze{opacity:.95;}
.lb2-podium-medal{
  position:absolute;
  top:-28px;
  left:50%;
  transform:translateX(-50%);
  font-size:44px;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.14));
}
.lb2-podium-medal span{display:none;}
.lb2-avatar,
.lb2-mini-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#101010;
  color:#d4af37;
  border:1px solid rgba(212,175,55,.40);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900;
  letter-spacing:.8px;
  font-size:17px;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.lb2-avatar.gold{
  width:72px;
  height:72px;
  background:linear-gradient(135deg,#f8d86a,#d4af37);
  color:#111;
  font-size:25px;
}
.lb2-avatar.silver{
  width:64px;
  height:64px;
  background:linear-gradient(135deg,#f4f4f4,#bababa);
  color:#555;
  font-size:22px;
}
.lb2-avatar.bronze{
  width:64px;
  height:64px;
  background:linear-gradient(135deg,#e9b08a,#c97850);
  color:#fff;
  font-size:22px;
}
.lb2-podium-name{
  margin-top:12px;
  font-size:17px;
  color:#151515;
  font-weight:900;
}
.lb2-podium-points{
  margin-top:8px;
  font-family:'Bebas Neue',sans-serif;
  font-size:38px;
  color:#b8860b;
  line-height:1;
  letter-spacing:1px;
}
.lb2-podium-card.silver .lb2-podium-points{color:#8a8f88;}
.lb2-podium-card.bronze .lb2-podium-points{color:#c97850;}
.lb2-podium-ties{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.lb2-podium-ties button{
  border:1px solid #ece7da;
  background:#f8f3e4;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  color:#151515;
}
.lb2-insights-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.lb2-insight-card{
  background:#fff;
  border:1px solid #ece7da;
  border-radius:18px;
  padding:18px;
  min-height:220px;
  box-shadow:0 12px 34px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.lb2-insight-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding-bottom:12px;
  border-bottom:1px solid #ece7da;
}
.lb2-insight-head > span{
  font-size:28px;
  line-height:1;
}
.lb2-insight-head strong{
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;
  color:#151515;
  text-transform:uppercase;
  letter-spacing:1.5px;
}
.lb2-insight-head small{
  display:block;
  color:#8a8f88;
  font-size:12px;
  margin-top:3px;
}
.lb2-muted{
  color:#7a8179;
  font-size:13px;
  line-height:1.45;
}
.lb2-rival-mini{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
  text-align:center;
  margin:14px 0;
}
.lb2-rival-mini div{
  display:grid;
  justify-items:center;
  gap:4px;
  min-width:0;
}
.lb2-rival-mini b{
  max-width:96px;
  color:#151515;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lb2-rival-mini strong{
  font-family:'Bebas Neue',sans-serif;
  color:#b8860b;
  font-size:28px;
  line-height:1;
}
.lb2-rival-mini em{
  font-family:'Bebas Neue',sans-serif;
  font-style:normal;
  color:#b91c1c;
  font-size:22px;
}
.lb2-mini-avatar{
  width:48px;
  height:48px;
  background:linear-gradient(135deg,#f8d86a,#d4af37);
  color:#111;
}
.lb2-mini-avatar.muted{
  background:#e9ece7;
  color:#6f7770;
}
.lb2-chip-btn,
.lb2-outline-small,
.lb2-load-more,
.lb2-filter-btn{
  border:1px solid rgba(212,175,55,.26);
  background:#fffaf0;
  color:#b8860b;
  border-radius:999px;
  padding:8px 12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.3px;
  text-transform:uppercase;
  cursor:pointer;
}
.lb2-shock{
  align-self:flex-start;
  border:1px solid rgba(248,113,113,.28);
  background:rgba(248,113,113,.08);
  color:#b91c1c;
  border-radius:999px;
  padding:8px 12px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.3px;
  text-transform:uppercase;
}
.lb2-upset-title{
  color:#151515;
  font-size:17px;
  font-weight:900;
  line-height:1.25;
  margin:14px 0 4px;
}
.lb2-mini-winner{
  color:#151515;
  font-size:13px;
  font-weight:800;
  margin-top:10px;
}
.lb2-big-number{
  font-family:'Bebas Neue',sans-serif;
  font-size:62px;
  color:#b8860b;
  line-height:1;
  text-align:center;
  margin-top:16px;
}
.lb2-big-number.small{font-size:42px;margin:4px 0 0;}
.lb2-card-label{
  font-family:'Barlow Condensed',sans-serif;
  color:#b8860b;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:900;
  text-align:center;
  margin-bottom:10px;
}
.lb2-team-flag{
  text-align:center;
  font-size:40px;
  margin-top:14px;
}
.lb2-table-card{
  background:#fff;
  border:1px solid #ece7da;
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 34px rgba(0,0,0,.05);
}
.lb2-table-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.lb2-table-head h3{
  margin:0;
  color:#151515;
  font-family:'Bebas Neue',sans-serif;
  font-size:28px;
  letter-spacing:1.4px;
}
.lb2-table{
  display:grid;
  gap:0;
}
.lb2-row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) 130px 80px 80px;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:9px 12px;
  border-bottom:1px solid #ece7da;
  color:#151515;
}
.lb2-row-head{
  min-height:36px;
  color:#9a8a64;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.lb2-row.leader,
.lb2-row.me{
  border:1px solid rgba(212,175,55,.35);
  border-radius:12px;
  background:#fffaf0;
  margin:6px 0;
}
.lb2-rank-cell{
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;
  color:#151515;
}
.lb2-player-cell{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  cursor:pointer;
}
.lb2-player-cell .lb2-avatar{
  width:34px;
  height:34px;
  font-size:13px;
  flex:0 0 auto;
}
.lb2-flag{font-size:15px;}
.lb2-player-cell strong{
  color:#151515;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lb2-mini-badge,
.lb2-you{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 7px;
  background:#fffaf0;
  border:1px solid rgba(212,175,55,.24);
  color:#b8860b;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
}
.lb2-you{background:#101010;color:#d4af37;}
.lb2-points{
  display:inline-flex;
  min-width:56px;
  height:32px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:#f8f3e4;
  border:1px solid #ece7da;
  color:#151515;
  font-weight:900;
  font-size:16px;
}
.lb2-points.top{
  background:linear-gradient(135deg,#f8d86a,#d4af37);
  color:#111;
  border-color:rgba(212,175,55,.5);
}
.lb2-delta{
  font-weight:900;
  font-size:13px;
}
.lb2-delta.up{color:#007a4d;}
.lb2-delta.down{color:#d44848;}
.lb2-delta.flat{color:#9a9f98;}
.lb2-preds{
  color:#151515;
  font-weight:800;
  font-size:13px;
}
.lb2-load-wrap{
  display:flex;
  justify-content:center;
  margin-top:14px;
}
.lb2-load-more{
  min-width:220px;
  background:#fffaf0;
}
.lb2-footnote{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#8a8f88;
  font-size:12px;
  padding:0 4px;
}
#tab-leaderboard .official-data-pill,
#tab-leaderboard .podium,
#tab-leaderboard .leaderboard-table{
  display:none !important;
}
@media(max-width:1100px){
  .lb2-insights-grid{grid-template-columns:repeat(2,1fr);}
  .lb2-row{grid-template-columns:56px minmax(0,1fr) 100px 58px 58px;}
}
@media(max-width:760px){
  .lb2-tabs{gap:14px;overflow-x:auto;padding-bottom:14px;}
  .lb2-stage-pill{display:none;}
  .lb2-podium-hero{grid-template-columns:1fr;padding:44px 16px 16px;}
  .lb2-podium-card.gold{transform:none;order:-1;}
  .lb2-insights-grid{grid-template-columns:1fr;}
  .lb2-table-card{padding:14px;overflow-x:auto;}
  .lb2-table{min-width:720px;}
  .lb2-footnote{flex-direction:column;}
}

/* =========================================================
   LEADERBOARD LIGHT FIX + ACTIVE STREAK FIX
   - Removes the old black leaderboard wrapper.
   - Keeps the redesigned light leaderboard consistent with the rest of the app.
   - Streak badge now represents the ACTIVE current streak only via JS.
   ========================================================= */
#tab-leaderboard{
  background:transparent !important;
  border-radius:0 !important;
  padding-top:0 !important;
  color:#151515 !important;
}
#leaderboard-container{
  background:transparent !important;
  color:#151515 !important;
}
#leaderboard-container .lb2-shell,
#leaderboard-container .lb2-shell *:not(.lb2-you):not(.mini-compare-btn){
  color:inherit;
}
#leaderboard-container .lb2-tabs{
  background:transparent !important;
  border-bottom:1px solid #ece7da !important;
  padding:0 0 12px !important;
  margin-top:-6px !important;
}
#leaderboard-container .lb2-tabs button{
  background:transparent !important;
  color:#8a8f88 !important;
  border:0 !important;
}
#leaderboard-container .lb2-tabs button.active{
  color:#b8860b !important;
}
#leaderboard-container .lb2-stage-pill{
  background:#fff !important;
  color:#151515 !important;
  border:1px solid #ece7da !important;
}
#leaderboard-container .lb2-table-card,
#leaderboard-container .lb2-insight-card,
#leaderboard-container .lb2-podium-card{
  background:#fff !important;
  color:#151515 !important;
}
#leaderboard-container .lb2-podium-hero{
  background:radial-gradient(circle at 50% 14%,rgba(245,200,66,.22),transparent 34%),linear-gradient(90deg,#fff 0%,#fffaf0 54%,#f8fbf7 100%) !important;
  color:#151515 !important;
}
#leaderboard-container .lb2-table-head h3,
#leaderboard-container .lb2-player-cell strong,
#leaderboard-container .lb2-rank-cell,
#leaderboard-container .lb2-preds,
#leaderboard-container .lb2-upset-title,
#leaderboard-container .lb2-mini-winner,
#leaderboard-container .lb2-podium-name,
#leaderboard-container .lb2-insight-head strong{
  color:#151515 !important;
}
#leaderboard-container .lb2-row{
  background:#fff !important;
  color:#151515 !important;
  border-bottom:1px solid #ece7da !important;
}
#leaderboard-container .lb2-row.leader,
#leaderboard-container .lb2-row.me{
  background:#fffaf0 !important;
  border:1px solid rgba(212,175,55,.35) !important;
}
#leaderboard-container .lb2-row-head{
  background:transparent !important;
  color:#9a8a64 !important;
  border:0 !important;
}
#leaderboard-container .lb2-points{
  background:#f8f3e4 !important;
  border:1px solid #ece7da !important;
  color:#151515 !important;
}
#leaderboard-container .lb2-points.top{
  background:linear-gradient(135deg,#f8d86a,#d4af37) !important;
  color:#111 !important;
}
#leaderboard-container .lb2-delta.up{color:#007a4d !important;}
#leaderboard-container .lb2-delta.down{color:#d44848 !important;}
#leaderboard-container .lb2-delta.flat{color:#9a9f98 !important;}
#leaderboard-container .streak-level-pill.active-streak{
  background:#fffaf0 !important;
  border:1px solid rgba(212,175,55,.28) !important;
  color:#b8860b !important;
  border-radius:999px !important;
  padding:3px 7px !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
  white-space:nowrap !important;
}

/* =========================================================
   LEADERBOARD MATCHDAY MOVEMENT RESTORE
   - Shows green/red rank movement between the position and player name.
   - Removes the separate delta column so the movement sits where players expect it.
   ========================================================= */
#leaderboard-container .lb2-row{
  grid-template-columns:96px minmax(0,1fr) 130px 80px !important;
}
#leaderboard-container .lb2-row-head{
  grid-template-columns:96px minmax(0,1fr) 130px 80px !important;
}
#leaderboard-container .lb2-rank-cell{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
#leaderboard-container .lb2-rank-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
}
#leaderboard-container .lb2-rank-move{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:24px;
  border-radius:999px;
  padding:0 8px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  line-height:1;
  white-space:nowrap;
}
#leaderboard-container .lb2-rank-move.up{
  background:rgba(0,122,77,.12);
  border:1px solid rgba(0,122,77,.20);
  color:#007a4d !important;
}
#leaderboard-container .lb2-rank-move.down{
  background:rgba(212,72,72,.10);
  border:1px solid rgba(212,72,72,.20);
  color:#d44848 !important;
}
#leaderboard-container .lb2-rank-move.flat{
  background:#f8f3e4;
  border:1px solid #ece7da;
  color:#9a8a64 !important;
}
@media(max-width:1100px){
  #leaderboard-container .lb2-row,
  #leaderboard-container .lb2-row-head{
    grid-template-columns:88px minmax(0,1fr) 100px 58px !important;
  }
  #leaderboard-container .lb2-rank-move{
    min-width:36px;
    padding:0 6px;
  }
}


/* =========================================================
   FINAL CLEANUP - LEADERBOARD HEADER + GROUPS LIGHT THEME
   Requested cleanup:
   - Remove Overall / Matchday / Week / Month / Group Stage bar.
   - Bring Groups tab in line with the light premium theme.
   ========================================================= */

/* LEADERBOARD: no tab/filter strip at the top */
#leaderboard-container .lb2-tabs,
#leaderboard-container .lb2-stage-pill{
  display:none !important;
}
#leaderboard-container .lb2-shell{
  padding-top:0 !important;
}
#leaderboard-container .lb2-podium-hero{
  margin-top:0 !important;
}

/* GROUPS TAB: light page shell */
#tab-groups,
#groups-container,
#groups-container .groups-layout{
  background:transparent !important;
  color:#151515 !important;
}
#tab-groups .section-title{
  color:#151515 !important;
}
#tab-groups .section-title::first-letter{
  color:#b8860b !important;
}
#tab-groups p{
  color:#69736d !important;
}

/* GROUP CARDS */
#groups-container .group-card{
  background:#fff !important;
  border:1px solid #ece7da !important;
  border-radius:22px !important;
  box-shadow:0 12px 35px rgba(17,17,17,.07) !important;
  overflow:hidden !important;
  color:#151515 !important;
}
#groups-container .group-title{
  background:linear-gradient(90deg,#fffaf0 0%,#ffffff 55%,#f8fbf7 100%) !important;
  color:#d4af37 !important;
  border-bottom:1px solid #ece7da !important;
  padding:18px 20px !important;
  font-size:28px !important;
  letter-spacing:1.5px !important;
}
#groups-container .group-title small{
  color:#69736d !important;
}

/* DESKTOP GROUP TABLE */
#groups-container .group-table-wrap{
  background:#fff !important;
}
#groups-container .group-table{
  background:#fff !important;
  color:#151515 !important;
}
#groups-container .group-table th{
  background:#fff !important;
  color:#9a8a64 !important;
  border-bottom:1px solid #ece7da !important;
  font-weight:900 !important;
}
#groups-container .group-table th:first-child,
#groups-container .group-table td:first-child{
  background:#fff !important;
  color:#151515 !important;
}
#groups-container .group-table td{
  background:#fff !important;
  color:#151515 !important;
  border-bottom:1px solid #f1ede3 !important;
}
#groups-container .group-team{
  color:#151515 !important;
  font-weight:900 !important;
}
#groups-container .group-points{
  color:#b8860b !important;
  font-weight:900 !important;
}
#groups-container .team-mini-flag{
  box-shadow:0 4px 12px rgba(17,17,17,.12) !important;
}

/* Qualification chips */
#groups-container .qual-chip{
  border-radius:999px !important;
  font-weight:900 !important;
}
#groups-container .qual-auto{
  background:rgba(0,122,77,.10) !important;
  border:1px solid rgba(0,122,77,.18) !important;
  color:#007a4d !important;
}
#groups-container .qual-third{
  background:#fffaf0 !important;
  border:1px solid rgba(212,175,55,.32) !important;
  color:#b8860b !important;
}
#groups-container .qual-out{
  background:#f8f3e4 !important;
  border:1px solid #ece7da !important;
  color:#69736d !important;
}

/* Best third-place and bracket cards */
#groups-container .thirds-card,
#groups-container .bracket-card{
  background:#fff !important;
  border:1px solid #ece7da !important;
  border-radius:22px !important;
  box-shadow:0 12px 35px rgba(17,17,17,.07) !important;
  color:#151515 !important;
}
#groups-container .thirds-title,
#groups-container .bracket-title,
#groups-container .bracket-round-title{
  color:#d4af37 !important;
}
#groups-container .third-row,
#groups-container .bracket-round,
#groups-container .bracket-team{
  background:#fffaf0 !important;
  border:1px solid #ece7da !important;
  color:#151515 !important;
}
#groups-container .third-rank{
  color:#d4af37 !important;
}
#groups-container .third-team{
  color:#151515 !important;
}
#groups-container .dash-sub{
  color:#69736d !important;
}

/* Mobile group cards */
#groups-container .group-mobile-team{
  background:#fff !important;
  border:1px solid #ece7da !important;
  box-shadow:0 8px 24px rgba(17,17,17,.05) !important;
  color:#151515 !important;
}
#groups-container .group-mobile-name,
#groups-container .group-mobile-stat b{
  color:#151515 !important;
}
#groups-container .group-mobile-pts{
  color:#b8860b !important;
}
#groups-container .group-mobile-stat{
  background:#fffaf0 !important;
}
#groups-container .group-mobile-stat span,
#groups-container .group-mobile-gd{
  color:#69736d !important;
}


/* =========================================================
   JOURNEY TAB - LIGHT PREMIUM THEME + DIRECTIONAL PLANE
   Keeps the map dramatic, but wraps the page in the same
   white / cream / gold visual language as the other tabs.
   ========================================================= */
#tab-journey .journey-hero,
#tab-journey .journey-map-card,
#tab-journey .journey-empty,
#tab-journey .journey-side-panel,
#tab-journey .journey-card{
  background:#fffdf8 !important;
  border:1px solid #eadfca !important;
  border-radius:20px !important;
  box-shadow:0 14px 36px rgba(22,18,10,.07) !important;
  color:#151515 !important;
}

#tab-journey .journey-hero{
  background:
    radial-gradient(circle at 10% 10%,rgba(245,200,66,.16),transparent 28%),
    linear-gradient(90deg,#fffdf8 0%,#ffffff 52%,#f4f8f3 100%) !important;
  padding:26px !important;
  align-items:center !important;
}

#tab-journey .journey-title,
#tab-journey .journey-map-title,
#tab-journey .journey-side-title,
#tab-journey .journey-popover-title,
#tab-journey .journey-leaders-title,
#tab-journey .journey-card .journey-match{
  color:#d4af37 !important;
}

#tab-journey .journey-title{
  font-size:38px !important;
  line-height:.95 !important;
}

#tab-journey .journey-sub,
#tab-journey .journey-map-sub,
#tab-journey .journey-popover-sub,
#tab-journey .journey-location,
#tab-journey .journey-next-sub,
#tab-journey .journey-latest-update,
#tab-journey .journey-timeline-meta{
  color:#6f746b !important;
}

#tab-journey .journey-stat{
  background:#fff !important;
  border:1px solid #eadfca !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(22,18,10,.045) !important;
}

#tab-journey .journey-stat-value{
  color:#d4af37 !important;
}

#tab-journey .journey-stat-label{
  color:#777d74 !important;
}

#tab-journey .journey-map-card{
  padding:24px !important;
  background:#fffdf8 !important;
}

#tab-journey .journey-map-header{
  align-items:flex-start !important;
  padding:0 0 18px !important;
  margin-bottom:0 !important;
}

#tab-journey .journey-map-stage .journey-pill,
#tab-journey .journey-pill{
  background:#fffaf0 !important;
  border:1px solid rgba(212,175,55,.35) !important;
  color:#b8860b !important;
}

#tab-journey .journey-map{
  border-radius:18px !important;
  border:1px solid rgba(212,175,55,.32) !important;
  box-shadow:0 18px 42px rgba(22,18,10,.12) !important;
  overflow:hidden !important;
}

#tab-journey .journey-map-overlay-vignette{
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10)),
    radial-gradient(circle at 50% 50%,transparent 0 58%,rgba(0,0,0,.25) 100%) !important;
}

#tab-journey .journey-map-popover,
#tab-journey .journey-map-legend,
#tab-journey .journey-map-note{
  background:rgba(255,253,248,.90) !important;
  color:#151515 !important;
  border:1px solid rgba(212,175,55,.36) !important;
  box-shadow:0 14px 34px rgba(22,18,10,.12) !important;
}

#tab-journey .journey-map-legend span,
#tab-journey .journey-map-note{
  color:#6f746b !important;
}

#tab-journey .journey-pin-label{
  background:rgba(255,253,248,.92) !important;
  color:#151515 !important;
  border-color:rgba(212,175,55,.28) !important;
}

#tab-journey .journey-stadium-pin.visited .journey-pin-label{
  color:#b8860b !important;
}

#tab-journey .journey-trophy-badge{
  background:#f3d469 !important;
  color:#151515 !important;
  border-color:#d4af37 !important;
}

#tab-journey .journey-track{
  margin-top:18px !important;
}

#tab-journey .journey-track::before{
  background:linear-gradient(180deg,#d4af37,rgba(212,175,55,.12)) !important;
}

#tab-journey .journey-marker{
  background:#fffaf0 !important;
  border:1px solid rgba(212,175,55,.38) !important;
  color:#d4af37 !important;
}

#tab-journey .journey-card{
  background:#fff !important;
}

#tab-journey .journey-result{
  color:#d4af37 !important;
}

#tab-journey .journey-leader-chip,
#tab-journey .journey-mini-chip,
#tab-journey .journey-next-match-card,
#tab-journey .journey-timeline-row{
  background:#fffaf0 !important;
  border:1px solid rgba(212,175,55,.22) !important;
  color:#151515 !important;
}

#tab-journey .journey-timeline-stadium,
#tab-journey .journey-next-teams{
  color:#151515 !important;
}

#tab-journey .journey-timeline-index,
#tab-journey .journey-next-vs{
  color:#b8860b !important;
  border-color:rgba(212,175,55,.38) !important;
}

/* The live plane now rotates toward its destination instead of drifting sideways. */
.journey-live-plane{
  --plane-angle:0deg;
  transform:translate(-50%,-50%) rotate(var(--plane-angle)) !important;
  transform-origin:center center !important;
  transition:
    left 2.8s cubic-bezier(.18,.74,.24,1),
    top 2.8s cubic-bezier(.18,.74,.24,1),
    transform .25s ease !important;
}

.journey-live-plane.flying{
  animation:journeyPlaneDirectionalBob .9s ease-in-out infinite !important;
}

.journey-live-plane.paused{
  animation:journeyPlaneDirectionalIdle 2s ease-in-out infinite !important;
}

@keyframes journeyPlaneDirectionalBob{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--plane-angle)) translateY(0)}
  50%{transform:translate(-50%,-50%) rotate(var(--plane-angle)) translateY(-7px)}
}

@keyframes journeyPlaneDirectionalIdle{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--plane-angle))}
  50%{transform:translate(-50%,-50%) rotate(var(--plane-angle)) translateY(-3px)}
}

@media(max-width:760px){
  #tab-journey .journey-hero,
  #tab-journey .journey-map-card{
    padding:18px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   PROFILE SETTINGS MODAL + MEDIA
───────────────────────────────────────────────────────────── */
.player-bar-card{
  position:relative;
}
.player-bar-avatar-img{
  overflow:hidden;
  background:#111 !important;
}
.player-bar-avatar-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.player-bar-chevron{
  min-width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
  transition:.18s ease;
}
.player-bar-chevron:hover{
  background:rgba(212,175,55,.18);
  transform:translateX(2px);
}
.player-settings-menu{
  position:absolute;
  right:12px;
  bottom:54px;
  min-width:136px;
  padding:8px;
  border-radius:14px;
  background:#111;
  border:1px solid rgba(212,175,55,.26);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:.18s ease;
  z-index:80;
}
.player-settings-menu.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.player-settings-menu button{
  width:100%;
  min-height:36px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#fff;
  font-weight:900;
  text-align:left;
  padding:0 10px;
  cursor:pointer;
}
.player-settings-menu button:hover{
  background:rgba(212,175,55,.16);
  color:var(--gold);
}
.player-profile-card{
  overflow:hidden;
}
.player-profile-banner{
  position:relative;
  min-height:205px;
  padding:24px;
  background:
    radial-gradient(circle at 88% 8%,rgba(212,175,55,.24),transparent 34%),
    linear-gradient(135deg,#111,#272016);
  background-size:cover;
  background-position:center;
  color:#fff;
  border-radius:18px 18px 0 0;
}
.player-profile-banner .player-profile-head{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  color:#fff;
  padding:0 !important;
  min-height:145px;
}
.player-profile-banner .profile-name,
.player-profile-banner .profile-sub{
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.player-profile-banner .profile-rank-box{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.profile-avatar-img{
  overflow:hidden;
  background:#111 !important;
  border:4px solid rgba(255,255,255,.85) !important;
}
.profile-avatar-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.profile-achievement-showcase{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.profile-achievement-showcase-item{
  text-align:center;
  padding:12px 10px;
  border-radius:12px;
  background:rgba(245,200,66,.055);
  border:1px solid rgba(245,200,66,.14);
}
.profile-achievement-showcase-icon{
  width:52px;
  height:52px;
  margin:0 auto 8px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
  border:2px solid var(--gold);
  font-size:24px;
}
.profile-achievement-showcase-item strong{
  display:block;
  color:var(--text);
  font-size:12px;
}
.profile-achievement-showcase-item span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.25;
}
.profile-settings-modal{
  position:fixed;
  inset:0;
  z-index:9500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
}
.profile-settings-modal.show{
  display:flex;
}
.profile-settings-card{
  width:min(720px,100%);
  max-height:90vh;
  overflow:auto;
  border-radius:22px;
  background:#fffdf8;
  color:#111;
  box-shadow:0 28px 80px rgba(0,0,0,.38);
  border:1px solid rgba(17,17,17,.10);
}
.profile-settings-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px 24px 16px;
  border-bottom:1px solid rgba(17,17,17,.08);
}
.profile-settings-kicker{
  color:var(--gold-dark, #a77e16);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-size:12px;
}
.profile-settings-head h2{
  margin:4px 0 0;
  font-size:30px;
  line-height:1;
}
.profile-settings-close{
  width:38px;
  height:38px;
  border-radius:50%;
  border:0;
  background:#111;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}
.profile-settings-preview{
  margin:18px 24px 0;
  min-height:130px;
  border-radius:18px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:16px;
  background:
    radial-gradient(circle at 88% 8%,rgba(212,175,55,.22),transparent 34%),
    linear-gradient(135deg,#111,#292114);
  background-size:cover;
  background-position:center;
  color:#fff;
}
.profile-settings-preview .profile-avatar{
  flex:0 0 76px;
}
.profile-settings-preview strong{
  display:block;
  font-size:22px;
}
.profile-settings-preview span{
  color:rgba(255,255,255,.72);
}
.profile-settings-body{
  padding:22px 24px 24px;
}
.profile-upload-row{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:12px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(17,17,17,.08);
  color:#111;
  font-weight:900;
}
.profile-upload-row input{
  width:100%;
}
.profile-settings-section-title{
  margin:18px 0 10px;
  color:#111;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:13px;
}
.profile-settings-section-title small{
  color:#667067;
  font-weight:900;
  margin-left:6px;
}
.profile-achievement-picker{
  display:grid;
  gap:8px;
  max-height:330px;
  overflow:auto;
  padding:8px;
  border-radius:16px;
  background:#f3ead7;
}
.achievement-pick{
  display:grid;
  grid-template-columns:auto 40px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(17,17,17,.08);
  cursor:pointer;
}
.achievement-pick.selected{
  border-color:rgba(212,175,55,.72);
  background:#fff7df;
}
.achievement-pick-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#111;
  color:var(--gold);
  font-size:20px;
}
.achievement-pick strong{
  display:block;
  color:#111;
  font-size:13px;
}
.achievement-pick em{
  display:block;
  color:#667067;
  font-style:normal;
  font-size:11px;
  margin-top:2px;
}
.profile-settings-save{
  width:100%;
  justify-content:center;
  margin-top:16px;
}
@media(max-width:720px){
  .profile-achievement-showcase{
    grid-template-columns:1fr 1fr;
  }
  .profile-upload-row{
    grid-template-columns:1fr;
  }
}


/* ─────────────────────────────────────────────────────────────
   PROFILE MODAL SCROLL FIX
   Lets the whole profile modal scroll naturally instead of trapping
   the content in a fixed-height card.
───────────────────────────────────────────────────────────── */
.player-profile-modal{
  align-items:flex-start !important;
  justify-content:center !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:28px 18px !important;
  -webkit-overflow-scrolling:touch;
}

.player-profile-card{
  max-height:none !important;
  overflow:visible !important;
  margin:0 auto 28px !important;
}

.player-profile-close{
  position:sticky !important;
  top:14px !important;
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

@media(max-width:720px){
  .player-profile-modal{
    padding:12px 8px 28px !important;
  }

  .player-profile-card{
    width:100% !important;
    border-radius:18px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   LEADERBOARD AVATAR PATCH
   Uses uploaded player avatars inside the leaderboard manager balls.
───────────────────────────────────────────────────────────── */
.lb2-avatar{
  overflow:hidden;
  position:relative;
}
.lb2-avatar-img{
  background:#111 !important;
  border:2px solid rgba(212,175,55,.45) !important;
  box-shadow:0 6px 14px rgba(17,17,17,.14);
}
.lb2-avatar-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lb2-load-wrap,
.lb2-load-more{
  display:none !important;
}


/* ─────────────────────────────────────────────────────────────
   MOBILE COLOR PARITY FIX
   Keeps mobile palette aligned with desktop: cream/white cards,
   black text, gold accents. Layout stays mobile-specific.
───────────────────────────────────────────────────────────── */
@media(max-width:960px){
  body{
    background:#f6f1e4 !important;
    color:#151515 !important;
  }

  #main-app{
    background:
      repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(17,17,17,.018) 60px,rgba(17,17,17,.018) 61px),
      #f6f1e4 !important;
  }

  .hero-summary{
    background:#fffdf8 !important;
    border:1px solid #e7d8ad !important;
    box-shadow:0 18px 40px rgba(17,17,17,.08) !important;
    color:#151515 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .hero-summary-title,
  .hero-stat-value{
    color:#d4af37 !important;
  }

  .hero-summary-sub,
  .hero-stat-label{
    color:#69736d !important;
  }

  .hero-stat{
    background:#ffffff !important;
    border:1px solid #ece7da !important;
    box-shadow:0 8px 20px rgba(17,17,17,.04) !important;
  }

  .tabs{
    background:#fffdf8 !important;
    border:1px solid rgba(17,17,17,.08) !important;
    box-shadow:0 18px 45px rgba(17,17,17,.10) !important;
  }

  .tab{
    background:transparent !important;
    color:#111111 !important;
    border:0 !important;
  }

  .tab .app-svg-icon,
  .tab svg{
    color:#111111 !important;
    stroke:#111111 !important;
  }

  .tab.active{
    color:#b8860b !important;
    background:transparent !important;
  }

  .tab.active .app-svg-icon,
  .tab.active svg{
    color:#d4af37 !important;
    stroke:#d4af37 !important;
  }

  .app-brand-title{
    color:#111111 !important;
  }

  .app-brand-subtitle{
    color:#a47712 !important;
  }

  .section,
  .section.active{
    color:#151515 !important;
  }

  .app-panel,
  .app-hero-stats,
  .app-next-match-card.empty,
  .dashboard-panel,
  .dash-card,
  .rules-card,
  .admin-card{
    background:#fffdf8 !important;
    color:#151515 !important;
    border-color:#ece7da !important;
    box-shadow:0 14px 34px rgba(17,17,17,.07) !important;
  }

  .app-panel h3,
  .app-panel-head h3,
  .app-welcome h2,
  .section-title{
    color:#151515 !important;
  }

  .app-stat-label,
  .dash-sub{
    color:#69736d !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE NAV: INVENTORY + PROFILE
   Makes Inventory available on mobile and adds a Profile menu
   for profile, settings and sign out.
───────────────────────────────────────────────────────────── */
.mobile-profile-tab{
  display:none !important;
}

.mobile-profile-menu-modal{
  position:fixed;
  inset:0;
  z-index:9800;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.mobile-profile-menu-modal.show{
  display:flex;
}

.mobile-profile-menu-card{
  width:min(420px,100%);
  border-radius:26px;
  background:#fffdf8;
  border:1px solid rgba(17,17,17,.08);
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  color:#111;
  padding:18px;
  position:relative;
  animation:mobileProfileUp .18s ease;
}

@keyframes mobileProfileUp{
  from{transform:translateY(24px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.mobile-profile-menu-close{
  position:absolute;
  right:14px;
  top:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:0;
  background:#111;
  color:#fff;
  font-size:22px;
  line-height:1;
}

.mobile-profile-menu-head{
  display:flex;
  gap:12px;
  align-items:center;
  padding:8px 44px 16px 4px;
  border-bottom:1px solid #ece7da;
}

.mobile-profile-avatar-img,
.mobile-profile-avatar-fallback{
  width:56px;
  height:56px;
  border-radius:50%;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#111;
  color:#d4af37;
  border:2px solid rgba(212,175,55,.42);
  font-weight:900;
}

.mobile-profile-avatar-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mobile-profile-menu-head strong{
  display:block;
  font-size:20px;
  color:#111;
}

.mobile-profile-menu-head span{
  display:block;
  color:#69736d;
  font-size:12px;
  margin-top:2px;
}

.mobile-profile-menu-actions{
  display:grid;
  gap:8px;
  padding-top:14px;
}

.mobile-profile-menu-actions button{
  width:100%;
  min-height:48px;
  border-radius:16px;
  border:1px solid #ece7da;
  background:#fff;
  color:#111;
  font-weight:1000;
  text-align:left;
  padding:0 14px;
}

.mobile-profile-menu-actions button:hover{
  background:#fff7df;
  border-color:rgba(212,175,55,.46);
}

.mobile-profile-menu-actions button.danger{
  color:#b42318;
}

@media(max-width:760px){
  #main-app{
    padding-bottom:116px !important;
  }

  .tabs{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:8px 4px !important;
    padding:15px 12px !important;
    min-height:118px !important;
    align-items:center !important;
  }

  .tab{
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
    min-height:42px !important;
  }

  /* Hide secondary desktop-only areas from mobile bottom nav */
  .tab:nth-child(5),  /* Hall of Fame */
  .tab:nth-child(9),  /* Journey */
  .tab:nth-child(10), /* Groups */
  .tab:nth-child(11), /* Rules */
  .tab:nth-child(12){ /* Admin */
    display:none !important;
  }

  /* Important: Inventory was previously hidden by nth-child(8). Show it. */
  .tab:nth-child(8){
    display:flex !important;
  }

  .mobile-profile-tab{
    display:flex !important;
  }

  .sidebar-player-slot{
    display:none !important;
  }
}


/* Mobile bottom-nav alignment fix */
@media(max-width:760px){
  .tabs{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px 4px !important;
    align-items:stretch !important;
  }

  .tab{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:52px !important;
    padding:4px 2px !important;
    line-height:1.05 !important;
  }

  .tab svg,
  .tab i{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LEADERBOARD CARD LAYOUT
   Desktop table stays unchanged. Mobile rows become compact cards
   so points/preds are visible without horizontal scrolling.
───────────────────────────────────────────────────────────── */
.lb2-mobile-label{
  display:none;
}

@media(max-width:760px){
  #leaderboard-container .lb2-table-card{
    overflow:visible !important;
    padding:14px !important;
    border-radius:22px !important;
  }

  #leaderboard-container .lb2-table{
    min-width:0 !important;
    width:100% !important;
    display:grid !important;
    gap:8px !important;
  }

  #leaderboard-container .lb2-row-head{
    display:none !important;
  }

  #leaderboard-container .lb2-row{
    width:100% !important;
    display:grid !important;
    grid-template-columns:54px minmax(0,1fr) auto !important;
    grid-template-areas:
      "rank player points"
      "rank player preds" !important;
    align-items:center !important;
    gap:4px 10px !important;
    min-height:74px !important;
    padding:10px 12px !important;
    border:1px solid #ece7da !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 8px 18px rgba(17,17,17,.04) !important;
  }

  #leaderboard-container .lb2-row.leader,
  #leaderboard-container .lb2-row.me{
    background:#fffaf0 !important;
    border-color:rgba(212,175,55,.42) !important;
  }

  #leaderboard-container .lb2-rank-cell{
    grid-area:rank !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    min-width:0 !important;
  }

  #leaderboard-container .lb2-rank-main{
    font-size:18px !important;
    font-weight:1000 !important;
    line-height:1 !important;
  }

  #leaderboard-container .lb2-rank-move{
    margin:0 !important;
    min-width:34px !important;
    height:22px !important;
    font-size:10px !important;
  }

  #leaderboard-container .lb2-player-cell{
    grid-area:player !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:38px 16px minmax(0,1fr) !important;
    gap:8px !important;
    align-items:center !important;
    cursor:pointer !important;
  }

  #leaderboard-container .lb2-avatar{
    width:38px !important;
    height:38px !important;
    margin:0 !important;
    font-size:11px !important;
  }

  #leaderboard-container .lb2-flag{
    margin:0 !important;
    width:16px !important;
    text-align:center !important;
  }

  #leaderboard-container .lb2-player-cell strong{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:13px !important;
  }

  #leaderboard-container .lb2-player-cell .streak-pill,
  #leaderboard-container .lb2-player-cell .mini-compare-btn,
  #leaderboard-container .lb2-player-cell .lb2-you{
    grid-column:auto !important;
    margin-left:0 !important;
  }

  #leaderboard-container .lb2-points-cell{
    grid-area:points !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    min-width:58px !important;
  }

  #leaderboard-container .lb2-points{
    min-width:48px !important;
    height:30px !important;
    padding:0 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:14px !important;
    font-weight:1000 !important;
  }

  #leaderboard-container .lb2-preds{
    grid-area:preds !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    color:#151515 !important;
    font-size:13px !important;
    font-weight:900 !important;
  }

  #leaderboard-container .lb2-mobile-label{
    display:block !important;
    margin-top:2px !important;
    color:#8a8f88 !important;
    font-size:8px !important;
    letter-spacing:1.2px !important;
    line-height:1 !important;
    font-family:'Barlow Condensed',sans-serif !important;
    text-transform:uppercase !important;
  }

  #leaderboard-container .lb2-footnote{
    padding:0 4px 4px !important;
    gap:6px !important;
    font-size:11px !important;
  }
}


/* Full player artwork in cards (desktop + mobile) */
.card-art img,
.card-image img,
.pack-card-art img,
.collection-card-art img,
.card-face img{
  object-fit: contain !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

.card-art,
.card-image,
.pack-card-art,
.collection-card-art,
.card-face{
  overflow: hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* Favourite team selector */
#profile-favourite-team{
  width:100%;
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(17,17,17,.12);
  background:#fff;
  color:#111;
  font-weight:800;
  padding:0 12px;
}


/* Mobile profile admin button */
.mobile-profile-menu-actions button.admin{
  background:#111 !important;
  color:#d4af37 !important;
  border-color:rgba(212,175,55,.42) !important;
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LITE NAV + STEAM-LIKE DRAWER
   Desktop remains unchanged. Mobile bottom nav becomes:
   Dashboard / Leaderboard / Matches / Predictions / Menu.
───────────────────────────────────────────────────────────── */
.mobile-lite-menu-tab{
  display:none !important;
}

.mobile-lite-menu-modal{
  position:fixed;
  inset:0;
  z-index:9900;
  display:none;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.mobile-lite-menu-modal.show{
  display:block;
}

.mobile-lite-drawer{
  width:min(360px,88vw);
  height:100%;
  background:#262932;
  color:#eef1f5;
  box-shadow:24px 0 70px rgba(0,0,0,.45);
  overflow-y:auto;
  transform:translateX(-100%);
  animation:mobileLiteSlideIn .18s ease forwards;
}

@keyframes mobileLiteSlideIn{
  to{transform:translateX(0)}
}

.mobile-lite-drawer-top{
  position:relative;
  padding:28px 18px 18px;
  background:linear-gradient(180deg,#363a44,#272a32);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-lite-back{
  position:absolute;
  left:10px;
  top:28px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:44px;
  line-height:.6;
  cursor:pointer;
}

.mobile-lite-profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:42px;
}

.mobile-lite-avatar{
  width:70px;
  height:70px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#111;
  border:4px solid #f16d22;
  color:#d4af37;
  font-weight:1000;
  font-size:20px;
  flex:0 0 70px;
}

.mobile-lite-avatar.img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.mobile-lite-player-meta strong{
  display:block;
  font-size:22px;
  line-height:1;
  color:#fff;
  margin-bottom:8px;
}

.mobile-lite-player-meta span{
  display:block;
  font-size:13px;
  color:#c4cad5;
}

.mobile-lite-stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:14px;
  background:#20232b;
}

.mobile-lite-stat-row div{
  min-height:58px;
  border-radius:4px;
  background:#30333d;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.mobile-lite-stat-row strong{
  color:#fff;
  font-size:18px;
  line-height:1;
}

.mobile-lite-stat-row span{
  color:#b8bec9;
  font-size:12px;
  margin-top:4px;
}

.mobile-lite-menu-list{
  display:grid;
  padding:14px 0 0;
}

.mobile-lite-menu-list button{
  min-height:54px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:#2a2d35;
  color:#eef1f5;
  display:grid;
  grid-template-columns:38px 1fr auto auto;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:0 16px;
  font-size:18px;
  cursor:pointer;
}

.mobile-lite-menu-list button span{
  font-size:22px;
  text-align:center;
}

.mobile-lite-menu-list button strong{
  font-size:18px;
  font-weight:900;
}

.mobile-lite-menu-list button b{
  color:#c5cbd5;
  font-size:28px;
  line-height:1;
}

.mobile-lite-menu-list button em{
  min-width:28px;
  height:24px;
  border-radius:999px;
  background:#f1c232;
  color:#111;
  font-style:normal;
  font-weight:1000;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mobile-lite-menu-secondary{
  display:grid;
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}

.mobile-lite-menu-secondary button{
  min-height:48px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:#252832;
  color:#dfe4ec;
  text-align:left;
  padding:0 18px;
  font-size:15px;
  font-weight:800;
}

.mobile-lite-menu-secondary button.danger{
  color:#ffb4aa;
}

@media(max-width:760px){
  #main-app{
    padding-bottom:96px !important;
  }

  .tabs{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:0 !important;
    min-height:72px !important;
    padding:8px 10px 10px !important;
    align-items:center !important;
    border-radius:24px 24px 0 0 !important;
  }

  .tab{
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
    min-height:54px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:5px !important;
    padding:2px !important;
    font-size:9px !important;
    line-height:1.05 !important;
  }

  /* Keep only daily-use mobile actions visible */
  .tab:nth-child(1),  /* Dashboard */
  .tab:nth-child(2),  /* Leaderboard */
  .tab:nth-child(3),  /* Matches */
  .tab:nth-child(4){  /* Predictions */
    display:flex !important;
  }

  .tab:nth-child(5),  /* Hall of Fame */
  .tab:nth-child(6),  /* Collection */
  .tab:nth-child(7),  /* Sets */
  .tab:nth-child(8),  /* Inventory */
  .tab:nth-child(9),  /* Journey */
  .tab:nth-child(10), /* Groups */
  .tab:nth-child(11), /* Rules */
  .tab:nth-child(12), /* Admin */
  .mobile-profile-tab{
    display:none !important;
  }

  .mobile-lite-menu-tab{
    display:flex !important;
  }

  .sidebar-player-slot{
    display:none !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LITE DASHBOARD
   Desktop dashboard remains unchanged. Mobile gets a focused,
   app-like home screen: welcome, next match, leaderboard, packs,
   and collapsible see more.
───────────────────────────────────────────────────────────── */
.mobile-lite-dashboard{
  display:none;
}

@media(max-width:760px){
  .hero-header.app-header{
    display:none !important;
  }

  #main-app{
    padding-top:14px !important;
  }

  #tab-dashboard{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-dashboard > .section-title{
    display:none !important;
  }

  .mobile-lite-dashboard{
    display:grid;
    gap:12px;
    padding:0 2px 10px;
  }

  .ml-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 16px 12px;
    border-radius:22px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    color:#111;
  }

  .ml-welcome span{
    display:block;
    color:#667067;
    font-size:13px;
    line-height:1.1;
  }

  .ml-welcome h2{
    margin:3px 0 4px;
    font-size:30px;
    line-height:.95;
    color:#111;
    letter-spacing:-.7px;
  }

  .ml-welcome p{
    margin:0;
    color:#a77e16;
    font-size:12px;
    font-weight:900;
  }

  .ml-welcome-rank{
    min-width:74px;
    height:58px;
    border-radius:18px;
    background:linear-gradient(135deg,#111,#262015);
    border:1px solid rgba(212,175,55,.24);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#d4af37;
  }

  .ml-welcome-rank strong{
    display:block;
    font-size:22px;
    line-height:1;
  }

  .ml-welcome-rank span{
    margin-top:4px;
    color:#d4af37;
    font-size:9px;
    letter-spacing:1.4px;
  }

  .ml-card{
    border-radius:22px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    overflow:hidden;
    color:#111;
  }

  .ml-section-kicker,
  .ml-card-head h3{
    margin:0;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:1px;
    font-size:24px;
    line-height:1;
  }

  .ml-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px 8px;
  }

  .ml-card-head button{
    border:0;
    background:transparent;
    color:#006747;
    font-size:11px;
    text-transform:uppercase;
    font-weight:1000;
    cursor:pointer;
  }

  .ml-next-match{
    position:relative;
    padding:14px;
    background:
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.75)),
      url('images/stadium-bg.png');
    background-size:cover;
    background-position:center;
    color:#fff;
    border-color:rgba(212,175,55,.25);
  }

  .ml-next-match .ml-section-kicker{
    color:#ffd33d;
  }

  .ml-match-stage{
    margin:6px 0 12px;
    color:rgba(255,255,255,.78);
    font-size:12px;
    font-weight:800;
  }

  .ml-match-board{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
    margin:8px 0 14px;
  }

  .ml-team{
    min-height:78px;
    border-radius:16px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.16);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
  }

  .ml-team-flag{
    width:50px !important;
    height:34px !important;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 8px 16px rgba(0,0,0,.24);
  }

  .ml-team strong{
    color:#fff;
    font-size:11px;
    text-transform:uppercase;
  }

  .ml-vs{
    color:#fff;
    font-family:'Bebas Neue',sans-serif;
    font-size:34px;
  }

  .ml-wide-btn{
    width:100%;
    justify-content:center;
    min-height:42px;
    border-radius:12px !important;
  }

  .ml-leaderboard-list{
    display:grid;
    gap:7px;
    padding:0 10px 12px;
  }

  .ml-leaderboard-row{
    display:grid;
    grid-template-columns:26px 34px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-height:44px;
    border-radius:12px;
    background:#fff6df;
    padding:6px 10px;
  }

  .ml-leaderboard-row.me{
    border:1px solid rgba(212,175,55,.45);
    background:#fff0c2;
  }

  .ml-rank{
    font-weight:1000;
    color:#9c7a16;
    text-align:center;
  }

  .ml-avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#111;
    color:#d4af37;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    font-size:12px;
    font-weight:1000;
  }

  .ml-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .ml-leaderboard-row strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:#111;
  }

  .ml-leaderboard-row b{
    color:#d4a925;
    font-size:13px;
  }

  .ml-packs-card{
    padding-bottom:14px;
  }

  .ml-pack-message{
    padding:0 14px 12px;
    display:grid;
    gap:3px;
  }

  .ml-pack-message strong{
    color:#111;
    font-size:16px;
  }

  .ml-pack-message span{
    color:#69736d;
    font-size:12px;
  }

  .ml-packs-card .ml-wide-btn{
    width:calc(100% - 28px);
    margin:0 14px;
  }

  .ml-see-more{
    border-radius:22px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    overflow:hidden;
  }

  .ml-see-more summary{
    list-style:none;
    cursor:pointer;
    padding:16px;
    color:#111;
    font-weight:1000;
    text-transform:uppercase;
    letter-spacing:1px;
    display:flex;
    justify-content:space-between;
  }

  .ml-see-more summary::-webkit-details-marker{
    display:none;
  }

  .ml-see-more summary:after{
    content:'⌄';
    color:#d4af37;
  }

  .ml-see-more[open] summary:after{
    content:'⌃';
  }

  .ml-see-more-body{
    display:grid;
    border-top:1px solid #ece7da;
  }

  .ml-more-row{
    min-height:58px;
    border:0;
    border-bottom:1px solid #ece7da;
    background:#fffdf8;
    display:grid;
    grid-template-columns:34px 1fr auto 18px;
    align-items:center;
    gap:8px;
    text-align:left;
    padding:0 14px;
    cursor:pointer;
  }

  .ml-more-row span{
    font-size:20px;
  }

  .ml-more-row strong{
    color:#111;
    font-size:14px;
  }

  .ml-more-row em{
    color:#69736d;
    font-style:normal;
    font-size:11px;
  }

  .ml-more-row b{
    color:#a7a7a7;
    font-size:22px;
  }

  .ml-recent-achievements{
    padding:14px;
    display:grid;
    gap:8px;
  }

  .ml-more-title{
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:1px;
    font-size:20px;
  }

  .ml-achievement-mini{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:9px;
    align-items:center;
    padding:9px 10px;
    border-radius:12px;
    background:#fff7df;
  }

  .ml-achievement-mini strong{
    color:#111;
    font-size:13px;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .ml-achievement-mini em{
    color:#006747;
    font-style:normal;
    font-weight:900;
    font-size:11px;
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LITE DASHBOARD REFINEMENT
   Removes the redundant global hero summary on mobile and gives
   League Rank the main visual emphasis in the welcome card.
───────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .hero-summary{
    display:none !important;
  }

  .ml-welcome-rank strong{
    font-size:24px !important;
    letter-spacing:-.4px;
  }

  .ml-welcome-rank span{
    content:'RANK';
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LITE LEADERBOARD
   Mobile-only leaderboard redesign. Desktop leaderboard remains
   exactly as the existing premium layout.
───────────────────────────────────────────────────────────── */
.mobile-lite-leaderboard{
  display:none;
}

@media(max-width:760px){
  #tab-leaderboard{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-leaderboard > .section-title,
  #tab-leaderboard > .scoring-legend{
    display:none !important;
  }

  .mobile-lite-leaderboard{
    display:grid;
    gap:12px;
    padding:0 2px 12px;
    color:#111;
  }

  .mllb-title{
    text-align:center;
    padding:4px 0 2px;
  }

  .mllb-title h2{
    margin:0;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:36px;
    letter-spacing:1px;
    line-height:1;
  }

  .mllb-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:10px;
    min-height:38px;
    padding:0 18px;
    border-radius:999px;
    background:#fff8e4;
    border:1px solid rgba(212,175,55,.28);
    color:#111;
    font-weight:900;
    box-shadow:0 8px 18px rgba(17,17,17,.04);
  }

  .mllb-pill strong{
    color:#d4a925;
    font-size:18px;
  }

  .mllb-me-card{
    position:relative;
    overflow:hidden;
    min-height:126px;
    border-radius:22px;
    background:linear-gradient(135deg,#090909,#222015);
    border:1px solid rgba(212,175,55,.26);
    box-shadow:0 14px 32px rgba(17,17,17,.14);
    color:#fff;
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px;
  }

  .mllb-trophy-bg{
    position:absolute;
    right:18px;
    bottom:10px;
    font-size:78px;
    opacity:.08;
    filter:grayscale(1);
  }

  .mllb-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:#111;
    color:#d4af37;
    border:2px solid rgba(212,175,55,.35);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 36px;
    font-weight:1000;
    font-size:14px;
  }

  .mllb-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .mllb-avatar.hero{
    width:82px;
    height:82px;
    flex-basis:82px;
    border:3px solid #d4af37;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
  }

  .mllb-me-info{
    position:relative;
    z-index:1;
    min-width:0;
  }

  .mllb-me-rank{
    color:#d4af37;
    font-family:'Bebas Neue',sans-serif;
    font-size:42px;
    line-height:.9;
  }

  .mllb-me-info strong{
    display:block;
    font-size:25px;
    line-height:1.05;
    color:#fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mllb-me-info span:not(.mllb-move){
    display:block;
    color:#d4af37;
    font-size:16px;
    font-weight:900;
    margin-top:5px;
  }

  .mllb-move{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    font-size:12px;
    font-weight:1000;
  }

  .mllb-move.up{
    color:#007a4d;
    background:#e5f6ee;
  }

  .mllb-move.down{
    color:#c62828;
    background:#ffe8e8;
  }

  .mllb-move.flat{
    color:#60656d;
    background:#f0ece2;
  }

  .mllb-me-info .mllb-move{
    margin-top:8px;
  }

  .mllb-podium-card,
  .mllb-list-card{
    border-radius:22px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    overflow:hidden;
  }

  .mllb-podium{
    display:grid;
    grid-template-columns:1fr 1.12fr 1fr;
    align-items:end;
    min-height:190px;
    padding:22px 12px 0;
    gap:4px;
  }

  .mllb-podium-player{
    position:relative;
    min-width:0;
    text-align:center;
    padding:18px 6px 22px;
    border-left:1px solid rgba(17,17,17,.06);
  }

  .mllb-podium-player:first-child{
    border-left:0;
  }

  .mllb-podium-player.gold{
    padding-top:0;
  }

  .mllb-podium-medal{
    width:34px;
    height:34px;
    border-radius:50%;
    margin:0 auto 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#f6dd74,#d4af37);
    color:#111;
    font-weight:1000;
    box-shadow:0 6px 12px rgba(212,175,55,.25);
  }

  .mllb-podium-player.silver .mllb-podium-medal{
    background:linear-gradient(135deg,#f5f5f5,#c9c9c9);
  }

  .mllb-podium-player.bronze .mllb-podium-medal{
    background:linear-gradient(135deg,#f2b27b,#c8753b);
    color:#fff;
  }

  .mllb-avatar.podium{
    width:58px;
    height:58px;
    margin:0 auto 8px;
    flex-basis:58px;
  }

  .mllb-podium-player.gold .mllb-avatar.podium{
    width:68px;
    height:68px;
    flex-basis:68px;
    border-color:#d4af37;
  }

  .mllb-podium-player strong{
    display:block;
    min-height:34px;
    color:#111;
    font-size:13px;
    line-height:1.15;
    overflow:hidden;
  }

  .mllb-podium-player span{
    display:block;
    margin-top:5px;
    color:#c19417;
    font-weight:1000;
    font-size:14px;
  }

  .mllb-podium-player:after{
    content:'';
    display:block;
    height:16px;
    margin:14px -6px -22px;
    background:#d4af37;
  }

  .mllb-podium-player.silver:after{
    height:12px;
    background:#d5d5d5;
  }

  .mllb-podium-player.bronze:after{
    height:10px;
    background:#c8753b;
  }

  .mllb-list-card{
    display:grid;
    padding:10px;
  }

  .mllb-row{
    display:grid;
    grid-template-columns:34px 42px minmax(0,1fr) auto 42px;
    align-items:center;
    gap:8px;
    min-height:58px;
    padding:7px 8px;
    border-bottom:1px solid #ece7da;
    cursor:pointer;
  }

  .mllb-row:last-child{
    border-bottom:0;
  }

  .mllb-row.me{
    border:1px solid rgba(212,175,55,.50);
    border-radius:14px;
    background:#fff7df;
    margin:4px 0;
  }

  .mllb-row-rank{
    color:#111;
    font-weight:1000;
    font-size:16px;
    text-align:center;
  }

  .mllb-row strong{
    min-width:0;
    color:#111;
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mllb-row-points{
    color:#c19417;
    font-weight:1000;
    font-size:14px;
    white-space:nowrap;
  }

  .mllb-footnote{
    color:#69736d;
    text-align:center;
    font-size:12px;
    padding:3px 0 10px;
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LITE MATCHES
   Mobile-only agenda-style Matches screen. Desktop remains
   exactly as the existing premium cards/grid.
───────────────────────────────────────────────────────────── */
.mobile-lite-matches{
  display:none;
}

@media(max-width:760px){
  #tab-matches{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-matches > .section-title{
    display:none !important;
  }

  #matches-container.match-grid{
    display:block !important;
  }

  .mobile-lite-matches{
    display:grid;
    gap:14px;
    padding:0 2px 12px;
    color:#111;
  }

  .mlm-head{
    text-align:center;
    padding:4px 8px 0;
  }

  .mlm-head h2{
    margin:0;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:38px;
    line-height:1;
    letter-spacing:1px;
  }

  .mlm-head p{
    margin:7px 0 0;
    color:#69736d;
    font-size:14px;
    font-weight:700;
  }

  .mlm-filter-tabs{
    display:grid;
    grid-template-columns:1fr 1.08fr 1fr;
    overflow:hidden;
    border-radius:16px;
    background:#fffdf8;
    border:1px solid #ece7da;
    box-shadow:0 8px 20px rgba(17,17,17,.05);
  }

  .mlm-filter-tabs button{
    min-height:54px;
    border:0;
    border-right:1px solid #ece7da;
    background:transparent;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.6px;
    font-size:18px;
    cursor:pointer;
  }

  .mlm-filter-tabs button:last-child{
    border-right:0;
  }

  .mlm-filter-tabs button.active{
    background:linear-gradient(135deg,#111,#2a2618);
    color:#d4af37;
  }

  .mlm-date-group{
    display:grid;
    gap:9px;
  }

  .mlm-date-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:3px 8px 0;
  }

  .mlm-date-title h3{
    margin:0;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:24px;
    letter-spacing:.8px;
  }

  .mlm-date-title span{
    color:#69736d;
    font-size:13px;
    font-weight:800;
  }

  .mlm-list{
    display:grid;
    gap:12px;
  }

  .mlm-card{
    border-radius:20px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    padding:12px;
    overflow:hidden;
  }

  .mlm-match-main{
    position:relative;
    display:grid;
    grid-template-columns:1fr 82px 1fr 24px;
    align-items:center;
    gap:8px;
    min-height:98px;
  }

  .mlm-team{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    text-align:center;
  }

  .mlm-flag-round{
    width:58px !important;
    height:58px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
    border:2px solid rgba(17,17,17,.10);
    box-shadow:0 8px 16px rgba(17,17,17,.08);
  }

  .mlm-team strong{
    max-width:92px;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:19px;
    line-height:1;
    letter-spacing:.5px;
    text-transform:uppercase;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mlm-score-block{
    min-width:0;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }

  .mlm-score-block span{
    min-height:26px;
    padding:0 10px;
    border-radius:999px;
    background:#fff4d8;
    color:#111;
    font-size:12px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:5px;
  }

  .mlm-score-block strong{
    display:block;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:35px;
    line-height:.95;
    letter-spacing:.5px;
  }

  .mlm-score-block em{
    display:block;
    color:#81877f;
    font-style:normal;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    margin-top:5px;
  }

  .mlm-chevron{
    border:0;
    background:transparent;
    color:#111;
    font-size:42px;
    line-height:1;
    padding:0;
    cursor:pointer;
  }

  .mlm-status{
    text-align:center;
    text-transform:uppercase;
    font-size:12px;
    font-weight:1000;
    letter-spacing:.6px;
    margin:0 0 10px;
  }

  .mlm-status.upcoming{
    color:#007a4d;
  }

  .mlm-status.locked{
    color:#a07000;
  }

  .mlm-status.finished{
    color:#69736d;
  }

  .mlm-predict-btn{
    width:100%;
    min-height:42px;
    justify-content:center;
    border-radius:12px !important;
    font-size:13px !important;
  }

  .mlm-my-pred{
    min-height:42px;
    margin-top:10px;
    border-radius:14px;
    background:#fff;
    border:1px solid #ece7da;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 12px;
    font-weight:900;
    font-size:13px;
  }

  .mlm-my-pred.ok{
    color:#007a4d;
  }

  .mlm-my-pred.miss{
    color:#c62828;
  }

  .mlm-my-pred.locked,
  .mlm-my-pred.muted{
    color:#69736d;
  }

  .mlm-my-pred strong{
    color:#007a4d;
    white-space:nowrap;
  }

  .mlm-card.state-finished .mlm-score-block span{
    background:#f0f0f0;
    color:#69736d;
    text-transform:uppercase;
  }

  .mlm-card.state-locked{
    background:#fffaf0;
  }

  .mlm-card.state-locked .mlm-score-block span{
    background:#fff0c2;
  }
}


/* ─────────────────────────────────────────────────────────────
   MOBILE LITE PREDICTIONS
   Mobile-only prediction flow: needs-prediction cards, score
   pickers, quick outcomes and sticky save-all bar.
   Desktop remains unchanged.
───────────────────────────────────────────────────────────── */
.mobile-lite-predictions{
  display:none;
}

@media(max-width:760px){
  #tab-predictions{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-predictions > .section-title,
  .pred-subtabs{
    display:none !important;
  }

  .mobile-lite-predictions{
    display:grid;
    gap:14px;
    padding:0 2px 102px;
    color:#111;
  }

  .mlp-head{
    text-align:center;
    padding:4px 8px 0;
  }

  .mlp-head h2{
    margin:0;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:38px;
    line-height:1;
    letter-spacing:1px;
  }

  .mlp-head p{
    margin:7px 0 0;
    color:#69736d;
    font-size:14px;
    font-weight:700;
  }

  .mlp-filter-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border-radius:16px;
    background:#fffdf8;
    border:1px solid #ece7da;
    box-shadow:0 8px 20px rgba(17,17,17,.05);
  }

  .mlp-filter-tabs button{
    min-height:56px;
    border:0;
    border-right:1px solid #ece7da;
    background:transparent;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.6px;
    font-size:19px;
    cursor:pointer;
  }

  .mlp-filter-tabs button:last-child{
    border-right:0;
  }

  .mlp-filter-tabs button.active{
    background:linear-gradient(135deg,#111,#2a2618);
    color:#d4af37;
  }

  .mlp-alert{
    min-height:50px;
    border-radius:16px;
    background:#fff9ea;
    border:1px solid rgba(212,175,55,.28);
    color:#69736d;
    display:flex;
    align-items:center;
    padding:0 14px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(17,17,17,.04);
  }

  .mlp-alert strong{
    color:#d4a925;
    margin:0 4px;
  }

  .mlp-card-list{
    display:grid;
    gap:14px;
  }

  .mlp-card{
    border-radius:20px;
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    padding:12px;
    overflow:hidden;
  }

  .mlp-mini-meta{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:8px;
    color:#4d554f;
    font-size:12px;
    font-weight:900;
    margin-bottom:12px;
  }

  .mlp-mini-meta span:nth-child(2){
    text-align:center;
  }

  .mlp-status{
    justify-self:end;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    white-space:nowrap;
  }

  .mlp-status.open{
    color:#007a4d;
    background:#e5f6ee;
  }

  .mlp-status.locked{
    color:#a07000;
    background:#fff0c2;
  }

  .mlp-status.published{
    color:#69736d;
    background:#f0f0f0;
  }

  .mlp-score-board{
    display:grid;
    grid-template-columns:1fr 58px 18px 58px 1fr;
    align-items:center;
    gap:8px;
    margin:4px 0 16px;
  }

  .mlp-team{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    text-align:center;
  }

  .mlp-flag-round{
    width:58px !important;
    height:58px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
    border:2px solid rgba(17,17,17,.10);
    box-shadow:0 8px 16px rgba(17,17,17,.08);
  }

  .mlp-team strong{
    max-width:88px;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:19px;
    line-height:1;
    letter-spacing:.5px;
    text-transform:uppercase;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mlp-score-picker{
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    justify-items:center;
  }

  .mlp-score-picker button{
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid #e1dbcf;
    background:#fff;
    color:#111;
    font-size:22px;
    line-height:1;
    font-weight:900;
    cursor:pointer;
  }

  .mlp-score-picker span{
    width:56px;
    height:56px;
    border-radius:12px;
    border:2px solid rgba(212,175,55,.62);
    color:#d4a925;
    background:#fffdf8;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Bebas Neue',sans-serif;
    font-size:38px;
    line-height:1;
  }

  .mlp-score-sep{
    color:#111;
    font-size:24px;
    font-weight:1000;
    text-align:center;
  }

  .mlp-outcome-buttons{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:7px;
    margin:0 0 11px;
  }

  .mlp-outcome-buttons button{
    min-height:42px;
    border-radius:12px;
    border:1px solid #ece7da;
    background:#fff;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:16px;
    letter-spacing:.4px;
    cursor:pointer;
  }

  .mlp-save-btn{
    width:100%;
    min-height:46px;
    justify-content:center;
    border-radius:12px !important;
    font-size:14px !important;
  }

  .mlp-existing{
    text-align:center;
    margin-top:8px;
    color:#69736d;
    font-size:12px;
    font-weight:800;
  }

  .mlp-existing strong{
    color:#111;
  }

  .mlp-predicted-drawer{
    border-radius:18px;
    background:#f7fff9;
    border:1px solid rgba(0,122,77,.16);
    box-shadow:0 8px 20px rgba(17,17,17,.04);
    overflow:hidden;
  }

  .mlp-predicted-drawer summary{
    list-style:none;
    min-height:66px;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:23px;
    letter-spacing:.4px;
    cursor:pointer;
  }

  .mlp-predicted-drawer summary::-webkit-details-marker{
    display:none;
  }

  .mlp-predicted-drawer summary span{
    margin-top:2px;
    color:#69736d;
    font-family:inherit;
    font-size:15px;
    letter-spacing:0;
    text-transform:none;
  }

  .mlp-predicted-drawer .mlp-card-list{
    padding:0 10px 10px;
  }

  .mlp-card.saved{
    padding:10px;
    box-shadow:none;
  }

  .mlp-saved-teams{
    display:grid;
    grid-template-columns:1fr 78px 1fr;
    align-items:center;
    gap:8px;
  }

  .mlp-saved-teams > div:not(.mlp-saved-score){
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-align:center;
  }

  .mlp-saved-teams strong{
    max-width:88px;
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:17px;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mlp-saved-score{
    color:#111;
    font-family:'Bebas Neue',sans-serif;
    font-size:30px;
    text-align:center;
  }

  .mlp-result-strip{
    min-height:40px;
    margin-top:10px;
    border-radius:14px;
    border:1px solid #ece7da;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 12px;
    gap:10px;
    font-size:13px;
    font-weight:900;
  }

  .mlp-result-strip.ok,
  .mlp-result-strip.ok strong{
    color:#007a4d;
  }

  .mlp-result-strip.locked,
  .mlp-result-strip.muted{
    color:#69736d;
  }

  .mobile-lite-prediction-save-bar{
    position:fixed;
    left:12px;
    right:12px;
    bottom:84px;
    z-index:120;
    min-height:72px;
    border-radius:24px;
    background:linear-gradient(135deg,#111,#2a2618);
    color:#fff;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
  }

  .mobile-lite-prediction-save-bar.show{
    display:flex;
  }

  .mobile-lite-prediction-save-bar strong{
    display:block;
    color:#fff;
    font-family:'Bebas Neue',sans-serif;
    font-size:20px;
    letter-spacing:.8px;
  }

  .mobile-lite-prediction-save-bar span{
    display:block;
    color:#cfd3d0;
    font-size:11px;
    margin-top:2px;
  }

  .mobile-lite-prediction-save-bar .btn{
    min-width:106px;
    min-height:48px;
    border-radius:16px !important;
    justify-content:center;
  }
}


/* Mobile Lite Matches locked tab click fix */
@media(max-width:760px){
  .mlm-filter-tabs,
  .mlm-filter-tabs button{
    position:relative;
    z-index:5;
    pointer-events:auto !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   FINAL STAGE ADMIN UX + MOBILE LITE
───────────────────────────────────────────────────────────── */
.admin-collapse-card{
  border-radius:18px;
  border:1px solid rgba(17,17,17,.08);
  background:#fffdf8;
  overflow:hidden;
}

.admin-collapse-card > summary{
  cursor:pointer;
  padding:16px 18px;
  color:#111;
  font-family:'Bebas Neue',sans-serif;
  font-size:28px;
  letter-spacing:1px;
  list-style:none;
}

.admin-collapse-card > summary::-webkit-details-marker{
  display:none;
}

.admin-collapse-card > summary:after{
  content:'⌄';
  float:right;
  color:var(--gold);
}

.admin-collapse-card[open] > summary:after{
  content:'⌃';
}

.admin-collapse-card > .admin-card{
  margin:0;
  border-radius:0;
  border-left:0;
  border-right:0;
  border-bottom:0;
}

.admin-alert.ok,
.admin-alert-details{
  display:block;
  border-radius:14px;
  padding:12px 14px;
  background:#f7fff9;
  border:1px solid rgba(0,122,77,.18);
  color:#111;
}

.admin-alert-details summary{
  cursor:pointer;
  font-weight:1000;
  color:#111;
  list-style:none;
}

.admin-alert-details summary::-webkit-details-marker{
  display:none;
}

.admin-missing-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}

.admin-missing-row{
  display:grid;
  gap:3px;
  padding:10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #ece7da;
}

.admin-missing-row strong{
  color:#111;
}

.admin-missing-row span{
  color:#c19417;
  font-weight:1000;
  font-size:13px;
}

.admin-missing-row small{
  color:#69736d;
  line-height:1.35;
}

.admin-results-tools{
  margin-bottom:10px;
}

.admin-results-tools input{
  width:100%;
}

.admin-results-tabs{
  display:flex;
  gap:8px;
  margin:0 0 12px;
  flex-wrap:wrap;
}

.admin-results-tabs button{
  border:1px solid rgba(212,175,55,.25);
  background:#fff;
  color:#111;
  border-radius:999px;
  min-height:38px;
  padding:0 14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-weight:900;
  cursor:pointer;
}

.admin-results-tabs button.active{
  background:linear-gradient(135deg,var(--gold),#facc15);
  color:#111;
  border-color:rgba(212,175,55,.7);
}

.admin-results-tabs span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  border-radius:999px;
  margin-left:6px;
  background:rgba(0,0,0,.08);
}

.admin-results-hint{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  margin-bottom:12px;
}

.admin-results-list{
  display:grid;
  gap:10px;
}

.admin-result-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto 28px;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(17,17,17,.08);
  background:rgba(255,255,255,.56);
  position:relative;
}

.admin-result-match strong{
  display:block;
  color:#111;
  font-weight:900;
  line-height:1.15;
}

.admin-result-match span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

.admin-result-score{
  display:grid;
  grid-template-columns:72px auto 72px;
  gap:8px;
  align-items:center;
}

.admin-result-score input{
  width:72px;
  text-align:center;
}

.admin-result-score span{
  color:var(--muted);
  font-weight:900;
}

.admin-result-state{
  font-size:22px;
  font-weight:1000;
  text-align:center;
}

.admin-result-state.ok{
  color:#22c55e;
}

.admin-result-state.todo{
  color:var(--muted);
}

.ml-match-deadline{
  margin:8px auto 0;
  width:fit-content;
  border-radius:999px;
  background:#fff4d8;
  color:#111;
  padding:6px 12px;
  font-size:12px;
  font-weight:1000;
}

.ml-open-now{
  display:inline-flex;
  margin-left:6px;
  padding:3px 7px;
  border-radius:999px;
  background:#111;
  color:#d4af37;
  font-style:normal;
  font-size:10px;
  letter-spacing:.8px;
}

@media(max-width:760px){
  #tab-admin{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-admin > .section-title{
    display:none !important;
  }

  #admin-content.admin-section{
    display:grid !important;
    gap:12px !important;
  }

  #admin-content .admin-card,
  .admin-collapse-card{
    border-radius:22px !important;
    background:#fffdf8 !important;
    border:1px solid rgba(17,17,17,.08) !important;
    box-shadow:0 10px 24px rgba(17,17,17,.06) !important;
    padding:16px !important;
    overflow:hidden !important;
  }

  .admin-collapse-card{
    padding:0 !important;
  }

  .admin-collapse-card > summary{
    padding:18px !important;
    font-size:27px !important;
  }

  .admin-collapse-card > .admin-card{
    box-shadow:none !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
  }

  #admin-content .admin-card h3,
  #admin-content .admin-card h4{
    color:#d4af37 !important;
    font-family:'Bebas Neue',sans-serif !important;
    font-size:30px !important;
    letter-spacing:1px !important;
    line-height:1 !important;
    margin:0 0 14px !important;
  }

  #admin-content .form-row,
  #admin-content .form-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  #admin-content input,
  #admin-content textarea,
  #admin-content select{
    min-height:46px !important;
    border-radius:14px !important;
    font-size:16px !important;
  }

  #admin-content .btn{
    min-height:44px !important;
    border-radius:999px !important;
  }

  .admin-results-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    overflow:hidden;
    border-radius:16px;
    border:1px solid #ece7da;
    background:#fff;
    margin-bottom:12px;
  }

  .admin-results-tabs button{
    border:0;
    border-right:1px solid #ece7da;
    border-radius:0;
    min-height:54px;
    background:#fff;
    font-size:18px;
  }

  .admin-results-tabs button:last-child{
    border-right:0;
  }

  .admin-results-tabs button.active{
    background:linear-gradient(135deg,#111,#2a2618);
    color:#d4af37;
  }

  .admin-results-hint{
    background:#fff9ea;
    border:1px solid rgba(212,175,55,.20);
    border-radius:14px;
    padding:10px 12px;
    color:#69736d;
  }

  .admin-result-row{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 18px rgba(17,17,17,.04);
  }

  .admin-result-match strong{
    font-size:22px;
    line-height:1.05;
  }

  .admin-result-match span{
    font-size:13px;
  }

  .admin-result-score{
    grid-template-columns:1fr auto 1fr;
  }

  .admin-result-score input{
    width:100%;
    height:58px;
    font-size:22px !important;
    font-weight:900;
  }

  .admin-result-save{
    width:100%;
    justify-content:center;
  }

  .admin-result-state{
    position:absolute;
    right:22px;
    top:16px;
  }
}


/* ─────────────────────────────────────────────────────────────
   CARD TRADING V1
───────────────────────────────────────────────────────────── */
.trading-shell{
  display:grid;
  gap:16px;
}

.trading-hero,
.trade-create-card,
.trade-list-card{
  border-radius:18px;
  border:1px solid rgba(212,175,55,.20);
  background:rgba(255,255,255,.04);
  padding:18px;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
}

.trading-hero{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(255,255,255,.035));
}

.trading-kicker{
  color:var(--gold);
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
  letter-spacing:1.4px;
}

.trading-hero h2,
.trade-create-card h3,
.trade-list-card h3{
  margin:0 0 8px;
  color:var(--text);
  font-family:'Bebas Neue',sans-serif;
  letter-spacing:1px;
}

.trading-hero h2{
  font-size:42px;
  line-height:1;
}

.trading-hero p{
  color:var(--muted);
  margin:0;
  line-height:1.45;
}

.trading-stat{
  min-width:90px;
  min-height:74px;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.25);
  background:#111;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}

.trading-stat strong{
  font-size:30px;
  line-height:1;
}

.trading-stat span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.trade-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
}

.trade-form-grid label{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
}

.trade-form-grid select{
  width:100%;
}

.trade-list{
  display:grid;
  gap:12px;
}

.trade-offer-card{
  border:1px solid rgba(212,175,55,.16);
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:14px;
}

.trade-offer-card.status-accepted{
  opacity:.74;
  border-color:rgba(34,197,94,.25);
}

.trade-offer-card.status-rejected,
.trade-offer-card.status-cancelled{
  opacity:.55;
}

.trade-offer-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.trade-offer-head strong{
  color:var(--text);
}

.trade-offer-head span{
  color:var(--gold);
  text-transform:uppercase;
  font-size:11px;
  font-weight:1000;
  letter-spacing:1px;
}

.trade-swap-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
}

.trade-swap-grid small{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  margin-bottom:6px;
  letter-spacing:1px;
}

.trade-swap-arrow{
  color:var(--gold);
  font-size:26px;
  font-weight:1000;
}

.trade-card-mini{
  min-height:78px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.20);
  background:linear-gradient(135deg,rgba(17,17,17,.92),rgba(42,38,24,.92));
  padding:10px;
  color:#fff;
}

.trade-card-mini strong{
  display:block;
  font-size:16px;
  line-height:1.15;
  margin:4px 0;
}

.trade-card-mini span{
  color:#cfd3d0;
  font-size:12px;
}

.trade-card-rarity{
  color:var(--gold);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  font-weight:1000;
}

.trade-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

@media(max-width:760px){
  #tab-trading{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
  }

  #tab-trading > .section-title,
  #tab-trading > p{
    display:none !important;
  }

  .trading-shell{
    gap:12px;
  }

  .trading-hero,
  .trade-create-card,
  .trade-list-card{
    background:#fffdf8;
    border:1px solid rgba(17,17,17,.08);
    border-radius:22px;
    box-shadow:0 10px 24px rgba(17,17,17,.06);
    color:#111;
  }

  .trading-hero h2,
  .trade-create-card h3,
  .trade-list-card h3{
    color:#111;
  }

  .trading-hero{
    align-items:flex-start;
  }

  .trading-hero h2{
    font-size:32px;
  }

  .trading-hero p{
    color:#69736d;
    font-size:13px;
  }

  .trade-form-grid{
    grid-template-columns:1fr;
  }

  .trade-form-grid select,
  .trade-form-grid button{
    min-height:46px;
    border-radius:14px;
  }

  .trade-offer-card{
    background:#fff;
    border-color:#ece7da;
  }

  .trade-swap-grid{
    grid-template-columns:1fr;
  }

  .trade-swap-arrow{
    transform:rotate(90deg);
    text-align:center;
  }

  .trade-card-mini{
    background:linear-gradient(135deg,#111,#2a2618);
  }
}


/* Hide fixed Admin nav button. Admin remains available inside the role-aware menu. */
.tab[onclick*="showTab('admin'"],
.tab[onclick*='showTab("admin"']{
  display:none !important;
}