/* ============================================================
   Континентальный атлас — карта маршрута 2026
   Restrained editorial cartography
   ============================================================ */

/* ----- Gotham Pro ----- */
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gotham Pro';
  src: url('fonts/GothamPro-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* From the supplied swatch — restrained selection */
  --paper:        #E4DCCF;  /* cream paper */
  --paper-soft:   #ece6da;
  --paper-deep:   #cdc3b1;
  --ink:          #1B2F34;  /* deep teal-navy */
  --ink-soft:     #1B2F3422;
  --olive:        #85876C;  /* warm olive — secondary line */
  --forest:       #465B48;  /* deep forest — borders/details */
  --rust:         #BC7C6C;  /* terracotta accent — route */
  --steel:        #1E6178;  /* deep teal — water */

  --font: 'Gotham Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ocean: #1E6178;
  --ocean-grad-1: #27718A;
  --ocean-grad-2: #1E6178;
  --ocean-grad-3: #164E60;
  --hover-fill: #FBF4EC;
  --plate-fill: #fff;
  --label-fill: #1B2F34;
  --accent: #5DACB1;
  --grat-color: white;
  --compass-fill: white;
  --frame: #6c6c78;
  --frame-bg: #20242a;
  --surf-stroke: rgba(228, 220, 207, 0.62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
}

#root {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* ===== Atlas root ===== */
.atlas-root {
  position: absolute;
  inset: 0;
  background: var(--frame-bg);
  overflow: hidden;
}

.map-box {
  position: absolute;
  inset: 24px;
  background: var(--ocean);
  border: 1px solid var(--frame);
  border-radius: 10px;
  overflow: hidden;
  transition: filter 240ms ease, transform 240ms ease;
}
.map-box::before,
.map-box::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--ink);
  opacity: 0.55;
}
.map-box::before { top: 6px; left: 6px; right: 6px; bottom: 6px; opacity: 0.18; }
.map-box::after  { display: none; }

.atlas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  transition: transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: transform;
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity 520ms ease,
    filter 520ms ease,
    transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.atlas-root.is-ready .atlas-svg {
  opacity: 1;
  filter: blur(0);
}
.atlas-svg.zoomed { cursor: grab; }
.atlas-svg.grabbing { cursor: grabbing; }

/* ===== Marker — clean radar-ping pulse ===== */
.marker-ping {
  transform-origin: center;
  transform-box: fill-box;
  animation: ping 3.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}
.marker-ping.delay-1 { animation-delay: -1.2s; }
.marker-ping.delay-2 { animation-delay: -2.4s; }

@keyframes ping {
  0%   { transform: scale(0.35); opacity: 0; }
  10%  { opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}

.marker-core {
  transform-origin: center;
  transform-box: fill-box;
  animation: coreBreathe 3.6s ease-in-out infinite;
}
@keyframes coreBreathe {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}

.atlas-root.no-motion .marker-ping,
.atlas-root.no-motion .marker-core { animation: none !important; }
.atlas-root.no-motion .marker-ping { opacity: 0 !important; }

/* ===== Route — static line, single subtle dash march ===== */
.route-march {
  animation: dashMarch 60s linear infinite;
}
@keyframes dashMarch { to { stroke-dashoffset: -200; } }
.atlas-root.no-motion .route-march { animation: none !important; }

/* ===== Compass rose — living needle on hover ===== */
.compass-rose .compass-needle {
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
}
.compass-rose:hover .compass-needle,
.compass-rose.is-open .compass-needle {
  -webkit-animation: compassSway 2.6s ease-in-out infinite;
  animation: compassSway 2.6s ease-in-out infinite;
}
@-webkit-keyframes compassSway {
  0%   { -webkit-transform: rotate(0deg); }
  20%  { -webkit-transform: rotate(-6deg); }
  45%  { -webkit-transform: rotate(4.5deg); }
  68%  { -webkit-transform: rotate(-2.5deg); }
  85%  { -webkit-transform: rotate(1.2deg); }
  100% { -webkit-transform: rotate(0deg); }
}
@keyframes compassSway {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-6deg); }
  45%  { transform: rotate(4.5deg); }
  68%  { transform: rotate(-2.5deg); }
  85%  { transform: rotate(1.2deg); }
  100% { transform: rotate(0deg); }
}
.atlas-root.no-motion .compass-rose:hover .compass-needle { -webkit-animation: none !important; animation: none !important; }

