/* ===================================================================
   PARTY BOX — Rewards / Member Vault
   A Disney-magic loyalty dashboard layered on the castle-brick system.
   Aesthetic: an enchanted royal treasury — a glass membership card lit
   by liquid GOLD, frosted with PLATINUM sparkle. Twinkling pixie dust,
   holographic foil sweeps, and a tier meter that climbs toward platinum.
   Loads AFTER castle.css; reuses --gold / --parchment / fonts from it.
   =================================================================== */

:root{
  --plat-100:#ffffff; --plat-200:#eef2f7; --plat-300:#cfd8e6;
  --plat-400:#aab6cc; --plat-500:#8d9bb5;
  --plat-foil:linear-gradient(120deg,#e9eef6 0%,#ffffff 22%,#c3cede 44%,#ffffff 60%,#dfe7f2 80%,#aab6cc 100%);
  --gold-foil:linear-gradient(120deg,#c79a45 0%,#ffe9bf 24%,#fff7e8 42%,#ffd98f 60%,#e7c073 80%,#c79a45 100%);
}

/* page sits on the castle brick; add an aurora wash of gold + platinum */
body.rw{min-height:100vh}
body.rw::before{
  background:
    radial-gradient(140% 80% at 18% -8%, rgba(231,192,115,.22), transparent 52%),
    radial-gradient(120% 70% at 92% 4%, rgba(180,200,230,.16), transparent 55%),
    linear-gradient(180deg, rgba(12,8,5,.84), rgba(10,9,12,.95));
}

/* ---- nav fix (rewards-only) ----
   The shared castle nav is transparent until you scroll, because on most pages
   it floats over a dark hero. This page has NO hero — content starts right
   under the bar — so the see-through nav let page content show THROUGH it and
   it looked like the bar fell "behind everything". Give it a solid, frosted bar
   here and lift it above the content. (#nav beats the base `nav`/`nav.scrolled`
   rules by specificity, so it stays solid at the top too. Hero pages are
   untouched — they don't load this stylesheet's override on themselves.) */
#nav{
  background:rgba(18,12,8,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(231,192,115,.28);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  z-index:50;
}
/* The announcement bar above the nav also rides above content while it's in
   view, so the two read as one solid header band. */
.topbar{z-index:51}

/* ---- twinkling starfield (fixed, behind content) ---- */
.skyfield{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.skyfield i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,247,232,.2) 60%,transparent);
  box-shadow:0 0 6px 1px rgba(255,240,210,.7);opacity:.0;
  animation:tw var(--d,4s) ease-in-out var(--t,0s) infinite}
@keyframes tw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1.15)}}

/* ---- shell ---- */
.rw-wrap{max-width:1120px;margin:0 auto;padding:128px 26px 90px}
.rw-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:30px}
.rw-kicker{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:8px}
.rw-kicker::before{content:"✦";color:#fff;text-shadow:0 0 10px var(--gold)}
.rw-title{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.4vw,58px);line-height:1.02;margin-top:8px}
.rw-title .foil{background:var(--gold-foil);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:foilsweep 6s linear infinite}
@keyframes foilsweep{0%{background-position:180% 0}100%{background-position:-80% 0}}
.rw-sub{color:rgba(255,248,239,.72);font-size:15px;max-width:50ch;margin-top:10px;line-height:1.55}

