:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20383d;background:#f2f5f3;font-synthesis:none;line-height:1.5;--accent:#16735c}
*{box-sizing:border-box}body{margin:0;padding:40px 20px}button,input{font:inherit}.app{max-width:800px;margin:auto;background:#fff;border:1px solid #e0e7e2;border-radius:24px;overflow:hidden;box-shadow:0 16px 60px #17352c08}.hero{padding:32px 40px 36px;background:#142d35;color:#fff;position:relative}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:750;letter-spacing:-.8px}.brand-icon{color:#8de4b0;font-size:32px;line-height:1}.classic{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#b9d7cd;border:1px solid #45615f;border-radius:5px;padding:3px 6px;margin-left:3px}.hero h1{font-size:clamp(28px,5vw,38px);line-height:1.18;letter-spacing:-1.3px;margin:27px 0 12px}.hero p{color:#b9cecf;margin:0 0 28px}.hero-note,.section-label{font-size:10px;letter-spacing:1.7px;font-weight:700}.hero-note{color:#8ed7b7}.finder,.recommendations{padding:30px 40px}.finder{border-bottom:1px solid #e9eeeb}.section-label{color:#638477;margin-bottom:6px}h2{font-size:20px;letter-spacing:-.5px;margin:0 0 26px}.level-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 15px}.level-heading label,legend{font-size:14px;font-weight:600}output{font-size:18px;font-weight:750;background:#e8f4ed;color:#17674e;border-radius:9px;padding:5px 12px}input[type=range]{width:100%;margin:0;accent-color:var(--accent);height:30px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#84918a;font-size:12px;margin:4px 0 25px}fieldset{padding:0;margin:0;border:0;min-width:0}legend{padding:0;margin-bottom:12px}.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.classes label{position:relative;cursor:pointer}.classes input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.classes span{display:block;text-align:center;border:1px solid #dce4df;border-radius:10px;padding:12px 4px;font-size:14px;color:#60716b;transition:background .15s,border-color .15s}.classes input:checked+span{border-color:#237452;background:#edf7f0;color:#1c6245;font-weight:650}.classes input:focus-visible+span{outline:3px solid #8ebbb0;outline-offset:3px}.results-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.results-heading h2{margin:0}.badge{white-space:nowrap;font-size:11px;font-weight:650;color:#9b6527;background:#fff1db;border-radius:20px;padding:4px 10px}.demo-note{font-size:12px;color:#7e7769;max-width:580px;margin:12px 0 20px}.results-status{font-size:12px;color:#718079;margin:0 0 12px}.results{display:grid;gap:14px}.spot{border:1px solid #dfe8e1;border-radius:13px;padding:22px;background:#fcfdfb}.spot-top{display:flex;align-items:start;justify-content:space-between;gap:12px}.spot h3{font-size:18px;letter-spacing:-.4px;margin:0 0 4px}.spot .range{font-size:11px;white-space:nowrap;color:#456650;background:#eaf1e8;padding:4px 8px;border-radius:6px}.placeholder{font-size:11px;color:#78877c;margin:0}.monsters{font-size:14px;color:#5d6e65;margin:18px 0}.map-link{color:#17674e;font-size:13px;font-weight:650;text-underline-offset:4px}.empty{padding:20px;border:1px dashed #cbd9cf;border-radius:12px;color:#617369}footer{text-align:center;font-size:12px;color:#7a8a80;padding:12px 25px 28px}footer span{font-size:10px;color:#96a198}dialog{width:min(720px,calc(100% - 28px));padding:22px;border:1px solid #dfe8e1;border-radius:18px;color:#20383d;max-height:90dvh;overflow:auto}dialog::backdrop{background:#102a32b8}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.dialog-heading h2{margin:0;font-size:18px}.dialog-heading button{border:0;background:#edf3ee;border-radius:50%;width:44px;height:44px;font-size:26px;cursor:pointer}dialog img{display:block;width:100%;margin-top:16px;border-radius:10px}dialog p{font-size:13px;color:#66776c}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #79ac98;outline-offset:4px}@media(max-width:520px){body{padding:14px 10px}.app{border-radius:18px}.hero{padding:25px}.finder,.recommendations{padding:25px 22px}.classes{grid-template-columns:repeat(2,1fr)}.results-heading h2{font-size:18px}.spot{padding:17px}.spot-top{flex-direction:column;gap:10px}.hero h1{margin-top:24px}h2{font-size:19px}}
/* Forest artwork stays within the header; the light page palette is unchanged. */
.hero {
  background-color: #193d2c;
  background-image: linear-gradient(90deg, rgba(10, 36, 24, .87), rgba(10, 36, 24, .58) 55%, rgba(10, 36, 24, .12)), url('../assets/forest-header.webp');
  background-size: cover;
  background-position: center;
}
.hero h1.brand { font-size: 26px; line-height: 1.25; letter-spacing: -.8px; margin: 0 0 16px; text-shadow: 0 2px 14px #09271970; }
.hero p { color: #e0eedb; margin: 0 0 22px; }
.hero-note, .brand-icon { color: #c2ee9e; }
.classic { color: #e0edcf; border-color: #afca8b70; background: #17362366; }
/* Warm wooden class controls inspired by classic fantasy game menus. */
.second-job { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e3ebe5; }
.second-job[hidden] { display: none; }
.second-job legend { margin-bottom: 0; }
.optional-label { margin-left: 7px; font-weight: 400; font-size: 12px; color: #718079; }
.job-help { color: #66796d; font-size: 12px; margin: 10px 0 12px; }
.second-job-options span { font-size: 15px; padding: 10px 5px; }
.second-job-options { grid-template-columns: repeat(var(--job-columns, 4), minmax(0, 1fr)); }
@media(max-width:520px) { .second-job-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.results-heading { margin-bottom: 18px; }
.spot-recommended { background: #f0f8f1; border-color: #77a78a; border-left: 4px solid #237452; box-shadow: 0 3px 12px #235b3710; }
.spot-note { font-size: 12px; color: #6c725d; margin: 12px 0 0; }
.spot-details { margin: -4px 0 6px; font-size: 13px; color: #52665a; }
.spot-details:last-child { margin-bottom: -6px; }
.spot-details summary { cursor: pointer; color: #29634c; font-weight: 650; padding: 10px 0; min-height: 44px; width: fit-content; }
.spot-details summary:focus-visible { outline: 3px solid #79ac98; outline-offset: 3px; border-radius: 4px; }
.spot-details[open] summary { margin-bottom: 10px; }
.spot-details > p:first-of-type { border-top: 1px solid #ceded2; padding-top: 12px; margin: 0; line-height: 1.7; }
.spot-details .spot-note { line-height: 1.6; }
.recommendation-badge { display: inline-block; margin: 6px 0 0; padding: 4px 10px; border-radius: 20px; background: #d9eddd; color: #205d3c; font-size: 11px; font-weight: 750; }
.toggle-results { display: block; margin: 22px auto 0; padding: 12px 24px; min-height: 44px; border: 1px solid #17674e; border-radius: 10px; color: #17674e; background: #edf7f0; font-weight: 650; cursor: pointer; }
.toggle-results:hover { background: #dfeee4; }
.toggle-results[hidden] { display: none; }
.classes span {
  position: relative;
  overflow: hidden;
  border: 2px solid #633613;
  border-radius: 5px;
  padding: 12px 6px;
  color: #fff1cf;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 1px 2px #402009, 1px 0 #633613;
  background-color: #ac5c20;
  background-image:
    linear-gradient(165deg, #ffd68738 0%, #ffffff0a 42%, #6c30052b 43%, #6c300500 72%),
    repeating-linear-gradient(2deg, transparent 0 7px, #58260020 8px, transparent 10px 15px),
    linear-gradient(#d98f3d, #b36b25 48%, #a65419 51%, #bd712a);
  box-shadow: inset 0 1px 0 #ffe1a9, inset 0 0 0 2px #e7a34b80, inset 0 -3px 0 #783b17, 0 2px 0 #452a1630;
  transition: filter .15s, box-shadow .15s;
}
.classes label:hover span { filter: brightness(1.1); }
.classes input:checked + span {
  border-color: #f2cc69;
  color: #fff9de;
  font-weight: 700;
  text-shadow: 0 1px 2px #102e20;
  background-color: #194d35;
  background-image:
    linear-gradient(165deg, #d4e9a322, transparent 42%, #08261930 43%, transparent 72%),
    repeating-linear-gradient(2deg, transparent 0 7px, #061d1420 8px, transparent 10px 15px),
    linear-gradient(#2d684a, #194d35 48%, #123f2b 51%, #20583c);
  box-shadow: inset 0 0 0 1px #ffe5a2, inset 0 3px 7px #08241760, 0 0 0 2px #ab7e2b;
}
.classes input:checked + span::before { content: '✓'; font-family: system-ui, sans-serif; font-size: 16px; margin-right: 7px; color: #ffe5a1; }
.classes input:focus-visible + span { outline: 3px solid #24745b; outline-offset: 5px; }
@media (max-width: 520px) {
  .hero { background-position: 64% center; background-image: linear-gradient(90deg, rgba(10, 36, 24, .87), rgba(10, 36, 24, .46)), url('../assets/forest-header.webp'); }
}

#map-image[hidden]{display:none}

.route-town{font-weight:650}.route-steps{padding-left:24px;margin:12px 0 16px;color:#5d6e65;font-size:14px;line-height:1.65}.route-steps li{padding-left:4px;margin:6px 0;overflow-wrap:anywhere}

.spot-title-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}.spot-title-row h3{margin-bottom:0;overflow-wrap:anywhere}.spot-title-row .map-link{white-space:nowrap;padding:6px 0;display:inline-block}.spot-top>div{min-width:0}.spot-title-row+.recommendation-badge{margin-top:10px}

#map-dialog[open]{display:flex;flex-direction:column;gap:12px;height:min(820px,92dvh);max-height:92dvh;overflow:hidden}
#map-dialog .dialog-heading{flex:none;min-height:44px}
#map-dialog .dialog-heading h2{overflow-wrap:anywhere}
#map-dialog .dialog-heading button{flex-shrink:0}
.map-controls{display:flex;align-items:center;gap:8px;flex:none}
.map-controls button{min-width:44px;min-height:44px;border:1px solid #cbd9cf;background:#edf7f0;color:#17674e;border-radius:8px;cursor:pointer;font-weight:650}
.map-controls button:disabled{opacity:.45;cursor:default}
.map-controls output{min-width:68px;text-align:center;background:transparent;padding:0;font-size:14px}
#map-reset{padding:0 12px}
#map-viewport{position:relative;flex:1;min-height:80px;overflow:hidden;background:#14221c;border-radius:10px;touch-action:none;user-select:none}
#map-viewport.is-zoomed{cursor:grab}#map-viewport.is-dragging{cursor:grabbing}
#map-viewport #map-image{position:absolute;left:50%;top:50%;max-width:none;margin:0;border-radius:0;transform-origin:center;pointer-events:none}
#map-loading{position:absolute;inset:0;display:grid;place-items:center;color:#e4eee8;margin:0;padding:16px;text-align:center}
#map-loading[hidden]{display:none}
#map-dialog #map-help,#map-dialog #map-caption{flex:none;margin:0;font-size:12px;line-height:1.45}
@media(max-width:520px){#map-dialog{padding:14px}#map-dialog[open]{gap:8px}#map-dialog #map-help{font-size:11px}}

.spot{position:relative;isolation:isolate;overflow:hidden;container-type:inline-size}
.spot-body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:18px;align-items:end}
.spot-content{min-width:0}
.spot-content .monsters{margin:0 0 18px;overflow-wrap:anywhere}
.spot-art-slot{min-width:0;overflow:hidden;border-top:1px solid #dfe8e1;padding-top:14px}
.spot-monster-art{display:flex;justify-content:flex-end;align-items:flex-end;gap:8px;opacity:.6;pointer-events:none;user-select:none}
.spot-monster-art{visibility:hidden}
.spot-monster-art.is-ready{visibility:visible}
.spot-monster-art img{display:block;flex:none;max-width:175px;max-height:175px;object-fit:contain;object-position:center bottom;image-rendering:pixelated}
@container(min-width:560px){.has-monster-art .spot-body{grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:24px}.spot-art-slot{border-top:0;padding-top:0}}