/* ===== Coastline surf — wave washing onto the shore (clipped to land) ===== */
.surf { will-change: stroke-opacity, stroke-width; }
.surf-1 { animation: surf 5.5s ease-in-out infinite; }
.surf-2 { animation: surf 5.5s ease-in-out infinite; animation-delay: -2.75s; }
@keyframes surf {
  0%   { stroke-opacity: 0; stroke-width: 1; }
  35%  { stroke-opacity: 0.28; }
  70%  { stroke-opacity: 0.16; stroke-width: 7; }
  100% { stroke-opacity: 0; stroke-width: 9; }
}
.atlas-root.no-motion .surf { animation: none !important; stroke-opacity: 0 !important; }

/* ===== City name label — hover effect ===== */
.city-label {
  cursor: pointer;
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.16, 0.84, 0.44, 1);
  transition: transform 200ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.city-plate {
  fill: var(--plate-fill);
  stroke: var(--ink);
  transition: stroke 200ms ease, fill 200ms ease;
}
.city-label:hover {
  -webkit-transform: scale(1.09);
  transform: scale(1.09);
}
.city-label:hover .city-plate {
  stroke: var(--rust);
  fill: var(--hover-fill);
}

/* ===== Decorative sea monster near the compass ===== */
.sea-monster {
  opacity: 0;
  -webkit-transform: translateY(80px);
  transform: translateY(80px);
  -webkit-transition: opacity 800ms ease, -webkit-transform 1100ms cubic-bezier(0.16, 0.84, 0.44, 1);
  transition: opacity 800ms ease, transform 1100ms cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: 0s;
}
.compass-rose:hover .sea-monster,
.compass-rose.is-open .sea-monster {
  opacity: 0.92;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition-delay: 480ms;
}
.atlas-root.no-motion .compass-rose:hover .sea-monster {
  transition-delay: 0s;
}

