:root{--space-0: #0b1026;--space-1: #141a3a;--space-2: #1e2450;--space-glow: #2b1a5e;--surface: #ffffff;--surface-soft: #f4f1ff;--ink: #1a1633;--ink-soft: #4a4470;--sun: #ffd23f;--mars: #ff6b4a;--earth: #3aa0ff;--grape: #a06bff;--mint: #2ec4b6;--bubble: #ff7eb6;--star: #fff7d6;--c-asia: #ffcf6b;--c-europe: #7ee0c9;--c-africa: #ffa45c;--c-namerica: #8fb3ff;--c-samerica: #ff9ec7;--c-oceania: #b39ddb;--c-antarctica: #dbe9ff;--font: ui-rounded, "SF Pro Rounded", "Baloo 2", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;--text-label: clamp(1rem, 1.4vw + .7rem, 1.4rem);--text-body: clamp(1.15rem, 1.6vw + .9rem, 1.9rem);--text-title: clamp(2rem, 4vw + 1rem, 3.6rem);--radius-lg: 1.75rem;--radius-pill: 999px;--tap-min: 4.75rem;--gap-1: .5rem;--gap-2: 1rem;--gap-3: 1.75rem;--gap-4: 2.75rem;--shadow-pop: 0 .5rem 0 rgba(0, 0, 0, .18), 0 1rem 2rem rgba(0, 0, 0, .22);--shadow-soft: 0 .75rem 1.75rem rgba(10, 6, 40, .28)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);color:var(--ink);background:radial-gradient(120% 90% at 50% 0%,var(--space-glow) 0%,var(--space-1) 45%,var(--space-0) 100%);overflow-x:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}[hidden]{display:none!important}button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;cursor:pointer}:focus-visible{outline:4px solid var(--sun);outline-offset:3px;border-radius:8px}.app-shell{position:relative;min-height:100%;isolation:isolate}.screen{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);z-index:1}.starfield{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(2px 2px at 20% 30%,var(--star),transparent 60%),radial-gradient(2px 2px at 70% 12%,#fff,transparent 60%),radial-gradient(1.5px 1.5px at 40% 70%,var(--star),transparent 60%),radial-gradient(1.5px 1.5px at 85% 55%,#fff,transparent 60%),radial-gradient(2px 2px at 55% 40%,var(--star),transparent 60%),radial-gradient(1px 1px at 12% 80%,#fff,transparent 60%),radial-gradient(1.5px 1.5px at 92% 82%,var(--star),transparent 60%),radial-gradient(1px 1px at 32% 18%,#fff,transparent 60%);animation:twinkle 6s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.55}to{opacity:1}}.chrome{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;padding:clamp(.6rem,2vw,1.2rem);z-index:30;pointer-events:none}.chrome-left,.chrome-right{display:flex;gap:var(--gap-2);pointer-events:auto}.chrome-btn{width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-pop);font-size:1.9rem;display:grid;place-items:center}.lang-toggle{min-height:var(--tap-min);padding:0 1.25rem;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-pop);font-weight:800;font-size:1.3rem;letter-spacing:.03em;display:flex;align-items:center;gap:.4rem;color:var(--ink-soft)}.lang-toggle .lang-on{color:var(--earth)}.lang-toggle .lang-sep{opacity:.4}.tap-target{touch-action:manipulation;-webkit-user-select:none;user-select:none}.mascot{position:fixed;right:clamp(.75rem,3vw,2rem);bottom:clamp(.75rem,3vw,2rem);width:clamp(4.5rem,12vw,7.5rem);height:clamp(4.5rem,12vw,7.5rem);z-index:30;filter:drop-shadow(0 .5rem .6rem rgba(0,0,0,.35))}.mascot svg{width:100%;height:100%}.orrery{position:relative;width:min(96vw,88vh);aspect-ratio:1 / 1;margin:auto;overflow:visible}.orbit-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(255,255,255,.15);pointer-events:none}.orbit-body{position:absolute;transform:translate(-50%,-50%);z-index:1}.sun-body{z-index:2}.planet-hit,.sun-body.tap-target{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;min-width:4.5rem;min-height:4.5rem}.sun-core{display:grid;place-items:center;width:clamp(3.8rem,12vw,6rem);height:clamp(3.8rem,12vw,6rem);overflow:visible;filter:drop-shadow(0 0 1.6rem rgba(255,193,84,.65))}.body-label{color:#fff;font-weight:800;font-size:clamp(.85rem,1.1vw + .6rem,1.25rem);text-shadow:0 2px 6px rgba(0,0,0,.65);white-space:nowrap}.planet-orb{position:relative;display:grid;place-items:center;overflow:visible}.planet-orb.is-earth{filter:drop-shadow(0 0 .55rem rgba(126,200,255,.85))}.planet-art{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .4rem .7rem rgba(0,0,0,.45))}.planet-badge{position:absolute;right:-.2rem;top:-.2rem;font-size:1.4rem;z-index:2}.planet-screen{display:flex;flex-direction:column;align-items:center;gap:var(--gap-3);max-width:720px;text-align:center}.planet-hero{width:clamp(9rem,34vw,16rem);height:clamp(9rem,34vw,16rem);display:grid;place-items:center;overflow:visible}.name-stack{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:var(--surface);border-radius:var(--radius-lg);padding:clamp(1rem,3.5vw,1.75rem) clamp(1.5rem,5vw,2.5rem);box-shadow:var(--shadow-soft)}.name-en{margin:0;font-size:var(--text-title);font-weight:900;color:var(--ink);line-height:1.1}.name-vi{margin:0;font-size:var(--text-body);font-weight:800;color:var(--ink-soft)}.name-stack .speaker-btn{margin-top:.7rem}.cta-earth{min-height:calc(var(--tap-min) + .5rem);padding:0 2.25rem;border-radius:var(--radius-pill);background:var(--earth);color:#fff;font-weight:900;font-size:var(--text-body);box-shadow:var(--shadow-pop)}.speaker-btn{flex:none;width:var(--tap-min);height:var(--tap-min);border-radius:50%;background:var(--sun);display:grid;place-items:center;font-size:1.9rem;box-shadow:var(--shadow-pop)}.earth-screen{width:100%;max-width:1040px;display:flex;flex-direction:column;align-items:center;gap:var(--gap-2)}.screen-heading{color:#fff;font-size:var(--text-title);margin:0;text-align:center}.world-wrap{width:100%;background:#0e1636;border-radius:var(--radius-lg);padding:.5rem;box-shadow:var(--shadow-soft);overflow:hidden}.world-wrap svg{width:100%;height:auto;display:block;touch-action:none}.map-actions{display:flex;gap:var(--gap-2);flex-wrap:wrap;justify-content:center}.map-btn{min-height:var(--tap-min);padding:0 1.5rem;border-radius:var(--radius-pill);background:var(--sun);color:var(--ink);font-weight:900;font-size:var(--text-label);box-shadow:var(--shadow-pop);display:flex;align-items:center}.map-btn.ghost{background:var(--surface);color:var(--ink-soft)}.map-hint{color:#fff;background:#ffffff1f;border-radius:var(--radius-lg);padding:.6rem 1.1rem;font-size:var(--text-label);text-align:center;max-width:34rem}.continent-screen{width:100%;max-width:1100px;display:flex;flex-direction:column;align-items:center;gap:var(--gap-3)}.flag-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr));gap:clamp(1rem,3vw,2rem);max-height:70dvh;overflow-y:auto;padding:.5rem}.flag-tile{display:flex;flex-direction:column;gap:.75rem;background:var(--surface);border-radius:var(--radius-lg);padding:clamp(.9rem,2.5vw,1.4rem);box-shadow:var(--shadow-soft);align-items:center}.flag-tile.is-home{outline:5px solid var(--sun)}.flag-tile img{width:100%;aspect-ratio:4 / 3;object-fit:contain;border-radius:.85rem;box-shadow:0 .4rem .9rem #00000040;background:var(--surface-soft)}.flag-tile .flag-name{font-weight:900;font-size:var(--text-label);color:var(--ink)}.card-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#060418c7;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}.flag-card{position:relative;background:var(--surface);border-radius:var(--radius-lg);padding:clamp(1rem,3vw,1.75rem);width:min(58rem,96vw);max-height:94dvh;overflow-y:auto;display:flex;flex-direction:column;box-shadow:var(--shadow-pop)}.fc-main{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.25rem);padding:0 calc(var(--tap-min) + .35rem)}.fc-main.no-crossing{padding:0 1rem}.fc-left{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.7rem}.fc-right{flex:1 1 0;min-width:0;margin:0;display:flex;align-items:center;background:var(--surface-soft);border-radius:var(--radius-lg);padding:.6rem}.fc-right .crossing-svg{width:100%;height:auto;display:block}.fc-flag{width:100%;max-width:17rem;aspect-ratio:4 / 3;object-fit:contain;border-radius:1rem;background:var(--surface-soft);border:5px solid var(--surface-soft);box-shadow:0 .6rem 1.3rem #00000047}.fc-names{text-align:center}.fc-names .name-en{font-size:clamp(1.5rem,3.4vw,2.3rem)}.fc-names .name-vi{font-size:clamp(1.05rem,2.2vw,1.45rem)}.card-arrow{position:absolute;top:50%;transform:translateY(-50%);width:var(--tap-min);height:var(--tap-min);border-radius:50%;background:var(--surface-soft);font-size:1.7rem;display:grid;place-items:center;box-shadow:var(--shadow-pop);z-index:3}.card-arrow.left{left:.5rem}.card-arrow.right{right:.5rem}@media (max-width: 620px){.fc-main{flex-direction:column;padding:0 3.25rem;gap:.75rem}.fc-flag{max-width:12.5rem}.card-arrow{width:3.4rem;height:3.4rem;font-size:1.4rem}}.card-close{position:absolute;top:.75rem;right:.75rem;width:var(--tap-min);height:var(--tap-min);border-radius:50%;background:var(--mars);color:#fff;font-size:1.9rem;display:grid;place-items:center;box-shadow:var(--shadow-pop)}.penguin-emoji{font-size:clamp(5rem,20vw,9rem)}.settings-screen{width:100%;max-width:640px;background:var(--surface);border-radius:var(--radius-lg);padding:clamp(1.5rem,5vw,2.5rem);display:flex;flex-direction:column;gap:var(--gap-3);box-shadow:var(--shadow-soft)}.settings-screen h1{margin:0;font-size:var(--text-title)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-2);font-size:var(--text-body);font-weight:700}.toggle-pill{min-width:6.5rem;min-height:var(--tap-min);border-radius:var(--radius-pill);padding:0 1.5rem;font-weight:900;box-shadow:var(--shadow-pop)}.toggle-pill.on{background:var(--mint);color:#06281f}.toggle-pill.off{background:var(--surface-soft);color:var(--ink-soft)}.credits{font-size:1rem;color:var(--ink-soft);line-height:1.5}.voice-section{display:flex;flex-direction:column;gap:var(--gap-2);padding-top:var(--gap-2);border-top:3px solid var(--surface-soft)}.voice-section h2{margin:0;font-size:var(--text-body)}.setting-col{display:flex;flex-direction:column;gap:.5rem}.setting-col>span{font-weight:700;font-size:var(--text-label)}.voice-row{display:flex;gap:var(--gap-2);align-items:stretch}.voice-select{flex:1;min-width:0;min-height:var(--tap-min);border-radius:var(--radius-lg);border:3px solid var(--surface-soft);background:#fff;color:var(--ink);font-family:var(--font);font-size:1.05rem;font-weight:700;padding:0 .9rem}.toggle-pill.voice-test{min-width:0;padding:0 1.4rem;font-size:1.4rem}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}