/* Homepage map hub (map-hub.js): the bar under the map and the panel below it.
   Nothing here sits over the map or the globe; full screen hides the hub. */
.mh { position: relative; margin-top: 14px; text-align: left; }
.hero-map.map-fs .mh, .hero-map:fullscreen .mh, .hero-map:-webkit-full-screen .mh { display: none; }

.mh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mh-find { position: relative; flex: 1 1 220px; min-width: 0; }
.mh-find > svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.mh-find input {
  width: 100%; height: 40px; padding: 0 12px 0 38px; border-radius: 999px; font: inherit; font-size: 0.92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mh-find input::placeholder { color: var(--text-muted); }
.mh-find input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 25%, transparent); }
.mh-suggest {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow); max-height: 300px; overflow-y: auto;
}
.mh-suggest[hidden] { display: none; }
.mh-suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 0.92rem; }
.mh-suggest li small { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }
.mh-suggest li:hover, .mh-suggest li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mh-suggest .mh-none { cursor: default; color: var(--text-muted); }

.mh-btn, .mh-live {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mh-btn svg { width: 16px; height: 16px; color: var(--accent-2); }
.mh-btn:hover { border-color: var(--accent-2); }
.mh-btn.is-on { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color: var(--accent); }
.mh-btn:focus-visible, .mh-live:focus-visible, .mh-close:focus-visible, .mh-row-btn:focus-visible, .mh-tab:focus-visible, .mh-chip:focus-visible, .mh-link:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.mh-live[hidden] { display: none; }
.mh-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; }
.mh-live.is-live { border-color: color-mix(in srgb, #ef4444 55%, var(--border)); background: color-mix(in srgb, #ef4444 12%, var(--surface)); }
.mh-live.is-live i { background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: mh-live 1.6s ease-out infinite; }
@keyframes mh-live { 100% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }

/* The panel */
.mh-panel {
  margin-top: 12px; padding: 18px 20px 20px; border-radius: 20px;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--border)); box-shadow: var(--shadow);
}
.mh-panel[hidden] { display: none; }
.mh-panel.is-in { animation: mh-in 0.32s cubic-bezier(.2, .8, .2, 1); }
@keyframes mh-in { from { opacity: 0; transform: translateY(-6px); } }
.mh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.mh-title { margin: 0; font-family: var(--font-head); font-size: 1.25rem; letter-spacing: -0.01em; }
.mh-close { display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text-muted); background: transparent; border: 1px solid var(--border); }
.mh-close:hover { color: var(--text); border-color: var(--accent-2); }
.mh-close svg { width: 16px; height: 16px; }
.mh-sub { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.mh-note, .mh-empty { margin: 12px 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--text-muted); }
.mh-empty { margin-top: 4px; padding: 14px; border-radius: 12px; background: var(--bg-elevated); border: 1px dashed var(--border); }

