/* ══════════════════════════════════════════════════════════════════════
   lb11-r4.css — reference-match refinement layer.
   Loaded last, so it refines without touching the working stylesheets.

   DIRECTION (from the approved references):
     · Electric / Royal blue leads the interface.
     · Gold is reserved for prestige: rank, Reward Points, Prestige tiers
       and premium CTAs — and it must stay gold on EVERY skin, which the
       skin tokens alone cannot do (on the blue skin --lp-gold *is* blue).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. PRESTIGE GOLD — skin-independent ──────────────────────────────
   These never change with the skin. Use them only for reward/rank/prestige. */
:root{
  --lb-pg:        #D4AF37;
  --lb-pg-hi:     #F6DD84;
  --lb-pg-deep:   #8F6F1F;
  --lb-pg-ink:    #1B1402;
  --lb-pg-rgb:    212,175,55;
  --lb-pg-foil:   linear-gradient(118deg,#F6DD84 0%,#D4AF37 48%,#A8842A 100%);
  --lb-pg-glow:   0 0 0 1px rgba(var(--lb-pg-rgb),.42), 0 10px 30px -10px rgba(var(--lb-pg-rgb),.55);
}
/* On the gold skin the two systems coincide — keep them in step. */
html[data-skin="gold"]{ --lb-pg:var(--lp-gold); --lb-pg-hi:var(--lp-gold-hi); --lb-pg-deep:var(--lp-gold-deep); }

/* Reward Points and Career Rank read as treasure, on every skin. */
.lp-chip.gold b,
#lpPts, #lpRankChip b{ color:var(--lb-pg-hi) !important; }
.lp-chip.gold{ border-color:rgba(var(--lb-pg-rgb),.34) !important; }

/* ── 2. LOGIN — closer to the approved reference ─────────────────────── */

/* The hero panel: brighter blue field, stronger rim, more generous radius. */
.lg-hero{
  border-radius:30px !important;
  box-shadow:
    0 0 0 1px rgba(var(--lp-acc2-rgb),.55),
    0 0 0 6px rgba(var(--lp-acc-rgb),.08),
    0 0 90px -10px rgba(var(--lp-acc-rgb),.45),
    0 40px 110px -40px rgba(0,0,0,.95) !important;
}
/* Let the stadium read. The scrim now leans BLUE rather than neutral black,
   which is what makes the reference feel electric instead of smoky. */
.lg-photo img{ opacity:.9 !important; filter:saturate(1.2) contrast(1.08) brightness(1.08) !important; }
.lg-photo::after{
  background:
    radial-gradient(58% 74% at 17% 50%, rgba(5,12,28,.84) 0%, rgba(8,20,45,.34) 58%, transparent 82%),
    linear-gradient(100deg, rgba(10,26,60,.10) 0%, rgba(8,20,48,.20) 46%,
                            rgba(6,13,30,.72) 68%, rgba(5,10,22,.95) 88%),
    linear-gradient(to bottom, rgba(6,14,32,.50) 0%, transparent 20%,
                            transparent 72%, rgba(5,10,22,.96) 100%) !important;
}
/* A cool rim of stadium light along the top edge, as in the reference. */
.lg-hero::before{
  content:""; position:absolute; inset:0 0 auto; height:38%; z-index:0; pointer-events:none;
  background:radial-gradient(90% 100% at 50% 0%, rgba(var(--lp-acc2-rgb),.20), transparent 70%);
}
.lg-hero > *:not(.lg-photo){ position:relative; z-index:1; }

/* Headline hierarchy: bigger, tighter, with the accent line clearly dominant. */
.lg-pitch h1{
  font-size:clamp(40px,7.6vw,86px) !important; line-height:.9 !important;
  letter-spacing:.004em !important;
}
.lg-pitch h1 > span:not(i), .lg-pitch h1{ text-shadow:0 4px 34px rgba(0,0,0,.75); }
/* NOTE: no `filter` here — a filter creates a new rendering context that
   defeats background-clip:text in Chromium and paints a solid bar. */
.lg-pitch h1 i{
  /* The `background` shorthand carries background-clip, so an !important
     shorthand would reset the clip to border-box and paint a solid bar.
     Every clip property therefore needs !important too. */
  background-image:var(--lb-pg-foil) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-shadow:none !important;
}
.lg-script{ opacity:.85; letter-spacing:.01em; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.lg-sub{ font-size:clamp(16px,1.8vw,20px) !important; color:var(--lp-on-night) !important;
  text-shadow:0 2px 16px rgba(0,0,0,.7); max-width:38ch !important; }
.lg-trust .ic{ color:var(--lb-pg-hi); }
.lg-trust b{ text-shadow:0 2px 12px rgba(0,0,0,.7); }

/* The sign-in card: glassier, brighter edge, roomier — the reference's card. */
.lg-card{
  border-radius:24px !important;
  padding:clamp(24px,2.8vw,34px) !important;
  background:linear-gradient(170deg, rgba(14,27,56,.90), rgba(8,16,36,.94)) !important;
  border:1px solid rgba(var(--lp-acc2-rgb),.52) !important;
  box-shadow:
    0 0 0 1px rgba(var(--lp-acc-rgb),.22) inset,
    0 0 64px -12px rgba(var(--lp-acc-rgb),.55),
    0 34px 90px -32px rgba(0,0,0,.95) !important;
}
.lg-card-head h2{ font-size:clamp(24px,2.8vw,31px) !important; letter-spacing:-.01em; }
.lg-f input{ height:56px !important; border-radius:14px !important;
  border-color:rgba(var(--lp-acc2-rgb),.34) !important;
  background:rgba(4,10,24,.72) !important; }
.lg-f input:focus{ border-color:var(--lp-gold) !important;
  box-shadow:0 0 0 3px rgba(var(--lp-acc-rgb),.30) !important; }
/* Primary CTA keeps the electric blue; it is the interface, not a reward. */
.lg-go{ min-height:58px !important; border-radius:14px !important; font-size:17px !important;
  box-shadow:0 14px 40px -12px rgba(var(--lp-acc-rgb),.85) !important; }
.lg-alt{ min-height:50px; border-radius:13px; }

/* The feature row under the hero — the reference's four illustrated cards. */
.lg-more{ border-top:0 !important; padding-top:clamp(30px,5vw,62px) !important; }
.lg-feats{ gap:14px !important; }
.lg-feat{
  padding:18px !important; border-radius:20px !important;
  background:linear-gradient(165deg, rgba(16,30,62,.78), rgba(9,17,38,.86)) !important;
  border:1px solid rgba(var(--lp-acc2-rgb),.26) !important;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9);
}
.lg-feat:hover{ border-color:rgba(var(--lp-acc2-rgb),.62) !important;
  box-shadow:0 22px 54px -20px rgba(var(--lp-acc-rgb),.55) !important; }
.lg-feat .pic{ width:64px !important; height:64px !important; border-radius:16px !important;
  background:radial-gradient(circle at 40% 32%, rgba(var(--lp-acc2-rgb),.26), rgba(var(--lp-acc-rgb),.10) 70%) !important; }
.lg-feat b{ font-size:15px !important; }

@media (max-width:980px){
  /* Mobile: the reference stacks hero → trust row → card, with the player
     cropped to a tall band rather than a letterbox. */
  .lg-hero{ border-radius:24px !important; }
  .lg-photo{ height:62% !important; }
  .lg-photo img{ object-position:50% 20% !important; opacity:.82 !important; }
  .lg-photo::after{
    background:linear-gradient(to bottom, rgba(6,16,38,.32) 0%, rgba(6,14,34,.62) 46%,
                            rgba(5,10,22,.95) 86%) !important;
  }
  .lg-pitch h1{ font-size:clamp(36px,10.5vw,54px) !important; }
  .lg-sub{ font-size:16px !important; }
  .lg-card{ padding:22px !important; }
}

/* ── 3. FANTASY PROOF — closer to the approved reference ─────────────── */

.fp-hero{
  border-radius:30px !important;
  box-shadow:
    0 0 0 1px rgba(var(--lp-acc2-rgb),.46),
    0 0 80px -14px rgba(var(--lp-acc-rgb),.38),
    0 36px 100px -42px rgba(0,0,0,.95) !important;
}
/* Cooler, bluer scrim over the trophy photograph — less warm wash. */
.fp-photo img{ opacity:.78 !important; filter:saturate(1.04) contrast(1.05) brightness(1.02) hue-rotate(-6deg) !important; }
.fp-photo::after{
  background:
    linear-gradient(90deg, rgba(5,11,26,.98) 0%, rgba(6,15,36,.80) 26%,
                           rgba(8,20,48,.26) 62%, rgba(7,16,38,.52) 100%),
    linear-gradient(to bottom, rgba(6,14,32,.58) 0%, transparent 30%,
                           transparent 60%, rgba(5,10,22,.96) 100%) !important;
}

/* The medallion is the hero of this page — make it bigger and gold-ringed. */
.fp-medal{ width:clamp(132px,17vw,206px) !important; }
.fp-medal img{
  box-shadow:
    0 0 0 3px rgba(var(--lb-pg-rgb),.55),
    0 0 0 9px rgba(5,11,26,.72),
    0 22px 60px -10px rgba(var(--lb-pg-rgb),.45) !important;
}
.fp-medal::before{
  background:conic-gradient(from 0deg, transparent, rgba(var(--lb-pg-rgb),.55), transparent 55%) !important;
}
.fp-hero h1{ font-size:clamp(34px,5.8vw,62px) !important; line-height:.92 !important; }
.fp-hero h1 i{ background-image:var(--lp-foil) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important; }
.fp-name{ font-size:clamp(27px,3.8vw,46px) !important; }

/* Stat tiles: gold numerals for reward/XP, blue chrome around them. */
.fp-stat{ padding:13px 18px !important; border-radius:16px !important;
  background:rgba(6,14,32,.62) !important; border-color:rgba(var(--lp-acc2-rgb),.30) !important; }
.fp-stat .ic{ background:rgba(var(--lb-pg-rgb),.14) !important; color:var(--lb-pg-hi) !important; }
.fp-stat b{ font-size:21px !important; color:var(--lb-pg-hi) !important; }

/* Cards: cool navy surfaces instead of warm ones. */
.fp-card{
  background:linear-gradient(168deg, rgba(14,27,55,.72), rgba(8,16,35,.80)) !important;
  border:1px solid rgba(var(--lp-acc2-rgb),.24) !important;
  border-radius:20px !important;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9);
}
.fp-card h3 .ic{ background:rgba(var(--lp-acc-rgb),.18) !important; color:var(--lp-gold-hi) !important; }
/* Reward figures stay gold — they are the treasure. */
.fp-card h3 .ic.gold,
.fp-card .fp-big.gold{ color:var(--lb-pg-hi) !important; }
.fp-spark i{ background:var(--lb-pg-foil) !important; }
.fp-bar i{ background:var(--lp-foil) !important; }

