/* ============================================================
   World Cup Pulse — FLAT 2D map styles.
   Ultrahuman premium-dark theme: a soft cool-charcoal ground
   (#0E1013, not pure black), #181B20 land, low-contrast borders,
   a refined emerald accent (#4FCF8C) with muted amber/slate data
   colors, Geist Mono typography, and square dark-glass panels.

   Loaded AFTER pulse.css so it wins on overlap. This file owns
   the choropleth, tooltip, legend, page chrome, and a light
   re-skin of the reused JARVIS country card (.jv-panel) so the
   whole view reads as one ultraverse-style surface.
   ============================================================ */

/* ── ultraverse palette tokens (mirrors src/app/globals.css dark theme
      + src/components/map/index.tsx hardcoded map hexes) ───────────── */
:root {
  /* Ultrahuman premium-dark re-theme: a cool charcoal ground (not pure black)
     with desaturated, on-brand data colors — replaces the old ultraverse
     true-black + acid-green/gold scheme that read as too harsh and too bright. */
  --uv-black:      #0E1013;   /* map + page ground — soft cool charcoal, not #000 */
  --uv-panel:      #101216;   /* card / popover surface */
  --uv-land:       #181B20;   /* country fill / no-data land */
  --uv-land-hi:    #21252B;   /* hovered land lift */
  --uv-border:     #2A2E35;   /* country borders */
  --uv-border-ui:  #2F343B;   /* panel borders */
  --uv-hairline:   rgba(255,255,255,0.10);
  --uv-hover-edge: #B8BDC6;   /* hovered country stroke — soft, not stark white */
  --uv-fg:         rgba(255,255,255,0.92);  /* foreground */
  --uv-fg-dim:     rgba(255,255,255,0.62);  /* muted foreground */
  --uv-fg-faint:   rgba(255,255,255,0.38);
  --uv-green:      #4FCF8C;   /* refined emerald — data/status accent (was acid #33FF00) */
  --uv-green-soft: rgba(79,207,140,0.70);
  --uv-gold:       #E0A35C;   /* muted amber — recovery warning (was #FFD700) */
  --uv-red:        #D9805E;   /* muted terracotta — recovery hit (was #FF3333) */
  --uv-blue:       #6E90C4;   /* soft slate-blue — wearer presence (was #4A9EFF) */
  --uv-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  --uv-sans: 'Geist', 'Geist Mono', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --flat-bg: #0E1013;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--uv-black);
  color: var(--uv-fg);
  /* ultraverse sets BOTH sans + mono to Geist Mono — adopt the same
     monospace-everywhere treatment for the technical, on-brand look. */
  font-family: var(--uv-mono);
  font-feature-settings: 'tnum' 1, 'ss01' 1;  /* tabular numerals, like the dashboard */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ultraverse hides scrollbars by default, thin white on hover */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
*::-webkit-scrollbar-track { background: transparent; }

@keyframes uv-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Page scaffold ── */
.flat-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--uv-black);
}

/* Top bar — ultraverse glass formula: bg-white/10 + #313131 1px border +
   backdrop-blur, square corners, Geist Mono labels. */
.flat-top {
  flex: 0 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--uv-border);
  z-index: 30;
}
.flat-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.flat-brand-mark { width: 24px; height: 18px; flex-shrink: 0; display: block; }
.flat-brand-mark path { fill: #ffffff; }
.flat-brand img { height: 15px; display: block; opacity: 0.95; }
.flat-brand-name {
  font: 600 12px/1 var(--uv-mono); letter-spacing: .02em; color: #fff;
}
.flat-brand-sep { color: rgba(255,255,255,0.2); font-size: 13px; font-weight: 300; }
.flat-brand-title {
  font: 600 11px/1 var(--uv-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--uv-fg-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flat-tag {
  font: 500 10px/1 var(--uv-mono); letter-spacing: .04em;
  color: var(--uv-fg-faint);
  border: 1px solid var(--uv-border); border-radius: 4px;
  padding: 5px 9px; white-space: nowrap;
}
.flat-live { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--uv-mono); letter-spacing: .04em; color: var(--uv-fg-dim); text-transform: uppercase; }
.flat-live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--uv-green);
  box-shadow: 0 0 8px rgba(79,207,140,0.6); animation: flat-pulse 2s ease-in-out infinite;
}
@keyframes flat-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Header right group: live status + Science + Get the Ring CTA. */
.flat-right { display: flex; align-items: center; gap: 14px; }
@media (max-width: 600px) { .flat-right { gap: 10px; } .flat-live { display: none; } }

