/* ══════════════════════════════════════════════════════════════════════
   lb11-proof.css — Fantasy Proof (Career) + Premium Login.
   Built on the existing --lp-* design tokens so every skin and both
   themes keep working. No hardcoded brand colours.
   The "stadium" atmosphere is drawn in CSS: the codebase ships no
   stadium photograph, and none was invented. See MISSING_ASSETS.md.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared: the floodlit arena backdrop ───────────────────────────── */
.fp-arena{
  position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(120% 75% at 50% -14%, rgba(var(--lp-acc-rgb),.30), transparent 62%),
    radial-gradient(90%  60% at 12% 108%, rgba(var(--lp-acc2-rgb),.22), transparent 66%),
    linear-gradient(168deg, var(--lp-night) 0%, color-mix(in srgb,var(--lp-night) 86%, #000) 58%, var(--lp-night) 100%);
  color:var(--lp-on-night);
}
/* floodlight beams */
.fp-arena::before{
  content:""; position:absolute; inset:-25% -10% auto -10%; height:92%; z-index:-2; pointer-events:none;
  background:
    conic-gradient(from 198deg at 18% 0%, transparent 0 8deg, rgba(255,255,255,.085) 8deg 15deg, transparent 15deg 360deg),
    conic-gradient(from 150deg at 82% 0%, transparent 0 8deg, rgba(255,255,255,.07)  8deg 16deg, transparent 16deg 360deg);
  filter:blur(1.5px);
}
/* crowd haze + pitch glow */
.fp-arena::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(var(--lp-acc-rgb),.18), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 2px, transparent 2px 7px);
  -webkit-mask-image:linear-gradient(transparent, #000 55%);
          mask-image:linear-gradient(transparent, #000 55%);
}
.fp-wrap{position:relative; z-index:1; width:min(1320px,100%); margin:0 auto; padding:0 clamp(14px,3vw,30px)}
/* Below 900px .lp-nav is a fixed bottom tab bar — keep the last card clear of it. */
@media (max-width:900px){
  .fp-arena{ padding-bottom:calc(var(--lp-tab-h,64px) + 20px + env(safe-area-inset-bottom)); }
}

/* ── Supplied trophy photograph ────────────────────────────────────────
   assets/arena/trophy-*.webp|jpg — the client's own image, resized only.
   Anchored to the right of the Fantasy Proof hero, mirroring the reference,
   and scrimmed so the medallion and the statistics stay the focal point. */
.fp-hero{position:relative; isolation:isolate; overflow:clip; border-radius:26px;
  box-shadow:0 0 0 1px rgba(var(--lp-acc2-rgb),.34), 0 0 50px -8px rgba(var(--lp-acc2-rgb),.26)}
.fp-photo{position:absolute; inset:-8% 0 -6% 28%; z-index:-1; overflow:hidden;
  pointer-events:none; border-radius:26px;
  background:var(--lp-night) url('../arena/trophy-blur.jpg') center/cover no-repeat}
.fp-photo.off{display:none}
.fp-photo img{width:100%; height:100%; object-fit:cover; object-position:62% 42%;
  opacity:.72; filter:saturate(1.1) contrast(1.05) brightness(1.03)}
.fp-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--lp-night) 0%,
                           color-mix(in srgb,var(--lp-night) 72%,transparent) 28%,
                           color-mix(in srgb,var(--lp-night) 20%,transparent) 64%,
                           color-mix(in srgb,var(--lp-night) 46%,transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb,var(--lp-night) 62%,transparent) 0%,
                           transparent 30%, transparent 58%, var(--lp-night) 100%);
}
@media (max-width:980px){
  .fp-photo{inset:-6% 0 auto; height:46%; border-radius:0 0 24px 24px}
  .fp-photo img{object-position:50% 45%; opacity:.6}
  .fp-photo::after{
    background:linear-gradient(to bottom, color-mix(in srgb,var(--lp-night) 55%,transparent) 0%,
                           color-mix(in srgb,var(--lp-night) 80%,transparent) 48%, var(--lp-night) 94%);
  }
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.fp-hero{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(18px,3vw,44px); align-items:center; padding:clamp(22px,3.4vw,40px) 0 clamp(20px,2.6vw,30px)}
.fp-hero-l{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.4vw,30px); align-items:center; min-width:0}
.fp-hero h1{margin:0 0 6px; font:800 clamp(32px,5.4vw,56px)/.93 var(--lp-head); text-transform:uppercase; letter-spacing:.012em}
.fp-hero h1 i{display:block; font-style:normal; background:var(--lp-foil); -webkit-background-clip:text; background-clip:text; color:transparent}
.fp-hero .tag{margin:0 0 16px; font:600 13.5px/1.6 var(--lp-font); color:var(--lp-on-night-3); max-width:48ch}

