*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{font-size:18px}
    html,body{background:#080c14;min-height:100vh;overflow:hidden}
    #root{min-height:100vh}
    @media(max-width:768px){
      html{font-size:16px}
      .place-pin{width:40px!important;height:40px!important;font-size:17px!important}
      .place-label{font-size:.55rem!important;padding:2px 6px!important}
      .bike-marker{font-size:1.4rem!important}
    }
    ::-webkit-scrollbar{width:4px}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

    /* Hide Mapbox default UI chrome */
    .mapboxgl-ctrl-bottom-left,
    .mapboxgl-ctrl-bottom-right,
    .mapboxgl-ctrl-top-left,
    .mapboxgl-ctrl-top-right { display:none !important }
    .mapboxgl-map { font:inherit }

    /* Global animations (used by both React + DOM map markers) */
    @keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
    @keyframes slideIn  { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
    @keyframes slideUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
    @keyframes popIn    { 0%{opacity:0;transform:scale(.65)} 70%{transform:scale(1.1)} 100%{opacity:1;transform:scale(1)} }
    @keyframes pulse    { 0%,100%{box-shadow:0 0 28px rgba(245,158,11,.45)} 50%{box-shadow:0 0 52px rgba(245,158,11,.8)} }
    @keyframes pinBob        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
    @keyframes pinPulseRing  { 0%{transform:translate(-50%,-50%) scale(1);opacity:.7} 100%{transform:translate(-50%,-50%) scale(2.2);opacity:0} }
    @keyframes roadDash { from{transform:translateX(0)} to{transform:translateX(-90px)} }
    @keyframes exhaustPuff { 0%{opacity:.55;transform:scale(.4) translateX(0)} 100%{opacity:0;transform:scale(1.8) translateX(-18px)} }
    @keyframes bikeShake{ 0%,100%{transform:translateX(-50%) translateY(-44px) rotate(0deg)} 25%{transform:translateX(-50%) translateY(-46px) rotate(-1.5deg)} 75%{transform:translateX(-50%) translateY(-42px) rotate(1deg)} }
    @keyframes mapReveal{ from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:scale(1)} }

    /* Map marker styles (DOM elements created by MapLibre, outside React) */
    .place-pin-wrapper {
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:5px;
      transition:transform .2s;
    }
    .place-pin-wrapper:hover { transform:scale(1.18) translateY(-5px); }
    .place-pin {
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      width:52px;
      height:52px;
      font-size:1.45rem;
      backdrop-filter:blur(8px);
      border:2.5px solid transparent;
      transition:box-shadow .2s;
    }
    .place-label {
      font-size:.7rem;
      font-weight:700;
      padding:2px 8px;
      border-radius:999px;
      letter-spacing:.06em;
      backdrop-filter:blur(6px);
      white-space:nowrap;
      background:rgba(8,12,20,.82);
      border:1px solid rgba(255,255,255,.09);
    }
    .bike-marker {
      font-size:2rem;
      filter:drop-shadow(0 2px 14px rgba(245,158,11,.9));
      user-select:none;
      cursor:default;
      animation:pinBob 2.8s ease-in-out infinite;
    }
    .panel-scroll::-webkit-scrollbar{width:3px}
    .panel-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
    .mission-read-scroll::-webkit-scrollbar{width:8px}
    .mission-read-scroll::-webkit-scrollbar-track{background:rgba(148,163,184,.22);border-radius:999px}
    .mission-read-scroll::-webkit-scrollbar-thumb{background:rgba(107,114,128,.9);border-radius:999px}
    .mission-read-scroll::-webkit-scrollbar-thumb:hover{background:rgba(71,85,105,.95)}