.countries-index-screen{padding:0 18px calc(18px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;flex-direction:column;display:flex;overflow-y:auto}.countries-index-screen .screen-header{padding-top:calc(24px + env(safe-area-inset-top));opacity:0;transform:translateY(8px)}.countries-index-screen .index-list{opacity:0;flex:none;gap:10px;width:min(620px,100%);margin:0 auto;padding:4px 6px 0;display:grid;transform:translateY(10px)}.countries-index-screen.is-active .screen-header{animation:.2s forwards index-header-in}.countries-index-screen.is-active .index-list{animation:.26s 60ms forwards index-list-in}.countries-index-screen .index-item{gap:6px;display:grid}.countries-index-screen .index-row{border:1px solid var(--border);text-align:left;background:#ffffff05;border-radius:16px;align-items:center;gap:12px;width:100%;padding:10px 12px;display:flex;position:relative}.countries-index-screen .index-row.is-open{border-color:#fff6}.countries-index-screen .index-flag{object-fit:contain;background-color:#0000;border:none;border-radius:0;flex-shrink:0;width:40px;height:28px}.countries-index-screen .index-meta{gap:2px;display:grid}.countries-index-screen .index-name{color:var(--text);font-weight:600}.countries-index-screen .index-capital{color:var(--muted);font-size:.85rem}.countries-index-screen .index-hint{color:var(--muted);pointer-events:none;gap:4px;display:inline-flex;position:absolute;bottom:8px;right:12px}.countries-index-screen .index-hint.is-fading{animation:3s forwards index-hint-fade}.countries-index-screen .index-detail{text-align:left;opacity:0;max-height:0;padding:0 12px;transition:max-height .2s,opacity .2s;overflow:hidden}.countries-index-screen .index-detail.is-open{opacity:1;max-height:160px}.countries-index-screen .index-fact{color:var(--text);font-size:.9rem}.countries-index-screen .index-source{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-size:.75rem;display:inline-block}.countries-index-screen .index-hint-dot{opacity:.2;font-size:.9rem;animation:1.2s ease-in-out infinite index-hint-dot}.countries-index-screen .index-hint-dot.dot-2{animation-delay:.2s}.countries-index-screen .index-hint-dot.dot-3{animation-delay:.4s}@keyframes index-hint-dot{0%,60%,to{opacity:.2}30%{opacity:1}}.screen[data-screen=flags-pin],.screen[data-screen=countries-pin],.screen[data-screen=countries-type],.screen[data-screen=capitals-pin]{gap:0;padding:0}.flags-pin-screen,.countries-pin-screen,.countries-type-screen,.capitals-pin-screen{justify-content:flex-start;position:absolute;inset:0}.screen[data-screen=countries-type]{width:100%;height:100%;position:absolute;inset:0}.map-prompt{justify-items:center;gap:6px;display:grid}.map-shell{flex:1;align-items:center;width:min(980px,100%);margin:0 auto;display:grid}.map-shell.map-fullscreen{z-index:0;width:100%;height:100%;margin:0;position:absolute;inset:0}.flags-pin-screen .map-shell,.countries-pin-screen .map-shell,.countries-type-screen .map-shell,.capitals-pin-screen .map-shell{flex:none;width:min(980px,94vw);height:min(62svh,520px);margin:12px auto 0;position:relative;inset:auto}.flags-pin-screen .map-shell.map-fullscreen,.countries-pin-screen .map-shell.map-fullscreen,.countries-type-screen .map-shell.map-fullscreen,.capitals-pin-screen .map-shell.map-fullscreen{width:100%;height:100%;margin:0;position:absolute;inset:0}.map-surface{aspect-ratio:1000/520;border:1px solid var(--border);background:var(--bg-alt);touch-action:none;cursor:default;overscroll-behavior:none;border-radius:16px;width:100%;position:relative;overflow:hidden}.map-surface .maplibregl-canvas,.map-surface .maplibregl-canvas-container{cursor:default!important}.map-surface .maplibregl-canvas:active{cursor:grabbing!important}.map-shell.map-fullscreen .map-surface{aspect-ratio:auto;border:none;border-radius:0;height:100%}.map-tiles{position:relative}.map-shell.is-africa .map-surface{cursor:default;touch-action:auto;background:0 0;border:none}.map-shell.is-africa{width:100%;height:100%;margin:0;position:absolute;inset:0}.flags-pin-screen .map-surface,.countries-pin-screen .map-surface,.countries-type-screen .map-surface,.capitals-pin-screen .map-surface{aspect-ratio:auto;border:1px solid var(--border);border-radius:16px;width:100%;height:100%}.map-surface:active{cursor:grabbing}.map-svg{will-change:transform;width:100%;height:100%;display:block;overflow:visible}.map-country{fill:#151515;stroke:#ffffff14;stroke-width:.6px;transition:fill var(--transition),stroke var(--transition)}.map-country.is-interactive{cursor:pointer}@media (hover:hover) and (pointer:fine){.map-country.is-interactive:hover{fill:#222}}.map-country.is-active{fill:#2ecc7173;stroke:#2ecc71cc}.map-country.is-correct{fill:#2ecc71e6;stroke:#2ecc71}.map-country.is-wrong{fill:#e74c3ce6;stroke:#e74c3c}.map-controls{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));z-index:2;gap:6px;display:grid;position:absolute}.map-btn{border:1px solid var(--border);color:var(--text);background:#0a0a0a99;border-radius:10px;min-width:44px;padding:8px 10px;font-size:.85rem}.map-btn:active{transform:translateY(1px)}.flags-pin-screen .quiz-header,.countries-pin-screen .quiz-header,.countries-type-screen .quiz-header,.capitals-pin-screen .quiz-header,.flags-pin-screen .map-prompt,.countries-pin-screen .map-prompt,.countries-type-screen .map-prompt,.capitals-pin-screen .map-prompt,.flags-pin-screen .status,.countries-pin-screen .status,.countries-type-screen .status,.capitals-pin-screen .status{z-index:2;padding:calc(18px + env(safe-area-inset-top))calc(18px + env(safe-area-inset-right))18px calc(18px + env(safe-area-inset-left));margin:0;position:relative}.capitals-pin-screen .map-distance{color:var(--muted);font-size:.9rem}.flags-pin-screen .quiz-header,.countries-pin-screen .quiz-header,.capitals-pin-screen .quiz-header{justify-content:flex-start}.flags-pin-screen .progress,.countries-pin-screen .progress,.capitals-pin-screen .progress{text-align:left;width:100%;max-width:none;display:block}.flags-pin-screen .progress-stats,.countries-pin-screen .progress-stats,.capitals-pin-screen .progress-stats{color:var(--muted);position:absolute;top:50%;right:0;transform:translateY(-50%)}.flags-pin-screen .progress-stats .stat-good,.flags-pin-screen .progress-stats .stat-bad,.countries-pin-screen .progress-stats .stat-good,.countries-pin-screen .progress-stats .stat-bad,.capitals-pin-screen .progress-stats .stat-good,.capitals-pin-screen .progress-stats .stat-bad{color:var(--muted)}.flags-pin-screen .map-prompt,.countries-pin-screen .map-prompt,.capitals-pin-screen .map-prompt{top:calc(18px + env(safe-area-inset-top));text-align:center;width:min(520px,90vw);padding:0;position:absolute;left:50%;transform:translate(-50%)}.capitals-pin-screen .capitals-pin-distance{z-index:2;letter-spacing:.12em;text-transform:uppercase;color:#fff;pointer-events:none;font-size:1.4rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.capitals-pin-screen .capitals-pin-next-hint{left:50%;bottom:calc(60px + env(safe-area-inset-bottom));z-index:2;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);pointer-events:none;font-size:.78rem;position:absolute;transform:translate(-50%)}.capitals-pin-screen .capitals-pin-panel{left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:2;justify-content:center;align-items:center;padding:8px 12px;display:flex;position:absolute;transform:translate(-50%)}.capitals-pin-screen .capitals-pin-panel .primary{opacity:0;color:#0000;background:0 0;border-color:#0000;min-width:110px}.capitals-pin-screen .capitals-pin-hint{color:#fff;letter-spacing:.2em;text-transform:uppercase;pointer-events:none;opacity:1;justify-content:center;align-items:center;padding:10px 18px;font-size:.8rem;display:flex;position:absolute;inset:0;transform:none}@keyframes pin-hint-reveal{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}.countries-type-screen .type-area{z-index:2;width:fit-content;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.countries-type-screen .type-input{background:0 0;border-color:#ffffff59}.countries-type-screen .type-input.is-minimal{box-shadow:none;background:0 0;border-color:#0000}.countries-type-screen .type-input.is-minimal::placeholder{color:#0000}
