:root{--bg:#0f172a;--bg-card:#1e293b;--bg-card-hover:#27364d;--border:#334155;--text:#e2e8f0;--text-dim:#94a3b8;--accent:#38bdf8;--accent-2:#a78bfa;--good:#34d399;--bad:#f87171;--gold:#fbbf24;--radius:14px;--shadow:0 4px 16px #00000059}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--text);min-height:100%;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#root{max-width:560px;padding:env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px);flex-direction:column;min-height:100vh;margin:0 auto;display:flex}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none}a{color:var(--accent);text-decoration:none}.app-header{align-items:center;gap:12px;padding:14px 0 10px;display:flex}.app-header h1{letter-spacing:.3px;flex:1;margin:0;font-size:20px}.app-header .logo{font-size:24px}.back-btn{color:var(--text-dim);border-radius:8px;padding:6px 10px;font-size:15px}.back-btn:hover{background:var(--bg-card)}.daily-banner{text-align:left;border-radius:var(--radius);width:100%;box-shadow:var(--shadow);background:linear-gradient(135deg,#1d4ed8,#7c3aed);margin-bottom:16px;padding:16px;display:block}.daily-banner .title{font-size:17px;font-weight:700}.daily-banner .sub{color:#dbeafe;margin-top:4px;font-size:13px}.daily-banner.trek{background:linear-gradient(135deg,#047857,#0e7490);padding:12px 16px}.game-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.game-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:left;flex-direction:column;gap:6px;padding:16px 14px;transition:background .15s;display:flex}.game-card:hover{background:var(--bg-card-hover)}.game-card .emoji{font-size:26px}.game-card .name{font-size:15px;font-weight:650}.game-card .desc{color:var(--text-dim);font-size:12px;line-height:1.35}.menu-footer{color:var(--text-dim);justify-content:center;gap:18px;margin-top:18px;font-size:14px;display:flex}.menu-footer button{color:var(--text-dim);padding:6px 8px}.menu-footer button:hover{color:var(--text)}.region-chips{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.region-chips button{color:var(--text-dim);background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:12px}.region-chips button.active{background:var(--accent);color:#082f49;border-color:var(--accent);font-weight:650}.region-chips.chips-gold button.active{background:var(--gold);color:#451a03;border-color:var(--gold)}.quiz-progress{color:var(--text-dim);justify-content:space-between;align-items:center;margin-bottom:10px;font-size:14px;display:flex}.quiz-progress .streak{color:var(--gold)}.prompt-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);min-height:180px;box-shadow:var(--shadow);flex-direction:column;justify-content:center;align-items:center;gap:8px;margin-bottom:14px;padding:18px;display:flex}.prompt-box .flag-img{border-radius:6px;max-width:100%;max-height:170px;box-shadow:0 2px 10px #00000080}.prompt-box .question-text{text-align:center;font-size:17px;line-height:1.4}.prompt-box .big-name{text-align:center;font-size:24px;font-weight:700}.outline-shape{max-height:220px}.prompt-caption{color:var(--text-dim);font-size:15px}.outline-shape path{fill:var(--accent);opacity:.9}.option-list{flex-direction:column;gap:10px;display:flex}.option-btn{background:var(--bg-card);border:1px solid var(--border);text-align:left;border-radius:12px;padding:14px 16px;font-size:16px;transition:background .12s,border-color .12s}.option-btn:hover:not(:disabled){background:var(--bg-card-hover)}.option-btn:disabled{cursor:default}.option-btn.correct{border-color:var(--good);background:#34d39926}.option-btn.wrong{border-color:var(--bad);background:#f8717126}.hl-cards{flex-direction:column;gap:12px;display:flex}.hl-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);padding:18px}.hl-flag{object-fit:cover;border-radius:6px;width:64px;height:44px;margin-bottom:8px;box-shadow:0 3px 12px #00000073}.hl-card .country{font-size:20px;font-weight:700}.hl-card .value{color:var(--accent);margin-top:6px;font-size:26px;font-weight:700}.hl-card .label{color:var(--text-dim);margin-top:2px;font-size:13px}.hl-cards{opacity:1;transition:opacity .25s}.hl-cards.entering{opacity:0;transition:none}.hl-stat-chip{background:var(--bg-card);border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:650}.hl-card{transition:border-color .2s,box-shadow .2s}.hl-card.reveal-good{border-color:var(--good);box-shadow:0 0 18px #34d39940}.hl-card.reveal-bad{border-color:var(--bad);box-shadow:0 0 18px #f8717140}.hl-verdict{min-height:20px;margin-top:8px;font-size:14px}.hl-verdict .good{color:var(--good);font-weight:700}.hl-verdict .bad{color:var(--bad);font-weight:700}.hl-verdict .dim{color:var(--text-dim);font-size:13px}.hl-trail{scrollbar-width:thin;gap:6px;margin-top:4px;padding:12px 4px 4px;display:flex;overflow-x:auto}.hl-trail img{object-fit:cover;opacity:.6;border-radius:4px;flex:none;width:30px;height:21px;box-shadow:0 2px 6px #0006}.hl-trail img.latest{opacity:1;outline:2px solid var(--gold);outline-offset:1px}.hl-btn.chosen-good{outline:2px solid var(--good)}.hl-btn.chosen-bad{outline:2px solid var(--bad)}.hl-buttons{justify-content:center;gap:10px;margin:4px 0;display:flex}.hl-btn{border:1px solid var(--border);border-radius:12px;flex:1;padding:14px;font-size:17px;font-weight:650}.hl-btn.higher{color:var(--good);background:#34d39926}.hl-btn.lower{color:var(--bad);background:#f8717126}.map-wrap{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:#0b1220;margin-bottom:12px;overflow:hidden}.world-map{touch-action:none;-webkit-user-select:none;user-select:none;width:100%;display:block}.map-land{fill:#2c3d59;stroke:none;pointer-events:none}.map-country{fill:#3a506e;stroke:#0a1120;stroke-width:.7px}.map-country:hover{fill:#4d6789}@media (width>=900px){.map-wrap{width:min(92vw,1360px);margin-left:calc(264px - min(92vw,1360px)/2)}.map-target{font-size:24px}}.map-country.correct{fill:var(--good)}.map-country.wrong{fill:var(--bad)}.map-country.hint{fill:var(--gold)}.map-label{fill:#fff;paint-order:stroke fill;stroke:#0b1220;stroke-width:2.2px;stroke-linejoin:round;pointer-events:none;-webkit-user-select:none;user-select:none;dominant-baseline:middle;font-weight:700}.trek-legend{color:var(--text-dim);flex-wrap:wrap;justify-content:center;gap:12px;margin:10px 0 4px;font-size:12px;display:flex}.trek-legend .swatch{align-items:center;gap:5px;display:inline-flex}.trek-legend .dot{border-radius:3px;width:10px;height:10px;display:inline-block}.map-country.start{fill:var(--accent)}.map-country.end{fill:var(--accent-2)}.trek-start{color:var(--accent);font-weight:700}.trek-end{color:var(--accent-2);font-weight:700}.option-btn.kb-focus{border-color:var(--accent);background:var(--bg-card-hover)}.world-map.no-borders .map-country{stroke:none}.world-map.no-borders .map-country:hover:not(.correct):not(.wrong):not(.hint):not(.endpoint){fill:#2d3f59}.trek-input input{width:100%;font:inherit;color:var(--text);background:var(--bg-card);border:1px solid var(--border);border-radius:12px;outline:none;padding:13px 16px}.trek-input input:focus{border-color:var(--accent)}.trek-suggestions{flex-direction:column;gap:6px;margin-top:8px;display:flex}.trek-suggestions .option-btn{padding:10px 14px}.map-target{text-align:center;margin-bottom:10px;font-size:18px}.map-target b{color:var(--accent)}.results-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);margin-top:10vh;padding:24px}.results-card .headline{font-size:22px;font-weight:750}.results-card .score{color:var(--accent);margin:10px 0;font-size:42px;font-weight:800}.results-card .detail{color:var(--text-dim);margin-bottom:18px}.results-card .record{color:var(--gold);margin-bottom:12px;font-weight:650}.btn-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.btn{background:var(--bg-card-hover);border:1px solid var(--border);border-radius:12px;padding:12px 20px;font-size:15px;font-weight:650}.btn.primary{background:var(--accent);color:#082f49;border-color:var(--accent)}.btn.gold{color:var(--gold);border-color:var(--gold);background:#fbbf2426}.feedback-bar{text-align:center;min-height:26px;margin-top:12px;font-size:17px;font-weight:700}@keyframes shake-kf{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.shake{animation:.5s cubic-bezier(.36,.07,.19,.97) shake-kf}@keyframes badge-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.prompt-box{position:relative}.fx-badge{pointer-events:none;border-radius:var(--radius);justify-content:center;align-items:center;font-size:64px;font-weight:800;display:flex;position:absolute;inset:0}.fx-badge:before{content:"";border-radius:50%;width:110px;height:110px;animation:.35s ease-out badge-pop;position:absolute}.fx-badge{color:#fff;animation:.35s ease-out badge-pop}.fx-badge span{z-index:1;position:relative}.fx-badge.good:before{background:#34d399e6}.fx-badge.bad:before{background:#f87171e6}.fact-line{text-align:center;color:var(--text-dim);margin-top:8px;padding:0 8px;font-size:13px;line-height:1.5;animation:.4s ease-out fact-in}@keyframes fact-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.feedback-bar .good{color:var(--good)}.feedback-bar .bad{color:var(--bad)}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;padding:16px}.panel h3{color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;margin:0 0 10px;font-size:15px}.stat-row{border-bottom:1px solid #33415580;justify-content:space-between;padding:7px 0;font-size:15px;display:flex}.stat-row:last-child{border-bottom:none}.stat-row .value{color:var(--accent);font-weight:650}.setting-row{justify-content:space-between;align-items:center;padding:10px 0;font-size:15px;display:flex}.seg{background:var(--bg);border-radius:10px;gap:3px;padding:3px;display:flex}.seg button{color:var(--text-dim);border-radius:8px;padding:7px 12px;font-size:13px}.seg button.active{background:var(--accent);color:#082f49;font-weight:650}.about-text{color:var(--text-dim);font-size:14px;line-height:1.6}.explore-list{flex-direction:column;gap:6px;margin-top:12px;display:flex}.explore-row{background:var(--bg-card);border:1px solid var(--border);text-align:left;border-radius:10px;align-items:center;gap:12px;padding:9px 12px;display:flex}.explore-row:hover{background:var(--bg-card-hover)}.explore-row img{object-fit:cover;border-radius:3px;width:34px;height:24px}.explore-row .name{flex:1;font-size:14px;font-weight:600}.explore-row .capital{color:var(--text-dim);font-size:12px}.badge-wall{grid-template-columns:1fr 1fr;gap:8px;display:grid}.badge{background:var(--bg);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:2px;padding:10px;display:flex}.badge .emoji{font-size:22px}.badge .name{font-size:13px;font-weight:650}.badge .desc{color:var(--text-dim);font-size:11px}.badge.locked{opacity:.35;filter:grayscale()}.achievement-toast{left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);background:var(--bg-card);border:1px solid var(--gold);box-shadow:var(--shadow);z-index:50;border-radius:14px;align-items:center;gap:12px;max-width:90vw;padding:12px 18px;animation:.35s ease-out toast-in;display:flex;position:fixed;transform:translate(-50%)}.achievement-toast .emoji{font-size:28px}.achievement-toast b{color:var(--gold);font-size:14px}.achievement-toast .desc{color:var(--text-dim);font-size:12px}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.ad-slot{min-height:60px;margin-top:auto;padding-top:14px}.ad-placeholder{border:1px dashed var(--border);color:var(--text-dim);border-radius:10px;justify-content:center;align-items:center;font-size:12px;display:flex}.pro-feature{align-items:baseline;gap:10px;padding:6px 0;font-size:15px;display:flex}.pro-feature .tick{color:var(--good)}@media (width>=700px){.game-grid{grid-template-columns:1fr 1fr 1fr}}