/* rank medallion — assets/ranks/career-NN.png, the real emblem */
.fp-medal{position:relative; width:clamp(118px,15vw,186px); aspect-ratio:1; flex:0 0 auto}
/* Circular crop: the rank PNGs carry a dark square field, which reads as a
   box against the arena. Cropping to the circle matches the reference. */
.fp-medal img{width:100%; height:100%; object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 2px rgba(var(--lp-acc-rgb),.45), 0 18px 48px -8px rgba(var(--lp-acc-rgb),.5)}
.fp-medal::before{content:""; position:absolute; inset:-9%; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(var(--lp-acc-rgb),.42), transparent 55%);
  animation:fpSpin 9s linear infinite}
@keyframes fpSpin{to{transform:rotate(1turn)}}

.fp-name{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:800 clamp(24px,3.4vw,40px)/1.1 var(--lp-head)}
.fp-rankline{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px; color:var(--lp-on-night-3); font:700 14px var(--lp-font)}
.fp-pill{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px;
  background:var(--lp-foil); color:var(--lp-gold-ink); font:800 13px var(--lp-font)}
.fp-stats{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.fp-stat{display:flex; align-items:center; gap:11px; padding:11px 16px; border-radius:14px;
  background:rgba(0,0,0,.34); border:1px solid rgba(var(--lp-acc2-rgb),.2); min-width:0}
.fp-stat .ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 34px;
  background:rgba(var(--lp-acc-rgb),.16); color:var(--lp-gold-hi)}
.fp-stat .ic svg{width:17px; height:17px}
.fp-stat small{display:block; font:700 10px var(--lp-font); letter-spacing:.14em; text-transform:uppercase; color:var(--lp-on-night-3)}
.fp-stat b{display:block; font:800 19px var(--lp-head); color:var(--lp-on-night)}
.fp-hero-r{display:grid; gap:9px; justify-items:end; align-content:center}
@media (max-width:980px){
  .fp-hero{grid-template-columns:1fr}
  .fp-hero-r{justify-items:stretch}
  .fp-hero-l{grid-template-columns:1fr; justify-items:center; text-align:center}
  .fp-name,.fp-rankline,.fp-stats{justify-content:center}
  .fp-hero .tag{margin-inline:auto}
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.fp-grid{display:grid; gap:14px; padding-bottom:18px}
.fp-row4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fp-row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1100px){.fp-row4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.fp-row2{grid-template-columns:1fr}}
@media (max-width:560px){.fp-row4{grid-template-columns:1fr}}

