:root {
      color-scheme: dark;
      --bg: #000;
      --white: #f7f7f8;
      --border: rgba(255,255,255,.64);
      --button: rgba(255,255,255,.045);
      --button-pressed: rgba(255,255,255,.09);
      --phone: 430px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background: var(--bg);
      color: var(--white);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    body {
      overflow-x: hidden;
      overscroll-behavior-x: none;
      background: #000;
    }

    .app {
      width: min(100%, var(--phone));
      min-height: 100svh;
      margin: 0 auto;
      position: relative;
      isolation: isolate;
      background: #000;
      overflow: clip visible;
    }

    #stars {
      position: fixed;
      inset: 0;
      z-index: -3;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      background: #000;
    }

    .hero {
      min-height: 1145px;
      position: relative;
      overflow: hidden;
      padding-top: max(24px, env(safe-area-inset-top));
    }

    .topbar {
      height: 58px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 20;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 720;
      font-size: 22px;
      line-height: 1;
      letter-spacing: -.038em;
      user-select: none;
    }

    .brand-globe {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.32);
      background:
        radial-gradient(ellipse at 38% 28%, rgba(255,255,255,.76) 0 11%, transparent 12%),
        radial-gradient(ellipse at 64% 62%, rgba(255,255,255,.56) 0 14%, transparent 15%),
        radial-gradient(ellipse at 36% 65%, rgba(255,255,255,.35) 0 9%, transparent 10%),
        radial-gradient(circle at 36% 28%, #70757c 0, #272a2f 45%, #090a0c 72%, #000 100%);
      box-shadow:
        inset -8px -8px 15px rgba(0,0,0,.56),
        inset 4px 3px 8px rgba(255,255,255,.14),
        0 0 12px rgba(255,255,255,.04);
      position: relative;
      overflow: hidden;
    }

    .brand-globe::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .nav-icons {
      display: flex;
      align-items: center;
      gap: 21px;
    }

    .nav-icon {
      width: 28px;
      height: 28px;
      border: 0;
      padding: 0;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.86);
      background: transparent;
    }

    .nav-icon svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
      stroke-width: 1.75;
      fill: none;
      stroke-linecap: round;
    }

    .question {
      width: 100%;
      position: relative;
      z-index: 20;
      margin-top: 132px;
      padding: 0 28px;
      text-align: center;
    }

    h1 {
      margin: 0;
      font-size: clamp(52px, 13.3vw, 58px);
      line-height: .98;
      font-weight: 790;
      letter-spacing: -.061em;
      color: #f8f8f8;
      white-space: nowrap;
    }

    .votes {
      margin-top: 33px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .vote {
      appearance: none;
      -webkit-appearance: none;
      min-width: 0;
      height: 67px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background:
        linear-gradient(180deg, rgba(255,255,255,.064), rgba(255,255,255,.025));
      color: #f5f5f5;
      font: inherit;
      font-size: 17px;
      line-height: 1;
      font-weight: 500;
      letter-spacing: -.025em;
      box-shadow:
        inset 0 0 0 .5px rgba(255,255,255,.05),
        0 9px 24px rgba(0,0,0,.34);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      transition:
        transform 120ms ease,
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      position: relative;
      overflow: hidden;
    }

    .vote:hover {
      border-color: rgba(255,255,255,.82);
      background: linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.03));
    }

    .vote:active,
    .vote.is-pressed {
      transform: translateY(1px) scale(.978);
      border-color: rgba(255,255,255,.95);
      background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
      box-shadow:
        inset 0 0 0 .5px rgba(255,255,255,.12),
        0 5px 15px rgba(0,0,0,.3);
    }

    .vote:disabled {
      opacity: 1;
      cursor: default;
    }

    .vote::after {
      content: "";
      position: absolute;
      top: -38%;
      bottom: -38%;
      width: 34%;
      left: -48%;
      opacity: 0;
      pointer-events: none;
      transform: skewX(-18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    }

    .vote.is-charging {
      border-color: rgba(255,255,255,.94);
      background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.042));
      will-change: transform, box-shadow;
      transform-origin: 50% 52%;
      animation:
        chargeTremble 86ms linear infinite,
        chargeBreath 510ms ease-in-out infinite;
    }

    .vote.is-charging::after {
      opacity: 1;
      animation: chargeSweep 590ms linear infinite;
    }

    /* Deliberately visible "loaded spring" vibration while the globe aligns. */
    @keyframes chargeTremble {
      0%   { transform: translate3d(-1.25px, .10px, 0) rotate(-.16deg) scale(.998, 1.012); }
      20%  { transform: translate3d(.75px, -.65px, 0) rotate(.12deg) scale(1.007, 1.006); }
      40%  { transform: translate3d(-.55px, .85px, 0) rotate(-.08deg) scale(1.011, .999); }
      60%  { transform: translate3d(1.30px, .20px, 0) rotate(.16deg) scale(1.004, 1.008); }
      80%  { transform: translate3d(-.90px, -.55px, 0) rotate(-.12deg) scale(1.009, 1.003); }
      100% { transform: translate3d(.55px, .65px, 0) rotate(.08deg) scale(1.002, 1.011); }
    }

    @keyframes chargeBreath {
      0%, 100% {
        box-shadow:
          inset 0 0 0 .5px rgba(255,255,255,.10),
          inset 0 0 18px rgba(255,255,255,.015),
          0 9px 24px rgba(0,0,0,.34);
      }
      50% {
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,.22),
          inset 0 0 25px rgba(255,255,255,.045),
          0 0 0 2px rgba(255,255,255,.045),
          0 12px 30px rgba(0,0,0,.46);
      }
    }

    @keyframes chargeSweep {
      from { left: -48%; }
      to { left: 118%; }
    }

    .vote.is-firing {
      animation: springRelease 270ms cubic-bezier(.16,.9,.22,1) 1;
      border-color: rgba(255,255,255,1);
      will-change: transform;
    }

    @keyframes springRelease {
      0%   { transform: translate3d(0,0,0) scale(1.01,1.01); }
      18%  { transform: translate3d(0,3px,0) scale(.955,1.055); }
      40%  { transform: translate3d(0,-5px,0) scale(1.065,.945); }
      66%  { transform: translate3d(0,1.5px,0) scale(.988,1.018); }
      100% { transform: translate3d(0,0,0) scale(1,1); }
    }

    .earth-wrap {
      position: absolute;
      z-index: 4;
      top: 472px;
      left: 50%;
      width: 620px;
      height: 620px;
      transform: translateX(-50%);
      touch-action: pan-y;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
      -webkit-user-select: none;
      user-select: none;
    }

    #globeViz,
    .earth-exact-poster {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    /*
      Bootstrap renderer is physically invisible.
      animateIn is disabled, so the camera/sphere never performs the library's
      default scale-in animation behind the scenes.
    */
    #globeViz {
      z-index: 2;
      opacity: 0;
      pointer-events: none;
      filter: none;
    }

    #globeViz canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
      touch-action: pan-y !important;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
      outline: none;
      -webkit-user-select: none;
      user-select: none;
    }

    /*
      This is created at runtime FROM the final frozen WebGL canvas.
      It is therefore pixel-identical to the renderer underneath.
    */
    .earth-exact-poster {
      z-index: 5;
      object-fit: fill;
      opacity: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      transition: opacity 430ms cubic-bezier(.18,.72,.18,1);
    }

    /* The ONLY visible Earth entrance. */
    .earth-wrap.poster-visible .earth-exact-poster {
      opacity: 1;
    }

    /*
      Renderer becomes visible only while the exact snapshot is fully opaque
      over it. The two layers represent the exact same stationary frame.
    */
    .earth-wrap.renderer-armed #globeViz {
      opacity: 1;
      pointer-events: auto;
    }

    /* Snapshot removal itself is instant: identical pixels underneath. */
    .earth-wrap.handoff-complete .earth-exact-poster {
      display: none;
    }



    .launch-flash {
      position: fixed;
      z-index: 82;
      width: 10px;
      height: 10px;
      margin: -5px;
      border-radius: 50%;
      pointer-events: none;
      background: #fff;
      box-shadow: 0 0 12px rgba(255,255,255,.98), 0 0 30px rgba(255,255,255,.42);
      animation: launchFlash 240ms cubic-bezier(.12,.8,.2,1) forwards;
    }

    .launch-flash::after {
      content: "";
      position: absolute;
      inset: -4px;
      border: 1px solid rgba(255,255,255,.9);
      border-radius: 50%;
      animation: launchRing 260ms cubic-bezier(.12,.8,.2,1) forwards;
    }

    @keyframes launchFlash {
      0% { transform: scale(.45); opacity: .25; }
      35% { transform: scale(1.65); opacity: 1; }
      100% { transform: scale(.6); opacity: 0; }
    }

    @keyframes launchRing {
      from { transform: scale(.25); opacity: .9; }
      to { transform: scale(3.1); opacity: 0; }
    }

    .flight-thread {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 78;
      pointer-events: none;
      overflow: visible;
      opacity: 1;
      transition: opacity 220ms ease;
    }

    .flight-thread.is-ending {
      opacity: 0;
    }

    .flight-thread .trail-glow {
      fill: none;
      stroke: rgba(255,255,255,.28);
      stroke-width: 5.5;
      stroke-linecap: round;
      filter: blur(4px);
    }

    .flight-thread .trail-core {
      fill: none;
      stroke: rgba(255,255,255,.72);
      stroke-width: 1.25;
      stroke-linecap: round;
    }

    .flight-thread .launch-tether {
      fill: #fff;
      opacity: .92;
      filter: drop-shadow(0 0 5px rgba(255,255,255,.62));
    }

    .flight-thread .trail-head-glow {
      fill: rgba(255,255,255,.14);
      stroke: rgba(255,255,255,.38);
      stroke-width: .8;
    }

    .meteor {
      position: fixed;
      z-index: 80;
      width: 10px;
      height: 10px;
      margin-left: -5px;
      margin-top: -5px;
      border-radius: 50%;
      background: #fff;
      box-shadow:
        0 0 7px rgba(255,255,255,.95),
        0 0 16px rgba(255,255,255,.48);
      pointer-events: none;
      will-change: transform;
    }

    .meteor::after {
      content: "";
      position: absolute;
      right: 4px;
      top: 3px;
      width: 44px;
      height: 1.5px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.72) 100%);
      filter: blur(.2px);
      transform-origin: 100% 50%;
    }

    .impact {
      position: fixed;
      z-index: 79;
      width: 12px;
      height: 12px;
      margin-left: -6px;
      margin-top: -6px;
      border-radius: 50%;
      pointer-events: none;
      background: #fff;
      box-shadow: 0 0 16px rgba(255,255,255,.95), 0 0 36px rgba(255,255,255,.4);
      animation: impactCore 560ms cubic-bezier(.15,.75,.2,1) forwards;
    }

    .impact::before,
    .impact::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 14px;
      height: 14px;
      margin: -7px;
      border: 1px solid rgba(255,255,255,.92);
      border-radius: 50%;
      animation: impactRing 620ms cubic-bezier(.12,.72,.2,1) forwards;
    }

    .impact::after {
      animation-delay: 70ms;
      opacity: .62;
    }

    @keyframes impactCore {
      0% { transform: scale(.55); opacity: 1; }
      24% { transform: scale(1.55); opacity: 1; }
      100% { transform: scale(.45); opacity: 0; }
    }

    @keyframes impactRing {
      0% { transform: scale(.3); opacity: .95; }
      100% { transform: scale(5.2); opacity: 0; }
    }

    .footer {
      min-height: 165px;
      margin-top: 0;
      border-top: 1px solid rgba(255,255,255,.09);
      display: grid;
      place-items: center;
      color: rgba(255,255,255,.42);
      font-size: 14px;
      letter-spacing: .015em;
      background: #000;
      padding-bottom: env(safe-area-inset-bottom);
    }

    @media (max-width: 380px) {
      .topbar { padding-inline: 19px; }
      .question { padding-inline: 22px; margin-top: 126px; }
      .votes { gap: 12px; }
      .vote { font-size: 15.5px; }
      .earth-wrap { width: 590px; height: 590px; }
    }

    @media (min-width: 700px) {
      body::before,
      body::after {
        content: "";
        position: fixed;
        inset-block: 0;
        width: calc((100vw - var(--phone)) / 2);
        background: #030303;
        pointer-events: none;
      }
      body::before { left: 0; }
      body::after { right: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      #stars { display: none; }
      .vote { transition: none; }
    }
  

    /* ---------- v5: only the agreed mock content below the untouched v4 hero ---------- */
    .dashboard {
      position: relative;
      z-index: 14;
      margin-top: -72px;
      padding: 0 18px 44px;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 70px, #000 100%);
    }

    .stat-card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.115);
      background: rgba(255,255,255,.026);
      border-radius: 19px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 18px 50px rgba(0,0,0,.34);
    }

    .stat-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 34%);
    }

    .stat-primary { min-height: 178px; padding: 20px 20px 19px; }
    .stat-kicker { margin: 0; color: rgba(255,255,255,.52); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
    .today-main { display: flex; align-items: flex-end; gap: 10px; margin-top: 20px; }
    .today-value { font-size: 59px; line-height: .82; font-weight: 730; letter-spacing: -.065em; color: rgba(255,255,255,.96); }
    .today-label { padding-bottom: 2px; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.05; font-weight: 520; letter-spacing: -.025em; }
    .today-meta {
      margin-top: 24px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.075);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: rgba(255,255,255,.47);
      font-size: 13px;
      letter-spacing: -.01em;
    }
    .today-meta strong { color: rgba(255,255,255,.78); font-weight: 560; }

    .rank-card { margin-top: 12px; padding: 19px 18px 13px; }
    .rank-card h2 { margin: 0 0 13px; color: rgba(255,255,255,.91); font-size: 17px; line-height: 1.15; font-weight: 650; letter-spacing: -.035em; }
    .rank-list { list-style: none; margin: 0; padding: 0; }
    .rank-row, .rank-link {
      min-height: 47px;
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 8px;
      border-top: 1px solid rgba(255,255,255,.065);
    }
    .rank-row:first-child, .rank-link:first-child { border-top: 0; }
    .rank-link {
      color: inherit;
      text-decoration: none;
      margin-inline: -8px;
      padding-inline: 8px;
      border-radius: 12px;
      -webkit-tap-highlight-color: transparent;
      transition: background 130ms ease, transform 130ms ease;
    }
    .rank-link:active { background: rgba(255,255,255,.045); transform: scale(.992); }
    .rank-number { color: rgba(255,255,255,.28); font-size: 12px; font-variant-numeric: tabular-nums; }
    .rank-place { color: rgba(255,255,255,.76); font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
    .rank-value { color: rgba(255,255,255,.92); font-size: 15px; font-weight: 610; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }

    .rank-self {
      min-height: 43px;
      margin-top: 5px;
      padding-top: 9px;
      border-top: 1px solid rgba(255,255,255,.085);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: rgba(255,255,255,.48);
      font-size: 12.5px;
      letter-spacing: -.015em;
    }
    .rank-self-place { color: rgba(255,255,255,.70); font-weight: 520; }
    .rank-self-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
    .rank-self-value strong { color: rgba(255,255,255,.78); font-weight: 600; }

    /* Elegant location label shown only after an intentional globe tap. */
    .place-pill {
      position: fixed;
      z-index: 92;
      left: 0;
      top: 0;
      min-height: 36px;
      max-width: min(240px, calc(100vw - 36px));
      padding: 0 13px 0 12px;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 999px;
      background: rgba(5,5,5,.78);
      color: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035);
      display: flex;
      align-items: center;
      gap: 9px;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, calc(-100% - 13px)) scale(.96);
      transition: opacity 150ms ease, transform 180ms cubic-bezier(.2,.8,.2,1), border-color 150ms ease;
      -webkit-tap-highlight-color: transparent;
      font: inherit;
      font-size: 13px;
      font-weight: 570;
      letter-spacing: -.018em;
      white-space: nowrap;
    }
    .place-pill::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -12px;
      width: 1px;
      height: 11px;
      background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.08));
    }
    .place-pill::before {
      content: "";
      position: absolute;
      left: calc(50% - 2.5px);
      bottom: -15px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255,255,255,.88);
      box-shadow: 0 0 10px rgba(255,255,255,.28);
    }
    .place-pill.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, calc(-100% - 13px)) scale(1);
    }
    .place-pill.is-link { cursor: pointer; }
    .place-pill.is-link:active { border-color: rgba(255,255,255,.36); }
    .place-pill-arrow { color: rgba(255,255,255,.50); font-size: 15px; line-height: 1; transform: translateY(-.5px); }
    .place-pill:not(.is-link) .place-pill-arrow { display: none; }


    /* ---------- live mood spheres: intentionally dark, no neon ---------- */
    .mood-bubbles {
      position: absolute;
      inset: 0;
      z-index: 7;
      pointer-events: none;
      opacity: 0;
      transition: opacity 320ms ease;
    }

    .earth-wrap.handoff-complete .mood-bubbles {
      opacity: 1;
    }

    .earth-wrap.handoff-complete .mood-bubbles.is-poll-switching {
      opacity: 0;
    }

    .mood-bubble-anchor {
      position: absolute;
      left: 0;
      top: 0;
      width: var(--bubble-size, 34px);
      height: var(--bubble-size, 34px);
      transform: translate(-50%, -50%) scale(var(--projection-scale, 1));
      transform-origin: 50% 50%;
      opacity: 0;
      will-change: transform, opacity;
      pointer-events: none;
    }

    .mood-bubble-shell {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 50%;
      background:
        radial-gradient(circle at 31% 25%, rgba(255,255,255,.105), transparent 28%),
        radial-gradient(circle at 66% 76%, rgba(0,0,0,.30), transparent 49%),
        var(--bubble-color, #25272b);
      border: 1px solid rgba(255,255,255,.105);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset -8px -10px 18px rgba(0,0,0,.28),
        0 7px 18px rgba(0,0,0,.30);
      opacity: var(--bubble-opacity, .75);
      transform: scale(1);
      transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        opacity 180ms ease;
      will-change: transform, filter, background-color;
    }

    .mood-bubble-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: inset 0 0 0 .5px rgba(255,255,255,.05);
    }

    /*
      Two irregular fluid bodies. They stay clipped inside the sphere and only
      become visible during an opposite vote, creating the "Venom" invasion.
    */
    .mood-fluid {
      position: absolute;
      width: 88%;
      height: 88%;
      left: 48%;
      top: 45%;
      border-radius: 42% 58% 63% 37% / 36% 43% 57% 64%;
      background:
        radial-gradient(circle at 28% 32%, rgba(255,255,255,.07), transparent 25%),
        var(--incoming-color, #17392b);
      opacity: 0;
      filter: blur(.65px);
      mix-blend-mode: normal;
      pointer-events: none;
      transform-origin: 50% 50%;
    }

    .mood-fluid.fluid-b {
      width: 70%;
      height: 76%;
      left: -7%;
      top: 12%;
      border-radius: 61% 39% 46% 54% / 38% 63% 37% 62%;
      filter: blur(1px);
    }

    .mood-bubble-shell.fx-reinforce {
      animation: bubbleReinforce 510ms cubic-bezier(.16,.82,.2,1);
    }

    .mood-bubble-shell.fx-opposite .fluid-a {
      animation: venomRetreatA 920ms cubic-bezier(.2,.72,.18,1);
    }

    .mood-bubble-shell.fx-opposite .fluid-b {
      animation: venomRetreatB 980ms cubic-bezier(.2,.72,.18,1);
    }

    .mood-bubble-shell.fx-conquer .fluid-a {
      animation: venomConquerA 920ms cubic-bezier(.16,.76,.18,1);
    }

    .mood-bubble-shell.fx-conquer .fluid-b {
      animation: venomConquerB 980ms cubic-bezier(.16,.76,.18,1);
    }

    @keyframes bubbleReinforce {
      0%   { transform: scale(1); filter: brightness(1); }
      28%  { transform: scale(1.13); filter: brightness(1.10); }
      56%  { transform: scale(.965); filter: brightness(.98); }
      78%  { transform: scale(1.025); filter: brightness(1.025); }
      100% { transform: scale(1); filter: brightness(1); }
    }

    @keyframes venomRetreatA {
      0%   { opacity: 0;   transform: translate(62%, 48%) rotate(8deg) scale(.10); }
      24%  { opacity: .72; transform: translate(20%, 13%) rotate(35deg) scale(.72); }
      52%  { opacity: .88; transform: translate(-12%, -8%) rotate(78deg) scale(1.22); }
      72%  { opacity: .52; transform: translate(-18%, -10%) rotate(104deg) scale(1.34); }
      100% { opacity: 0;   transform: translate(58%, 44%) rotate(142deg) scale(.18); }
    }

    @keyframes venomRetreatB {
      0%   { opacity: 0;   transform: translate(-54%, 36%) rotate(-14deg) scale(.10); }
      32%  { opacity: .54; transform: translate(-15%, 2%) rotate(-48deg) scale(.78); }
      57%  { opacity: .73; transform: translate(18%, -14%) rotate(-82deg) scale(1.18); }
      77%  { opacity: .36; transform: translate(21%, -8%) rotate(-110deg) scale(1.28); }
      100% { opacity: 0;   transform: translate(-48%, 31%) rotate(-145deg) scale(.16); }
    }

    @keyframes venomConquerA {
      0%   { opacity: 0;   transform: translate(64%, 49%) rotate(8deg) scale(.10); }
      26%  { opacity: .76; transform: translate(18%, 11%) rotate(38deg) scale(.82); }
      58%  { opacity: .92; transform: translate(-17%, -10%) rotate(82deg) scale(1.48); }
      82%  { opacity: .96; transform: translate(-22%, -15%) rotate(113deg) scale(2.12); }
      100% { opacity: .18; transform: translate(-24%, -17%) rotate(136deg) scale(2.38); }
    }

    @keyframes venomConquerB {
      0%   { opacity: 0;   transform: translate(-55%, 37%) rotate(-14deg) scale(.10); }
      34%  { opacity: .58; transform: translate(-11%, -2%) rotate(-46deg) scale(.90); }
      65%  { opacity: .83; transform: translate(17%, -18%) rotate(-88deg) scale(1.50); }
      88%  { opacity: .86; transform: translate(19%, -20%) rotate(-118deg) scale(2.08); }
      100% { opacity: .12; transform: translate(20%, -20%) rotate(-136deg) scale(2.24); }
    }

    /* Desktop hover is informational only; mobile taps pass through to the globe. */
    @media (hover: hover) and (pointer: fine) {
      .mood-bubble-anchor {
        pointer-events: auto;
        cursor: pointer;
      }

      .mood-bubble-anchor:hover .mood-bubble-shell {
        transform: scale(1.045);
        border-color: rgba(255,255,255,.19);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.07),
          inset -8px -10px 18px rgba(0,0,0,.26),
          0 10px 24px rgba(0,0,0,.38);
      }
    }

    .mood-tooltip {
      position: fixed;
      z-index: 96;
      left: 0;
      top: 0;
      min-width: 154px;
      max-width: 240px;
      padding: 10px 12px 9px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 13px;
      background: rgba(5,5,5,.87);
      backdrop-filter: blur(9px);
      -webkit-backdrop-filter: blur(9px);
      box-shadow: 0 12px 30px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.025);
      color: rgba(255,255,255,.92);
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, calc(-100% - 14px)) scale(.97);
      transition: opacity 120ms ease, transform 150ms cubic-bezier(.2,.8,.2,1);
      white-space: nowrap;
    }

    .mood-tooltip.is-visible {
      opacity: 1;
      transform: translate(-50%, calc(-100% - 14px)) scale(1);
    }

    .mood-tooltip-name {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 610;
      letter-spacing: -.018em;
    }

    .mood-tooltip-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--tooltip-color, #25272b);
      box-shadow: 0 0 0 1px rgba(255,255,255,.08);
    }

    .mood-tooltip-meta {
      margin-top: 4px;
      color: rgba(255,255,255,.52);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: -.012em;
      font-variant-numeric: tabular-nums;
    }


    /* Place landing pages: same v4 composition, only enough room for a two-line H1
       and a closer initial globe. The buttons and globe styling remain v4. */
    body.place-page .question { margin-top: 102px; }
    body.place-page h1 {
      max-width: 385px;
      margin-inline: auto;
      font-size: clamp(45px, 11.5vw, 51px);
      line-height: .98;
      white-space: normal;
      text-wrap: balance;
    }
    body.place-page .votes { margin-top: 30px; }
    body.place-page .hero { min-height: 1260px; }
    body.place-page .earth-wrap {
      top: 530px;
      width: 700px;
      height: 700px;
    }
    body.city-page .earth-wrap {
      top: 530px;
      width: 720px;
      height: 720px;
    }
    body.city-page .hero { min-height: 1280px; }

    @media (max-width: 380px) {
      body.place-page .question { margin-top: 96px; }
      body.place-page h1 { font-size: 43px; }
      body.place-page .earth-wrap { width: 660px; height: 660px; }
      body.city-page .earth-wrap { width: 680px; height: 680px; }
    }


  
    /* Seamless navigation: black-to-black handoff, no WebGL snapshot. */
    .page-handoff {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      background: #000;
      opacity: 0;
      transition: opacity 120ms cubic-bezier(.2,.75,.2,1);
    }
    .page-handoff.is-active { opacity: 1; }

    body.place-page .topbar,
    body.place-page .question,
    body.place-page .dashboard,
    body.place-page .footer {
      animation: localPageIn 220ms ease-out both;
    }
    @keyframes localPageIn {
      from { opacity: 0; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }


    /* ============================================================
       DESKTOP — same product, same visual language, wider stage
       Mobile rules above remain untouched.
       ============================================================ */
    @media (min-width: 900px) {
      :root {
        --desktop-content: min(1180px, calc(100vw - 96px));
      }

      html, body {
        min-width: 900px;
      }

      body::before,
      body::after {
        display: none !important;
      }

      .app {
        width: 100%;
        max-width: none;
        margin: 0;
        overflow: clip visible;
      }

      .hero {
        min-height: calc(500px + clamp(900px, 70vw, 1240px) + 90px);
        padding-top: 28px;
      }

      .topbar {
        width: min(1280px, calc(100vw - 96px));
        height: 64px;
        margin: 0 auto;
        padding: 0;
      }

      .brand {
        gap: 11px;
        font-size: 24px;
      }

      .brand-globe {
        width: 42px;
        height: 42px;
      }

      .nav-icons {
        gap: 24px;
      }

      .nav-icon {
        width: 30px;
        height: 30px;
      }

      .nav-icon svg {
        width: 27px;
        height: 27px;
      }

      .question {
        width: min(900px, calc(100vw - 96px));
        margin: 104px auto 0;
        padding: 0;
      }

      .home-page h1 {
        font-size: clamp(72px, 5.7vw, 92px);
        line-height: .94;
        letter-spacing: -.064em;
      }

      .votes {
        width: 590px;
        margin: 40px auto 0;
        gap: 18px;
      }

      .vote {
        height: 72px;
        border-radius: 18px;
        font-size: 18px;
      }

      .home-page .earth-wrap {
        top: 500px;
        width: clamp(900px, 70vw, 1240px);
        height: clamp(900px, 70vw, 1240px);
      }

      .dashboard {
        width: var(--desktop-content);
        margin: -110px auto 0;
        padding: 0 0 76px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 92px, #000 100%);
      }

      .stat-primary {
        grid-column: 1 / -1;
        min-height: 198px;
        padding: 24px 26px 23px;
      }

      .stat-kicker {
        font-size: 14px;
      }

      .today-main {
        margin-top: 22px;
      }

      .today-value {
        font-size: 72px;
      }

      .today-label {
        font-size: 18px;
      }

      .today-meta {
        margin-top: 27px;
        padding-top: 15px;
        font-size: 14px;
      }

      .rank-card {
        margin-top: 0;
        min-height: 260px;
        padding: 22px 22px 15px;
      }

      .rank-card h2 {
        margin-bottom: 15px;
        font-size: 18px;
      }

      .rank-row,
      .rank-link {
        min-height: 51px;
        grid-template-columns: 32px 1fr auto;
      }

      .rank-place,
      .rank-value {
        font-size: 16px;
      }

      .rank-self {
        min-height: 46px;
        font-size: 13px;
      }

      .footer {
        min-height: 190px;
      }

      .place-pill {
        max-width: 280px;
        min-height: 38px;
        padding-inline: 14px;
        font-size: 13.5px;
      }

      /* Country/city landings keep the same hierarchy, just use the wider canvas. */
      body.place-page .question {
        width: min(1100px, calc(100vw - 96px));
        margin-top: 98px;
      }

      body.place-page h1 {
        max-width: 1080px;
        font-size: clamp(66px, 5vw, 82px);
        line-height: .96;
        white-space: normal;
      }

      body.country-page .hero {
        min-height: calc(430px + clamp(900px, 66vw, 1180px) + 92px);
      }

      body.country-page .earth-wrap {
        top: 430px;
        width: clamp(900px, 66vw, 1180px);
        height: clamp(900px, 66vw, 1180px);
      }

      body.city-page .hero {
        min-height: calc(420px + clamp(940px, 67vw, 1200px) + 92px);
      }

      body.city-page .earth-wrap {
        top: 420px;
        width: clamp(940px, 67vw, 1200px);
        height: clamp(940px, 67vw, 1200px);
      }

      body.place-page .maplibregl-ctrl-bottom-right {
        right: 126px;
        bottom: 92px;
      }

      body.city-page .maplibregl-ctrl-bottom-right {
        bottom: 74px;
      }

      .scope-marker {
        min-height: 32px;
        padding-inline: 12px;
        font-size: 12.5px;
      }
    }

    @media (min-width: 1500px) {
      .topbar {
        width: min(1360px, calc(100vw - 128px));
      }

      .question {
        margin-top: 112px;
      }

      .home-page .earth-wrap {
        top: 520px;
      }

      .hero {
        min-height: calc(520px + clamp(900px, 70vw, 1240px) + 90px);
      }
    }

/* ===== final frontend freeze overrides ===== */
.nav-icons { display: none !important; }
.question,
.home-page .question {
  margin-top: 72px !important;
}
.home-page .earth-wrap { top: 442px !important; }

.rank-link,
.rank-row {
  grid-template-columns: 28px minmax(0, 1fr) auto 18px !important;
}
.rank-link-button {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rank-chevron {
  color: rgba(255,255,255,.34);
  font-size: 21px;
  line-height: 1;
  transform: translateX(-1px);
  transition: color 140ms ease, transform 140ms ease;
}
.rank-link:hover .rank-chevron,
.rank-link:focus-visible .rank-chevron {
  color: rgba(255,255,255,.80);
  transform: translateX(2px);
}
.rank-link:focus-visible {
  outline: 1px solid rgba(255,255,255,.34);
  outline-offset: -1px;
}

.map-zoom-controls {
  display: none;
  position: absolute;
  z-index: 32;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(7,7,7,.52);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 10px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
}
.map-zoom-controls button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.74);
  font: 400 23px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.map-zoom-controls button + button { border-top: 1px solid rgba(255,255,255,.10); }
.map-zoom-controls button:hover { background: rgba(255,255,255,.055); color: #fff; }
.map-zoom-controls button:focus-visible { outline: 1px solid rgba(255,255,255,.42); outline-offset: -2px; }

.ad-slot {
  display: none;
  width: min(100%, 760px);
  margin: 22px auto;
  opacity: 0;
  transition: opacity 220ms ease;
}
.ad-slot.is-active { display: block; opacity: 1; }
.ad-label {
  margin: 0 0 6px;
  color: rgba(255,255,255,.30);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.ad-frame {
  min-height: 82px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 12px;
  color: rgba(255,255,255,.25);
  font-size: 12px;
}
.post-vote-ad { position: absolute; z-index: 19; left: 18px; right: 18px; top: 408px; margin: 0 auto; }
.post-globe-ad { margin-top: 10px; margin-bottom: 18px; }

.footer {
  min-height: 0 !important;
  display: block !important;
  padding: 0 18px max(30px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,.085);
  background: #000;
}
.footer-inner { width: min(100%, 980px); margin: 0 auto; padding-top: 30px; }
.footer-brand-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.footer-brand { color: rgba(255,255,255,.88); font-size:16px; font-weight:680; letter-spacing:-.03em; }
.footer-tagline { margin:7px 0 0; max-width:420px; color:rgba(255,255,255,.44); font-size:12.5px; line-height:1.45; }
.footer-links { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:25px; }
.footer-links a { color:rgba(255,255,255,.58); font-size:12.5px; text-decoration:none; transition:color 120ms ease; }
.footer-links a:hover { color:rgba(255,255,255,.92); }
.footer-disclaimer,.footer-credits { margin:18px 0 0; max-width:720px; color:rgba(255,255,255,.31); font-size:11px; line-height:1.55; }
.footer-credits { margin-top:8px; }
.footer-bottom { margin-top:22px; padding-top:14px; border-top:1px solid rgba(255,255,255,.065); color:rgba(255,255,255,.25); font-size:11px; }
.locale-picker-wrap { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.32); font-size:11px; }
.locale-picker { appearance:none; -webkit-appearance:none; min-height:32px; padding:0 28px 0 10px; border-radius:10px; border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.72); background:rgba(255,255,255,.035) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23999'/%3E%3C/svg%3E") no-repeat calc(100% - 10px) 50%; }

.poll-pager { display:none; }
.poll-pager.is-visible { display:flex; justify-content:center; margin-top:18px; }
.poll-next { border:0; background:transparent; color:rgba(255,255,255,.48); font-size:25px; cursor:pointer; padding:8px 16px; transition:transform 140ms ease,color 140ms ease; }
.poll-next:hover { color:#fff; transform:translateX(3px); }
.poll-transition { transition: opacity 180ms ease, transform 180ms ease; }
.poll-transition.is-switching { opacity:0; transform:translateY(5px); }

@media (min-width: 900px) {
  .question,
  .home-page .question { margin-top: 60px !important; }
  .home-page .earth-wrap { top: 468px !important; }
  .map-zoom-controls { display: flex; flex-direction: column; }
  .post-vote-ad { width: 620px; left:50%; right:auto; transform:translateX(-50%); top:406px; }
  .footer { padding-inline: 48px !important; }
  .footer-inner { padding-top: 38px; }
}

@media (min-width: 1500px) {
  .question,
  .home-page .question { margin-top: 60px !important; }
  .home-page .earth-wrap { top: 482px !important; }
}