:root{--ink:#1d1640;--muted:#6a6488;--yellow:#ffd60a;--red:#ef233c;--blue:#1e88ff;--green:#2dc653;--purple:#6a2cff;
--g-elec:linear-gradient(135deg,#ffe53b,#ff9f1c);--g-fire:linear-gradient(135deg,#ff6b35,#ef233c);--g-water:linear-gradient(135deg,#4cc9f0,#1e5bff);--g-grass:linear-gradient(135deg,#9be15d,#13a35a);--g-psy:linear-gradient(135deg,#b84cff,#5a1bd6)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Fredoka,system-ui,sans-serif;color:var(--ink);line-height:1.5;background:#fff8e1 radial-gradient(circle at 10% 20%,#ffe9a8 0 2px,transparent 3px) 0 0/28px 28px}
h1,h2,h3,.logo{font-family:"Luckiest Guy",Fredoka,sans-serif;letter-spacing:.5px;font-weight:400}
a{color:var(--purple)}.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
header{background:var(--ink);position:sticky;top:0;z-index:10;border-bottom:4px solid var(--yellow)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;flex-wrap:wrap}
.logo{font-size:1.6rem;color:var(--yellow);text-decoration:none;text-shadow:3px 3px 0 var(--red);display:flex;align-items:center;gap:8px}
.logo svg{width:30px;height:30px}
nav{display:flex;flex-wrap:wrap;gap:6px}nav a{text-decoration:none;color:#fff;font-weight:600;padding:6px 12px;border-radius:99px;font-size:.95rem}
nav a:hover{background:rgba(255,255,255,.15)}nav a.n-sealed{background:var(--g-fire)}nav a.n-singles{background:var(--g-water)}nav a.n-graded{background:var(--g-grass)}
.hero{position:relative;color:#fff;overflow:hidden;background:#3a0ca3 url(images/hero.webp) center/cover;min-height:440px;display:flex;align-items:center}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,10,90,.85),rgba(30,10,90,.2))}
.hero .wrap{position:relative;width:100%}.hero h1{font-size:clamp(2.2rem,6vw,4rem);margin:0;color:var(--yellow);text-shadow:4px 4px 0 var(--red),0 0 30px rgba(255,214,10,.6);line-height:1.05}
.hero p{font-size:1.25rem;max-width:520px;margin:12px 0 22px}
.cta{display:flex;gap:10px;flex-wrap:wrap}.cta a{padding:12px 20px;border-radius:99px;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.badges span{background:rgba(255,255,255,.18);backdrop-filter:blur(4px);padding:6px 12px;border-radius:99px;font-size:.9rem}
.energy{display:flex;justify-content:center;gap:14px;padding:18px 0}.energy i{width:30px;height:30px;border-radius:50%;box-shadow:inset -4px -4px 0 rgba(0,0,0,.18),0 0 0 3px #fff,0 3px 8px rgba(0,0,0,.2)}
section.cat{margin:22px 0 46px;scroll-margin-top:90px}
.banner{border-radius:22px;padding:22px 26px;color:#fff;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.12)}
.banner:after{content:"✦  ✧  ✦";position:absolute;right:24px;top:10px;font-size:2.2rem;opacity:.5}
.banner h2{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);text-shadow:3px 3px 0 rgba(0,0,0,.25)}.banner p{margin:0;opacity:.95}
.banner .orb{width:58px;height:58px;flex:none;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:1.9rem;box-shadow:0 0 0 4px rgba(255,255,255,.5)}
.b-sealed{background:var(--g-fire)}.b-singles{background:var(--g-water)}.b-graded{background:var(--g-grass)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:22px}
.card{background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;border:4px solid var(--yellow);box-shadow:0 6px 0 rgba(0,0,0,.08);position:relative;transition:transform .25s,box-shadow .25s}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.7) 45%,rgba(180,140,255,.35) 50%,transparent 62%);transform:translateX(-120%);transition:transform .7s;pointer-events:none}
.card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 14px 28px rgba(106,44,255,.3)}.card:hover:after{transform:translateX(120%)}
.cat-singles .card{border-color:#7cc8ff}.cat-graded .card{border-color:#8fe388}.cat-sealed .card{border-color:#ffb38a}
.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.card .b{padding:14px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:Fredoka,sans-serif;font-weight:700;font-size:1rem;margin:0 0 4px}.card p{color:var(--muted);font-size:.88rem;margin:0 0 10px;flex:1}
.row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.price{font-family:"Luckiest Guy";font-size:1.4rem;color:var(--red)}
.tag{font-size:.72rem;padding:3px 9px;border-radius:99px;font-weight:700;text-transform:uppercase;color:#fff}.sealed{background:var(--red)}.used{background:var(--blue)}.graded{background:var(--green)}
.stock{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.soldout img{filter:grayscale(.8);opacity:.7}.ribbon{position:absolute;top:14px;left:-34px;transform:rotate(-35deg);background:var(--ink);color:var(--yellow);padding:4px 40px;font-weight:700;font-size:.8rem;z-index:2}
.btn{display:block;text-align:center;padding:11px;border-radius:12px;background:var(--g-elec);color:var(--ink);text-decoration:none;font-weight:700;border:0;box-shadow:0 4px 0 #c77d00}
.btn:hover{filter:brightness(1.07)}.btn[aria-disabled=true]{background:#e6e3f0;color:#8a85a3;box-shadow:none;pointer-events:none}
.page{background:#fff;border-radius:22px;padding:32px;margin:36px auto 50px;max-width:800px;border:4px solid var(--yellow);box-shadow:0 8px 0 rgba(0,0,0,.08)}
.page h1{color:var(--purple)}.page h2{color:var(--red);font-size:1.4rem}
footer{background:var(--ink);color:#cfc8f5;font-size:.9rem;padding:26px 0;border-top:4px solid var(--yellow)}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.hero{min-height:380px;padding:34px 0}nav a{padding:4px 10px;font-size:.85rem}.logo{font-size:1.3rem}.grid{grid-template-columns:1fr 1fr;gap:12px}.card .b{padding:10px}.card p{display:none}.price{font-size:1.15rem}.banner{padding:16px}.banner .orb{width:44px;height:44px;font-size:1.4rem}.banner:after{display:none}header .wrap{justify-content:center}}