/* Homepage map and globe: the five wow moments (map-wonder.js). Aqua, gold and mint, like map-theme.css. */
/* Day and night: a soft navy shade over the night side of the flat map. */
.mw-night { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: auto; }
.globe-on .mw-night { display: none; }
.map-dot.mw-lit { background: radial-gradient(circle at 35% 30%, #fff7cc 0%, #ffd23f 50%, #f5a50b 100%); box-shadow: 0 0 12px 2px rgba(255, 210, 63, 0.7); }

/* Live class: gold beams from the Academy to every country in class. */
.map-line.mw-beam { stroke: #ffd23f; stroke-width: 2.2; opacity: 0.95; filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.8)); }
/* Study partners: thin mint lines. */
.mw-link { fill: none; stroke: #5eead4; opacity: 0.8; stroke-linecap: round; stroke-dasharray: 2 5; }
@media (prefers-reduced-motion: no-preference) { .mw-link { animation: mwLinkFlow 2.4s linear infinite; } }
@keyframes mwLinkFlow { to { stroke-dashoffset: -14; } }

/* The strip under the map: buttons, live counter, notes. */
.mw-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 6px; }
.mw-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font: 600 0.82rem Inter, system-ui, sans-serif; color: var(--text);
  background: rgba(4, 17, 46, 0.7); border: 1px solid rgba(63, 224, 255, 0.35); }
.mw-chip svg { width: 15px; height: 15px; }
button.mw-chip { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
button.mw-chip:hover, button.mw-chip:focus-visible { border-color: #ffd23f; background: rgba(255, 210, 63, 0.12); outline: none; }
.mw-find svg { color: #ffd23f; }
.mw-live { border-color: rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.1); }
.mw-live i { width: 8px; height: 8px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.7); }
@media (prefers-reduced-motion: no-preference) { .mw-live i { animation: mwLiveDot 1.4s ease-out infinite; } }
@keyframes mwLiveDot { to { box-shadow: 0 0 0 9px rgba(255, 210, 63, 0); } }
.mw-partners { border-color: rgba(94, 234, 212, 0.5); }
.mw-partners i { width: 14px; height: 0; border-top: 2px dotted #5eead4; }
.mw-note { margin: 4px auto 10px; max-width: 640px; }
.mw-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 12px 16px; border-radius: 14px; text-align: center;
  background: linear-gradient(135deg, rgba(255, 210, 63, 0.12), rgba(63, 224, 255, 0.08)); border: 1px solid rgba(255, 210, 63, 0.4); }
.mw-card p, .mw-msg { margin: 0; font-size: 0.9rem; color: var(--text); }
.mw-card strong { color: #ffd23f; }
.mw-x { background: none; border: 0; color: var(--text-muted); font: 600 0.8rem Inter, system-ui, sans-serif; text-decoration: underline; cursor: pointer; }

/* Your pin on the flat map. */
.mw-layer { position: absolute; inset: 0; pointer-events: none; }
.mw-me { position: absolute; transform: translate(-6px, -50%); display: flex; align-items: center; gap: 6px; z-index: 5; }
.mw-me i { width: 13px; height: 13px; border-radius: 50%; background: #ffd23f; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.7); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .mw-me i { animation: mwMe 1.6s ease-out infinite; } }
@keyframes mwMe { to { box-shadow: 0 0 0 14px rgba(255, 210, 63, 0); } }
.mw-me b { font: 700 11px Inter, system-ui, sans-serif; color: #ffd23f; background: rgba(4, 17, 46, 0.92); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.globe-on .mw-me, .globe-on .mw-hello-ring { display: none; }
.mw-hello-ring { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; border: 2px solid #ffd23f; }
@media (prefers-reduced-motion: no-preference) { .mw-hello-ring { animation: mwHello 1.3s ease-out 3; } }
@keyframes mwHello { from { transform: scale(0.6); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }

/* Country card: first student and Say hello. */
.mw-hello-row { margin-top: 12px; }
@media (max-width: 560px) { .mw-chip { height: auto; min-height: 34px; padding: 6px 12px; } }

/* "hidden" must win over the display rules above (empty pills showed on phones). */
.mw-chip[hidden], .mw-note[hidden], .mw-me[hidden] { display: none !important; }