/* ==========================================================================
   Forever Dual Gathering — Routes
   "Map table" restyle: dark leather-and-gold panels set on a parchment table.

   To retheme, change the tokens in :root. The ember/forge alternative
   (charcoal + copper) is listed at the bottom of the token block.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* surfaces */
  --wood: #120d08;          /* page + deepest wells */
  --tome: #2a1a10;          /* panel leather */
  --tome-deep: #1a1109;     /* inputs, wells */
  --tome-raise: #33220f;    /* hover / raised rows */
  --tome-active: #3a2a12;   /* selected controls */
  --table: #d9d6bf;         /* parchment around and under the map */
  --parchment: #e6d6ad;
  --parchment-ink: #2b1d0e;
  --parchment-soft: #5a4423;

  /* lines */
  --line: #5a4320;
  --line-strong: #7a5a2a;
  --edge: #6e5428;

  /* accents */
  --gold: #d8b04e;
  --gold-light: #f0cf7a;
  --gold-dim: #b28a3c;
  --herb: #7fb27a;
  --herb-bg: #1d2a1a;
  --ore: #d68a4a;
  --ore-bg: #2e1c10;
  --danger: #edb7a3;

  /* text */
  --ink: #fff7e8;
  --muted: #dfd2b7;
  --faint: #c9b995;

  /* type */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;

  /* layout */
  --top: 66px;
  --gap: 14px;

  /* gold corner brackets, painted straight onto a panel's background */
  --corners:
    linear-gradient(var(--gold), var(--gold)) left top / 20px 3px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) left top / 3px 20px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) right bottom / 20px 3px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) right bottom / 3px 20px no-repeat border-box;
  --corners-all:
    var(--corners),
    linear-gradient(var(--gold), var(--gold)) right top / 20px 3px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) right top / 3px 20px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) left bottom / 20px 3px no-repeat border-box,
    linear-gradient(var(--gold), var(--gold)) left bottom / 3px 20px no-repeat border-box;
  --frame: inset 0 0 0 4px var(--tome), inset 0 0 0 5px var(--line-strong);

  /* ---- Forge alternative (swap these in for a charcoal + copper look) ----
  --wood:#0d0c0b; --tome:#1b1917; --tome-deep:#110f0e; --tome-raise:#2a1f17;
  --tome-active:#33200f; --line:#4a3a2c; --line-strong:#8a5a30; --edge:#5a4636;
  --gold:#c97a3e; --gold-light:#ffb27a; --gold-dim:#c97a3e;
  --ink:#ece5da; --muted:#b0a595; --faint:#8a7d6c;
  ----------------------------------------------------------------------- */
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wood);color:var(--ink);font:500 16px/1.55 var(--font);overflow:hidden;-webkit-font-smoothing:auto}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;color:inherit}
button:disabled{cursor:not-allowed;opacity:.4}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
::selection{background:var(--gold);color:var(--parchment-ink)}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--gold-light);letter-spacing:.02em}
h1{font-size:25px;line-height:1.2;margin:10px 0 10px}
h2{font-size:30px;line-height:1.15;margin:3px 0 0}
h3{font-size:20px;line-height:1.3;margin:0 0 9px}
h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin:0;color:var(--gold)}

.eyebrow{display:block;font:600 10.5px/1.3 var(--display);letter-spacing:.3em;color:var(--gold);text-transform:uppercase}