/* ripple rings on the water */
.ripple {
  transform-box: fill-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  opacity: 0;
}
.compass-rose:hover .ripple-1,
.compass-rose.is-open .ripple-1 { -webkit-animation: ripple 3s ease-out 1000ms infinite; animation: ripple 3s ease-out 1000ms infinite; }
.compass-rose:hover .ripple-2,
.compass-rose.is-open .ripple-2 { -webkit-animation: ripple 3s ease-out 1900ms infinite; animation: ripple 3s ease-out 1900ms infinite; }
@-webkit-keyframes ripple {
  0%   { -webkit-transform: scale(0.3); opacity: 0; }
  22%  { opacity: 0.55; }
  100% { -webkit-transform: scale(2.6); opacity: 0; }
}
@keyframes ripple {
  0%   { transform: scale(0.3); opacity: 0; }
  22%  { opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}
.atlas-root.no-motion .compass-rose:hover .ripple-1,
.atlas-root.no-motion .compass-rose:hover .ripple-2 { -webkit-animation: none !important; animation: none !important; }

/* ===== Country hover ===== */
.country {
  transition: fill 220ms ease;
  cursor: pointer;
}

/* ===== Hover card ===== */
.hover-card {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  /* (x,y) is the city; we position children relative to this point */
}

.hover-card-inner {
  pointer-events: auto;
  position: absolute;
  bottom: 14px;
  left: 0;
  transform: translateX(-50%);
  transform-origin: bottom center;
  width: min(440px, calc(100vw - 72px));
  min-width: 0;
  padding: 20px 22px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(27,47,52,0.35);
  animation: cardEnter 240ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.hover-card-pin {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-50%);
  animation: pinEnter 280ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  transform-origin: bottom center;
  display: block;
  /* hide the bottom 1px of inner card's border so the pin merges cleanly */
}
@keyframes cardEnter {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes pinEnter {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 10px;
}
.hc-flag {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 3px 6px 2px;
  background: var(--ink);
  color: var(--paper);
  font-size: 9px;
}
.hc-country { letter-spacing: 0.14em; }
.hc-dot { width: 3px; height: 3px; background: currentColor; opacity: 0.5; }

.hc-name {
  font-family: var(--font);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.hc-dates {
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--rust);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.hc-desc {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 32ch;
  text-wrap: pretty;
  font-weight: 300;
}

/* ===== Matches table inside card ===== */
.hc-matches {
  border-top: 1px solid var(--ink-soft);
  padding-top: 12px;
  margin-bottom: 14px;
  display: grid;
  gap: 8px;
}
.hc-matches-head {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 500;
  margin-bottom: 2px;
}
.hc-match-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ink-soft);
}
.hc-match-row:last-child { border-bottom: none; }
.hc-match-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rust);
  text-transform: uppercase;
  white-space: nowrap;
}
.hc-match-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.hc-team {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hc-cc {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 4px 1px;
  background: var(--ink);
  color: var(--paper);
}
.hc-vs {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.7;
}
.hc-predict {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  border: none;
  border-radius: 14px;
  background: #5DACB1;
  color: #1B2F34;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 180ms ease, transform 180ms ease;
}
.hc-predict:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hc-predict:active { transform: translateY(0); }

.hc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1B2F34;
  background: linear-gradient(135deg, #76C0C5 0%, #5DACB1 55%, #4E9499 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(93,172,177,0.6);
  transition: filter 200ms ease, transform 200ms ease;
}
.hc-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.hc-cta:active { transform: translateY(0); }

.hc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hc-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 10px 14px 9px;
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.hc-next:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--ink-soft);
}

/* ===== Chrome ===== */
.chrome {
  position: absolute;
  z-index: 20;
  color: var(--ink);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.top-left    { top: 56px; left: 56px; }
.top-right   { top: 32px; right: 40px; }
.top-center  { top: 32px; left: 50%; transform: translateX(-50%); }
.top-center  { top: 72px; }
.bottom-left { bottom: 32px; left: 40px; }
.bottom-right{ bottom: 32px; right: 40px; }

.brand {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.brand-box {
  padding: 22px 26px 20px;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  position: relative;
  z-index: 25;
  box-shadow: 0 10px 24px -12px rgba(27,47,52,0.25);
}
.brand-box::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ink);
  opacity: 0.18;
  pointer-events: none;
}
.brand-pill {
  padding: 0 24px;
  background: #5DACB1;
  border: none;
  border-radius: 999px !important;
  position: relative;
  z-index: 25;
  box-shadow: 0 10px 24px -12px rgba(27,47,52,0.25);
}
.brand-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--rust);
  text-transform: uppercase;
  margin-bottom: 14px;
  white-space: nowrap;
}
.brand-title {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.brand-sub {
  font-family: var(--font);
  font-weight: 400;
  font-size: 12px;
  color: var(--forest);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-transform: uppercase;
}
.brand-rule {
  width: 100%;
  height: 1px;
  background: var(--ink);
  opacity: 0.45;
  margin: 14px 0 12px;
}

.meta {
  text-align: right;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  min-width: 240px;
}
.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.meta-row .k {
  color: var(--forest);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9.5px;
  font-weight: 500;
}
.meta-row .v {
  color: var(--ink);
  font-weight: 700;
}

/* Legend */
.legend {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
}
.legend-title {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  font-weight: 500;
  margin-bottom: 2px;
}
.legend-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-weight: 400;
}
.legend-glyph {
  position: relative;
  width: 22px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lg-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink);
}
.lg-ring {
  position: absolute; inset: 0;
  border: 1px solid var(--rust);
  border-radius: 50%;
}
.lg-tiny { width: 3px; height: 3px; border-radius: 50%; background: var(--forest); opacity: 0.7; }
.lg-line {
  width: 22px; height: 1.6px;
  background: var(--rust);
}