/* email lookup pill */
.rw-find{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(231,192,115,.28);border-radius:999px;padding:6px 6px 6px 16px}
.rw-find input{background:transparent;border:0;color:var(--cream);font:inherit;font-size:14px;width:200px;outline:none}
.rw-find input::placeholder{color:rgba(255,248,239,.5)}
.rw-find button{border:0;cursor:pointer;border-radius:999px;padding:9px 16px;font-weight:800;font-size:13px;color:#4a330f;
  background:linear-gradient(100deg,#ffe9bf,var(--gold) 60%,var(--gold-deep));transition:.2s}
.rw-find button:hover{transform:translateY(-1px);filter:brightness(1.05)}

/* =====================================================================
   THE MEMBERSHIP CARD — the one thing you remember
   ===================================================================== */
.rw-deck{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:stretch;margin-bottom:14px}
@media(max-width:860px){.rw-deck{grid-template-columns:1fr}}

.memcard{position:relative;border-radius:24px;padding:30px 30px 26px;overflow:hidden;isolation:isolate;
  color:#3a2a0f;min-height:248px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.4)}
/* gold tier skin */
.memcard.gold{background:
  radial-gradient(120% 140% at 0% 0%, #fff6df 0%, #ffe6ad 30%, #e7c073 58%, #c79a45 100%)}
.memcard.bronze{background:
  radial-gradient(120% 140% at 0% 0%, #ffe9cf 0%, #f0c48c 32%, #c8854a 64%, #9c5f2e 100%);color:#3a230f}
.memcard.silver{background:
  radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #e7edf5 34%, #c6d0df 62%, #9aa7bd 100%);color:#26303f}
.memcard.platinum{background:
  radial-gradient(120% 140% at 0% 0%, #ffffff 0%, #eaf0f8 28%, #cdd7e7 56%, #aeb9cd 100%);color:#2a3340}
/* holographic foil sweep across the card */
.memcard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.85) 46%,rgba(255,255,255,0) 64%);
  background-size:280% 100%;animation:cardsheen 5.5s ease-in-out infinite}
@keyframes cardsheen{0%{background-position:160% 0}55%,100%{background-position:-160% 0}}
/* engraved guilloché pattern */
.memcard::after{content:"";position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;
  background-image:repeating-radial-gradient(circle at 82% 18%,rgba(255,255,255,.6) 0 1px,transparent 1px 9px);}
.memcard>*{position:relative;z-index:2}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between}
.mc-crest{font-family:var(--serif);font-size:21px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px;letter-spacing:.3px;line-height:.85}
.mc-crest .arch{width:46px;margin-bottom:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.mc-tier{font-family:var(--sans);font-size:10.5px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);color:#5a3f12;display:inline-flex;gap:7px;align-items:center}
.mc-tier.platinum,.mc-tier.silver{color:#33404f}
.mc-name{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1;margin-bottom:2px}
.mc-code{font-family:ui-monospace,"Courier New",monospace;font-size:14px;letter-spacing:.32em;font-weight:700;opacity:.82}
.mc-balance{display:flex;align-items:baseline;gap:10px}
.mc-balance .amt{font-family:var(--serif);font-size:42px;font-weight:700;line-height:1}
.mc-balance .lbl{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.mc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700}
.mc-chip{background:rgba(255,255,255,.5);border-radius:999px;padding:5px 11px;border:1px solid rgba(255,255,255,.6)}

/* tier meter — climbs toward platinum */
.tiermeter{background:linear-gradient(180deg,rgba(36,25,17,.9),rgba(20,14,9,.94));
  border:1px solid rgba(231,192,115,.28);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.tiermeter h3{font-family:var(--serif);font-size:21px;font-weight:700;color:#fff6e8}
.tiermeter .now{color:rgba(255,248,239,.72);font-size:13px;line-height:1.5}
.tiermeter .now b{color:var(--gold)}
.track{position:relative;height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;
  border:1px solid rgba(255,255,255,.12)}
.track .fill{position:absolute;inset:0 auto 0 0;border-radius:999px;
  background:var(--gold-foil);background-size:220% 100%;animation:foilsweep 5s linear infinite;
  box-shadow:0 0 16px rgba(231,192,115,.6)}
.ladder{display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ladder span{color:rgba(255,248,239,.45);display:flex;align-items:center;gap:5px}
.ladder span.on{color:var(--gold)}
.ladder span.plat{color:var(--plat-300)}
.ladder span.plat.on{color:#fff}

/* =====================================================================
   STAT TILES
   ===================================================================== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:26px 0 8px}
@media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(243,230,207,.07),rgba(243,230,207,.03));
  border:1px solid rgba(231,192,115,.2);border-radius:18px;padding:18px 18px 16px}
.tile .ic{font-size:18px;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:12px;
  background:rgba(231,192,115,.16);border:1px solid rgba(231,192,115,.3)}
.tile.plat .ic{background:rgba(180,200,230,.16);border-color:rgba(180,200,230,.34)}
.tile .v{font-family:var(--serif);font-size:30px;font-weight:700;color:#fff7ea;line-height:1}
.tile .k{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,248,239,.6);margin-top:8px}
.tile .hint{font-size:12px;color:rgba(255,248,239,.55);margin-top:6px}
.tile .v.gold{background:var(--gold-foil);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foilsweep 6s linear infinite}
.tile .v.plat{background:var(--plat-foil);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foilsweep 7s linear infinite}

/* =====================================================================
   TABS + PANELS
   ===================================================================== */
.tabs{display:flex;gap:6px;margin:30px 0 18px;border-bottom:1px solid rgba(231,192,115,.2);flex-wrap:wrap}
.tab{appearance:none;background:none;border:0;cursor:pointer;font-family:var(--sans);font-weight:800;font-size:14.5px;
  color:rgba(255,248,239,.6);padding:12px 18px;position:relative;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.tab:hover{color:#fff6e8}
.tab .b{font-size:11px;font-weight:900;background:rgba(231,192,115,.2);color:var(--gold);border-radius:999px;padding:2px 8px}
.tab[aria-selected="true"]{color:var(--gold)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2.5px;border-radius:3px;
  background:var(--gold-foil);background-size:200% 100%;animation:foilsweep 4s linear infinite;box-shadow:0 0 12px rgba(231,192,115,.6)}
.panel{display:none;animation:rise .5s cubic-bezier(.2,.7,.2,1)}
.panel.show{display:block}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card-panel{background:linear-gradient(180deg,rgba(243,230,207,.06),rgba(243,230,207,.02));
  border:1px solid rgba(231,192,115,.2);border-radius:20px;padding:24px;margin-bottom:18px}
.card-panel h2{font-family:var(--serif);font-size:23px;font-weight:700;color:#fff6e8;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.card-panel .lead{color:rgba(255,248,239,.65);font-size:13.5px;margin-bottom:18px;line-height:1.5}

/* ledger rows */
.ledger{display:flex;flex-direction:column}
.lrow{display:grid;grid-template-columns:38px 1fr auto auto;gap:14px;align-items:center;padding:14px 6px;
  border-top:1px solid rgba(231,192,115,.12)}
.lrow:first-child{border-top:0}
/* let the middle (label) column actually shrink so the amount + status chip
   never push the row past the viewport on a phone */
.lrow>div:nth-child(2){min-width:0}
.lrow .me{overflow-wrap:anywhere}
.lrow .badge{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:15px;
  background:rgba(231,192,115,.14);border:1px solid rgba(231,192,115,.26);color:var(--gold)}
.lrow .badge.ref{background:rgba(180,200,230,.14);border-color:rgba(180,200,230,.3);color:var(--plat-300)}
.lrow .ti{font-weight:700;color:#fff6e8;font-size:14.5px}
.lrow .me{font-size:12px;color:rgba(255,248,239,.5);margin-top:2px}
.lrow .amt{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--gold)}
.lrow .amt.plat{color:#fff}
.status{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap}
.status.available{background:rgba(120,210,160,.15);color:#9ee6bb;border:1px solid rgba(120,210,160,.32)}
.status.pending{background:rgba(231,192,115,.14);color:#f1d79a;border:1px solid rgba(231,192,115,.3)}
.empty{color:rgba(255,248,239,.55);text-align:center;padding:34px 10px;font-size:14px}

/* recent orders table */
.otable{width:100%;border-collapse:collapse;font-size:14px}
.otable th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,248,239,.5);padding:0 12px 12px;border-bottom:1px solid rgba(231,192,115,.18)}
.otable td{padding:14px 12px;border-bottom:1px solid rgba(231,192,115,.1);color:#fff6e8}
.otable tr:hover td{background:rgba(231,192,115,.05)}
.otable .oid{font-family:ui-monospace,monospace;font-size:12.5px;letter-spacing:.06em;color:rgba(255,248,239,.7)}
.otable .r{text-align:right}
.otable .cb{color:var(--gold);font-weight:800}

/* referral levels */
.reflevels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
@media(max-width:760px){.reflevels{grid-template-columns:1fr}}
.reflv{position:relative;overflow:hidden;border-radius:18px;padding:22px;border:1px solid rgba(231,192,115,.22);
  background:linear-gradient(180deg,rgba(243,230,207,.08),rgba(243,230,207,.02))}
.reflv .lv{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,248,239,.55)}
.reflv .pct{font-family:var(--serif);font-size:46px;font-weight:700;line-height:1;margin:6px 0;
  background:var(--gold-foil);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foilsweep 6s linear infinite}
.reflv:nth-child(2) .pct{filter:saturate(.8)}
.reflv:nth-child(3) .pct{background:var(--plat-foil);-webkit-background-clip:text;background-clip:text}
.reflv .desc{font-size:12.5px;color:rgba(255,248,239,.6);line-height:1.45}
.reflv .earn{margin-top:12px;font-size:13px;color:#fff6e8}
.reflv .earn b{color:var(--gold)}

/* referral share strip */
.sharebar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:linear-gradient(120deg,rgba(231,192,115,.14),rgba(180,200,230,.1));
  border:1px solid rgba(231,192,115,.3);border-radius:16px;padding:16px 18px;margin-bottom:8px}
.sharebar .code{font-family:ui-monospace,monospace;font-size:20px;font-weight:800;letter-spacing:.18em;color:#fff7ea}
.sharebar .lbl{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,248,239,.6)}
.copybtn{border:0;cursor:pointer;border-radius:999px;padding:11px 20px;font-weight:800;font-size:13.5px;color:#4a330f;
  background:linear-gradient(100deg,#ffe9bf,var(--gold) 60%,var(--gold-deep));transition:.2s}
.copybtn:hover{transform:translateY(-2px);filter:brightness(1.06)}

/* loading + skeleton shimmer */
.skel{border-radius:12px;background:linear-gradient(100deg,rgba(255,255,255,.05) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 70%);
  background-size:220% 100%;animation:foilsweep 1.4s linear infinite}

/* pixie-dust cursor sparkle */
.dust{position:fixed;width:8px;height:8px;pointer-events:none;z-index:90;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,225,160,.7) 50%,transparent);
  box-shadow:0 0 8px 2px rgba(255,224,160,.7);animation:dust .9s ease-out forwards}
@keyframes dust{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,calc(-50% + 16px)) scale(.2)}}

@media(prefers-reduced-motion:reduce){
  .memcard::before,.rw-title .foil,.track .fill,.tab[aria-selected="true"]::after,
  .reflv .pct,.tile .v.gold,.tile .v.plat,.skyfield i{animation:none}
}