@layer reset,base,components,utilities,extras;@layer reset{*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none;padding:0;margin:0}}@layer base{:root{--bg: #1d1f26;--bg-elev: #222531;--bg-soft: #171923;--text: #e8ecf3;--muted: #a9b2c0;--primary: #7c8cff;--primary-strong: #5b68ff;--ring: color-mix(in srgb, var(--primary) 55%, transparent);--border: rgba(236,240,255,.1);--success: #22c55e;--danger: #ef4444;--warning: #f59e0b;--info: #06b6d4;--radius: 12px;--radius-lg: 16px;--gap: 16px;--gap-lg: 24px;--vh: 1vh;--shadow-1: 0 6px 20px rgba(0,0,0,.28);--shadow-2: 0 14px 40px rgba(0,0,0,.38);--font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;color-scheme:dark light;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;accent-color:var(--primary)}:root[data-theme=light]{--bg: #f6f7fb;--bg-elev: #ffffff;--bg-soft: #f1f5f9;--text: #0b1220;--muted: #475569;--border: rgba(2,6,23,.12);--shadow-1: 0 8px 24px rgba(2,6,23,.06);--shadow-2: 0 16px 36px rgba(2,6,23,.1)}@media (prefers-color-scheme: light){:root{--bg: #f6f7fb;--bg-elev:#ffffff;--bg-soft:#f1f5f9;--text:#0b1220;--muted:#475569;--border:rgba(2,6,23,.12);--shadow-1:0 8px 24px rgba(2,6,23,.06);--shadow-2:0 16px 36px rgba(2,6,23,.1)}}@media (prefers-contrast: more){:root{--border: rgba(148,163,184,.45) }}html{scroll-behavior:smooth}body{min-height:100%;font-family:var(--font);line-height:1.5;color:var(--text);background:radial-gradient(1200px 800px at 10% 0%,color-mix(in srgb,var(--primary) 8%,var(--bg)) 0%,var(--bg) 60%),var(--bg);padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right));padding-block:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-bottom))}img,svg,video,canvas{display:block;max-width:100%;height:auto}a{color:var(--primary);text-decoration:none;font-weight:600}a:hover{color:var(--primary-strong);text-decoration:underline}::selection{background:color-mix(in srgb,var(--primary) 28%,transparent);color:var(--text)}:focus{outline:none}:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:#94a3b840;border-radius:999px}*::-webkit-scrollbar-track{background:transparent}}@layer components{.app{display:grid;grid-template-rows:auto 1fr auto;min-height:100%}.container{width:min(1100px,92vw);margin-inline:auto;padding:24px 0 40px}.header{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:18px 0 10px}.brand{display:flex;align-items:center;gap:12px}.brand .logo{width:40px;height:40px;border-radius:10px;background:conic-gradient(from 210deg at 60% 40%,var(--primary),var(--primary-strong));box-shadow:var(--shadow-1)}.badge{padding:6px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 6%,transparent),transparent)}.card{background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}:where(button,.button){--btn-bg: #24283a;--btn-fg: var(--text);--btn-bd: transparent;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--btn-bd);border-radius:var(--radius);padding:.7em 1.1em;font-size:1rem;font-weight:700;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;transition:transform .06s ease,border-color .2s,background .2s,box-shadow .2s,opacity .2s;will-change:transform,box-shadow}:where(button,.button):hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 10px 28px color-mix(in srgb,var(--primary) 25%,transparent)}:where(button,.button):active{transform:translateY(0)}:where(button,.button):focus-visible{outline:3px solid var(--ring);outline-offset:2px}.button.primary{--btn-bg: var(--primary);--btn-fg:#fff }.button.primary:hover{--btn-bg: var(--primary-strong) }.button.ghost{--btn-bg: transparent;--btn-bd: var(--border) }.button.success{--btn-bg: var(--success);--btn-fg:#06220f }.button.danger{--btn-bg: var(--danger);--btn-fg:#fff }.button.warning{--btn-bg: var(--warning);--btn-fg:#241a05 }:where(button[disabled],.button[disabled],.is-disabled){opacity:.55;pointer-events:none}.main{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--gap-lg);align-items:stretch;container-type:inline-size}@media (max-width:1100px){.main{gap:var(--gap)}}@media (max-width:960px){.main{grid-template-columns:1fr}}@container (max-width: 960px){.main{grid-template-columns:1fr}}.worldmap{position:relative;overflow:hidden;min-height:480px;padding:12px}.worldmap .map-inner{height:100%;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);display:grid;place-items:center;padding:10px}.worldmap canvas,#root canvas{width:100%;max-width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none;display:block}.worldmap svg{width:100%;height:auto;max-height:64vh}.worldmap svg path,.worldmap svg .country{fill:#3b3f52;stroke:#1b1e2a;stroke-width:.6;transition:fill .15s ease,transform .12s ease,filter .15s ease;cursor:pointer}.worldmap svg path:hover,.worldmap svg .country:hover{fill:color-mix(in srgb,var(--primary) 35%,#3b3f52);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--primary) 45%,transparent))}.worldmap .is-correct{fill:color-mix(in srgb,var(--success) 65%,#2e3347)!important}.worldmap .is-wrong{fill:color-mix(in srgb,var(--danger) 65%,#2e3347)!important}.quiz-panel{display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--gap);padding:18px}.quiz-panel .section{background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));border:1px solid var(--border);border-radius:var(--radius);padding:14px}.question{font-size:clamp(18px,2.2vw,22px);font-weight:800}.answers{display:grid;gap:10px;margin-top:6px}.answer{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:#20253a;border-radius:10px;padding:10px 12px;cursor:pointer;transition:transform .06s ease,border-color .2s,background .2s,box-shadow .2s}.answer:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 20%,transparent)}.answer input{accent-color:var(--primary)}.answer.correct{background:color-mix(in srgb,var(--success) 18%,#20253a);border-color:color-mix(in srgb,var(--success) 55%,var(--border))}.answer.wrong{background:color-mix(in srgb,var(--danger) 18%,#20253a);border-color:color-mix(in srgb,var(--danger) 55%,var(--border))}.statusbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.statusbar .pill{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));font-size:12px;color:var(--muted)}.progress{--p: 0%;height:8px;width:100%;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--border);border-radius:999px;overflow:hidden;position:relative}.progress>span{display:block;height:100%;width:var(--p);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--primary) 85%,transparent) 0 12px,transparent 12px 24px),linear-gradient(90deg,var(--primary),var(--primary-strong));transition:width .25s ease;-webkit-mask-image:linear-gradient(90deg,#000000d9,#000);mask-image:linear-gradient(90deg,#000000d9,#000)}@media (prefers-reduced-motion: reduce){.progress>span{background:linear-gradient(90deg,var(--primary),var(--primary-strong))}}}@layer utilities{.center{text-align:center}.muted{color:var(--muted)}.glass{background:linear-gradient(180deg,#ffffff0a,#ffffff05);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}@supports not (backdrop-filter: blur(12px)){.glass{background:var(--bg-elev)}}.pill{border-radius:999px}.hidden{display:none!important}.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}.no-scroll{overflow:hidden}.full-vh{min-height:calc(var(--vh) * 100)}.shadow-inset-1{box-shadow:0 1px #00000059 inset}kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:.85em;padding:.15em .45em;border-radius:6px;border:1px solid var(--border);background:color-mix(in srgb,var(--text) 6%,transparent)}}@layer extras{@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{border-radius:10px;height:1em;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 25%,color-mix(in srgb,var(--text) 14%,transparent) 37%,color-mix(in srgb,var(--text) 6%,transparent) 63%);background-size:200% 100%;animation:shimmer 1.4s infinite linear}@media (prefers-reduced-motion: reduce){.skeleton{animation:none}}.tooltip{position:relative}.tooltip[data-tip]:after{content:attr(data-tip);position:absolute;inset:auto auto 100% 50%;transform:translate(-50%,-8px);background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:.4em .6em;white-space:nowrap;box-shadow:var(--shadow-1);font-size:.85rem;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.tooltip:hover[data-tip]:after{opacity:1;transform:translate(-50%,-12px)}.toast{position:fixed;left:50%;bottom:clamp(12px,3vh,24px);transform:translate(-50%);background:var(--bg-elev);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow-2);display:flex;gap:10px;align-items:center;z-index:60}.achievements{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.achievement{border:1px solid var(--border);border-radius:12px;padding:12px;background:linear-gradient(180deg,var(--bg-elev),var(--bg-soft));display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.achievement .icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--primary) 12%,var(--bg-elev));border:1px solid var(--border);font-size:22px}.achievement .meta{display:grid;gap:4px}.achievement .title{font-weight:800}.achievement .desc{color:var(--muted);font-size:.92rem}.achievement.unlocked{border-color:color-mix(in srgb,var(--success) 55%,var(--border));box-shadow:0 8px 24px color-mix(in srgb,var(--success) 20%,transparent)}}h1,h2,h3{margin:0 0 .6em;line-height:1.2}h1{font-size:clamp(28px,4vw,40px)}h2{font-size:clamp(22px,3vw,28px)}h3{font-size:clamp(18px,2.4vw,22px)}