:root {
        --panel-bg: rgba(255, 255, 255, 0.94);
        --panel-border: #d5e3ee;
        --panel-shadow: 0 14px 36px rgba(10, 30, 60, 0.2);
        --text: #123047;
        --muted: #5f7890;
        --accent: #0080d8;
        --accent-soft: #d9efff;
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        height: 100%;
      }

      body {
        font-family: "Avenir Next", "Avenir", "Segoe UI", sans-serif;
        color: var(--text);
        background: radial-gradient(circle at 8% 16%, #d8ecff 0%, #edf5fd 55%, #f6faff 100%);
      }

      body.pirate-mode {
        --panel-bg: rgba(32, 23, 13, 0.9);
        --panel-border: #8b6b3f;
        --panel-shadow: 0 14px 36px rgba(6, 4, 2, 0.42);
        --text: #f1dfbe;
        --muted: #d0b78d;
        --accent: #c79031;
        --accent-soft: #4a3720;
        font-family: "Georgia", "Times New Roman", serif;
        background: radial-gradient(circle at 18% 10%, #4d2d14 0%, #26160b 55%, #140d07 100%);
      }

      #app {
        position: relative;
        min-height: 100dvh;
      }

      #map {
        position: absolute;
        inset: 0;
      }

      .panel {
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: calc(0.75rem + var(--safe-bottom));
        z-index: 2;
        border: 1px solid var(--panel-border);
        border-radius: 18px;
        background: var(--panel-bg);
        box-shadow: var(--panel-shadow);
        backdrop-filter: blur(8px);
        overflow: hidden;
      }

      .panel.panel--collapsed .panel-body {
        display: none;
      }

      .panel.panel--collapsed .panel-subtitle {
        display: none;
      }


      .panel-header {
        padding: 0.85rem 0.95rem 0.55rem;
        border-bottom: 1px solid var(--panel-border);
      }

      .panel.panel--collapsed .panel-header {
        border-bottom: 0;
        padding: 0.8rem 0.95rem;
      }

      .panel-header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .panel-title {
        margin: 0;
        font-size: 1rem;
      }

      .panel-subtitle {
        margin: 0.32rem 0 0;
        color: var(--muted);
        font-size: 0.82rem;
      }

      .panel-toggle {
        border: 1px solid #bfd3e4;
        background: #fff;
        color: #1f567e;
        width: 34px;
        height: 30px;
        border-radius: 8px;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
      }

      .panel-toggle:active {
        transform: translateY(1px);
      }

      body.pirate-mode .panel-toggle {
        border-color: #7b5a35;
        background: #2a1d11;
        color: #f2d39a;
      }

      .panel-body {
        padding: 0.35rem 0;
      }

      .layer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem;
        padding: 0.6rem 0.95rem;
      }

      .layer-row + .layer-row {
        border-top: 1px solid #e7eef6;
      }

      body.pirate-mode .layer-row + .layer-row {
        border-top-color: #4d3a24;
      }

      .layer-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .layer-label {
        font-size: 0.92rem;
        line-height: 1.2;
      }

      .legend-box {
        width: 48px;
        height: 28px;
        border-radius: 7px;
        border: 2px solid #af1d1d;
        background: rgba(220, 35, 35, 0.28);
        flex-shrink: 0;
      }

      body.pirate-mode .legend-box {
        border-color: #d05353;
        background: rgba(154, 30, 30, 0.5);
      }

      .switch {
        position: relative;
        width: 48px;
        height: 28px;
        flex-shrink: 0;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: #cad6e1;
        transition: background-color 160ms ease;
        cursor: pointer;
      }

      .slider::before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 7px rgba(8, 29, 48, 0.25);
        transition: transform 160ms ease;
      }

      body.pirate-mode .slider {
        background: #6e5a42;
      }

      body.pirate-mode .slider::before {
        background: #f8e8ca;
      }

      .switch input:checked + .slider {
        background: var(--accent);
      }

      .switch input:checked + .slider::before {
        transform: translateX(20px);
      }

      .switch input:disabled + .slider {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .switch input:focus-visible + .slider {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .message {
        margin: 0;
        padding: 0.72rem 0.95rem;
        color: var(--muted);
        font-size: 0.8rem;
      }

      .message.error {
        color: #9d2a2a;
        background: #ffeaea;
      }

      body.pirate-mode .message.error {
        color: #ffc7b1;
        background: rgba(110, 25, 18, 0.48);
      }

      .chip {
        display: inline-block;
        margin: 0.55rem 0.95rem 0.65rem;
        padding: 0.28rem 0.6rem;
        font-size: 0.76rem;
        border-radius: 999px;
        background: var(--accent-soft);
        color: #005ba0;
      }

      .basemap-toggle-btn {
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
      }

      .basemap-toggle-btn.state-map {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");
      }

      body.pirate-mode .mapboxgl-ctrl-group button {
        background-color: rgba(42, 29, 17, 0.94);
        color: #f2d39a;
      }

      body.pirate-mode .mapboxgl-ctrl-group button:hover {
        background-color: rgba(60, 40, 24, 0.96);
      }

      body.pirate-mode .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' fill='none' stroke='%23f2d39a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M14.5 7v15M7 14.5h15'/%3E%3C/svg%3E");
      }

      body.pirate-mode .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29' fill='none' stroke='%23f2d39a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 14.5h15'/%3E%3C/svg%3E");
      }

      body.pirate-mode .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 3.5l6 11h-12z' fill='%23f2d39a'/%3E%3Cpath d='M14.5 25.5l-6-11h12z' fill='%23a16f2a'/%3E%3C/svg%3E");
      }

      body.pirate-mode .basemap-toggle-btn.state-map {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d39a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E");
      }

      body.pirate-mode .location-modal-card {
        border-color: #7f6038;
        background: rgba(33, 24, 14, 0.98);
      }

      body.pirate-mode .location-modal-close {
        border-color: #7f6038;
        background: #2f2012;
        color: #f3d4a2;
      }

      .language-control {
        position: relative;
      }

      .language-main-btn {
        font-size: 1rem;
      }

      .language-options {
        display: none;
      }

      .language-options.open {
        display: block;
      }

      .language-option-btn {
        font-size: 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
      }

      .location-modal {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: rgba(6, 18, 30, 0.42);
      }

      .location-modal.open {
        display: flex;
      }

      .location-modal-card {
        width: min(360px, calc(100vw - 2rem));
        border: 1px solid #d7e1eb;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 12px 34px rgba(10, 28, 46, 0.25);
        padding: 1rem;
      }

      .location-modal-text {
        margin: 0;
        color: var(--text);
        font-size: 0.94rem;
        line-height: 1.35;
      }

