/* ============================================================
   GildThief Lv.30 — neon-club × retro-RPG invite
   ============================================================ */
@font-face{
  font-family:'Press Start 2P';
  src:url('../fonts/press-start-2p.woff2') format('woff2');
  font-display:swap;
}

:root{
  --bg:#0b0613; --bg2:#0f0a1e; --surface:#161029; --surface2:#1d1536;
  --ink:#05030d; --line:#2a2147;
  --text:#f2ecff; --muted:#a99fc6;
  --pink:#ff2e88; --cyan:#2de2e6; --lime:#b6ff3c; --purple:#a44cff; --gold:#ffd23f;
  --hp:#ff3b5c; --mp:#36a3ff; --xp:#ffb000;
  --pix:'Press Start 2P', ui-monospace, monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(164,76,255,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(45,226,230,.12), transparent 55%),
    linear-gradient(var(--bg), var(--bg2));
  background-attachment:fixed;
}
img{max-width:100%; display:block}
a{color:var(--cyan); text-decoration:none}
.nowrap{white-space:nowrap}
.accent{color:var(--gold)}
.emoji{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; font-weight:400}

/* shared pixel chamfer */
.frame,.frame__inner,.btn,.slot,.cd,.kicker .rank,.throne__badge,.sound-toggle{
  clip-path:polygon(var(--ch,8px) 0, calc(100% - var(--ch,8px)) 0, 100% var(--ch,8px),
    100% calc(100% - var(--ch,8px)), calc(100% - var(--ch,8px)) 100%, var(--ch,8px) 100%,
    0 calc(100% - var(--ch,8px)), 0 var(--ch,8px));
}

/* pixel-framed card: neon edge + dark surface */
.frame{--ch:13px; padding:3px; background:linear-gradient(135deg,var(--cyan),var(--purple) 55%,var(--pink));
  box-shadow:0 14px 40px rgba(0,0,0,.5)}
.frame--gold{background:linear-gradient(135deg,var(--gold),var(--pink))}
.frame__inner{--ch:11px; background:
    linear-gradient(180deg, rgba(45,226,230,.05), transparent 30%),
    var(--surface);
  padding:clamp(18px,4vw,34px)}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:40;
  background:rgba(9,6,18,.82); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line)}
.nav__inner{max-width:var(--maxw); margin:0 auto; padding:9px 14px;
  display:flex; align-items:center; gap:10px}
.nav__brand{font-family:var(--pix); font-size:11px; color:var(--text); display:flex; align-items:center; gap:7px; white-space:nowrap}
.nav__crown{color:var(--gold)}
.nav__brand em{color:var(--lime); font-style:normal; font-size:9px}
.nav__links{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.nav__links a{font-family:var(--pix); font-size:9px; color:var(--muted); padding:7px 8px; border-radius:4px}
.nav__links a:hover{color:var(--text); background:rgba(255,46,136,.14)}
.nav__links a.nav__rsvp{color:var(--ink); background:var(--lime)}
.nav__links a.nav__rsvp:hover{background:#cfff63}
.sound-toggle{font-family:var(--pix); font-size:8px; cursor:pointer; --ch:5px;
  border:2px solid var(--line); background:var(--surface2); color:var(--muted); padding:7px 8px}
.sound-toggle .sound-toggle__on{display:none} .sound-toggle .sound-toggle__off{display:inline}
.sound-toggle[aria-pressed="true"]{color:var(--lime); border-color:var(--lime)}
.sound-toggle[aria-pressed="true"] .sound-toggle__on{display:inline}
.sound-toggle[aria-pressed="true"] .sound-toggle__off{display:none}

/* ---------- BUTTONS ---------- */
.btn{--ch:8px; display:inline-block; font-family:var(--pix); font-size:11px; line-height:1.3;
  padding:14px 18px; cursor:pointer; border:0; text-align:center;
  background:var(--surface2); color:var(--text); box-shadow:inset 0 0 0 2px var(--line);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 8px 22px rgba(255,46,136,.4)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent; box-shadow:inset 0 0 0 2px var(--cyan); color:var(--cyan)}
.btn--ghost:hover{background:rgba(45,226,230,.12)}
.btn--mini{font-size:9px; padding:10px 12px}
.btn--big{font-size:13px; padding:18px 24px}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:84px 20px 64px}
.hero__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:brightness(.42) saturate(1.3) contrast(1.05); transform:scale(1.06)}
.hero__veil{position:absolute; inset:0; background:
  radial-gradient(120% 90% at 50% 18%, transparent 30%, rgba(11,6,19,.75) 78%, var(--bg) 100%),
  linear-gradient(180deg, rgba(11,6,19,.5), rgba(11,6,19,.2) 40%, var(--bg) 96%)}
