:root{--bg:#111a3f;--bg2:#1c2f66;--card:#1a2b57d6;--text:#f4f7ff;--muted:#c4d2f4;--accent:#5af4d7;--accent2:#7fb0ff;--line:#4b67b6}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:linear-gradient(160deg,var(--bg),var(--bg2));color:var(--text);min-height:100%}
body::before{content:"";position:fixed;inset:0;background:url('/assets/hero-bg.png') center center/cover no-repeat;opacity:.42;z-index:-2}
body::after{content:"";position:fixed;inset:0;background:radial-gradient(900px 500px at 15% -10%,#79a7ff77 0%,transparent 60%),radial-gradient(800px 400px at 85% 0%,#53f0d933 0%,transparent 55%);z-index:-1}
a{text-decoration:none;color:inherit}
.shell{max-width:1150px;margin:0 auto;padding:18px}
.top{display:flex;justify-content:space-between;align-items:center;padding:8px 0;position:relative}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.6px}
.brand img{width:38px;height:38px;border-radius:11px;object-fit:cover;border:1px solid #3554a8;box-shadow:0 8px 24px #05081499}
.menu-btn{background:#121d3f;border:1px solid #304b8f;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700}
.panel{display:none;position:absolute;right:0;top:58px;background:#0f1837f2;border:1px solid #2f4785;border-radius:14px;padding:10px;min-width:240px;z-index:1000;backdrop-filter:blur(8px)}
.panel.open{display:block}.panel a{display:block;padding:10px;border-radius:10px;color:var(--muted)}.panel a:hover{background:#1a2a58;color:#fff}
.hero{padding:38px 0 24px}
.hero h1{font-size:clamp(34px,5.4vw,68px);line-height:1.02;margin:0 0 10px;max-width:920px}
.hero p{color:var(--muted);max-width:820px;font-size:19px;line-height:1.5}
.hero-art{margin-top:18px;border:1px solid #2d4686;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px #07102d99;position:relative}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,#7aa2ff33 40%,transparent 70%);animation:shimmer 7s linear infinite}
.hero-art img{display:block;width:100%;height:300px;object-fit:cover;filter:saturate(1.28) contrast(1.12)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 10px}
.badge{padding:6px 10px;border:1px solid #2d4686;background:#111c3f;border-radius:999px;color:#bdd0ff;font-size:12px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{background:linear-gradient(180deg,#131d3be6,#0f1732d8);border:1px solid #2a4180;padding:18px;border-radius:18px;box-shadow:0 14px 30px #050a1f80;transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px #050a1fb3;border-color:#4d73d2}
.card-art{display:block;width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid #36559d;margin:0 0 12px;filter:saturate(1.25) contrast(1.08)}
.card h3{margin:0 0 8px;font-size:22px}.card p{margin:0;color:var(--muted);min-height:44px}
.btn{display:inline-block;margin-top:14px;background:linear-gradient(120deg,var(--accent2),var(--accent));color:#051021;font-weight:800;padding:10px 14px;border-radius:12px}
.game-wrap{max-width:620px;margin:24px auto;background:linear-gradient(180deg,#101a36eb,#0d152ee0);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 16px 30px #050a1f91}
.hud{display:flex;justify-content:space-between;color:#c3d2f8;font-weight:700}
.q{font-size:64px;text-align:center;font-weight:900;margin:16px 0 8px;letter-spacing:.5px}
.subt{text-align:center;color:var(--muted);margin-bottom:10px}
input.answer{width:100%;padding:16px;border-radius:12px;border:1px solid #314d91;background:#0d1633;color:#fff;font-size:26px;text-align:center;outline:none}
input.answer:focus{border-color:#68a0ff;box-shadow:0 0 0 3px #2e4f9d44}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.key{padding:14px;border-radius:10px;border:1px solid #36549a;background:#14244e;color:#fff;font-size:20px;cursor:pointer;font-weight:700}
.key:hover{filter:brightness(1.08)}
.key.primary{background:linear-gradient(120deg,var(--accent2),var(--accent));color:#061222}
.start{width:100%;margin-top:12px;padding:12px;border:none;border-radius:10px;background:#28458a;color:#fff;font-weight:800;cursor:pointer}
.footer{margin:30px 0 16px;color:#8ea2d4;font-size:13px;text-align:center}
@media (max-width:640px){
  body::before{opacity:.72;background-position:center top}
  body::after{background:radial-gradient(700px 360px at 50% -5%,#2a4da855 0%,transparent 62%)}
  .hero-art img{height:230px}
  .card-art{height:150px}
  .q{font-size:54px}
  .hero p{font-size:17px}
}
@keyframes shimmer{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}}
.mm-modal{position:fixed;inset:0;background:#050915c9;display:none;align-items:center;justify-content:center;padding:18px;z-index:2000}
.mm-modal.open{display:flex}
.mm-card{width:min(420px,100%);background:#0f1a3ae8;border:1px solid #36549a;border-radius:14px;padding:16px}
.mm-card h3{margin:0 0 8px}
.mm-card p{margin:0 0 10px;color:#c4d2f4;white-space:pre-line}
.mm-card input{width:100%;padding:12px;border-radius:10px;border:1px solid #36549a;background:#0d1633;color:#fff;margin:8px 0}
.mm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.mm-consent{position:fixed;left:0;right:0;bottom:0;display:none;z-index:2100;padding:12px}
.mm-consent.open{display:block}
.mm-consent-card{max-width:760px;margin:0 auto;background:#0e1938f5;border:1px solid #36549a;border-radius:12px;padding:12px}
.mm-consent-card h4{margin:0 0 6px}
.mm-consent-card p{margin:0;color:#c4d2f4}
.mm-consent-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}