/* ── Map stage — full-height; the JARVIS card docks relative to .wc-canvas ── */
.flat-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.wc-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* premium depth: a subtle center lift fading to deep charcoal at the edges,
     so the (land-filled) map reads as a crafted surface, not a flat slab. */
  background: radial-gradient(125% 100% at 50% 36%, #16191F 0%, #0E1013 52%, #0A0B0E 100%);
}
/* The flat page's map element is BOTH .wc-canvas and #map-container, and
   pulse.css sets `#map-container { height:480px }` (ID specificity) which beat
   our inset:0 and capped the map at 480px — that was the "void below the map"
   bug. Re-assert full height with matching specificity + !important. */
#map-container.wc-canvas { height: 100% !important; min-height: 0 !important; }

/* ── On-arrival onboarding overlay (first visit only) ── */
.wcp-onb {
  position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s;
}
.wcp-onb.open { opacity: 1; }
.wcp-onb.closing { opacity: 0; }
.wcp-onb-card {
  width: 440px; max-width: 100%; background: rgba(14,15,18,0.97); border: 1px solid #2D2D2D;
  border-radius: 16px; padding: 26px 26px 22px; color: #fff;
  font-family: var(--uv-mono, ui-monospace, monospace);
  transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.wcp-onb.open .wcp-onb-card { transform: none; }
.wcp-onb-eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--uv-green, #0eff27); }
.wcp-onb-title { font-size: 24px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; margin: 10px 0 12px;
  color: #fff; font-family: var(--uv-sans, var(--uv-mono, sans-serif)); }
.wcp-onb-lede { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.7); margin: 0 0 18px; }
.wcp-onb-lede b { color: #fff; font-weight: 600; }
.wcp-onb-how { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 10px; }
.wcp-onb-keys { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wcp-onb-keys span { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.82); }
.wcp-onb-keys .k { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.wcp-onb-keys .k-gold { background: #E0A35C; } .wcp-onb-keys .k-green { background: #4FCF8C; } .wcp-onb-keys .k-blue { background: #6E90C4; }
.wcp-onb-tap { font-size: 12.5px; color: rgba(255,255,255,.6); margin: 0 0 18px; }
.wcp-onb-go { appearance: none; width: 100%; padding: 12px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--uv-green, #0eff27); color: #04210a; font: 700 13px/1 var(--uv-mono, sans-serif); letter-spacing: .03em; transition: filter .15s; }
.wcp-onb-go:hover { filter: brightness(1.08); }
.wcp-onb-foot { font-size: 10px; color: rgba(255,255,255,.35); text-align: center; margin-top: 14px; letter-spacing: .02em; }
@media (max-width: 480px) { .wcp-onb-card { padding: 22px 18px 18px; } .wcp-onb-title { font-size: 21px; } }

/* ── "Tonight's pulse" standouts inside the match panel ── */
.fm-pulse { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 4px; }
.fp-h { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 7px; }
.fp-h:first-child { margin-top: 0; }
.fp-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
.fp-flag { flex-shrink: 0; }
.fp-name { flex: 1; min-width: 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-bars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.fp-seg { width: 6px; height: 9px; border-radius: 1px; background: rgba(255,255,255,0.16); }
.fp-seg.on { background: rgba(255,255,255,0.6); }
.fp-word { font-size: 10px; color: rgba(255,255,255,0.55); white-space: nowrap; flex-shrink: 0; text-align: right; min-width: 78px; }
.fp-word.good { color: #4FCF8C; } .fp-word.warn { color: #E0A35C; } .fp-word.bad { color: #D9805E; }

/* Date-led header for the pulse card + a refresh animation so a day-swap reads as new. */
.fm-daterow { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.fm-daterow .fm-day { font: 700 15px/1 var(--uv-sans, var(--uv-mono, sans-serif)); letter-spacing: -.01em; color: #fff; }
.flat-match .fm-daterow .fm-kicker { margin-bottom: 0; }
/* collapse toggle — clears the top-left so the map is unobstructed */
.fm-toggle {
  margin-left: auto; flex: 0 0 auto; appearance: none; cursor: pointer;
  pointer-events: auto;   /* .flat-match is pointer-events:none (map clicks pass through) — re-enable the button */
  width: 20px; height: 20px; border-radius: 5px; font-size: 9px; line-height: 1;
  background: rgba(255,255,255,0.06); border: 1px solid var(--uv-border); color: rgba(255,255,255,0.7);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .16s ease;
}
.fm-toggle:hover { background: rgba(255,255,255,0.13); color: #fff; }
.flat-match.collapsed .fm-toggle { transform: rotate(180deg); }
/* When collapsed, the whole chip is a tap target to expand (like the carousel tab). */
.flat-match.collapsed { pointer-events: auto; cursor: pointer; }
.flat-match.collapsed .fm-daterow { margin-bottom: 0; }
.flat-match.collapsed .fm-pulse,
.flat-match.collapsed .fm-meta,
.flat-match.collapsed .fm-hint { display: none; }
@keyframes fm-refresh { 0% { opacity: 0; transform: translateY(6px) scale(.99); } 100% { opacity: 1; transform: none; } }
.flat-match.fm-refresh { animation: fm-refresh .45s cubic-bezier(.16,1,.3,1); }
/* The .wc-canvas gradient already gives the map depth; this adds a whisper of
   extra luminance at the very center, fading out well before the charcoal edges
   so the (land-filled) map never reads as a flat slab. */
.wc-canvas::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, rgba(255,255,255,0.022), transparent 70%);
  pointer-events: none; z-index: 0;
}

.flat-svg { display: block; width: 100%; height: 100%; cursor: grab; position: relative; z-index: 1; }
.flat-svg:active { cursor: grabbing; }
/* Ocean is transparent so the charcoal .wc-canvas gradient shows through as the
   sea (gentle depth). The map's land fills the viewport, so any residual margin
   reads as deep charcoal sea. (transparent still captures the click-to-close,
   unlike fill:none.) */
.flat-ocean { fill: transparent; pointer-events: all; }

/* Countries — whole polygon is the hit target. Theme values come from the
   tokens above: --uv-land fill, --uv-border @1px, --uv-hover-edge on hover. */
.country {
  stroke: var(--uv-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 200ms ease, stroke 160ms ease, filter 160ms ease;
}
.country.has-data { cursor: pointer; }
.country.is-hover {
  stroke: var(--uv-hover-edge);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
.country.is-active {
  stroke: var(--uv-green);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 9px rgba(79,207,140,0.55));
}

/* ── City dots — the interactive real-geo layer: size = community, color = avg sleep.
   Translucent + dark-stroked so dense clusters (India/US/Europe) read as a glow, not mud. */
.flat-cities circle.city {
  stroke: rgba(8,10,13,0.85);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
  cursor: pointer;
  transition: opacity 160ms ease, stroke-width 160ms ease;
}
.flat-cities circle.city.is-hover { opacity: 1; stroke: #fff; stroke-width: 1.2; }
.flat-cities circle.city.is-active { stroke: var(--uv-green); stroke-width: 1.7; opacity: 1; }
/* Match-night accent: the standout cities for the selected night get a white ring + pulse. */
.flat-cities circle.city.is-accent { stroke: #fff; stroke-width: 1.2; opacity: 1; animation: city-pulse 2.2s ease-in-out infinite; }
@keyframes city-pulse {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .flat-cities circle.city.is-accent { animation: none; } }

.flat-tip .ft-name .ft-cc { color: var(--uv-fg-dim); font-weight: 400; margin-left: 5px; letter-spacing: 0; }
/* Pill standout rows: small country tag after the city name. */
.fp-name .fp-cc { color: var(--uv-fg-dim); font-weight: 400; font-size: 9.5px; margin-left: 5px; text-transform: uppercase; letter-spacing: .03em; }

/* ── Hover tooltip — ultraverse tooltip: dark #222 bg, gold accent edge ── */
.flat-tip {
  position: fixed;
  display: none;
  z-index: 400;
  pointer-events: none;
  background: rgba(16,16,18,0.96);
  border: 1px solid var(--uv-border);
  border-left: 2px solid var(--uv-gold);
  border-radius: 6px;
  padding: 8px 11px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 230px;
}
.flat-tip .ft-name {
  display: block;
  font: 600 12px/1.2 var(--uv-mono);
  letter-spacing: .01em;
  color: #fff;
  margin-bottom: 4px;
}
.flat-tip .ft-metric { display: block; font: 400 11px/1.35 var(--uv-mono); color: var(--uv-fg-dim); }

/* ── Legend — ultraverse square-glass card, Geist Mono, tidy rows ── */
.flat-legend {
  position: absolute;
  bottom: 16px; left: 16px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--uv-border);
  border-radius: 8px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  pointer-events: none; z-index: 25;
  animation: uv-fade-in .4s ease-out both;
}
.flat-legend .gl-title {
  font: 600 9px/1 var(--uv-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--uv-fg-faint); margin-bottom: 2px;
}
.flat-legend .gl-item {
  display: flex; align-items: center; gap: 9px;
  font: 400 10.5px/1.1 var(--uv-mono); letter-spacing: .02em;
  color: var(--uv-fg-dim);
}
.flat-legend .gl-swatch {
  width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
/* Aligned to the actual choropleth fills produced by worldmap-flat.js */
.gl-orange { background: var(--uv-gold); border-color: rgba(224,163,92,0.4); box-shadow: 0 0 7px rgba(224,163,92,0.45); }
.gl-teal   { background: var(--uv-green); border-color: rgba(79,207,140,0.4); box-shadow: 0 0 7px rgba(79,207,140,0.45); }
.gl-blue   { background: var(--uv-blue);  border-color: rgba(110,144,196,0.4); }
.gl-faint  { background: var(--uv-land); border: 1px solid var(--uv-border); }

/* ── Match pill (top-left context) — ultraverse square dark-glass ── */
.flat-match {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 25;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--uv-border);
  border-radius: 10px;
  padding: 13px 15px;
  max-width: 280px;
  pointer-events: none;
  animation: uv-fade-in .4s ease-out both;
}
.flat-match .fm-kicker {
  font: 600 8.5px/1 var(--uv-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--uv-green); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.flat-match .fm-kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--uv-green); box-shadow: 0 0 6px rgba(79,207,140,0.8);
}
.flat-match .fm-teams { font: 600 14px/1.25 var(--uv-mono); color: #fff; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; letter-spacing: -0.01em; }
.flat-match .fm-vs { color: var(--uv-fg-faint); font-weight: 400; font-size: 11px; }
.flat-match .fm-meta { font: 400 11px/1.4 var(--uv-mono); color: var(--uv-fg-dim); margin-top: 5px; }
.flat-match .fm-rec { font: 500 11.5px/1.35 var(--uv-mono); margin-top: 8px; letter-spacing: .01em; }
.flat-match .fm-hint {
  font: 400 10px/1.35 var(--uv-mono); color: var(--uv-fg-faint); margin-top: 9px;
  padding-top: 8px; border-top: 1px solid var(--uv-hairline);
}

/* ── Connector line (fallback in case pulse.css isn't present) ── */
.wc-conn-line { stroke: var(--uv-green); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.8; }
.wc-conn-dot  { fill: var(--uv-green); opacity: 0.95; }

/* ── Error state ── */
.flat-error {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.flat-error .fe-card {
  background: var(--uv-panel);
  border: 1px solid rgba(217,112,94,0.35);
  border-radius: 10px; padding: 20px 24px; text-align: center; max-width: 380px;
}
.flat-error .fe-title { font: 600 14px/1.2 var(--uv-mono); color: #fff; margin-bottom: 8px; letter-spacing: .02em; }
.flat-error .fe-msg { font: 400 12px/1.5 var(--uv-mono); color: var(--uv-fg-dim); }

/* ============================================================
   Re-skin of the reused JARVIS country card (.jv-panel et al.,
   built by dashboard.js, base styles in pulse.css). flat.css is
   loaded last, so equal-specificity rules here win. We keep the
   HUD structure + animations and re-tune type/borders/accents to
   the premium-dark surface (Geist Mono, soft borders, emerald accent).
   ============================================================ */
.jv-panel {
  background: rgba(10,10,12,0.97);
  border: 1px solid var(--uv-border-ui);
  border-radius: 8px;
  font-family: var(--uv-mono);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02),
              0 0 40px rgba(0,0,0,0.5),
              0 24px 64px rgba(0,0,0,0.85);
}
/* Better-than-baseline → ultraverse green edge */
.jv-panel.jv-positive {
  border-color: rgba(79,207,140,0.45);
  box-shadow: 0 0 0 1px rgba(79,207,140,0.05),
              0 0 40px rgba(79,207,140,0.08),
              0 24px 64px rgba(0,0,0,0.85);
}
/* Recovery hit → clean amber/gold edge (ultraverse warning tone) */
.jv-panel.jv-impact {
  border-color: rgba(224,163,92,0.42);
  box-shadow: 0 0 0 1px rgba(224,163,92,0.05),
              0 0 40px rgba(217,112,94,0.10),
              0 24px 64px rgba(0,0,0,0.85);
}
/* Corner brackets + scanline retinted to the green accent */
.jv-corner-tl, .jv-corner-tr, .jv-corner-bl, .jv-corner-br { border-color: rgba(79,207,140,0.6) !important; }
.jv-panel.jv-impact .jv-corner-tl,
.jv-panel.jv-impact .jv-corner-tr,
.jv-panel.jv-impact .jv-corner-bl,
.jv-panel.jv-impact .jv-corner-br { border-color: rgba(224,163,92,0.65) !important; }
.jv-scanline {
  background: linear-gradient(90deg, transparent 0%, rgba(79,207,140,0.85) 20%, rgba(79,207,140,1) 50%, rgba(79,207,140,0.85) 80%, transparent 100%);
}
.jv-panel.jv-impact .jv-scanline {
  background: linear-gradient(90deg, transparent 0%, rgba(224,163,92,0.85) 20%, rgba(224,163,92,1) 50%, rgba(224,163,92,0.85) 80%, transparent 100%);
}
.jv-header { border-bottom-color: var(--uv-hairline); }
.jv-label { color: var(--uv-green); letter-spacing: .15em; }
.jv-country-name { font-family: var(--uv-mono); letter-spacing: -0.01em; }
.jv-mod-label { color: rgba(79,207,140,0.85); }
.jv-match-badge {
  background: rgba(224,163,92,0.12);
  color: var(--uv-gold);
  border-bottom-color: rgba(224,163,92,0.2);
}
.jv-match-badge.jv-badge-ok {
  background: rgba(79,207,140,0.08);
  color: rgba(79,207,140,0.8);
  border-bottom-color: rgba(79,207,140,0.16);
}
.jv-science { color: rgba(79,207,140,0.7); }
.jv-science:hover { color: var(--uv-green); }
.jv-fill-rem { background: var(--uv-green); box-shadow: 0 0 6px rgba(79,207,140,0.4); }

/* ── Mobile ── */
@media (max-width: 640px) {
  .flat-brand-title { display: none; }
  .flat-tag { display: none; }
  .flat-match { max-width: 210px; padding: 11px 12px; top: 12px; left: 12px; }
  .flat-legend { bottom: 12px; left: 12px; padding: 10px 11px; }
}