* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; background:#1a1512; color:#e8ddc7; }
header { padding: .6rem 1rem; background:#0f0b09; border-bottom: 1px solid #352a21; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
header h1 { margin:0; font-size: 1.05rem; font-weight:600; letter-spacing:.02em; }
header h1 span { color:#c7a25b; }
nav { display:flex; align-items:center; gap:1rem; font-size:.85rem; flex-wrap:wrap; }
nav label { display:flex; align-items:center; gap:.35rem; }
nav select, nav button { background:#241b14; color:#e8ddc7; border:1px solid #4a3a2a; padding:.2rem .5rem; border-radius:3px; font:inherit; cursor:pointer; }
nav button:hover { background:#33261b; }
#hint { color:#7a6a55; font-size:.75rem; }

main { height: calc(100vh - 48px); }
#stage { display:grid; grid-template-columns: 1fr 6px var(--panel-w, 320px); height:100%; }
#panelSplitter {
  background: #2a1f16; cursor: col-resize; border-left: 1px solid #1a120d;
  border-right: 1px solid #4a3a2a; transition: background .12s ease-out;
}
#panelSplitter:hover, #panelSplitter.dragging { background: #c7a25b; }
#panelSplitter.dragging { cursor: col-resize; }
#viewport { position:relative; overflow:hidden; background:#06040a; cursor:grab; }
#viewport.dragging { cursor:grabbing; }
#map { width:100%; height:100%; display:block; }
/* Let the browser use its default bilinear sampling — the earlier
   -webkit-optimize-contrast / crisp-edges hints were causing ghosting when
   the panel updated and forced a layout reflow. */

#panel { background:#15100c; border-left:1px solid #352a21; overflow-y:auto; padding:1rem; font-size:.9rem; }
#panel h2 { margin:.25rem 0 .75rem; font-size:1rem; color:#c7a25b; }
#panel h3 { margin:1rem 0 .4rem; font-size:.85rem; color:#9c8055; text-transform:uppercase; letter-spacing:.08em; }
.muted { color:#7a6a55; font-size:.8rem; }
.small { font-size:.75rem; }
.legend { list-style:none; padding:0; margin:0; }
.legend li { display:flex; align-items:center; gap:.55rem; padding:.15rem 0; }

.dot { width:.7rem; height:.7rem; border-radius:50%; border:1.5px solid #fff8; display:inline-block; }
.dot.lvl-1 { background:#7a6a55; border-style:dashed; }
.dot.lvl-2 { background:#c7a25b; }
.dot.lvl-3 { background:#6fb26f; }
.dot.lvl-4 { background:#d66a4a; }
.dot.lvl-dm { background:transparent; border:1.5px dashed #8b7bff; }

#knownList { list-style:none; padding:0; margin:0; }
#knownList li { padding:.25rem .35rem; border-radius:3px; cursor:pointer; display:flex; align-items:center; gap:.5rem; }
#knownList li:hover { background:#241b14; }
#knownList li .tag { font-size:.7rem; color:#7a6a55; margin-left:auto; }

#panelDetail textarea { width:100%; background:#241b14; color:#e8ddc7; border:1px solid #4a3a2a; padding:.4rem; border-radius:3px; font:inherit; }
#panelDetail button { background:#241b14; color:#e8ddc7; border:1px solid #4a3a2a; padding:.35rem .7rem; border-radius:3px; cursor:pointer; margin-right:.4rem; margin-top:.4rem; font:inherit; }
#panelDetail button:hover { background:#33261b; }
#closeDetail { background:transparent; border:0; color:#9c8055; padding:0; margin-bottom:.5rem; }

/* SVG markers */
.marker { cursor:pointer; transition: stroke-width .12s ease-out; }
.marker:hover { stroke: #fff !important; stroke-width: 5 !important; }
.marker-label-rumored { font-style: italic; opacity: 0.75; }
.marker-label { font: 500 13px system-ui, -apple-system, sans-serif; fill:#fff; paint-order: stroke; stroke:#0006; stroke-width:1.5px; pointer-events:none; }
.region-fill { cursor:pointer; }
.region-fill:hover { fill-opacity: 0.45 !important; }
.region-label {
  font: 700 64px "Palatino", "Iowan Old Style", Georgia, serif;
  fill: #f5e9c8;
  paint-order: stroke;
  stroke: #000a;
  stroke-width: 5px;
  letter-spacing: 0.15em;
  pointer-events: none;
  opacity: 0.9;
}
/* Travel paths — bright punchy yellow so the party's route reads at a
   glance against the muted base map. The glow filter makes the line pop. */
.travel-path {
  fill:none; stroke:#ffd400; stroke-width:6; stroke-linecap:round;
  opacity:1; pointer-events:none;
  filter: drop-shadow(0 0 6px #ffd40088);
}
.travel-endpoint {
  fill:#ffd400; pointer-events:none;
  filter: drop-shadow(0 0 5px #ffd40099);
}
/* Bright yellow "you have been here" ring wrapped around any visited marker
   (level ≥ 3). Rendered by app.js just behind the filled marker circle. */
.visited-ring {
  fill: none; stroke: #ffd400; stroke-width: 5;
  filter: drop-shadow(0 0 6px #ffd400bb);
  pointer-events: none;
}
.named-feature { cursor: pointer; }
.named-feature:hover { stroke-width: 4 !important; stroke-opacity: 1 !important; }
.feature-label { font: italic 500 20px "Palatino", Georgia, serif; fill: #e8c674; paint-order: stroke; stroke: #0008; stroke-width: 1.5px; pointer-events: none; }
.sub-region { cursor: pointer; transition: fill-opacity .15s ease-out; }
.sub-region:hover { fill-opacity: 0.22 !important; stroke-opacity: 1 !important; }
.sub-region-label {
  font: 600 28px "Palatino", Georgia, serif;
  letter-spacing: 0.06em;
  paint-order: stroke;
  stroke: #0006;
  stroke-width: 1px;
  pointer-events: none;
  opacity: 0.85;
}
.river-label { fill: #8cc7ff; }
.road-label { fill: #ddb080; }
.event-list, .tie-list, .npc-list { padding-left: 1.1rem; margin:.4rem 0; font-size:.85rem; }
.event-list li, .tie-list li, .npc-list li { margin-bottom:.4rem; line-height:1.4; }
.lead { font-size:.95rem; color:#e8ddc7; margin: .2rem 0 .8rem; padding:.5rem .7rem; background:#221910; border-left: 3px solid #c7a25b; border-radius: 2px; }
.campaign-summary { font-size:.88rem; color:#d5c8a7; line-height:1.45; margin:.4rem 0 .8rem; padding:.3rem 0; border-bottom: 1px dashed #3a2d21; }
.lead.muted { border-left-color:#4a3a2a; }
.canon-details { margin-top: 1rem; border-top: 1px dashed #4a3a2a; padding-top:.5rem; }
.canon-details summary { cursor: pointer; color:#9c8055; font-size:.78rem; text-transform: uppercase; letter-spacing:.06em; padding:.2rem 0; }
.canon-details summary:hover { color:#c7a25b; }
.canon-body { font-size:.82rem; color:#b5a88a; padding:.4rem 0; line-height:1.45; }
.canon-body p { margin:.35rem 0; }
.wiki-details { margin-top: 1rem; border-top: 1px dashed #4a3a2a; padding-top:.5rem; }
.wiki-details summary { cursor: pointer; color:#9c8055; font-size:.78rem; text-transform: uppercase; letter-spacing:.06em; padding:.2rem 0; }
.wiki-details summary:hover { color:#c7a25b; }
.wiki-summary { font-size:.82rem; color:#c4b590; line-height:1.45; padding:.3rem 0; }
.wiki-full { font-size:.8rem; color:#a99d7f; line-height:1.45; padding-top:.3rem; }
.wiki-full p { margin:.3rem 0; }
.wiki-full h4 { font-size:.82rem; margin: .6rem 0 .2rem; color:#c7a25b; text-transform: uppercase; letter-spacing:.05em; }
.wiki-full h5 { font-size:.78rem; margin: .45rem 0 .15rem; color:#9c8055; font-weight:600; }
.wiki-full a { color:#c7a25b; text-decoration: none; border-bottom: 1px dotted #4a3a2a; }
.wiki-full a:hover { color:#e8c674; }
.wiki-full img { max-width: 100%; height: auto; border-radius: 3px; margin: .4rem 0; }
.wiki-full ul, .wiki-full ol { padding-left: 1.1rem; margin: .3rem 0; }
.wiki-full li { margin: .15rem 0; }
.wiki-full table { display: none; }  /* hide leftover wiki tables (sidebars, navboxes) */
.wiki-full aside { display: none; }  /* hide portable-infobox asides */
.wiki-load-btn { background:#241b14; color:#c7a25b; border:1px solid #4a3a2a; padding:.25rem .6rem; border-radius:2px; font-size:.72rem; cursor:pointer; margin-top:.4rem; }
.wiki-load-btn:hover { background:#33261b; }
.terrain-feature { cursor: pointer; transition: fill-opacity .15s ease-out; }
.terrain-feature:hover { fill-opacity: 0.45 !important; stroke-width: 4 !important; }
.terrain-highlight { animation: terrain-pulse 1.3s ease-in-out infinite; }
@keyframes terrain-pulse {
  0%, 100% { fill-opacity: 0.55; }
  50%      { fill-opacity: 0.75; }
}

/* Discover tool */
#viewport.discover { cursor: crosshair; }
.discover-preview { pointer-events: none; animation: discover-pulse 1.2s ease-in-out infinite; }
.discover-seed { pointer-events: none; }
@keyframes discover-pulse {
  0%, 100% { fill-opacity: 0.28; }
  50%      { fill-opacity: 0.5; }
}
#panelDiscover input[type=range] { margin: .4rem 0; }
#panelDiscover input[type=text],
#panelDiscover select { width: 100%; margin-top: .2rem; background:#241b14; color:#e8ddc7; border:1px solid #4a3a2a; padding:.35rem; border-radius:3px; font:inherit; }
#panelDiscover label { display:block; margin: .6rem 0; }
#panelDiscover button { background:#241b14; color:#e8ddc7; border:1px solid #4a3a2a; padding:.4rem .8rem; border-radius:3px; cursor:pointer; margin-right:.4rem; margin-top:.4rem; font:inherit; }
#panelDiscover button:hover { background:#33261b; }
#discSave { background:#3a5d3a !important; }
#discSave:hover { background:#4a7d4a !important; }
.preset-row { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem; }
.presetBtn { font-size:.78rem; padding:.3rem .5rem !important; }

/* Terrain types dropdown in nav */
.dropdown { position: relative; }
.dropdown summary { list-style: none; cursor: pointer; user-select: none; padding:.2rem .5rem; border:1px solid #4a3a2a; border-radius:3px; background:#241b14; color:#e8ddc7; font-size:.8rem; }
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown[open] summary { background:#33261b; }
.dropdown-content { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 180px; margin-top:.2rem; padding:.5rem; background:#1f1812; border:1px solid #4a3a2a; border-radius:4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.dropdown-head { display:flex; gap:.3rem; padding-bottom:.35rem; border-bottom:1px solid #352a21; margin-bottom:.35rem; }
.dropdown-content label { display:flex; align-items:center; gap:.4rem; padding:.15rem .25rem; cursor:pointer; font-size:.82rem; }
.dropdown-content label:hover { background:#2a1f16; border-radius:3px; }
.dropdown-content label input { margin:0; }
.tinyBtn, .soloBtn { background:#2a1f16; color:#c7a25b; border:1px solid #4a3a2a; padding:.1rem .35rem; border-radius:2px; font-size:.7rem; cursor:pointer; }
.tinyBtn:hover, .soloBtn:hover { background:#3a2d21; color:#e8ddc7; }
.soloBtn { margin-left:auto; }