.hero__lasers{position:absolute; inset:-20% -20% 0; pointer-events:none; mix-blend-mode:screen; opacity:.5}
.hero__lasers i{position:absolute; top:-10%; left:50%; width:42vmax; height:6px; transform-origin:left center; filter:blur(3px)}
.hero__lasers i:nth-child(1){background:linear-gradient(90deg,transparent,var(--cyan),transparent); animation:sweep 7s ease-in-out infinite}
.hero__lasers i:nth-child(2){background:linear-gradient(90deg,transparent,var(--pink),transparent); animation:sweep 9s ease-in-out infinite reverse; top:8%}
.hero__lasers i:nth-child(3){background:linear-gradient(90deg,transparent,var(--lime),transparent); animation:sweep 11s ease-in-out infinite; top:-4%}
@keyframes sweep{0%{transform:rotate(28deg)}50%{transform:rotate(64deg)}100%{transform:rotate(28deg)}}

.hero__inner{position:relative; z-index:2; max-width:760px}
.kicker{font-family:var(--pix); font-size:clamp(8px,2.4vw,11px); color:var(--cyan);
  letter-spacing:.5px; margin:0 0 18px}
.kicker .rank{--ch:4px; background:var(--gold); color:var(--ink); padding:4px 7px; margin-left:4px}
.title{margin:0; font-family:var(--pix); line-height:1.35; text-shadow:0 3px 0 rgba(0,0,0,.4)}
.title__name{display:block; font-size:clamp(1.5rem,9vw,4.4rem); color:#fff;
  text-shadow:0 0 18px rgba(255,46,136,.6), 3px 3px 0 var(--purple)}
.title__reached{display:block; font-size:clamp(.7rem,3vw,1.2rem); color:var(--muted); margin:14px 0 6px}
.title__lv{display:block; font-size:clamp(1.3rem,7vw,3.4rem); color:var(--lime);
  text-shadow:0 0 16px rgba(182,255,60,.6)}
.title__lv-num{color:var(--gold)}
.lede{font-family:var(--sans); font-size:clamp(1rem,2.6vw,1.22rem); color:var(--text);
  margin:22px auto 26px; max-width:30em}
.lede strong{color:var(--pink)}

.countdown{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 0 26px}
.cd{--ch:6px; background:var(--surface); box-shadow:inset 0 0 0 2px var(--line);
  padding:10px 12px; min-width:64px}
.cd b{display:block; font-family:var(--pix); font-size:clamp(1.1rem,4vw,1.6rem); color:var(--gold)}
.cd span{font-family:var(--pix); font-size:8px; color:var(--muted)}

.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero__when{font-family:var(--pix); font-size:clamp(8px,2.3vw,10px); color:var(--lime); margin:24px 0 0}
.scroll-hint{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--cyan); font-size:26px; animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* level-up flash */
.levelup{position:fixed; inset:0; z-index:90; display:grid; place-items:center; pointer-events:none;
  background:rgba(255,255,255,0); animation:lvflash 1.7s ease-out .35s forwards}
.levelup span{font-family:var(--pix); font-size:clamp(1.2rem,7vw,3rem); color:var(--gold);
  text-shadow:0 0 24px var(--pink), 4px 4px 0 var(--purple); opacity:0; transform:scale(.6);
  animation:lvtext 1.7s cubic-bezier(.2,1.3,.4,1) .35s forwards}
@keyframes lvflash{0%{background:rgba(255,255,255,0)}12%{background:rgba(255,255,255,.85)}100%{background:rgba(255,255,255,0); visibility:hidden}}
@keyframes lvtext{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1) translateY(-20px)}}

