/* Monster Vault website: the game's own night sky, gold and violet. Pixel type and hard edges, real cards everywhere,
   a little motion on everything but never all at once. */
:root{--bg:#0b0818;--bg2:#120e26;--panel:#15102c;--line:#2c2550;--fg:#f2edf9;--muted:#a69fbd;--accent:#c9a8ff;--gold:#ffd34a;--teal:#4fe0c8;
  --f-d:"Pixelify Sans",ui-monospace,monospace;--f-l:"Silkscreen",ui-monospace,monospace;--f-b:"Tiny5","Pixelify Sans",ui-monospace,monospace}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--fg);font-family:var(--f-d);font-size:17px;line-height:1.55;overflow-x:hidden;background:var(--bg);font-variant-ligatures:none}
img{image-rendering:pixelated}
a{color:var(--accent)}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;image-rendering:pixelated;pointer-events:none}
main,.foot{position:relative;z-index:1}
main{overflow-x:clip}
.k{margin:0 0 8px;font-family:var(--f-l);font-size:12px;letter-spacing:.2em;color:var(--teal)}
h1,h2{font-family:var(--f-d);font-weight:700;line-height:1;margin:0}
h2{font-size:clamp(34px,5vw,52px);text-shadow:0 4px 0 #05010f}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;font-family:var(--f-d);font-weight:700;font-size:18px;color:#160a30;background:var(--gold);
  text-decoration:none;border:0;cursor:pointer;box-shadow:0 5px 0 #8a6400,0 5px 0 2px #05010f;transition:transform .08s steps(2)}
.btn:hover{background:#ffe58a}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #8a6400}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 2px var(--accent),0 5px 0 #05010f}
.btn.ghost:hover{background:rgba(201,168,255,.12)}
.btn.sm{padding:9px 14px;font-size:15px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:12px max(18px,4vw);background:rgba(11,8,24,.86);box-shadow:0 2px 0 var(--line)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;color:var(--fg);text-decoration:none;margin-right:auto}
.logo img{width:34px;height:34px;box-shadow:0 0 0 2px var(--line)}
.nav nav{display:flex;gap:20px}
.nav nav a{font-family:var(--f-l);font-size:12px;letter-spacing:.1em;color:var(--muted);text-decoration:none}
.nav nav a:hover{color:var(--fg)}
@media (max-width:760px){.nav nav{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:30px;max-width:1180px;margin:0 auto;padding:70px max(18px,4vw) 40px;min-height:calc(100vh - 60px)}
.hero-t{position:relative;z-index:2}
.hero h1{font-size:clamp(42px,5.2vw,76px);text-shadow:0 6px 0 #05010f}
.hero h1 span{white-space:nowrap}
.hero h1 span{color:var(--gold);text-shadow:0 6px 0 #3a2600,0 0 0 #000}
.lead{max-width:560px;font-size:19px;color:#d8d0ec;margin:20px 0 26px}
.lead b{color:var(--fg)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.founder{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:var(--muted)}
.founder img{width:34px;height:34px;box-shadow:0 0 0 2px #e0a82a,0 0 0 4px #3a2600}
.founder b{color:#ffd34a}
.hero-fan{position:relative;height:min(560px,62vw);perspective:1100px}
.fc{position:absolute;top:50%;left:56%;width:min(280px,40vw);transform-style:preserve-3d;filter:drop-shadow(0 18px 0 rgba(5,1,15,.55));transition:transform .2s}
.f1{transform:translate(-112%,-46%) rotate(-12deg);animation:bob 5s steps(10) infinite}
.f3{transform:translate(12%,-46%) rotate(11deg);animation:bob 5s steps(10) -2.5s infinite}
.f2{transform:translate(-50%,-55%) rotate(-1deg) scale(1.08);z-index:2;animation:bobc 4.4s steps(10) infinite}
@keyframes bob{50%{translate:0 -10px}}
@keyframes bobc{50%{translate:0 -14px}}
.spark{position:absolute;width:14px;height:14px;z-index:3;background:linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat;animation:spk 2.2s steps(2) infinite}
.s1{left:18%;top:14%}.s2{left:78%;top:24%;animation-delay:.8s}.s3{left:60%;top:82%;animation-delay:1.5s}
@keyframes spk{50%{opacity:0;transform:scale(.4)}}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-top:40px;min-height:0;text-align:left}.hero-fan{height:380px}.fc{width:min(190px,44vw)}}

/* the wall: two rails of real cards scrolling past */
.wall{padding:30px 0 60px;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rail{display:flex;gap:18px;width:max-content;animation:rail 70s linear infinite;padding:10px 0}
.rail.rev{animation-direction:reverse;animation-duration:80s;margin-top:6px}
.rail img{height:220px;width:auto;filter:drop-shadow(0 8px 0 rgba(5,1,15,.6));transition:transform .15s steps(2)}
.rail img:hover{transform:translateY(-10px) scale(1.04)}
.wall:hover .rail{animation-play-state:paused}
@keyframes rail{to{transform:translateX(-50%)}}

/* sections */
.sec{max-width:1180px;margin:0 auto;padding:90px max(18px,4vw)}
.sec-h{max-width:720px;margin-bottom:34px}
.sec-h p:not(.k){color:#d8d0ec;font-size:18px;margin:14px 0 0}
.odds{display:inline-block;margin-left:6px;font-family:var(--f-l);font-size:11px;letter-spacing:.08em;color:#160a30;background:#b98cff;padding:3px 7px}

/* pack demo */
.pack{text-align:center}.pack .sec-h{margin:0 auto 34px}
.pk-row{display:flex;justify-content:center;gap:14px;min-height:310px;align-items:center;flex-wrap:wrap;perspective:900px}
.pk{position:relative;width:200px;aspect-ratio:276/388}
.pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pk.turn{animation:turn .36s steps(6)}
@keyframes turn{50%{transform:scaleX(0)}}
.pk.deal{animation:deal .4s steps(6) backwards}
@keyframes deal{from{transform:translateY(-120px) rotate(-14deg);opacity:0}}
.pk .tag{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);font-family:var(--f-l);font-size:11px;letter-spacing:.1em;white-space:nowrap;color:var(--c,#fff)}
.pk.r3::after{content:"";position:absolute;inset:-26px;z-index:-1;background:conic-gradient(from 0deg,#b98cff,transparent 20%,#4fc8ff,transparent 45%,#ffd34a,transparent 70%,#b98cff);opacity:.45;animation:spin 3s linear infinite;
  -webkit-mask:repeating-conic-gradient(#000 0 6deg,transparent 6deg 14deg);mask:repeating-conic-gradient(#000 0 6deg,transparent 6deg 14deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.pk-ctl{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin-top:48px}
#pk-msg{font-family:var(--f-l);font-size:12px;letter-spacing:.08em;color:var(--muted)}
#pk-msg b{color:var(--gold)}
@media (max-width:760px){.pk{width:30vw}.pk-row{gap:8px;min-height:0}}

/* grading ladder */
.ladder{display:flex;align-items:flex-end;justify-content:center;gap:0;padding:40px 0 10px}
.rung{position:relative;display:grid;justify-items:center;gap:10px;margin:0 -26px;transition:transform .18s steps(3);z-index:1}
.rung img{width:clamp(110px,15vw,190px)}
.rung:hover{transform:translateY(-22px) scale(1.12);z-index:9}
.rung span{font-family:var(--f-l);font-size:11px;letter-spacing:.08em;color:var(--muted);text-align:center;line-height:1.4}
.rung span b{display:block;font-family:var(--f-b);font-size:20px;color:var(--fg);letter-spacing:0}
.rung:nth-child(1){transform:translateY(40px)}.rung:nth-child(2){transform:translateY(32px)}.rung:nth-child(3){transform:translateY(24px)}.rung:nth-child(4){transform:translateY(16px)}
.rung:nth-child(5){transform:translateY(8px)}.rung:nth-child(7) span b{color:#ffd34a}
@media (max-width:760px){.ladder{flex-wrap:wrap;gap:16px 0}.rung{margin:0 -14px}}

/* battle */
.battle{display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center}
.phone{width:min(310px,80vw);padding:12px;background:#05030f;box-shadow:0 0 0 3px var(--line),0 0 0 6px #05010f,0 14px 0 6px rgba(5,1,15,.5)}
.phone video{display:block;width:100%;height:auto;image-rendering:pixelated}
.feats{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:16px}
.feats li{position:relative;padding:14px 16px 14px 46px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);color:#d8d0ec}
.feats li::before{content:"";position:absolute;left:16px;top:20px;width:12px;height:12px;background:var(--gold);box-shadow:0 0 0 3px #3a2600}
.feats b{color:var(--fg)}
@media (max-width:860px){.battle{grid-template-columns:1fr;justify-items:center}}

/* league */
.moons{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.moon{display:grid;justify-items:center;gap:8px;padding:18px 6px 16px;background:linear-gradient(#0a0e2a,#070a1a);box-shadow:inset 0 0 0 2px #1a1e3a;transition:transform .15s steps(2)}
.moon:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 2px var(--mc)}
.moon svg{width:72px;height:72px}
.moon b{font-size:16px;color:var(--mc);text-align:center;line-height:1.1}
.moon small{font-family:var(--f-b);font-size:15px;color:var(--muted)}
@media (max-width:760px){.moons{grid-template-columns:repeat(4,1fr)}}

/* roster */
.ro-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ro-filter button{font-family:var(--f-l);font-size:11px;letter-spacing:.1em;padding:8px 12px;border:0;cursor:pointer;color:var(--fg);background:var(--panel);box-shadow:inset 0 0 0 2px var(--line)}
.ro-filter button[aria-pressed="true"]{color:#160a30;background:var(--ec,var(--accent));box-shadow:none}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.mon{display:grid;justify-items:center;gap:8px;padding:14px 8px 12px;border:0;cursor:pointer;color:var(--fg);font:inherit;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line);transition:transform .12s steps(2)}
.mon:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 2px var(--ec)}
.mon img{width:84px;height:84px;box-shadow:0 0 0 2px #05010f,0 0 0 4px var(--ec)}
.mon b{font-size:15px;line-height:1.1;text-align:center}
.mon small{font-family:var(--f-l);font-size:9px;letter-spacing:.1em;color:var(--ec)}
.mon[hidden]{display:none}

/* join */
.join-box{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;padding:34px;background:linear-gradient(110deg,rgba(255,211,74,.08),transparent 50%),var(--panel);box-shadow:inset 0 0 0 2px #c9961c,0 8px 0 #05010f}
.join-back{width:170px;animation:bob 4s steps(8) infinite}
.join-box p:not(.k){color:#d8d0ec}
.wl{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.wl input{flex:1;min-width:220px;padding:14px;font:inherit;font-size:17px;color:var(--fg);background:#0b0818;border:0;box-shadow:inset 0 0 0 2px var(--line)}
.wl input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gold)}
.wl-msg{min-height:1.5em;font-family:var(--f-l);font-size:12px;letter-spacing:.06em;color:var(--teal)}
@media (max-width:760px){.join-box{grid-template-columns:1fr;justify-items:start}.join-back{width:120px}}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center;padding:34px 18px 46px;font-family:var(--f-l);font-size:11px;letter-spacing:.08em;color:var(--muted);box-shadow:0 -2px 0 var(--line)}
.foot a{color:var(--muted)}.foot a:hover{color:var(--fg)}
.foot span{color:var(--fg)}

/* monster modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(5,3,15,.82)}
.modal[hidden]{display:none}
.m-box{position:relative;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:780px;width:100%;padding:26px;background:var(--panel);box-shadow:inset 0 0 0 2px var(--ec,var(--accent)),0 10px 0 #05010f;animation:pop .25s steps(4)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.m-box>img{width:min(270px,40vw)}
.m-t h3{margin:0;font-size:34px;line-height:1}
.m-t .tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}
.m-t .tags span{font-family:var(--f-l);font-size:10px;letter-spacing:.08em;padding:3px 7px;color:#160a30;background:var(--ec)}
.m-t .tags span.alt{background:#3a3358;color:var(--fg)}
.m-t dl{margin:0;display:grid;gap:10px}
.m-t dt{font-weight:700}
.m-t dd{margin:0;color:#c9c0e0;font-size:15px}
.m-t dt.sup{color:var(--gold)}
.m-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;cursor:pointer;font-size:18px;color:var(--fg);background:#0b0818;box-shadow:inset 0 0 0 2px var(--line)}
@media (max-width:640px){.m-box{grid-template-columns:1fr;justify-items:center;text-align:center}.m-t .tags{justify-content:center}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}