/* Match native controls to the rest of the dark UI. */
    html { color-scheme: dark; }

    /* Base site theme. */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #0e0e0e;
      color: #d9c7a3;
      overflow: hidden;
    }


    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid #c8a75d;
      outline-offset: 2px;
    }

    nav,
    main {
      overscroll-behavior: contain;
    }

    /* Shared scrollbar styling for the page and tool panels. */
    * {
      scrollbar-width: thin;
      scrollbar-color: #685629 #111111;
    }
    *::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    *::-webkit-scrollbar-track {
      background: #111111;
      border-radius: 10px;
    }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #73602f, #4a3d20);
      border: 2px solid #111111;
      border-radius: 10px;
      min-height: 30px;
    }
    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #967a39, #685327);
    }
    *::-webkit-scrollbar-corner {
      background: #111111;
    }
    #icarus-checklists, #icChecklistList, #icarus-checklists textarea, #valheim-checklists, #vhChecklistList, #valheim-checklists textarea {
      color-scheme: dark;
      scrollbar-width: thin;
      scrollbar-color: #685629 #111111;
    }
    #icarus-checklists::-webkit-scrollbar, #icChecklistList::-webkit-scrollbar, #icarus-checklists textarea::-webkit-scrollbar,
    #valheim-checklists::-webkit-scrollbar, #vhChecklistList::-webkit-scrollbar, #valheim-checklists textarea::-webkit-scrollbar { width:10px; height:10px; }
    #icarus-checklists::-webkit-scrollbar-track, #icChecklistList::-webkit-scrollbar-track, #icarus-checklists textarea::-webkit-scrollbar-track,
    #valheim-checklists::-webkit-scrollbar-track, #vhChecklistList::-webkit-scrollbar-track, #valheim-checklists textarea::-webkit-scrollbar-track { background:#111111; border-radius:10px; }
    #icarus-checklists::-webkit-scrollbar-thumb, #icChecklistList::-webkit-scrollbar-thumb, #icarus-checklists textarea::-webkit-scrollbar-thumb,
    #valheim-checklists::-webkit-scrollbar-thumb, #vhChecklistList::-webkit-scrollbar-thumb, #valheim-checklists textarea::-webkit-scrollbar-thumb { background:#685629; border:2px solid #111111; border-radius:10px; min-height:30px; }
    .scanlines {
      position: fixed;
      pointer-events: none;
      top: 0; left: 0; right: 0; bottom: 0;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.04) 1px,
        transparent 2px,
        transparent 3px
      );
      opacity: 0.15;
      z-index: 2;
    }
    header {
      background: linear-gradient(to right, #1b1a17, #2b2a26);
      padding: 10px 16px;
      font-size: 20px;
      font-weight: bold;
      color: #f0d49c;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #3a352a;
    }
    .brand-sub {
      font-size: 12px;
      color: #a58c64;
      flex:1;
      text-align:right;
    }
    .header-install-btn {
      display:none;
      align-items:center;
      justify-content:center;
      border:1px solid #6a531f;
      border-radius:8px;
      background:#171208;
      color:#f0d49c;
      padding:7px 10px;
      cursor:pointer;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;
      margin-left:10px;
    }
    .header-install-btn:hover { background:#211a0b; border-color:#806629; }
    nav {
      width: 230px;
      background: #151515;
      height: calc(100vh - 48px);
      padding-top: 10px;
      border-right: 1px solid #2c2c2c;
      overflow-y: auto;
      display:flex;
      flex-direction:column;
      box-sizing:border-box;
    }
    .prospect-switcher {
      margin: 0 10px 10px;
      padding: 10px;
      border:1px solid #302b22;
      border-radius:10px;
      background:linear-gradient(145deg,#17140f,#101010);
    }
    .prospect-switcher label { display:block; color:#8f8063; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin-bottom:6px; }
    .prospect-switcher select { width:100%; box-sizing:border-box; }
    .prospect-switcher small { display:block; color:#776e5d; line-height:1.35; margin-top:6px; font-size:10px; }
    .prospect-switcher .sidebar-action { width:100%; box-sizing:border-box; margin-top:2px; padding:9px 10px; border:1px solid #5c4923; border-radius:7px; background:#171208; color:#f0d49c; font-weight:700; text-align:center; cursor:pointer; }
    .prospect-switcher .sidebar-action:hover { background:#211a0b; border-color:#806629; }
    .nav-spacer { flex:1; min-height:12px; }
    .nav-credit { padding:9px 10px 12px; font-size:10px; text-align:center; color:#8d826c; border-top:1px solid #28251f; background:#121212; }
    .nav-save-note { color:#706858; }
    nav button {
      width: 100%;
      padding: 10px 14px;
      background: none;
      border: none;
      text-align: left;
      color: #c9b89a;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid #1f1f1f;
      transition: background 0.2s;
    }
    nav button:hover, nav button.active {
      background: #27241f;
      color: #f0d49c;
    }

    /* Keep the game switcher independent of game-data loading. */
    .game-switcher {
      margin: 0 10px 10px;
      padding: 10px;
      border: 1px solid #403625;
      border-radius: 11px;
      background: linear-gradient(145deg,#18140e,#101010);
    }
    .game-switcher-label {
      color:#8f8063;
      font-size:10px;
      font-weight:800;
      letter-spacing:.09em;
      text-transform:uppercase;
      margin-bottom:7px;
    }
    .game-switcher-row {
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:6px;
    }
    nav .game-switcher-row button {
      width:100%;
      min-width:0;
      border:1px solid #383127;
      border-radius:8px;
      background:#121212;
      color:#a99a80;
      padding:8px 7px;
      font-size:12px;
      font-weight:800;
      text-align:center;
      cursor:pointer;
    }
    nav .game-switcher-row button.active {
      border-color:#8a6a28;
      background:#211a0f;
      color:#ffd166;
      box-shadow:inset 0 0 0 1px rgba(255,209,102,.08);
    }
    main {
      flex: 1;
      overflow: auto;
      position: relative;
      padding: 16px;
    }
    .layout {
      display: flex;
      height: calc(100vh - 48px);
    }

    @media (min-width: 821px) {
      /* Give the page scrollbar a little room from the window edge. */
      main { margin-right: 6px; }
    }
    .section {
      display: none;
      height: 100%;
    }
    .section.active {
      display: block;
    }

    /* Keep the splash cheap to render; the app should become usable quickly. */
    #splash {
      position: fixed;
      inset: 0;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #f0d49c;
      font-size: 22px;
      z-index: 999;
      opacity: 1;
      transition: opacity 1s ease-in-out;
    }
    #splash.fade-out {
      opacity: 0;
      pointer-events: none;
    }
    #splash small {
      margin-top: 8px;
      font-size: 12px;
      color: #bda887;
    }
    .splash-app-name {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: .04em;
      text-align: center;
    }
    .splash-purpose {
      max-width: 720px;
      padding: 0 22px;
      text-align: center;
      line-height: 1.5;
    }
    .splash-legal {
      margin-top: 12px;
      font-size: 11px;
      color: #8f8063;
    }
    .splash-legal a { color:#cdb98f; text-decoration:none; border-bottom:1px solid #4a4030; }


    #mapContainer {
      width: 100%;
      height: 80vh;
      background: #000;
      position: relative;
      overflow: hidden;
    }
    .map-biome-highlight-banner {
      position: absolute;
      top: 12px;
      left: 50%;
      z-index: 7;
      max-width: min(760px, calc(100% - 28px));
      transform: translateX(-50%);
      padding: 8px 12px;
      border: 1px solid rgba(255, 209, 102, 0.72);
      border-radius: 9px;
      background: rgba(10, 9, 6, 0.90);
      color: #f3dca9;
      font-size: 12px;
      line-height: 1.4;
      text-align: center;
      pointer-events: none;
      box-shadow: 0 5px 18px rgba(0, 0, 0, 0.32);
    }
    .storm-layout {
      display: flex;
      gap: 12px;
    }
    .help-card-lead { margin-top: 0; }
    .help-action {
      cursor: pointer;
      padding: 7px 10px;
    }
    .help-status {
      margin-top: 9px;
      color: #9e927b;
      font-size: 12px;
    }

    /* Shared section containers and headings. */
    .panel-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 12px;
      color: #f0d49c;
    }

    /* Normalize selects so browser defaults do not break the theme. */
    .codex-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #121212;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='%23b9aa8f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 9px center;
      background-size: 12px 8px;
      color: #e9e4d6;
      border: 1px solid #343434;
      border-radius: 11px;
      padding: 7px 30px 7px 10px;
      cursor: pointer;
      outline: none;
      transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }
    .codex-select:hover {
      background-color: #242424;
      border-color: #4b4841;
    }
    .codex-select:focus, .codex-select:focus-visible {
      background-color: #202020;
      border-color: #6a531f;
      box-shadow: 0 0 0 1px rgba(217, 199, 163, 0.12);
    }
    .codex-select option,
    .codex-select optgroup {
      background: #171717;
      color: #e9e4d6;
    }

    .storm-tier-sidebar {
      float: left;
      width: 340px;
      padding-right: 12px;
      border-right: 1px solid #2d2d2d;
      margin-right: 12px;
    }
    .storm-tier-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 4px;
      border-bottom: 1px solid #222;
    }
    .storm-tier-item img {
      width: 24px;
      height: 24px;
    }
    .storm-matrix-grid {
      overflow-x: auto;
    }

    /* Icarus help layout. */
    .help-intro {
      max-width: 980px;
      margin-bottom: 14px;
      color: #c9b89a;
      line-height: 1.5;
    }
    .help-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 12px;
      max-width: 1120px;
      padding-bottom: 36px;
      align-items: start;
    }
    .help-card {
      background: #111;
      border: 1px solid #2a2f34;
      border-radius: 12px;
      overflow: hidden;
      align-self: start;
    }
    .help-card h3 {
      margin: 0;
      padding: 11px 13px;
      color: #ffc862;
      font-size: 15px;
      border-bottom: 1px solid #242424;
      background: #151515;
    }
    .help-card-body {
      padding: 12px 14px 14px;
      color: #e9e4d6;
      font-size: 14px;
      line-height: 1.55;
    }
    .help-card-body ol, .help-card-body ul {
      margin: 6px 0 0 20px;
      padding: 0;
    }
    .help-card-body li {
      margin: 7px 0;
    }
    .help-key {
      display: inline-block;
      padding: 2px 7px;
      margin: 0 2px;
      border: 1px solid #44423c;
      border-radius: 6px;
      background: #1c1c1c;
      color: #f0d49c;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }
    .help-tools { grid-column: 1 / -1; }
    .help-tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; margin-top:8px; }
    .help-tool-item { background:#101010; border:1px solid #292929; border-radius:9px; padding:10px; }
    .help-tool-item b { color:#f0d49c; display:block; margin-bottom:4px; }
    .help-note {
      margin-top: 10px;
      padding: 9px 10px;
      border-left: 3px solid #6a531f;
      border-radius: 6px;
      background: #17140e;
      color: #d9c7a3;
    }

    /* Guide and wiki cards share the same layout. */
    .guides-shell { max-width: 1180px; }
    .guides-hero {
      border: 1px solid #34312b;
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 12px;
      background: linear-gradient(180deg, rgba(255,200,98,.055), rgba(255,255,255,.012));
    }
    .guides-hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    .guides-kicker { color:#ffc862; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .guides-hero h2 { color:#f3e3bd; margin:4px 0 5px; font-size:20px; }
    .guides-hero p { margin:0; color:#aaa59a; max-width:760px; line-height:1.5; }
    .guides-count { color:#8f8a80; font-size:12px; white-space:nowrap; padding-top:3px; }
    .guides-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; }
    .guide-search {
      min-width:240px; flex:1; max-width:430px; background:#0b0d0f; color:#e8dfcc;
      border:1px solid #30343a; border-radius:10px; padding:9px 11px; outline:none;
    }
    .guide-search:focus { border-color:#77613a; box-shadow:0 0 0 2px rgba(255,200,98,.07); }
    .guide-filter, .guide-tool-btn {
      border:1px solid #30343a; background:#111417; color:#bdb7aa; border-radius:999px;
      padding:7px 10px; cursor:pointer; font-size:12px; transition:.15s ease;
    }
    .guide-filter:hover, .guide-tool-btn:hover { background:#1b1f23; color:#fff1cc; border-color:#484d53; }
    .guide-filter.active { color:#17130c; background:#ffc862; border-color:#ffc862; font-weight:800; }
    .guide-tool-btn { border-radius:9px; }
    .guides-list { display:grid; gap:10px; }
    .guide-card {
      border:1px solid #2b3035; border-radius:12px; overflow:hidden; background:#0f1113;
      transition:border-color .15s ease, background .15s ease;
    }
    .guide-card:hover { border-color:#3b4147; }
    .guide-card.open { border-color:#554a35; background:#101214; }
    .guide-head {
      display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
      padding:13px 14px; cursor:pointer; user-select:none;
    }
    .guide-head:hover { background:#171a1d; }
    .guide-title-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .guide-title { color:#ffc862; font-weight:800; font-size:14px; }
    .guide-badge {
      display:inline-flex; align-items:center; border:1px solid #3a3f44; border-radius:999px;
      padding:2px 7px; color:#b8b2a6; background:#121518; font-size:10px; font-weight:800;
      letter-spacing:.05em; text-transform:uppercase;
    }
    .guide-summary { color:#8f8b82; margin-top:4px; font-size:12px; line-height:1.4; }
    .guide-chevron {
      width:28px; height:28px; display:grid; place-items:center; border:1px solid #30343a;
      border-radius:8px; color:#d5c7a8; background:#0b0d0f; font-size:14px; transition:.15s ease;
    }
    .guide-card.open .guide-chevron { transform:rotate(180deg); color:#ffc862; border-color:#594b31; }
    .guide-body { display:none; border-top:1px solid #252a2f; padding:14px; color:#c4beb2; }
    .guide-card.open .guide-body { display:block; max-height:min(68vh,700px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
    .guide-sections { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
    .guide-section {
      border:1px solid #282d32; border-radius:10px; padding:11px 12px; background:#0c0f11;
    }
    .guide-section h3 { margin:0 0 7px; color:#efd39a; font-size:13px; }
    .guide-section p { margin:5px 0; color:#b8b2a7; line-height:1.5; }
    .guide-section ul, .guide-section ol { margin:5px 0 0 18px; padding:0; }
    .guide-section li { margin:5px 0; line-height:1.45; }
    .guide-callout {
      margin-top:10px; border-left:3px solid #ffc862; background:rgba(255,200,98,.055);
      border-radius:0 9px 9px 0; padding:9px 11px; color:#d8d0c1; line-height:1.45;
    }
    .guide-warning { border-left-color:#d97b5a; background:rgba(217,123,90,.06); }
    .guide-sourcebar {
      display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
      margin-top:12px; padding-top:10px; border-top:1px solid #252a2f; color:#817d75; font-size:11px;
    }
    .guide-sourcebar a { color:#d9c7a3; text-decoration:none; border-bottom:1px solid transparent; }
    .guide-sourcebar a:hover { color:#ffc862; border-bottom-color:#ffc862; }
    .guide-empty { display:none; padding:18px; color:#8f8a80; border:1px dashed #34383c; border-radius:10px; text-align:center; }
    @media (max-width:720px) {
      .guide-search { min-width:100%; max-width:none; }
      .guide-sections { grid-template-columns:1fr; }
    }

    /* Footer/site identity and account links. */
    .app-purpose {
      max-width: 980px;
      margin: -3px 0 12px;
      color: #b9aa8f;
      font-size: 12px;
      line-height: 1.45;
    }
    .nav-credit a {
      color: #cdb98f;
      text-decoration: none;
      border-bottom: 1px solid #4a4030;
    }
    .nav-credit a:hover { color: #ffc862; }

    /* Compact navigation for phones and narrow tablets. */
    .mobile-menu-btn {
      display: none;
      width: 36px;
      height: 36px;
      padding: 0;
      place-items: center;
      border: 1px solid #4b4232;
      border-radius: 9px;
      background: #15130f;
      color: #f0d49c;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      flex: 0 0 auto;
    }
    .mobile-nav-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.58);
      z-index: 190;
      backdrop-filter: blur(2px);
    }
    .mobile-only { display:none; }

    /* Desktop map toolbar stays one compact control row. */
    @media (min-width: 821px) {
      .map-toolbar {
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:flex-end !important;
        gap:8px !important;
        margin:6px 0 10px !important;
      }
      .map-toolbar > .map-marker-select-wrap,
      .map-toolbar > .map-marker-input-wrap {
        width:auto !important;
        height:auto !important;
        min-height:0 !important;
        align-self:flex-end !important;
        transform:none !important;
        gap:3px !important;
      }
      .map-toolbar > .map-marker-select-wrap > div,
      .map-toolbar > .map-marker-input-wrap > div {
        margin:0 0 2px 4px !important;
        line-height:1 !important;
      }
      .map-toolbar .map-marker-label-input {
        width:180px !important;
        min-width:160px !important;
        max-width:180px !important;
        height:34px !important;
        min-height:34px !important;
        max-height:34px !important;
        padding:6px 8px !important;
        box-sizing:border-box !important;
        flex:0 0 auto !important;
      }
      .map-toolbar .codex-select {
        min-height:34px !important;
        height:34px !important;
        box-sizing:border-box !important;
      }
      .map-toolbar > button {
        min-height:34px !important;
        height:34px !important;
        padding:6px 10px !important;
        align-self:flex-end !important;
      }
    }

    @media (max-width: 820px) {
      body { overflow: hidden; }
      header {
        min-height: 46px;
        padding: 6px 9px calc(6px + env(safe-area-inset-top));
        gap: 8px;
        justify-content: flex-start;
        box-sizing: border-box;
      }
      .mobile-menu-btn { display:grid; width:34px; height:34px; font-size:18px; border-radius:8px; }
      .header-title {
        font-size: 15px;
        line-height: 1.1;
        letter-spacing: .035em;
        margin-right: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .header-install-btn {
        min-height:32px;
        padding:5px 8px;
        margin-left:2px;
        font-size:11px !important;
        border-radius:7px;
      }
      .brand-sub { display:none; }
      .mobile-only { display:list-item; }
      .desktop-only { display:none !important; }

      .layout {
        height: calc(100dvh - 46px - env(safe-area-inset-top));
        min-height: 0;
      }
      nav {
        position: fixed;
        z-index: 220;
        top: calc(46px + env(safe-area-inset-top));
        bottom: 0;
        left: 0;
        height: auto;
        width: min(86vw, 320px);
        padding-top: 10px;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 14px 0 30px rgba(0,0,0,.45);
        transform: translateX(-105%);
        transition: transform .2s ease;
      }
      nav.mobile-open { transform: translateX(0); }
      .mobile-nav-backdrop.open { display:block; }
      nav button { padding: 13px 14px; font-size: 15px; }
      .prospect-switcher { margin-bottom: 7px; }
      .prospect-switcher small { font-size: 11px; }

      main {
        width: 100%;
        min-width: 0;
        padding: 8px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
      }
      .section { height: auto; min-height: 100%; }
      .panel-title { font-size:16px; margin-bottom:7px; }
      /* Hide the long welcome copy on phones so the active tool stays above the fold. */
      .app-purpose { display:none; }
      #map.section.active { display:flex; flex-direction:column; }
      #map .panel-title { order:1; margin:1px 0 7px; }
      #map .map-toolbar { order:2; }
      #map #mapContainer { order:3; }
      .map-toolbar {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        column-gap:6px !important;
        row-gap:6px !important;
        align-items:end !important;
        margin:0 0 8px !important;
      }
      .map-toolbar > * { min-width:0 !important; max-width:100%; box-sizing:border-box; }
      .map-toolbar > .map-marker-select-wrap,
      .map-toolbar > .map-marker-input-wrap {
        width:100%;
        transform:none !important;
        gap:4px !important;
        align-self:end;
      }
      .map-toolbar > .map-marker-select-wrap > div,
      .map-toolbar > .map-marker-input-wrap > div {
        margin:0 0 0 3px !important;
        font-size:11px !important;
        line-height:1.05;
      }
      .map-toolbar .codex-select,
      .map-toolbar .variant-mobile-select-trigger { width:100% !important; min-height:40px; }
      .map-toolbar .variant-mobile-select-trigger { padding:7px 9px; font-size:14px; }
      .map-toolbar .map-marker-label-input {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        min-height:40px;
        height:40px;
        padding:7px 9px !important;
        flex:none !important;
        font-size:16px;
      }
      .map-toolbar > button {
        width:100%;
        min-height:40px !important;
        height:40px;
        align-self:end;
        padding:7px 9px !important;
        font-size:14px !important;
      }
      .map-toolbar > select { width:100%; min-height:40px; }

      .storm-layout { display:block !important; }
      .storm-tier-sidebar {
        float:none;
        width:100% !important;
        margin:0 0 12px !important;
        padding:0 0 10px !important;
        border-right:0 !important;
        border-bottom:1px solid #2d2d2d;
      }
      .storm-matrix-grid {
        width:100%;
        max-width:100%;
        margin-left:0 !important;
        overflow-x:auto;
        padding-bottom:6px;
      }

      .help-grid { grid-template-columns:1fr; padding-bottom:12px; }
      .help-tools { grid-column:auto; }
      .help-tool-grid { grid-template-columns:1fr; }
      .guides-hero { padding:12px; }
      .guides-hero h2 { font-size:18px; }
      .guides-toolbar { align-items:stretch; }
      .guide-search { min-width:0 !important; width:100%; max-width:none; box-sizing:border-box; }
      .guide-filter, .guide-tool-btn { min-height:38px; }

      #toolsContainer { min-width:0; }
      #toolsContainer .vcard { max-width:100%; box-sizing:border-box; }
      #toolsContainer .vrow { align-items:stretch; }
      #toolsContainer .vrow > .vinput,
      #toolsContainer .vrow > .vselect {
        min-width:0 !important;
        max-width:100%;
        flex:1 1 150px;
      }
      #toolsContainer .vbtn { min-height:38px; }
      #toolsContainer .vsplit,
      #toolsContainer .vrecipeLayout,
      #toolsContainer .vbaseShell { grid-template-columns:1fr !important; }
      #toolsContainer .vbaseFields,
      #toolsContainer .vbaseResultGrid,
      #toolsContainer .vminiStat { grid-template-columns:1fr !important; }
      #toolsContainer .vscroll { max-height:42dvh !important; }
      #toolsContainer .vcreatureGrid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:48dvh !important;
        gap:7px;
        padding-right:2px;
      }
      #toolsContainer .vcreatureCard { min-height:132px; padding:8px; }
      #toolsContainer .vcreatureCard img { width:72px; height:72px; }
      #toolsContainer .vdetailHero { align-items:flex-start; gap:10px; }
      #toolsContainer .vdetailHero img { width:72px; height:72px; }
      #toolsContainer .vfieldRow { grid-template-columns:1fr !important; }
      #toolsContainer .vgsStats { grid-template-columns:1fr !important; }
      #toolsContainer .vtable { min-width:520px; }

      input, textarea, select { font-size:16px; }
      button { font-size:14px; }
      .vmuted, .vbadge, .vchip, .help-card-body, .guide-summary { font-size:12px; }

      /* Give notebook content a little more room on phones. */
      #notes.section.active { min-height:100%; overflow:visible; }
      #notesContainer {
        width:100%;
        max-width:100% !important;
        box-sizing:border-box;
        padding-bottom:calc(90px + env(safe-area-inset-bottom)) !important;
        overflow:visible;
      }
      #notesContainer .notes-hero { padding:12px !important; }
      #notesContainer .notes-controls {
        grid-template-columns:1fr !important;
        gap:8px !important;
      }
      #notesContainer .notes-controls input,
      #notesContainer .notes-controls button {
        width:100% !important;
        min-width:0 !important;
        box-sizing:border-box;
      }
      #notesContainer .notes-folder-card { width:100%; min-width:0; box-sizing:border-box; }
      #notesContainer .notes-folder-head {
        display:grid !important;
        grid-template-columns:36px minmax(0,1fr) 40px 40px !important;
        gap:7px !important;
        padding:10px !important;
      }
      #notesContainer .notes-folder-info { min-width:0; overflow-wrap:anywhere; }
      #notesContainer .notes-folder-body { padding:10px !important; }
      #notesContainer .notes-add-row { grid-template-columns:1fr !important; }
      #notesContainer .notes-add-row textarea {
        width:100% !important;
        min-width:0 !important;
        min-height:110px !important;
        box-sizing:border-box;
      }
      #notesContainer .notes-save-btn { width:100% !important; min-height:42px; }
      #notesContainer .notes-grid { grid-template-columns:1fr !important; }
      #notesContainer .notes-item { min-width:0; overflow-wrap:anywhere; }
      #notesContainer .notes-item textarea { width:100% !important; box-sizing:border-box; }

      /* Phone layout guardrails: keep dynamic tools inside the viewport and reachable. */
      #tools.section.active,
      #icarus-checklists.section.active,
      #icarus-search.section.active,
      #guides.section.active,
      #storms.section.active {
        width:100%;
        max-width:100%;
        min-width:0;
        padding-bottom:calc(88px + env(safe-area-inset-bottom));
        box-sizing:border-box;
      }
      #toolsContainer,
      #toolsContainer .vpanel,
      #toolsContainer .vbasePlannerLayout,
      #toolsContainer .vbasePlannerLayout > *,
      .vh-shell,
      .vh-card {
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
      }
      #toolsContainer .vbasePlannerLayout { display:block !important; }
      #toolsContainer .vbasePlannerSide { position:static !important; width:100% !important; }
      #toolsContainer .vbaseBoardWrap {
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
        overflow:scroll !important;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-x pan-y;
      }
      #toolsContainer .vtable,
      .storm-matrix-grid,
      .vh-table-wrap {
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
      }
      #toolsContainer .vinput,
      #toolsContainer .vselect,
      #toolsContainer .vtextarea,
      .vh-input,
      .vh-select,
      .vh-textarea {
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
      }
      main,
      #toolsContainer .vscroll,
      #toolsContainer .vcreatureGrid,
      #toolsContainer .vbaseBoardWrap,
      .storm-matrix-grid {
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
        scrollbar-color:#665630 #151515;
      }
      main::-webkit-scrollbar,
      #toolsContainer .vscroll::-webkit-scrollbar,
      #toolsContainer .vcreatureGrid::-webkit-scrollbar,
      #toolsContainer .vbaseBoardWrap::-webkit-scrollbar,
      .storm-matrix-grid::-webkit-scrollbar { width:8px; height:8px; }
      main::-webkit-scrollbar-thumb,
      #toolsContainer .vscroll::-webkit-scrollbar-thumb,
      #toolsContainer .vcreatureGrid::-webkit-scrollbar-thumb,
      #toolsContainer .vbaseBoardWrap::-webkit-scrollbar-thumb,
      .storm-matrix-grid::-webkit-scrollbar-thumb { background:#665630; border-radius:999px; }
      #toolsContainer .vrecipeItem,
      #toolsContainer .vexpCard,
      #toolsContainer .vcheckrow { min-width:0; overflow-wrap:anywhere; }
      #toolsContainer .vbaseMaterialPreview,
      #toolsContainer .vbaseToolbar,
      #toolsContainer .vbaseSummary { max-width:100%; min-width:0; }

      /* Trim visual effects during touch gestures to keep map movement smooth. */
      #mapContainer .codex-pin { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
      #mapContainer .codex-pin { cursor:grab; touch-action:none; }
      #mapContainer .codex-pin.codex-pin-dragging { cursor:grabbing; filter:brightness(1.18); z-index:20; }
      #mapContainer.mobile-map-gesturing .codex-pin {
        background:rgba(13,16,18,.62) !important;
        border-color:rgba(42,47,54,.45) !important;
      }
      #mapContainer.mobile-map-gesturing .codex-pin-label { display:none !important; }
    }

    @media (max-width: 420px) {
      #mapContainer { min-height:330px; height:60dvh !important; }
      #toolsContainer .vcreatureGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .map-toolbar { grid-template-columns:1fr 1fr; }
    }

  
    /* Style critical controls here as well so redraws never flash white native inputs. */
    input[type="checkbox"] {
      appearance:none !important; -webkit-appearance:none !important;
      width:17px !important; height:17px !important; min-width:17px !important;
      flex:0 0 17px; margin:0; border:1px solid #5a513d !important; border-radius:4px !important;
      background:#0c0e0c center/12px 12px no-repeat !important; vertical-align:middle; cursor:pointer; color-scheme:dark;
    }
    input[type="checkbox"]:hover { border-color:#8d7440 !important; background-color:#12140f !important; }
    input[type="checkbox"]:checked {
      border-color:#b4934d !important; background-color:#745b25 !important;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff1c8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    }
    input[type="checkbox"]:focus-visible { outline:2px solid #b4934d; outline-offset:2px; }
    input[type="checkbox"]:disabled { opacity:.45; cursor:not-allowed; }


    /* Marker pickers, notebook-sized galleries, and planner comment controls. */
    .route-only-nav { display:none !important; }
    .notes-checklists-split {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      align-items:stretch;
      width:100%;
      min-width:0;
    }
    .notes-checklists-pane { min-width:0; width:100%; display:flex; flex-direction:column; }
    .notes-checklists-pane > #notesContainer,
    .notes-checklists-pane > #icarus-checklists,
    .notes-checklists-pane > #valheim-notes-content,
    .notes-checklists-pane > #valheim-checklists { min-width:0; width:100%; flex:1; }
    .combined-pane-title {
      color:#f0d49c;
      font-weight:800;
      font-size:16px;
      margin:0 0 9px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      min-height:24px;
    }
    .check-item-tools { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0 3px 28px; }
    .check-item-note { margin:4px 0 7px 28px; padding:7px 9px; border-left:2px solid #6a531f; background:#12110e; color:#cdbb96; border-radius:0 7px 7px 0; white-space:pre-wrap; }
    .check-item-tools .vh-btn { min-height:28px; padding:4px 7px; font-size:11px; }
    .overview-search-strip { display:flex; gap:7px; align-items:center; margin:0 0 12px; }
    .overview-search-strip input { flex:1; min-width:0; }
    .overview-title-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:start; }
    .overview-title-copy { min-width:0; }
    .overview-support-link { white-space:nowrap; text-decoration:none; align-self:start; }
    @media (max-width: 620px) {
      .overview-title-row { grid-template-columns:1fr; gap:10px; }
      .overview-support-link { justify-self:start; }
    }
    .notes-image-carousel,.gallery-carousel { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px; align-items:center; margin-top:7px; max-width:430px; }
    .notes-image-stage,.gallery-image-stage { position:relative; min-width:0; aspect-ratio:16/9; border:1px solid #343434; border-radius:8px; overflow:hidden; background:#090909; display:flex; align-items:center; justify-content:center; }
    .notes-image-stage img,.gallery-image-stage img { width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in; }
    .gallery-carousel-arrow,.notes-image-arrow { width:30px; min-width:30px; height:42px; padding:0; border:1px solid #3b3b3b; border-radius:7px; background:#131313; color:#d7c7a6; cursor:pointer; font-size:20px; line-height:1; }
    .gallery-carousel-arrow:disabled,.notes-image-arrow:disabled { opacity:.3; cursor:default; }
    .notes-image-remove,.gallery-image-remove { position:absolute; top:1px; right:1px; width:18px; height:18px; min-width:18px; padding:0; border-radius:50%; border:1px solid #733737; background:rgba(20,8,8,.92); color:#ff9b9b; cursor:pointer; z-index:4; font-size:12px; line-height:15px; display:grid; place-items:center; }
    .notes-image-count,.gallery-image-count { position:absolute; left:5px; bottom:4px; padding:2px 5px; border-radius:999px; background:rgba(0,0,0,.72); color:#d5c8aa; font-size:10px; pointer-events:none; }
    .notes-image-add { position:relative; overflow:hidden; }
    .notes-image-add input { position:absolute; inset:0; opacity:0; cursor:pointer; }
    .variant-image-lightbox { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(0,0,0,.9); }
    .variant-image-lightbox.open { display:flex; }
    .variant-image-lightbox-inner { position:relative; width:min(94vw,1280px); height:min(90vh,900px); display:flex; align-items:center; justify-content:center; }
    .variant-image-lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; border:1px solid #4a4030; background:#080808; }
    .variant-image-lightbox .lightbox-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:56px; border-radius:9px; border:1px solid #575046; background:rgba(10,10,10,.8); color:#f0d49c; font-size:29px; cursor:pointer; z-index:2; }
    .variant-image-lightbox .lightbox-prev { left:8px; }
    .variant-image-lightbox .lightbox-next { right:8px; }
    .variant-image-lightbox .lightbox-close { position:absolute; right:4px; top:4px; width:30px; height:30px; border-radius:50%; border:1px solid #78413b; background:rgba(20,8,8,.9); color:#ffaaa0; font-size:19px; cursor:pointer; z-index:3; }
    .variant-image-lightbox .lightbox-count { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); background:rgba(0,0,0,.75); border:1px solid #353535; border-radius:999px; padding:4px 9px; color:#d6c8a8; font-size:11px; }
    .marker-scroll-picker { position:relative; width:190px; min-width:170px; }
    .marker-scroll-trigger { width:100%; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid #3a3a3a; border-radius:8px; background:#101010; color:#e2d6bd; cursor:pointer; font:inherit; text-align:left; }
    .marker-scroll-trigger:hover,.marker-scroll-picker.open .marker-scroll-trigger { border-color:#76602d; background:#17150f; }
    .marker-scroll-trigger-main { min-width:0; display:flex; align-items:center; gap:7px; flex:1 1 auto; }
    .marker-scroll-trigger-icon { width:20px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; }
    .marker-scroll-trigger-icon img { width:20px; height:20px; object-fit:contain; display:block; }
    .marker-scroll-trigger-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .marker-scroll-caret { flex:0 0 auto; color:#d5b769; }
    .marker-scroll-panel { display:none; position:absolute; left:0; top:calc(100% + 4px); z-index:10040; width:max(100%,250px); max-height:270px; overflow-y:scroll; overflow-x:hidden; scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#806a36 #151515; box-sizing:border-box; padding:4px; border:1px solid #4a4232; border-radius:8px; background:#0d0e0d; box-shadow:0 12px 28px rgba(0,0,0,.72); }
    .marker-scroll-picker.open .marker-scroll-panel { display:block; }
    .marker-scroll-panel::-webkit-scrollbar { width:11px; }
    .marker-scroll-panel::-webkit-scrollbar-track { background:#151515; border-left:1px solid #292929; }
    .marker-scroll-panel::-webkit-scrollbar-thumb { background:#806a36; border-radius:8px; border:2px solid #151515; }
    .marker-scroll-group { position:sticky; top:0; z-index:2; padding:6px 7px 4px; background:#0d0e0d; color:#8f836a; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .marker-scroll-option { width:100%; border:0; background:transparent; color:#d9cdb5; border-radius:5px; padding:7px 8px; display:flex; align-items:center; gap:7px; text-align:left; cursor:pointer; font:inherit; font-size:12px; }
    .marker-scroll-option:hover { background:#181713; }
    .marker-scroll-option.active { background:#302713; color:#ffe1a0; }
    .marker-scroll-check { width:14px; flex:0 0 14px; text-align:center; color:#f5c95e; }
    .marker-scroll-option-icon { width:20px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; overflow:visible; }
    .marker-scroll-option-icon img { width:20px; height:20px; object-fit:contain; display:block; }
    .marker-scroll-option-text { min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .marker-edit-bubble .marker-scroll-picker { width:100%; min-width:0; }
    .marker-edit-bubble .marker-scroll-panel { width:max(100%,260px); max-height:240px; }
    .vh-overview-gallery-card { margin-top:11px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
    .vh-gallery-toolbar { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
    .vh-gallery-stage { max-width:430px; margin:12px 0 0; }
    .gallery-storage-panel { margin-top:9px; display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:9px 10px; border:1px solid #302d27; border-radius:9px; background:#0d0e0d; }
    .gallery-storage-title { min-width:0; color:#e2c989; font-size:12px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }
    .gallery-storage-info { width:100%; border:1px solid #403723; border-radius:7px; background:#15130e; overflow:hidden; }
    .gallery-storage-info summary { position:relative; display:flex; align-items:center; min-height:34px; padding:8px 34px 8px 11px; box-sizing:border-box; color:#f0c85a; font-size:11px; font-weight:800; cursor:pointer; list-style:none; user-select:none; }
    .gallery-storage-info summary::-webkit-details-marker { display:none; }
    .gallery-storage-info summary::after { content:'▾'; position:absolute; right:11px; top:50%; transform:translateY(-50%); color:#d6ad4d; font-size:13px; transition:transform .16s ease; }
    .gallery-storage-info[open] summary::after { transform:translateY(-50%) rotate(180deg); }
    .gallery-storage-info summary:hover { background:#1b1811; color:#ffe09a; }
    .gallery-storage-info summary:focus-visible { outline:2px solid #d6ad4d; outline-offset:-2px; }
    .gallery-storage-info-body { display:grid; gap:4px; padding:9px 11px 10px; border-top:1px solid #332d20; color:#b9ad95; font-size:11px; line-height:1.4; }
    .gallery-storage-count { color:#857c6b; }
    .gallery-storage-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
    .gallery-storage-actions .vbtn,.gallery-storage-actions .vh-btn { padding:6px 8px; font-size:11px; }
    .gallery-image-unavailable { opacity:1; background:#0b0c0b; cursor:default !important; }
    .gallery-storage-panel.gallery-storage-disconnected { border-color:#72591f; background:#15120c; box-shadow:inset 0 0 0 1px rgba(224,180,68,.08); }
    .gallery-storage-panel.gallery-storage-disconnected .gallery-storage-title { color:#ffd66f; }
    .gallery-reconnect-prompt { position:fixed; right:18px; bottom:18px; z-index:10070; width:min(460px,calc(100vw - 36px)); box-sizing:border-box; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 12px; align-items:center; padding:13px 14px; border:1px solid #7b6226; border-radius:11px; background:rgba(17,15,10,.98); box-shadow:0 16px 42px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,213,103,.07); }
    .gallery-reconnect-icon { width:36px; height:36px; display:grid; place-items:center; border:1px solid #6d5724; border-radius:9px; background:#211a0c; color:#f1ca68; font-size:20px; }
    .gallery-reconnect-copy { min-width:0; display:grid; gap:3px; }
    .gallery-reconnect-copy b { color:#f4d281; font-size:13px; }
    .gallery-reconnect-copy span { color:#bcae92; font-size:11px; line-height:1.4; }
    .gallery-reconnect-prompt > .vbtn { grid-column:1/-1; justify-self:end; }
    .gallery-lightbox-status { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:min(520px,80%); color:#d7c9ad; background:rgba(9,9,9,.88); border:1px solid #39352c; border-radius:8px; padding:8px 10px; text-align:center; font-size:12px; pointer-events:none; }
    .gallery-lightbox-status:empty,.gallery-lightbox-status[hidden] { display:none !important; }
    @media (max-width: 1100px) {
      .notes-checklists-split { grid-template-columns:1fr; }
    }
    @media (max-width: 820px) {
      header { padding-top:calc(6px + env(safe-area-inset-top)) !important; padding-bottom:6px !important; }
      .mobile-menu-btn { align-self:center; margin-top:0 !important; }
      .notes-checklists-split { grid-template-columns:1fr; gap:10px; }
      .notes-checklists-pane { width:100%; overflow:visible; }
      .overview-search-strip { position:sticky; top:0; z-index:4; padding:6px 0; background:#0f0f0f; }
      .check-item-tools { margin-left:0; }
      .check-item-note { margin-left:0; }
      .notes-image-carousel,.gallery-carousel { max-width:100%; grid-template-columns:38px minmax(0,1fr) 38px; }
      .notes-image-arrow,.gallery-carousel-arrow { width:38px; min-width:38px; height:44px; }
      /* Keep the map marker controls inside their two-column phone layout. */
      .map-toolbar .marker-scroll-picker { width:100%; min-width:0; max-width:100%; }
      .map-toolbar .marker-scroll-trigger { width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
      .map-toolbar .marker-scroll-trigger-text { flex:1 1 auto; min-width:0; }
      .map-toolbar .marker-scroll-panel { width:min(290px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:52dvh; }
      .map-toolbar .map-marker-type-picker .marker-scroll-panel { left:0; right:auto; }
      .map-toolbar .map-marker-filter-picker .marker-scroll-panel { left:auto; right:0; }
      .variant-image-lightbox { padding:8px; }
      .variant-image-lightbox .lightbox-arrow { width:40px; height:50px; }
      .variant-image-lightbox .lightbox-close { width:40px; height:40px; }
      .vh-overview-gallery-card { grid-template-columns:1fr; }
      .gallery-storage-panel { flex-direction:column; }
      .gallery-reconnect-prompt { left:10px; right:10px; bottom:10px; width:auto; }
      .gallery-storage-actions { width:100%; justify-content:flex-start; }
    }


    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
      .scanlines { display: none; }
    }

/* Saved map filters stay compact so the marker toolbar remains usable at laptop widths. */
.map-filter-preset-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.map-filter-preset-wrap select {
    min-width: 145px;
}

.map-filter-preset-button {
    padding: 7px 9px;
    border: 1px solid #6a531f;
    border-radius: 8px;
    background: #171208;
    color: #ffd166;
    cursor: pointer;
}

.map-filter-preset-button.secondary {
    border-color: #3b3b3b;
    background: #141414;
    color: #d9c7a3;
}


/* Habitat highlighting stays optional and clearly separate from marker filters. */
.map-biome-toggle {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #5b4b28;
    background: #17140e;
    color: #f0d49c;
    cursor: pointer;
}
.map-biome-toggle[data-enabled="0"] { color:#9e927b; border-color:#3b3b3b; background:#141414; }
.map-biome-toggle:disabled { opacity:.48; cursor:not-allowed; }

.notes-new-actions {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    min-width:150px;
}
.notes-draft-image-status {
    color:#8f846e;
    font-size:11px;
    line-height:1.3;
    text-align:center;
}
@media (max-width:720px) {
    .notes-add-row { grid-template-columns:1fr !important; }
    .notes-new-actions { min-width:0; }
    .guide-card.open .guide-body { max-height:62dvh; }
}

/* Show note screenshots before saving so "ready" means something the user can actually see. */
.notes-draft-previews {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 2px;
}
.notes-draft-previews:empty {
    display: none;
}
.notes-draft-preview {
    position: relative;
    min-width: 0;
    border: 1px solid #343434;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0a;
}
.notes-draft-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #070707;
    cursor: zoom-in;
}
.notes-draft-preview img:focus-visible {
    outline: 2px solid #d4a72c;
    outline-offset: -2px;
}
.notes-draft-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #733737;
    border-radius: 50%;
    background: rgba(20, 8, 8, .94);
    color: #ffaaaa;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.notes-draft-preview-remove:hover {
    border-color: #a54a4a;
    color: #ffd0d0;
}

/* Mobile UI cleanup: keep browser text inflation and narrow control grids from fighting the layout. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.notes-folder-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

@media (max-width: 820px) {
  /* Folder actions keep their natural width instead of clipping labels into fixed 40px columns. */
  #notesContainer .notes-folder-head {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  #notesContainer .notes-folder-actions {
    min-width: max-content;
  }
  #notesContainer .notes-folder-action {
    min-height: 36px;
    padding: 6px 9px !important;
    white-space: nowrap;
    line-height: 1.1;
  }

  /* New-note actions are compact on phones instead of becoming two oversized full-width rows. */
  #notesContainer .notes-new-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
    align-items: stretch;
  }
  #notesContainer .notes-add-screenshot-btn {
    grid-column: 1;
    grid-row: 1;
    min-height: 40px;
  }
  #notesContainer .notes-save-btn {
    grid-column: 2;
    grid-row: 1;
    min-height: 40px;
  }
  #notesContainer .notes-draft-image-status {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  /* Give the map controls an intentional phone layout instead of letting generic grid flow pair unrelated controls. */
  .map-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "marker label"
      "place place"
      "filter detail"
      "saved saved"
      "overlay reset" !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .map-toolbar .map-control-select-marker { grid-area: marker; }
  .map-toolbar .map-control-optional-label { grid-area: label; }
  .map-toolbar .map-place-marker-button { grid-area: place; }
  .map-toolbar .map-control-filter { grid-area: filter; }
  .map-toolbar .map-control-map-detail { grid-area: detail; }
  .map-toolbar .map-control-saved-filters { grid-area: saved; }
  .map-toolbar .map-biome-toggle { grid-area: overlay; }
  .map-toolbar .map-reset-view-button { grid-area: reset; }

  .map-toolbar > .map-marker-select-wrap,
  .map-toolbar > .map-marker-input-wrap {
    gap: 5px !important;
  }
  .map-toolbar > .map-marker-select-wrap > div,
  .map-toolbar > .map-marker-input-wrap > div {
    margin: 0 0 1px 2px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .map-toolbar .codex-select,
  .map-toolbar .variant-mobile-select-trigger,
  .map-toolbar .map-marker-label-input,
  .map-toolbar > button {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
  }
  .map-toolbar .variant-mobile-select-trigger,
  .map-toolbar > button {
    font-size: 13px !important;
  }
  .map-toolbar .map-marker-label-input {
    font-size: 16px !important;
  }

  .map-control-saved-filters .map-filter-preset-wrap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .map-control-saved-filters .map-filter-preset-wrap select {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
  .map-control-saved-filters .map-filter-preset-button {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 6px 7px;
    font-size: 12px !important;
  }

  /* Keep the notebook readable without turning every card action into a giant phone-width button. */
  #notesContainer .notes-folder-head {
    gap: 8px !important;
  }
  #notesContainer .notes-folder-info > div:first-child {
    font-size: 15px;
    line-height: 1.15;
  }
  #notesContainer .notes-folder-action {
    font-size: 12px !important;
  }
  #notesContainer .notes-folder-body {
    padding: 9px !important;
  }
  #notesContainer .notes-item {
    padding: 9px !important;
  }
}

@media (max-width: 390px) {
  /* On very narrow phones, put folder actions below the title rather than crushing the name. */
  #notesContainer .notes-folder-head {
    grid-template-columns: 36px minmax(0, 1fr) !important;
  }
  #notesContainer .notes-folder-actions {
    grid-column: 2;
    justify-content: flex-start;
    min-width: 0;
  }
  #notesContainer .notes-folder-action {
    flex: 0 1 auto;
  }
}

/* Touch marker movement is intentionally deliberate: hold for two seconds before dragging. */
@media (pointer: coarse) {
  #mapContainer .codex-pin.codex-pin-hold-armed {
    outline:2px solid rgba(241,199,91,.45);
    outline-offset:3px;
    filter:brightness(1.08);
    animation:codexMarkerHoldArm 2s linear forwards;
  }
}
@keyframes codexMarkerHoldArm {
  0%   { outline-color:rgba(241,199,91,.28); box-shadow:0 0 0 0 rgba(241,199,91,.08); }
  70%  { outline-color:rgba(241,199,91,.7);  box-shadow:0 0 0 4px rgba(241,199,91,.12); }
  100% { outline-color:rgba(255,226,157,1); box-shadow:0 0 0 7px rgba(241,199,91,.2); }
}

/* v1.11.4 map toolbar: direct children own their grid space, so saved-filter actions can never overlap Map Detail or overlays. */
@media (min-width:821px){
  #map .map-toolbar{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important;
    gap:8px!important;
    align-items:end!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  #map .map-toolbar > *{
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  #map .map-toolbar > .map-marker-select-wrap,
  #map .map-toolbar > .map-marker-input-wrap{
    align-self:stretch!important;
  }
  #map .map-toolbar .codex-select,
  #map .map-toolbar .variant-mobile-select-trigger,
  #map .map-toolbar .map-marker-label-input{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  #map .map-toolbar .map-control-saved-filters{
    grid-column:span 2;
  }
  #map .map-control-saved-filters .map-filter-preset-wrap{
    display:grid!important;
    grid-template-columns:minmax(118px,1fr) auto auto auto!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    flex-wrap:nowrap!important;
  }
  #map .map-control-saved-filters .map-filter-preset-wrap select{
    width:100%!important;
    min-width:0!important;
  }
  #map .map-control-saved-filters .map-filter-preset-button{
    min-width:0!important;
    white-space:nowrap!important;
  }
  #map .map-biome-toggle,
  #map .map-reset-view-button,
  #map .map-place-marker-button{
    align-self:end!important;
  }
}

/* The desktop 2D planner uses the page as its only vertical scroller. The board keeps horizontal panning for wide builds. */
@media (min-width:821px){
  #tool-basecalc .vbaseBoardWrap,
  .vbaseBoardWrap{
    max-height:none!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scrollbar-gutter:auto!important;
    overscroll-behavior-x:contain!important;
    overscroll-behavior-y:auto!important;
  }
}

/* v1.11.4 2D planner scrolling: the board may pan sideways, but the page owns vertical scrolling on desktop and mobile. */
#tool-basecalc .vbaseBoardWrap,
.vbaseBoardWrap{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;
  overscroll-behavior-y:auto!important;
  scrollbar-gutter:auto!important;
  touch-action:pan-x pan-y!important;
}

/* v1.11.4 connected interactive-map tool groups.
   The controls read as three intentional blocks instead of a row of floating boxes. */
#map .map-toolbar.map-toolbar-grouped{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  margin:8px 0 10px!important;
  box-sizing:border-box!important;
}
#map .map-toolbar-grouped .map-toolbar-group{
  display:flex;
  align-items:stretch;
  width:max-content;
  max-width:100%;
  min-width:0;
  border:1px solid rgba(139,114,54,.58);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(20,20,16,.96),rgba(11,12,10,.96));
  box-shadow:inset 0 1px 0 rgba(255,224,143,.045),0 4px 14px rgba(0,0,0,.12);
}
#map .map-toolbar-grouped .map-toolbar-cell{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:58px;
  padding:6px 7px 7px!important;
  margin:0!important;
  border-left:1px solid rgba(202,169,87,.22);
  background:transparent;
  box-sizing:border-box!important;
  transform:none!important;
}
#map .map-toolbar-grouped .map-toolbar-cell:first-child{
  border-left:0;
}
#map .map-toolbar-grouped .map-toolbar-cell > div:first-child:not(.marker-scroll-picker),
#map .map-toolbar-grouped .map-toolbar-cell > label:first-child{
  margin:0 2px 4px!important;
  height:auto!important;
  min-height:0!important;
  color:#cdbb92!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.05!important;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}
#map .map-toolbar-grouped .map-toolbar-cell .marker-scroll-picker,
#map .map-toolbar-grouped .map-toolbar-cell .variant-mobile-select-wrap{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}
#map .map-toolbar-grouped .marker-scroll-trigger,
#map .map-toolbar-grouped .variant-mobile-select-trigger,
#map .map-toolbar-grouped .map-marker-label-input,
#map .map-toolbar-grouped .codex-select,
#map .map-toolbar-grouped .map-toolbar-action-cell > button{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:34px!important;
  min-height:34px!important;
  max-height:none!important;
  margin:0!important;
  padding:6px 9px!important;
  border:0!important;
  border-radius:6px!important;
  box-sizing:border-box!important;
  line-height:1.15!important;
  box-shadow:none!important;
}
#map .map-toolbar-grouped .marker-scroll-trigger,
#map .map-toolbar-grouped .variant-mobile-select-trigger,
#map .map-toolbar-grouped .map-marker-label-input,
#map .map-toolbar-grouped .codex-select{
  background:rgba(0,0,0,.20)!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell{
  justify-content:flex-end!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell > button{
  background:rgba(0,0,0,.16)!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell > button:hover:not(:disabled),
#map .map-toolbar-grouped .marker-scroll-trigger:hover,
#map .map-toolbar-grouped .variant-mobile-select-trigger:hover{
  background:rgba(241,199,91,.09)!important;
}
#map .map-toolbar-grouped .map-place-marker-button{
  color:#f1c75b!important;
  background:rgba(77,52,8,.33)!important;
}
#map .map-toolbar-grouped .map-biome-toggle:disabled{
  opacity:.5;
}

/* Desktop widths keep the three groups compact enough to sit together at common resolutions. */
@media (min-width:821px){
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-select-marker{width:145px!important;flex:0 1 145px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-optional-label{width:150px!important;flex:0 1 150px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-save-marker-to{width:150px!important;flex:0 1 150px!important;}
  #map .map-toolbar-grouped .map-toolbar-place-cell{width:110px!important;flex:0 0 110px!important;}

  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter{width:138px!important;flex:0 1 138px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-saved-filters{width:142px!important;flex:0 1 142px!important;}
  #map .map-toolbar-grouped .map-toolbar-apply-cell{width:54px!important;flex:0 0 54px!important;}
  #map .map-toolbar-grouped .map-toolbar-save-cell{width:50px!important;flex:0 0 50px!important;}
  #map .map-toolbar-grouped .map-toolbar-remove-cell{width:62px!important;flex:0 0 62px!important;}
  #map .map-toolbar-grouped .map-control-map-detail{width:134px!important;flex:0 1 134px!important;}

  #map .map-toolbar-grouped .map-toolbar-overlay-cell{width:146px!important;flex:0 0 146px!important;}
  #map .map-toolbar-grouped .map-toolbar-reset-cell{width:104px!important;flex:0 0 104px!important;}
}

/* Tablet/phone: keep the same three blocks, but reflow inside each block rather than
   allowing controls to overflow or creating a sideways page scrollbar. */
@media (max-width:820px){
  #map .map-toolbar.map-toolbar-grouped{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:none!important;
    gap:8px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    border-radius:10px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-cell{
    width:auto!important;
    max-width:none!important;
    min-height:56px!important;
    border-left:1px solid rgba(202,169,87,.22)!important;
    border-top:1px solid rgba(202,169,87,.22);
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:nth-child(1),
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:nth-child(2){border-top:0;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:nth-child(odd){border-left:0!important;}

  #map .map-toolbar-grouped .map-toolbar-group-filters{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter,
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-saved-filters,
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-map-detail{
    grid-column:1 / -1;
    border-left:0!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter{border-top:0;}
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-toolbar-apply-cell{border-left:0!important;}

  #map .map-toolbar-grouped .map-toolbar-group-view{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell{border-top:0;}
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell:first-child{border-left:0!important;}

  #map .map-toolbar-grouped .marker-scroll-trigger,
  #map .map-toolbar-grouped .variant-mobile-select-trigger,
  #map .map-toolbar-grouped .map-marker-label-input,
  #map .map-toolbar-grouped .codex-select,
  #map .map-toolbar-grouped .map-toolbar-action-cell > button{
    height:40px!important;
    min-height:40px!important;
    font-size:13px!important;
  }
  #map .map-toolbar-grouped .map-marker-label-input{font-size:16px!important;}
}

@media (max-width:460px){
  #map .map-toolbar-grouped .map-toolbar-group-marker{
    grid-template-columns:minmax(0,1fr);
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell{
    border-left:0!important;
    border-top:1px solid rgba(202,169,87,.22)!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:first-child{border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-group-view{
    grid-template-columns:minmax(0,1fr);
  }
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell{
    border-left:0!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell + .map-toolbar-cell{
    border-top:1px solid rgba(202,169,87,.22)!important;
  }
}


/* v1.11.4 final interactive-map toolbar pass.
   Three connected tool blocks, compact controls, consistent typography, and no page overflow. */
#map .map-toolbar.map-toolbar-grouped{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  margin:7px 0 9px!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}
#map .map-toolbar-grouped .map-toolbar-group{
  display:flex!important;
  align-items:stretch!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  border:1px solid rgba(150,117,45,.66)!important;
  border-radius:9px!important;
  overflow:visible!important;
  background:linear-gradient(180deg,rgba(18,18,15,.98),rgba(10,11,9,.98))!important;
  box-shadow:inset 0 1px 0 rgba(255,223,135,.045),0 3px 10px rgba(0,0,0,.10)!important;
}
#map .map-toolbar-grouped .map-toolbar-cell{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:stretch!important;
  min-width:0!important;
  min-height:48px!important;
  height:48px!important;
  padding:5px 7px!important;
  margin:0!important;
  border:0!important;
  border-left:1px solid rgba(201,163,73,.24)!important;
  border-radius:0!important;
  background:transparent!important;
  box-sizing:border-box!important;
  transform:none!important;
}
#map .map-toolbar-grouped .map-toolbar-cell:first-child{border-left:0!important;}
#map .map-toolbar-grouped .map-toolbar-cell > div:first-child:not(.marker-scroll-picker),
#map .map-toolbar-grouped .map-toolbar-cell > label:first-child{
  margin:0 1px 3px!important;
  padding:0!important;
  min-height:0!important;
  height:auto!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  color:#c8b47e!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell{
  justify-content:flex-end!important;
}
#map .map-toolbar-grouped .marker-scroll-picker,
#map .map-toolbar-grouped .variant-mobile-select-wrap{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#map .map-toolbar-grouped .marker-scroll-trigger,
#map .map-toolbar-grouped .variant-mobile-select-trigger,
#map .map-toolbar-grouped .map-marker-label-input,
#map .map-toolbar-grouped .codex-select,
#map .map-toolbar-grouped .map-toolbar-action-cell > button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:29px!important;
  min-height:29px!important;
  max-height:29px!important;
  margin:0!important;
  padding:4px 8px!important;
  border:0!important;
  border-radius:5px!important;
  box-sizing:border-box!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:none!important;
}
#map .map-toolbar-grouped .map-marker-label-input::placeholder{font-size:12px!important;}
#map .map-toolbar-grouped .marker-scroll-trigger,
#map .map-toolbar-grouped .variant-mobile-select-trigger,
#map .map-toolbar-grouped .map-marker-label-input,
#map .map-toolbar-grouped .codex-select{
  background:rgba(0,0,0,.18)!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell > button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(0,0,0,.12)!important;
}
#map .map-toolbar-grouped .map-place-marker-button{
  color:#f0c755!important;
  background:rgba(81,55,9,.30)!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell > button:hover:not(:disabled),
#map .map-toolbar-grouped .marker-scroll-trigger:hover,
#map .map-toolbar-grouped .variant-mobile-select-trigger:hover,
#map .map-toolbar-grouped .map-marker-label-input:hover{
  background:rgba(238,194,80,.08)!important;
}

/* Compact desktop sizing. Groups wrap as whole units before the page can overflow. */
@media (min-width:821px){
  #map .map-toolbar-grouped .map-toolbar-group-marker{flex:0 1 528px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-select-marker{width:132px!important;flex:1 1 132px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-optional-label{width:132px!important;flex:1 1 132px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-save-marker-to{width:168px!important;flex:1 1 168px!important;}
  #map .map-toolbar-grouped .map-toolbar-place-cell{width:90px!important;flex:0 0 90px!important;}

  #map .map-toolbar-grouped .map-toolbar-group-filters{flex:0 1 516px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter{width:126px!important;flex:1 1 126px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-saved-filters{width:132px!important;flex:1 1 132px!important;}
  #map .map-toolbar-grouped .map-toolbar-apply-cell{width:48px!important;flex:0 0 48px!important;}
  #map .map-toolbar-grouped .map-toolbar-save-cell{width:45px!important;flex:0 0 45px!important;}
  #map .map-toolbar-grouped .map-toolbar-remove-cell{width:56px!important;flex:0 0 56px!important;}
  #map .map-toolbar-grouped .map-control-map-detail{width:112px!important;flex:1 1 112px!important;}

  #map .map-toolbar-grouped .map-toolbar-group-view{flex:0 1 228px!important;}
  #map .map-toolbar-grouped .map-toolbar-overlay-cell{width:132px!important;flex:1 1 132px!important;}
  #map .map-toolbar-grouped .map-toolbar-reset-cell{width:94px!important;flex:0 0 94px!important;}
}

/* Tablet: each block keeps its internal connected row, but blocks stack when needed. */
@media (max-width:1100px) and (min-width:601px){
  #map .map-toolbar.map-toolbar-grouped{gap:7px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker,
  #map .map-toolbar-grouped .map-toolbar-group-filters{flex:1 1 100%!important;width:100%!important;}
  #map .map-toolbar-grouped .map-toolbar-group-view{flex:0 1 auto!important;}
  #map .map-toolbar-grouped .map-toolbar-cell{height:50px!important;min-height:50px!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-select-marker,
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-optional-label,
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-control-save-marker-to,
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter,
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-saved-filters,
  #map .map-toolbar-grouped .map-control-map-detail{flex:1 1 0!important;width:auto!important;}
}

/* Phones: retain the same three blocks with touch-sized controls and no horizontal page scroll. */
@media (max-width:600px){
  #map .map-toolbar.map-toolbar-grouped{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }
  #map .map-toolbar-grouped .map-toolbar-cell{
    width:auto!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    border-left:1px solid rgba(201,163,73,.24)!important;
    border-top:1px solid rgba(201,163,73,.24)!important;
    padding:6px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:nth-child(1),
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:nth-child(2){border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:nth-child(odd){border-left:0!important;}

  #map .map-toolbar-grouped .map-toolbar-group-filters{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter,
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-saved-filters,
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-map-detail{
    grid-column:1 / -1!important;
    border-left:0!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-control-filter{border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-group-filters .map-toolbar-apply-cell{border-left:0!important;}

  #map .map-toolbar-grouped .map-toolbar-group-view{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell{border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell:first-child{border-left:0!important;}

  #map .map-toolbar-grouped .marker-scroll-trigger,
  #map .map-toolbar-grouped .variant-mobile-select-trigger,
  #map .map-toolbar-grouped .map-marker-label-input,
  #map .map-toolbar-grouped .codex-select,
  #map .map-toolbar-grouped .map-toolbar-action-cell > button{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:6px 8px!important;
    font-size:13px!important;
  }
  #map .map-toolbar-grouped .map-marker-label-input{font-size:16px!important;}
}
@media (max-width:390px){
  #map .map-toolbar-grouped .map-toolbar-group-marker{grid-template-columns:minmax(0,1fr)!important;}
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell{
    border-left:0!important;
    border-top:1px solid rgba(201,163,73,.24)!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell:first-child{border-top:0!important;}
}

/* v1.11.4 concept-match pass for the Icarus Interactive Map toolbar.
   Each tool family is a labeled connected block. Field captions sit below their controls,
   matching the approved desktop/tablet/mobile concept while blocks wrap before the page can overflow. */
#map .map-toolbar.map-toolbar-grouped{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:flex-start!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  margin:8px 0 10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
#map .map-toolbar-grouped .map-toolbar-group{
  display:grid!important;
  grid-auto-flow:row!important;
  gap:0!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(171,126,31,.82)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(17,18,16,.985),rgba(9,10,9,.985))!important;
  box-shadow:inset 0 1px 0 rgba(255,223,135,.05),0 4px 12px rgba(0,0,0,.14)!important;
}
#map .map-toolbar-grouped .map-toolbar-group-title{
  grid-column:1 / -1!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:26px!important;
  padding:4px 9px!important;
  border-bottom:1px solid rgba(201,163,73,.24)!important;
  color:#e5b83d!important;
  background:linear-gradient(180deg,rgba(34,29,15,.34),rgba(16,16,13,.12))!important;
  font-size:10px!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  box-sizing:border-box!important;
}
#map .map-toolbar-grouped .map-toolbar-group-number{
  display:inline-grid!important;
  place-items:center!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  border:1px solid #d8a72d!important;
  border-radius:50%!important;
  color:#ffd66c!important;
  font-size:10px!important;
  font-weight:800!important;
}
#map .map-toolbar-grouped .map-toolbar-cell{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  width:auto!important;
  min-width:0!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:6px 8px 5px!important;
  border:0!important;
  border-left:1px solid rgba(201,163,73,.23)!important;
  border-radius:0!important;
  background:transparent!important;
  box-sizing:border-box!important;
  transform:none!important;
}
#map .map-toolbar-grouped .map-toolbar-group-title + .map-toolbar-cell{border-left:0!important;}
#map .map-toolbar-grouped .map-marker-select-wrap > div:first-child:not(.marker-scroll-picker),
#map .map-toolbar-grouped .map-marker-input-wrap > div:first-child{
  order:2!important;
  margin:4px 1px 0!important;
  padding:0!important;
  height:auto!important;
  min-height:0!important;
  color:#a99c82!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#map .map-toolbar-grouped .map-marker-select-wrap > :not(:first-child),
#map .map-toolbar-grouped .map-marker-input-wrap > :not(:first-child){order:1!important;}
#map .map-toolbar-grouped .map-toolbar-action-cell{
  justify-content:flex-start!important;
  padding-top:6px!important;
}
#map .map-toolbar-grouped .marker-scroll-picker,
#map .map-toolbar-grouped .variant-mobile-select-wrap{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#map .map-toolbar-grouped .marker-scroll-trigger,
#map .map-toolbar-grouped .variant-mobile-select-trigger,
#map .map-toolbar-grouped .map-marker-label-input,
#map .map-toolbar-grouped .codex-select,
#map .map-toolbar-grouped .map-toolbar-action-cell > button{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:5px 9px!important;
  border:1px solid rgba(99,94,78,.58)!important;
  border-radius:6px!important;
  box-sizing:border-box!important;
  color:#e8dfcc!important;
  background:linear-gradient(180deg,rgba(20,21,19,.96),rgba(12,13,12,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#map .map-toolbar-grouped .map-toolbar-action-cell > button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#d8c9aa!important;
}
#map .map-toolbar-grouped .map-place-marker-button{
  color:#f3c548!important;
  border-color:rgba(194,144,31,.72)!important;
  background:linear-gradient(180deg,rgba(50,37,10,.88),rgba(25,21,10,.92))!important;
}
#map .map-toolbar-grouped .map-toolbar-apply-cell > button,
#map .map-toolbar-grouped .map-toolbar-save-cell > button{color:#f0c755!important;}
#map .map-toolbar-grouped .map-toolbar-action-cell > button:hover:not(:disabled),
#map .map-toolbar-grouped .marker-scroll-trigger:hover,
#map .map-toolbar-grouped .variant-mobile-select-trigger:hover,
#map .map-toolbar-grouped .map-marker-label-input:hover,
#map .map-toolbar-grouped .codex-select:hover{
  border-color:rgba(202,157,54,.78)!important;
  background:linear-gradient(180deg,rgba(33,30,20,.98),rgba(15,16,13,.98))!important;
}
#map .map-toolbar-grouped .map-biome-toggle:disabled{opacity:.5!important;}

@media (min-width:821px){
  #map .map-toolbar-grouped .map-toolbar-group-marker{
    grid-template-columns:120px 145px 125px 98px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-filters{
    grid-template-columns:120px 145px 54px 50px 62px 118px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-view{
    grid-template-columns:142px 98px!important;
  }
}

@media (max-width:820px){
  #map .map-toolbar.map-toolbar-grouped{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-title{grid-column:1/-1!important;}
  #map .map-toolbar-grouped .map-toolbar-cell{
    width:auto!important;
    height:60px!important;
    min-height:60px!important;
    padding:7px 8px 6px!important;
    border-top:1px solid rgba(201,163,73,.22)!important;
    border-left:1px solid rgba(201,163,73,.22)!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-title + .map-toolbar-cell{border-left:0!important;}
  #map .map-toolbar-grouped .map-toolbar-cell:nth-of-type(2){border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-cell:nth-of-type(3){border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-group-view .map-toolbar-cell{border-top:0!important;}
  #map .map-toolbar-grouped .marker-scroll-trigger,
  #map .map-toolbar-grouped .variant-mobile-select-trigger,
  #map .map-toolbar-grouped .map-marker-label-input,
  #map .map-toolbar-grouped .codex-select,
  #map .map-toolbar-grouped .map-toolbar-action-cell > button{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    font-size:13px!important;
  }
  #map .map-toolbar-grouped .map-marker-label-input{font-size:16px!important;}
}

@media (max-width:430px){
  #map .map-toolbar-grouped .map-toolbar-group-marker{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-cell{
    grid-column:1!important;
    border-left:0!important;
    border-top:1px solid rgba(201,163,73,.22)!important;
  }
  #map .map-toolbar-grouped .map-toolbar-group-marker .map-toolbar-group-title + .map-toolbar-cell{border-top:0!important;}
  #map .map-toolbar-grouped .map-toolbar-group-filters,
  #map .map-toolbar-grouped .map-toolbar-group-view{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}