:root { --bg:#fafafa; --card:#ffffff; --text:#0b0d10; --muted:#475569; --brand:#e10600; --ring:#b30000; --shadow:0 10px 30px rgba(2,6,23,.08); --neon:#ff2a2a; --neon-soft: rgba(255,42,42,.35); --neon-strong: rgba(255,42,42,.6); }
html[data-theme="dark"]{ --bg:#0b0d10; --card:#12161a; --text:#e6edf3; --muted:#94a3b8; --brand:#ff3b3b; --ring:#b91c1c; --shadow:0 10px 30px rgba(0,0,0,.35); --neon:#ff5151; --neon-soft: rgba(255,81,81,.35); --neon-strong: rgba(255,81,81,.7); }
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1050px;margin:0 auto;padding:32px 20px 56px}
header{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 50% 50%, var(--brand) 0 60%, transparent 61%); box-shadow:0 0 0 2px rgba(225,6,0,.2), 0 0 24px rgba(225,6,0,.25)}
h1{font-size:1.6rem;line-height:1.2;margin:0}
.neon-text h1{ text-shadow: 0 0 6px var(--neon-soft), 0 0 16px var(--neon-soft) }
.muted{color:var(--muted);font-size:13px}
.description{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5;max-width:700px}

.btn{appearance:none;border:1px solid transparent;background:var(--card);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; font-weight:700}
.btn:hover{transform:translateY(-1px) scale(1.03); box-shadow:var(--shadow), 0 0 18px rgba(225,6,0,.25)}
.btn-ghost{background:transparent;border:1px solid rgba(185,28,28,.35)}
.btn-link{background:linear-gradient(135deg,var(--brand),var(--ring));color:#fff}
.neon-btn{box-shadow: 0 0 0 1px var(--neon-soft) inset, 0 0 12px var(--neon-soft) inset}
.neon-btn:hover{box-shadow: 0 0 0 1px var(--neon-strong) inset, 0 0 20px var(--neon-strong) inset, 0 0 18px var(--neon-soft)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.grid.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)} .grid.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid rgba(185,28,28,.25);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.neon-card{border-color:var(--neon-soft)}
.neon-card:hover{transform:translateY(-4px); box-shadow:var(--shadow), 0 0 22px var(--neon-soft); border-color:var(--neon-strong)}
.thumb{aspect-ratio:16/9;background:#0f172a;display:block;width:100%;object-fit:cover; filter:saturate(1.02)}
.body{padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
.title{display:flex;gap:10px;align-items:center;justify-content:space-between}
.name{font-weight:900;font-size:16px;letter-spacing:.2px}
.flags{font-size:18px}
.row{display:flex;gap:8px}
.chip{font-size:12px;padding:6px 8px;border-radius:10px;background:rgba(248,113,113,.12);border:1px solid rgba(185,28,28,.25);font-weight:700}
.link{display:none}
.cta{display:grid;grid-template-columns:1fr;gap:8px;margin-top:6px}
footer{margin-top:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a{color:var(--text);text-decoration:none;border-bottom:1px dashed rgba(185,28,28,.45)}

/* reveal animations */
.reveal{opacity:0; transform:translateY(14px); filter:blur(2px); transition:opacity .6s ease, transform .6s ease, filter .6s ease; transition-delay:calc(var(--d,0) * 90ms)}
.reveal.show{opacity:1; transform:none; filter:none}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; filter:none; transition:none} .btn, .card{transition:none} }