/* A country */
.mh-country { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.mh-big { display: grid; place-items: center; align-content: center; width: 112px; height: 112px; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent-2) 35%, transparent), color-mix(in srgb, var(--accent) 22%, var(--bg-elevated)));
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); box-shadow: 0 0 40px -14px var(--accent-2); }
.mh-big strong { font-family: var(--font-head); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.mh-big span { font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }
.mh-rank { margin: 0 0 8px; font-size: 0.86rem; font-weight: 600; color: var(--accent-2); }
.mh-goal-label { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 0.86rem; color: var(--text-muted); }
.mh-goal-label strong { color: var(--text); font-variant-numeric: tabular-nums; }
.mh-goal-bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.mh-goal-bar span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2), #7ee2a8); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.mh-goal-note { margin: 7px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.mh-first { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.5; }
.mh-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mh-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 0.84rem; background: var(--bg-elevated); border: 1px solid var(--border); }
.mh-facts svg { width: 15px; height: 15px; color: #fbbf24; }
.mh-invite, .mh-work, .mh-langs { margin-top: 16px; }
.mh-work[hidden] { display: none; }
.mh-share { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); transition: border-color 0.2s ease, transform 0.15s ease; }
.mh-chip:hover { border-color: var(--accent-2); transform: translateY(-1px); }
.mh-chip svg { width: 16px; height: 16px; }
.mh-tg svg { color: #2aabee; } .mh-fb svg { color: #1877f2; }
.mh-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--text-muted); }
.mh-langs svg { width: 16px; height: 16px; color: var(--accent-2); }
.mh-langs a { color: var(--accent-2); font-weight: 600; }
.mh-work-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mh-work-list a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); font-size: 0.9rem; }
.mh-work-list a:hover { border-color: var(--accent-2); }
.mh-work-list svg { width: 16px; height: 16px; color: var(--accent-2); flex-shrink: 0; }
.mh-actions { margin-top: 14px; }
.mh-link { font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--accent-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* List view */
.mh-filter { width: 100%; height: 38px; padding: 0 12px; margin-bottom: 10px; border-radius: 10px; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); }
.mh-filter:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.mh-table-wrap { max-height: 340px; overflow: auto; border-radius: 12px; border: 1px solid var(--border); }
.mh-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mh-table caption { caption-side: top; text-align: left; padding: 10px 12px; font-size: 0.82rem; color: var(--text-muted); background: var(--bg-elevated); }
.mh-table thead th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; text-align: left; font-size: 0.78rem; font-weight: 700; color: var(--text-muted); background: var(--surface); border-bottom: 1px solid var(--border); }
.mh-table td, .mh-table tbody th { padding: 7px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); text-align: left; font-weight: 400; }
.mh-table tr[hidden] { display: none; }
.mh-table .mh-n { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.mh-table td.mh-n:nth-child(3) { color: var(--text); font-weight: 600; }
.mh-row-btn { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.mh-row-btn:hover { color: var(--accent-2); text-decoration: underline; }

/* Country Cup */
.mh-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); }
.mh-tab { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); background: none; border: 0; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.mh-tab[aria-selected="true"] { color: #1a1300; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.mh-cup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mh-cup-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); }
.mh-place { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 0.85rem; background: var(--surface-2); color: var(--text-muted); }
.mh-place-1 .mh-place { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #1a1300; box-shadow: 0 0 16px -4px #f59e0b; }
.mh-place-2 .mh-place { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #0f172a; }
.mh-place-3 .mh-place { background: linear-gradient(135deg, #fdba74, #b45309); color: #1c0d00; }
.mh-place-1 { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)) !important; }
.mh-cup-mid { min-width: 0; display: grid; gap: 5px; }
.mh-cup-mid .mh-row-btn { font-weight: 600; }
.mh-cup-bar { height: 6px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.mh-cup-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width 0.9s cubic-bezier(.2, .8, .2, 1); }
.mh-pts { text-align: right; line-height: 1.15; }
.mh-pts strong { display: block; font-family: var(--font-head); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mh-pts small { font-size: 0.74rem; color: var(--text-muted); }

/* Share card */
.mh-card-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.88rem; }
.mh-card-pick select { flex: 1 1 auto; max-width: 280px; height: 38px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); }
.mh-card-fig { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7); background: #020b1f; aspect-ratio: 1200 / 630; }
.mh-card-fig img { display: block; width: 100%; height: 100%; }
.mh-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.mh-card-acts .btn { display: inline-flex; align-items: center; gap: 7px; }
.mh-card-acts .btn[hidden] { display: none; }
.mh-card-acts svg { width: 16px; height: 16px; }

/* On the map: the found country, and the Cup's top 3 */
.map-dot.mh-hit { z-index: 6; }
.map-dot.mh-hit::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 16px #fff; animation: mh-ping 1.2s ease-out 4; pointer-events: none; }
@keyframes mh-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.map-dot.mh-cup-1, .map-dot.mh-cup-2, .map-dot.mh-cup-3 { z-index: 5; }
.map-dot.mh-cup-1::before, .map-dot.mh-cup-2::before, .map-dot.mh-cup-3::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fbbf24; box-shadow: 0 0 12px #fbbf24; pointer-events: none; }
.map-dot.mh-cup-2::before { border-color: #cbd5e1; box-shadow: 0 0 10px #cbd5e1; }
.map-dot.mh-cup-3::before { border-color: #d97706; box-shadow: 0 0 10px #d97706; }

@media (max-width: 640px) {
  .mh-bar { gap: 6px; }
  .mh-find { flex-basis: 100%; }
  .mh-btn, .mh-live { flex: 1 1 auto; justify-content: center; height: 38px; padding: 0 10px; font-size: 0.82rem; }
  .mh-panel { padding: 14px 14px 16px; border-radius: 16px; }
  .mh-country { grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
  .mh-big { width: auto; height: auto; padding: 10px 18px; border-radius: 999px; display: inline-flex; gap: 6px; align-items: baseline; }
  .mh-big strong { font-size: 1.5rem; }
  .mh-big span { margin-top: 0; }
  .mh-side { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-panel.is-in, .mh-live.is-live i, .map-dot.mh-hit::after { animation: none; }
  .mh-goal-bar span, .mh-cup-bar span { transition: none; }
}
.mh-big-community svg { width: 34px; height: 34px; color: var(--accent-2); }
.mh-table td.mh-n:nth-child(3):not(:empty) { white-space: nowrap; }

/* ===== Alert strip (map-hub.js): the map's notices in one row right under the map =====
   Computers (1200px+), map view. Nothing touches the map. The counter and "Watch us grow"
   keep their spots; notices that come and go share the rest of the row, the newest on top,
   so the page below does not jump. Elsewhere the strip is hidden and they are back in the map. */
.mh-rail { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-auto-rows: minmax(54px, auto); align-items: stretch; gap: 8px; margin: 12px 0 0; }
.mh-rail[hidden] { display: none; }
.mh-rail [hidden] { display: none !important; }
.hero-map .mh-rail > * {
  position: relative !important; inset: auto !important; transform: none !important; margin: 0 !important;
  width: auto !important; max-width: none !important; min-width: 0; min-height: 0; box-sizing: border-box; pointer-events: auto;
  display: flex; align-items: center; gap: 9px; text-align: left; white-space: nowrap;
  padding: 9px 12px 9px 15px; border-radius: 12px; overflow: hidden;
  color: #e8eeff; font: 500 0.8rem/1.35 var(--font-body, Inter, sans-serif);
  background: #0a1330; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  animation: mh-alert-in 0.4s cubic-bezier(.2, .8, .2, 1) both;
  grid-row: 1;
}
/* The accent bar on the left says what kind of alert it is. */
.hero-map .mh-rail > *::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mh-accent, var(--accent-2)); }
.hero-map .mh-rail > .mapf-counter { grid-column: 1; --mh-accent: var(--accent-2); }
.hero-map .mh-rail > .wow-grow-btn { grid-column: 2; --mh-accent: #ffd23f; justify-content: center; font-weight: 700; cursor: pointer; }
.hero-map .mh-rail > .wow-grow-btn:not(.on) { color: #1a1200; background: linear-gradient(135deg, #ffe27a, #ffd23f); border-color: transparent; }
.hero-map .mh-rail > .map-milestone, .hero-map .mh-rail > .wow-replay, .hero-map .mh-rail > .wow-tg, .hero-map .mh-rail > .map-toast { grid-column: 3; }
.hero-map .mh-rail > .map-milestone { --mh-accent: #fbbf24; border-color: rgba(251, 191, 36, 0.45); }
.hero-map .mh-rail > .map-milestone strong { flex-shrink: 0; font-size: 0.84rem; }
.hero-map .mh-rail > .map-milestone span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; color: #b8c2e0; }
.hero-map .mh-rail > .wow-replay { --mh-accent: #ffd23f; text-decoration: none; }
.hero-map .mh-rail > .wow-tg { --mh-accent: #4fc3ff; }
.hero-map .mh-rail > .map-toast { --mh-accent: #34d399; }
.hero-map .mh-rail > .map-toast > div, .hero-map .mh-rail > .map-toast > span:not(.map-toast-icon) { min-width: 0; }
.hero-map .mh-rail > * span, .hero-map .mh-rail > * strong, .hero-map .mh-rail > * small { overflow: hidden; text-overflow: ellipsis; }
/* Spotlight card: country and students on the first line, class time below, buttons right. */
.hero-map .mh-rail > .map-card {
  grid-column: 3; --mh-accent: #38b6ff; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; font-size: 0.78rem;
}
.hero-map .mh-rail > .map-card[hidden] { display: none !important; }
.hero-map .mh-rail > .map-card > strong { grid-column: 1; grid-row: 1; font-size: 0.86rem; color: #fff; }
.hero-map .mh-rail > .map-card > span:not(.map-card-time) { grid-column: 2; grid-row: 1; color: #b8c2e0; }
.hero-map .mh-rail > .map-card > .map-card-time { grid-column: 1 / 3; grid-row: 2; color: #fbd38d; font-size: 0.74rem; }
.hero-map .mh-rail > .map-card > a { grid-row: 1 / 3; align-self: center; margin: 0 !important; white-space: nowrap; }
.hero-map .mh-rail > .map-card > .map-card-join { grid-column: 3; }
.hero-map .mh-rail > .map-card > .wow-remind { grid-column: 4; }
/* Greeting: "Hallo from Germany" */
.hero-map .mh-rail > .mm-hello { grid-column: 3; --mh-accent: #7ee2a8; gap: 6px; }
.hero-map .mh-rail > .mm-hello::after { display: none; }
.hero-map .mh-rail > .mm-hello .mm-hello-word { font-size: 0.9rem; }
.hero-map .mh-rail > .mm-hello .mm-hello-from { text-transform: none; letter-spacing: 0; font-size: 0.8rem; color: #b8c2e0; }
.hero-map .mh-rail > .mm-hello .mm-hello-from::before { content: "from "; }
/* Sunday countdown / we're live, and the welcome card after registering */
.hero-map .mh-rail > .wow-takeover { grid-column: 3; --mh-accent: #ffd23f; flex-direction: row !important; gap: 8px; border-color: rgba(255, 210, 63, 0.5); backdrop-filter: none; }
.hero-map .mh-rail > .wow-takeover .wow-to-clock { font-size: 1rem; font-variant-numeric: tabular-nums; }
.hero-map .mh-rail > .wow-takeover .wow-to-sub { min-width: 0; color: #b8c2e0; font-size: 0.74rem; }
.hero-map .mh-rail > .wow-welcome { grid-column: 3; --mh-accent: #ffd23f; flex-direction: row !important; gap: 8px; text-align: left; border-color: rgba(255, 210, 63, 0.55); }
.hero-map .mh-rail > .wow-welcome .wow-w-sub { min-width: 0; color: #b8c2e0; font-size: 0.74rem; }
.hero-map .mh-rail > .wow-welcome .wow-close { position: static !important; margin-left: auto; flex-shrink: 0; }
/* Leaving: fade out within their scripts' 0.5s. */
.hero-map .mh-rail > .out { opacity: 0 !important; transition: opacity 0.35s ease; }
@keyframes mh-alert-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .hero-map .mh-rail > * { animation: none !important; } }

/* ===== Black land, yellow on hover (map-hub.js) ===== */
.mh-land { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.mh-land path { fill: #03050b; stroke: rgba(90, 150, 255, 0.3); stroke-width: 0.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill 0.2s ease; }
.mh-land path.is-hover { fill: #facc15; stroke: #fde68a; }
/* The picture keeps still so the shapes, the picture and the pins line up exactly. */
.hero-map.mh-land-on .map-bg { animation: none !important; transform: none !important; }
/* Same soft oval as the picture (styles.css "No map container"); full screen unchanged. */
.hero-map:not(.map-fs):not(:fullscreen) .mh-land {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 6%, #000 15%, #000 76%, rgba(0, 0, 0, 0.45) 87%, transparent 97%),
                      radial-gradient(closest-side at 50% 50%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 6%, #000 15%, #000 76%, rgba(0, 0, 0, 0.45) 87%, transparent 97%),
                      radial-gradient(closest-side at 50% 50%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
          mask-composite: intersect;
}
.hero-map.globe-on .mh-land { display: none; }
@media (prefers-reduced-motion: reduce) { .mh-land path { transition: none; } }