/* ============================================================
   /wins - Fortnite win tracker. Built by scripts/pages.mjs from
   content/wins.mjs. Battle-royale UI feel: victory banner with light
   rays, rarity loot cards for the squad, HUD stat chips, match log.
   Game-style look only: no game logos or art.
   ============================================================ */
.pg--wins{
  --twitch:#9146ff;
  --sky-1:#0a1640; --sky-2:#1a2a8c; --sky-3:#3d1d8f;
  --gold-1:#fff3a8; --gold-2:#ffc93c; --gold-3:#f08a1c;
  --drop:#ffe14d;
  --legendary-1:#f7b24a; --legendary-2:#b8561a;
  --epic-1:#c477ff; --epic-2:#5d24b0;
  --rare-1:#4fc3ff; --rare-2:#1a56c4;
  --uncommon-1:#7fe052; --uncommon-2:#2d8a1f;
  overflow-x:clip;
}
.pgmain--wins{padding-top:0}

/* ---- Victory banner ---- */
.vr{position:relative;margin:0 calc(50% - 50vw);padding:44px 16px 54px;text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 38%,var(--sky-2) 0%,var(--sky-1) 55%,#05081c 100%)}
.vr::after{content:"";position:absolute;inset:auto 0 0;height:46px;z-index:-1;
  background:linear-gradient(transparent,var(--bg))}
.vr__rays{position:absolute;left:50%;top:44%;width:1400px;height:1400px;margin:-700px 0 0 -700px;z-index:-1;opacity:.55;
  background:repeating-conic-gradient(from 0deg,rgba(120,200,255,.28) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 18%,transparent 52%);mask:radial-gradient(circle,#000 0,#000 18%,transparent 52%);
  animation:vrSpin 60s linear infinite}
@keyframes vrSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vr__rays{animation:none}}
.vr__in{position:relative;max-width:880px;margin:0 auto}
.vr__kick{display:inline-block;font-family:var(--font-cond);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:#cfe6ff;background:rgba(5,10,40,.55);border:1px solid rgba(160,210,255,.28);padding:6px 14px;transform:skewX(-10deg)}
.vr__num{font-family:var(--font-display);font-size:clamp(120px,36vw,230px);line-height:.82;margin:18px 0 4px;transform:skewX(-8deg);
  background:linear-gradient(180deg,#fff 0%,var(--gold-1) 30%,var(--gold-2) 62%,var(--gold-3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 #7a3a07) drop-shadow(0 14px 28px rgba(0,0,0,.55))}
.vr__title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.9;margin:0;transform:skewX(-8deg);
  font-size:clamp(46px,14vw,96px);color:#fff;text-shadow:0 4px 0 #1b1f6b,0 10px 24px rgba(0,0,0,.5)}
.vr__title span:last-child{color:var(--drop)}
.vr__count{margin-top:16px;font-family:var(--font-cond);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#cfe6ff}
.vr__count b{font-family:var(--font-display);font-weight:400;font-size:34px;letter-spacing:0;color:#fff;margin-right:6px;vertical-align:-4px}

/* ---- HUD stat chips ---- */
.hud{list-style:none;padding:0;margin:-18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative}
.hud li{background:linear-gradient(180deg,#141a3d,#0c0f24);border:1px solid rgba(140,180,255,.22);border-bottom:3px solid var(--drop);
  padding:10px 8px 9px;text-align:center;transform:skewX(-8deg)}
.hud span{display:block;font-family:var(--font-cond);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9fb3e0;transform:skewX(8deg)}
.hud b{display:block;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.05;color:#fff;transform:skewX(8deg)}

.fh2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,7vw,40px);line-height:1;margin:44px 0 16px;
  transform:skewX(-8deg);transform-origin:left;display:flex;align-items:center;gap:12px}
.fh2::after{content:"";flex:1;height:3px;background:linear-gradient(90deg,var(--drop),transparent)}

/* ---- Squad loot cards ---- */
.lootgrid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:700px){.lootgrid{grid-template-columns:repeat(4,1fr)}}
.loot{--c1:var(--rare-1);--c2:var(--rare-2);position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;
  background:radial-gradient(90% 70% at 50% 30%,var(--c1) 0%,var(--c2) 70%,#0b0b18 120%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 0 0 2px var(--c2)}
.loot--legendary{--c1:var(--legendary-1);--c2:var(--legendary-2)}
.loot--epic{--c1:var(--epic-1);--c2:var(--epic-2)}
.loot--uncommon{--c1:var(--uncommon-1);--c2:var(--uncommon-2)}
.loot::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}
.loot__rarity{position:absolute;top:8px;left:8px;font-family:var(--font-cond);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.35);padding:3px 8px;transform:skewX(-10deg)}
.loot__mono{position:absolute;inset:0 0 34% 0;display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(84px,24vw,120px);
  color:rgba(255,255,255,.9);text-shadow:0 6px 0 rgba(0,0,0,.25);transform:skewX(-8deg)}
.loot__plate{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;
  background:linear-gradient(180deg,transparent,rgba(5,5,15,.85) 40%)}
.loot__name{display:block;font-family:var(--font-display);font-size:24px;line-height:1;text-transform:uppercase;color:#fff;transform:skewX(-8deg);transform-origin:left}
.loot__stat{display:block;margin-top:4px;font-family:var(--font-cond);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.loot__stat b{font-family:var(--font-display);font-weight:400;font-size:18px;color:var(--gold-2);letter-spacing:0}

/* ---- Match history ---- */
.matches{list-style:none;padding:0;display:grid;gap:12px}
.match{position:relative;padding:14px 16px 16px 18px;background:linear-gradient(180deg,#12142a,#0b0c18);border:1px solid rgba(140,160,255,.16);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.match::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--muted-2)}
.match--won::before{background:linear-gradient(180deg,var(--gold-1),var(--gold-3))}
.match__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.match__tag{font-family:var(--font-cond);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#0a0a12;background:var(--drop);padding:4px 10px;transform:skewX(-10deg)}
.match__date{font-family:var(--font-cond);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#9fb3e0}
.match__res{display:flex;align-items:center;gap:12px;margin:14px 0 12px}
.match__badges{display:flex;gap:6px}
.vbadge{display:grid;place-items:center;width:46px;height:52px;font-family:var(--font-display);font-size:18px;color:#3a1a00;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-3));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.match__word{font-family:var(--font-display);font-size:30px;line-height:1;text-transform:uppercase;color:#fff;transform:skewX(-8deg)}
.match__word--loss{color:var(--muted)}
.match__squad{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.match__squad li{font-family:var(--font-cond);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#dbe4ff;
  background:rgba(120,150,255,.12);border:1px solid rgba(120,150,255,.25);padding:4px 10px;border-radius:3px}
.match__note{margin-top:10px;font-size:14px;color:var(--muted)}

/* ---- Drop in CTA ---- */
.dropin{margin:40px 0 0;text-align:center}
.dropin__btn{display:inline-block;background:var(--drop);color:#0a0a12;padding:16px 34px;transform:skewX(-10deg);
  box-shadow:0 6px 0 #b39500,0 14px 30px rgba(255,225,77,.25);transition:transform .15s ease,box-shadow .15s ease}
.dropin__btn span{display:block;transform:skewX(10deg);font-family:var(--font-display);font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.dropin__btn:hover{transform:skewX(-10deg) translateY(-2px);box-shadow:0 8px 0 #b39500,0 18px 36px rgba(255,225,77,.35)}
.dropin__btn:active{transform:skewX(-10deg) translateY(4px);box-shadow:0 2px 0 #b39500}
.dropin p{margin-top:16px;font-family:var(--font-cond);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---- Clips from @clipthelights ---- */
.clips{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.clip{display:flex;align-items:center;gap:12px;padding:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px}
.clip:hover{background:rgba(255,255,255,.08)}
.clip__thumb{position:relative;flex:none;width:54px;height:72px;overflow:hidden;border-radius:3px;background:#000}
/* hqdefault is 4:3 with the vertical short pillarboxed in the middle: zoom past the bars */
.clip__thumb img{position:absolute;left:50%;top:50%;width:auto;height:134%;max-width:none;transform:translate(-50%,-50%)}
.clip__play{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(255,0,51,.92)}
.clip__play::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.clip__t{min-width:0;font-family:var(--font-cond);font-size:15px;line-height:1.25;color:#fff}
.clip__t small{display:block;margin-top:3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ff5c7a}
.dropin__clips{display:inline-block;margin-top:10px;font-family:var(--font-cond);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border-bottom:1px solid #ff0033}