/* ===========================================================
   NeoRota theme for the Lugh World map
   Re-skins the LughPedia map to NeoRota's identity:
   cozy LIGHT by default, tech DARK via [data-theme="dark"].
   Loaded AFTER styles.css + map.css so it wins.
   Element/rarity colors are kept (canonical to the game).
   =========================================================== */

/* ---------- NeoRota design tokens (cozy light) ---------- */
:root{
  /* NeoRota palette */
  --bg:#fff7ea; --bg2:#fffdf8;
  --panel:rgba(255,255,255,.88); --panel-strong:#ffffff;
  --nr-border:rgba(60,44,30,.12);
  --text:#17121f; --muted:rgba(23,18,31,.64); --muted2:rgba(23,18,31,.46);
  --lav:#ece5ff; --lav2:#f4efff; --ink:#221a3a;
  --butter:#ffe8a8; --mint:#a6f0df; --peach:#ffd9c7;
  --nr-accent:#8C78FF; --nr-accent-dim:#6f5ae0;
  --nr-glow:rgba(140,120,255,.20); --nr-glow-strong:rgba(140,120,255,.38);
  --nr-shadow:0 18px 55px rgba(23,18,31,.10);
  --nr-shadow2:0 12px 30px rgba(23,18,31,.12);
  --nr-navh:64px;

  /* ---- Map of LughPedia tokens onto NeoRota ---- */
  --primary:            var(--nr-accent);
  --primary-dim:        var(--nr-accent-dim);
  --primary-glow:       var(--nr-glow);
  --primary-glow-strong:var(--nr-glow-strong);
  --secondary:          var(--nr-accent);
  --accent:             var(--nr-accent);
  --accent-dim:         var(--nr-accent-dim);
  --accent-glow:        var(--nr-glow);

  --bg-dark:      var(--bg);
  --bg-card:      var(--panel-strong);
  --bg-card-hover:var(--lav2);
  --bg-elevated:  var(--panel-strong);
  --bg-surface:   var(--bg2);

  --text-primary:   var(--text);
  --text-secondary: var(--muted);
  --text-muted:     var(--muted2);

  --border:       var(--nr-border);
  --border-hover: rgba(140,120,255,.30);

  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:22px;
  --shadow-sm:0 2px 10px rgba(23,18,31,.08);
  --shadow-md:var(--nr-shadow2);
  --shadow-lg:var(--nr-shadow);
  --shadow-glow:0 0 24px var(--nr-glow);
}

/* ---------- Tech dark (toggle) ---------- */
html[data-theme="dark"]{
  --bg:#0b0f16; --bg2:#0f1420;
  --panel:rgba(17,24,39,.55); --panel-strong:#111827;
  --nr-border:rgba(255,255,255,.10);
  --text:#e8edf7; --muted:rgba(232,237,247,.70); --muted2:rgba(232,237,247,.50);
  --lav:#2a2f46; --lav2:#343a55; --ink:#e8edf7;
  --butter:#ffd24a; --mint:#44d0b2; --peach:#ffbfa0;
  --nr-shadow:0 22px 60px rgba(0,0,0,.48);
  --nr-shadow2:0 14px 38px rgba(0,0,0,.52);
}

