@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@500;700;800&display=swap');

:root { --ink:#17234c; --purple:#6346e8; --yellow:#ffce3a; --cream:#fffaf0; --pink:#ff6b8d; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Nunito, sans-serif; background:radial-gradient(circle at 8% 8%,#ffe280 0 7%,transparent 7.2%),radial-gradient(circle at 95% 92%,#9de7d4 0 11%,transparent 11.2%),var(--cream); }
.game-shell { width:min(760px,calc(100% - 32px)); margin:auto; padding:28px 0 38px; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.logo { font:800 clamp(1.55rem,5vw,2rem)/1 'Baloo 2',sans-serif; color:var(--ink); text-decoration:none; letter-spacing:-1.3px; }.logo span { color:var(--purple); }
.score { min-width:105px; padding:7px 13px; background:#fff; border:3px solid var(--ink); border-radius:16px; text-align:center; box-shadow:3px 4px 0 var(--ink); }.score small { display:block; font-size:.69rem; font-weight:800; text-transform:uppercase; }.score strong { font:800 1.25rem 'Baloo 2',sans-serif; }
.intro { text-align:center; padding:52px 0 28px; }.eyebrow,.tag { margin:0; color:var(--purple); font-size:.82rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.intro h1 { margin:2px 0 8px; font:800 clamp(3rem,12vw,5rem)/.95 'Baloo 2',sans-serif; letter-spacing:-2px; }.intro>p:last-child { margin:0; font-size:1.1rem; font-weight:700; }
.player-panel { margin:0 auto 28px; padding:18px; background:#fff; border:3px solid var(--ink); border-radius:20px; box-shadow:4px 5px 0 var(--ink); }.player-panel p { margin:0 0 12px; font-weight:700; }.player-panel form { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }.player-panel input { min-height:38px; padding:7px 10px; border:2px solid var(--ink); border-radius:9px; font:inherit; }.player-panel button { cursor:pointer; padding:8px 12px; border:2px solid var(--ink); border-radius:9px; background:#9ee6c3; color:var(--ink); font:800 .85rem Nunito,sans-serif; }.leaderboard { margin-top:16px; padding-top:13px; border-top:2px dashed var(--ink); }.leaderboard h2 { margin:0 0 6px; font:800 1.25rem 'Baloo 2',sans-serif; }.leaderboard ol { margin:0; padding-left:24px; font-weight:700; } #player-message { color:#b2002a; }
.round { min-height:305px; }.progress { margin:0 0 8px; text-align:center; color:var(--purple); font-size:.85rem; font-weight:800; }.loading { padding:70px 20px; text-align:center; font-weight:800; }.article { overflow:hidden; background:#fff; border:3px solid var(--ink); border-radius:25px; box-shadow:7px 8px 0 var(--ink); }.article img { display:block; width:100%; height:230px; object-fit:cover; border-bottom:3px solid var(--ink); }.article-content { padding:25px 27px 29px; }.article h2 { margin:5px 0 11px; font:800 clamp(1.6rem,5vw,2.3rem)/1.05 'Baloo 2',sans-serif; letter-spacing:-.7px; }.article-content>p:last-child { margin:0; font-size:1.05rem; font-weight:700; line-height:1.45; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:24px; }.choice,.next { cursor:pointer; font:800 1.05rem Nunito,sans-serif; border:3px solid var(--ink); border-radius:17px; color:var(--ink); box-shadow:4px 5px 0 var(--ink); transition:transform .12s,box-shadow .12s; }.choice:hover,.next:hover { transform:translate(2px,2px); box-shadow:2px 3px 0 var(--ink); }.choice:disabled { opacity:.6; cursor:wait; }.choice { min-height:82px; padding:14px; }.choice span { display:block; font:800 2rem 'Baloo 2',sans-serif; line-height:.8; }.real { background:#9ee6c3; }.fake { background:#ffc0ce; }
.result { margin-top:24px; padding:26px; background:var(--yellow); border:3px solid var(--ink); border-radius:24px; box-shadow:6px 7px 0 var(--ink); text-align:center; }.result h2 { margin:0 0 6px; font:800 2rem 'Baloo 2',sans-serif; }.result p { margin:0 0 20px; font-weight:700; }.next { padding:13px 22px; background:#fff; }.next span { font-size:1.3em; }.source { margin:36px auto 0; max-width:520px; text-align:center; font-size:.8rem; font-weight:700; opacity:.7; }
@media (max-width:500px) { .game-shell { width:min(100% - 24px,760px); padding-top:20px; }.intro { padding:40px 0 24px; }.choices { grid-template-columns:1fr; gap:13px; }.choice { min-height:65px; }.choice span { display:inline; margin-right:7px; }.article-content { padding:22px; } }
