:root {
      color-scheme: light;
      --page: #eef3ee;
      --paper: #ffffff;
      --ink: #16211b;
      --muted: #617268;
      --line: #dde4de;
      --deep: #ffffff;
      --deep-2: #f6f9f6;
      --panel: #ffffff;
      --on-deep: #16211b;
      --subtle-on-deep: #617268;
      --volt: #6A92E2;
      --volt-strong: #6A92E2;
      --cyan: #0b93ad;
      --danger: #b3541e;
      --shadow: 0 18px 50px rgba(40, 55, 110, .14);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      min-height: 100svh;
      background: var(--page);
      color: var(--ink);
      font-family: "Manrope", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
    .page { width: min(1560px, 100%); min-height: 100svh; margin: 0 auto; padding: 18px clamp(14px, 3vw, 46px) 0; }
    .search-hero { margin: 0 0 8px; }
    .search-row { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(330px, .68fr); align-items: start; gap: 18px; }
    .language-switch { justify-self: end; }
    .search-wrap { position: relative; width: 100%; }
    .search-form {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 58px;
      padding: 5px 6px 5px 18px;
      border: 1px solid #d3dbd5;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .search-form:focus-within { border-color: color-mix(in srgb, var(--volt) 58%, var(--line)); box-shadow: 0 10px 34px rgba(106, 146, 226, .12); }
    .search-icon { color: var(--muted); display: grid; place-items: center; }
    .search-form input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
    .search-form input::placeholder { color: #8b978e; }
    .search-button {
      width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
      display: grid; place-items: center; background: var(--volt); color: #ffffff;
    }
    .search-button:hover { background: #6A92E2; }
    .search-feedback { min-height: 19px; margin: 8px 18px 0; color: var(--muted); font-size: .76rem; text-align: left; }
    .search-feedback.error { color: var(--danger); }
    .language-switch { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff; }
    .language-button { min-width: 42px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
    .language-button[aria-pressed="true"] { background: var(--volt); color: #ffffff; }
    .language-button:hover:not([aria-pressed="true"]) { color: var(--ink); }
    .atlas-shell {
      display: grid;
      grid-template-columns: minmax(0, 1.72fr) minmax(330px, .68fr);
      gap: clamp(18px, 2vw, 30px);
      height: clamp(540px, calc(100svh - 176px), 760px);
      min-height: 540px;
      overflow: visible;
      background: transparent;
    }
    .map-column { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: transparent; }
    .map-viewport { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
    .map-viewport::before {
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(circle at 58% 44%, rgba(106, 146, 226, .13), transparent 43%), linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(190,200,193,.35));
    }
    .map-world {
      position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2529 / 1636;
      transform-origin: 0 0; will-change: transform;
      transition: transform .82s cubic-bezier(.22,.72,.22,1);
    }
    .map-world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .96; filter: drop-shadow(0 0 20px rgba(66, 84, 150, .14)); user-select: none; pointer-events: none; }
    .country-node {
      --size: 5px;
      position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
      padding: 0; border: 0; border-radius: 50%; transform: translate(-50%,-50%); cursor: pointer;
      background: #6A92E2; box-shadow: 0 0 0 4px rgba(106,146,226,.14), 0 0 15px 6px rgba(106,146,226,.55);
      z-index: 3;
    }
    .country-node::before { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(106,146,226,.34); border-radius: 50%; pointer-events: none; }
    .country-node:hover, .country-node:focus-visible, .country-node.active {
      --size: 9px; background: #6A92E2; box-shadow: 0 0 0 6px rgba(106,146,226,.19), 0 0 24px 10px rgba(106,146,226,.86);
    }
    .country-node.active::after { content: ""; position: absolute; inset: -12px; border: 1px solid var(--volt); border-radius: 50%; animation: ring 1.65s ease-out infinite; pointer-events: none; }
    .map-topline { position: absolute; z-index: 8; top: 19px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
    .map-label, .map-count { border: 1px solid rgba(22,33,27,.14); background: rgba(255,255,255,.9); color: #2c3a31; backdrop-filter: blur(8px); }
    .map-label { padding: 9px 12px; border-radius: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .map-count { padding: 7px 10px; border-radius: 999px; font-size: .72rem; }
    .zoom-tools { position: absolute; z-index: 8; left: 20px; bottom: 20px; display: grid; gap: 8px; }
    .map-action { border: 1px solid rgba(22,33,27,.16); border-radius: 10px; background: rgba(255,255,255,.92); color: #2c3a31; padding: 9px 12px; cursor: pointer; font-size: .75rem; font-weight: 800; backdrop-filter: blur(8px); }
    .map-action:hover { border-color: var(--volt); color: var(--volt); }
    .map-caption { position: absolute; z-index: 8; right: 20px; bottom: 20px; max-width: 330px; color: #617268; font-size: .72rem; text-align: right; }
    .hover-card {
      position: absolute; z-index: 20; display: none; width: min(245px, calc(100% - 24px)); padding: 14px 15px;
      border: 1px solid rgba(106,146,226,.38); border-radius: 14px; background: rgba(255,255,255,.97); color: var(--on-deep);
      box-shadow: 0 18px 42px rgba(0,0,0,.42); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
    }
    .hover-card.show { display: block; opacity: 1; transform: translateY(0); }
    .hover-card .hover-kicker { color: var(--volt); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .hover-card strong { display: block; margin: 2px 0 6px; font-family: "Oswald", sans-serif; font-size: 1.45rem; letter-spacing: -.02em; }
    .hover-card p { margin: 0; color: #43544a; font-size: .74rem; line-height: 1.48; }
    .mechanics {
      position: relative; z-index: 10; display: flex; flex-direction: column; min-width: 0;
      padding: clamp(18px, 2.4vw, 30px) 0; color: var(--on-deep); background: transparent;
    }
    .panel-kicker { color: var(--volt); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    .country-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-top: 8px; }
    .country-head h2 { margin: 0; font-family: "Oswald", sans-serif; font-size: clamp(2.6rem, 4vw, 4.5rem); line-height: .95; letter-spacing: -.035em; }
    .country-code { min-width: 48px; height: 34px; padding: 0 9px; display: grid; place-items: center; border: 1px solid rgba(22,33,27,.2); border-radius: 9px; color: #2c3a31; font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
    .confed { margin: 10px 0 22px; color: var(--subtle-on-deep); font-size: .83rem; }
    .signal-status { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #43544a; font-size: .75rem; }
    .signal-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
    .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(22,33,27,.06); }
    .tab { border: 0; border-radius: 9px; padding: 9px 4px; cursor: pointer; background: transparent; color: #617268; font-size: .76rem; font-weight: 800; }
    .tab[aria-selected="true"] { background: #6A92E2; color: var(--volt); }
    .tab-panel { padding: 23px 0; }
    .tab-panel[hidden] { display: none; }
    .data-label { margin-bottom: 5px; color: #64766b; font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
    .league-name { margin-bottom: 14px; font-size: 1.35rem; font-weight: 800; }
    .summary { margin: 0; color: #33413a; font-size: .9rem; line-height: 1.7; }
    .club-list { display: grid; gap: 8px; }
    .club { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(22,33,27,.1); font-size: .86rem; font-weight: 700; }
    .club span { color: var(--volt); }
    .mechanic-group { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(22,33,27,.12); }
    .mechanic-group > p { margin: 0 0 10px; color: #64766b; font-size: .7rem; }
    .quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .quick-country { min-width: 0; border: 1px solid rgba(22,33,27,.14); border-radius: 9px; background: transparent; color: #33413a; padding: 8px 3px; cursor: pointer; font-size: .68rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .quick-country:hover, .quick-country[aria-current="true"] { border-color: var(--volt); color: var(--volt); background: rgba(106,146,226,.09); }
    .snapshot-note { margin: 15px 0 0; color: #75867b; font-size: .65rem; line-height: 1.45; }
    .below { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(28px, 6vw, 88px); align-items: start; padding: clamp(62px, 9vw, 120px) 0 54px; }
    .below h2 { margin: 0; font-family: "Oswald", sans-serif; font-size: clamp(2.3rem, 4.8vw, 4.8rem); line-height: .97; letter-spacing: -.035em; }
    .below-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .below article { padding-top: 13px; border-top: 2px solid var(--ink); }
    .below h3 { margin: 0 0 8px; font-size: .98rem; }
    .below p { margin: 0; color: var(--muted); font-size: .86rem; }
    footer { margin-top: 2px; padding: 20px 0 max(22px, env(safe-area-inset-bottom)); /* v56: borrowed for the ad gap */ border-top: 1px solid var(--line); color: var(--muted); }
    .footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
    .socials { display: flex; flex-wrap: wrap; gap: 9px; }
    .social-item { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #ccd5cf; border-radius: 50%; color: #2c3a31; }
    .social-item svg { width: 18px; height: 18px; }
    .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; }
    .footer-link { border: 0; padding: 5px 0; background: transparent; color: #43544a; cursor: pointer; font-size: .82rem; }
    .footer-link:hover { color: var(--volt); }
    .copyright { margin: 0; color: #8b978e; font-size: .74rem; white-space: nowrap; }
    .footer-panel { display: none; max-width: 760px; margin: 22px auto 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff; color: #43544a; font-size: .8rem; line-height: 1.65; }
    .footer-panel.show { display: block; }
    .footer-panel h2 { margin: 0 0 7px; color: var(--ink); font-family: "Oswald", sans-serif; font-size: 1.15rem; }
    .footer-panel p { margin: 0; }
    @keyframes ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
    @media (prefers-reduced-motion: no-preference) {
      .country-node { animation: breathe 2.6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
      @keyframes breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
    }
    @media (max-width: 1020px) {
      .search-row { grid-template-columns: 1fr auto; }
      .atlas-shell { grid-template-columns: 1fr; gap: 12px; height: auto; min-height: 0; }
      .map-column { height: clamp(360px, 64vw, 560px); min-height: 0; }
      .mechanics { min-height: 0; padding: 18px 0 4px; }
      .below { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .page { padding: 10px 10px 0; }
      .search-hero { margin-bottom: 4px; }
      .search-row { grid-template-columns: 1fr auto; gap: 8px; }
      .search-form { min-height: 52px; padding-left: 14px; gap: 8px; }
      .search-button { width: 40px; height: 40px; }
      .language-switch { padding: 3px; }
      .language-button { min-width: 37px; min-height: 38px; padding-inline: 8px; }
      .atlas-shell { gap: 6px; }
      .map-column { height: clamp(380px, 96vw, 470px); min-height: 0; }
      .map-viewport { bottom: 66px; overflow: visible; }
      .map-topline { top: 13px; left: 13px; right: 13px; }
      .map-label { font-size: .62rem; }
      .map-caption { display: none; }
      .zoom-tools { left: 0; right: 0; bottom: -56px; display: flex; justify-content: center; gap: 8px; }
      .map-action { flex: 0 1 150px; }
      .mechanics { padding: 24px 18px; min-height: 570px; }
      .country-head h2 { font-size: 3rem; }
      .below-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
      .footer-nav { gap: 6px 18px; }
    }

    .home-kicker { color: var(--volt-strong); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .primary-action, .secondary-action { border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 800; font-size: .78rem; }
    .primary-action { background: var(--volt); color: #ffffff; }
    .primary-action:hover { background: #6A92E2; }
    .secondary-action { border: 1px solid rgba(22,33,27,.2); background: transparent; color: #1d2b23; }
    .secondary-action:hover { border-color: var(--volt); color: var(--volt); }
    .hover-card { width: min(330px, calc(100% - 24px)); padding: 15px; pointer-events: auto; }
    .hover-card-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
    .hover-card strong { margin-bottom: 1px; }
    .hover-iso { margin-top: 3px; color: #64766b; font-size: .66rem; font-weight: 800; }
    .hover-widget { margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(22,33,27,.12); }
    .widget-title { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #64766b; font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .widget-icon { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: rgba(106,146,226,.12); color: var(--volt); }
    .mini-table { display: grid; gap: 3px; }
    .mini-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 7px; align-items: center; color: #33413a; font-size: .69rem; }
    .mini-row span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mini-row b { color: var(--volt); }
    .match-widget { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; color: #33413a; font-size: .71rem; }
    .match-widget small { display: block; color: #64766b; font-size: .6rem; }
    .count-chip { border-radius: 999px; padding: 5px 7px; background: rgba(70,220,236,.11); color: var(--cyan); font-size: .61rem; font-weight: 800; }
    .hover-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
    .hover-actions button { padding: 8px 9px; }
    .country-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; margin: 0 0 18px; }
    .focus-view { display: none; min-height: 80vh; }
    .focus-view.active { display: block; }
    .focus-topbar { display: flex; align-items: center; padding: 18px 0; }
    .focus-home { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); padding: 0; cursor: pointer; }
    .focus-home:hover { border-color: var(--volt-strong); color: var(--volt-strong); }
    .country-focus-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(310px,.7fr); gap: 26px; min-height: 350px; padding: clamp(28px,5vw,70px); border-radius: 24px; background: #ffffff; color: var(--on-deep); box-shadow: var(--shadow); }
    .country-focus-hero::after { content:""; position:absolute; width:430px; height:430px; right:-100px; top:-180px; border:1px solid rgba(106,146,226,.22); border-radius:50%; box-shadow:0 0 0 54px rgba(106,146,226,.03),0 0 0 108px rgba(106,146,226,.025); pointer-events:none; }
    .focus-country-title { position: relative; z-index: 1; }
    .focus-country-title h1 { margin: 4px 0 9px; font-family:"Oswald",sans-serif; font-size:clamp(3.4rem,8vw,7.5rem); line-height:.88; letter-spacing:-.045em; }
    .focus-country-title p { margin:0; color:#617268; }
    .focus-hero-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
    .focus-hero-actions button { min-height:42px; }
    .focus-scoreboard { position:relative; z-index:1; align-self:end; display:grid; gap:9px; }
    .focus-score { padding:15px 16px; border:1px solid rgba(22,33,27,.12); border-radius:13px; background:rgba(22,33,27,.045); }
    .focus-score span { display:block; color:#64766b; font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    .focus-score strong { display:block; margin-top:4px; font-size:.96rem; }
    .focus-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:18px; padding:22px 0; }
    .focus-section { padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
    .focus-section.full { grid-column:1 / -1; }
    .section-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:17px; }
    .section-heading h2 { margin:0; font-family:"Oswald",sans-serif; font-size:1.65rem; letter-spacing:-.02em; }
    .sample-badge { flex:0 0 auto; color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .standings { width:100%; border-collapse:collapse; font-size:.78rem; }
    .standings th { padding:7px 5px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.59rem; text-align:right; text-transform:uppercase; }
    .standings th:nth-child(2), .standings td:nth-child(2) { text-align:left; }
    .standings td { padding:8px 5px; border-bottom:1px solid var(--line); text-align:right; }
    .standings tr:last-child td { border-bottom:0; }
    .standings td:first-child { width:24px; color:var(--muted); }
    .standings td:nth-child(2) { font-weight:800; }
    .standings .pts { color:var(--volt-strong); font-weight:800; }
    .fixture-list { display:grid; gap:0; }
    .fixture-row { display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:.76rem; }
    .fixture-row:last-child { border-bottom:0; }
    .fixture-row time { color:var(--muted); font-size:.65rem; }
    .fixture-row b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .fixture-row em { color:var(--volt-strong); font-size:.68rem; font-style:normal; font-weight:800; }
    .clubs-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
    .club-card { min-width:0; padding:14px; border-radius:12px; background:var(--page); }
    .club-card h3 { margin:0 0 8px; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .form-dots { display:flex; gap:3px; margin-bottom:8px; }
    .form-dots i { width:17px; height:17px; display:grid; place-items:center; border-radius:4px; background:#1a2340; color:#6A92E2; font-size:.52rem; font-style:normal; font-weight:800; }
    .form-dots i.d { background:#3d3925; color:#ffe083; }
    .form-dots i.l { background:#422327; color:#ff9ca8; }
    .club-card p { margin:0; color:var(--muted); font-size:.65rem; }
    .story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    .story-panel { padding-top:13px; border-top:2px solid var(--ink); }
    .story-panel span { color:var(--volt-strong); font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .story-panel h3 { margin:5px 0 7px; font-size:1rem; }
    .story-panel p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.6; }
    .toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,16px); max-width:calc(100% - 28px); padding:10px 15px; border-radius:999px; background:#07100b; color:#effff4; box-shadow:0 10px 35px rgba(0,0,0,.35); font-size:.75rem; opacity:0; pointer-events:none; transition:.2s ease; }
    .toast.show { opacity:1; transform:translate(-50%,0); }
    @media (max-width: 850px) {
      .country-focus-hero, .focus-grid { grid-template-columns:1fr; }
      .clubs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .story-grid { grid-template-columns:1fr; }
    }
    @media (max-width: 520px) {
      .country-node { --size: 3px; }
      .hover-card { width:min(310px,calc(100% - 20px)); max-height:360px; overflow:auto; }
      .country-focus-hero { padding:28px 20px; border-radius:18px; }
      .focus-country-title h1 { font-size:3.6rem; }
      .focus-grid { grid-template-columns:1fr; }
      .focus-section { padding:17px 14px; }
      .focus-section.full { grid-column:auto; }
      .clubs-grid { grid-template-columns:1fr; }
      .fixture-row { grid-template-columns:65px minmax(0,1fr); }
      .fixture-row em { grid-column:2; }
      .standings th:nth-child(3), .standings td:nth-child(3), .standings th:nth-child(4), .standings td:nth-child(4) { display:none; }
    }
  
[hidden]{display:none!important;}

/* header (Amar 2026-09-29): search bar = map column width, edges aligned with the map */
@media (min-width:1021px){
  .search-row{grid-template-columns:minmax(0,1.72fr) minmax(330px,.68fr);column-gap:clamp(18px,2vw,30px);}
  .search-wrap{grid-column:1;}
}
@media (max-width:1020px){
  .search-wrap{grid-column:1/-1;}
}

/* A-Z dropdown (Amar 2026-09-29): triangle toggle in the search bar opens the full 259-destination list */
.search-form{grid-template-columns:auto 1fr auto auto;}
.az-toggle{display:grid;place-items:center;width:38px;height:38px;border:0;border-left:1px solid #e0e7e1;background:transparent;color:var(--muted);font-size:1.05rem;cursor:pointer;padding-left:6px;}
.az-toggle:hover{color:var(--volt);}
.az-toggle span{display:inline-block;transition:transform .18s ease;}
.az-toggle.open span{transform:rotate(180deg);}
.az-dropdown{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.18);padding:12px;}
.az-dropdown-head{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 4px;font-weight:700;}
.az-directory{max-height:340px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;background:#fff;}
/* Quick jump (Amar 2026-09-29): the 6 signature destinations, flags + names */
.quick-jump{margin-top:10px;}
.quick-jump>p{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:700;}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.quick-chip{display:flex;align-items:center;gap:7px;padding:8px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.8rem;font-weight:600;color:var(--ink);cursor:pointer;min-width:0;}
.quick-chip:hover{border-color:var(--volt);}
.quick-chip img{width:20px;height:14px;object-fit:cover;border-radius:3px;flex:none;}
.quick-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.az-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:0;border-bottom:1px solid #edf1ed;background:transparent;cursor:pointer;font-size:.93rem;color:var(--ink);text-align:left;}
.az-item:last-child{border-bottom:0;}
.az-item:hover{background:#f0f7f0;}
.az-flag{width:24px;height:16px;object-fit:cover;border-radius:3px;flex:none;}

/* Amar 2026-09-29: shell fits the real page chrome (search 163 + footer 103 + page pad 18 = 284,
   +4 safety) so tall screens never page-scroll; the cap follows the map width so wide
   screens never cut the map; sidebar spacing trimmed so it never scrolls either. */
@media (min-width:1021px){
  .atlas-shell{height:clamp(560px,calc(100svh - 288px),max(880px,calc(41.67vw + 64px)));}
  .mechanics{padding-top:22px;padding-bottom:22px;}
}

/* Amar 2026-09-29: screen locked — the desktop page can never scroll, even if
   the visitor tries (wheel, trackpad, keyboard). Phones/tablets keep their
   normal scrolling. */
@media (min-width:1021px){
  html,body{height:100% !important;max-height:100% !important;overflow:hidden !important;overscroll-behavior:none !important;}
}

/* Amar 2026-09-29: affiliate trio — Find Hotels / Find Flights / Find Tours in one row */
.country-actions .affiliate-row{grid-column:1/-1;}
.affiliate-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center;}
.affiliate-row .affiliate-action{margin-top:0;padding:8px 13px;font-size:.7rem;white-space:nowrap;}

/* Amar 2026-09-29: tighten sidebar rhythm so tall screens never scroll the panel */
.country-actions{margin-bottom:8px;}
.snapshot-note{margin-top:6px;}

/* Amar 2026-09-29: no grey box under the map — viewport is pure white and the
   bottom shade is gone; only the faint green glow remains. */
.map-viewport{background:#ffffff;}
.map-viewport::before{background:radial-gradient(circle at 58% 44%, rgba(106,146,226,.10), transparent 43%);}

/* Amar 2026-09-29: keep the atlas grid row exactly at the shell height and let a
   tall sidebar scroll internally, so the footer can never ride up over the map buttons. */
.atlas-shell{grid-template-rows:minmax(0,1fr);}
.mechanics{min-height:0;overflow-y:auto;}

/* Amar 2026-09-29: map action buttons in a horizontal row UNDER the map (desktop),
   left-aligned with the caption on the right — no longer stacked over the map. */
@media (min-width:681px){
  .map-viewport{bottom:64px;}
  .zoom-tools{left:20px;right:20px;bottom:0;height:64px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;}
  .map-caption{right:20px;bottom:0;height:64px;display:flex;align-items:center;max-width:60%;}
}

/* Amar 2026-09-29: mobile balance — one clean control strip under the map on ALL
   phones/tablets (<=1020px). The buttons sit centered in the strip (they were
   clipped invisible on small phones and the caption overlapped "My location" on
   large ones); the caption is hidden (it duplicates the search hint); the + / -
   zoom is raised back INSIDE the map above the strip; the footer stacks centered
   with all four legal links on one row so Cookies never wraps orphaned. */
@media (max-width:1020px){
  .map-viewport{bottom:66px;}
  .map-caption{display:none;}
  .zoom-tools{left:0;right:0;bottom:8px;height:auto;min-height:48px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;}
  .map-action{flex:0 1 150px;}
  .route-banner{font-size:.68rem;padding:6px 6px 6px 10px;}
  .route-banner .rb-ico{display:none;}
  .route-banner .rb-text{white-space:normal;}
  .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;}
  .footer-nav{flex-wrap:nowrap;gap:6px 18px;}
  .footer-link{white-space:nowrap;}
}

/* TRAVAIA additions: brand slot, listen buttons, media gallery, admin */
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:6px 4px;color:var(--ink)}
.brand-mark{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--volt);color:#ffffff}
.brand-logo{height:30px;width:auto;display:block;flex:0 0 auto;}
.brand-mark svg{width:20px;height:20px}
.brand-mark img{width:30px;height:30px;object-fit:contain;border-radius:50%}
.brand-name{font-family:Oswald,Manrope,sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:.14em;color:var(--ink)}
.listen-btn{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.62rem;font-weight:700;padding:4px 10px;cursor:pointer;margin-top:8px}
.listen-btn:hover{color:var(--volt);border-color:var(--volt)}
.media-block{margin-bottom:14px}
.media-block h4{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.media-grid img{width:100%;height:96px;object-fit:cover;border-radius:10px;display:block}
.media-grid video{width:100%;height:96px;object-fit:cover;border-radius:10px;background:#000}
.media-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;margin-bottom:8px}
.media-top10-frame{width:100%;max-width:360px;aspect-ratio:9/16;border:0;border-radius:12px;display:block;margin:0 auto;background:#000}
.side-media-block{margin:16px 0}
.side-media-block h4{margin:0 0 10px;font-size:1.02rem}
.media-video{width:100%;max-height:320px;border-radius:10px;background:#000;margin-bottom:8px}
.media-audio{width:100%;margin-bottom:8px}
.media-empty{color:var(--muted);font-size:.75rem}
.place-rank{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--volt);color:#ffffff;font-weight:800;font-size:.68rem;margin-right:8px}
.admin-login{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:200}
.admin-login-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;width:min(340px,90vw);box-shadow:var(--shadow)}
.admin-login-box h2{margin:0 0 14px;font-family:Oswald,sans-serif;letter-spacing:.08em}
.admin-login-box input{width:100%;box-sizing:border-box;background:var(--page);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font-size:.85rem;margin-bottom:12px}
.admin-login-row{display:flex;gap:10px}
.admin-err{color:var(--danger);font-size:.75rem;min-height:1.2em;margin:8px 0 0}
.admin-panel{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);background:var(--panel);border-left:1px solid var(--line);z-index:190;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.admin-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.admin-head h2{margin:0;font-family:Oswald,sans-serif;letter-spacing:.08em;font-size:1.05rem}
.admin-head button{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);cursor:pointer;padding:6px 10px}
.admin-tabs{display:flex;border-bottom:1px solid var(--line)}
.admin-tabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:700;font-size:.72rem;padding:11px 4px;cursor:pointer;letter-spacing:.04em}
.admin-tabs button.on{color:var(--volt);border-bottom-color:var(--volt)}
.admin-body{flex:1;overflow-y:auto;padding:14px 16px}
.admin-field{margin-bottom:11px}
.admin-field label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.admin-field input,.admin-field textarea,.admin-field select{width:100%;box-sizing:border-box;background:var(--page);border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:9px 11px;font-size:.82rem;font-family:inherit}
.admin-field textarea{min-height:70px;resize:vertical}
.admin-row{display:flex;gap:10px}
.admin-row .admin-field{flex:1}
.admin-btn{width:100%;margin-top:6px}
.admin-note{font-size:.72rem;color:var(--muted);margin:10px 0}
.admin-media-item{display:flex;align-items:center;gap:10px;margin-bottom:8px;background:var(--page);border:1px solid var(--line);border-radius:10px;padding:7px}
.admin-media-item img{width:56px;height:42px;object-fit:cover;border-radius:7px}
.admin-media-item span{flex:1;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-media-item button{background:none;border:1px solid var(--danger);color:var(--danger);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:.7rem}
.admin-divider{border:0;border-top:1px solid var(--line);margin:16px 0}
.admin-danger{border-color:var(--danger)!important;color:var(--danger)!important}
@media (max-width:680px){.brand-name{font-size:1.05rem}.brand-mark{width:26px;height:26px}.brand-logo{height:26px}}

/* flight routes (Amar 2026-09-28): home -> capital animated plane */
.route-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
@keyframes routeMarch{to{stroke-dashoffset:-27}}
.route-dash{animation:routeMarch 1s linear infinite}
.route-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 13px;font-size:.74rem;font-weight:700;color:var(--ink);box-shadow:var(--shadow);max-width:94%}
.route-banner .rb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-banner .rb-ico{color:var(--volt);font-size:.85rem}
.route-banner button{flex:0 0 auto;border:1px solid var(--line);background:var(--page);color:var(--ink);border-radius:999px;width:26px;height:26px;display:grid;place-items:center;cursor:pointer;font-size:.78rem;line-height:1;padding:0}
.route-banner button:hover{border-color:var(--volt);color:var(--volt)}
/* Amar 2026-09-28: no auto-zoom on select (double-click zooms); topline labels removed */
.map-topline{display:none!important}
.country-node{touch-action:manipulation}
@media (hover:none){.hover-card{pointer-events:none!important}.hover-card button{pointer-events:auto!important}}
@media (max-width:680px){.route-banner{font-size:.64rem;top:58px;padding:5px 5px 5px 10px}.route-banner button{width:23px;height:23px}}
/* Amar 2026-09-28: smaller signal dots for the 259-destination atlas (zoom in to see them all) */
.country-node{--size:3px!important;}
.country-node:hover,.country-node:focus-visible,.country-node.active{--size:6px!important;}
.country-node::before{inset:-5px!important;}
.country-node.active::after{inset:-8px!important;}

/* Affiliate integration points — the developer wires real partner URLs + IDs here (Amar 2026-09-28) */
.affiliate-action{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:.72rem;font-weight:800;cursor:pointer;text-decoration:none;margin-top:10px}
.affiliate-action:hover{border-color:var(--volt);color:var(--volt)}
.affiliate-note{font-size:.62rem;color:var(--muted);margin:6px 0 0}

/* Amar 2026-09-29: flags for every destination (flagcdn). Hidden when no flag or load fails. */
.country-title{display:flex;align-items:center;gap:14px;min-width:0}
.hover-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.country-flag{width:52px;height:38px;object-fit:cover;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.22);flex:0 0 auto}
.hover-flag{width:30px;height:22px;object-fit:cover;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.25);flex:0 0 auto}
.quick-country{display:inline-flex;align-items:center;gap:8px}
.quick-flag{width:22px;height:16px;object-fit:cover;border-radius:3px;flex:0 0 auto}
.route-flag{width:26px;height:19px;object-fit:cover;border-radius:4px;flex:0 0 auto}

/* Amar 2026-09-29: header controls — theme toggle beside the language pill */
.header-controls{display:flex;align-items:center;gap:10px;justify-self:end;}
.theme-toggle{width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0;}
.theme-toggle:hover{border-color:var(--volt);color:var(--volt);}
.theme-toggle svg{width:20px;height:20px;}
.theme-toggle .sun{display:none;}
body.dark .theme-toggle{background:#0b110d;}
body.dark .theme-toggle .moon{display:none;}
body.dark .theme-toggle .sun{display:block;}

/* Amar 2026-09-29: Share popup — the marketing engine. Comment + channels. */
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:300;padding:18px;}
.share-modal{width:min(430px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;position:relative;box-shadow:var(--shadow);}
.share-modal h2{margin:0;font-family:Oswald,Manrope,sans-serif;letter-spacing:.06em;font-size:1.25rem;color:var(--ink);}
.share-country{color:var(--muted);font-size:.82rem;margin:4px 0 12px;font-weight:700;}
.share-preview{margin:0 0 14px;}
.share-prev-card{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(127,140,135,.08);font-size:.8rem;line-height:1.55;color:var(--ink);}
.share-prev-name{font-weight:800;font-size:.92rem;margin-bottom:3px;}
.share-prev-facts{color:var(--muted);}
.share-prev-msg{margin-top:9px;font-weight:700;}
.share-prev-link{color:var(--volt);word-break:break-all;text-decoration:underline;}
.share-prev-via{margin-top:5px;color:var(--muted);}
.share-prev-via a{color:var(--volt);font-weight:800;}
.share-prev-comment{font-style:italic;margin-bottom:9px;padding:8px 11px;background:rgba(106,146,226,.1);border:1px dashed var(--line);border-radius:9px;color:var(--ink);}
.share-close{position:absolute;top:8px;right:14px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px;}
.share-close:hover{color:var(--ink);}
.share-modal textarea{width:100%;box-sizing:border-box;background:var(--page);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font-size:.85rem;font-family:inherit;resize:vertical;margin:0 0 14px;min-height:64px;}
.share-modal textarea:focus{outline:none;border-color:var(--volt);}
.share-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--page);font-size:.78rem;font-weight:700;padding:8px 14px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.share-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.share-channels button{border:1px solid var(--line);background:var(--page);color:var(--ink);border-radius:999px;padding:10px 6px;font-size:.75rem;font-weight:800;cursor:pointer;font-family:inherit;}
.share-channels button:hover{border-color:var(--volt);color:var(--volt);}

/* Amar 2026-09-29: dark styling for components added after the original dark theme */
body.dark .az-dropdown{background:#0b110d;border-color:#243129;box-shadow:0 24px 60px rgba(0,0,0,.55);}
body.dark .az-dropdown-head{color:#9baaa1;}
body.dark .az-directory{background:#0b110d;border-color:#243129;}
body.dark .az-item{border-bottom-color:#1a241e;color:#f2faf5;}
body.dark .az-item:hover{background:#14201a;}
body.dark .az-toggle{border-left-color:#243129;}
body.dark .quick-chip{background:#0b110d;border-color:#243129;color:#f2faf5;}
body.dark .affiliate-action{background:#0b110d;border-color:#243129;color:#f2faf5;}

/* Amar 2026-09-29: bigger map caption so visitors actually see it */
.map-caption{font-size:.8rem;}
/* Amar 2026-09-29: drag-to-pan the zoomed map (mouse / finger) */
.map-viewport.pannable{cursor:grab;}
.map-viewport.panning{cursor:grabbing;}
.map-viewport.panning .hover-card{display:none !important;}
/* Amar 2026-09-29: plain blue dots until chosen */
.tab[aria-selected="true"]{background:#6A92E2!important;color:#ffffff!important;}
body.dark .tab[aria-selected="true"]{background:#6A92E2!important;color:#ffffff!important;}
/* Amar 2026-09-29: flag next to the country name in the View more section */
.focus-name-row{display:flex;align-items:center;gap:14px}
.focus-flag{width:64px;height:46px;object-fit:cover;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.25);flex:0 0 auto}
/* Amar 2026-09-29: footer legal info as centered modal popups + cookie consent banner */
.legal-overlay{position:fixed;inset:0;background:rgba(14,20,17,.55);display:flex;align-items:center;justify-content:center;padding:22px;z-index:2000}
.legal-overlay[hidden]{display:none}
.legal-modal{position:relative;background:#ffffff;color:#33463d;border-radius:18px;max-width:660px;width:100%;max-height:84vh;display:flex;flex-direction:column;padding:28px 30px 24px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.legal-modal h2{margin:0 34px 12px 0;font-family:Oswald,sans-serif;font-size:1.5rem;color:var(--ink)}
.legal-body{overflow-y:auto;line-height:1.75;font-size:.88rem;padding-right:6px}
.legal-body h3{margin:18px 0 6px;font-size:.95rem;color:var(--ink)}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin:0 0 10px}
.legal-body a{color:var(--volt)}
.legal-close{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:1.6rem;line-height:1;color:#5b6b62;cursor:pointer;padding:4px 8px}
.legal-close:hover{color:var(--ink)}
.cookie-banner{position:fixed;left:18px;right:18px;bottom:18px;z-index:2100;background:#ffffff;color:#33463d;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.28);padding:16px 20px;display:flex;align-items:center;gap:16px;max-width:880px;margin:0 auto}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;font-size:.85rem;line-height:1.6;flex:1}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-decline{border:1px solid var(--line);background:transparent;color:#33463d;border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer;font-size:.85rem}
/* Amar 2026-09-29: footer social icons are real profile links */
.social-item{text-decoration:none}
.social-item:hover{color:#6A92E2;border-color:#6A92E2}
body.dark .social-item:hover{color:#6A92E2;border-color:#6A92E2}
.cookie-accept{border:0;background:#6A92E2;color:#fff;border-radius:999px;padding:10px 22px;font-weight:700;cursor:pointer;font-size:.85rem}
body.dark .legal-modal{background:#101614;color:#c9d4cd;border:1px solid #243129}
body.dark .legal-modal h2,body.dark .legal-body h3{color:#eef3ef}
body.dark .legal-close{color:#9fb0a6}
body.dark .cookie-banner{background:#101614;color:#c9d4cd;border-color:#243129}
body.dark .cookie-decline{color:#dbe4dd;border-color:#33463d}
@media(max-width:640px){.cookie-banner{flex-direction:column;align-items:stretch}.cookie-actions button{flex:1}}
/* Amar 2026-09-29: darker map dots in LIGHT mode only (#3D5AB4) for clarity — dark mode keeps #6A92E2 */
.country-node{background:#3D5AB4;}
.country-node:hover,.country-node:focus-visible,.country-node.active{background:#3D5AB4;}
.country-node{box-shadow:none;}
.country-node::before{display:none;}
/* Amar 2026-09-29: + / - zoom on the side of the map (desktop). On phones/tablets
   the buttons sit INSIDE the map just above the control strip — the strip lives
   at the column's bottom, so bottom:10px would strand them outside the map. */
.zoom-side{position:absolute;z-index:9;right:14px;top:50%;transform:translateY(-50%);display:grid;gap:8px;}
@media (max-width:1020px){.zoom-side{right:10px;top:auto;bottom:78px;transform:none;display:flex;gap:8px;}}
.zoom-side button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(22,33,27,.16);background:rgba(255,255,255,.94);color:#2c3a31;font-size:1.3rem;font-weight:800;cursor:pointer;line-height:1;backdrop-filter:blur(8px);padding:0;}
.zoom-side button:hover{border-color:var(--volt);color:var(--volt);}
.zoom-side button:disabled{opacity:.35;cursor:default;}
.zoom-side button:disabled:hover{border-color:rgba(22,33,27,.16);color:#2c3a31;}

    body.dark{
      color-scheme: dark;
      --page: #030604;
      --paper: #0b110d;
      --ink: #f2faf5;
      --muted: #9baaa1;
      --line: #243129;
      --deep: #050a07;
      --deep-2: #0b120e;
      --panel: #07100b;
      --on-deep: #f3fff7;
      --subtle-on-deep: #a9b8af;
      --volt: #6A92E2;
      --volt-strong: #6A92E2;
      --cyan: #46dcec;
      --danger: #ffce6b;
      --shadow: 0 26px 70px rgba(0, 0, 0, .5);
    }
    body.dark *{ box-sizing: border-box; }
    body.dark{ scroll-behavior: smooth; }
    body.dark{
      margin: 0;
      min-width: 320px;
      min-height: 100svh;
      background: var(--page);
      color: var(--ink);
      font-family: "Manrope", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    body.dark button, body.dark input{ font: inherit; }
    body.dark button{ color: inherit; }
    body.dark :focus-visible{ outline: 3px solid var(--cyan); outline-offset: 3px; }
    body.dark .page{ width: min(1560px, 100%); min-height: 100svh; margin: 0 auto; padding: 18px clamp(14px, 3vw, 46px) 0; }
    body.dark .search-hero{ margin: 0 0 8px; }
    body.dark .search-row{ display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(330px, .68fr); align-items: start; gap: 18px; }
    body.dark .language-switch{ justify-self: end; }
    body.dark .search-wrap{ position: relative; width: 100%; }
    body.dark .search-form{
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-height: 58px;
      padding: 5px 6px 5px 18px;
      border: 1px solid #2b3930;
      border-radius: 999px;
      background: #0a100c;
      box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    body.dark .search-form:focus-within{ border-color: color-mix(in srgb, var(--volt) 58%, var(--line)); box-shadow: 0 10px 34px rgba(106,146,226, .12); }
    body.dark .search-icon{ color: var(--muted); display: grid; place-items: center; }
    body.dark .search-form input{ min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
    body.dark .search-form input::placeholder{ color: #7f9186; }
    body.dark .search-button{
      width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
      display: grid; place-items: center; background: var(--volt); color: #ffffff;
    }
    body.dark .search-button:hover{ background: #6A92E2; }
    body.dark .search-feedback{ min-height: 19px; margin: 8px 18px 0; color: var(--muted); font-size: .76rem; text-align: left; }
    body.dark .search-feedback.error{ color: var(--danger); }
    body.dark .language-switch{ display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #0a100c; }
    body.dark .language-button{ min-width: 42px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
    body.dark .language-button[aria-pressed="true"]{ background: var(--volt); color: #ffffff; }
    body.dark .language-button:hover:not([aria-pressed="true"]){ color: var(--ink); }
    body.dark .atlas-shell{
      display: grid;
      grid-template-columns: minmax(0, 1.72fr) minmax(330px, .68fr);
      gap: clamp(18px, 2vw, 30px);
      height: clamp(540px, calc(100svh - 176px), 760px);
      min-height: 540px;
      overflow: visible;
      background: transparent;
    }
    body.dark .map-column{ position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: transparent; }
    body.dark .map-viewport{ position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
    body.dark .map-viewport::before{
      content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background: radial-gradient(circle at 58% 44%, rgba(106, 146, 226, .13), transparent 43%), linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.55));
    }
    body.dark .map-world{
      position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2529 / 1636;
      transform-origin: 0 0; will-change: transform;
      transition: transform .82s cubic-bezier(.22,.72,.22,1);
    }
    body.dark .map-world img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .96; filter: drop-shadow(0 0 20px rgba(66, 84, 150, .14)); user-select: none; pointer-events: none; }
    body.dark .country-node{
      --size: 5px;
      position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size);
      padding: 0; border: 0; border-radius: 50%; transform: translate(-50%,-50%); cursor: pointer;
      background: #6A92E2; box-shadow: 0 0 0 4px rgba(106,146,226,.14), 0 0 15px 6px rgba(106,146,226,.55);
      z-index: 3;
    }
    body.dark .country-node::before{ content: ""; position: absolute; inset: -7px; border: 1px solid rgba(106,146,226,.34); border-radius: 50%; pointer-events: none; }
    body.dark .country-node:hover, body.dark .country-node:focus-visible, body.dark .country-node.active{
      --size: 9px; background: #6A92E2; box-shadow: 0 0 0 6px rgba(106,146,226,.19), 0 0 24px 10px rgba(106,146,226,.86);
    }
    body.dark .country-node.active::after{ content: ""; position: absolute; inset: -12px; border: 1px solid var(--volt); border-radius: 50%; animation: ring 1.65s ease-out infinite; pointer-events: none; }
    body.dark .map-topline{ position: absolute; z-index: 8; top: 19px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
    body.dark .map-label, body.dark .map-count{ border: 1px solid rgba(255,255,255,.14); background: rgba(4,10,6,.76); color: #d9e7dd; backdrop-filter: blur(8px); }
    body.dark .map-label{ padding: 9px 12px; border-radius: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    body.dark .map-count{ padding: 7px 10px; border-radius: 999px; font-size: .72rem; }
    body.dark .zoom-tools{ position: absolute; z-index: 8; left: 20px; bottom: 20px; display: grid; gap: 8px; }
    body.dark .map-action{ border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(5,12,7,.84); color: #d8e6dc; padding: 9px 12px; cursor: pointer; font-size: .75rem; font-weight: 800; backdrop-filter: blur(8px); }
    body.dark .map-action:hover{ border-color: var(--volt); color: var(--volt); }
    body.dark .map-caption{ position: absolute; z-index: 8; right: 20px; bottom: 20px; max-width: 330px; color: #9eaea4; font-size: .72rem; text-align: right; }
    body.dark .hover-card{
      position: absolute; z-index: 20; display: none; width: min(245px, calc(100% - 24px)); padding: 14px 15px;
      border: 1px solid rgba(106,146,226,.34); border-radius: 14px; background: rgba(5,14,8,.96); color: var(--on-deep);
      box-shadow: 0 18px 42px rgba(0,0,0,.42); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
    }
    body.dark .hover-card.show{ display: block; opacity: 1; transform: translateY(0); }
    body.dark .hover-card .hover-kicker{ color: var(--volt); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    body.dark .hover-card strong{ display: block; margin: 2px 0 6px; font-family: "Oswald", sans-serif; font-size: 1.45rem; letter-spacing: -.02em; }
    body.dark .hover-card p{ margin: 0; color: #b5c4bb; font-size: .74rem; line-height: 1.48; }
    body.dark .mechanics{
      position: relative; z-index: 10; display: flex; flex-direction: column; min-width: 0;
      padding: clamp(18px, 2.4vw, 30px) 0; color: var(--on-deep); background: transparent;
    }
    body.dark .panel-kicker{ color: var(--volt); font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    body.dark .country-head{ display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-top: 8px; }
    body.dark .country-head h2{ margin: 0; font-family: "Oswald", sans-serif; font-size: clamp(2.6rem, 4vw, 4.5rem); line-height: .95; letter-spacing: -.035em; }
    body.dark .country-code{ min-width: 48px; height: 34px; padding: 0 9px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #d1ddd5; font-size: .74rem; font-weight: 800; letter-spacing: .08em; }
    body.dark .confed{ margin: 10px 0 22px; color: var(--subtle-on-deep); font-size: .83rem; }
    body.dark .signal-status{ display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #bfd0c4; font-size: .75rem; }
    body.dark .signal-status i{ width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
    body.dark .tabs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.07); }
    body.dark .tab{ border: 0; border-radius: 9px; padding: 9px 4px; cursor: pointer; background: transparent; color: #a8b7ae; font-size: .76rem; font-weight: 800; }
    body.dark .tab[aria-selected="true"]{ background: #6A92E2; color: var(--volt); }
    body.dark .tab-panel{ padding: 23px 0; }
    body.dark .tab-panel[hidden]{ display: none; }
    body.dark .data-label{ margin-bottom: 5px; color: #91a399; font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
    body.dark .league-name{ margin-bottom: 14px; font-size: 1.35rem; font-weight: 800; }
    body.dark .summary{ margin: 0; color: #c7d5cc; font-size: .9rem; line-height: 1.7; }
    body.dark .club-list{ display: grid; gap: 8px; }
    body.dark .club{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .86rem; font-weight: 700; }
    body.dark .club span{ color: var(--volt); }
    body.dark .mechanic-group{ margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
    body.dark .mechanic-group > p{ margin: 0 0 10px; color: #91a399; font-size: .7rem; }
    body.dark .quick-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
    body.dark .quick-country{ min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: transparent; color: #cfdbd3; padding: 8px 3px; cursor: pointer; font-size: .68rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.dark .quick-country:hover, body.dark .quick-country[aria-current="true"]{ border-color: var(--volt); color: var(--volt); background: rgba(106,146,226,.06); }
    body.dark .snapshot-note{ margin: 15px 0 0; color: #778a7e; font-size: .65rem; line-height: 1.45; }
    body.dark .below{ display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(28px, 6vw, 88px); align-items: start; padding: clamp(62px, 9vw, 120px) 0 54px; }
    body.dark .below h2{ margin: 0; font-family: "Oswald", sans-serif; font-size: clamp(2.3rem, 4.8vw, 4.8rem); line-height: .97; letter-spacing: -.035em; }
    body.dark .below-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    body.dark .below article{ padding-top: 13px; border-top: 2px solid var(--ink); }
    body.dark .below h3{ margin: 0 0 8px; font-size: .98rem; }
    body.dark .below p{ margin: 0; color: var(--muted); font-size: .86rem; }
    body.dark footer{ margin-top: 2px; padding: 20px 0 max(22px, env(safe-area-inset-bottom)); /* v56: borrowed for the ad gap */ border-top: 1px solid var(--line); color: var(--muted); }
    body.dark .footer-inner{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
    body.dark .socials{ display: flex; flex-wrap: wrap; gap: 9px; }
    body.dark .social-item{ width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #344239; border-radius: 50%; color: #f1f7f3; }
    body.dark .social-item svg{ width: 18px; height: 18px; }
    body.dark .footer-nav{ display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; }
    body.dark .footer-link{ border: 0; padding: 5px 0; background: transparent; color: #c2cec7; cursor: pointer; font-size: .82rem; }
    body.dark .footer-link:hover{ color: var(--volt); }
    body.dark .copyright{ margin: 0; color: #7f9186; font-size: .74rem; white-space: nowrap; }
    body.dark .footer-panel{ display: none; max-width: 760px; margin: 22px auto 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #090f0b; color: #bdc9c1; font-size: .8rem; line-height: 1.65; }
    body.dark .footer-panel.show{ display: block; }
    body.dark .footer-panel h2{ margin: 0 0 7px; color: var(--ink); font-family: "Oswald", sans-serif; font-size: 1.15rem; }
    body.dark .footer-panel p{ margin: 0; }
    @keyframes ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
    @media (prefers-reduced-motion: no-preference) {
      body.dark .country-node{ animation: breathe 2.6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
      @keyframes breathe { 0%,100% { opacity: .72; } 50% { opacity: 1; } }
    }
    @media (max-width: 1020px) {
      body.dark .search-row{ grid-template-columns: 1fr auto; }
      body.dark .atlas-shell{ grid-template-columns: 1fr; gap: 12px; height: auto; min-height: 0; }
      body.dark .map-column{ height: clamp(360px, 64vw, 560px); min-height: 0; }
      body.dark .mechanics{ min-height: 0; padding: 18px 0 4px; }
      body.dark .below{ grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      body.dark .page{ padding: 10px 10px 0; }
      body.dark .search-hero{ margin-bottom: 4px; }
      body.dark .search-row{ grid-template-columns: 1fr auto; gap: 8px; }
      body.dark .search-form{ min-height: 52px; padding-left: 14px; gap: 8px; }
      body.dark .search-button{ width: 40px; height: 40px; }
      body.dark .language-switch{ padding: 3px; }
      body.dark .language-button{ min-width: 37px; min-height: 38px; padding-inline: 8px; }
      body.dark .atlas-shell{ gap: 6px; }
      body.dark .map-column{ height: clamp(380px, 96vw, 470px); min-height: 0; }
      body.dark .map-viewport{ bottom: 66px; overflow: visible; }
      body.dark .map-topline{ top: 13px; left: 13px; right: 13px; }
      body.dark .map-label{ font-size: .62rem; }
      body.dark .map-caption{ display: none; }
      body.dark .zoom-tools{ left: 0; right: 0; bottom: -56px; display: flex; justify-content: center; gap: 8px; }
      body.dark .map-action{ flex: 0 1 150px; }
      body.dark .mechanics{ padding: 24px 18px; min-height: 570px; }
      body.dark .country-head h2{ font-size: 3rem; }
      body.dark .below-grid{ grid-template-columns: 1fr; }
      body.dark .footer-inner{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
      body.dark .footer-nav{ gap: 6px 18px; }
    }

    body.dark .home-kicker{ color: var(--volt-strong); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    body.dark .primary-action, body.dark .secondary-action{ border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-weight: 800; font-size: .78rem; }
    body.dark .primary-action{ background: var(--volt); color: #ffffff; }
    body.dark .primary-action:hover{ background: #6A92E2; }
    body.dark .secondary-action{ border: 1px solid rgba(255,255,255,.18); background: transparent; color: #dce8e0; }
    body.dark .secondary-action:hover{ border-color: var(--volt); color: var(--volt); }
    body.dark .hover-card{ width: min(330px, calc(100% - 24px)); padding: 15px; pointer-events: auto; }
    body.dark .hover-card-head{ display: flex; justify-content: space-between; align-items: start; gap: 12px; }
    body.dark .hover-card strong{ margin-bottom: 1px; }
    body.dark .hover-iso{ margin-top: 3px; color: #91a399; font-size: .66rem; font-weight: 800; }
    body.dark .hover-widget{ margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.11); }
    body.dark .widget-title{ display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #91a399; font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    body.dark .widget-icon{ width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: rgba(106,146,226,.12); color: var(--volt); }
    body.dark .mini-table{ display: grid; gap: 3px; }
    body.dark .mini-row{ display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 7px; align-items: center; color: #d9e4dd; font-size: .69rem; }
    body.dark .mini-row span:nth-child(2){ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.dark .mini-row b{ color: var(--volt); }
    body.dark .match-widget{ display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; color: #dce7e0; font-size: .71rem; }
    body.dark .match-widget small{ display: block; color: #91a399; font-size: .6rem; }
    body.dark .count-chip{ border-radius: 999px; padding: 5px 7px; background: rgba(70,220,236,.11); color: var(--cyan); font-size: .61rem; font-weight: 800; }
    body.dark .hover-actions{ display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; margin-top: 12px; }
    body.dark .hover-actions button{ padding: 8px 9px; }
    body.dark .country-actions{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; margin: 0 0 18px; }
    body.dark .focus-view{ display: none; min-height: 80vh; }
    body.dark .focus-view.active{ display: block; }
    body.dark .focus-topbar{ display: flex; align-items: center; padding: 18px 0; }
    body.dark .focus-home{ width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); padding: 0; cursor: pointer; }
    body.dark .focus-home:hover{ border-color: var(--volt-strong); color: var(--volt-strong); }
    body.dark .country-focus-hero{ position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(310px,.7fr); gap: 26px; min-height: 350px; padding: clamp(28px,5vw,70px); border-radius: 24px; background: #050b07; color: var(--on-deep); box-shadow: var(--shadow); }
    body.dark .country-focus-hero::after{ content:""; position:absolute; width:430px; height:430px; right:-100px; top:-180px; border:1px solid rgba(106,146,226,.22); border-radius:50%; box-shadow:0 0 0 54px rgba(106,146,226,.03),0 0 0 108px rgba(106,146,226,.025); pointer-events:none; }
    body.dark .focus-country-title{ position: relative; z-index: 1; }
    body.dark .focus-country-title h1{ margin: 4px 0 9px; font-family:"Oswald",sans-serif; font-size:clamp(3.4rem,8vw,7.5rem); line-height:.88; letter-spacing:-.045em; }
    body.dark .focus-country-title p{ margin:0; color:#aabbb0; }
    body.dark .focus-hero-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
    body.dark .focus-hero-actions button{ min-height:42px; }
    body.dark .focus-scoreboard{ position:relative; z-index:1; align-self:end; display:grid; gap:9px; }
    body.dark .focus-score{ padding:15px 16px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(255,255,255,.05); }
    body.dark .focus-score span{ display:block; color:#8fa197; font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
    body.dark .focus-score strong{ display:block; margin-top:4px; font-size:.96rem; }
    body.dark .focus-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:18px; padding:22px 0; }
    body.dark .focus-section{ padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
    body.dark .focus-section.full{ grid-column:1 / -1; }
    body.dark .section-heading{ display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:17px; }
    body.dark .section-heading h2{ margin:0; font-family:"Oswald",sans-serif; font-size:1.65rem; letter-spacing:-.02em; }
    body.dark .sample-badge{ flex:0 0 auto; color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    body.dark .standings{ width:100%; border-collapse:collapse; font-size:.78rem; }
    body.dark .standings th{ padding:7px 5px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.59rem; text-align:right; text-transform:uppercase; }
    body.dark .standings th:nth-child(2), body.dark .standings td:nth-child(2){ text-align:left; }
    body.dark .standings td{ padding:8px 5px; border-bottom:1px solid var(--line); text-align:right; }
    body.dark .standings tr:last-child td{ border-bottom:0; }
    body.dark .standings td:first-child{ width:24px; color:var(--muted); }
    body.dark .standings td:nth-child(2){ font-weight:800; }
    body.dark .standings .pts{ color:var(--volt-strong); font-weight:800; }
    body.dark .fixture-list{ display:grid; gap:0; }
    body.dark .fixture-row{ display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:.76rem; }
    body.dark .fixture-row:last-child{ border-bottom:0; }
    body.dark .fixture-row time{ color:var(--muted); font-size:.65rem; }
    body.dark .fixture-row b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    body.dark .fixture-row em{ color:var(--volt-strong); font-size:.68rem; font-style:normal; font-weight:800; }
    body.dark .clubs-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
    body.dark .club-card{ min-width:0; padding:14px; border-radius:12px; background:var(--page); }
    body.dark .club-card h3{ margin:0 0 8px; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    body.dark .form-dots{ display:flex; gap:3px; margin-bottom:8px; }
    body.dark .form-dots i{ width:17px; height:17px; display:grid; place-items:center; border-radius:4px; background:#163b24; color:#6A92E2; font-size:.52rem; font-style:normal; font-weight:800; }
    body.dark .form-dots i.d{ background:#3d3925; color:#ffe083; }
    body.dark .form-dots i.l{ background:#422327; color:#ff9ca8; }
    body.dark .club-card p{ margin:0; color:var(--muted); font-size:.65rem; }
    body.dark .story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    body.dark .story-panel{ padding-top:13px; border-top:2px solid var(--ink); }
    body.dark .story-panel span{ color:var(--volt-strong); font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    body.dark .story-panel h3{ margin:5px 0 7px; font-size:1rem; }
    body.dark .story-panel p{ margin:0; color:var(--muted); font-size:.76rem; line-height:1.6; }
    body.dark .toast{ position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,16px); max-width:calc(100% - 28px); padding:10px 15px; border-radius:999px; background:#07100b; color:#effff4; box-shadow:0 10px 35px rgba(0,0,0,.35); font-size:.75rem; opacity:0; pointer-events:none; transition:.2s ease; }
    body.dark .toast.show{ opacity:1; transform:translate(-50%,0); }
    @media (max-width: 850px) {
      body.dark .country-focus-hero, body.dark .focus-grid{ grid-template-columns:1fr; }
      body.dark .clubs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
      body.dark .story-grid{ grid-template-columns:1fr; }
    }
    @media (max-width: 520px) {
      body.dark .country-node{ --size: 3px; }
      body.dark .hover-card{ width:min(310px,calc(100% - 20px)); max-height:360px; overflow:auto; }
      body.dark .country-focus-hero{ padding:28px 20px; border-radius:18px; }
      body.dark .focus-country-title h1{ font-size:3.6rem; }
      body.dark .focus-grid{ grid-template-columns:1fr; }
      body.dark .focus-section{ padding:17px 14px; }
      body.dark .focus-section.full{ grid-column:auto; }
      body.dark .clubs-grid{ grid-template-columns:1fr; }
      body.dark .fixture-row{ grid-template-columns:65px minmax(0,1fr); }
      body.dark .fixture-row em{ grid-column:2; }
      body.dark .standings th:nth-child(3), body.dark .standings td:nth-child(3), body.dark .standings th:nth-child(4), body.dark .standings td:nth-child(4){ display:none; }
    }
  
/* Amar 2026-09-29: dark-mode layout alignment — the scoped originals outrank the
   unprefixed overrides above, so every structural override is re-asserted here. */
body.dark .search-form{grid-template-columns:auto 1fr auto auto;}
body.dark .atlas-shell{grid-template-rows:minmax(0,1fr);}
body.dark .mechanics{min-height:0;overflow-y:auto;}
@media (min-width:1021px){
  body.dark .search-row{grid-template-columns:minmax(0,1.72fr) minmax(330px,.68fr);column-gap:clamp(18px,2vw,30px);}
  body.dark .search-wrap{grid-column:1;}
  body.dark .atlas-shell{height:clamp(560px,calc(100svh - 288px),max(880px,calc(41.67vw + 64px)));}
  body.dark .mechanics{padding-top:22px;padding-bottom:22px;}
  body.dark{height:100% !important;max-height:100% !important;overflow:hidden !important;overscroll-behavior:none !important;}
}
@media (max-width:1020px){
  body.dark .search-wrap{grid-column:1/-1;}
}
@media (min-width:681px){
  body.dark .map-viewport{bottom:64px;}
  body.dark .zoom-tools{left:20px;right:20px;bottom:0;height:64px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;}
  body.dark .map-caption{right:20px;bottom:0;height:64px;display:flex;align-items:center;max-width:60%;}
}
/* Amar 2026-09-29: mobile balance, dark mode — mirrors the unprefixed block above. */
@media (max-width:1020px){
  body.dark .map-viewport{bottom:66px;}
  body.dark .map-caption{display:none;}
  body.dark .zoom-tools{left:0;right:0;bottom:8px;height:auto;min-height:48px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;}
  body.dark .route-banner .rb-text{white-space:normal;}
  body.dark .footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;}
  body.dark .footer-nav{flex-wrap:nowrap;gap:6px 18px;}
  body.dark .footer-link{white-space:nowrap;}
}

/* Amar 2026-09-29: dark-theme atlas — dark viewport, inverted map (dark sea, grey land) */
body.dark .map-viewport{background:#070c09;}
body.dark .map-world img{filter:invert(1) saturate(0);}

/* Amar 2026-09-29: plain blue dots until chosen (dark) */
body.dark .country-node{box-shadow:none;}
body.dark .country-node::before{display:none;}
/* Amar 2026-09-29: zoom side buttons (dark) */
body.dark .zoom-side button{border-color:rgba(255,255,255,.16);background:rgba(5,12,7,.9);color:#d8e6dc;}
body.dark .zoom-side button:hover{border-color:var(--volt);color:var(--volt);}
body.dark .zoom-side button:disabled{opacity:.35;}
body.dark .zoom-side button:disabled:hover{border-color:rgba(255,255,255,.16);color:#d8e6dc;}
/* Amar 2026-09-29: bigger caption, black search bar, readable route banner (dark) */
body.dark .map-caption{font-size:.8rem;}
body.dark .search-form{background:#000;}
body.dark .route-banner{background:rgba(3,6,4,.95);border-color:#243129;color:#f2faf5;}

  

    /* AdSense slots. Space is reserved up-front (min-height) so ads never shift the layout when they load. */
    .ad-slot{ margin:14px auto; padding:0 6px; text-align:center; }
    .ad-label{ display:block; margin-bottom:4px; color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .ad-slot ins.adsbygoogle{ display:block; }
    /* v24: visible reserved ad boxes — frame + placeholder until Google fills the unit */
    .ad-slot{ position:relative; border:1.5px dashed rgba(128,138,160,.55); border-radius:12px; padding:10px 8px 12px; overflow:hidden; }
    .ad-slot .ad-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:18px 10px 6px; color:var(--muted); font-size:.8rem; font-weight:700; letter-spacing:.05em; pointer-events:none; text-align:center; }
    .ad-slot .ad-ph span{ font-size:.66rem; font-weight:600; opacity:.8; letter-spacing:0; }
    .ad-slot ins.adsbygoogle{ position:relative; z-index:1; }
    /* v56: sidebar unit removed at build time (Amar's call) */
    .ad-slot-inarticle ins.adsbygoogle{ min-height:280px; }
    .ad-slot-prefooter ins.adsbygoogle{ min-height:90px; }
    .ad-slot:has(ins[data-ad-status="filled"]){ border-color:transparent; background:transparent; }
    .ad-slot:has(ins[data-ad-status="filled"]) .ad-ph{ display:none; }
    /* Slot 1 — leaderboard under the search bar */
    .ad-slot-leaderboard{ max-width:970px; margin:10px 0 18px; /* v72: left-aligned with the map column (Amar) */ }
    .ad-slot-leaderboard ins.adsbygoogle{ min-height:90px; }
    @media (max-width:727px){ .ad-slot-leaderboard ins.adsbygoogle{ min-height:60px; } }
    /* Desktop runs a locked, no-scroll screen: the leaderboard joins the fixed chrome budget,
       so the atlas gives back 100px (288px → 388px) and the footer never moves. */
    @media (min-width:1021px){
      .atlas-shell{ height:clamp(440px, calc(100svh - 388px), max(880px, calc(41.67vw + 64px))); min-height:440px; }
    }
    /* Slot 2 — country sidebar (the sidebar scrolls internally, so no layout risk) */
    
    
    /* Slot 3 — full-width break inside the country page grid */
    .ad-slot-inarticle{ grid-column:1 / -1; max-width:728px; margin:2px auto; }
    .ad-slot-inarticle ins.adsbygoogle{ min-height:120px; }
    /* Slot 4 — above the footer. The locked desktop screen has no spare height, so this one runs on phones/tablets, where the page scrolls. */
    .ad-slot-prefooter{ max-width:970px; }
    .ad-slot-prefooter ins.adsbygoogle{ min-height:90px; }
    @media (min-width:1021px){ .ad-slot-prefooter{ display:none; } }
  

/* ══════════ TRAVAIA PLUS — additive module styles (v13, by Juno) ══════════
   Everything is namespaced .tv- so it can never collide with the core app. */

/* Trip Facts card (sidebar + country page) */
.tv-facts{ margin:14px 0 4px; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--deep-2); }
.tv-facts-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.tv-facts-title{ color:var(--volt); font-size:.64rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.tv-live-dot{ display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tv-live-dot i{ width:7px; height:7px; border-radius:50%; background:#2e9e5b; box-shadow:0 0 8px #2e9e5b; }
.tv-row{ display:flex; align-items:baseline; gap:9px; padding:6px 0; border-top:1px solid var(--line); font-size:.8rem; }
.tv-row:first-of-type{ border-top:0; }
.tv-ico{ flex:0 0 20px; text-align:center; font-size:.85rem; }
.tv-row b{ font-weight:800; color:var(--ink); }
.tv-row span{ color:var(--muted); }
.tv-row .tv-val{ color:var(--ink); font-weight:700; }
.tv-marks{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.tv-mark-btn{ border:1px solid var(--line); border-radius:9px; background:transparent; color:var(--ink); padding:8px 6px; cursor:pointer; font-size:.72rem; font-weight:800; }
.tv-mark-btn:hover{ border-color:var(--volt); color:var(--volt); }
.tv-mark-btn.on-v{ background:#2e9e5b; border-color:#2e9e5b; color:#fff; }
.tv-mark-btn.on-w{ background:#d9930d; border-color:#d9930d; color:#fff; }
.tv-facts-note{ margin:9px 0 0; color:var(--muted); font-size:.64rem; line-height:1.5; }
/* Country page variant spans the grid like his other full sections */
.focus-grid .tv-facts{ margin:0; }
.focus-grid .tv-facts .tv-row{ font-size:.86rem; }

/* Map dots for visited / wishlist (his nodes carry data-cname — perfect hooks) */
.country-node.tv-v{ background:#2e9e5b !important; }
.country-node.tv-w{ background:#d9930d !important; }
body.dark .country-node.tv-v{ background:#2e9e5b !important; }
body.dark .country-node.tv-w{ background:#d9930d !important; }

/* Floating dock (bottom-right): Daily · Compare · My World */
.tv-dock{ position:fixed; z-index:95; right:16px; bottom:16px; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.tv-chip{ display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink);
  padding:10px 15px; cursor:pointer; font-size:.78rem; font-weight:800; box-shadow:var(--shadow); }
.tv-chip:hover{ border-color:var(--volt); color:var(--volt); }
.tv-chip .tv-chip-pct{ color:var(--volt); }
.tv-chip .tv-dot{ width:8px; height:8px; border-radius:50%; background:#d9930d; box-shadow:0 0 8px #d9930d; }
@media (max-width:680px){ .tv-dock{ right:10px; bottom:10px; } .tv-chip{ padding:9px 12px; font-size:.72rem; } }

/* Compare mode */
.tv-cmp-selects{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin-bottom:12px; }
.tv-cmp-selects select{ width:100%; box-sizing:border-box; background:var(--page); border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:10px; font-size:.82rem; font-family:inherit; }
.tv-swap{ width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--page); color:var(--ink); cursor:pointer; font-size:1rem; }
.tv-swap:hover{ border-color:var(--volt); color:var(--volt); }
.tv-cmp-table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.tv-cmp-table th{ font-family:Oswald,Manrope,sans-serif; font-size:1rem; text-align:left; padding:8px 6px; border-bottom:2px solid var(--ink); }
.tv-cmp-table th img{ width:26px; height:19px; object-fit:cover; border-radius:4px; vertical-align:-3px; margin-right:7px; }
.tv-cmp-table td{ padding:7px 6px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.tv-cmp-table td:first-child{ width:27%; color:var(--volt); font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding-top:9px; }
.tv-cmp-table td b{ color:var(--ink); }
.tv-verdict{ margin-top:13px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:var(--deep-2); font-size:.8rem; line-height:1.6; }
.tv-verdict b{ color:var(--volt); }

/* Daily game */
.tv-clue{ padding:10px 13px; border:1px solid var(--line); border-radius:11px; background:var(--deep-2); font-size:.84rem; margin-bottom:8px; line-height:1.55; }
.tv-clue b{ color:var(--volt); }
.tv-clue.locked{ opacity:.45; }
.tv-guessrow{ display:flex; gap:8px; margin:12px 0 4px; }
.tv-guessrow input{ flex:1; min-width:0; box-sizing:border-box; background:var(--page); border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:10px 12px; font-size:.85rem; font-family:inherit; }
.tv-guessrow button{ border:0; border-radius:10px; padding:10px 16px; cursor:pointer; font-weight:800; font-size:.8rem; background:var(--volt); color:#fff; }
.tv-hist{ display:grid; gap:6px; margin-top:10px; }
.tv-hist-row{ display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:9px; padding:7px 11px; font-size:.78rem; }
.tv-hist-row .tv-dist{ color:var(--muted); font-weight:700; white-space:nowrap; }
.tv-hist-row.win{ border-color:#2e9e5b; background:rgba(46,158,91,.1); font-weight:800; }
.tv-streak{ display:inline-block; margin-left:8px; color:#d9930d; font-weight:800; }

/* My World overlay (mirrors his share-modal language) */
.tv-overlay{ position:fixed; inset:0; z-index:320; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.55); }
.tv-modal{ position:relative; width:min(460px,94vw); max-height:86svh; overflow-y:auto; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.tv-modal h2{ margin:0; font-family:Oswald,Manrope,sans-serif; letter-spacing:.06em; font-size:1.3rem; }
.tv-modal .tv-sub{ color:var(--muted); font-size:.82rem; margin:4px 0 14px; font-weight:700; }
.tv-close{ position:absolute; top:8px; right:14px; background:none; border:0; font-size:1.6rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px; }
.tv-close:hover{ color:var(--ink); }
.tv-scorebar{ height:10px; border-radius:999px; background:var(--deep-2); border:1px solid var(--line); overflow:hidden; margin:6px 0 4px; }
.tv-scorebar i{ display:block; height:100%; background:#2e9e5b; }
.tv-listlabel{ margin:16px 0 7px; color:var(--volt); font-size:.64rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.tv-flags{ display:flex; flex-wrap:wrap; gap:6px; }
.tv-flagchip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 10px 4px 5px; font-size:.72rem; font-weight:700; }
.tv-flagchip img{ width:20px; height:14px; object-fit:cover; border-radius:3px; }
.tv-empty{ color:var(--muted); font-size:.78rem; }
.tv-share{ width:100%; margin-top:20px; border:0; border-radius:10px; padding:11px 14px; cursor:pointer; font-weight:800; font-size:.8rem; background:var(--volt); color:#fff; }
.tv-share:hover{ background:#6A92E2; }

/* ── v14: live strip inside the app's hover card ── */
.tv-hover-live{ margin-top:10px; padding-top:9px; border-top:1px solid rgba(22,33,27,.12); font-size:.7rem; line-height:1.55; color:#33413a; }
.tv-hover-live .tv-hl-row{ display:flex; gap:6px; align-items:baseline; white-space:normal; }
.tv-hover-live b{ color:#3D5AB4; }
.tv-hover-live .tv-hl-dim{ color:#64766b; }
body.dark .tv-hover-live{ border-top-color:rgba(255,255,255,.16); color:#d7e4da; }
body.dark .tv-hover-live b{ color:#8fb0ef; }
body.dark .tv-hover-live .tv-hl-dim{ color:#9baaa1; }

/* ── v14: dual-clock row (capital time vs your time) in Trip Facts ── */
.tv-clocks{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.tv-clock b{ display:block; font-size:.95rem; color:var(--ink); }
.tv-clock span{ font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tv-vs{ font-size:.6rem; font-weight:800; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 7px; white-space:nowrap; }

/* ── v15: hover card escapes the map (southern cards show in full) ── */
.hover-card.tv-escaped{ position:fixed; z-index:240; }
body.tv-panning .hover-card{ display:none !important; }

/* ── v15: dock lives in the header, beside the theme toggle ── */
.header-controls{ flex-wrap:wrap; }
.tv-dock.tv-dock-header{ position:static; flex-direction:row; align-items:center; gap:8px; }
.tv-dock.tv-dock-header .tv-chip{ padding:8px 13px; font-size:.74rem; box-shadow:0 4px 14px rgba(15,25,18,.10); }
@media (max-width:1300px){ .tv-dock.tv-dock-header .tv-chip{ padding:7px 10px; font-size:.7rem; } }
/* v18: the whole header cluster stays on ONE line — buttons, theme icon, EN/ES */
@media (min-width:1021px){
  .header-controls{ flex-wrap:nowrap; align-items:center; }
  .search-row{ grid-template-columns:minmax(0,1fr) auto !important; }
}

/* ── v15: My World how-it-works ── */
.tv-how{ background:rgba(61,90,180,.07); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:.8rem; line-height:1.6; color:#43544a; margin:14px 0 2px; text-align:left; }
body.dark .tv-how{ color:#c9d4cd; }

/* ── v20: TRAVAIA Signature editorial ── */
.tv-sig-side{ margin:14px 0 4px; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:var(--deep-2); }
.tv-sig-eyebrow{ color:var(--volt); font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.tv-sig-tagline{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:1.04rem; line-height:1.45; color:var(--ink); margin:0 0 12px; }
.tv-sig-tagline.big{ font-size:1.55rem; line-height:1.35; margin-bottom:14px; }
.tv-sig-label{ display:block; color:var(--volt); font-size:.62rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; margin-bottom:4px; }
.tv-sig-wow{ font-size:.84rem; line-height:1.65; color:var(--muted); margin:0; }
.tv-sig-wow.big{ font-size:.98rem; max-width:62ch; }
.tv-sig-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.tv-sig-item p{ margin:0; font-size:.86rem; line-height:1.6; color:var(--muted); }
@media (max-width:760px){ .tv-sig-trio{ grid-template-columns:1fr; } .tv-sig-tagline.big{ font-size:1.3rem; } }

/* ── v21: Signature leads the sidebar (above the tabs) + sidebar place lines ── */
.tv-sig-side{ margin:10px 0 14px; }
.tv-sig-trio.stack{ grid-template-columns:1fr; gap:12px; margin-top:14px; padding-top:12px; }
.tv-place-line-side{ display:block; font-weight:400; font-size:.78rem; line-height:1.5; color:var(--muted); margin-top:3px; }

/* ── v25: language picker (sits beside the core EN/ES switch) ── */
/* v51: language pill — looks exactly like the EN/ES switch, opens the 10-language list.
   The legacy EN/ES switch is gone everywhere (Amar's call); this pill is the one language button. */
.language-switch{ display:none !important; }
.tv-langpill{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:4px; border:1px solid var(--line); border-radius:999px; background:#ffffff; cursor:pointer; }
.tv-langpill-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; min-height:42px; padding:0 12px; border:0; border-radius:999px; background:var(--volt); color:#ffffff; font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.tv-langpill-chev{ color:var(--muted); font-size:.75rem; line-height:1; padding-right:10px; }
.tv-langsel{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.tv-langsel option{ color:#111; }
.tv-langpill:focus-within{ box-shadow:0 0 0 2px var(--volt); }
body.dark .tv-langpill{ background:#0a100c; }
@media (max-width:680px){
  .tv-langpill{ padding:3px; }
  .tv-langpill-badge{ min-width:37px; min-height:38px; padding-inline:8px; }
}

/* ── v45: desktop side-rail ads + mobile hardening ── */
.tv-rail{ display:none; }
@media (min-width:1400px){
  .tv-shell{ display:grid; grid-template-columns:160px minmax(0,1560px) 160px; gap:20px; justify-content:center; align-items:start; }
  .tv-shell > .page{ grid-column:2; grid-row:1; min-width:0; }
  .tv-rail{ display:block; grid-row:1; align-self:start; position:sticky; top:14px; }
  .tv-rail-l{ grid-column:1; justify-self:end; }
  .tv-rail-r{ grid-column:3; justify-self:start; }
  .ad-slot-rail{ max-width:160px; margin:0; }
  .ad-slot-rail ins.adsbygoogle{ min-height:600px; }
}
/* never let an ad box collapse narrow or overflow on phones */
.summary:empty{ display:none; }
@media (max-width:680px){
  .ad-slot{ width:100%; max-width:100%; }
  .country-actions{ grid-template-columns:1fr; }
  .country-actions button{ width:100%; min-height:50px; font-size:1rem; }
  .tabs .tab{ min-height:48px; font-size:.95rem; }
  .affiliate-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .affiliate-row a{ flex:1 1 140px; min-height:48px; display:flex; align-items:center; justify-content:center; }
  .route-banner{ max-width:96%; }
  .map-action{ flex:1 1 150px; min-height:48px; }
}
.tv-ver{ opacity:.45; font-size:.72rem; margin-inline-start:10px; }
/* v51: legacy EN/ES switch is hidden on ALL viewports (replaces the v48 mobile-only rule) */
/* v53: the default search hint is gone (Amar) — collapse the line when empty so it
   takes no space; the core still writes live status messages (zoom/selection) into it. */
.search-feedback:empty{ display:none; }
/* v57: Travaia Pedia — Share + Pedia buttons above Trip Facts */
.tv-top-actions{ display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0 10px; }
.tv-top-actions .btn{ width:100%; margin:0; }
/* v57: Travaia Pedia — chaptered guide cards */
.tv-pedia{ margin:18px 2px 8px; border-top:1px solid var(--line); padding-top:14px; }
.tv-pedia-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 10px; }
.tv-pedia-kicker{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--volt); }
.tv-pedia-hint{ font-size:.68rem; color:var(--muted); text-align:right; max-width:62%; line-height:1.45; }
.tv-pchips{ display:flex; flex-wrap:wrap; gap:8px; overflow:visible; padding:2px 2px 12px; margin:0 0 4px; cursor:default; }
@media (min-width:1021px){ .tv-pchips{ justify-content:center; } }
.tv-pchips::-webkit-scrollbar{ display:none; }
.tv-pchip{ flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px; padding:7px 14px; font-size:.74rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .15s; }
.tv-pchip:hover{ border-color:var(--volt); color:var(--volt); }
.tv-pchip.on{ background:var(--volt); border-color:var(--volt); color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.14); }
.tv-pedia-track{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 12px; -webkit-overflow-scrolling:touch; cursor:grab; }
.tv-pedia-track:active{ cursor:grabbing; }
.tv-pedia-card{ flex:0 0 88%; scroll-snap-align:start; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; padding:20px 18px 16px; background:rgba(255,255,255,.6); box-shadow:0 6px 22px rgba(20,30,25,.07); }
.tv-pedia-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--volt),rgba(0,0,0,0)); }
.tv-pedia-card h4{ margin:0 0 8px; font-size:1.04rem; line-height:1.32; letter-spacing:-.01em; font-weight:800; }
.tv-pedia-sum{ margin:0 0 10px; font-size:.84rem; line-height:1.55; color:var(--muted); font-style:italic; }
.tv-pedia-full{ margin:2px 0 10px; }
.tv-pedia-full p{ margin:0 0 10px; font-size:.84rem; line-height:1.65; }
.tv-pedia-full p:last-child{ margin-bottom:0; }
.tv-pedia-more{ background:none; border:none; padding:0; color:var(--volt); font-weight:800; font-size:.8rem; cursor:pointer; letter-spacing:.02em; }
.tv-pedia-more:hover{ text-decoration:underline; }
.tv-pedia-dots{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; padding:0 12px; }
.tv-pedia-dots i{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .15s; }
.tv-pedia-dots i.on{ background:var(--volt); transform:scale(1.25); }
body.dark .tv-pedia-card{ background:rgba(255,255,255,.045); box-shadow:0 6px 22px rgba(0,0,0,.3); }
body.dark .tv-pchip{ color:var(--muted); }
body.dark .tv-pchip.on{ color:#fff; }
@media (max-width:680px){
  .tv-pedia-card{ flex-basis:92%; padding:18px 15px 14px; }
  .tv-pedia-card h4{ font-size:1rem; }
}
/* v63 mobile: finger-friendly Pedia controls — bigger tap targets, reliable native touch scrolling */
@media (max-width:680px){
  .tv-pchip{ padding:10px 18px; font-size:.78rem; }
  .tv-pedia-more{ display:inline-block; padding:10px 4px; font-size:.85rem; }
  .tv-pedia-track{ touch-action:pan-x pan-y; }
}

  

/* v100: 50-States explorer */
.tv-state-head{ margin:0 2px 12px; }
.tv-state-back{ background:none; border:none; color:var(--volt); font-weight:800; font-size:.8rem; cursor:pointer; padding:4px 0 10px; display:block; }
.tv-state-hero{ width:100%; height:150px; object-fit:cover; border-radius:14px; display:block; }
.tv-state-meta{ padding:10px 2px 0; }
.tv-state-name{ font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.tv-state-sub{ font-size:.8rem; color:var(--muted); margin-top:2px; }
/* v108: Niece's Media Studio */
.niece-hero{ background:linear-gradient(135deg, #6A92E2, #7c5cff); border-radius:16px; padding:18px; color:#fff; margin-bottom:16px; }
.niece-hero h3{ margin:0 0 6px; font-size:1.1rem; }
.niece-hero p{ margin:0 0 12px; font-size:.85rem; opacity:.95; }
.niece-progress-track{ height:10px; background:rgba(255,255,255,.3); border-radius:999px; overflow:hidden; }
.niece-progress-fill{ height:100%; width:0%; background:#fff; border-radius:999px; transition:width .4s ease; }
.niece-progress-text{ font-size:.78rem; font-weight:700; margin-top:6px; }
.niece-step{ display:flex; gap:12px; margin-bottom:14px; background:var(--card,#fff); border:1px solid var(--line); border-radius:14px; padding:14px; }
.niece-step-num{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--volt); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.niece-step-body{ flex:1; min-width:0; }
.niece-step-body h4{ margin:2px 0 6px; font-size:.95rem; }
.niece-hint{ font-size:.82rem; color:var(--muted); margin:0 0 10px; }
.niece-select{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line); font-size:.9rem; font-weight:600; background:transparent; color:inherit; }
.niece-preview{ margin-top:10px; }
.niece-preview iframe{ width:100%; aspect-ratio:16/9; border-radius:10px; border:none; }
.niece-extra{ margin-top:10px; font-size:.82rem; color:var(--muted); }
.niece-extra summary{ cursor:pointer; font-weight:600; }
.niece-mode-toggle{ display:flex; gap:8px; margin-bottom:10px; }
.niece-mode-btn{ flex:1; border:1px solid var(--line); background:transparent; color:inherit; border-radius:999px; padding:9px 12px; font-size:.82rem; font-weight:700; cursor:pointer; }
.niece-mode-btn.on{ background:var(--volt); border-color:var(--volt); color:#fff; }
/* v104: sexy States dropdown in the USA header (replaces the region label) */
/* v105: compact centered pill — breathing room above, quarter-width feel */
/* v106: language-blue solid (var(--volt)), extra breathing room */
.tv-states-dd{ position:relative; margin:22px 0 14px; text-align:center; }
.tv-states-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; max-width:92%; box-sizing:border-box; border:none; border-radius:999px; padding:10px 20px; font-size:.82rem; font-weight:800; letter-spacing:.01em; color:#fff; cursor:pointer; background:var(--volt); box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .12s ease, box-shadow .12s ease; }
.tv-states-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.22); }
.tv-states-btn:active{ transform:translateY(0); }
.tv-states-btn .tv-states-chev{ transition:transform .18s ease; flex:none; }
.tv-states-btn.open .tv-states-chev{ transform:rotate(180deg); }
.tv-states-panel{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; max-height:300px; overflow-y:auto; background:var(--card, #fff); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.22); padding:6px; text-align:left; }
.tv-states-opt{ display:block; width:100%; box-sizing:border-box; text-align:left; border:none; background:transparent; color:inherit; font-size:.84rem; font-weight:600; padding:10px 12px; border-radius:9px; cursor:pointer; }
.tv-states-opt:hover{ background:var(--line); color:var(--volt); }
/* v109: niece's video in state media */
.tv-media-video{ margin-bottom:12px; }
.tv-media-video iframe{ width:100%; aspect-ratio:16/9; border-radius:12px; border:none; display:block; }
/* v103: States dropdown under the Pedia cards */
.tv-pedia-photo{ width:100%; height:130px; object-fit:cover; border-radius:10px; margin:0 0 10px; display:block; }
.tv-shimmer-card{ display:flex; flex-direction:column; gap:10px; flex:0 0 88%; border:1px solid var(--line); border-radius:16px; padding:20px 18px; }
.tv-shimmer{ height:14px; border-radius:7px; background:linear-gradient(90deg,var(--line) 25%,rgba(128,128,128,.25) 50%,var(--line) 75%); background-size:200% 100%; animation:tvshim 1.1s infinite; }
@keyframes tvshim{ to{ background-position:-200% 0; } }
/* v102: media accordion (state views) */
.tv-state-media{ margin:2px 2px 14px; }
.tv-media-h{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--volt); margin:0 2px 10px; }
.tv-media-item{ border:1px solid var(--line); border-radius:14px; margin-bottom:8px; overflow:hidden; background:var(--paper); }
.tv-media-head{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; background:none; border:0; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.tv-media-head img{ width:64px; height:44px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.tv-media-head span{ flex:1; font-weight:800; font-size:.86rem; }
.tv-media-chev{ width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .25s; flex:0 0 auto; }
.tv-media-item.open .tv-media-chev{ transform:rotate(225deg); }
.tv-media-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.tv-media-item.open .tv-media-body{ max-height:620px; }
.tv-media-body img{ width:100%; display:block; }

/* v201: Go button — replaces the 3-letter ISO box when the country folder has guide files */
.country-code.country-code-go{ border:none; padding:0; min-width:0; height:auto; background:none; }
.country-go{
  display:inline-block; padding:9px 20px; border-radius:10px;
  background:#2b4bd3; color:#fff; font-weight:800; font-size:.85rem;
  text-decoration:none; letter-spacing:.03em;
}
.country-go:hover{ background:#1e3ab0; color:#fff; }
body.dark .country-go{ background:#3b5bff; color:#fff; }
body.dark .country-go:hover{ background:#2b4bd3; color:#fff; }

/* v201: mobile dock — Daily Country / Compare / My World as three equal buttons
   in normal flow beneath the map. Mobile header: logo left, theme + language right. */
@media (max-width:680px){
  .tv-dock.tv-dock-mobile{
    position:static; z-index:auto;
    display:flex; flex-direction:row; align-items:stretch;
    width:100%; gap:8px; margin:10px 0 0;
  }
  .tv-dock.tv-dock-mobile .tv-chip{
    flex:1 1 0; text-align:center;
    padding:11px 6px; font-size:.74rem; white-space:nowrap;
  }
}