/* ============================================================
   VGV — VIRTUAL GAME VIP
   Design system v2 — "Under the Floodlights"
   A broadcast-graphics aesthetic built from the club's own crest
   (navy + brass gold) and the stadium hero art (violet floodlights).
   Dark panels read like a match-night graphics package: hairline
   gold top-rules on cards like lower-third bugs, hex/shield chips
   echoing the crest shape, and a slow floodlight sweep on hero
   surfaces.
   ============================================================ */

:root{
  --ink:        #0c0817;   /* page base, deep violet-black */
  --ink-soft:   #120c22;
  --panel:      #1a1330;   /* card / panel surface */
  --panel-2:    #221a3d;   /* raised / hover surface */
  --panel-3:    #291f49;
  --line:       #3a2b5c;   /* hairline border on dark */
  --line-soft:  #2a2049;
  --gold:       #cda552;   /* brand gold, from the crest */
  --gold-bright:#ecc97a;
  --gold-dim:   rgba(205,165,82,.14);
  --violet:     #9b3dff;   /* signature neon violet */
  --violet-2:   #c084fc;
  --violet-bright: #b565ff;
  --violet-dim: rgba(155,61,255,.16);
  --paper:      #f3eeff;   /* primary text on dark */
  --muted:      #a496c4;   /* secondary text on dark */
  --muted-dim:  #6e6091;   /* faint labels */
  --success:    #34c47a;
  --success-dim:rgba(52,196,122,.14);
  --danger:     #ef4a52;
  --danger-dim: rgba(239,74,82,.14);
  --warning:    #e0a83c;
  --warning-dim:rgba(224,168,60,.14);

  /* legacy aliases used throughout the page templates */
  --accent: var(--violet);
  --navy:   var(--paper);
}

*{box-sizing:border-box;}

html{ background:var(--ink); }
body{
  background:var(--ink);
  color:var(--paper);
}
a{ text-decoration:none; color:inherit; }

::selection{ background:var(--gold); color:#1a1305; }

/* Scrollbar (webkit) — kept subtle, dark */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--panel-3); border-radius:10px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--line); }

/* ============================================================
   Ambient page backdrop — a faint violet floodlight glow rising
   from the corners of every page, plus a very quiet pitch-line
   texture. Applied via body::before so it never interferes with
   layout or z-index of real content.
   ============================================================ */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(900px 560px at 108% 10%, rgba(205,165,82,.08), transparent 55%),
    radial-gradient(1000px 700px at 50% 120%, rgba(139,92,246,.08), transparent 60%);
}
body > *{ position:relative; z-index:1; }

/* ============================================================
   Floodlight sweep — signature ambient motion for hero / feature
   surfaces. A slow diagonal beam drifting across a dark surface,
   like stadium lights catching the pitch mist.
   ============================================================ */

@keyframes vgvTicker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.vgv-scroll::-webkit-scrollbar{ height:0; width:0; }

/* ============================================================
   Sidebar — shared chrome for BOTH the public marketing pages and
   the logged-in dashboard. One dark navy rail, gold active state.
   (Public pages replicate this markup; sidebar.php renders it for
   every authenticated page.)
   ============================================================ */
.public-sidebar,
.dash-sidebar{
  position:fixed; top:0; inset-inline-start:0; height:100vh; width:224px;
  background:linear-gradient(180deg, var(--ink-soft) 0%, #030408 100%);
  border-inline-end:1px solid var(--line-soft);
  display:flex; flex-direction:column;
  padding:22px 16px;
  z-index:200;
  overflow-y:auto;
}
.public-sidebar-logo,
.dash-sidebar .dash-logo{
  display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-shrink:0;
}
.public-sidebar-logo img,
.dash-sidebar .dash-logo img{ height:40px; width:auto; filter:drop-shadow(0 4px 12px rgba(205,165,82,.25)); }

.public-sidebar-nav,
.dash-nav{ display:flex; flex-direction:column; gap:3px; }
.dash-nav{ flex:1; margin-top:6px; }

.public-sidebar-nav a,
.dash-nav a{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:10px;
  font-weight:600; font-size:14px; color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.dash-nav a .ic,
.public-sidebar-nav a .ic{ font-size:16px; width:20px; text-align:center; flex-shrink:0; }
.public-sidebar-nav a:hover,
.dash-nav a:hover{ background:rgba(255,255,255,.045); color:var(--paper); }
.public-sidebar-nav a.active,
.dash-nav a.active{
  background:linear-gradient(100deg, rgba(155,61,255,.28), rgba(155,61,255,.08));
  color:#fff; font-weight:700;
  box-shadow:0 0 0 1.5px rgba(155,61,255,.55), 0 0 18px -4px rgba(155,61,255,.6);
  position:relative;
}
.public-sidebar-nav a.active::after,
.dash-nav a.active::after{
  content:'‹'; margin-inline-start:auto; font-weight:800; color:var(--violet-2); font-size:15px; transform:scaleY(1.4);
}

.public-sidebar-lang,
.dash-lang-toggle{ display:flex; background:rgba(255,255,255,.05); border-radius:9px; padding:3px; }
.public-sidebar-lang{ margin:16px 0; }
.public-sidebar-lang a,
.dash-lang-toggle a{ flex:1; text-align:center; padding:6px 10px; border-radius:7px; font-weight:800; font-size:12px; color:var(--muted); }
.public-sidebar-lang a.active,
.dash-lang-toggle a.active{ background:var(--gold); color:#1a1305; }

.public-sidebar-auth{ margin-top:auto; display:flex; flex-direction:column; gap:8px; padding-top:16px; }
.btn-nav-ghost{
  display:block; text-align:center; padding:10px 14px; border-radius:10px;
  color:var(--paper); font-weight:700; font-size:13.5px;
  border:1.5px solid var(--line); background:rgba(255,255,255,.02);
}
.btn-nav-primary{
  display:block; text-align:center; padding:10px 14px; border-radius:10px;
  background:linear-gradient(100deg, var(--gold), var(--gold-bright));
  color:#1a1305; font-weight:800; font-size:14px;
  box-shadow:0 10px 22px -10px rgba(205,165,82,.55);
}

.public-main,
.dash-main{ margin-inline-start:224px; min-height:100vh; }

.dash-user{
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  margin-top:12px;
}
.dash-avatar{
  width:38px; height:38px; border-radius:10px; object-fit:cover;
  background:linear-gradient(135deg, var(--violet), var(--violet-2));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; font-family:'Barlow Semi Condensed',sans-serif; flex-shrink:0;
}
.dash-user-name{ font-weight:700; font-size:13.5px; color:var(--paper); }
.dash-user-role{ font-size:11px; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.4px; }

@media (max-width:860px){
  .vgv-mobile-topbar{
    display:flex !important; align-items:center; justify-content:space-between;
    position:fixed; top:0; inset-inline:0; height:56px; z-index:300;
    background:var(--ink-soft); border-bottom:1px solid var(--line-soft);
    padding:0 16px;
  }
  .vgv-mobile-topbar img{ height:28px; width:auto; display:block; }
  .vgv-hamburger{
    width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.06);
    border:1px solid var(--line-soft); color:#fff; font-size:19px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .public-sidebar, .dash-sidebar{
    position:fixed; top:0; inset-inline-start:0; height:100dvh; width:280px; max-width:84vw;
    transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
    z-index:410; overflow-y:auto; flex-direction:column; align-items:stretch;
    padding:18px 16px 24px; border-inline-end:1px solid var(--line-soft); border-bottom:none;
    box-shadow:0 0 60px rgba(0,0,0,.5);
  }
  [dir="rtl"] .public-sidebar, [dir="rtl"] .dash-sidebar{ inset-inline-start:auto; transform:translateX(100%); }
  html.vgv-drawer-open .public-sidebar, html.vgv-drawer-open .dash-sidebar{ transform:translateX(0) !important; }
  html.vgv-drawer-open{ overflow:hidden; }
  html.vgv-drawer-open .vgv-drawer-backdrop{ display:block; }
  .vgv-drawer-backdrop{
    display:none; position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.62); backdrop-filter:blur(2px);
  }
  .public-sidebar-logo, .dash-sidebar .dash-logo{ margin-bottom:16px; }
  .public-main, .dash-main{ margin-inline-start:0 !important; padding-top:56px; }
  section.hero-stadium.page-topbar{ padding-top:22px; }
}
@media (min-width:861px){
  .vgv-mobile-topbar, .vgv-drawer-backdrop{ display:none !important; }
}

/* ---- Wide tables scroll horizontally instead of breaking mobile layout ---- */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll table{ min-width:560px; }
@media (max-width:640px){
  .tbl-scroll table{ min-width:520px; }
}

/* ---- Narrow-screen safety net: multi-column form field grids collapse to one column ---- */
@media (max-width:480px){
  .grid-collapse-mobile{ grid-template-columns:1fr !important; }
}

/* Avatar stack (overlapping circles) */
.avatar-stack{ display:flex; align-items:center; }
.avatar-stack img, .avatar-stack .fallback{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--ink);
  object-fit:cover; margin-inline-start:-10px; box-shadow:0 2px 8px rgba(0,0,0,.4);
  background:linear-gradient(135deg, var(--violet), var(--violet-2)); color:#fff; font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center; font-family:'Barlow Semi Condensed',sans-serif;
}
.avatar-stack :first-child{ margin-inline-start:0; }

