/* Wilds home — a painted overlook, a parchment map in a slate frame, only essential UI. */
:root{
  --ink:#f2ecd9;--ink-dim:#ddd5bf;--shadow:0 1px 2px rgba(10,16,20,.85),0 0 8px rgba(10,16,20,.5),0 0 20px rgba(10,16,20,.3);
  --slate:#23262a;--slate-2:#2c3035;--carve:#4a5157;--glow:#4fd6ff;--glow-soft:rgba(79,214,255,.2);--ember:#ff9f4a;
  --parch:#e8dcb8;--parch-2:#d9c89c;--parch-ink:#5b4a2e;
  --title:"Optima","Candara","Palatino Linotype","Book Antiqua",serif;
  --ui:"Avenir Next","Segoe UI","Helvetica Neue",system-ui,sans-serif;
  --ease:cubic-bezier(.3,.7,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:#6b8f92;color:var(--ink);font:14px/1.45 var(--ui);overflow:hidden;display:grid;grid-template-rows:52px minmax(0,1fr) 30px}
a{color:inherit}
kbd{display:inline-grid;place-items:center;min-width:1.75em;height:1.75em;padding:0 .4em;border:1px solid rgba(242,236,217,.5);border-bottom-width:2px;border-radius:5px;font:600 11px/1 var(--ui);color:var(--ink);background:rgba(20,26,30,.45)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--slate);padding:8px 12px;border-radius:6px}
.skip:focus{top:10px}

/* ——— vista ——— */
.vista{position:fixed;inset:0;width:100%;height:100%;z-index:-2}
.cloud{animation:drift 80s linear infinite alternate}.c2{animation-duration:110s}.c3{animation-duration:65s;animation-direction:alternate-reverse}
@keyframes drift{to{transform:translateX(140px)}}
.beacon{animation:beacon 3s ease-in-out infinite}
@keyframes beacon{50%{opacity:.25}}
.motes circle{fill:#fff7d6;animation:mote 10s ease-in-out infinite alternate}
@keyframes mote{0%{transform:translate(0,0);opacity:.1}50%{opacity:.8}100%{transform:translate(50px,-40px);opacity:.15}}
.scrim{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,20,26,.45),rgba(14,20,26,.05) 22%,rgba(14,20,26,.05) 70%,rgba(14,20,26,.55))}

/* ——— HUD: borderless, small caps ——— */
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;text-shadow:var(--shadow)}
.brand{font:600 12px/1 var(--ui);letter-spacing:.28em;text-transform:uppercase}
.brand-mark{color:var(--glow)}.brand-sub{color:var(--glow);letter-spacing:.2em}
.compass{display:flex;align-items:center;gap:22px;font:600 10.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.compass .tick{width:90px;height:1px;background:linear-gradient(90deg,transparent,rgba(242,236,217,.7),transparent)}
.bearing{transition:color .25s}.bearing b{color:var(--ink);margin-right:6px}
.bearing.on{color:var(--glow)}.bearing.on b{color:var(--glow)}
.hud-right{display:flex;justify-content:flex-end;align-items:center;gap:18px}
.discovered{font:600 11px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase}
.discovered b{color:var(--glow)}
.keys-btn{background:none;border:0;display:flex;align-items:center;gap:8px;font:600 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;text-shadow:var(--shadow)}

/* ——— layout ——— */
.stage{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr) 40px;gap:10px 22px;padding:4px 24px 0;min-height:0}
.hero{grid-column:1;text-shadow:var(--shadow);display:flex;align-items:baseline;gap:22px;min-width:0}
.hero h1{margin:0;font:400 clamp(30px,4.6vh,44px)/1 var(--title);letter-spacing:.02em;white-space:nowrap}
.thesis{margin:0;font:italic 15px/1.35 var(--title);color:var(--ink-dim);max-width:48ch}
.map-area{grid-column:1;grid-row:2;min-height:0;display:flex;outline:none}
.slate{grid-column:2;grid-row:1/3}
.subtitle{grid-column:1/3;grid-row:3;margin:0;align-self:center;text-align:center;font:italic 15px/1.3 var(--title);text-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.speaker{font:600 10px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--glow);margin-right:12px;font-style:normal}
#wren{transition:opacity .2s}
#wren.swap{opacity:0}