/* scrollbars */
.planner-panel,.inspector-panel,.waypoint-list,.cave-sidebar,dialog{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

/* ---------- top bar ---------- */
.topbar{height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 24px;background:#160f09;border-bottom:1px solid var(--gold-dim);box-shadow:0 1px 0 #000,0 6px 20px #0006;position:relative;z-index:3}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{border-radius:10px;box-shadow:0 0 0 1px var(--line-strong)}
.brand strong{display:block;font:600 21px/1.1 var(--display);letter-spacing:.32em;color:var(--gold-light)}
.brand small{display:block;font:italic 500 13px/1.2 var(--serif);letter-spacing:.3em;color:var(--muted);text-transform:lowercase;margin-top:2px}
.brand-divider{height:30px;width:1px;background:var(--line-strong);margin:0 10px}
.brand-product{font:500 14px var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

nav{height:100%;display:flex;align-items:stretch;gap:30px}
nav button{padding:0 2px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:600 12.5px var(--display);letter-spacing:.16em;text-transform:uppercase;transition:color .15s}
nav button:hover{color:var(--ink)}
nav .nav-active{color:var(--gold-light);border-bottom-color:var(--gold)}
nav span{font:600 11px var(--serif);letter-spacing:0;background:var(--tome-active);color:var(--gold-light);padding:1px 7px;border:1px solid var(--line-strong);margin-left:6px}
.header-actions{display:flex;gap:10px}

/* ---------- buttons ---------- */
.button{min-height:40px;padding:9px 18px;display:inline-flex;gap:9px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:0;font:600 12px var(--display);letter-spacing:.16em;text-transform:uppercase;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button:active:not(:disabled){transform:translateY(0)}
.gold{background:linear-gradient(#e8c670,#a8802f);color:#2a1c08;border-color:var(--gold-light);box-shadow:inset 0 1px 0 #fff6,0 2px 0 #00000055}
.gold:hover:not(:disabled){background:linear-gradient(#f3d58b,#b98d36)}
.secondary{background:transparent;border-color:var(--edge);color:var(--ink)}
.secondary:hover:not(:disabled){background:var(--tome-raise);border-color:var(--gold-dim)}
.full{width:100%;margin:0 0 12px}

/* ---------- workspace ---------- */
.workspace{display:grid;grid-template-columns:330px minmax(330px,1fr) 316px;gap:var(--gap);padding:var(--gap);height:calc(100dvh - var(--top));min-height:560px;background:radial-gradient(ellipse at 50% 40%,#e6e1c8,var(--table) 70%);overflow:hidden}

.planner-panel,.inspector-panel{position:relative;min-height:0;overflow-y:auto;background:var(--corners),var(--tome);border:1px solid var(--gold);box-shadow:var(--frame),0 12px 34px #0006}
.planner-panel{display:flex;flex-direction:column}
.inspector-panel{padding:22px 22px 18px}

/* ---------- planner panel ---------- */
.panel-heading{padding:28px 26px 20px;text-align:center}
.panel-heading h1{margin:10px 0 10px}
.panel-heading p{margin:0;color:var(--muted);font:italic 500 16px/1.5 var(--serif)}
/* Keep explanatory copy readable at a glance; reserve serif italics for decoration. */
.panel-heading p,.source-card small,.selection-count,.check-row small,.fine-print,.mode-note,.panel-footer,.route-intro p,.inspector-note p,.planning-status small,.dialog-heading p,.file-drop small,.library-item small,.library-empty,.cave-status{font-family:var(--font);font-style:normal;font-size:15px;line-height:1.6;color:var(--ink)}
.panel-heading::after{content:"";display:block;height:9px;margin-top:18px;background:
  radial-gradient(circle at 50% 50%,var(--gold) 0 3.5px,transparent 4px),
  linear-gradient(var(--line-strong),var(--line-strong)) left center/calc(50% - 14px) 1px no-repeat,
  linear-gradient(var(--line-strong),var(--line-strong)) right center/calc(50% - 14px) 1px no-repeat}
.panel-body{padding:4px 26px 16px}

.field{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;font:600 10.5px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
input:not([type=checkbox],[type=range],[type=file]),select,textarea{width:100%;min-height:40px;padding:8px 12px;background:var(--tome-deep);border:1px solid var(--edge);border-radius:0;color:var(--ink);font:600 16.5px var(--serif);letter-spacing:0;text-transform:none;transition:border-color .15s,box-shadow .15s}
select{appearance:none;padding-right:34px;background:var(--tome-deep) 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='M1 1.5l5 5 5-5' fill='none' stroke='%23d8b04e' stroke-width='1.8'/%3E%3C/svg%3E") right 12px center/12px 8px no-repeat;cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--faint);font-style:italic}
input:focus,select:focus,textarea:focus{border-color:var(--gold-light);box-shadow:0 0 0 1px var(--gold-light)}
textarea{resize:vertical;line-height:1.45}
option{background:var(--tome);color:var(--ink)}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 0 11px;font:600 10.5px var(--display);letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.text-button{border:0;background:none;padding:2px 3px;color:var(--gold-light);font:600 14px var(--serif)}
.text-button:hover{text-decoration:underline;text-underline-offset:3px}

/* checkboxes: gold diamond */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;margin:0;flex:none;position:relative;background:var(--tome-deep);border:1px solid var(--edge);cursor:pointer;transition:border-color .15s}
input[type=checkbox]:hover:not(:disabled){border-color:var(--gold)}
input[type=checkbox]:checked{border-color:var(--gold)}
input[type=checkbox]:checked::after{content:"";position:absolute;inset:3.5px;background:var(--gold-light);transform:rotate(45deg) scale(.85)}
input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}

.source-card{display:flex;gap:11px;align-items:center;margin:8px 0;padding:11px 12px;background:var(--tome-deep);border:1px solid var(--line-strong);cursor:pointer;transition:border-color .15s,background .15s}
.source-card:hover{border-color:var(--gold-dim)}
.source-card:has(input:not(:checked)){background:transparent;border-color:var(--line)}
.source-card strong{display:block;font:600 16.5px/1.2 var(--serif)}
.source-card small{display:block;font:italic 500 13.5px/1.3 var(--serif);color:var(--muted)}
.source-card b{margin-left:auto;font:600 14px var(--display);color:var(--gold-light)}
.source-symbol{font-size:19px;line-height:1;color:var(--gold)}
.source-symbol.personal{color:var(--herb)}

.resource-switches{display:flex;gap:7px}
.resource{flex:1;padding:8px 4px;background:transparent;border:1px solid var(--edge);border-radius:0;color:var(--faint);font:600 11.5px var(--display);letter-spacing:.1em;text-transform:uppercase;transition:background .15s,border-color .15s}
.resource span{font-size:15px;display:inline-block;margin-right:3px}
.resource:hover{border-color:var(--gold-dim);color:var(--ink)}
.resource.active.herb{color:#c5e8bf;border-color:var(--herb);background:var(--herb-bg)}
.resource.active.ore{color:#f4c9a2;border-color:var(--ore);background:var(--ore-bg)}
.resource.active:not(.herb,.ore){background:var(--tome-active);border-color:var(--gold-dim);color:var(--gold-light)}

.search-field{display:flex;align-items:center;gap:7px;margin:12px 0 0;padding:0 11px;background:var(--tome-deep);border:1px solid var(--edge);transition:border-color .15s}
.search-field:focus-within{border-color:var(--gold-light)}
.search-field span{font-size:21px;color:var(--gold-dim)}
.search-field input:not([type=checkbox],[type=range],[type=file]){padding:8px 0;border:0;box-shadow:none;background:transparent;min-height:38px;font-size:16px}
.selection-count{margin:9px 0 0;font:italic 500 14.5px var(--serif);color:var(--muted)}
.selection-count span{color:var(--gold-light);font-style:normal;font-weight:700}

.segmented{display:flex;gap:0;border:1px solid var(--edge);background:var(--tome-deep)}
.segmented button{flex:1;padding:9px 6px;border:0;background:none;color:var(--faint);font:600 11.5px var(--display);letter-spacing:.14em;text-transform:uppercase;transition:background .15s,color .15s}
.segmented button+button{border-left:1px solid var(--edge)}
.segmented .active{background:var(--tome-active);color:var(--gold-light)}

.group-field{margin:18px 0}
.group-field>span{display:flex;justify-content:space-between;align-items:baseline}
.group-field output{font:600 15px var(--display);letter-spacing:.02em;color:var(--gold-light);text-transform:none}
.node-size-field{margin-top:20px;margin-bottom:6px}
input[type=range]{width:100%;height:6px;margin:10px 0 4px;accent-color:var(--gold);cursor:pointer}

.check-row{display:flex;align-items:flex-start;gap:11px;margin:16px 0;cursor:pointer}
.check-row input{margin-top:2px}
.check-row strong{display:block;font:600 16.5px/1.25 var(--serif)}
.check-row small{display:block;margin-top:2px;font:italic 500 13.5px/1.3 var(--serif);color:var(--muted)}
em{font:600 9px var(--display);font-style:normal;letter-spacing:.14em;color:var(--gold-light);border:1px solid var(--gold-dim);padding:2px 5px;margin-left:6px;vertical-align:2px}
.jump-row{margin:16px 0 20px}
.jump-row:has(:disabled){opacity:.5}

.fine-print{margin:16px 0 0;font:italic 500 14px/1.55 var(--serif);color:var(--muted)}
.mode-note{margin:12px 0 0;font:italic 500 14px/1.5 var(--serif);color:var(--muted);text-align:center}
.build-button{width:100%;min-height:50px;margin-top:10px;font-size:14px;letter-spacing:.22em}

.zone-cave-list{display:flex;flex-direction:column;gap:6px}
.cave-zone-button,.cave-node-button{display:block;padding:9px 12px;background:var(--tome-deep);border:1px solid var(--line-strong);border-radius:0;color:var(--ink);font:600 16px var(--serif);text-align:left;transition:border-color .15s,background .15s}
.cave-zone-button:hover,.cave-node-button:hover{border-color:var(--gold-light);background:var(--tome-raise)}
.cave-zone-button::after{content:"▸";float:right;color:var(--gold)}

.panel-footer{display:flex;align-items:center;gap:8px;margin-top:auto;padding:13px 22px;border-top:1px solid var(--line);font:italic 500 14px var(--serif);color:var(--muted)}
.panel-footer .text-button{margin-left:auto}
.status-dot{width:7px;height:7px;background:var(--herb);transform:rotate(45deg)}
.mobile-library{display:none}

/* ---------- map ---------- */
.map-panel{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--tome);border:1px solid var(--gold);box-shadow:0 12px 34px #0006}
.map-panel::before,.map-panel::after{content:"";position:absolute;pointer-events:none}
.map-panel::before{inset:0;z-index:7;background:var(--corners-all)}
.map-panel::after{inset:4px;z-index:6;border:1px solid var(--line-strong)}

.map-topbar{height:84px;padding:0 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--tome);color:var(--ink);border-bottom:1px solid var(--gold-dim);z-index:2}
.map-topbar .eyebrow{font-size:10px;color:var(--gold-dim)}
.map-topbar h2{font-size:30px}
.map-top-actions{display:flex;align-items:center;gap:14px}
.map-style-picker{display:flex;flex-direction:column;gap:4px;font:600 9.5px var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim)}
.map-style-picker select{min-width:166px;min-height:36px;padding:6px 30px 6px 12px;font:600 15px var(--serif);cursor:pointer;background-color:var(--tome-deep);border-color:var(--edge)}
.map-mode{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line-strong);background:var(--tome-deep);color:var(--muted);font:600 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase}
.map-mode i{width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.icon-button{display:grid;place-content:center;width:34px;height:34px;padding:0;border:1px solid var(--edge);border-radius:0;background:transparent;color:var(--gold-light);font-size:18px;line-height:1;transition:background .15s,border-color .15s}
.icon-button:hover:not(:disabled){background:var(--tome-raise);border-color:var(--gold-dim)}
.map-topbar .icon-button{border-color:var(--edge);color:var(--gold-light)}

.map-stage{position:relative;flex:1;min-height:280px;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#ece7d5,#d3d0b6)}
canvas{display:block;width:100%;height:100%;cursor:grab;outline:none}
canvas[data-tool=draw]{cursor:crosshair}
canvas[data-tool=add]{cursor:cell}

.map-layer-options{position:absolute;top:4px;left:18px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 100px)}
.map-layer-options label{display:flex;align-items:center;gap:8px;padding:7px 11px;background:#1a1109ee;border:1px solid var(--line-strong);color:var(--muted);font:600 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 9px #0003;transition:border-color .15s,color .15s}
.map-layer-options label:hover{border-color:var(--gold-dim);color:var(--ink)}
.map-layer-options label:has(input:checked){background:var(--tome-active);border-color:var(--gold);color:var(--gold-light)}
.map-layer-options input{width:14px;height:14px}

.tracking-range-status{position:absolute;left:18px;top:50px;max-width:calc(100% - 100px);padding:7px 12px;background:#1a1109ee;border:1px solid var(--line-strong);color:var(--ink);font:italic 500 14.5px/1.4 var(--serif);pointer-events:none}
.map-art-status{position:absolute;left:50%;top:70px;transform:translateX(-50%);max-width:80%;padding:8px 16px;background:#1a1109ee;color:var(--ink);border:1px solid var(--gold-dim);font:italic 500 15px var(--serif);text-align:center;pointer-events:none}
.map-notice{position:absolute;left:18px;right:70px;top:16px;max-width:560px;padding:11px 15px;background:#f5edcff2;color:var(--parchment-ink);border:1px solid var(--gold-dim);box-shadow:0 2px 12px #5045352e;font:600 15px/1.45 var(--serif)}

.map-compass{position:absolute;right:24px;top:20px;width:30px;text-align:center;color:var(--parchment-soft);font:600 11px var(--display);pointer-events:none}
.map-compass svg{width:30px;height:46px}
.zoom-controls{position:absolute;right:24px;bottom:78px;display:flex;flex-direction:column;border:1px solid var(--gold-dim);background:#1a1109ee;box-shadow:0 2px 10px #0004}
.zoom-controls button{width:36px;height:36px;border:0;background:transparent;color:var(--gold-light);font-size:20px;transition:background .15s}
.zoom-controls button:hover{background:var(--tome-raise)}
.zoom-controls button+button{border-top:1px solid var(--line-strong)}
.map-scale{position:absolute;left:24px;bottom:78px;min-width:70px;padding-bottom:3px;border-bottom:2px solid var(--parchment-soft);text-align:center;color:var(--parchment-soft);font:italic 600 13px var(--serif);pointer-events:none}
.map-watermark{position:absolute;bottom:48px;right:24px;font:600 8px var(--display);letter-spacing:.3em;color:var(--parchment-soft);opacity:.7;pointer-events:none}
.map-coordinates{position:absolute;bottom:12px;right:20px;color:var(--parchment-soft);font:600 12px var(--serif);font-variant-numeric:tabular-nums;pointer-events:none}

.map-stage[data-style=terrain] .map-coordinates,.map-stage[data-style=terrain] .map-scale,.map-stage[data-style=terrain] .map-watermark{color:#f6efd0;text-shadow:0 1px 3px #000,0 0 6px #000}
.map-stage[data-style=terrain] .map-scale{border-color:#f0e9c2}
.map-stage[data-style=terrain] .map-compass{color:#f6efd0;text-shadow:0 1px 3px #000;filter:drop-shadow(0 1px 2px #f2e6a4)}

.map-tools{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0;padding:0;background:#1a1109f2;border:1px solid var(--gold);box-shadow:0 8px 24px #0006;white-space:nowrap}
.map-tools button{height:40px;padding:0 15px;border:0;background:none;color:var(--muted);font:600 14px var(--display);transition:background .15s,color .15s}
.map-tools button span{margin-left:7px;font:600 11px var(--display);letter-spacing:.14em;text-transform:uppercase}
.map-tools button:hover:not(:disabled){color:var(--ink);background:var(--tome-raise)}
.map-tools .active{background:var(--tome-active);color:var(--gold-light)}
.map-tools>span{height:24px;width:1px;margin:0 3px;background:var(--line-strong)}

.map-bottom{height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 24px;background:var(--tome);border-top:1px solid var(--gold-dim);color:var(--muted);font:italic 500 14px var(--serif);z-index:2}
.legend{display:flex;gap:18px}
.legend>span{display:flex;gap:7px;align-items:center;font-style:normal;font:600 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase}
.legend i{width:9px;height:9px;display:inline-block}
.legend-herb{background:var(--herb);border-radius:50%}
.legend-ore{background:var(--ore);transform:rotate(45deg)}
.legend-route{background:var(--gold-light);width:18px!important;height:3px!important;transform:none!important}
.map-hint{font-size:14px}

/* ---------- inspector ---------- */
.inspector-header .eyebrow{text-align:center}
.inspector-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border:1px solid var(--edge);background:var(--tome-deep)}
.inspector-tabs button{padding:8px 4px;border:0;background:none;color:var(--faint);font:600 11px var(--display);letter-spacing:.12em;text-transform:uppercase;transition:background .15s,color .15s}
.inspector-tabs button+button{border-left:1px solid var(--edge)}
.inspector-tabs .active{background:var(--tome-active);color:var(--gold-light)}

.route-intro{padding:24px 0 20px;text-align:center}
.route-icon{display:grid;place-content:center;width:50px;height:50px;margin:0 auto 16px;border:1px solid var(--gold-dim);border-radius:50%;background:radial-gradient(var(--tome-active),transparent);color:var(--gold-light);font-size:26px;box-shadow:0 0 0 4px var(--tome),0 0 0 5px var(--line-strong)}
.route-intro h3{font-size:22px;margin-bottom:8px;overflow-wrap:anywhere}
.route-intro p{max-width:240px;margin:0 auto 14px;font:italic 500 15.5px/1.45 var(--serif);color:var(--muted)}
.route-badge{display:inline-block;padding:4px 11px;border:1px solid var(--line-strong);background:var(--tome-deep);color:var(--muted);font:600 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase}

.route-stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);background:var(--tome-deep)}
.route-stats>div{padding:14px 10px;text-align:center}
.route-stats>div:nth-child(2){border-left:1px solid var(--line-strong)}
.route-stats>div:last-child{grid-column:span 2;padding:11px 10px;border-top:1px solid var(--line-strong)}
.route-stats strong{display:block;font:600 26px/1.15 var(--display);color:var(--gold-light)}
.route-stats small{display:block;margin-top:5px;font:600 9px var(--display);letter-spacing:.16em;color:var(--muted)}
.route-stats>div:last-child strong{display:inline-block;margin-right:9px;font-size:20px}
.route-stats>div:last-child small{display:inline-block;margin-top:0}

details{margin:14px 0 0;border:1px solid var(--line-strong);background:var(--tome-deep)}
summary{padding:9px 12px;cursor:pointer;font:600 10.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--gold);transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
details>*:not(summary){margin-left:12px;margin-right:12px}
details>.fine-print{margin-top:2px}
details>:last-child{margin-bottom:12px}
details .cave-node-button{margin-bottom:6px}
.route-unreachable summary{color:var(--ore)}

.waypoints-heading{display:flex;justify-content:space-between;align-items:center;margin:24px 0 6px;padding-bottom:8px;border-bottom:1px solid var(--line-strong)}
.waypoints-heading>span{padding:1px 9px;border:1px solid var(--line-strong);background:var(--tome-deep);color:var(--gold-light);font:600 12px var(--display)}
.waypoint-list{max-height:280px;overflow:auto}
.empty-waypoints{padding:26px 8px;text-align:center;color:var(--muted)}
.empty-waypoints>span{font-size:27px;color:var(--gold-dim)}
.empty-waypoints p{margin:10px 0 3px;font:600 16px var(--serif)}
.empty-waypoints small{font:italic 500 14px var(--serif);color:var(--faint)}
.waypoint{display:flex;gap:11px;align-items:center;padding:8px 0;border-bottom:1px dotted var(--line-strong)}
.waypoint-index{flex-shrink:0;display:grid;place-content:center;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:50%;color:var(--gold);font:700 10.5px var(--display)}
.waypoint-text{flex:1;font:600 16px var(--serif)}
.waypoint-text small{display:block;color:var(--muted);font:500 13.5px var(--serif);font-variant-numeric:tabular-nums}
.waypoint button{padding:2px 6px;border:0;background:none;color:var(--faint);font-size:16px}
.waypoint button:hover{color:var(--danger)}
.save-button{width:100%;margin:16px 0 6px;border-color:var(--gold);color:var(--gold-light)}
.inspector-note{display:flex;align-items:flex-start;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-strong);color:var(--muted)}
.inspector-note span{color:var(--gold);font-size:17px}
.inspector-note p{margin:0;font:italic 500 14.5px/1.5 var(--serif)}

.node-empty{padding:60px 10px;text-align:center}
.node-empty>span{font-size:42px;color:var(--herb)}
.node-empty h3{margin-top:16px}
.node-empty p{font:italic 500 16px/1.45 var(--serif);color:var(--muted)}
#node-form{margin-top:22px}
.node-detail-heading{display:flex;gap:12px;align-items:center;margin:16px 0}
.node-detail-heading img{flex-shrink:0;border:0;border-radius:0;clip-path:inset(6.25%);box-shadow:0 0 0 1px var(--gold-dim)}
.node-detail-heading h3{margin:0!important}
.coordinate-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- toast + planning status ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;max-width:90%;padding:12px 22px;background:linear-gradient(#ecd59a,#d9b96a);color:var(--parchment-ink);border:1px solid var(--gold-light);box-shadow:0 8px 30px #0006,inset 0 0 0 3px #ecd59a,inset 0 0 0 4px #b28a3c;font:600 16px var(--serif)}
.planning-status{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:10000;display:flex;gap:16px;align-items:center;width:min(440px,calc(100% - 32px));padding:18px 22px;background:var(--tome);border:1px solid var(--gold);box-shadow:var(--frame),0 10px 34px #000a;pointer-events:none}
.planning-status strong{font:600 13px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.planning-status p{margin:4px 0;color:var(--ink);font:500 15.5px var(--serif)}
.planning-status small{color:var(--muted);font:italic 500 14px var(--serif)}
.planning-spinner{flex-shrink:0;width:26px;height:26px;border:3px solid #d8b04e33;border-top-color:var(--gold-light);border-radius:50%;animation:planning-spin 1s linear infinite}
@keyframes planning-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.planning-spinner{animation:none}.button,.button:hover:not(:disabled){transition:none;transform:none}}

/* ---------- dialogs ---------- */
dialog{width:min(560px,calc(100% - 30px));max-height:88dvh;padding:28px;background:var(--corners),var(--tome);color:var(--ink);border:1px solid var(--gold);border-radius:0;box-shadow:var(--frame),0 22px 90px #000c}
dialog::backdrop{background:#0b0704cc;backdrop-filter:blur(4px)}
.dialog-heading{position:relative;margin-bottom:22px;padding-right:10px}
.dialog-heading h2{margin:9px 34px 10px 0;font-size:28px}
.dialog-heading p{margin:0;font:italic 500 16.5px/1.5 var(--serif);color:var(--muted)}
.close-dialog{position:absolute;right:-6px;top:-6px;border-color:transparent;font-size:24px;color:var(--muted)}
.close-dialog:hover:not(:disabled){color:var(--gold-light)}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

.file-drop{display:flex;flex-direction:column;margin-bottom:20px;padding:26px 14px;background:var(--tome-deep);border:1px dashed var(--gold-dim);text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.file-drop:hover{background:var(--tome-raise);border-color:var(--gold-light)}
.file-drop input{order:4;width:100%;margin:12px 0 0;font-size:13px;color:var(--muted)}
.file-drop>span{font-size:30px;color:var(--gold)}
.file-drop strong{font:600 17px var(--serif)}
.file-drop small{margin-top:5px;font:italic 500 14px var(--serif);color:var(--muted)}
.error-message{color:var(--danger);font:600 15px/1.5 var(--serif)}
.error-message:empty{display:none}
.import-preview{margin-bottom:14px;padding:13px 16px;background:var(--tome-deep);border:1px solid var(--line-strong);font:500 15.5px/1.8 var(--serif)}
.export-code-field{margin-top:12px}
.export-code-field textarea{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:0;text-transform:none}
.info-card{margin-bottom:12px;padding:16px 18px;background:var(--tome-deep);border:1px solid var(--line-strong)}
.info-card h3{font-size:18px}
.info-card p{margin:8px 0 14px;font:500 16px/1.55 var(--serif);color:var(--muted)}
.info-card p:last-child{margin-bottom:0}
.library-item{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px dotted var(--line-strong)}
.library-item button:first-child{flex:1;padding:0;border:0;background:none;color:var(--ink);font:600 17px var(--serif);text-align:left}
.library-item button:first-child:hover{color:var(--gold-light)}
.library-item small{display:block;margin-top:2px;color:var(--muted);font:italic 500 14px var(--serif)}
.library-item>button:last-child{border:0;background:none;color:var(--faint);font:600 12px var(--display);letter-spacing:.1em}
.library-item>button:last-child:hover{color:var(--danger)}
.library-empty{padding:28px 10px;text-align:center;color:var(--muted);font:italic 500 16px var(--serif)}
#library-new{margin-top:20px}

/* cave dialog: the cave canvas keeps its cool slate floor so rooms stay readable */
.cave-dialog{width:min(1120px,calc(100vw - 28px));max-width:1120px}
.cave-dialog .dialog-heading{margin-bottom:14px}
.cave-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:9px;margin-bottom:12px}
.cave-toolbar>.field{flex:1;min-width:170px;margin:0}
.cave-toolbar .button{padding:9px 13px;font-size:11px;letter-spacing:.12em}
.cave-workspace{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px}
.cave-map-stage{position:relative;height:480px;min-width:0;overflow:hidden;background:#17282c;border:1px solid var(--gold-dim);box-shadow:inset 0 0 0 4px #17282c,inset 0 0 0 5px #35555a}
.cave-map-stage canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.cave-sidebar{max-height:480px;overflow:auto;padding-left:14px;border-left:1px solid var(--line-strong)}
.cave-sidebar h3{margin-bottom:12px;font-size:18px}
.cave-sidebar h3 span{font:600 13px var(--display);color:var(--gold)}
.cave-sidebar .button{margin-top:12px;padding:9px 6px;font-size:10px;line-height:1.5;letter-spacing:.1em}
.cave-sidebar>p{font:500 15.5px var(--serif);color:var(--muted)}
.cave-sidebar>p strong{color:var(--gold-light);font-family:var(--display)}
.cave-node-button{width:100%;margin-bottom:6px;font-size:15px}
.cave-status{min-height:20px;margin:12px 0 0;font:italic 500 15.5px/1.5 var(--serif);color:var(--muted)}
.cave-status.error-message{color:var(--danger);font-style:normal}
.cave-scale,.cave-coordinates{position:absolute;bottom:12px;padding:4px 9px;background:#17282cdd;border:1px solid #35555a;color:#d7e6da;font:600 12px var(--serif);pointer-events:none}
.cave-scale{left:12px}
.cave-coordinates{right:12px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(min-width:1600px){
  .workspace{grid-template-columns:350px minmax(400px,1fr) 340px}
  .panel-body{padding-left:30px;padding-right:30px}
  .panel-heading{padding-left:30px;padding-right:30px}
  .inspector-panel{padding-left:26px;padding-right:26px}
}

@media(max-width:1150px){
  .workspace{grid-template-columns:280px minmax(320px,1fr) 262px}
  .topbar{padding:0 17px;gap:12px}
  nav{gap:18px}
  nav button{font-size:11px;letter-spacing:.1em}
  .brand strong{font-size:18px}
  .brand-product{font-size:12px}
  .brand-divider{margin:0 4px}
  .panel-body{padding:4px 20px 16px}
  .panel-heading{padding:24px 20px 18px}
  .inspector-panel{padding:20px 16px}
  .map-hint,.map-mode{display:none}
  .map-top-actions{gap:8px}
  .map-style-picker select{min-width:140px}
  .map-tools button{padding:0 11px}
  .map-tools button span{margin-left:5px;letter-spacing:.08em}
}

@media(max-width:1000px){
  body{overflow:auto}
  .workspace{grid-template-columns:270px minmax(320px,1fr);height:auto;min-height:calc(100dvh - var(--top));overflow:visible}
  .planner-panel{max-height:calc(100dvh - var(--top) - 2 * var(--gap))}
  .map-panel{min-height:650px;height:calc(100dvh - var(--top) - 2 * var(--gap))}
  .inspector-panel{grid-column:span 2;display:block;min-height:280px;padding:22px}
  nav button{font-size:10.5px}
  nav{gap:13px}
  .brand-product,.brand-divider{display:none}
  .header-actions .button{padding:9px 12px}
  .route-intro{padding:15px 0}
  .route-stats{max-width:500px;margin:auto}
  .waypoint-list{max-height:200px}
  .save-button{display:flex;max-width:300px;margin-left:auto;margin-right:auto}
  .inspector-note{max-width:500px;margin-left:auto;margin-right:auto}
}

@media(max-width:640px){
  :root{--top:62px;--gap:10px}
  .topbar{padding:0 13px}
  .brand{gap:8px}
  .brand img{width:32px;height:32px}
  .brand strong{font-size:14px;letter-spacing:.24em}
  .brand small{font-size:10px;letter-spacing:.2em}
  .topbar nav{display:none}
  .header-actions .button{min-height:34px;padding:8px 11px;font-size:10px;letter-spacing:.1em}
  .header-actions .button span{display:none}

  .workspace{display:flex;flex-direction:column;min-height:0}
  .map-panel{order:0;height:570px;min-height:570px}
  .planner-panel{order:1;max-height:none;overflow:visible}
  .inspector-panel{order:2}

  .panel-heading{padding:24px 22px 16px}
  .panel-heading h1{font-size:24px}
  .panel-heading h1 br,.panel-heading p br{display:none}
  .panel-body{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;padding:6px 22px 20px}
  .panel-body>.section-title,.panel-body>.source-card,.panel-body>.resource-switches,.panel-body>.search-field,.panel-body>.selection-count,.panel-body>.segmented,.panel-body>.group-field,.panel-body>.check-row,.panel-body>.build-button,.panel-body>.mode-note,.panel-body>.zone-cave-list{grid-column:span 2}
  .panel-footer{padding:14px 22px}
  .mobile-library{display:inline-block}

  .map-topbar{height:76px;padding:0 16px;gap:8px}
  .map-topbar>div:first-child{min-width:0}
  .map-topbar h2{font-size:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .map-topbar .eyebrow{font-size:8.5px;letter-spacing:.2em}
  .map-top-actions{flex-shrink:0;gap:7px}
  .map-style-picker{font-size:8px}
  .map-style-picker select{min-width:120px;max-width:140px;min-height:34px;padding:5px 26px 5px 8px;font-size:14px}
  .map-layer-options{top:4px;left:12px;gap:5px;max-width:calc(100% - 70px)}
  .map-layer-options label{padding:6px 8px;gap:5px;font-size:9px;letter-spacing:.08em}
  .tracking-range-status{left:12px;top:50px;font-size:13px}
  .map-compass{top:64px;right:16px}
  .zoom-controls{right:16px}
  .map-scale{left:16px}
  .map-watermark{display:none}
  .map-tools{bottom:22px}
  .map-tools button{padding:0 9px}
  .map-tools button span{font-size:9px;letter-spacing:.06em}
  .map-coordinates{bottom:6px;font-size:11px}
  .map-bottom{padding:0 16px}
  .node-empty{padding:30px}

  dialog{padding:22px}
  .toast{bottom:12px;min-width:240px;text-align:center}

  .cave-dialog{padding:16px}
  .cave-workspace{grid-template-columns:1fr}
  .cave-map-stage{height:340px}
  .cave-sidebar{max-height:170px;padding:12px 0 0;border-left:0;border-top:1px solid var(--line-strong)}
  .cave-toolbar{gap:6px}
  .cave-toolbar>.field{min-width:140px}
  .cave-toolbar .button{padding:7px;font-size:10px}
}

/* Parchment map table with floating field journals. */
@media(min-width:1001px){
  .workspace{position:relative;display:block;padding:20px;height:calc(100dvh - var(--top));min-height:560px;background:#d6c394;isolation:isolate}
  .map-panel{position:absolute;inset:0;border:0;box-shadow:inset 0 0 45px #71502745;background:#d6c394}
  .map-panel::before,.map-panel::after{display:none}
  .map-stage{position:absolute;inset:0;min-height:0}
  .planner-panel{position:absolute;top:20px;bottom:20px;left:20px;width:300px;z-index:8}
  .inspector-panel{position:absolute;top:20px;right:20px;bottom:20px;width:282px;z-index:8}
  .map-topbar{position:absolute;top:14px;left:340px;right:322px;height:auto;min-height:80px;padding:0;justify-content:center;border:0;background:transparent;pointer-events:none}
  .map-topbar>div:first-child{min-width:260px;padding:14px 30px 18px;text-align:center;background:var(--tome);border-top:2px solid var(--gold);border-bottom:1px solid var(--gold-dim);clip-path:polygon(0 0,100% 0,95% 50%,100% 100%,0 100%,5% 50%)}
  .map-topbar h2{font-size:27px}
  .map-top-actions{position:absolute;top:96px;right:0;pointer-events:auto}
  .map-style-picker>span,.map-mode{display:none}
  .map-layer-options{left:340px;right:322px;top:4px;max-width:none;z-index:3}
  .tracking-range-status{left:340px;top:50px;max-width:calc(100% - 670px)}
  .map-notice{left:340px;right:322px;top:285px}
  .map-tools{left:calc(50% + 9px);bottom:22px;z-index:4}
  .map-tools button{padding:0 10px}
  .map-tools button span{font-size:10px;letter-spacing:.04em}
  .map-bottom{position:absolute;bottom:74px;left:340px;right:322px;height:auto;padding:7px 10px;background:#2a1a10df;border:1px solid var(--line-strong)}
  .map-hint{display:none}
  .map-compass{top:auto;right:324px;bottom:142px}
  .zoom-controls{right:324px;bottom:210px}
  .map-scale{left:340px;bottom:30px}
  .map-coordinates{right:324px;bottom:120px}
  .map-watermark{display:none}
  .map-art-status{top:110px;z-index:4}
}
@media(min-width:1001px) and (max-width:1200px){
  .planner-panel{width:260px}.inspector-panel{width:242px}
  .map-topbar,.map-bottom{left:300px;right:282px}
  .map-layer-options{left:300px;right:282px}
  .tracking-range-status,.map-notice{left:300px;max-width:calc(100% - 590px)}
  .zoom-controls,.map-compass,.map-coordinates{right:284px}
  .map-scale{left:300px}
  .map-tools button span{display:none}
}

/* Keep the journals focused on controls and route measurements. */
.inspector-header,.route-intro,.waypoints-heading,.waypoint-list,.inspector-note,
#sweep-outside,#route-unreachable,#route-diagnostics{display:none!important}
.planner-panel .panel-body{padding-top:24px}
#node-back-to-route{margin-bottom:16px}
@media(min-width:1001px){
  .inspector-panel{bottom:auto;max-height:calc(100% - 40px)}
}

/* Readable map annotations over both bright artwork and the dark surround. */
.map-stage[data-style=ingame] .map-coordinates,
.map-stage[data-style=ingame] .map-scale,
.map-stage[data-style=ingame] .map-compass{
  color:#fff0cc;
  background:#21160eef;
  border:1px solid #a47d38;
  text-shadow:0 1px 2px #000;
  box-shadow:0 2px 8px #0005;
}
.map-stage[data-style=ingame] .map-coordinates{
  padding:5px 9px;
  font:600 13px/1.4 var(--serif);
  font-variant-numeric:tabular-nums;
}
.map-stage[data-style=ingame] .map-scale{
  padding:4px 9px 6px;
  font:600 13px/1.4 var(--serif);
  border-bottom:2px solid #f0cf7a;
}
.map-stage[data-style=ingame] .map-compass{
  width:38px;
  padding:4px 3px;
  font-size:12px;
}
.map-stage[data-style=ingame] .map-compass svg{display:block;margin:0 auto}
.map-stage[data-style=ingame] .map-compass svg path:first-child{fill:#f0cf7a}
.map-stage[data-style=ingame] .map-compass svg path:nth-child(2){fill:#a98443}
.map-stage[data-style=ingame] .map-watermark{
  color:#fff0cc;background:#21160eef;padding:4px 7px;text-shadow:0 1px 2px #000;
}

/* Compact route statistics; map legend removed. */
.map-bottom{display:none}
.route-stats>div:last-child{grid-column:auto;border-top:0;padding:14px 10px}
.route-stats>div:last-child strong{display:block;margin-right:0;font-size:26px}
.route-stats>div:last-child small{display:block;margin-top:5px}

/* Unboxed annotations, with a dark text halo over the original map artwork. */
.map-stage[data-style=ingame] .map-coordinates,
.map-stage[data-style=ingame] .map-scale,
.map-stage[data-style=ingame] .map-compass,
.map-stage[data-style=ingame] .map-watermark{
  color:#fff0cc;background:transparent;border:0;box-shadow:none;
  text-shadow:0 1px 2px #160f09,0 0 4px #160f09,1px 0 1px #160f09,-1px 0 1px #160f09;
}
.map-stage[data-style=ingame] .map-scale{border-bottom:2px solid #fff0cc}

/* Discovery is a separate, scrollable entry to the existing planner. */
[hidden]{display:none!important}
.discovery{height:calc(100dvh - var(--top));overflow:auto;padding:clamp(24px,5vw,72px);background:radial-gradient(ellipse at top,#343027,#141714 75%);color:#eadfc5}
.discovery h1{font-size:clamp(28px,4vw,48px);color:#e4c37c;max-width:900px}
.discovery p{max-width:850px}
.discovery .fine-print{color:#c1b69e}
.discovery button:focus-visible,.discovery input:focus-visible{outline:2px solid #eed39a;outline-offset:3px}

/* search */
.discovery-search{max-width:620px;margin-top:28px}
.discovery-search-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.discovery-search-row label{font:600 11px/1.3 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#d9cfb6}
.discovery input[type=search]{width:100%;box-sizing:border-box;background:#171b18;color:#f1e6cc;border:1px solid #8b7446}
.discovery-status{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* resource picker: Herbs and Ores, round icons with the item bevel cropped away */
.discovery-resources{display:grid;gap:30px;max-width:1150px;margin:30px 0 0}
.res-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.res-head h2{margin:0;font:600 12px/1.3 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.res-head span{font-size:12px;color:var(--faint)}
.res-head::after{content:"";flex:1;height:1px;background:rgba(216,176,78,.28)}
.res-grid{display:flex;flex-wrap:wrap;gap:16px}
.res-orb{position:relative;width:72px;height:72px;padding:0;box-sizing:border-box;border-radius:50%;border:2px solid var(--herb);background:#1f2217;display:grid;place-items:center;cursor:pointer;transition:transform .12s,box-shadow .12s}
.res-ore{border-color:var(--ore)}
.res-orb:hover{transform:translateY(-2px)}
.res-orb[aria-pressed=true]{background:rgba(216,176,78,.2);box-shadow:0 0 0 3px rgba(216,176,78,.55)}
.res-orb[aria-pressed=true]::before{content:"";position:absolute;top:-5px;right:-5px;width:20px;height:20px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%232a1c08' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5 7.5 13 14 5.5'/%3E%3C/svg%3E") center/12px no-repeat}
.res-orb::after{content:attr(data-name);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#0d0e08;border:1px solid var(--gold-dim);color:var(--ink);font:500 12px var(--font);padding:4px 9px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:5}
.res-orb:hover::after,.res-orb:focus-visible::after{opacity:1}
.orb{--orb:34px;position:relative;display:grid;place-items:center;flex:none;width:var(--orb);height:var(--orb);border-radius:50%;overflow:hidden;background:#1b1e14;font:600 14px var(--display);color:var(--gold-light)}
.orb img{position:absolute;left:calc(var(--orb) / -14);top:calc(var(--orb) / -14);width:calc(var(--orb) * 16 / 14);height:calc(var(--orb) * 16 / 14);max-width:none}

/* import call to action */
.discovery-cta{max-width:1150px;margin:40px 0 0;padding:24px 28px;box-sizing:border-box;border:1px solid var(--gold);background:rgba(216,176,78,.09);display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.cta-main{flex:1 1 380px;display:flex;align-items:center;gap:18px}
.cta-icon{flex:none;width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);background:#1d3a35;display:grid;place-items:center;color:var(--gold-light)}
.cta-copy h3{margin:0;font-size:19px;letter-spacing:.06em;color:var(--gold-light)}
.cta-copy p{margin:6px 0 0;font-size:14px;line-height:1.5}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cta-primary{min-height:48px;padding:0 26px;font-size:13px}
.discovery .discovery-cta+.fine-print{margin:14px 0 0}

/* zones: herb/ore split and per-resource counts */
.discovery>h2{margin:44px 0 6px;font-size:30px;color:#e4c37c}
.discovery-sub{margin:0 0 16px;font-size:13px;color:#c1b69e}
.discovery-zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;max-width:1150px}
.zone-result{display:flex;flex-direction:column;gap:14px;text-align:left;padding:18px 20px;border:1px solid #8b7446;background:#23271f;color:#eadfc5;cursor:pointer;font:inherit}
.zone-result:hover{background:#2b3024}
.zone-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.zone-top strong{color:#e4c37c;font-size:19px}
.zone-top span{font-size:13px;white-space:nowrap;color:#d9d2c0}
.zone-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:#171b18}
.zone-bar i{display:block;height:100%}
.zone-bar .h{background:var(--herb)}
.zone-bar .o{background:var(--ore)}
.zone-type{display:block}
.zone-type-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font:600 11px/1.3 var(--display);letter-spacing:.18em;text-transform:uppercase}
.zone-type-head::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.zone-herb .zone-type-head{color:#a9c48a}
.zone-ore .zone-type-head{color:#e0b08a}
.zone-chips{display:flex;flex-wrap:wrap;gap:10px}
.zone-chip{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:38px}
.zone-herb .zone-chip .orb{box-shadow:0 0 0 2px var(--herb)}
.zone-ore .zone-chip .orb{box-shadow:0 0 0 2px var(--ore)}
.zone-n{font-size:12px;color:#d9d2c0;font-variant-numeric:tabular-nums}
.zone-foot{font-size:12px;color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.res-orb{transition:none}.res-orb:hover{transform:none}}

@media(max-width:600px){
 .discovery-zones{grid-template-columns:minmax(0,1fr)}
 .zone-top{flex-wrap:wrap}
 .discovery-cta{padding:20px}
 .cta-main{flex-basis:100%;min-width:0;align-items:flex-start}
 .cta-actions{width:100%}
 .cta-actions .button{width:100%;white-space:normal}
 .discovery-search-row{flex-wrap:wrap}
}

/* Use the width of desktop displays to keep the field atlas in view. */
@media(min-width:1280px){
 .discovery{padding:20px max(32px,calc((100vw - 1720px)/2))}
 .discovery h1{font-size:36px;margin:8px 0}
 .discovery>p:not(.discovery-status):not(.fine-print):not(.discovery-sub){margin:0 0 16px}
 .discovery-search{margin-top:16px}
 .discovery-resources{grid-template-columns:2fr 1fr;gap:28px;max-width:none;margin-top:16px}
 .res-head{margin-bottom:10px}
 .res-grid{gap:10px}
 .res-orb{width:48px;height:48px}
 .res-orb>.orb{--orb:40px!important}
 .discovery-status{margin-top:12px}
 .discovery-cta{max-width:none;margin-top:16px;padding:12px 16px;gap:16px}
 .cta-icon{width:40px;height:40px}
 .cta-copy h3{font-size:17px}
 .cta-copy p{margin-top:4px}
 .discovery .discovery-cta+.fine-print{margin-top:8px;font-size:12px}
 .discovery>h2{margin:16px 0 4px;font-size:26px}
 .discovery-sub{margin-bottom:12px}
 .discovery-zones{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .zone-result{padding:14px;gap:10px;min-width:0}
 .zone-top{flex-wrap:wrap;gap:2px 10px}
 .zone-top strong{font-size:18px}
 .zone-type-head{margin-bottom:6px}
 .zone-chips{gap:8px}
 .zone-chip .orb{--orb:28px!important}
 .zone-chip{min-width:30px;gap:2px}
 .zone-n,.zone-foot{font-size:11px}
}
@media(min-width:1280px){
 .zone-type{display:flex;align-items:center;gap:10px;min-height:30px}
 .zone-type-head{flex:0 0 82px;margin:0;font-size:10px;letter-spacing:.1em}
 .zone-chips{gap:8px}
 .zone-chip{flex-direction:row;gap:4px}
 .zone-result{gap:6px}
 .zone-foot{margin-top:auto}
}
@media(min-width:1600px){
 .discovery{position:relative}
 .discovery-search{position:absolute;top:20px;right:max(32px,calc((100vw - 1720px)/2));width:400px;margin:0}
 .discovery h1{max-width:calc(100% - 440px)}
 .discovery>p:first-of-type{max-width:calc(100% - 440px)}
}