.hover-lift{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hover-lift:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(0,0,0,.55); border-color:var(--line); }

/* ============================================================
   Hero stadium band — used for page hero / top sections
   ============================================================ */
.hero-stadium{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 15% -25%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(900px 500px at 105% 10%, rgba(205,165,82,.10), transparent 55%),
    var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.hero-stadium::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(205,165,82,0.05) 0px, rgba(205,165,82,0.05) 2px, transparent 2px, transparent 54px);
  animation:vgvSweep 16s linear infinite;
  pointer-events:none;
}
@keyframes vgvSweep{ 0%{transform:translateX(-6%);} 100%{transform:translateX(6%);} }

.angular-tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 18px 7px 14px;
  background:linear-gradient(100deg, var(--gold), var(--gold-bright));
  color:#1a1305; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.5px;
  clip-path:polygon(0 0, 100% 0, 92% 100%, 0% 100%);
  box-shadow:0 10px 22px -8px rgba(205,165,82,.5);
}

/* ============================================================
   Panels & cards — the dark "broadcast card" surface. Optional
   gold hairline top-rule (::before) evokes a lower-third graphic.
   ============================================================ */
.panel, .card, .glow-panel{
  position:relative;
  background:linear-gradient(160deg, var(--panel) 0%, var(--panel) 60%, var(--panel-2) 130%);
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--paper);
}
.card-rule::before{
  content:'';
  position:absolute; top:0; inset-inline-start:18px; inset-inline-end:18px; height:2px;
  background:linear-gradient(90deg, var(--gold), transparent 75%);
  border-radius:0 0 3px 3px;
}