/* ——— the map, in a slate frame ——— */
.map-frame{position:relative;flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 26px;padding:14px 14px 6px;border-radius:14px;background:linear-gradient(160deg,#2f3439,#1f2226);box-shadow:0 18px 40px rgba(8,12,16,.45),inset 0 0 0 1px #4a5157,inset 0 0 0 6px #262a2e,inset 0 0 0 7px #3d4349}
.corner{position:absolute;width:26px;height:26px;border:2px solid var(--carve);pointer-events:none}
.corner.tl{left:6px;top:6px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}.corner.tr{right:6px;top:6px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.corner.bl{left:6px;bottom:6px;border-right:0;border-top:0;border-radius:0 0 0 10px}.corner.br{right:6px;bottom:6px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.map-fit{container-type:size;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:8px;background:radial-gradient(ellipse at 50% 50%,#d9c89c,#b9a272 80%,#9c865a);box-shadow:inset 0 0 18px rgba(40,28,10,.45)}
.map{position:relative;width:min(100cqw,calc(100cqh * 1000 / 620));aspect-ratio:1000/620;transition:transform .42s var(--ease)}
.terrain{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;display:block}
.map-legend{display:flex;justify-content:space-between;align-items:center;gap:14px;font:600 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);padding:0 4px}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;transform:rotate(45deg);display:inline-block}
.lg-found{background:var(--glow);box-shadow:0 0 6px var(--glow)}.lg-new{border:2px solid var(--ember);background:#3a2c1f}

/* terrain classes (drawn by app.js) */
.t-river{fill:none;stroke:#6fa7b4;stroke-width:14;stroke-linecap:round}
.t-river2{fill:none;stroke:#a3cbd1;stroke-width:5;stroke-linecap:round}
.t-contour{fill:none;stroke:#9e8a5e;stroke-width:1.2;opacity:.55}
.t-contour.strong{opacity:.85;stroke-width:1.6}
.t-trail{fill:none;stroke:#7a5d34;stroke-width:2.4;stroke-dasharray:2 7;stroke-linecap:round;opacity:.7;transition:stroke .3s,opacity .3s}
.t-trail.on{stroke:#1d8fb4;opacity:1}
.t-region{font:600 11px var(--ui);letter-spacing:.34em;text-transform:uppercase;fill:#6e5a37;opacity:.8}
.t-region-sub{font:italic 12px var(--title);fill:#6e5a37;opacity:.75}
.t-tree{fill:#7d8f5a}.t-tree2{fill:#65784a}

/* ——— places ——— */
.places{position:absolute;inset:0}
.place{position:absolute;transform:translate(-50%,-50%);width:9%;aspect-ratio:1;display:grid;place-items:center;text-decoration:none;border-radius:50%;outline-offset:4px}
.place svg{width:78%;height:78%;overflow:visible}
.mk-base{fill:#3a2e22;stroke:var(--ember);stroke-width:3;transition:fill .3s,stroke .3s,filter .3s}
.mk-icon{fill:#e8dcb8;transition:fill .3s}
.mk-rune{fill:none;stroke:var(--ember);stroke-width:2.2;stroke-linecap:round;transition:stroke .3s}
.place.visited .mk-base{fill:#1f3640;stroke:var(--glow);filter:drop-shadow(0 0 5px rgba(79,214,255,.8))}
.place.visited .mk-rune{stroke:var(--glow)}
.place .num{position:absolute;right:-6%;top:-6%;min-width:1.8em;height:1.8em;display:grid;place-items:center;border-radius:4px;background:var(--slate);color:var(--ink);font:700 11px/1 var(--ui);border:1px solid #59616a;box-shadow:0 2px 3px rgba(0,0,0,.35)}
.place .label{position:absolute;top:100%;left:50%;transform:translate(-50%,2px);white-space:nowrap;font:600 10px/1.2 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#4a3a20;background:rgba(240,230,200,.82);padding:3px 6px;border-radius:3px;opacity:.9;transition:background .25s,color .25s}
.place.selected .label{background:var(--slate);color:var(--glow);opacity:1}
.place.selected .num{background:var(--glow);color:#0d2229;border-color:var(--glow)}
.place:hover svg,.place.selected svg{transform:scale(1.08)}
.place svg{transition:transform .25s var(--ease)}

/* the map cursor: a cyan diamond pin with pulsing rings */
.cursor{position:absolute;left:0;top:0;width:9%;aspect-ratio:1;pointer-events:none;transform:translate(-50%,-50%);transition:left .38s var(--ease),top .38s var(--ease)}
.cursor .pin{position:absolute;left:50%;top:-34%;width:26%;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);background:var(--glow);box-shadow:0 0 12px var(--glow),0 0 0 2px #0e2a33;animation:hover 1.6s ease-in-out infinite}
.cursor .ring{position:absolute;inset:-8%;border:2px solid var(--glow);border-radius:50%;opacity:0;animation:ring 1.8s ease-out infinite}
.cursor .r2{animation-delay:.9s}
@keyframes ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes hover{50%{transform:translate(-50%,-4px) rotate(45deg)}}

/* ——— the slate panel ——— */
.slate{position:relative;display:grid;grid-template-rows:auto auto auto auto 5.9em auto auto 30px minmax(0,1fr) auto;align-content:start;gap:8px;padding:22px 24px 20px;border-radius:18px;background:linear-gradient(170deg,#2d3136,#1f2226 60%,#1b1d21);box-shadow:0 20px 44px rgba(8,12,16,.5),inset 0 0 0 1px #4a5157,inset 0 0 0 7px #23262a,inset 0 0 0 8px #3a4046;min-height:0;overflow:hidden}
.carve{position:absolute;inset:14px;border-radius:12px;pointer-events:none;background:
  repeating-linear-gradient(90deg,transparent 0 14px,rgba(74,81,87,.5) 14px 15px) bottom/100% 6px no-repeat}
.slate-head{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--ember);margin-top:14px}
.rune-line{width:38px;height:10px;background:linear-gradient(var(--ember),var(--ember)) 0 50%/100% 1px no-repeat;position:relative}
.rune-line::after{content:"";position:absolute;right:0;top:1px;width:7px;height:7px;border:1.5px solid var(--ember);transform:rotate(45deg)}
.p-route{font:600 10px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--glow)}
.slate h2{margin:0;font:400 26px/1.1 var(--title);color:var(--ink);height:2.2em;overflow:hidden;display:flex;align-items:flex-end}
.p-kicker{margin:0;height:2.6em;overflow:hidden;font:600 11px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#b8b19c}
.p-blurb{margin:0;font:15px/1.5 var(--title);color:var(--ink-dim);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.p-progress{display:grid;gap:6px;font:12px/1.2 var(--ui);color:#c9c2ad}
.bar{height:4px;border-radius:2px;background:#3a4046;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--glow);box-shadow:0 0 8px var(--glow);transition:width .4s var(--ease)}
.travel{display:flex;align-items:center;justify-content:center;gap:12px;height:48px;border-radius:10px;text-decoration:none;font:600 13px/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;color:var(--glow);border:1px solid rgba(79,214,255,.65);background:linear-gradient(180deg,rgba(79,214,255,.14),rgba(79,214,255,.04));box-shadow:0 0 0 0 var(--glow-soft);animation:breathe 2.8s ease-in-out infinite}
.travel kbd{border-color:rgba(79,214,255,.6);color:var(--glow)}
.travel:hover{background:rgba(79,214,255,.2)}
@keyframes breathe{50%{box-shadow:0 0 18px 2px var(--glow-soft)}}
.continue{background:none;border:0;padding:0;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;font:12.5px/1.2 var(--ui);color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue b{color:var(--ink);font-weight:600}
.ornament{align-self:center;justify-self:center;width:100%;max-height:70px;opacity:.95}
.orn-eye{filter:drop-shadow(0 0 4px #4fd6ff);animation:beacon 3.4s ease-in-out infinite}
.continue.off{visibility:hidden}
.routes{align-self:end;display:grid;gap:7px;border-top:1px solid #3a4046;padding-top:12px;font:12px/1.3 var(--ui);color:#b8b19c}
.routes div{display:grid;grid-template-columns:10px 76px 1fr 30px;align-items:center;gap:8px;transition:color .25s}
.routes b{font:600 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.routes span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.routes em{font:600 11px/1 var(--ui);font-style:normal;text-align:right;color:var(--ink-dim)}.routes div.on em{color:var(--glow)}
.r-dot{width:7px;height:7px;transform:rotate(45deg);border:1.5px solid #6a7178}
.routes div.on{color:var(--ink)}.routes div.on .r-dot{background:var(--glow);border-color:var(--glow)}.routes div.on b{color:var(--glow)}

/* ——— footer ——— */
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 24px;font:11px/1 var(--ui);letter-spacing:.06em;color:var(--ink-dim);text-shadow:var(--shadow)}
.others{display:flex;gap:14px}
.others a{text-decoration:none;letter-spacing:.16em;text-transform:uppercase;font-size:10px;opacity:.85}
.others a:hover,.others a[aria-current]{opacity:1;color:var(--glow)}

/* ——— help ——— */
.help{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(10,14,18,.55);backdrop-filter:blur(3px)}
.help-slate{width:min(440px,92vw);padding:26px 28px;border-radius:16px;background:linear-gradient(170deg,#2d3136,#1d2024);box-shadow:inset 0 0 0 1px #4a5157,inset 0 0 0 6px #23262a,0 24px 50px rgba(0,0,0,.5)}
.help h2{margin:0 0 14px;font:600 12px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--glow)}
.help dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0 0 18px;align-items:center}
.help dt{display:flex;gap:4px}.help dd{margin:0;color:var(--ink-dim)}
.help button{background:none;border:1px solid #59616a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer}

/* ——— fast-travel fx + arrival ——— */
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
body.arriving .stage,body.arriving .hud{animation:arrive .7s var(--ease) both}
@keyframes arrive{from{opacity:0;filter:blur(6px) saturate(.4) brightness(1.4)}}
body.leaving .stage,body.leaving .hud,body.leaving .foot{transition:opacity .55s ease .1s,filter .55s ease;opacity:0;filter:blur(4px) brightness(1.5) saturate(.3)}

/* ——— smaller screens ——— */
@media (max-width:1180px){.place .label{white-space:normal;width:max-content;max-width:10em;text-align:center;font-size:9px;letter-spacing:.1em}.stage{grid-template-columns:minmax(0,1fr) 300px}.thesis{font-size:13.5px}.compass .tick{width:40px}}
@media (max-width:1040px){.compass{gap:14px}.compass .bearing:not(.on){display:none}}
@media (max-height:780px){.ornament{max-height:44px}.hero h1{font-size:30px}.thesis{font-size:13px}.slate{padding:16px 20px 16px;gap:6px}.slate h2{font-size:23px}.p-blurb{font-size:14px}}
@media (max-width:767px){
  html,body{height:auto}body{overflow-x:hidden;overflow-y:auto;display:block}
  .hud{grid-template-columns:1fr auto;padding:12px 16px;gap:8px}.compass{display:none}.discovered{display:none}
  .stage{display:flex;flex-direction:column;padding:4px 16px 16px;gap:14px}
  .hero{flex-direction:column;gap:6px}.hero h1{white-space:normal}
  .map-frame{padding:8px 8px 4px;grid-template-rows:auto auto}.map-fit{container-type:inline-size}.map{width:100%}
  .map-legend span:last-child{display:none}
  .place .label{display:none}.place .num{font-size:9px}
  .subtitle{white-space:normal}
  .foot{flex-direction:column;align-items:flex-start;padding:12px 16px 20px;gap:10px;line-height:1.4}.others{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}