.location-modal-close {
  margin-top: 0.85rem;
  min-width: 110px;
  border: 1px solid #bcd2e5;
        border-radius: 10px;
        background: #fff;
        color: #164568;
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.52rem 0.8rem;
  cursor: pointer;
}

/* POI popup card */
.mapboxgl-popup-content {
  overflow: hidden;
  padding-right: 40px;
  border-radius: 14px;
}

.mapboxgl-popup-close-button {
  width: 34px;
  height: 34px;
  font-size: 24px;
  line-height: 30px;
  color: #8c98a6;
  padding: 0;
  right: 2px;
  top: 2px;
}

.mapboxgl-popup-close-button:hover {
  color: #788594;
  background: transparent;
}

body.pirate-mode .mapboxgl-popup-content {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 245, 214, 0.95) 0%, rgba(241, 219, 171, 0.95) 42%, rgba(219, 189, 136, 0.96) 100%);
  border: 1px solid #8d6b3f;
  box-shadow: 0 10px 26px rgba(14, 9, 4, 0.45);
}

body.pirate-mode .mapboxgl-popup-close-button {
  color: #6f5331;
}

body.pirate-mode .mapboxgl-popup-close-button:hover {
  color: #50391f;
}

body.pirate-mode .poi-callout-title {
  color: #4b2f12;
}

body.pirate-mode .poi-callout-text {
  color: #5e4224;
}

body.pirate-mode .poi-callout-image {
  border-color: #8c6a3d;
}

body.pirate-mode .poi-callout-btn {
  border-color: #8c6a3d;
  background: rgba(255, 243, 212, 0.88);
  color: #4f3417;
}

.poi-callout {
  width: 100%;
  max-width: 220px;
  overflow: hidden;
}

.poi-callout-title {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.25;
  color: #153a56;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.poi-callout-text {
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: #49657d;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.poi-callout-image {
  margin-top: 0.55rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #d7e3ee;
  object-fit: cover;
}

.poi-callout-audio {
  margin-top: 0.65rem;
  display: flex;
  gap: 0.45rem;
}

.poi-callout-btn {
  border: 1px solid #c1d5e7;
  background: #fff;
  color: #17486d;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.36rem 0.58rem;
  cursor: pointer;
}

.poi-callout-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

      @media (min-width: 820px) {
        .panel {
          top: calc(0.85rem + var(--safe-top));
          left: 0.85rem;
          right: auto;
          bottom: auto;
          width: min(380px, calc(100vw - 1.7rem));
        }

      }