/* Bottom-right cluster */
.zoom-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}
.focused-tag {
  padding: 10px 14px;
  background: var(--paper-soft);
  border: 1px solid var(--ink);
  display: grid;
  gap: 3px;
}
.ft-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.ft-sub {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--rust);
  text-transform: uppercase;
  font-weight: 500;
}
.zoom-btn {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: #5DACB1;
  color: #1B2F34;
  cursor: pointer;
  transition: filter 200ms ease, transform 200ms ease;
}
.zoom-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.zoom-btn.active {
  background: #5DACB1;
  color: #1B2F34;
}

/* Hint */
.chrome.hint {
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 5px;
  max-width: calc(100% - 64px);
  background: rgba(32, 36, 42, 0.72);
  border: 1px solid rgba(108, 108, 120, 0.52);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.68;
  white-space: nowrap;
  font-weight: 500;
  text-align: center;
}
.hint-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.card-open .map-box {
  filter: brightness(0.88) saturate(0.94);
}

.hover-card.side-left,
.hover-card.side-right {
  top: auto !important;
}
.hover-card.side-left .hover-card-inner,
.hover-card.side-right .hover-card-inner {
  position: relative;
  left: 0;
  bottom: 0;
  transform: none;
  width: 100%;
}
.hover-card.side-left .hover-card-inner { transform-origin: bottom left; }
.hover-card.side-right .hover-card-inner { transform-origin: bottom right; }