/* ---------- SECTIONS ---------- */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(56px,9vw,104px) 20px}
.section__head{text-align:center; margin-bottom:34px}
.eyebrow{font-family:var(--pix); font-size:10px; color:var(--cyan); letter-spacing:1px; margin:0 0 12px}
.eyebrow--center{text-align:center}
.h2{font-family:var(--pix); font-size:clamp(1.1rem,4.5vw,2rem); line-height:1.45; margin:0; color:#fff}
.section__sub{color:var(--muted); margin:14px auto 0; max-width:40em; font-size:.98rem}

/* reveal on scroll */
[data-animate]{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
[data-animate].is-in{opacity:1; transform:none}

/* ---------- THRONE ---------- */
.throne__stage{margin:0; display:flex; flex-direction:column; align-items:center; gap:22px}
.throne__frame{--ch:16px; max-width:430px; width:100%; position:relative}
.throne__frame .frame__inner{--ch:14px; padding:12px}
.throne__art{width:100%; height:auto; image-rendering:auto; border-radius:2px}
.throne__badge{--ch:5px; position:relative; z-index:3; align-self:center; margin-top:-28px;
  background:var(--gold); color:var(--ink); font-family:var(--pix); font-size:9px; padding:8px 12px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.55)}
.throne__caption{max-width:36em; text-align:center; color:var(--muted); margin:14px 0 0}
.throne__caption strong{color:var(--text); display:inline-block; margin-top:4px}

/* ---------- STATS ---------- */
.stats__card{--ch:16px}
.stats__grid{display:grid; gap:26px}
.char{text-align:center}
.char__portrait{--ch:10px; clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  aspect-ratio:4/3; box-shadow:inset 0 0 0 3px var(--purple); margin-bottom:12px; background:#000}
.char__portrait img{width:100%; height:100%; object-fit:cover}
.char__name{font-family:var(--pix); font-size:15px; color:var(--lime); margin:6px 0 2px}
.char__class{font-family:var(--pix); font-size:9px; color:var(--cyan); margin:0 0 6px}
.char__ign{font-size:.86rem; color:var(--muted); margin:0}

.bars{display:flex; flex-direction:column; gap:14px}
.bar__label{display:flex; justify-content:space-between; font-family:var(--pix); font-size:9px; margin-bottom:5px; color:var(--text)}
.bar__num{color:var(--muted)}
.bar__track{height:18px; background:#0a0716; box-shadow:inset 0 0 0 2px var(--line); overflow:hidden}
.bar__fill{height:100%; width:0; transition:width 1.2s cubic-bezier(.2,.9,.25,1)}
.bars.is-in .bar--hp .bar__fill{width:var(--val)}
.bars.is-in .bar--mp .bar__fill{width:var(--val); transition-delay:.15s}
.bars.is-in .bar--xp .bar__fill{width:var(--val); transition-delay:.3s}
.bar--hp .bar__fill{background:repeating-linear-gradient(45deg,var(--hp),var(--hp) 8px,#e23350 8px,#e23350 16px)}
.bar--mp .bar__fill{background:repeating-linear-gradient(45deg,var(--mp),var(--mp) 8px,#2b8de0 8px,#2b8de0 16px)}
.bar--xp .bar__fill{background:repeating-linear-gradient(45deg,var(--xp),var(--xp) 8px,#e69e00 8px,#e69e00 16px)}
.bar__num--ding{transition:color .2s}
.bars.is-in .bar__num--ding{color:var(--gold); animation:ding .5s ease .9s both}
@keyframes ding{0%{transform:scale(1)}40%{transform:scale(1.4); color:#fff}100%{transform:scale(1)}}

.skills{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.skill{display:flex; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.92rem}
.skill__name{color:var(--text)}
.skill__lv{margin-left:auto; font-family:var(--pix); font-size:10px; color:var(--gold)}
.stats__quip{text-align:center; margin:22px 0 0; color:var(--muted)}
.stats__quip strong{color:var(--lime)}

/* ---------- QUEST ---------- */
.quests{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.quest__item{--ch:14px}
.quest__body{display:grid; gap:20px; align-items:stretch}
.quest__tag{font-family:var(--pix); font-size:9px; color:var(--cyan); margin:0 0 8px}
.quest__title{font-family:var(--pix); font-size:clamp(1rem,3.6vw,1.4rem); color:var(--gold); margin:0 0 10px}
.quest__meta{margin:0 0 10px; font-size:1.02rem}
.quest__meta strong{color:var(--text)}
.quest__flavor{color:var(--muted); margin:0 0 16px}
.quest__media{--ch:10px; position:relative; aspect-ratio:4/5; clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.quest__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; box-shadow:inset 0 0 0 3px var(--line)}
.quest__cal{text-align:center; margin-top:26px}

/* ---------- INVENTORY ---------- */
.inv__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.slot{--ch:9px; position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; background:#0a0716;
  border:0; padding:0; margin:0; width:100%; font:inherit; color:inherit; text-align:left; display:block;
  box-shadow:inset 0 0 0 3px var(--rar,var(--line)); transition:transform .15s ease, box-shadow .15s ease}
.slot:hover,.slot:focus-visible{transform:translateY(-4px); outline:none;
  box-shadow:inset 0 0 0 3px var(--rar,var(--cyan)), 0 0 22px -2px var(--rar,var(--cyan))}
.slot img{width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.slot:hover img{transform:scale(1.06)}
.slot__tag{--ch:4px; position:absolute; top:7px; left:7px; font-family:var(--pix); font-size:7px;
  padding:4px 6px; background:var(--rar,#444); color:var(--ink); font-weight:700}
.slot__meta{position:absolute; left:0; right:0; bottom:0; padding:22px 9px 9px;
  background:linear-gradient(transparent,rgba(5,3,13,.92)); }
.slot__name{font-family:var(--pix); font-size:8.5px; color:#fff; line-height:1.5; display:block}
.slot__flavor{font-size:.74rem; color:var(--muted); margin:3px 0 0; display:block}
.r-legendary{--rar:var(--gold)} .r-epic{--rar:var(--purple)} .r-rare{--rar:var(--cyan)}
.r-uncommon{--rar:var(--lime)} .r-common{--rar:#8b86a6} .r-cursed{--rar:var(--pink)}

/* ---------- RSVP ---------- */
.rsvp__card{--ch:18px; max-width:640px; margin:0 auto; text-align:center}
.rsvp__h{margin:6px 0 14px}
.rsvp__copy{color:var(--text); max-width:34em; margin:0 auto 22px}
.rsvp__copy strong{color:var(--gold)}
.rsvp__buttons{display:flex; justify-content:center}
.rsvp__hint{margin:18px 0 0; color:var(--muted); font-size:.92rem}
.rsvp__rip{font-family:var(--pix); font-size:10px; color:var(--lime); margin:22px 0 0}

/* ---------- FOOTER ---------- */
.foot{max-width:var(--maxw); margin:0 auto; padding:20px 20px 64px}
.chatbox{--ch:8px; clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  background:#3a2a12; box-shadow:inset 0 0 0 3px #6b4f22; padding:16px 18px; margin-bottom:24px}
.chatbox__line{font-family:var(--pix); font-size:10px; line-height:1.7; margin:0; color:#ffe14d}
.chatbox__line--gz{color:#fff}
.chatbox__line--dim{color:#caa94d}
.foot__recap{text-align:center; color:var(--muted); font-size:.9rem}
.foot__recap strong{color:var(--text)}
.foot__rsvp{margin-top:8px; font-family:var(--pix); font-size:9px}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px;
  background:rgba(4,2,10,.92); backdrop-filter:blur(6px)}
.lightbox[hidden]{display:none}
.lightbox__fig{margin:0; max-width:560px; text-align:center}
.lightbox__img{max-height:78vh; width:auto; margin:0 auto; box-shadow:0 0 0 3px var(--cyan), 0 20px 60px rgba(0,0,0,.7)}
.lightbox__cap{font-family:var(--pix); font-size:10px; color:var(--lime); margin-top:16px; line-height:1.6}
.lightbox__close{position:fixed; top:16px; right:16px; --ch:6px; font-family:var(--pix); font-size:12px;
  background:var(--pink); color:#fff; border:0; padding:12px 14px; cursor:pointer; clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}

.fx-canvas{position:fixed; inset:0; z-index:85; pointer-events:none}

/* ---------- RESPONSIVE ---------- */
@media (min-width:680px){
  .stats__grid{grid-template-columns:300px 1fr; align-items:start}
  .quest__body{grid-template-columns:1.1fr .9fr}
  .quest__media{aspect-ratio:auto; min-height:330px}
  .quest__body--rev .quest__text{order:2}
  .inv__grid{grid-template-columns:repeat(3,1fr); gap:14px}
}
@media (min-width:1000px){ .inv__grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:520px){
  .nav__brand em{display:none}
  .nav__links a{padding:6px 6px}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .levelup{display:none}
  [data-animate]{opacity:1; transform:none}
  .bar__fill{width:var(--val) !important}
  .hero__lasers{opacity:.3}
  .hero__bg{transform:none}
}