@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Jua&display=swap');

:root { --ink:#292c3b; --cream:#f8f3e7; --coral:#ff6b57; --yellow:#ffd34e; --green:#2d9b78; --line:#ded7c7; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 20% 10%,#fff9dc 0,transparent 30%),radial-gradient(circle at 90% 85%,#dcefe7 0,transparent 28%),var(--cream); font-family:'Gowun Dodum',sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.25; background-image:radial-gradient(#886 0.6px,transparent .7px); background-size:10px 10px; }
button,input { font:inherit; }
button { cursor:pointer; }
.game-shell { width:min(100%,760px); min-height:100vh; margin:auto; padding:28px 24px; display:flex; align-items:center; }
.screen { width:100%; animation:pop .4s ease; }
.hidden { display:none!important; }
.start-screen,.result-screen { text-align:center; }
.brand { position:absolute; top:28px; font-family:'Jua',sans-serif; font-size:20px; transform:rotate(-2deg); }
.brand span { color:var(--coral); }
.hero-art { display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:34px; }
.hero-art span { display:grid; place-items:center; width:108px; height:108px; font-size:62px; border:3px solid var(--ink); border-radius:33% 67% 55% 45%; background:#fff; box-shadow:7px 8px 0 var(--ink); transform:rotate(-7deg); }
.hero-art span:nth-child(2) { width:132px;height:132px;background:#cfe5ff;transform:rotate(4deg);z-index:2; }
.hero-art span:nth-child(3) { background:#ffe9c2;transform:rotate(10deg); }
.hero-art.compact { margin:36px 0 18px; }.hero-art.compact span { width:74px;height:74px;font-size:42px;box-shadow:5px 6px 0 var(--ink); }.hero-art.compact span:nth-child(2) { width:88px;height:88px; }
.eyebrow { display:inline-block; margin:0 0 10px; padding:7px 14px; border-radius:99px; color:#705b00; background:var(--yellow); font-weight:bold; font-size:14px; letter-spacing:.04em; }
h1,h2 { margin:0; font-family:'Jua',sans-serif; letter-spacing:-.02em; }
h1 { font-size:clamp(42px,9vw,68px); line-height:1.08; }
.intro { color:#676875; font-size:17px; line-height:1.8; }
.primary-btn { margin-top:18px; padding:17px 28px; min-width:220px; border:2px solid var(--ink); border-radius:16px; color:#fff; background:var(--coral); box-shadow:5px 6px 0 var(--ink); font-weight:bold; font-size:18px; transition:.15s; }
.primary-btn:hover { transform:translate(-1px,-2px); box-shadow:7px 8px 0 var(--ink); }
.primary-btn:active { transform:translate(4px,5px); box-shadow:1px 1px 0 var(--ink); }
.primary-btn span { margin-left:12px; }
.primary-btn:disabled { cursor:not-allowed;opacity:.55;transform:none;box-shadow:5px 6px 0 var(--ink); }
.category-list { display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:22px auto 6px;max-width:680px; }
.category-card { min-height:108px;padding:10px 6px;border:2px solid var(--ink);border-radius:17px;background:#fff;box-shadow:3px 4px 0 var(--ink);font-weight:bold;transition:.15s; }
.category-card .category-icon { display:block;margin-bottom:4px;font-size:30px; }.category-card strong { display:block;font-size:14px;line-height:1.25; }.category-card small { display:inline-block;margin-top:7px;padding:3px 7px;border-radius:99px;background:#f1eadc;color:#716c61;font-size:11px;line-height:1; }.category-card:hover,.category-card:focus-visible { transform:translateY(-2px);outline:none;box-shadow:4px 6px 0 var(--ink); }.category-card.selected { background:var(--yellow);transform:translateY(-2px);box-shadow:4px 6px 0 var(--ink); }.category-card.selected small { background:#fff8cf;color:#665817; }
.secondary-btn { display:block;margin:14px auto 0;padding:10px 18px;border:0;background:transparent;color:#686976;text-decoration:underline;text-underline-offset:4px; }
.site-footer { margin-top:24px;font-size:13px; }.site-footer a { color:#77746c;text-underline-offset:4px; }
.ad-section { margin:34px auto 0;max-width:680px;text-align:left; }.ad-disclosure { margin:0 0 8px;color:#77746c;font-size:11px;line-height:1.5;text-align:center; }.ad-scroll { max-width:100%;overflow-x:auto;border-radius:10px; }.ad-slot { width:680px;height:140px;margin:auto;background:#fff; }
.quiz-screen header { display:flex; align-items:center; gap:15px; margin-bottom:34px; }
.icon-btn { flex:0 0 46px;height:46px;border:2px solid var(--ink);border-radius:14px;background:white;font-size:23px; }
.progress-wrap { flex:1; }
.progress-meta { display:flex;justify-content:space-between;margin-bottom:7px;font-size:14px; }
.progress-meta span { color:var(--coral);font-weight:bold; }
.progress { height:10px;border:2px solid var(--ink);border-radius:99px;background:white;overflow:hidden; }
.progress div { width:10%;height:100%;background:var(--yellow);transition:width .35s ease; }
.question-copy { text-align:center;margin-bottom:18px; }
.question-copy h2 { margin-top:9px;font-size:30px; }
.category { padding:5px 12px;border-radius:99px;color:white;background:var(--green);font-size:13px;font-weight:bold; }
.picture-card { position:relative;height:330px;padding:18px;border:3px solid var(--ink);border-radius:30px 22px 34px 24px;background:white;box-shadow:8px 9px 0 var(--ink);overflow:hidden; }
.picture-card::before,.picture-card::after { content:"✦";position:absolute;color:var(--yellow);font-size:30px;z-index:2; }
.picture-card::before { left:20px;top:15px; }.picture-card::after { right:20px;bottom:15px; }
#picture { width:100%;height:100%;display:grid;place-items:center;font-size:164px;background:linear-gradient(145deg,#e8f4ec,#fff5d8);border-radius:18px; }
#picture span { filter:drop-shadow(7px 10px 0 rgba(41,44,59,.13));animation:float 2.7s ease-in-out infinite; }
.answer-mark { position:absolute;inset:0;z-index:5;display:grid;place-items:center;font:220px/.8 'Jua',sans-serif;text-shadow:0 5px 0 #fff,5px 0 0 #fff,0 -5px 0 #fff,-5px 0 0 #fff;animation:mark-pop .28s cubic-bezier(.2,1.5,.5,1);pointer-events:none; }
.answer-mark.mark-correct { color:#19a776; }.answer-mark.mark-wrong { color:#ef4c3c; }
.landmark-name { position:absolute;bottom:34px;left:50%;transform:translateX(-50%);max-width:80%;padding:7px 14px;border:2px solid var(--ink);border-radius:999px;background:#fff;font:18px/1.2 'Jua',sans-serif;white-space:nowrap;box-shadow:3px 4px 0 var(--ink); }
.capital-name { padding:22px 28px;border:3px solid var(--ink);border-radius:20px;background:#fff;font:clamp(36px,8vw,64px)/1.15 'Jua',sans-serif;letter-spacing:-.03em;text-align:center;box-shadow:6px 7px 0 var(--ink); }
.choice-list { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px; }
.choice-btn { min-height:58px;padding:10px 8px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font-weight:bold;font-size:17px;box-shadow:3px 4px 0 var(--ink);transition:.15s; }
.choice-btn span { display:inline-grid;place-items:center;width:25px;height:25px;margin-right:7px;border-radius:50%;background:#f1eadc;font-size:13px; }
.choice-btn:hover:not(:disabled),.choice-btn:focus-visible { transform:translateY(-2px);box-shadow:4px 6px 0 var(--ink);outline:none;background:#fff8cf; }
.choice-btn.is-correct { color:#126548;background:#bdebdc;box-shadow:3px 4px 0 #126548; }
.choice-btn.is-wrong { color:#a72e21;background:#ffd1ca;box-shadow:3px 4px 0 #a72e21; }
.choice-btn:disabled { cursor:default;opacity:.7; }.choice-btn.is-correct:disabled,.choice-btn.is-wrong:disabled { opacity:1; }
.hint-btn { display:block;margin:14px auto 0;border:0;background:transparent;color:#8a7020;text-decoration:underline;text-underline-offset:4px; }
.hint-box { margin:16px 0 -8px;padding:11px 16px;text-align:center;border:1px dashed #b79d3a;border-radius:12px;background:#fff8cf;color:#665817; }
.feedback { min-height:28px;margin:12px 0 0;text-align:center;font-weight:bold; }
.feedback.correct { color:var(--green); }.feedback.wrong { color:var(--coral); }
.result-badge { width:140px;height:140px;display:grid;place-items:center;margin:0 auto 24px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:72px;box-shadow:8px 8px 0 var(--ink); }
.result-screen h2 { font-size:44px; }
.score-card { margin:20px auto 10px; }.score-card strong { font:96px/1 'Jua',sans-serif;color:var(--coral); }.score-card span { font-size:25px;font-weight:bold; }
.result-screen>p:not(.eyebrow) { color:#686976; }
.answer-summary { display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:22px auto;max-width:500px; }
.answer-summary span { width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:white; }
.answer-summary .ok { background:#bdebdc; }.answer-summary .no { background:#ffd1ca; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@keyframes pop { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none} }
@keyframes float { 50%{transform:translateY(-8px) rotate(2deg)} }
@keyframes mark-pop { from{opacity:0;transform:scale(.45) rotate(-9deg)}to{opacity:.92;transform:scale(1) rotate(0)} }
@media(max-width:520px){.game-shell{padding:20px 17px;align-items:flex-start}.brand{top:18px}.hero-art.compact{margin-top:34px}.hero-art.compact span{width:54px;height:54px;font-size:31px}.hero-art.compact span:nth-child(2){width:64px;height:64px}.start-screen h1{font-size:38px}.category-list{grid-template-columns:repeat(2,1fr);gap:9px}.category-card{min-height:92px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;align-content:center}.category-card .category-icon{grid-row:1/3;display:inline;margin:0;font-size:27px}.category-card strong{font-size:13px}.category-card small{justify-self:start;margin-top:5px}.picture-card{height:270px}#picture{font-size:135px}.question-copy h2{font-size:26px}.choice-list{grid-template-columns:1fr;gap:9px}.choice-btn{min-height:50px}}