.glow-panel{
  overflow:hidden;
  box-shadow:0 24px 55px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(205,165,82,.18);
  animation:vgvRimPulse 4.2s ease-in-out infinite;
}
@keyframes vgvRimPulse{
  0%,100%{ box-shadow:0 24px 55px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(205,165,82,.16), 0 0 20px -8px rgba(205,165,82,.15); }
  50%{ box-shadow:0 24px 55px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(205,165,82,.4), 0 0 30px -6px rgba(205,165,82,.3); }
}
.glow-panel::after{
  content:'';
  position:absolute; top:-80%; left:-70%;
  width:55%; height:260%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
  transform:rotate(20deg);
  animation:vgvHoloSheen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes vgvHoloSheen{ 0%{left:-60%;} 55%{left:130%;} 100%{left:130%;} }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:12px; font-weight:800; font-size:14.5px;
  border:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  font-family:inherit;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{
  background:linear-gradient(100deg, var(--gold), var(--gold-bright));
  color:#1a1305; box-shadow:0 14px 30px -10px rgba(205,165,82,.55);
}
.btn-gold:hover{ box-shadow:0 18px 36px -10px rgba(205,165,82,.7); }
.btn-violet{
  background:linear-gradient(100deg, var(--violet), var(--violet-2));
  color:#fff; box-shadow:0 14px 30px -10px rgba(139,92,246,.55);
}
.btn-violet:hover{ box-shadow:0 18px 36px -10px rgba(139,92,246,.7); }
.btn-danger{ background:var(--danger-dim); color:#ff9296; border:1.5px solid rgba(239,74,82,.35); }
.btn-danger:hover{ background:rgba(239,74,82,.22); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:9px; }

/* ============================================================
   Badges / pills
   ============================================================ */
.badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:100px; font-weight:800; font-size:11px; letter-spacing:.2px; }
.badge-gold{ background:var(--gold-dim); color:var(--gold-bright); }
.badge-violet{ background:var(--violet-dim); color:var(--violet-2); }
.badge-success{ background:var(--success-dim); color:var(--success); }
.badge-danger{ background:var(--danger-dim); color:#ff9296; }
.badge-warning{ background:var(--warning-dim); color:var(--warning); }
.badge-neutral{ background:rgba(255,255,255,.06); color:var(--muted); }

/* ============================================================
   Forms — dark inputs
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label{ font-size:13px; font-weight:700; color:var(--muted); }
input:not([type=checkbox]):not([type=radio]), select, textarea{
  background:var(--ink-soft); border:1.5px solid var(--line); border-radius:10px;
  padding:12px 14px; font-size:14.5px; color:var(--paper); font-family:inherit;
  transition:border-color .15s ease, background .15s ease; width:100%;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--gold); background:#0c1120; }
input::placeholder, textarea::placeholder{ color:var(--muted-dim); }
select{ cursor:pointer; }

/* ============================================================
   Section scaffolding used across inner pages
   ============================================================ */
.section{ max-width:1600px; margin:0 auto; padding:26px 24px; }
.section-title{
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:21px;
  text-transform:uppercase; letter-spacing:.3px; color:var(--paper);
  padding-inline-start:13px; position:relative;
}
.section-title::before{
  content:''; position:absolute; inset-inline-start:0; top:2px; bottom:2px; width:4px;
  border-radius:3px; background:linear-gradient(180deg, var(--gold), var(--violet));
}

.empty-state{
  text-align:center; color:var(--muted); padding:36px; font-size:13.5px;
  background:var(--panel); border:1px dashed var(--line); border-radius:16px;
}

/* ============================================================
   Page top bar — consistent header for every inner page
   ============================================================ */
.page-topbar{
  min-height:92px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:22px 28px;
  color:var(--paper);
}
.page-topbar-title{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:22px; text-transform:uppercase; line-height:1.15; position:relative; z-index:1; color:var(--paper); }
.page-topbar-sub{ font-size:13px; color:var(--muted); margin-top:4px; position:relative; z-index:1; }
.page-topbar-right{ position:relative; z-index:1; flex-shrink:0; }

/* ============================================================
   Player card v2 — esports/tech badge style, matching the
   reference design: angular tech frame, violet neon glow, gold
   embossed OVR, circular tech-bezel photo emblem, stat strip
   with line icons, tier ribbon banner, side wordmark.
   ============================================================ */
.pcard{
  position:relative; width:320px; margin-inline:auto;
  padding:24px 20px 18px;
  clip-path:polygon(0 0, 88% 0, 100% 6%, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 40px),
    linear-gradient(165deg, #12081f 0%, #0a0710 45%, #150a12 100%);
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,.8),
    0 0 0 1.5px rgba(139,92,246,.55),
    0 0 34px -6px rgba(139,92,246,.45),
    inset 0 0 40px -20px rgba(139,92,246,.4);
  color:var(--paper); text-align:center; overflow:hidden;
  animation:vgvPcardPulse 3.4s ease-in-out infinite;
}
@keyframes vgvPcardPulse{
  0%,100%{ box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1.5px rgba(139,92,246,.4), 0 0 26px -8px rgba(139,92,246,.35), inset 0 0 40px -20px rgba(139,92,246,.3); }
  50%{ box-shadow:0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1.5px rgba(139,92,246,.75), 0 0 40px -4px rgba(139,92,246,.6), inset 0 0 40px -20px rgba(139,92,246,.5); }
}
.pcard::after{
  content:''; position:absolute; top:-60%; left:-60%; width:60%; height:220%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  transform:rotate(20deg); animation:vgvHoloSheen 5s ease-in-out infinite; pointer-events:none;
}
/* corner hazard stripes (top-right + bottom-left), like the reference */
.pcard-stripes{ position:absolute; width:64px; height:34px; pointer-events:none; z-index:2; }
.pcard-stripes.tr{ top:10px; inset-inline-end:-6px; background:repeating-linear-gradient(-55deg, var(--violet-2) 0 4px, transparent 4px 10px); clip-path:polygon(30% 0,100% 0,70% 100%,0 100%); }
.pcard-stripes.bl{ bottom:10px; inset-inline-start:-6px; background:repeating-linear-gradient(-55deg, var(--violet-2) 0 4px, transparent 4px 10px); clip-path:polygon(30% 0,100% 0,70% 100%,0 100%); opacity:.7; }
/* vertical wordmark along the outer edge */
.pcard-side-text{
  position:absolute; top:50%; inset-inline-end:6px; transform:translateY(-50%) rotate(90deg); transform-origin:center;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:8.5px; letter-spacing:3px;
  color:rgba(255,255,255,.25); white-space:nowrap; z-index:1;
}
.pcard-brandmark{ position:absolute; top:16px; inset-inline-end:16px; width:16px; height:16px; opacity:.55; z-index:1; }

.pcard-ovr{
  position:absolute; top:20px; inset-inline-start:20px; z-index:2; text-align:start;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:44px; line-height:.9;
  background:linear-gradient(180deg, var(--gold-bright) 10%, var(--gold) 55%, #8a6320 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 22px rgba(205,165,82,.4);
  filter:drop-shadow(0 1px 0 rgba(255,232,180,.3));
}
.pcard-ovr-label{ display:block; font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:1.5px; margin-top:1px; }
.pcard-ovr-rule{ width:34px; height:2px; margin-top:5px; background:linear-gradient(90deg, var(--violet-2), transparent); }

.pcard-pos{
  position:absolute; top:22px; inset-inline-end:16px; z-index:2;
  padding:7px 16px 7px 20px; clip-path:polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
  background:rgba(20,10,30,.7); border:1px solid rgba(139,92,246,.6);
  box-shadow:0 0 14px -2px rgba(139,92,246,.5), inset 0 0 10px -4px rgba(139,92,246,.4);
  color:var(--violet-2); font-weight:800; font-size:15px; letter-spacing:1px;
  font-family:'Barlow Semi Condensed',sans-serif;
}

/* left-side meta: position label + mini pitch + foot preference */
.pcard-meta{ position:absolute; top:100px; inset-inline-start:18px; z-index:2; text-align:start; width:64px; }
.pcard-meta-label{ font-size:8px; font-weight:800; color:var(--muted-dim); letter-spacing:1px; text-transform:uppercase; }
.pcard-meta-value{ font-size:12px; font-weight:800; color:var(--paper); margin-top:1px; margin-bottom:8px; font-family:'Barlow Semi Condensed',sans-serif; }
.pcard-meta .pitch-map{ width:56px; margin:0 0 10px; }
.pcard-meta .pitch-map .dot{ width:9px; height:9px; }
.pcard-foot-ic{ width:14px; height:14px; vertical-align:-2px; margin-inline-end:3px; opacity:.85; }

/* central circular tech-bezel photo emblem */
.pcard-photo-wrap{ position:relative; width:150px; height:150px; margin:8px auto 10px; z-index:1; }
.pcard-crest-mark{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:3; width:48px; height:22px; color:var(--gold-bright); filter:drop-shadow(0 0 6px rgba(205,165,82,.6)); }
.pcard-bezel{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from -40deg, #2a2a34, #4a4a58 15%, #1c1c24 30%, #4a4a58 45%, #2a2a34 60%, #4a4a58 75%, #1c1c24 90%, #2a2a34 100%);
  box-shadow:0 0 0 1px rgba(139,92,246,.5), 0 0 24px -2px rgba(139,92,246,.55), 0 10px 26px -10px rgba(0,0,0,.7);
}
.pcard-bezel::before{
  content:''; position:absolute; inset:9px; border-radius:50%;
  background:linear-gradient(160deg, var(--gold-bright), var(--gold) 40%, #6b4d17 100%);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask:radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.pcard-photo{
  position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); border-radius:50%; object-fit:cover;
  z-index:1; background:var(--panel-2); display:block; box-shadow:inset 0 0 0 2px rgba(0,0,0,.4);
}
.pcard-photo-fallback{
  position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:1;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:44px; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, #b53838, #7a1414 60%, #4a0b0b 100%);
  text-shadow:0 2px 6px rgba(0,0,0,.5);
  box-shadow:inset 0 0 26px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.4);
}

.pcard-name{
  margin-top:2px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:24px; position:relative; z-index:1;
  background:linear-gradient(180deg, #fff, #c7cbd6 70%, #8b90a0); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pcard-team{ font-size:13px; color:var(--muted); margin-top:4px; position:relative; z-index:1; font-weight:600; }
.pcard-team b{ color:var(--violet-2); font-weight:800; }

.pcard-tier-ribbon{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
  margin:10px auto 0; padding:6px 22px; clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);
  background:linear-gradient(180deg, #1a1a22, #0c0c12); border:1px solid rgba(205,165,82,.5);
  box-shadow:0 0 12px -3px rgba(205,165,82,.4);
  color:var(--paper); font-weight:800; font-size:12.5px;
}

.pcard-stats{
  position:relative; z-index:1; margin-top:16px; display:grid; grid-template-columns:repeat(5,1fr);
  clip-path:polygon(4% 0,96% 0,100% 22%,100% 100%,0 100%,0 22%);
  background:linear-gradient(180deg, rgba(139,92,246,.09), rgba(255,255,255,.02));
  border:1px solid rgba(139,92,246,.45); box-shadow:0 0 18px -6px rgba(139,92,246,.35);
}
.pcard-stat{ padding:12px 2px 10px; border-inline-end:1px solid rgba(139,92,246,.25); }
.pcard-stat:last-child{ border-inline-end:none; }
.pcard-stat svg{ width:20px; height:20px; color:var(--violet-2); filter:drop-shadow(0 0 4px rgba(139,92,246,.6)); }
.pcard-stat b{
  display:block; margin-top:6px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:19px;
  background:linear-gradient(180deg,#fff,#c7cbd6); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pcard-stat span{ display:block; font-size:9px; color:var(--muted-dim); font-weight:700; letter-spacing:.3px; margin-top:2px; }

.pcard-footer{ position:relative; z-index:1; margin-top:14px; }
.pcard-footer b{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:11px; letter-spacing:2px; color:var(--violet-2); }
.pcard-footer div{ font-size:9px; color:var(--muted-dim); margin-top:2px; letter-spacing:.5px; }
.ovr-ring{
  position:relative; width:96px; height:96px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--gold) calc(var(--pct,50) * 1%), rgba(255,255,255,.08) 0);
  flex-shrink:0;
}
.ovr-ring::before{ content:''; position:absolute; inset:7px; border-radius:50%; background:var(--panel); }
.ovr-ring-inner{ position:relative; z-index:1; text-align:center; }
.ovr-ring-inner b{ display:block; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:26px; color:var(--paper); line-height:1; }
.ovr-ring-inner span{ display:block; font-size:9px; color:var(--muted); font-weight:700; letter-spacing:.4px; margin-top:2px; text-transform:uppercase; }

/* Horizontal attribute bar */
.attr-bar-row{ margin-bottom:13px; }
.attr-bar-row:last-child{ margin-bottom:0; }
.attr-bar-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.3px; }
.attr-bar-head b{ font-family:'Barlow Semi Condensed',sans-serif; font-size:14px; color:var(--paper); }
.attr-bar-track{ height:8px; border-radius:100px; background:rgba(255,255,255,.06); overflow:hidden; }
.attr-bar-fill{ height:100%; border-radius:100px; background:linear-gradient(90deg, var(--gold), var(--violet)); }

/* Mini pitch map */
.pitch-map{ position:relative; z-index:1; width:100%; aspect-ratio:68/50; background:linear-gradient(180deg,#0f2b1c,#0a1c12); border-radius:8px; margin-top:12px; overflow:hidden; }
.pitch-map svg{ width:100%; height:100%; display:block; }
.pitch-map .dot{ position:absolute; width:13px; height:13px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(205,165,82,.28), 0 0 14px rgba(205,165,82,.7); transform:translate(-50%,-50%); }

/* ============================================================
   Table-style rows (used for standings, rosters, lists)
   ============================================================ */
.tbl{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }

/* Score chip for match results */

/* Crest chip */

hr.rule{ border:none; border-top:1px solid var(--line-soft); margin:16px 0; }

/* ============================================================
   Goal-flash — brief celebratory pulse for a freshly revealed
   score (added to a score element via class="goal-flash" + JS
   triggers .goal-flash-play).
   ============================================================ */
.goal-flash-play{ animation:vgvGoalFlash .9s ease; }
@keyframes vgvGoalFlash{
  0%{ transform:scale(1); text-shadow:0 0 0 rgba(205,165,82,0); }
  30%{ transform:scale(1.28); text-shadow:0 0 26px rgba(205,165,82,.85); color:var(--gold-bright); }
  100%{ transform:scale(1); text-shadow:0 0 0 rgba(205,165,82,0); }
}
@keyframes vgvConfetti{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(0deg) translateY(0); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(340deg) translateY(-46px); }
}

/* ============================================================
   Watermark crest — large faint logo glyph behind a card,
   like the printed watermark on a real match-day graphic.
   ============================================================ */
.watermark-crest{ position:relative; overflow:hidden; }
.watermark-crest::before{
  content:'VGV';
  position:absolute; bottom:-18px; inset-inline-end:-10px;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:74px;
  color:rgba(255,255,255,.025); letter-spacing:2px; pointer-events:none; line-height:1; z-index:0;
}

/* ============================================================
   Division badges — deterministic color per division name so
   divisions read as visually distinct at a glance.
   ============================================================ */
.div-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:100px; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.div-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.div-1{ background:rgba(205,165,82,.16); color:var(--gold-bright); }
.div-2{ background:rgba(139,92,246,.16); color:var(--violet-2); }
.div-3{ background:rgba(52,196,122,.16); color:var(--success); }
.div-4{ background:rgba(224,168,60,.16); color:var(--warning); }
.div-5{ background:rgba(239,74,82,.16); color:#ff9296; }
.div-6{ background:rgba(37,99,235,.16); color:#7ab0ff; }

/* ============================================================
   Countdown clock (next-match)
   ============================================================ */
.countdown{ display:flex; gap:10px; }
.countdown .box{ text-align:center; background:rgba(255,255,255,.05); border:1px solid var(--line-soft); border-radius:11px; padding:8px 12px; min-width:56px; }
.countdown .box b{ display:block; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:22px; color:var(--gold-bright); line-height:1; }
.countdown .box span{ display:block; font-size:9.5px; color:var(--muted); font-weight:700; text-transform:uppercase; margin-top:3px; letter-spacing:.4px; }

/* ============================================================
   Achievement badges (player profile)
   ============================================================ */
.ach-badge{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:14px 8px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line-soft);
}
.ach-badge.locked{ opacity:.32; filter:grayscale(1); }
.ach-badge .ic{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px;
  background:conic-gradient(var(--gold), var(--violet), var(--gold));
}
.ach-badge b{ font-size:11px; font-weight:800; color:var(--paper); line-height:1.3; }
.ach-badge span{ font-size:9.5px; color:var(--muted-dim); }

/* ============================================================
   ENERGY LAYER — the "young gamer" pass: glitch text, neon hover,
   scroll reveal, particle fields, pack-opening cards, streak
   flames, podium glow, XP bars, loading kickoff, celebration burst.
   ============================================================ */

/* ---- Neon hover upgrade (stronger than the base .hover-lift) ---- */
.hover-neon{ transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; }
.hover-neon:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(205,165,82,.55) !important;
  box-shadow:0 26px 50px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(205,165,82,.35), 0 0 32px -4px rgba(205,165,82,.35);
}

/* ---- Glitch / RGB-split heading effect ---- */
.glitch-text{ position:relative; display:inline-block; }
.glitch-text::before, .glitch-text::after{
  content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%;
  overflow:hidden; opacity:0;
}
.glitch-text::before{ color:#ff3b6b; transform:translate(0,0); mix-blend-mode:screen; }
.glitch-text::after{ color:#3bd8ff; mix-blend-mode:screen; }
.glitch-text.glitch-play::before{ animation:vgvGlitchR 2.6s steps(2,end) 1; }
.glitch-text.glitch-play::after{ animation:vgvGlitchB 2.6s steps(2,end) 1; }
@keyframes vgvGlitchR{
  0%,100%{ opacity:0; transform:translate(0,0); }
  6%{ opacity:.8; transform:translate(-3px,1px); }
  10%{ opacity:0; }
  46%{ opacity:.7; transform:translate(2px,-1px); }
  50%{ opacity:0; }
}
@keyframes vgvGlitchB{
  0%,100%{ opacity:0; transform:translate(0,0); }
  7%{ opacity:.7; transform:translate(3px,-1px); }
  11%{ opacity:0; }
  47%{ opacity:.7; transform:translate(-2px,1px); }
  51%{ opacity:0; }
}

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal-in{ opacity:1; transform:translateY(0); }

/* ---- Particle field host ---- */
.particle-field{ position:relative; overflow:hidden; }
.particle-field > *:not(canvas){ position:relative; z-index:1; }

/* ---- Cursor glow ---- */
.cursor-glow-zone{ position:relative; overflow:hidden; }
.cursor-glow-dot{
  position:absolute; width:260px; height:260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(205,165,82,.14), transparent 70%);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .3s ease; z-index:0;
}

/* ---- Pack-opening player card reveal ---- */
.pack-reveal{ perspective:1200px; }
.pack-reveal .pcard{
  transform:rotateY(180deg) scale(.92); opacity:0;
  transition:transform .85s cubic-bezier(.2,.8,.2,1.4), opacity .5s ease;
}
.pack-reveal.pack-reveal-open .pcard{ transform:rotateY(0) scale(1); opacity:1; }
.pack-reveal.pack-reveal-open .pcard::after{ animation:vgvHoloSheen 4.5s ease-in-out .9s infinite; }

/* ---- Win/loss streak flame badge ---- */
.streak-badge{
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:100px;
  font-weight:800; font-size:11.5px; background:linear-gradient(100deg, rgba(239,74,82,.18), rgba(224,168,60,.14));
  color:var(--warning); border:1px solid rgba(224,168,60,.3);
}
.streak-badge .flame{ animation:vgvFlameFlicker 1.1s ease-in-out infinite; display:inline-block; }
@keyframes vgvFlameFlicker{
  0%,100%{ transform:scale(1) rotate(-2deg); }
  50%{ transform:scale(1.15) rotate(2deg); }
}

/* ---- Podium glow for standings rank 1/2/3 ---- */
.rank-1{ position:relative; background:linear-gradient(90deg, rgba(205,165,82,.16), transparent) !important; }
.rank-1 .rank-num{ color:var(--gold-bright); text-shadow:0 0 14px rgba(205,165,82,.7); }
.rank-2{ background:linear-gradient(90deg, rgba(200,205,215,.10), transparent) !important; }
.rank-2 .rank-num{ color:#d7dce6; text-shadow:0 0 10px rgba(215,220,230,.5); }
.rank-3{ background:linear-gradient(90deg, rgba(196,133,73,.12), transparent) !important; }
.rank-3 .rank-num{ color:#d99a5b; text-shadow:0 0 10px rgba(217,154,91,.5); }

/* ---- XP / tier progress bar ---- */
.xp-bar-wrap{ margin-top:8px; }
.xp-bar-head{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; margin-bottom:5px; letter-spacing:.3px; }
.xp-bar-track{ height:9px; border-radius:100px; background:rgba(255,255,255,.06); overflow:hidden; position:relative; }
.xp-bar-fill{
  height:100%; border-radius:100px; background:linear-gradient(90deg, var(--violet), var(--gold));
  width:0; transition:width 1.2s cubic-bezier(.2,.8,.2,1); position:relative;
  box-shadow:0 0 12px -1px rgba(205,165,82,.6);
}
.xp-bar-fill::after{
  content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  width:40%; animation:vgvXpSheen 2.4s ease-in-out infinite;
}
@keyframes vgvXpSheen{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(340%); } }

/* ---- Kickoff loading screen ---- */
#vgvLoader{
  position:fixed; inset:0; z-index:5000; background:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
  transition:opacity .5s ease, visibility .5s ease;
}
#vgvLoader.vgv-loader-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.vgv-loader-ball{
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #cfd3da 55%, #8a8f99 100%);
  position:relative; animation:vgvKickoff 1.1s cubic-bezier(.5,0,.5,1) infinite;
  box-shadow:0 0 30px -2px rgba(205,165,82,.5);
}
.vgv-loader-ball::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 50% 20%, #0b0f18 5px, transparent 6px),
    radial-gradient(circle at 25% 55%, #0b0f18 4px, transparent 5px),
    radial-gradient(circle at 75% 55%, #0b0f18 4px, transparent 5px);
}
@keyframes vgvKickoff{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(180deg); }
}
.vgv-loader-label{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; letter-spacing:2px; color:var(--muted); font-size:12px; text-transform:uppercase; }

/* ---- Full-screen celebration confetti burst (vgvCelebrate()) ---- */
.vgv-celebrate{ position:fixed; inset:0; z-index:6000; pointer-events:none; overflow:hidden; }
.vgv-celebrate i{
  position:absolute; top:-5vh; width:8px; height:14px; border-radius:2px; opacity:.95;
  animation:vgvCelebrateFall linear forwards;
}
@keyframes vgvCelebrateFall{
  to{ top:110vh; transform:translateX(24px) rotate(680deg); opacity:.2; }
}

/* ---- Tier-specific player card frames ---- */
.pcard-legend{ box-shadow:0 24px 60px -30px rgba(0,0,0,.7), 0 0 0 2px var(--gold), 0 0 40px -6px rgba(205,165,82,.55) !important; }
.pcard-legend .pcard-ovr{ color:#fff; text-shadow:0 0 18px rgba(205,165,82,.9); }
.pcard-star{ box-shadow:0 24px 60px -30px rgba(0,0,0,.7), 0 0 0 2px var(--violet), 0 0 32px -8px rgba(139,92,246,.5) !important; }

/* ---- Holographic card tilt ---- */
.holo-card{ perspective:900px; }
.holo-card .pcard{ transition:transform .15s ease-out; transform-style:preserve-3d; will-change:transform; }
.holo-glare{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:5; mix-blend-mode:overlay;
  transition:opacity .25s ease; border-radius:inherit;
}

/* ---- Level-up full-screen moment ---- */
.vgv-levelup{
  position:fixed; inset:0; z-index:6800; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(20,10,35,.85), rgba(5,7,13,.92));
  animation:vgvLevelupIn .35s ease;
}
.vgv-levelup.vgv-levelup-out{ animation:vgvLevelupOut .5s ease forwards; }
@keyframes vgvLevelupIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes vgvLevelupOut{ to{ opacity:0; } }
.vgv-levelup-card{ text-align:center; animation:vgvLevelupPop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes vgvLevelupPop{ 0%{ transform:scale(.4) rotate(-8deg); opacity:0; } 60%{ transform:scale(1.1) rotate(2deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
.vgv-levelup-label{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:20px; letter-spacing:6px; color:var(--violet-2); text-shadow:0 0 20px rgba(139,92,246,.8); }
.vgv-levelup-num{
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:140px; line-height:1;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #8a6320);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(205,165,82,.5); margin-top:6px;
}

/* ---- Time-of-day hero lighting overlays ---- */
.tod-hero{ position:relative; }
.tod-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:1; transition:background 1.2s ease; }
.tod-hero.tod-dawn::before{ background:linear-gradient(180deg, rgba(255,175,120,.14), transparent 60%); }
.tod-hero.tod-day::before{ background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%); }
.tod-hero.tod-dusk::before{ background:linear-gradient(180deg, rgba(205,90,140,.16), rgba(90,40,120,.1) 60%); }
.tod-hero.tod-night::before{ background:linear-gradient(180deg, rgba(30,20,60,.22), transparent 60%); }

/* ---- Online-now indicator ---- */
.online-now{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--muted); }
.online-now .dot{ width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(52,196,122,.6); animation:vgvOnlinePulse 1.8s ease-out infinite; }
@keyframes vgvOnlinePulse{ 0%{ box-shadow:0 0 0 0 rgba(52,196,122,.55); } 70%{ box-shadow:0 0 0 8px rgba(52,196,122,0); } 100%{ box-shadow:0 0 0 0 rgba(52,196,122,0); } }
@keyframes vgvDotPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.4); } }

/* ---- Rising star badge ---- */
.rising-star-badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:100px;
  font-weight:800; font-size:10.5px; text-transform:uppercase;
  background:linear-gradient(100deg, rgba(52,196,122,.2), rgba(205,165,82,.18)); color:#5fe0a0;
  border:1px solid rgba(52,196,122,.4);
}

/* ---- Match Center timeline ---- */
.mc-timeline{ position:relative; padding-inline-start:26px; }
.mc-timeline::before{ content:''; position:absolute; inset-inline-start:9px; top:4px; bottom:4px; width:2px; background:linear-gradient(180deg, var(--gold), var(--violet)); }
.mc-event{ position:relative; padding-bottom:18px; }
.mc-event:last-child{ padding-bottom:0; }
.mc-event::before{
  content:''; position:absolute; inset-inline-start:-26px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--panel-2); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center;
}
.mc-event-icon{ position:absolute; inset-inline-start:-24px; top:0; width:16px; height:16px; font-size:11px; text-align:center; line-height:16px; z-index:1; }
.mc-event-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; }