.atlas-loader {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: var(--ocean);
  color: var(--paper-soft);
  transition: opacity 520ms ease;
}
.atlas-loader__panel {
  width: min(420px, calc(100vw - 56px));
  display: grid;
  gap: 14px;
}
.atlas-loader__kicker,
.atlas-loader__meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.atlas-loader__line {
  height: 2px;
  background: rgba(228, 220, 207, 0.18);
  overflow: hidden;
}
.atlas-loader__line span {
  display: block;
  height: 100%;
  background: var(--paper-soft);
  transition: width 180ms ease;
}
.atlas-loader__meta {
  display: flex;
  justify-content: space-between;
  color: rgba(228, 220, 207, 0.72);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .top-left .brand-title { font-size: 26px; }
  .top-right { display: none; }
  .chrome.hint {
    bottom: 72px;
    justify-content: center;
    font-size: 8.5px;
  }
  .hover-card {
    position: fixed;
    left: 0 !important;
    top: auto !important;
    bottom: 0;
    width: 100%;
    z-index: 40;
  }
  .hover-card-inner {
    position: fixed !important;
    left: 50% !important;
    bottom: 24px !important;
    transform: translateX(-50%) scale(1) !important;
    min-width: 0;
    width: calc(100vw - 48px) !important;
    max-width: 520px;
    max-height: calc(100svh - 56px);
    overflow-y: auto;
    padding: 18px 18px 16px;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .map-box { inset: 10px; border-radius: 12px; }
  .map-box::before { display: none; }

  .top-center { top: 30px; }
  .brand-pill { height: 38px !important; padding: 0 18px !important; }
  .brand-title { font-size: 12px !important; }

  /* hover card → fixed bottom sheet, larger touch targets */
  .hover-card { position: fixed; left: 0 !important; top: auto !important; bottom: 0; width: 100%; z-index: 40; }
  .hover-card-inner {
    position: fixed !important;
    left: 50% !important;
    bottom: 10px !important;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1) !important;
    min-width: 0;
    width: calc(100vw - 20px) !important;
    max-width: 460px;
    max-height: calc(100svh - 20px);
    overflow-y: auto;
    padding: 16px 14px 14px;
    -webkit-overflow-scrolling: touch;
  }
  @keyframes cardEnter {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  .hc-predict { padding: 9px 12px 8px; }
  .hc-name {
    padding-right: 34px;
    font-size: 19px;
  }
  .hc-desc {
    max-width: none;
    margin-bottom: 10px;
  }
  .hc-matches {
    gap: 4px;
    padding-top: 9px;
    margin-bottom: 10px;
  }

  /* match rows stack: date+teams on top, button full-width below */
  .hc-match-row {
    grid-template-columns: auto 1fr;
    row-gap: 8px;
    column-gap: 10px;
    padding: 10px 0;
  }
  .hc-match-date { grid-column: 1; grid-row: 1; }
  .hc-match-teams { grid-column: 2; grid-row: 1; white-space: normal; overflow: visible; }
  .hc-predict { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: center; }
  .hc-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hc-cta,
  .hc-next {
    width: 100%;
  }

  .bottom-right { bottom: 16px; right: 14px; }
  .zoom-btn { padding: 12px 18px; }
  .atlas-backdrop { background: rgba(0,0,0,0.32); }

  /* legend/hint not useful on mobile */
  .chrome.hint { display: none; }
}

/* ===== Dark Mode ===== */
.atlas-root.dark-mode {
  --paper: #0c0c14;
  --paper-soft: #242a33;
  --paper-deep: #08080f;
  --ink: #d7d9dc;
  --ink-soft: rgba(215,217,220,0.16);
  --forest: #9aa2a8;
  --rust: #d58b7e;
  --ocean: #0a1b2a;
  --ocean-grad-1: #123149;
  --ocean-grad-2: #0b2133;
  --ocean-grad-3: #071522;
  --hover-fill: #29313b;
  --plate-fill: #242a33;
  --label-fill: #f4f4f6;
  --accent: #6bc0c6;
  --grat-color: #5a5a70;
  --compass-fill: #a0a0b0;
  --frame: #59636b;
  --frame-bg: #111820;
  --surf-stroke: rgba(23, 53, 74, 0.86);
}
.atlas-root.dark-mode .chrome.hint {
  background: rgba(17, 24, 32, 0.78);
  border-color: rgba(89, 99, 107, 0.64);
}
.atlas-root.dark-mode .map-box {
  border-color: var(--frame);
}
.atlas-root.dark-mode .brand-pill {
  background: linear-gradient(135deg, #2a5a5e 0%, #1e4a4e 55%, #163a3e 100%) !important;
}
.atlas-root.dark-mode .zoom-btn,
.atlas-root.dark-mode .hc-predict {
  background: #2a6a6e;
  color: #e0e0e0;
}
.atlas-root.dark-mode .hc-cta {
  background: linear-gradient(135deg, #2a5a5e 0%, #1e4a4e 55%, #163a3e 100%);
  color: #e0e0e0;
}
.atlas-root.dark-mode .meta,
.atlas-root.dark-mode .legend,
.atlas-root.dark-mode .focused-tag {
  background: var(--paper-soft);
  border-color: rgba(255,255,255,0.12);
}
.atlas-root.dark-mode .brand-box {
  background: var(--paper-soft);
  border-color: rgba(255,255,255,0.12);
}
.atlas-root.dark-mode .city-label:hover .city-plate {
  stroke: var(--rust);
  fill: var(--hover-fill);
}

/* ===== Backdrop overlay ===== */
.atlas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: backdropIn 220ms ease both;
}
@media (max-width: 767px) {
  .atlas-backdrop { background: rgba(0,0,0,0.32); }
}
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== Close button on hover card ===== */
.hover-card-inner { position: relative; }
.hc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
  background: transparent;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  pointer-events: auto;
  z-index: 2;
  padding: 0;
}
.hc-close:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--ink-soft);
}
.atlas-root.dark-mode .hc-close {
  border-color: rgba(255,255,255,0.24);
  color: #c8c4b8;
}
.atlas-root.dark-mode .hc-close:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
}