:root { color-scheme: dark; --bg:#14151a; --panel:#1e2028; --text:#e8e9ee; --muted:#8b8ea0; --accent:#5865f2; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; background:var(--panel); }
header h1 { margin:0; font-size:1.2rem; }
main { max-width:1100px; margin:0 auto; padding:1.5rem; }
a, button { color:inherit; }
.btn { display:inline-block; padding:.6rem 1.1rem; border:0; border-radius:6px; background:var(--accent); color:#fff; text-decoration:none; cursor:pointer; font:inherit; }
.btn.secondary { background:#343745; }
.muted { color:var(--muted); }
.center { text-align:center; margin-top:4rem; }
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.tabs button { padding:.5rem 1rem; border:0; border-radius:6px; background:var(--panel); cursor:pointer; font:inherit; }
.tabs button[aria-selected="true"] { background:var(--accent); color:#fff; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:1rem; }
.card { position:relative; will-change:transform; background:var(--panel); border-radius:8px; overflow:hidden; }
.card img { display:block; width:100%; height:auto; }
.card.missing img { filter:grayscale(1) brightness(.7); }
.card .count { position:absolute; right:.4rem; bottom:2.2rem; min-width:1.8rem; padding:.1rem .5rem; border-radius:999px; background:rgba(0,0,0,.75); text-align:center; font-weight:600; }
.card .name { padding:.4rem .6rem; font-size:.85rem; }
header nav { display:flex; gap:1rem; align-items:center; }
header nav a { text-decoration:none; color:var(--muted); }
header nav a[aria-current="page"] { color:var(--text); font-weight:600; }

/* Booster page */
.booster { display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.booster .tabs { justify-content:center; margin-bottom:0; }
.tilt { width:min(300px, 70vw); aspect-ratio:750/1050; perspective:1200px; border-radius:14px; }
.tilt.done { overflow:hidden; }
.card3d { position:relative; width:100%; height:100%; transform-style:preserve-3d; cursor:pointer; }
.card3d.disabled { cursor:default; }
.face { position:absolute; inset:0; width:100%; height:100%; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--panel); }
.face.front { transform:rotateY(180deg); }
.tilt:not(.done) .card3d:not(.disabled):hover { filter:brightness(1.12); }
.hint { min-height:1.5em; }
.result { text-align:center; min-height:6rem; }
.result h2 { margin:.2rem 0; }
.glow-new { animation:glow 1.6s ease-in-out 3; }
@keyframes glow { 0%,100% { box-shadow:0 0 0 rgba(255,210,70,0); } 50% { box-shadow:0 0 45px 12px rgba(255,210,70,.8); } }
.glow { animation:glow-soft 1.6s ease-in-out 2; }
@keyframes glow-soft { 0%,100% { box-shadow:0 0 0 rgba(88,101,242,0); } 50% { box-shadow:0 0 30px 6px rgba(88,101,242,.7); } }
.tilt.done::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform:translateX(-120%); animation:sweep 1.2s ease-out .1s 1 forwards; }
@keyframes sweep { to { transform:translateX(120%); } }
.pop { animation:pop .5s ease-out both; }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .glow, .glow-new, .tilt.done::after, .pop { animation:none; } }