/* ---- Head-to-head mini table ---- */
.h2h-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:12.5px; }
.h2h-row:last-child{ border-bottom:none; }

/* ============================================================
   Homepage v2 — utility top bar, hexagon stats, league carousel,
   top-players leaderboard. Violet-forward, gold reserved for
   trophies/premium tiers only.
   ============================================================ */
.vgv-utilbar{ display:flex; align-items:center; gap:14px; padding:16px 0 6px; }
.vgv-utilbar-search{
  flex:1; max-width:420px; display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:100px; padding:10px 18px;
  color:var(--muted-dim); font-size:13px;
}
.vgv-utilbar-search svg{ width:16px; height:16px; flex-shrink:0; opacity:.7; }
.vgv-utilbar-icons{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.vgv-utilbar-icon{
  position:relative; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--line); color:var(--paper); font-size:16px; flex-shrink:0;
  transition:border-color .15s ease, transform .15s ease;
}
.vgv-utilbar-icon:hover{ border-color:var(--violet); transform:translateY(-1px); }
.vgv-utilbar-icon .dot{ position:absolute; top:7px; inset-inline-end:8px; width:7px; height:7px; border-radius:50%; background:var(--gold-bright); box-shadow:0 0 6px 1px rgba(236,201,122,.7); }
.vgv-user-chip{
  display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line);
  border-radius:100px; padding:6px 8px 6px 16px; flex-shrink:0;
}
.vgv-user-chip-info{ text-align:end; }
.vgv-user-chip-name{ font-weight:800; font-size:12.5px; color:var(--paper); }
.vgv-user-chip-level{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.vgv-user-chip-level span{ font-size:10px; font-weight:800; color:var(--violet-2); white-space:nowrap; }
.vgv-user-chip-level .bar{ width:56px; height:4px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
.vgv-user-chip-level .bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--violet), var(--violet-2)); }
.vgv-user-chip-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--violet); flex-shrink:0; }
.vgv-user-chip-avatar-fallback{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; border:2px solid var(--violet);
  background:var(--panel-3); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
}

