/* ===== Reset / base ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(ellipse 100% 80% at 50% 40%, #0a1230 0%, #04061a 60%, #02030c 100%);
  color: #e0e0ee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== Topbar ===== */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  height: 44px; flex-shrink: 0;
  background: rgba(10, 10, 20, 0.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 20;
}
.topbar-left {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.app-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.app-logo {
  width: 30px; height: 30px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.app-title {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.2px;
}
.hint {
  font-size: 12px;
  color: #aaaabb;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.topbar-right {
  display: flex; align-items: center; gap: 6px;
}
.topbar-sep {
  width: 1px;
  background: #2a2a3a;
  margin: 0 4px;
  align-self: stretch;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1c1c2a;
  color: #e0e0ee;
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, color 150ms;
  white-space: nowrap;
}
/* Colourful relevant icons on the topbar buttons. Each icon keeps its own colour
   in every state, so the buttons stay vivid whether active or not. */
.btn-ico { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.btn-ico path, .btn-ico circle, .btn-ico line { vector-effect: non-scaling-stroke; }
.action-btn:hover { background: #2a2a3a; border-color: #3a3a4a; }
.action-btn.toggle.on {
  background: #1c2a3a;
  border-color: #44aaff;
  color: #aaddff;
}

/* ===== Read-aloud (TTS) button ===== */
.tts-btn { display: inline-flex; align-items: center; justify-content: center; }
.tts-btn svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.tts-btn.playing { color: #aaddff !important; border-color: #44aaff !important; }
.tts-btn.playing svg { animation: tts-pulse 1.1s ease-in-out infinite; }
@keyframes tts-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
#btn-autospeak { padding: 5px 9px; line-height: 0; }
#btn-autospeak svg { width: 16px; height: 16px; }
#btn-autospeak.on { background: #1c2a3a; border-color: #44aaff; color: #aaddff; }

/* ===== Workspace: icon rails + single flyout ====================== *
 * A flex row of:
 *     [icon rail | flyout | canvas | flyout | icon rail]
 * The panels used to be absolutely positioned ON TOP of the canvas. As real
 * layout siblings the canvas gets what is genuinely left and
 * GeoScene.onResize() re-fits the camera aspect inside it.
 */
#workspace {
  position: relative;   /* anchor for the absolutely-positioned floating flyouts under 900px */
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}

/* ===== Canvas area ===== */
#canvas-area {
  position: relative;
  flex: 1 1 auto;
  order: 3;
  min-width: 0;   /* without this the canvas will not shrink below its intrinsic width */
  overflow: hidden;
}

/* ---- always-visible icon rails ---- */
.icon-rail {
  flex: 0 0 auto;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(8, 10, 20, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 6;
}
#rail-left  { order: 1; border-right: 1px solid rgba(255,255,255,0.07); }
#rail-right { order: 5; border-left:  1px solid rgba(255,255,255,0.07); }
.rail-sep {
  width: 44px; height: 1px; margin: 6px 0;
  background: rgba(255,255,255,0.10); flex: 0 0 auto;
}

/* Same elements that used to sit in the toolbar — same ids, same handlers —
   restacked as icon-over-label. */
.rail-btn {
  width: 64px;
  height: auto;
  flex-direction: column;
  gap: 4px;
  padding: 7px 2px 6px;
  justify-content: center;
  position: relative;
  white-space: normal;
}
.rail-btn .btn-label {
  display: block;
  font-size: 10.5px;
  line-height: 1.1;
  letter-spacing: 0.1px;
}
.rail-btn .btn-ico { width: 20px; height: 20px; }

/* An open flyout is marked on its rail button by a bar against the canvas edge. */
#rail-left .rail-btn.on::after {
  content: '';
  position: absolute;
  top: 5px; bottom: 5px;
  right: -7px;
  width: 2px;
  border-radius: 2px;
  background: #44aaff;
}
#rail-right .rail-btn.on::after {
  content: '';
  position: absolute;
  top: 5px; bottom: 5px;
  left: -7px;
  width: 2px;
  border-radius: 2px;
  background: #44aaff;
}

/* ---- the flyout that pops out of a rail ---- */
.flyout {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: rgba(8, 10, 20, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#flyout-left  { order: 2; width: var(--flyout-left-w, 280px);  padding: 10px 10px 10px 8px; }
#flyout-right { order: 4; width: var(--flyout-right-w, 340px); padding: 10px 8px 10px 10px; }

/* An empty flyout takes no space — closing a panel hands its width back. */
#flyout-left[data-empty="true"],
#flyout-right[data-empty="true"] {
  width: 0;
  padding: 0;
  overflow: hidden;
}

/* Drag the inner edge to resize. */
.rail-resize {
  position: absolute;
  top: 0; bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  transition: background 120ms;
}
.rail-resize:hover, .rail-resize.dragging { background: rgba(68,170,255,0.35); }
[data-rail-resize="left"]  { right: 0; }
[data-rail-resize="right"] { left: 0; }
.flyout[data-empty="true"] .rail-resize { display: none; }

/* ===== Panels, docked ============================================= *
 * These override the .floating-panel block for anything inside a flyout.
 * The .floating-panel block itself is kept intact for legend-panel, which
 * stays as a small auto-showing helper over the canvas.
 */
.flyout > .floating-panel {
  position: static;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  top: auto; left: auto; right: auto; bottom: auto;
  flex: 1 1 auto;
  resize: none;
  box-shadow: none;
  background: rgba(18, 18, 28, 0.72);
  border-radius: 8px;
}
.flyout > .floating-panel::after { display: none; }
.flyout > .floating-panel .panel-header { cursor: default; }
.flyout > .floating-panel.focused {
  box-shadow: none;
  border-color: rgba(68,170,255,0.35);
}

/* ===== First-run hint over the canvas ============================= */
.canvas-hint {
  position: absolute;
  right: 16px; bottom: 16px;
  z-index: 7;
  display: flex; align-items: center; gap: 10px;
  max-width: min(360px, calc(100% - 32px));
  padding: 8px 10px 8px 14px;
  font-size: 12.5px; line-height: 1.45; color: #cdd6e6;
  background: rgba(12, 16, 28, 0.82);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45);
  animation: hint-in 320ms ease both;
}
.canvas-hint[hidden] { display: none; }
.canvas-hint-text { min-width: 0; }
.canvas-hint-x {
  flex: 0 0 auto;
  background: transparent; border: none; color: #8e9bb0;
  font-size: 17px; line-height: 1; width: 22px; height: 22px;
  border-radius: 50%; cursor: pointer;
}
.canvas-hint-x:hover { background: rgba(255,255,255,0.10); color: #fff; }
@keyframes hint-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .canvas-hint { animation: none; } }
#scene-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
}
#scene-canvas:active { cursor: grabbing; }

.loading {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px; color: #aaaabb;
  background: rgba(10, 12, 22, 0.7);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  z-index: 4;
  pointer-events: none;
}

/* ===== Hover tip ===== */
.hover-tip {
  position: absolute;
  background: rgba(15, 18, 30, 0.92);
  border: 1px solid rgba(68,170,255,0.35);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  pointer-events: none;
  z-index: 7;
  transform: translate(-50%, calc(-100% - 12px));
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.tip-name { font-weight: 600; color: #fff; }
.tip-sub { font-size: 10.5px; color: #88a; margin-top: 2px; }

/* ===== Floating panels ===== */
.floating-panel {
  position: absolute;
  top: 56px;
  left: 16px;
  width: 320px;
  height: 540px;
  min-width: 240px;
  min-height: 200px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  background: rgba(18, 18, 28, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 8;
  display: flex;
  flex-direction: column;
  resize: both;
  overflow: hidden;
}
.floating-panel[hidden] { display: none !important; }
.floating-panel.focused {
  border-color: rgba(68,170,255,0.55);
  box-shadow: 0 16px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(68,170,255,0.25);
  z-index: 9;
}
.floating-panel::after {
  content: '';
  position: absolute;
  right: 2px; bottom: 2px;
  width: 14px; height: 14px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.18) 60%, transparent 60%),
    linear-gradient(135deg, transparent 75%, rgba(255,255,255,0.18) 75%, rgba(255,255,255,0.18) 85%, transparent 85%);
  border-bottom-right-radius: 10px;
}

.panel-header {
  display: flex; align-items: center;
  padding: 7px 10px 7px 12px;
  background: rgba(10, 10, 18, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}
.panel-header-title {
  font-weight: 600; font-size: 13px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 240px;
}
.panel-header-spacer { flex: 1; }
.panel-header-search {
  background: #0e0e18;
  border: 1px solid #2a2a3a;
  color: #e0e0ee;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 11px;
  width: 110px;
  margin-right: 6px;
}
.panel-header-search:focus { outline: none; border-color: #44aaff; }
.panel-header-btn {
  background: transparent;
  border: none;
  color: #aaaabb;
  font-size: 16px;
  width: 22px; height: 22px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
}
.panel-header-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

.panel-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 12px 14px;
}
.panel-sub-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #777788;
  margin: 8px 0 4px;
}
.panel-sub-title:first-child { margin-top: 0; }

/* ===== Panel positions ===== */
.library-panel {
  width: 280px;
  height: auto;
  max-height: calc(100vh - 80px);
  min-width: 240px; min-height: 240px;
  top: 56px; left: auto; right: 16px;
}
.info-panel {
  width: 380px;
  height: auto;
  max-height: calc(100vh - 80px);
  min-width: 300px; min-height: 240px;
  top: 56px; left: 268px; right: auto; bottom: auto;
}
.overlays-panel {
  width: 240px;
  height: auto;
  max-height: calc(100vh - 190px);
  min-width: 200px; min-height: 240px;
  top: 56px; left: 16px;
}
.legend-panel {
  width: 220px;
  height: auto;
  max-height: calc(100vh - 80px);
  min-width: 180px; min-height: 100px;
  top: auto; left: auto;
  right: 16px; bottom: 36px;
  resize: none;       /* fixed-width legend; height grows with content up to max */
}
.legend-section { margin-bottom: 12px; }
.legend-section:last-child { margin-bottom: 0; }
.legend-section-title {
  font-size: 11px; font-weight: 600; color: #d8d8e0;
  margin: 0 0 6px; letter-spacing: 0.3px;
}
.legend-row {
  display: flex; align-items: center;
  font-size: 11px; color: #c8c8d4;
  padding: 1px 0;
}
.legend-swatch {
  display: inline-block;
  width: 14px; height: 10px;
  border-radius: 2px;
  margin-right: 7px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.legend-row .legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-gradient-bar {
  height: 10px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
}
.legend-gradient-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #999aa6;
  margin-top: 3px;
}
.legend-empty {
  font-size: 11px; color: #888892; font-style: italic;
}

.quiz-panel {
  width: 360px;
  height: auto;
  max-height: calc(100vh - 190px);
  min-width: 300px; min-height: 280px;
  top: auto; bottom: 16px; left: calc(50% - 180px); right: auto;
}

/* ===== Country library ===== */
.country-library {
  display: flex; flex-direction: column; gap: 2px;
}
.country-item {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  min-width: 0;
  border: 1px solid transparent;
  transition: background 150ms, border-color 150ms;
}
.country-item:hover { background: #1a1a26; border-color: #2a2a3a; }
.country-item.selected { background: #1c2a3a; border-color: #44aaff; }
.country-flag {
  flex-shrink: 0;
  width: 24px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 2px;
  background: #0a0a14;
}
.country-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.country-name {
  font-size: 12.5px; color: #e0e0ee;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.country-cap {
  font-size: 10.5px; color: #88a;
  margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 80px;
}
/* ===== Accordion (Overlays + Library) ===== */
.acc-section { border-bottom: 1px solid rgba(255,255,255,0.06); }
.acc-section:last-child { border-bottom: none; }
.acc-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 9px 4px; color: #c4d0e2; font-size: 12.5px; font-weight: 600;
  text-align: left; border-left: 2px solid transparent;
}
.acc-head:hover { color: #fff; }
.acc-section.open > .acc-head {
  color: #eaf4ff;
  background: linear-gradient(90deg, rgba(68,170,255,0.12), rgba(68,170,255,0));
  border-left: 2px solid #44aaff;
  padding-left: 6px;
}
.acc-section.open > .acc-head .acc-ico { color: #cfe6ff; }
.acc-ico {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #7fb0e0;
}
.acc-ico svg { width: 19px; height: 19px; display: block; }
/* Continent silhouette region icons get a touch more room + keep their own
   region colour (they set explicit fill/stroke, so the .acc-ico color tint and
   the open-state recolour don't apply to them). */
.acc-ico.region-ico { width: 24px; height: 24px; }
.acc-ico.region-ico svg { width: 23px; height: 23px; }
.acc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-count {
  flex: 0 0 auto; color: #8da3bf; font-size: 10px;
  background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 8px;
}
.acc-chev {
  width: 6px; height: 6px; flex: 0 0 auto; margin: 0 4px 0 2px;
  border-right: 2px solid #6b788f; border-bottom: 2px solid #6b788f;
  transform: rotate(-45deg); transition: transform 0.16s ease;
}
.acc-section.open .acc-chev { transform: rotate(45deg); border-color: #cfe6ff; }
.acc-body { display: none; padding: 1px 0 9px 2px; }
.acc-section.open > .acc-body { display: block; }
/* Country library rows inside an open section keep their small vertical rhythm */
.country-library .acc-section.open > .acc-body { display: flex; flex-direction: column; gap: 1px; }

/* ===== Overlay checkboxes ===== */
.ov-check {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 2px;
  cursor: pointer;
  font-size: 12.5px;
  color: #ddd;
}
.ov-check:hover { color: #fff; }
.ov-check input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border: 1px solid #44aaff;
  border-radius: 3px;
  background: #0e0e18;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.ov-check input[type=checkbox]:checked {
  background: #44aaff;
}
.ov-check input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0;
  width: 4px; height: 8px;
  border: solid #0a0a14;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ===== Fact card ===== */
.info-empty {
  padding: 12px;
  font-size: 12.5px;
  color: #888;
  text-align: center;
  font-style: italic;
}
.fc-head {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid #232333;
}
.fc-thumb {
  width: 110px; height: 110px;
  object-fit: cover;
  background: #fff;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.fc-thumb.no-img {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  background: #1a1a26;
  border: 1px dashed #2a2a3a;
}
.fc-thumb.fc-zoom {
  cursor: zoom-in;
  transition: box-shadow .15s, transform .15s;
}
.fc-thumb.fc-zoom:hover,
.fc-thumb.fc-zoom:focus-visible {
  box-shadow: 0 0 0 2px #5fa0ff, 0 2px 10px rgba(0,0,0,0.5);
  transform: scale(1.02);
  outline: none;
}

/* ===== Image lightbox ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 200000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 9, 15, 0.86);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.lightbox-figure {
  position: relative; z-index: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  max-width: 92vw; max-height: 92vh;
  background: #12141c;
  border: 1px solid #2a2e3c;
  border-radius: 10px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.6);
  overflow: hidden;
}
.lightbox-imgwrap {
  display: flex; align-items: center; justify-content: center;
  background: #0b0d13; min-height: 60px; width: 100%;
}
.lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 74vh;
  object-fit: contain;
}
.lightbox-cap {
  width: 100%; box-sizing: border-box;
  padding: 12px 16px 14px;
  border-top: 1px solid #232735;
  color: #cdd3df;
}
.lightbox-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.lightbox-desc  { font-size: 12.5px; line-height: 1.45; color: #aeb6c6; margin-bottom: 6px; }
.lightbox-attr  { font-size: 11.5px; color: #7e8699; }
.lightbox-attr .lightbox-link,
.lightbox-link {
  color: #5fa0ff; text-decoration: none; white-space: nowrap;
}
.lightbox-link:hover { text-decoration: underline; }
.lightbox-close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: rgba(20,24,34,0.72);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(40,46,62,0.95); }
.fc-head-text { flex: 1; min-width: 0; }
.fc-name {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 2px;
}
.fc-sub {
  font-size: 11.5px; color: #88a;
}
.fc-section-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #777788;
  margin: 12px 0 6px;
}
.fc-summary {
  font-size: 12.5px; line-height: 1.55; color: #cce6ff;
}
.fc-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 12px;
  margin-top: 4px;
}
.fc-facts dt {
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10.5px;
  padding-top: 1px;
}
.fc-facts dd {
  color: #e0e0ee;
  margin: 0;
  overflow-wrap: anywhere;
}
.fc-links {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.fc-link {
  background: transparent;
  border: 1px solid rgba(68,170,255,0.4);
  color: #aaddff;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  text-decoration: none;
}
.fc-link:hover { background: rgba(68,170,255,0.10); border-color: #44aaff; }

.fc-locate-btn {
  background: #1c2a3a;
  border: 1px solid #44aaff;
  color: #aaddff;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
}
.fc-locate-btn:hover { background: #244466; }

/* ===== Stats overlay ===== */
.stats-overlay {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(10, 10, 20, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #e0e0ee;
  z-index: 5;
  pointer-events: none;
  min-width: 140px;
}
.stats-formula {
  font-size: 14px; font-weight: 700; color: #fff;
  margin-bottom: 4px;
}
.stats-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 1.5px 0;
}
.stats-label {
  color: #777788;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ===== Quiz panel ===== */
.quiz-body { display: flex; flex-direction: column; gap: 12px; }
.quiz-intro { font-size: 13px; color: #cce6ff; line-height: 1.5; }
.quiz-start {
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.quiz-mode-btn {
  flex: 1 1 0;
  background: #1c2a3a;
  border: 1px solid #44aaff;
  color: #aaddff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  min-width: 120px;
}
.quiz-mode-btn:hover { background: #244466; }
.quiz-q {
  background: rgba(10, 10, 20, 0.6);
  border-left: 3px solid #44aaff;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13.5px; color: #fff;
  line-height: 1.45;
}
.quiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.quiz-choice {
  background: #1c1c2a;
  border: 1px solid #2a2a3a;
  color: #e0e0ee;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.quiz-choice:hover { background: #2a2a3a; border-color: #44aaff; }
.quiz-choice.correct { background: #143;border-color: #5a5; color: #b6f9b6; }
.quiz-choice.wrong { background: #311; border-color: #a55; color: #f9b6b6; }
.quiz-status {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; color: #aaa;
}
.quiz-next, .quiz-restart {
  background: #1c2a3a; border: 1px solid #44aaff;
  color: #aaddff; border-radius: 5px;
  padding: 4px 11px; font-size: 11.5px; cursor: pointer;
}
.quiz-next:hover, .quiz-restart:hover { background: #244466; }
.quiz-home { display: flex; flex-direction: column; gap: 12px; }
.quiz-title { font-size: 16px; font-weight: 600; color: #fff; }
.quiz-sub { font-size: 12.5px; color: #aabbcc; line-height: 1.45; }
.quiz-mode-list { display: flex; flex-direction: column; gap: 6px; }
.quiz-mode-list .quiz-mode-btn { min-width: 0; text-align: left; }
.quiz-flag-big { font-size: 36px; display: inline-block; margin-left: 6px; vertical-align: middle; }
.quiz-flag-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.quiz-flag-img {
  display: block;
  width: 160px; max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  background: #0a0a14;
}
.quiz-find-hint { font-size: 12px; color: #aacceb; font-style: italic; }
.quiz-hint { margin-top: 6px; font-size: 12px; color: #8fb0cc; font-style: italic; line-height: 1.4; }
.quiz-feedback {
  min-height: 18px;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  background: transparent;
  color: #ccd;
}
.quiz-feedback.ok { background: #14331f; color: #b6f9b6; border-left: 3px solid #5a5; }
.quiz-feedback.no { background: #311; color: #f9b6b6; border-left: 3px solid #a55; }
.quiz-controls { display: flex; gap: 8px; justify-content: flex-end; }
.quiz-btn {
  background: #1c2a3a;
  border: 1px solid #44aaff;
  color: #aaddff;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.quiz-btn:hover { background: #244466; }
.quiz-btn.primary { background: #2a5588; color: #fff; }
.quiz-btn.primary:hover { background: #336699; }
.quiz-results { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.quiz-score { font-size: 28px; font-weight: 700; color: #fff; }
.quiz-pct { font-size: 16px; color: #aabbcc; font-weight: 400; }
.quiz-verdict { font-size: 13px; color: #cce6ff; font-style: italic; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .hint { display: none; }
}
/* Narrow the flyouts before considering floating them. */
@media (max-width: 1200px) {
  #flyout-left  { width: var(--flyout-left-w, 244px); }
  #flyout-right { width: var(--flyout-right-w, 300px); }
}
@media (max-width: 900px) {
  #flyout-left  { width: var(--flyout-left-w, 228px); }
  #flyout-right { width: var(--flyout-right-w, 280px); }
}
/* Below this a docked flyout would leave too little canvas to be useful, so
   flyouts stop being layout and float over the model instead. The icon rails
   stay put on both sides, so every panel is one tap away. layout.js sets
   data-floating on the workspace. */
@media (max-width: 900px) {
  #workspace[data-floating="true"] .flyout {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 12;
    width: min(320px, 84vw);
    box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  }
  #workspace[data-floating="true"] #flyout-left  { left: 76px; }
  #workspace[data-floating="true"] #flyout-right { right: 76px; }
  /* Empty flyouts should still take no space when floating. */
  #workspace[data-floating="true"] .flyout[data-empty="true"] { display: none; }
}
@media (max-width: 620px) {
  #topbar {
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    padding: 6px 12px;
    row-gap: 6px;
  }
  .topbar-left { flex: 1 0 auto; }
  .topbar-right { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  .topbar-sep { display: none; }
}

/* ===== Custom tooltips (replaces native title tooltips) ===== */
.ui-tip {
  position: fixed; z-index: 2147483600; pointer-events: none;
  max-width: 240px; white-space: normal; overflow-wrap: break-word; word-break: break-word;
  background: rgba(20,24,34,0.97); color: #dfe8f5;
  border: 1px solid #2c3c5c; border-radius: 7px; padding: 6px 10px;
  font: 500 11.5px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  letter-spacing: .1px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ui-tip[hidden] { display: none; }

/* ===== Share button "Copied!" flash ===== */
.action-btn.flash { border-color: #2aa890; color: #7fe8d3; background: #15463f; }

/* ===== Intro tour (spotlight walkthrough) ===== */
.tour-overlay { position: fixed; inset: 0; z-index: 100000; pointer-events: auto; background: transparent; }
.tour-ring { position: fixed; z-index: 100001; pointer-events: none; border: 2px solid #44aaff; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(8,10,18,0.62), 0 0 18px rgba(68,170,255,0.55) inset, 0 0 22px rgba(68,170,255,0.45);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.tour-pop { position: fixed; z-index: 100002; width: 320px; max-width: calc(100vw - 24px);
  background: rgba(20,24,34,0.98); border: 1px solid #2c3c5c; border-radius: 11px; padding: 15px 16px 13px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #e7eef8; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
.tour-step { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: #6fb0e8; font-weight: 700; margin-bottom: 5px; }
.tour-pop h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #fff; }
.tour-pop p { margin: 0 0 13px; font-size: 12.8px; line-height: 1.5; color: #c4d2e4; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-spacer { flex: 1; }
.tour-btn { background: #1c2a3a; border: 1px solid #2c4a6e; color: #cfe6ff; border-radius: 7px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tour-btn:hover { background: #244466; border-color: #44aaff; }
.tour-btn.primary { background: #2a5588; border-color: #44aaff; color: #fff; }
.tour-btn.primary:hover { background: #336aa8; }
.tour-skip { background: none; border: none; color: #8593a8; font-size: 12px; cursor: pointer; padding: 7px 4px; }
.tour-skip:hover { color: #cfe6ff; text-decoration: underline; }
#btn-tour { font-weight: 700; padding: 5px 11px; }

/* ===== Tutor Mode (right-docked guided course) ===== */
#btn-tutor.tutor-cta { background: #15463f; border-color: #1f7a6b; color: #7fe8d3; font-weight: 600; }
#btn-tutor.tutor-cta:hover { background: #1b594f; border-color: #2aa890; color: #b8f5e8; }
#btn-tutor.tutor-cta.on { background: #1f7a6b; border-color: #2aa890; color: #eafff9; }

#tutor-panel { position: fixed; top: 44px; right: 0; bottom: 0; width: 384px; max-width: 92vw; z-index: 40;
  display: flex; flex-direction: column; background: rgba(13,17,26,0.97); border-left: 1px solid #243049;
  box-shadow: -14px 0 40px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #e7eef8; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; }
/* When docked inside the right flyout, drop the fixed-position overlay styling
   and behave like the other panels. */
.flyout > #tutor-panel {
  position: static; top: auto; right: auto; bottom: auto; left: auto;
  width: 100%; max-width: none; height: auto;
  flex: 1 1 auto; z-index: auto;
  border-left: none; box-shadow: none;
  background: rgba(18, 18, 28, 0.72);
  border-radius: 8px;
  overflow: hidden;
}
#tutor-panel[hidden] { display: none !important; }
/* When Tutor mode is open, slide the right-aligned panels left of the tutor pane
   (384px wide) so they stay visible and usable during tutor activities. */
body.tutor-open .library-panel,
body.tutor-open .legend-panel { left: auto !important; right: 400px !important; }
@media (max-width: 720px) { body.tutor-open .library-panel, body.tutor-open .legend-panel { display: none; } }
.tutor-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid #1c2536; }
.tutor-titles { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tutor-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #2aa890; font-weight: 700; }
.tutor-h { font-size: 15.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tutor-x { background: none; border: 1px solid #2a3a52; color: #aebdd2; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 17px; line-height: 1; }
.tutor-x:hover { background: #1a2536; color: #fff; }
.tutor-progress { height: 4px; background: #16202f; }
.tutor-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg,#2aa890,#44aaff); transition: width .3s ease; }
.tutor-scroll { flex: 1; overflow-y: auto; padding: 14px; }

.tutor-intro { font-size: 12.8px; line-height: 1.55; color: #b9c6d8; margin-bottom: 12px; }
.tutor-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tutor-stage { display: flex; gap: 10px; align-items: flex-start; background: #141c2a; border: 1px solid #233148; border-radius: 10px; padding: 11px 12px; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.tutor-stage:hover { border-color: #2aa890; background: #16202f; transform: translateY(-1px); }
.tutor-stage.locked { opacity: .5; cursor: not-allowed; }
.tutor-stage.locked:hover { border-color: #233148; background: #141c2a; transform: none; }
.tutor-stage.done { border-color: #1f5a4f; }
.ts-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 7px; border-radius: 999px; white-space: nowrap; align-self: center; }
.ts-badge.beginner { background: #14331f; color: #9be8b0; }
.ts-badge.intermediate { background: #14283f; color: #8fc4ff; }
.ts-badge.advanced { background: #2e1f3f; color: #c9a4ff; }
.ts-main { flex: 1; min-width: 0; }
.ts-title { font-size: 13.5px; font-weight: 700; color: #eef4fb; }
.ts-check { color: #58d6a8; }
.ts-sum { font-size: 11.5px; color: #93a3b8; line-height: 1.4; margin-top: 2px; }
.ts-go { font-size: 11.5px; color: #2aa890; font-weight: 600; align-self: center; white-space: nowrap; }

.tutor-bc { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tutor-link { background: none; border: none; color: #6fb0e8; font-size: 12px; cursor: pointer; padding: 0; }
.tutor-link:hover { color: #9fd0ff; }
.tutor-stepcount { font-size: 11px; color: #7d8ba0; }
.tutor-objs { background: #10212c; border: 1px solid #1d3a44; border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; }
.tutor-objs-t { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: #6fb0a0; font-weight: 700; margin-bottom: 5px; }
.tutor-objs ul { margin: 0; padding-left: 18px; }
.tutor-objs li { font-size: 12px; color: #c2d2e2; line-height: 1.5; }

.tutor-card { background: #131b28; border: 1px solid #243149; border-radius: 11px; padding: 14px 15px; }
.tutor-card.task { border-color: #2a4a44; }
.tutor-card.quiz { border-color: #2c4a6e; }
.tutor-tag { display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.tutor-card.task .tutor-tag { background: #14332c; color: #8fe6cf; }
.tutor-card.quiz .tutor-tag { background: #14283f; color: #8fc4ff; }
.tutor-card h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.tutor-prose { font-size: 13px; line-height: 1.6; color: #c8d5e6; }
.tutor-prose p { margin: 0 0 9px; }
.tutor-prose ul, .tutor-prose ol { margin: 0 0 9px; padding-left: 20px; }
.tutor-prose li { margin: 3px 0; }
.tutor-prose strong { color: #eaf2fb; }
.tutor-prose code { background: #0e1420; border: 1px solid #25324a; border-radius: 4px; padding: 1px 5px; font-size: 12px; color: #9fd0ff; }
.tutor-hint { margin-top: 10px; font-size: 12px; color: #c9b98f; background: rgba(60,48,20,.35); border: 1px solid #4a3f22; border-radius: 7px; padding: 7px 10px; }
.tutor-q { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.45; margin-bottom: 11px; }
.tutor-choices { display: flex; flex-direction: column; gap: 7px; }
.tutor-choice { text-align: left; background: #1a1f2e; border: 1px solid #2a3142; color: #e6ecf6; border-radius: 8px; padding: 10px 12px; font-size: 12.8px; cursor: pointer; }
.tutor-choice:hover:not(:disabled) { background: #232a3c; border-color: #44aaff; }
.tutor-choice.correct { background: #14331f; border-color: #4caf6a; color: #b6f9b6; }
.tutor-choice.wrong { background: #311; border-color: #a55; color: #f9b6b6; }
.tutor-checkmsg { min-height: 16px; font-size: 12px; line-height: 1.45; margin-top: 10px; }
.tutor-checkmsg.ok { color: #8fe6b0; }
.tutor-checkmsg.no { color: #f3a6a6; }

.tutor-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.tutor-foot.center { flex-direction: column; }
.tutor-btn { background: #1c2a3a; border: 1px solid #2c4a6e; color: #cfe6ff; border-radius: 8px; padding: 9px 16px; font-size: 12.8px; font-weight: 600; cursor: pointer; }
.tutor-btn:hover { background: #244466; border-color: #44aaff; }
.tutor-btn.primary { background: #1f7a6b; border-color: #2aa890; color: #eafff9; }
.tutor-btn.primary:hover { background: #258a78; }
.tutor-btn.disabled, .tutor-btn:disabled { opacity: .4; cursor: not-allowed; }

.tutor-done { text-align: center; padding: 18px 6px; }
.tutor-done-badge { width: 56px; height: 56px; border-radius: 50%; background: #15463f; border: 2px solid #2aa890; color: #7fe8d3; font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.tutor-done h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.tutor-done p { font-size: 13px; color: #c2d2e2; margin: 0 0 16px; }
.tutor-alldone { font-size: 12.5px; color: #9be8c8; background: #122a24; border: 1px solid #1f5a4f; border-radius: 8px; padding: 10px 12px; }

@media (max-width: 720px) { #tutor-panel { width: 100vw; max-width: 100vw; } }

/* --- World towns & cities overlay (GeoNames staged labels) --- */
.city-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; }
.city-labels[hidden] { display: none; }
.city-label { position: absolute; top: 0; left: 0; will-change: transform; white-space: nowrap; pointer-events: none; font: 600 11px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #eaf4ff; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.8); }
.city-label.is-capital { color: #ffe39a; font-weight: 700; font-size: 12px; }

/* ===== Measuring tool ===== */
.measure-panel {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: rgba(15, 18, 30, 0.94); border: 1px solid rgba(53,224,255,0.4);
  border-radius: 10px; padding: 10px 12px; z-index: 9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); max-width: 92vw;
}
.measure-panel[hidden] { display: none !important; }
.measure-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.measure-seg { display: inline-flex; border: 1px solid #2c3550; border-radius: 7px; overflow: hidden; }
.measure-seg button {
  background: #161c2c; color: #9fb3d0; border: none; padding: 6px 12px;
  font: 600 12px/1 inherit; cursor: pointer;
}
.measure-seg button + button { border-left: 1px solid #2c3550; }
.measure-seg button:hover { background: #1d2740; color: #cfe0f5; }
.measure-seg button.on { background: #0e3a4a; color: #6fe9ff; }
.measure-units button { padding: 6px 14px; }
.measure-clear {
  background: #2a1622; color: #ff9bbd; border: 1px solid #5a2740; border-radius: 7px;
  padding: 6px 12px; font: 600 12px/1 inherit; cursor: pointer; margin-left: auto;
}
.measure-clear:hover { background: #3a1d2e; color: #ffc0d6; }
.measure-readout { margin-top: 8px; font-size: 12px; color: #bcd0ea; text-align: center; min-height: 14px; }

.measure-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 8; }
.measure-labels[hidden] { display: none; }
.measure-label {
  position: absolute; top: 0; left: 0; will-change: transform; white-space: nowrap; pointer-events: none;
  padding: 3px 8px; border-radius: 999px; background: rgba(8,16,26,0.9);
  border: 1px solid rgba(53,224,255,0.55); color: #d8f4ff;
  font: 700 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.measure-hover { border-color: rgba(255,210,77,0.7); color: #ffe7ad; }
.measure-close { margin-left: 6px; align-self: center; font-size: 18px; color: #9fb0c8; }
.measure-close:hover { background: rgba(255,255,255,0.08); color: #fff; }