/* ---------- Fonts: NeoRota stack everywhere ---------- */
body, button, input, select, textarea,
.map-app, h1,h2,h3,h4,h5,h6,
[class*="map-"], [class*="atlas"]{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* ---------- Page background: NeoRota cozy ---------- */
body{
  color: var(--text) !important;
  background:
    radial-gradient(880px 520px at 16% -10%, rgba(140,120,255,.14), transparent 62%),
    radial-gradient(880px 520px at 86% 8%,  rgba(255,217,199,.22), transparent 60%),
    radial-gradient(720px 460px at 60% 100%, rgba(255,232,168,.18), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(124,100,255,.12), transparent 62%),
    radial-gradient(880px 520px at 86% 8%, rgba(255,210,74,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
}

/* =====================================================
   NEOROTA TOPBAR  (nr- classes, no clash with map/site)
   ===================================================== */
.lp-site-header{ display:none !important; }   /* hide old LughPedia header if present */

.nr-topbar{
  position:sticky; top:0; z-index:60;
  height:var(--nr-navh);
  display:flex; align-items:center;
  backdrop-filter:blur(10px);
  background: color-mix(in oklab, var(--panel) 84%, transparent);
  border-bottom:1px solid var(--nr-border);
}
.nr-inner{
  width:100%; max-width:1360px; margin:0 auto; padding:0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; height:100%;
}
.nr-brand{ display:flex; align-items:center; gap:10px; min-width:180px; }
.nr-logo{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  overflow:hidden; border:1px solid color-mix(in oklab, var(--nr-border) 70%, transparent);
  box-shadow:0 10px 26px rgba(140,120,255,.18);
}
.nr-logo svg{ width:34px; height:34px; display:block; }
.nr-brand h1{ font-size:16px; margin:0; letter-spacing:.2px; line-height:1.1; color:var(--text); }
.nr-brand .nr-tag{ font-size:12px; margin:2px 0 0; color:var(--muted); }

.nr-links{ display:flex; align-items:center; gap:14px; }
.nr-links a{
  font-size:13px; color:var(--muted); padding:10px; border-radius:12px;
  text-decoration:none; transition:background .2s, color .2s;
}
.nr-links a:hover{ color:var(--text); background:color-mix(in oklab, var(--panel-strong) 60%, transparent); }
.nr-links a.active{ color:var(--text); background:var(--lav); }

.nr-right{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.nr-themeBtn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px;
  border:1px solid var(--nr-border);
  background:color-mix(in oklab, var(--panel-strong) 86%, transparent);
  color:var(--muted); font-size:13px; cursor:pointer; user-select:none;
  transition:transform .2s, box-shadow .2s, color .2s;
}
.nr-themeBtn:hover{ color:var(--text); box-shadow:var(--nr-shadow2); transform:translateY(-1px); }
.nr-themeMenu{ position:relative; }
.nr-themeDropdown{
  position:absolute; right:0; top:calc(100% + 10px); min-width:200px; padding:10px;
  border-radius:16px; border:1px solid var(--nr-border);
  background:color-mix(in oklab, var(--panel-strong) 94%, transparent);
  box-shadow:var(--nr-shadow); display:none; z-index:80;
}
.nr-themeDropdown.open{ display:block; }
.nr-themeItem{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; border-radius:14px; font-size:13px; color:var(--muted); cursor:pointer;
}
.nr-themeItem:hover{ color:var(--text); background:color-mix(in oklab, var(--panel) 72%, transparent); }
.nr-pill{
  font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--nr-border);
  background:color-mix(in oklab, var(--panel) 65%, transparent); color:var(--muted2);
}
.nr-lang{ display:flex; align-items:center; gap:8px; margin-left:6px; }
.nr-lang a{
  display:flex; align-items:center; justify-content:center; width:28px; height:20px;
  border-radius:6px; overflow:hidden; border:1px solid var(--nr-border);
  background:color-mix(in oklab, var(--panel-strong) 86%, transparent); cursor:pointer;
}
.nr-lang img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:980px){ .nr-links{ display:none; } .nr-brand{ min-width:unset; } }

/* language switcher (keeps LughPedia i18n classes, NeoRota look) */
.nr-right .header-actions{ display:flex; align-items:center; gap:10px; }
.lang-dropdown-container{ position:relative; }
.lang-dropdown-trigger{
  width:30px; height:22px; border-radius:6px; overflow:hidden; cursor:pointer;
  border:1px solid var(--nr-border); display:flex;
  background:color-mix(in oklab, var(--panel-strong) 86%, transparent);
}
.lang-dropdown-trigger img{ width:100%; height:100%; object-fit:cover; display:block; }
.lang-dropdown-menu{
  position:absolute; right:0; top:calc(100% + 8px); padding:6px; border-radius:12px;
  border:1px solid var(--nr-border);
  background:color-mix(in oklab, var(--panel-strong) 94%, transparent);
  box-shadow:var(--nr-shadow); display:none; z-index:80;
}
.lang-dropdown-container.open .lang-dropdown-menu{ display:flex; flex-direction:column; gap:6px; }
.lang-option{ width:30px; height:22px; border-radius:6px; overflow:hidden; cursor:pointer; border:1px solid transparent; }
.lang-option img{ width:100%; height:100%; object-fit:cover; display:block; }
.lang-option.active{ border-color:var(--nr-accent); }

/* keep the map app docked right below the NeoRota topbar */
.map-app{ top:var(--nr-navh) !important; background:transparent !important; }

/* =====================================================
   MAP COMPONENTS -> cozy panels
   ===================================================== */

/* Top bar (World Map / search row) */
.map-topbar{
  background: color-mix(in oklab, var(--panel) 84%, transparent) !important;
  border-bottom:1px solid var(--nr-border) !important;
}
.map-atlas-trigger{
  background: var(--lav) !important;
  border:1px solid var(--nr-border) !important;
  color: var(--ink) !important;
}
.map-atlas-trigger:hover{
  background: var(--lav2) !important;
  border-color: var(--border-hover) !important;
  box-shadow:0 0 0 3px var(--nr-glow) !important;
}
.map-atlas-current-name{ background: var(--nr-accent) !important; color:#fff !important; box-shadow:none !important; }

/* Search input */
.map-search-input{
  background: color-mix(in oklab, var(--panel-strong) 92%, transparent) !important;
  border:1px solid var(--nr-border) !important;
  color: var(--text) !important;
  box-shadow:none !important;
}
.map-search-input:focus{
  border-color: var(--border-hover) !important;
  background: var(--panel-strong) !important;
  box-shadow:0 0 0 3px var(--nr-glow) !important;
}
.map-search-dropdown{
  background: color-mix(in oklab, var(--panel-strong) 96%, transparent) !important;
  border:1px solid var(--nr-border) !important;
  box-shadow:var(--nr-shadow) !important;
}
.map-search-result-item{ border-bottom:1px solid var(--nr-border) !important; }
.map-search-result-item:hover{ background: var(--lav2) !important; }

/* Atlas modal */
.map-atlas-overlay{ background: rgba(23,18,31,.45) !important; }
.map-atlas-modal{ background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important; box-shadow:var(--nr-shadow) !important; }
.map-atlas-header{ background: var(--bg2) !important; border-bottom:1px solid var(--nr-border) !important; }
.map-atlas-search-wrap input{
  background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important; color:var(--text) !important;
}
.map-atlas-search-wrap input:focus{ border-color:var(--border-hover) !important; box-shadow:0 0 0 3px var(--nr-glow) !important; }
.atlas-card{ background: var(--panel) !important; border:3px solid var(--nr-border) !important; }
.atlas-card:hover{ border-color:var(--border-hover) !important; box-shadow:var(--nr-shadow) !important; }

/* Left sidebar */
.map-sidebar{
  background: color-mix(in oklab, var(--panel) 86%, transparent) !important;
  border-right:1px solid var(--nr-border) !important;
}
.map-sidebar-toggle{
  background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important; color:var(--muted) !important;
  box-shadow:var(--shadow-sm) !important;
}
.map-sidebar-toggle:hover{ color:var(--nr-accent) !important; border-color:var(--border-hover) !important; }
.map-sidebar-title{ color: var(--muted) !important; }
.map-filter-label{ color: var(--muted) !important; }

/* Layer toggle tiles */
.map-layers-list .map-layer-toggle{
  background: var(--lav2) !important; border:1px solid var(--nr-border) !important; color:var(--text) !important;
}
.map-layers-list .map-layer-toggle:has(input:checked){
  background: var(--lav) !important; border-color: var(--border-hover) !important;
}
.map-layers-list .map-layer-toggle:hover{ background: var(--lav) !important; border-color: var(--nr-accent) !important; }
.map-layers-list .map-layer-toggle.is-unchecking:hover{ background: var(--lav2) !important; border-color:var(--nr-border) !important; }

/* Custom selects */
.map-select-trigger,
.map-filter-select,
.map-filter-input{
  background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important; color:var(--text) !important;
}
.map-select-trigger:hover,
.map-custom-select.active .map-select-trigger,
.map-filter-input:hover, .map-filter-input:focus,
.map-filter-select:hover{
  border-color: var(--border-hover) !important; background: var(--panel-strong) !important;
  box-shadow:0 0 0 3px var(--nr-glow) !important;
}
.map-select-arrow{ color: var(--muted2) !important; }
.map-select-dropdown{
  background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important; box-shadow:var(--nr-shadow) !important;
}
.map-filter-select option{ background: var(--panel-strong) !important; color: var(--text) !important; }
.map-rarity-item:hover{ background: var(--lav2) !important; }
.map-rarity-item.selected{ background: var(--lav) !important; border-left:2px solid var(--nr-accent) !important; }

/* Element grid */
.map-element-btn{ background: var(--lav2) !important; border:1px solid var(--nr-border) !important; }
.map-element-btn:hover{ background: var(--lav) !important; border-color: var(--nr-accent) !important; }
.map-element-btn.selected{ background: var(--lav) !important; border-color: var(--nr-accent) !important; }

/* Reset button */
.map-reset-btn{
  background: var(--lav) !important; border:1px solid var(--nr-border) !important; color:var(--ink) !important;
}
.map-reset-btn:hover{ background: var(--lav2) !important; border-color:var(--border-hover) !important; }

/* ---- Map viewport (canvas backdrop) ---- */
.map-viewport{
  background:
    radial-gradient(circle at 30% 35%, rgba(140,120,255,.10) 0%, transparent 55%),
    radial-gradient(circle at 72% 65%, rgba(255,217,199,.18) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
}
html[data-theme="dark"] .map-viewport{
  background:
    radial-gradient(circle at 30% 40%, rgba(124,100,255,.06) 0%, transparent 50%),
    #080c12 !important;
}

/* Marker tooltip / badges / zoom / right panel */
.map-marker-tooltip{
  background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important;
  color: var(--text) !important; box-shadow:var(--nr-shadow2) !important;
}
.map-marker:hover .map-marker-icon{ filter:drop-shadow(0 3px 10px rgba(140,120,255,.5)) !important; }
.map-zoom-controls,
.map-island-badge{
  background: color-mix(in oklab, var(--panel) 90%, transparent) !important;
  border:1px solid var(--nr-border) !important; box-shadow:var(--nr-shadow2) !important;
}
.map-zoom-btn:hover{ color:var(--nr-accent) !important; background: var(--lav2) !important; }
.map-island-badge-name{ color:var(--text) !important; text-shadow:none !important; }

.map-panel{
  background: color-mix(in oklab, var(--panel) 88%, transparent) !important;
  border-left:1px solid var(--nr-border) !important;
}
.map-panel-island-levels{
  color: var(--nr-accent) !important; background: var(--lav) !important; border:1px solid var(--nr-border) !important;
}
.map-panel-count{ color: var(--nr-accent) !important; background: var(--lav) !important; }
.map-panel-island-desc{ border-bottom:1px solid var(--nr-border) !important; }

/* Creature cards in right panel */
.map-creature-card{
  background: var(--panel-strong) !important; border:1px solid var(--nr-border) !important;
}
.map-creature-card:hover{
  background: var(--lav2) !important; border-color: var(--border-hover) !important;
}
.map-creature-card-img{ background: var(--lav2) !important; border:1px solid var(--nr-border) !important; }
.map-creature-card-tag.high-chance{
  background: var(--lav) !important; color: var(--nr-accent) !important; border:1px solid var(--nr-border) !important;
}
.map-loot-icon-only{ background: var(--lav2) !important; border:1px solid var(--nr-border) !important; }
.map-loot-icon-only:hover{ background: var(--lav) !important; border-color: var(--nr-accent) !important; box-shadow:var(--nr-shadow2) !important; }

/* scrollbars a touch softer */
*::-webkit-scrollbar-thumb{ background: color-mix(in oklab, var(--nr-border) 80%, transparent) !important; }

/* =====================================================
   USER REQUESTS — layout differences from LughPedia
   ===================================================== */

/* Map-select button relocated into the sidebar (above filters) */
.nr-atlas-side{
  width:100% !important;
  justify-content:center !important;
  margin:0 0 16px 0 !important;
  padding:10px 14px !important;
  grid-column:auto !important;
  justify-self:auto !important;
  margin-left:0 !important;
}
.nr-atlas-side .map-atlas-current-name{ margin-left:8px !important; }

/* Top bar now holds only the search → let it breathe */
.map-topbar-inner{ grid-template-columns:1fr !important; }
.map-search-wrap{
  grid-column:1 !important; justify-self:stretch !important;
  width:auto !important; max-width:560px; margin:0 16px !important;
}

/* Marker tiles: 4 per row (was 3), equal widths (minmax(0,1fr) stops
   long labels from stretching their column), a touch smaller */
.map-layers-list{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.map-layers-list .map-layer-toggle{ min-height:58px !important; font-size:9px !important; padding:7px 3px !important; }
.map-layers-list .map-layer-toggle span{ overflow-wrap:anywhere; hyphens:auto; }
.map-layer-icon{ width:20px !important; height:20px !important; }

/* Slightly different sidebar / right-panel widths */
.map-sidebar{ width:296px !important; }
.map-panel{ width:336px !important; }

/* Island name centered in the right panel */
.map-panel-island-header{ text-align:center !important; }
.map-panel-island-name{ justify-content:center !important; }

/* ---- Dark theme: NeoRota violet-tech (not LughPedia teal) ---- */
html[data-theme="dark"]{
  --panel-strong:#12121f;
  --panel:rgba(22,19,38,.62);
  --nr-border:rgba(140,120,255,.16);
  --lav:#2a2440; --lav2:#211c34; --ink:#e8e3ff;
}
html[data-theme="dark"] .map-topbar,
html[data-theme="dark"] .map-sidebar,
html[data-theme="dark"] .map-panel{
  background: color-mix(in oklab, #14111f 88%, transparent) !important;
  border-color: rgba(140,120,255,.14) !important;
}
html[data-theme="dark"] .map-viewport{
  background:
    radial-gradient(circle at 30% 35%, rgba(140,120,255,.12) 0%, transparent 55%),
    radial-gradient(circle at 72% 65%, rgba(124,100,255,.06) 0%, transparent 55%),
    linear-gradient(180deg, #0b0a13, #0e0c18) !important;
}
html[data-theme="dark"] .map-atlas-current-name{ color:#fff !important; }