/* Hexagonal stat badges */
.vgv-hexstats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.vgv-hexstat{
  position:relative; display:flex; align-items:center; gap:10px; padding:16px 18px;
  background:linear-gradient(150deg, var(--panel-2), var(--panel));
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  border:1px solid var(--line);
}
.vgv-hexstat::before{
  content:''; position:absolute; inset:0; padding:1px;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background:linear-gradient(150deg, rgba(155,61,255,.5), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.vgv-hexstat-ic{ font-size:22px; flex-shrink:0; }
.vgv-hexstat b{ display:block; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:20px; color:#fff; }
.vgv-hexstat span{ font-size:11px; color:var(--muted); font-weight:600; }

/* Active leagues carousel */
.vgv-leagues-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.vgv-leagues-head h2{ font-size:16px; font-weight:800; }
.vgv-leagues-nav{ display:flex; gap:6px; margin-inline-start:auto; }
.vgv-leagues-nav button{
  width:30px; height:30px; border-radius:50%; background:var(--panel-2); border:1px solid var(--line);
  color:var(--paper); font-size:13px; cursor:pointer;
}
.vgv-leagues-row{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
.vgv-league-card{
  scroll-snap-align:start; flex:0 0 200px; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
  border:1px solid var(--line); background:var(--panel); transition:transform .2s ease, border-color .2s ease;
}
.vgv-league-card:hover{ transform:translateY(-3px); border-color:var(--violet); }
.vgv-league-card-top{ padding:26px 16px 18px; text-align:center; position:relative; overflow:hidden; }
.vgv-league-card-top .ic{ font-size:40px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); position:relative; z-index:1; }
.vgv-league-card.tier-champions .vgv-league-card-top{ background:linear-gradient(160deg, #6b4a12, #2a1d08); }
.vgv-league-card.tier-legend .vgv-league-card-top{ background:linear-gradient(160deg, #5c3d13, #241a0c); }
.vgv-league-card.tier-elite .vgv-league-card-top{ background:linear-gradient(160deg, #6b3312, #26150c); }
.vgv-league-card.tier-rising .vgv-league-card-top{ background:linear-gradient(160deg, #3a3a4a, #1c1c26); }
.vgv-league-card-body{ padding:12px 16px 16px; text-align:center; }
.vgv-league-card-body .name{ font-weight:800; font-size:13.5px; }
.vgv-league-card-body .meta{ font-size:11px; color:var(--muted); margin-top:3px; }
.vgv-league-card-body .btn{ display:block; width:100%; margin-top:10px; padding:8px 0; border-radius:9px; background:var(--violet); color:#fff; font-weight:700; font-size:12px; text-align:center; }

/* Top players leaderboard */
.vgv-toplist{ display:flex; flex-direction:column; gap:2px; }
.vgv-toplist-row{ display:flex; align-items:center; gap:10px; padding:10px 6px; border-radius:10px; text-decoration:none; color:inherit; transition:background .15s ease; }
.vgv-toplist-row:hover{ background:rgba(255,255,255,.04); }
.vgv-toplist-rank{ width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11.5px; flex-shrink:0; background:var(--panel-3); color:var(--muted); }
.vgv-toplist-row:nth-child(1) .vgv-toplist-rank{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1305; }
.vgv-toplist-row:nth-child(2) .vgv-toplist-rank{ background:#c7cede; color:#20232e; }
.vgv-toplist-row:nth-child(3) .vgv-toplist-rank{ background:#d69a63; color:#2a1608; }
.vgv-toplist-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.vgv-toplist-avatar-fallback{ width:34px; height:34px; border-radius:50%; background:var(--panel-3); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0; }
.vgv-toplist-name{ font-weight:700; font-size:13px; }
.vgv-toplist-ovr{ font-size:11px; color:var(--muted); margin-top:1px; }
.vgv-toplist-tier{ margin-inline-start:auto; font-size:17px; flex-shrink:0; }

@media (max-width:900px){
  .vgv-hexstats{ grid-template-columns:repeat(2,1fr); }
  .vgv-utilbar-search{ display:none; }
}

/* ---- Championship celebration banner ---- */
.champion-banner{
  position:relative; overflow:hidden; border-radius:18px; padding:28px 24px; text-align:center;
  background:linear-gradient(160deg, #1c1430, #0f0a1c); border:1.5px solid var(--gold);
  box-shadow:0 0 40px -10px rgba(205,165,82,.4);
}
.champion-banner .trophy{ font-size:52px; animation:vgvTrophyBounce 2.2s ease-in-out infinite; display:inline-block; }
@keyframes vgvTrophyBounce{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-8px) rotate(-4deg); } }

/* ============================================================
   League standings — ornate "trophy frame" card with angular
   clipped corners, glowing corner brackets, and a hexagonal
   wreath badge overlapping the top edge.
   ============================================================ */
.league-frame{
  position:relative; margin-top:52px; padding:56px 28px 40px;
  background:linear-gradient(180deg, #1c1436, #120c22 70%);
  border:1px solid rgba(155,61,255,.35);
  box-shadow:0 0 40px -14px rgba(155,61,255,.4);
  clip-path:polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
}
.league-frame-badge{
  position:absolute; top:-38px; inset-inline-start:50%; transform:translateX(50%);
  width:84px; height:84px; display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:radial-gradient(circle, #241a42, #150f28 75%);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border:1.5px solid var(--gold);
  box-shadow:0 0 24px -4px rgba(205,165,82,.6);
  font-size:26px;
}
.league-frame-badge span{ font-size:9px; font-weight:800; color:var(--gold-bright); letter-spacing:.5px; margin-top:1px; }
.league-frame-labels{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.league-frame-labels b{
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:12px; letter-spacing:2px;
  color:var(--violet-2); text-transform:uppercase; opacity:.85;
}
.league-frame-footer{
  text-align:center; margin-top:26px; padding-top:16px; border-top:1px solid rgba(155,61,255,.25);
}
.league-frame-footer span{
  display:inline-block; padding:6px 22px; border:1px solid var(--gold); border-radius:100px;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:13px; letter-spacing:2px; color:var(--gold-bright);
}

.league-table-v2{ width:100%; border-collapse:collapse; }
.league-table-v2 thead th{
  font-size:11.5px; font-weight:700; color:var(--muted); text-align:center; padding-bottom:10px;
  border-bottom:1px solid rgba(155,61,255,.25);
}
.league-table-v2 thead th:first-child, .league-table-v2 thead th:nth-child(2){ text-align:start; }
.league-table-v2 thead th .hcap{ display:block; font-size:13px; margin-top:3px; opacity:.7; }
.league-table-v2 tbody td{ padding:14px 8px; text-align:center; font-size:14px; border-bottom:1px solid rgba(255,255,255,.05); }
.league-table-v2 tbody tr:last-child td{ border-bottom:none; }
.league-table-v2 .lt-rank{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:16px; color:var(--gold-bright); }
.league-table-v2 .lt-team{ display:flex; align-items:center; gap:10px; text-align:start; font-weight:700; }
.league-table-v2 .lt-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px 1px currentColor; }
.league-table-v2 .lt-crest{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--line); flex-shrink:0; }
.league-table-v2 .lt-crest-fallback{ width:34px; height:34px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.league-table-v2 .lt-pts{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:18px; color:var(--gold-bright); }

/* ---- Knockout bracket tree ---- */
.bracket-tree{ display:flex; align-items:stretch; gap:0; overflow-x:auto; padding-bottom:8px; }
.bracket-round{ display:flex; flex-direction:column; justify-content:space-around; min-width:230px; padding:0 22px; position:relative; }
.bracket-round-title{
  position:sticky; top:0; text-align:center; font-size:11px; font-weight:800; color:var(--violet-2);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:14px; background:var(--panel); padding:4px 0;
}
.bracket-match{
  position:relative; display:block; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px;
  margin:10px 0; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease;
}
.bracket-match:hover{ border-color:var(--gold); transform:scale(1.02); }
.bracket-match.bracket-match-pending{ opacity:.55; cursor:default; }
.bracket-match.bracket-match-pending:hover{ transform:none; border-color:var(--line-soft); }
.bracket-team{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; font-size:12px; font-weight:600; border-bottom:1px solid var(--line-soft); }
.bracket-team:last-child{ border-bottom:none; }
.bracket-team b{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:14px; color:var(--muted); }
.bracket-team.bracket-winner{ background:rgba(205,165,82,.1); }
.bracket-team.bracket-winner b{ color:var(--gold-bright); }
/* connector line from each match to the next round */
.bracket-round:not(:last-child) .bracket-match::after{
  content:''; position:absolute; top:50%; inset-inline-end:-22px; width:22px; height:1px; background:var(--line-soft);
}
.bracket-round:not(:first-child) .bracket-match::before{
  content:''; position:absolute; top:50%; inset-inline-start:-22px; width:22px; height:1px; background:var(--line-soft);
}

/* ---- Achievement toast ---- */
.vgv-toast-host{
  position:fixed; top:18px; inset-inline-end:18px; z-index:7000;
  display:flex; flex-direction:column; gap:10px; max-width:320px;
}
.vgv-toast{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:linear-gradient(120deg, var(--panel-2), var(--panel-3));
  border:1px solid var(--gold); border-radius:14px; color:var(--paper);
  box-shadow:0 20px 45px -15px rgba(0,0,0,.6), 0 0 24px -6px rgba(205,165,82,.4);
  transform:translateX(120%); opacity:0; transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
[dir="rtl"] .vgv-toast{ transform:translateX(-120%); }
.vgv-toast.vgv-toast-in{ transform:translateX(0); opacity:1; }
.vgv-toast-ic{ font-size:24px; flex-shrink:0; }
.vgv-toast b{ display:block; font-size:13.5px; font-weight:800; }
.vgv-toast span{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ---- Derby / big-match badge ---- */
.derby-badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:100px;
  font-weight:800; font-size:10.5px; text-transform:uppercase; letter-spacing:.3px;
  background:linear-gradient(100deg, rgba(239,74,82,.22), rgba(205,165,82,.22)); color:#ff9296;
  border:1px solid rgba(239,74,82,.4); animation:vgvDerbyPulse 1.8s ease-in-out infinite;
}
@keyframes vgvDerbyPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,74,82,.3); } 50%{ box-shadow:0 0 0 5px rgba(239,74,82,0); } }

/* ---- Skeleton shimmer (loading placeholders) ---- */
.skeleton{
  position:relative; overflow:hidden; background:var(--panel-2);
}
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  transform:translateX(-100%); animation:vgvShimmer 1.5s ease-in-out infinite;
}
@keyframes vgvShimmer{ 100%{ transform:translateX(100%); } }
img.img-fade{ opacity:0; transition:opacity .35s ease; }
img.img-fade.img-loaded{ opacity:1; }

/* ---- Tactical pitch formation board ---- */
.formation-pitch{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 40px, transparent 40px 80px),
    linear-gradient(180deg, #123a24, #0c2417);
  border:1px solid var(--line);
}
.formation-pitch svg{ position:absolute; inset:0; width:100%; height:100%; }
.formation-token{
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; transition:transform .2s ease; z-index:1;
}
.formation-token:hover{ transform:translate(-50%,-50%) scale(1.12); z-index:2; }
.formation-token .fchip{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--gold), var(--gold-bright)); color:#1a1305; font-weight:800; font-size:11px;
  box-shadow:0 6px 16px -4px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.25); font-family:'Barlow Semi Condensed',sans-serif;
}
.formation-token .fname{
  font-size:9.5px; font-weight:700; color:#fff; background:rgba(5,7,13,.65); padding:1px 6px; border-radius:6px;
  white-space:nowrap; max-width:74px; overflow:hidden; text-overflow:ellipsis;
}

/* ---- Screen shake + flash (big result reveal) ---- */
@keyframes vgvScreenShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); } 40%{ transform:translate(5px,-3px); }
  60%{ transform:translate(-4px,2px); } 80%{ transform:translate(4px,-2px); }
}
body.vgv-shake{ animation:vgvScreenShake .5s ease; }
.vgv-flash{
  position:fixed; inset:0; z-index:6500; pointer-events:none;
  background:radial-gradient(circle, rgba(205,165,82,.5), transparent 70%);
  opacity:0; animation:vgvFlashPulse .8s ease forwards;
}
@keyframes vgvFlashPulse{ 0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; } }

/* ============================================================
   Cinematic hero — Ken Burns pan/zoom + animated SVG stadium
   atmosphere (crowd shimmer, sweeping floodlights, drifting mist).
   All motion, zero video weight.
   ============================================================ */
.kenburns{
  animation:vgvKenBurns 26s ease-in-out infinite alternate;
  transform-origin:60% 40%;
  will-change:transform;
}
@keyframes vgvKenBurns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.14) translate(-1.5%,-2%); }
}

.stadium-scene{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.stadium-scene svg{ position:absolute; inset:0; width:100%; height:100%; }

/* Crowd silhouette strip along the bottom, gentle collective sway */
.sc-crowd{ animation:vgvCrowdSway 4.5s ease-in-out infinite; transform-origin:50% 100%; }
.sc-crowd:nth-of-type(2){ animation-delay:-1.5s; animation-duration:5.2s; }
.sc-crowd:nth-of-type(3){ animation-delay:-3s; animation-duration:3.8s; }
@keyframes vgvCrowdSway{
  0%,100%{ transform:scaleY(1) translateY(0); }
  50%{ transform:scaleY(1.04) translateY(-2px); }
}

/* Sweeping floodlight beams, like real stadium lighting rigs */
.sc-beam{ transform-origin:top center; animation:vgvBeamSweep 9s ease-in-out infinite; opacity:.55; }
.sc-beam.b2{ animation-duration:11s; animation-delay:-3s; opacity:.35; }
.sc-beam.b3{ animation-duration:7.5s; animation-delay:-5s; opacity:.4; }
@keyframes vgvBeamSweep{
  0%,100%{ transform:rotate(-14deg); }
  50%{ transform:rotate(14deg); }
}

/* Slow drifting mist layer for depth */
.sc-mist{ animation:vgvMistDrift 22s linear infinite; opacity:.18; }
@keyframes vgvMistDrift{
  0%{ transform:translateX(-6%); }
  100%{ transform:translateX(6%); }
}

/* Rotating ball emblem, subtle accent in a hero corner */
.sc-ball{ animation:vgvBallSpin 7s linear infinite; transform-origin:center; opacity:.8; }
@keyframes vgvBallSpin{ 100%{ transform:rotate(360deg); } }

/* ---- Choreographed intro cascade (used with data-delay on .reveal) ---- */
.reveal[data-delay]{ transition-delay:var(--rd,0ms); }

@media (prefers-reduced-motion: reduce){
  .kenburns, .sc-crowd, .sc-beam, .sc-mist, .sc-ball{ animation:none !important; }
}

/* ============================================================
   Teams list — heraldic shield crest cards with a colored glow
   matching each team's own accent color.
   ============================================================ */
.team-shield-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:inherit;
  padding:26px 18px 20px; border-radius:16px; background:var(--panel); border:1px solid var(--line);
  transition:transform .2s ease, border-color .2s ease;
}
.team-shield-card:hover{ transform:translateY(-4px); border-color:var(--shield-color, var(--violet)); }
.team-shield{
  position:relative; width:100px; height:112px; margin-bottom:14px;
  clip-path:polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
  background:linear-gradient(160deg, var(--shield-color, var(--violet)), rgba(0,0,0,.5) 130%);
  box-shadow:0 0 26px -4px var(--shield-color, var(--violet));
  display:flex; align-items:center; justify-content:center; padding:3px;
}
.team-shield-inner{
  width:100%; height:100%;
  clip-path:polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
  background:#0e0a1a; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.team-shield-inner img{ width:100%; height:100%; object-fit:cover; }
.team-shield-inner .fallback{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:26px; color:var(--shield-color, var(--violet)); }
.team-shield-card .name{ font-weight:800; font-size:15px; }
.team-shield-card .meta{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.team-shield-card .count{ font-size:11.5px; color:var(--muted-dim); margin-top:8px; display:flex; align-items:center; gap:5px; }

/* ============================================================
   Players list — hexagon identity badges, alternating violet/teal.
   ============================================================ */
.player-hex-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:inherit;
  padding:24px 16px; border-radius:16px; background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); transition:transform .2s ease, border-color .2s ease;
}
.player-hex-card:hover{ transform:translateY(-4px); border-color:var(--hex-color, var(--violet)); }
.player-hex{
  position:relative; width:96px; height:96px; margin-bottom:14px;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:linear-gradient(155deg, var(--hex-color, var(--violet)), rgba(0,0,0,.6));
  box-shadow:0 0 22px -4px var(--hex-color, var(--violet));
  display:flex; align-items:center; justify-content:center; padding:2.5px;
}
.player-hex-inner{
  width:100%; height:100%; clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:#0e0a1a; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.player-hex-inner img{ width:100%; height:100%; object-fit:cover; }
.player-hex-inner .fallback{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:30px; color:var(--hex-color, var(--violet)); }
.player-hex-card .name{ font-weight:800; font-size:14.5px; }
.player-hex-card .meta{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.player-hex-ovr{
  margin-top:12px; display:inline-block; padding:5px 16px; border-radius:100px;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:15px;
  background:var(--hex-color, var(--violet)); color:#08060f;
}

/* ============================================================
   Free agents — angular cards with a hexagon position chip.
   ============================================================ */
.fa-card{
  display:flex; align-items:center; gap:16px; padding:16px 18px; background:var(--panel);
  border:1px solid var(--line); clip-path:polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
  position:relative; overflow:hidden;
}
.fa-card::before{ content:''; position:absolute; top:0; inset-inline-start:0; width:16px; height:16px; background:var(--violet); opacity:.8; clip-path:polygon(0 0, 100% 0, 0 100%); }
.fa-card-btn{
  flex-shrink:0; padding:10px 18px; border-radius:9px; background:#efeafc; color:#241a42; font-weight:800; font-size:12.5px;
  border:none; cursor:pointer; white-space:nowrap;
}
.fa-card-info{ flex:1; }
.fa-card-info .name{ font-weight:800; font-size:14.5px; }
.fa-card-info .meta{ font-size:11.5px; color:var(--violet-2); margin-top:2px; }
.fa-card-pos{
  flex-shrink:0; width:52px; height:58px; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:linear-gradient(155deg, var(--panel-3), #0e0a1a); border:1px solid var(--violet);
  font-weight:800; font-size:13px; color:#fff;
}

/* ============================================================
   Hall of Fame — trophy-frame leaderboard with a spotlighted #1.
   ============================================================ */
.hof-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.hof-tabs a{ padding:9px 18px; border-radius:100px; font-size:13px; font-weight:700; color:var(--muted); background:var(--panel); border:1px solid var(--line); }
.hof-tabs a.active{ color:#fff; background:linear-gradient(100deg, rgba(155,61,255,.35), rgba(155,61,255,.12)); border-color:var(--violet); box-shadow:0 0 16px -4px rgba(155,61,255,.6); }
.hof-layout{ display:grid; grid-template-columns:220px 1fr; gap:20px; align-items:start; }
@media (max-width:760px){ .hof-layout{ grid-template-columns:1fr; } }
.hof-trophy{ text-align:center; padding:26px 16px; }
.hof-trophy-ic{ font-size:64px; filter:drop-shadow(0 0 24px rgba(205,165,82,.6)); }
.hof-trophy-name{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:16px; margin-top:8px; }
.hof-trophy-champ{ margin-top:16px; background:var(--panel-2); border-radius:12px; padding:12px; }
.hof-trophy-champ img, .hof-trophy-champ .fb{ width:52px; height:52px; border-radius:50%; object-fit:cover; margin:0 auto 8px; display:block; border:2px solid var(--gold); }
.hof-trophy-champ .fb{ background:var(--panel-3); display:flex; align-items:center; justify-content:center; font-weight:800; }
.hof-trophy-champ b{ display:block; font-size:13px; }
.hof-trophy-champ .val{ color:var(--gold-bright); font-weight:800; font-family:'Barlow Semi Condensed',sans-serif; font-size:20px; margin-top:2px; }
.hof-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:12px; text-decoration:none; color:inherit; }
.hof-row.rank1{ background:linear-gradient(100deg, rgba(205,165,82,.16), transparent); border:1px solid rgba(205,165,82,.5); }
.hof-row .rk{ width:24px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:15px; color:var(--muted); flex-shrink:0; text-align:center; }
.hof-row.rank1 .rk{ color:var(--gold-bright); }
.hof-row img, .hof-row .fb{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.hof-row .fb{ background:var(--panel-3); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.hof-row .nm{ flex:1; min-width:0; font-weight:700; font-size:13.5px; }
.hof-row .tm{ font-size:11px; color:var(--muted); }
.hof-row .val{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:17px; color:var(--gold-bright); flex-shrink:0; }

/* ============================================================
   Predictions — hexagon rank badges + match prediction cards.
   ============================================================ */
.pred-row{ display:flex; align-items:center; gap:12px; padding:11px 6px; border-bottom:1px solid var(--line-soft); }
.pred-row:last-child{ border-bottom:none; }
.pred-hex{
  width:34px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:linear-gradient(155deg, var(--gold), #6b4a12); font-weight:800; font-size:13px; color:#1a1305;
}
.pred-row:nth-child(2) .pred-hex{ background:linear-gradient(155deg, #c7cede, #4a4f5c); color:#1a1c22; }
.pred-row:nth-child(3) .pred-hex{ background:linear-gradient(155deg, #d69a63, #5c3410); color:#2a1608; }
.pred-row:nth-child(n+4) .pred-hex{ background:var(--panel-3); color:var(--muted); }
.pred-row .nm{ flex:1; font-weight:700; font-size:13.5px; }
.pred-row .pts{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:16px; color:var(--gold-bright); }
.pred-match{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; }
.pred-match .side{ flex:1; text-align:center; }
.pred-match .side img, .pred-match .side .fb{ width:52px; height:52px; border-radius:14px; object-fit:cover; margin:0 auto 8px; }
.pred-match .side .fb{ background:var(--panel-3); display:flex; align-items:center; justify-content:center; font-weight:800; }
.pred-match .vs{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:15px; color:var(--violet-2); flex-shrink:0; }

/* ============================================================
   Compare — hexagon OVR badges with a lightning VS divider.
   ============================================================ */
.cmp-hex{
  width:96px; height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border:1.5px solid var(--cmp-color, var(--gold)); background:var(--panel-2);
  box-shadow:0 0 26px -6px var(--cmp-color, var(--gold));
}
.cmp-hex b{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:30px; color:var(--cmp-color, var(--gold)); }
.cmp-hex span{ font-size:10.5px; color:var(--muted); font-weight:700; }
.cmp-vs{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:22px; color:#fff; position:relative; }
.cmp-bar-row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.cmp-bar-row:last-child{ border-bottom:none; }
.cmp-bar-row .num{ width:32px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:16px; text-align:center; flex-shrink:0; }
.cmp-bar-track{ flex:1; height:9px; border-radius:6px; background:var(--panel-3); overflow:hidden; }
.cmp-bar-fill{ height:100%; border-radius:6px; display:block; }
.cmp-bar-fill.side-a{ margin-left:auto; }
.cmp-bar-fill.side-b{ margin-right:auto; }
.cmp-bar-label{ width:64px; text-align:center; font-size:12px; color:var(--muted); flex-shrink:0; }
@media (max-width:480px){
  .cmp-bar-row{ gap:6px; }
  .cmp-bar-label{ width:44px; font-size:10.5px; }
  .cmp-bar-row .num{ width:24px; font-size:14px; }
  .cmp-hex{ width:78px; height:90px; }
  .cmp-hex b{ font-size:24px; }
}

/* ============================================================
   Hot News — angular clipped cards with a floating category tag.
   ============================================================ */
.news-card-v2{
  position:relative; padding:22px 20px 20px; background:var(--panel);
  border:1px solid var(--violet); border-radius:2px;
  clip-path:polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
  box-shadow:0 0 20px -10px rgba(155,61,255,.5);
}
.news-card-v2::before{ content:''; position:absolute; top:0; inset-inline-start:0; width:20px; height:20px; background:var(--ink); clip-path:polygon(0 0, 100% 0, 0 100%); }
.news-tag-float{
  position:absolute; top:-13px; inset-inline-start:20px; padding:5px 16px; border-radius:100px;
  background:linear-gradient(100deg, var(--violet), var(--violet-bright)); color:#fff; font-weight:800; font-size:11.5px;
  box-shadow:0 4px 12px -2px rgba(155,61,255,.6);
}

/* ============================================================
   Gallery — glowing color-cycled photo frames with a caption
   overlay on hover.
   ============================================================ */
.shot{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer; break-inside:avoid;
  border:1.5px solid var(--shot-color, var(--violet)); box-shadow:0 0 22px -8px var(--shot-color, var(--violet));
  transition:transform .2s ease;
}
.shot:hover{ transform:scale(1.02); }
.shot img{ width:100%; display:block; }
.shot-caption{
  position:absolute; inset-inline:0; bottom:0; padding:26px 12px 10px;
  background:linear-gradient(to top, rgba(5,3,10,.92), transparent);
  font-size:11.5px; opacity:0; transition:opacity .2s ease;
}
.shot:hover .shot-caption{ opacity:1; }

/* ============================================================
   Transfers — offer card with a hexagon team badge.
   ============================================================ */
.tr-offer-card{ display:flex; align-items:center; gap:16px; padding:14px 4px; flex-wrap:wrap; }
.tr-offer-hex{
  width:54px; height:60px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  background:linear-gradient(155deg, var(--hex-color, var(--violet)), rgba(0,0,0,.55)); border:1px solid var(--hex-color, var(--violet));
}
.tr-offer-hex img{ width:100%; height:100%; object-fit:cover; clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); }
.tr-offer-hex span{ font-weight:800; font-size:12px; color:#fff; }