:root{--bg: #eaf3ff;--bg-soft: #f3f7ff;--card: #ffffff;--card-2: #f4f8ff;--line: #dde7fb;--line-2: #c9d6f5;--ink: #182a4e;--ink-soft: #44557a;--ink-dim: #8493b4;--brand: #3b5bff;--brand-ink: #2540cc;--brand-2: #6b8aff;--good: #1fc16b;--good-ink: #159b53;--bad: #ff5a5f;--bad-ink: #d83b46;--sun: #ffc83d;--coral: #ff7a59;--grape: #8b5cf6;--radius: 18px;--shadow: 0 14px 34px rgba(40, 70, 160, .14);--maxw: 1080px;--font: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font);color:var(--ink);background:radial-gradient(900px 520px at 12% -8%,rgba(255,200,61,.22),transparent 60%),radial-gradient(820px 520px at 92% 2%,rgba(255,122,89,.18),transparent 58%),radial-gradient(900px 600px at 70% 100%,rgba(139,92,246,.15),transparent 60%),radial-gradient(700px 500px at 0% 70%,rgba(31,193,107,.14),transparent 58%),var(--bg);background-attachment:fixed;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--brand);text-decoration:none;font-weight:600}a:hover{text-decoration:underline}img{max-width:100%;display:block}h1,h2,h3{line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}h1{font-size:clamp(2.1rem,6vw,3.6rem);font-weight:900}h2{font-size:clamp(1.5rem,3.4vw,2.2rem);margin-top:1.2em}p{margin:0 0 1em;color:var(--ink-soft)}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}.muted{color:var(--ink-dim)}.center{text-align:center}.site-header{border-bottom:2px solid var(--line);background:#ffffffd1;backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}.site-header .wrap{display:flex;align-items:center;gap:18px;height:64px}.logo{font-weight:900;font-size:1.3rem;color:var(--ink);display:flex;align-items:center;gap:7px;letter-spacing:-.03em;white-space:nowrap}.logo:hover{text-decoration:none}.logo .dot{color:var(--brand)}.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}.nav a{color:var(--ink-soft);padding:8px 13px;border-radius:999px;font-weight:700;font-size:.96rem}.nav a:hover{color:var(--brand);background:var(--card-2);text-decoration:none}.nav a[aria-current=page]{color:#fff;background:var(--brand)}.hero{padding:50px 0 12px;text-align:center}.hero h1{margin-bottom:.3em}.hero h1 .hl{background:linear-gradient(180deg,transparent 62%,var(--sun) 62%);padding:0 .08em;border-radius:4px}.hero p.lede{font-size:1.2rem;color:var(--ink-soft);max-width:660px;margin:0 auto 1.2em}.pill-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}.pill{font-size:.85rem;font-weight:800;padding:6px 13px;border-radius:999px;background:#fff;border:2px solid var(--line-2);color:var(--ink-soft)}.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:800;cursor:pointer;border:2px solid var(--line-2);background:#fff;color:var(--ink);padding:12px 20px;border-radius:14px;box-shadow:0 4px 0 var(--line-2);transition:transform .08s,box-shadow .08s,filter .12s}.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line-2)}.btn.primary{background:var(--brand);border-color:var(--brand-ink);color:#fff;box-shadow:0 5px 0 var(--brand-ink)}.btn.primary:hover{filter:brightness(1.05)}.btn.primary:active{box-shadow:0 1px 0 var(--brand-ink)}.btn.ghost{background:#fff}.btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.grid{display:grid;gap:18px}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}@media(max-width:820px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}.card{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 8px 22px #2846a014}.card h3{margin-bottom:.3em}.mode-card{display:block;color:inherit;transition:transform .14s,box-shadow .14s,border-color .14s;position:relative}.mode-card:hover{text-decoration:none;transform:translateY(-4px) rotate(-.6deg);border-color:var(--brand);box-shadow:var(--shadow)}.mode-card .emoji{font-size:2.4rem;line-height:1;margin-bottom:6px}.mode-card:nth-child(2):hover{border-color:var(--coral);transform:translateY(-4px) rotate(.6deg)}.mode-card:nth-child(3):hover{border-color:var(--grape)}.mode-card:nth-child(4):hover{border-color:var(--sun)}.section{padding:34px 0}.section h2{text-align:center}.section .sub{text-align:center;color:var(--ink-dim);max-width:620px;margin:-.3em auto 1.5em;font-weight:600}.game{background:var(--card);border:2px solid var(--line-2);border-radius:24px;padding:24px;max-width:580px;margin:0 auto;box-shadow:0 18px 40px #2846a026}.game-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;font-weight:800}.gn-counter{color:var(--ink)}.game-meta{color:var(--brand);font-size:.95rem;font-weight:800}.progress{height:10px;background:var(--bg);border-radius:999px;overflow:hidden;margin-bottom:20px;border:1px solid var(--line)}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--coral));width:0;transition:width .3s;border-radius:999px}.prompt{text-align:center;margin-bottom:20px}.flag-stage{width:100%;max-width:330px;margin:0 auto;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 10px 26px #2846a038;background:#f0f4ff}.flag-stage img{width:100%;height:100%;object-fit:cover}.shape-stage{width:100%;max-width:360px;margin:0 auto;aspect-ratio:4/3;display:grid;place-items:center}.shape-stage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(59,91,255,.25))}.capital-stage{font-size:clamp(1.7rem,6.5vw,2.6rem);font-weight:900;letter-spacing:-.02em;color:var(--ink)}.capital-stage small{display:block;font-size:.92rem;font-weight:700;color:var(--ink-dim);letter-spacing:0;margin-bottom:6px;text-transform:uppercase}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:460px){.options{grid-template-columns:1fr}}.opt{font:inherit;font-weight:800;text-align:center;cursor:pointer;padding:15px 16px;border-radius:14px;border:2px solid var(--line-2);background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line-2);transition:transform .07s,box-shadow .07s,background .1s,border-color .1s}.opt:hover:not(:disabled){border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--line-2)}.opt:disabled{cursor:default}.opt.correct{background:var(--good);border-color:var(--good-ink);color:#fff;box-shadow:0 4px 0 var(--good-ink);animation:pop .25s}.opt.wrong{background:var(--bad);border-color:var(--bad-ink);color:#fff;box-shadow:0 4px 0 var(--bad-ink);animation:shake .3s}.opt.dim{opacity:.5}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.result{text-align:center;padding:6px 0}.result .score{font-size:3.4rem;font-weight:900;letter-spacing:-.03em;color:var(--brand)}.result .score small{font-size:1.2rem;color:var(--ink-dim);font-weight:800}.emoji-grid{font-size:1.7rem;letter-spacing:4px;margin:14px 0;line-height:1.4;word-break:break-word}.result-note{color:var(--ink-soft);margin-bottom:16px;font-weight:700;font-size:1.1rem}.share{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px}.share a,.share button{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;border:2px solid var(--line-2);background:#fff;color:var(--ink-soft);cursor:pointer;box-shadow:0 4px 0 var(--line-2);transition:transform .08s,box-shadow .08s,color .12s}.share a:hover,.share button:hover{color:var(--brand);transform:translateY(-1px);text-decoration:none}.share a:active,.share button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line-2)}.share svg{width:19px;height:19px;fill:currentColor}.copied{font-size:.9rem;color:var(--good-ink);font-weight:800}.tcard{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 8px 22px #2846a014}.tcard .stars{color:var(--sun);letter-spacing:2px;font-size:1rem}.tcard .quote{color:var(--ink);margin:8px 0 14px;font-size:1rem;font-weight:500}.tcard .who{display:flex;align-items:center;gap:10px}.tcard .who img{width:40px;height:40px;border-radius:50%;border:2px solid var(--line-2);background:#fff}.tcard .who b{font-size:.95rem}.tcard .who span{display:block;font-size:.82rem;color:var(--ink-dim)}.prose{max-width:760px;margin:0 auto}.prose h2{text-align:left}.prose p{font-size:1.04rem}.prose ul{color:var(--ink-soft);padding-left:1.2em}.prose li{margin:.35em 0}.faq dt{font-weight:800;margin-top:1em;color:var(--ink)}.faq dd{margin:.2em 0 0;color:var(--ink-soft)}.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{font-size:.95rem;font-weight:800;padding:9px 16px;border-radius:999px;background:#fff;border:2px solid var(--line-2);color:var(--ink-soft);box-shadow:0 3px 0 var(--line-2);transition:transform .08s,color .12s,border-color .12s}.chip:hover{color:var(--brand);border-color:var(--brand);text-decoration:none;transform:translateY(-1px)}.site-footer{border-top:2px solid var(--line);margin-top:44px;padding:32px 0;color:var(--ink-dim);font-size:.92rem;background:#ffffff80}.site-footer .wrap{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}.site-footer a{color:var(--ink-soft)}.site-footer .cols{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}.gtile{background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px;text-align:center;box-shadow:0 4px 12px #2846a00f}.gtile .flagimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;border:1px solid var(--line);background:#f0f4ff}.gtile .shapeimg{width:100%;aspect-ratio:4/3;object-fit:contain}.gtile b{display:block;font-size:.88rem;margin-top:7px;color:var(--ink)}.gtile span{display:block;font-size:.78rem;color:var(--ink-dim)}@media(max-width:600px){.site-header .wrap{height:auto;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;gap:8px}.nav{width:100%;margin-left:0;justify-content:center;gap:2px}.nav a{padding:6px 10px;font-size:.9rem}.hero{padding-top:34px}}.hide{display:none!important}