.fp-card{background:rgba(0,0,0,.36); border:1px solid rgba(var(--lp-acc2-rgb),.18); border-radius:18px;
  padding:17px 18px; min-width:0; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
.fp-card h3{display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font:800 11.5px var(--lp-font); letter-spacing:.15em; text-transform:uppercase; color:var(--lp-on-night-3)}
.fp-card h3 .ic{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex:0 0 28px;
  background:rgba(var(--lp-acc-rgb),.16); color:var(--lp-gold-hi)}
.fp-card h3 .ic svg{width:15px; height:15px}
.fp-card h3 a{margin-left:auto; color:var(--lp-gold-text); text-decoration:none; letter-spacing:.08em}
.fp-big{font:800 clamp(34px,5vw,46px)/1 var(--lp-head); color:var(--lp-on-night)}
.fp-sub{font:600 12.5px/1.5 var(--lp-font); color:var(--lp-on-night-3); margin-top:5px}

/* latest perfect line — reuses the existing .lp-lane race lanes */
.fp-legs{display:grid; gap:7px; margin-top:12px}
.fp-leg{display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:9px; align-items:center;
  font:700 12.5px var(--lp-font)}
.fp-leg .n{width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:rgba(var(--lp-acc-rgb),.18); color:var(--lp-gold-hi); font:800 10.5px var(--lp-font)}
.fp-leg .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--lp-on-night)}
.fp-leg .bar{grid-column:2/4; height:7px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.fp-leg .bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#0b7a41,var(--lp-green-hi))}
.fp-leg.miss .bar i{background:linear-gradient(90deg,rgba(200,54,43,.5),var(--lp-red))}
.fp-leg .sd{font:800 11px var(--lp-font); color:var(--lp-gold-hi); white-space:nowrap}
.fp-leg .tick{color:var(--lp-green-hi); font-weight:900}
.fp-leg.miss .tick{color:var(--lp-red)}

/* streak dots */
.fp-dots{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.fp-dots i{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--lp-on-night-3); font:900 13px var(--lp-font)}
.fp-dots i.on{background:rgba(34,197,110,.2); border-color:var(--lp-green-hi); color:var(--lp-green-hi)}

/* XP progress */
.fp-bar{height:9px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; margin-top:11px}
.fp-bar i{display:block; height:100%; border-radius:99px; background:var(--lp-foil); transition:width .9s var(--lp-ease,ease)}
.fp-barrow{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-top:7px;
  font:700 11.5px var(--lp-font); color:var(--lp-on-night-3)}

/* lifetime points column chart (real weekly data) */
.fp-spark{display:flex; align-items:flex-end; gap:3px; height:72px; margin-top:12px}
.fp-spark i{flex:1; min-width:3px; border-radius:3px 3px 0 0; background:var(--lp-foil); opacity:.55; transition:opacity .2s}
.fp-spark i:last-child{opacity:1}
.fp-spark:hover i{opacity:.85}

/* recent results */
.fp-res{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px}
@media (max-width:560px){
  .fp-res{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(118px,1fr);
          overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; scroll-snap-type:x proximity}
  .fp-res-i{scroll-snap-align:start}
}
.fp-res-i{background:rgba(255,255,255,.045); border:1px solid rgba(var(--lp-acc2-rgb),.16); border-radius:14px; padding:12px; text-align:center}
.fp-res-i b{display:block; font:800 20px var(--lp-head); color:var(--lp-on-night)}
.fp-res-i .lab{font:700 11px var(--lp-font); color:var(--lp-on-night-3); margin:2px 0 8px}
.fp-res-i .pips{display:flex; justify-content:center; gap:4px; margin-bottom:8px}
.fp-res-i .pips s{width:17px; height:17px; border-radius:50%; text-decoration:none; display:grid; place-items:center;
  font:900 10px var(--lp-font); background:rgba(255,255,255,.1); color:var(--lp-on-night-3)}
.fp-res-i .pips s.hit{background:rgba(34,197,110,.22); color:var(--lp-green-hi)}
.fp-res-i .pips s.miss{background:rgba(224,65,58,.2); color:#FF8A7E}
.fp-res-i .pts{font:800 12.5px var(--lp-font); color:var(--lp-gold-hi)}
.fp-res-i .dt{font:600 10.5px var(--lp-font); color:var(--lp-on-night-3); margin-top:3px}

/* prestige tiers */
.fp-tiers{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:4px}
.fp-tier{text-align:center; padding:12px 6px; border-radius:14px; border:1px solid transparent; min-width:0}
.fp-tier img{width:clamp(44px,6vw,66px); height:clamp(44px,6vw,66px); object-fit:contain}
.fp-tier.locked img{filter:saturate(.85) brightness(.6)}
.fp-tier.locked b,.fp-tier.locked small{opacity:.8}
.fp-tier.on{border-color:rgba(var(--lp-acc-rgb),.55); background:rgba(var(--lp-acc-rgb),.1);
  box-shadow:0 0 28px -6px rgba(var(--lp-acc-rgb),.5)}
.fp-tier b{display:block; font:800 14px var(--lp-head); margin-top:5px; color:var(--lp-on-night)}
.fp-tier small{display:block; font:700 10.5px var(--lp-font); color:var(--lp-on-night-3)}
@media (max-width:620px){.fp-tiers{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* badges */
.fp-badges{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
@media (max-width:1100px){.fp-badges{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.fp-badges{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fp-badge{text-align:center; padding:12px 7px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(var(--lp-acc2-rgb),.14); min-width:0}
.fp-badge.earned{border-color:rgba(var(--lp-acc-rgb),.5); background:rgba(var(--lp-acc-rgb),.1)}
.fp-badge img{width:clamp(42px,6vw,62px); height:clamp(42px,6vw,62px); object-fit:contain}
.fp-badge.locked img{filter:saturate(.55) brightness(.75); opacity:.82}
.fp-badge b{display:block; font:800 11.5px/1.3 var(--lp-font); color:var(--lp-on-night); margin-top:6px;
  overflow:hidden; text-overflow:ellipsis}
.fp-badge small{display:block; font:700 10px var(--lp-font); color:var(--lp-on-night-3); margin-top:2px}

/* share card */
.fp-share{display:grid; gap:12px}
.fp-proof{border-radius:18px; padding:18px; border:1px solid rgba(var(--lp-acc-rgb),.3);
  background:radial-gradient(120% 90% at 50% 0%, rgba(var(--lp-acc-rgb),.2), transparent 66%), rgba(0,0,0,.5)}
.fp-proof-top{display:flex; align-items:center; gap:12px}
.fp-proof-top .fp-medal{width:62px}
.fp-proof-top .fp-medal::before{animation:none}
.fp-proof-nums{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; text-align:center}
.fp-proof-nums div{min-width:0}
.fp-proof-nums b{display:block; font:800 16px var(--lp-head); color:var(--lp-on-night)}
.fp-proof-nums small{display:block; font:700 9.5px var(--lp-font); letter-spacing:.06em; text-transform:uppercase; color:var(--lp-on-night-3)}
.fp-proof-foot{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px;
  font:600 11px var(--lp-font); color:var(--lp-on-night-3)}
.fp-privacy{display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(var(--lp-acc2-rgb),.16);
  font:600 12.5px var(--lp-font); color:var(--lp-on-night-2,var(--lp-on-night-3)); cursor:pointer}
.fp-privacy input{width:17px; height:17px; flex:0 0 17px; accent-color:var(--lp-gold)}

/* export panel */
.fp-export{display:grid; gap:11px; margin-top:4px}
.fp-fmt{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
.fp-fmt button{padding:9px 8px; border-radius:12px; cursor:pointer; min-width:0; text-align:center;
  border:1px solid rgba(var(--lp-acc2-rgb),.26); background:rgba(255,255,255,.04); color:var(--lp-on-night-3);
  font:800 12px var(--lp-font); transition:.15s}
.fp-fmt button small{display:block; font:600 10px var(--lp-font); opacity:.75; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fp-fmt button:hover{border-color:var(--lp-gold); color:var(--lp-on-night)}
.fp-fmt button.on{background:var(--lp-foil); color:var(--lp-gold-ink); border-color:transparent}
.fp-fmt button.on small{opacity:.85}
.fp-exbtns{display:flex; gap:8px; flex-wrap:wrap}
.fp-exbtns .lp-btn{flex:1 1 auto; min-width:0}
.fp-exbtns .lp-btn[disabled]{opacity:.6; cursor:default}
.fp-exnote{margin:0; font:600 11.5px/1.5 var(--lp-font); color:var(--lp-on-night-3)}
.fp-exnote.bad{color:#FF8A7E}
@media (max-width:420px){ .fp-fmt button small{display:none} }

.fp-empty{padding:26px 18px; text-align:center; border:1px dashed rgba(var(--lp-acc2-rgb),.3); border-radius:14px;
  color:var(--lp-on-night-3); font:600 13px/1.6 var(--lp-font)}
.fp-empty b{display:block; font:800 15px var(--lp-head); color:var(--lp-on-night); margin-bottom:4px; text-transform:uppercase}
.fp-note{font:600 11.5px/1.55 var(--lp-font); color:var(--lp-on-night-3); margin-top:8px}

@media (prefers-reduced-motion:reduce){
  .fp-medal::before{animation:none}
  .fp-bar i{transition:none}
}

/* R5 · the two-up rows stretched every card to the tallest in the row, so
   the Badges card grew a few hundred px of dead space beside the taller
   share panel. Cards now size to their own content, as in the approved
   reference. Single-column widths are unaffected. */
@media (min-width:861px){
  .fp-row2{ align-items:start }
}