/* Prestige tiers: bigger emblems, gold ring on the tier you hold. */
.fp-tier img{ width:clamp(52px,7vw,76px) !important; height:clamp(52px,7vw,76px) !important; }
.fp-tier.on{
  border-color:rgba(var(--lb-pg-rgb),.70) !important;
  background:rgba(var(--lb-pg-rgb),.10) !important;
  box-shadow:0 0 34px -8px rgba(var(--lb-pg-rgb),.60) !important;
}
.fp-tier b{ font-size:15px !important; }
.fp-tier small{ color:var(--lb-pg-hi) !important; opacity:.85; }

/* Badges: larger art, gold frame when earned. */
.fp-badge img{ width:clamp(48px,6.6vw,70px) !important; height:clamp(48px,6.6vw,70px) !important; }
.fp-badge.earned{
  border-color:rgba(var(--lb-pg-rgb),.58) !important;
  background:rgba(var(--lb-pg-rgb),.09) !important;
  box-shadow:0 0 26px -10px rgba(var(--lb-pg-rgb),.5);
}
.fp-badge.earned small{ color:var(--lb-pg-hi) !important; }

/* The share card: the premium object on this page. */
.fp-proof{
  border-radius:22px !important;
  border:1px solid rgba(var(--lb-pg-rgb),.42) !important;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--lb-pg-rgb),.16), transparent 62%),
    linear-gradient(168deg, rgba(12,24,50,.92), rgba(6,12,28,.96)) !important;
  box-shadow:0 0 0 1px rgba(var(--lp-acc2-rgb),.16) inset, 0 26px 70px -34px rgba(0,0,0,.95) !important;
}
.fp-proof-nums b{ color:var(--lb-pg-hi) !important; font-size:18px !important; }
.fp-fmt button.on{ background:var(--lb-pg-foil) !important; color:var(--lb-pg-ink) !important; }

@media (max-width:980px){
  .fp-hero{ border-radius:24px !important; }
  .fp-photo{ height:52% !important; }
  .fp-photo img{ opacity:.62 !important; }
}

/* ── 4. HOME daily banner — keep it blue-led ─────────────────────────── */
.lb-daily{ border-radius:22px !important; border-color:rgba(var(--lp-acc2-rgb),.30) !important;
  box-shadow:0 0 50px -18px rgba(var(--lp-acc-rgb),.42), 0 24px 60px -34px rgba(0,0,0,.9) !important; }
.lb-daily-photo::after{
  background:linear-gradient(90deg, rgba(5,11,26,.95) 0%, rgba(6,15,36,.80) 38%,
                           rgba(8,20,48,.20) 72%, rgba(7,16,38,.40) 100%) !important;
}
.lb-daily-eyebrow{ color:var(--lb-pg-hi) !important; }

@media (prefers-reduced-motion:reduce){
  .fp-medal::before{ animation:none !important; }
}