/* Layout: full-screen pan/zoom map of challenge boxes; toolbar on top; details drawer on the right (bottom sheet on phones). */
:root {
  /* dark-first: the game is played on dark screens and the old chart was dark */
  --bg: #16141d;
  --grid: #1c1a25;
  --band-a: #1d1b27;
  --band-b: #191722;
  --surface: #23202e;
  --surface-2: #2c2839;
  --line: #3b3649;
  --fg: #ece8f4;
  --fg-dim: #a7a0b8;
  --fg-faint: #6f6882;
  --accent: #e8b84a;          /* god-power gold */
  --accent-ink: #1a1405;
  --ok: #5fd08a;
  --warn: #e8b84a;
  --bad: #f07a7a;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f1f7; --grid: #ebe8f2; --band-a: #ece9f3; --band-b: #f4f2f8;
    --surface: #ffffff; --surface-2: #f1eef7; --line: #d6d0e2;
    --fg: #1d1a26; --fg-dim: #5c5570; --fg-faint: #8f88a3;
    --accent: #a8740a; --accent-ink: #fff8e6; --ok: #1f8a4c; --warn: #a8740a; --bad: #c43d3d;
    --shadow: 0 10px 30px rgba(40,30,70,.18);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f3f1f7; --grid: #ebe8f2; --band-a: #ece9f3; --band-b: #f4f2f8;
  --surface: #ffffff; --surface-2: #f1eef7; --line: #d6d0e2;
  --fg: #1d1a26; --fg-dim: #5c5570; --fg-faint: #8f88a3;
  --accent: #a8740a; --accent-ink: #fff8e6; --ok: #1f8a4c; --warn: #a8740a; --bad: #c43d3d;
  --shadow: 0 10px 30px rgba(40,30,70,.18);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 14px/1.4 var(--font-body); overflow: hidden;
  display: flex; flex-direction: column;
}
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- toolbar ---------- */
.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand h1 { font: 700 20px/1 var(--font-display); letter-spacing: .04em; margin: 0; white-space: nowrap; }
.brand small { color: var(--fg-dim); font-size: 12px; white-space: nowrap; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  color: var(--fg-dim); font-weight: 600; font-size: 13px;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.search { position: relative; flex: 1 1 220px; max-width: 360px; min-width: 0; }
.search input {
  width: 100%; padding: 8px 32px 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg);
}
.search .clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; color: var(--fg-dim); font-size: 18px; line-height: 1; padding: 2px 6px; }
.suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; list-style: none; margin: 0; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); z-index: 40;
  max-height: 60vh; overflow: auto;
}
.suggest li { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--surface-2); }
.suggest .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.suggest b { font-family: var(--font-mono); font-size: 13px; min-width: 56px; }
.suggest span { color: var(--fg-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.btn {
  border: 1px solid var(--line); background: var(--surface-2); padding: 7px 12px; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: 13px; white-space: nowrap;
}
.btn:hover { border-color: var(--fg-faint); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.player { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; }
.player b { color: var(--fg); }
.player button { border: 0; background: var(--surface-2); border-radius: 999px; padding: 2px 8px; cursor: pointer; font-size: 12px; }

/* ---------- map ---------- */
.pane { position: absolute; inset: 0; overflow: hidden; }
.viewport { position: relative; flex: 1; overflow: clip; touch-action: none; cursor: grab;
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.viewport.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world.cam-anim { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.layer { position: absolute; left: 0; top: 0; transition: opacity .35s ease .5s; }
.layer.off { opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: .2s; }
.abs { position: absolute; }

.band { position: absolute; top: 0; }
.band.a { background: var(--band-a); } .band.b { background: var(--band-b); }
.band-h { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 17px/1.1 var(--font-display); letter-spacing: .05em; color: var(--fg); text-align: center; }
.band-h small { font: 500 11px/1.2 var(--font-body); color: var(--fg-dim); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }
.band-h.here { color: var(--accent); }
/* Roadmap: pinned copy of the ChP header (outside the zoomed world, so fixed text size) */
.road-sticky { position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 9;
  box-shadow: 0 2px 6px rgba(0,0,0,.25); background: var(--band-b); }
.road-sticky > div { position: absolute; top: 0; height: 100%; padding: 0 4px; text-align: center;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px/34px var(--font-display); letter-spacing: .05em; color: var(--fg); }
.road-sticky > .a { background: var(--band-a); } .road-sticky > .b { background: var(--band-b); }
.road-sticky > .here { color: var(--accent); }
.road-sticky-group { position: absolute; left: 0; right: 0; top: 34px; height: 34px; z-index: 8; overflow: clip; pointer-events: none; }
.group-bar.pinned-src { visibility: hidden; }
.road-sticky-group .group-bar { pointer-events: auto; height: 34px !important; border-radius: 0 0 6px 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); transform-origin: 0 0;
  white-space: nowrap; overflow: hidden; }
.road-sticky-group .group-bar small { overflow: hidden; text-overflow: ellipsis; }
.road-sticky.cam-anim > div { transition: left .7s cubic-bezier(.2,.7,.2,1), width .7s cubic-bezier(.2,.7,.2,1); }
.here-flag { position: absolute; font: 700 11px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent); color: var(--accent-ink); padding: 4px 8px; border-radius: 999px; transform: translateX(-50%); white-space: nowrap; }
.step-h { position: absolute; font: 500 10px/1 var(--font-mono); color: var(--fg-faint); text-align: center; }
.group-bar { position: absolute; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 6px;
  color: #fff; font: 700 15px/1 var(--font-display); letter-spacing: .05em; }
.group-bar small { font: 500 12px/1 var(--font-body); letter-spacing: 0; opacity: .85; }
.group-bar .extras { margin-left: auto; display: flex; gap: 6px; }
.group-bar .extra { font: 600 12px/1 var(--font-body); letter-spacing: 0; background: rgba(0,0,0,.25); padding: 4px 8px; border-radius: 999px; }

.track { position: absolute; height: 8px; border-radius: 4px; opacity: .45; }
.repeat { position: absolute; height: 22px; display: flex; align-items: center; }
.repeat::before { content: ""; position: absolute; left: 0; right: 10px; top: 9px; height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--c) 0 8px, transparent 8px 14px); opacity: .8; }
.repeat::after { content: ""; position: absolute; right: 0; top: 4px; border: 7px solid transparent; border-left: 11px solid var(--c); border-right: 0; }
.repeat span { position: relative; margin: 0 auto; transform: translateY(-15px); font: 700 11px/1 var(--font-body);
  color: var(--fg); background: var(--surface); border: 1px solid var(--c); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.station { position: absolute; width: 184px; padding: 6px 9px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--c); font-size: 12px; line-height: 1.35; cursor: pointer; color: var(--fg); }
.station b { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); margin-right: 4px; }
.station.cur { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- challenge boxes ---------- */
.box {
  position: absolute; left: 0; top: 0; width: 208px; border-radius: 9px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  /* box filled with the type colour and the body painted over it, so the anti-aliased edge where the
     rounded clip meets the border blends into the border instead of showing a dark sliver */
  background: var(--c); border: 1px solid var(--c); box-shadow: 0 2px 0 rgba(0,0,0,.25);
  transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .3s, filter .3s, box-shadow .2s;
}
.box:hover { box-shadow: 0 0 0 2px var(--c); }
.box .hd { background: var(--c); color: #fff; display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
.box .hd .code { font: 700 14px/1 var(--font-mono); letter-spacing: .02em; }
.box .hd .new { font: 700 10px/1 var(--font-body); background: #fff; color: #000; padding: 2px 5px; border-radius: 4px; }
.box .hd .st { margin-left: auto; font: 700 11px/1 var(--font-body); padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.3); color: #fff; white-space: nowrap; }
.box .hd .st.done { background: #fff; color: #111; }
.box .hd .st.ready { background: rgba(0,0,0,.3); color: #fff; }
.box .hd .st.locked { background: rgba(0,0,0,.45); }
.box .bd { flex: 1; background: var(--surface); padding: 6px 9px 8px; display: grid; align-content: start; gap: 3px; font-size: 12px; line-height: 1.3; }
.box .nm { color: var(--fg-dim); font-style: italic; }
.box .un b, .box .mt b { color: var(--fg-dim); font-weight: 500; }
.box .mt { font-variant-numeric: tabular-nums; }
.box .stars { color: var(--accent); letter-spacing: 1px; }
.box .first { color: color-mix(in srgb, var(--c) 50%, var(--fg)); font-weight: 600; }
.box .roots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.box .roots i { font: 500 10.5px/1 var(--font-mono); font-style: normal; background: var(--surface-2); padding: 3px 5px; border-radius: 4px; }
.box.is-done { opacity: .38; filter: grayscale(.6); }
.track.is-done { opacity: .12; }
.station.is-done, .repeat.is-done, .pill.is-done { opacity: .35; filter: grayscale(.7); }
body.no-dim .track.is-done { opacity: .45; }
body.no-dim .station.is-done, body.no-dim .repeat.is-done, body.no-dim .pill.is-done { opacity: 1; filter: none; }
.box.collapsed { opacity: 0 !important; pointer-events: none; }
/* a selected box that isn't in the current layout stays hidden (it has no position there) */
.box.collapsed.hit { opacity: 0 !important; box-shadow: none; }
.group-bar.toggle { cursor: pointer; user-select: none; }
.group-bar.toggle:hover { filter: brightness(1.12); }
.group-bar .chev { display: inline-block; width: 14px; font-size: 12px; transition: transform .2s; }
.group-bar.is-col .chev { transform: rotate(-90deg); }
.box.is-done:hover { opacity: .9; }
body.no-dim .box.is-done { opacity: 1; filter: none; }
.box.dim, .station.dim, .track.dim, .repeat.dim { opacity: .12 !important; }
.box.hit { box-shadow: 0 0 0 3px var(--accent), 0 0 24px 4px color-mix(in srgb, var(--accent) 45%, transparent); opacity: 1 !important; filter: none !important; }
.box.path { box-shadow: 0 0 0 2px var(--accent); opacity: 1 !important; filter: none !important; }
.box.sel { box-shadow: 0 0 0 3px var(--fg); }

/* tree extras */
.tree-title { position: absolute; font: 700 16px/1.2 var(--font-display); letter-spacing: .05em; color: var(--fg); }
.tree-title small { display: block; font: 400 12px/1.3 var(--font-body); color: var(--fg-dim); letter-spacing: 0; margin-top: 2px; }
.pill { position: absolute; width: 120px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  color: #fff; font: 700 12px/1 var(--font-mono); cursor: pointer; border: 1px solid rgba(255,255,255,.35); }
svg.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.edges path { fill: none; stroke-width: 1.8; opacity: .75; transition: opacity .3s; }
svg.edges path.sec { stroke-dasharray: 6 5; }
svg.edges text { font: 600 11px var(--font-body); fill: var(--fg); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
svg.edges .dim { opacity: .08; }
svg.edges .on path { stroke-width: 3; opacity: 1; }

/* ---------- floating controls ---------- */
.zoom { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 6px; z-index: 10; }
.zoom button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; font-weight: 700; }
.credit { position: absolute; left: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 10; font-size: 11.5px; color: var(--fg-dim);
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; max-width: calc(100% - 90px); }
.credit a { color: var(--fg); }
.credit .cr-ver { opacity: .85; }

/* ---------- legend ---------- */
.legend { position: absolute; left: 16px; top: 12px; z-index: 15; width: min(330px, calc(100% - 32px)); max-height: calc(100% - 80px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); font-size: 13px; }
.legend h2 { font: 700 15px/1.2 var(--font-display); letter-spacing: .05em; margin: 0 0 8px; }
.legend h3 { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); margin: 14px 0 6px; }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.legend li { display: flex; gap: 8px; align-items: baseline; }
.legend .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; transform: translateY(2px); }
.legend .close { float: right; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--fg-dim); }
.legend label { display: flex; gap: 8px; align-items: center; cursor: pointer; }

/* ---------- details drawer ---------- */
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(430px, 100%); z-index: 30; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.drawer.open { transform: none; }
.drawer .dh { padding: 14px 18px 12px; border-bottom: 1px solid var(--line); background: var(--c); color: #fff; }
.drawer .dh .row { display: flex; align-items: center; gap: 10px; }
.drawer .dh h2 { font: 700 24px/1 var(--font-mono); margin: 0; }
.drawer .dh .type { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; background: rgba(0,0,0,.28); padding: 4px 8px; border-radius: 999px; }
.drawer .dh p { margin: 6px 0 0; font: 600 16px/1.25 var(--font-display); letter-spacing: .02em; }
.drawer .dh .x { margin-left: auto; border: 0; background: rgba(0,0,0,.28); color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 20px; }
.drawer .db { overflow: auto; padding: 6px 18px 28px; }
.drawer section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer section:last-child { border-bottom: 0; }
.drawer h3 { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); margin: 0 0 8px; }
.drawer dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; }
.drawer dt { color: var(--fg-dim); }
.drawer dd { margin: 0; min-width: 0; }
.drawer .stars { color: var(--accent); letter-spacing: 1px; }
.drawer .timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drawer .timeline li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.drawer .timeline li span:first-child { color: var(--fg-dim); font-size: 12px; padding-top: 1px; }
.drawer .timeline li.cur span:first-child { color: var(--accent); font-weight: 700; }
.drawer .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer .chip { border: 1px solid var(--c); background: var(--surface-2); border-radius: 6px; padding: 3px 8px; cursor: pointer; font: 600 12px/1.2 var(--font-mono); color: var(--fg); }
.drawer .chip small { font-family: var(--font-body); color: var(--fg-dim); font-weight: 500; }
.drawer .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.drawer .checks li { display: flex; gap: 8px; }
.drawer .checks .m { width: 18px; flex: none; text-align: center; font-weight: 700; }
.drawer .checks .y { color: var(--ok); } .drawer .checks .n { color: var(--bad); } .drawer .checks .q { color: var(--fg-faint); }
.drawer .checks small { color: var(--fg-dim); }
.drawer .hints .hint-when { margin: 10px 0 4px; font-size: 12.5px; }
.drawer .hints .hint-when:first-of-type { margin-top: 0; }
.drawer .hints .hint-when.now { color: var(--accent); font-weight: 600; }
.drawer .hints .have { color: var(--fg-dim); }
.drawer .prog { display: flex; align-items: center; gap: 10px; }
.drawer .prog .barx { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.drawer .prog .barx i { display: block; height: 100%; background: var(--c); }
.drawer .prog b { font: 700 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.drawer .links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drawer .links a { display: flex; gap: 8px; align-items: baseline; text-decoration: none; color: var(--fg); }
.drawer .links a::before { content: "↗"; color: var(--accent); font-weight: 700; }
.drawer .links a:hover { text-decoration: underline; }
.drawer details { margin-top: 8px; }
.drawer details summary { cursor: pointer; font-weight: 600; }
.drawer .wiki p { margin: 6px 0 0; white-space: pre-line; color: var(--fg); }
.drawer .wiki h4 { margin: 10px 0 0; font-size: 12px; color: var(--fg-dim); font-weight: 600; }
.drawer .muted { color: var(--fg-dim); }

/* ---------- import modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(3px); }
.modal .card { width: min(640px, 100%); max-height: calc(100% - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow); display: grid; gap: 12px; }
.modal h2 { font: 700 18px/1.2 var(--font-display); letter-spacing: .04em; margin: 0; }
.modal p { margin: 0; color: var(--fg-dim); }
.modal textarea { width: 100%; min-height: 220px; resize: vertical; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 12px/1.4 var(--font-mono); }
.modal .row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal .result { background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.modal .result.err { color: var(--bad); }

@media (max-width: 720px) {
  .brand small { display: none; }
  .bar { gap: 8px; padding: 8px 12px; }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .tools { margin-left: auto; }
  .drawer { top: auto; height: 78%; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; transform: translateY(105%); }
  .drawer.open { transform: none; }
  .credit { left: 12px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 3px 8px; font-size: 10.5px; }
  .credit .cr-src { display: none; }   /* phones: only the data date and page version */
  .drawer dl, .drawer .timeline li { grid-template-columns: 92px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .box, .world.cam-anim, .drawer, .layer { transition: none !important; }
}

/* compact boxes (Tree, Recommended): the guide's "when" line only means something on the Roadmap */
.compact .box .first { display: none; }
.pill.dim { opacity: .15; }

/* Recommended list */
.rec-empty { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; display: grid; gap: 10px; justify-items: start; }
.rec-empty h2 { margin: 0; font: 700 20px/1.2 var(--font-display); letter-spacing: .04em; }
.rec-empty p { margin: 0; color: var(--fg-dim); max-width: 60ch; }
.group-bar.rec-h { background: var(--surface-2); color: var(--fg); font-size: 14px; }
.group-bar.rec-h .stars { color: var(--accent); letter-spacing: 2px; }
.rec-row { position: absolute; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 9px;
  padding: 10px 14px; display: grid; gap: 6px; align-content: start; cursor: pointer; }
.rec-row:hover { border-color: var(--c); }
.rec-row .what { font-weight: 600; font-size: 14px; }
.rec-row .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--fg-dim); }
.rec-row .meta b { color: var(--fg); font-variant-numeric: tabular-nums; }
.rec-row .tag { font: 600 11px/1 var(--font-body); padding: 4px 7px; border-radius: 999px; background: var(--surface-2); color: var(--fg); }
.rec-row .rw { font-size: 12.5px; color: var(--fg-dim); }
.rec-row .hint { font-size: 12.5px; }
.rec-row .hint .have { color: var(--fg-dim); }
.rec-row .hint.short { color: color-mix(in srgb, var(--warn) 70%, var(--fg)); }
.rec-row .hint.ready { color: color-mix(in srgb, var(--ok) 70%, var(--fg)); }
.rec-row .hint.maybe, .rec-row .hint.soft { color: var(--fg-dim); }
.rec-row .tag.hint-down { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.rec-row .tag.hint-up, .rec-row .tag.hint-ok { background: color-mix(in srgb, var(--ok) 22%, transparent); }
.group-bar.rec-h small { margin-left: 4px; }
/* Later group: dimmed; collapsed rows show only the box header and a one-line row */
.rec-row.later, .box.rec-later { opacity: .55; }
.rec-row.later:hover, .box.rec-later:hover { opacity: 1; }
.box.rec-mini .bd { display: none; }
.measuring .box.rec-mini .bd { display: grid; }
.measuring .box { min-height: 0 !important; }   /* measure natural heights, not Recommended's stretched ones */
.rec-row.mini { padding: 0 12px; grid-template-columns: 1fr auto; align-items: center; align-content: center; gap: 10px; }
.rec-row.mini .what { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-row.mini .what .nm { font-weight: 600; }
@media (max-width: 720px) { .seg button { padding: 6px 10px; } }

.pill.path, .pill.hit { opacity: 1 !important; filter: none !important; box-shadow: 0 0 0 2px var(--accent); }
.pill.hit { box-shadow: 0 0 0 3px var(--accent), 0 0 18px 2px color-mix(in srgb, var(--accent) 45%, transparent); }

/* box header: code · reward stars · status chip; Max line: max on the left, playstyle meter on the right */
.box .hd .hstars { color: #ffe08a; font-size: 12px; letter-spacing: 1px; text-shadow: 0 1px 1px rgba(0,0,0,.45); white-space: nowrap; }
.box .mt { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.act { display: inline-flex; gap: 2px; align-items: flex-end; flex: none; }
.act i { width: 4px; border-radius: 1px; background: var(--fg-faint); opacity: .55; }
.act i.lit { background: var(--fg); opacity: 1; }
.act i:nth-child(1) { height: 5px; } .act i:nth-child(2) { height: 8px; } .act i:nth-child(3) { height: 11px; } .act i:nth-child(4) { height: 14px; }
.legend .act { vertical-align: middle; margin-right: 2px; }
.box.tight .hd { gap: 4px; padding: 5px 6px; }
.box.tight .hd .st { font-size: 10px; padding: 3px 5px; }
.box.tight .hd .hstars { letter-spacing: 0; font-size: 11px; }
.box .hd .st.maybe { background: transparent; border: 1px dashed rgba(255,255,255,.75); padding: 2px 6px; }
/* keep the zoom buttons clear of the open details panel */
.viewport.drawer-open .zoom { right: calc(min(430px, 100%) + 16px); transition: right .3s; }
@media (max-width: 720px) { .viewport.drawer-open .zoom { right: 16px; bottom: calc(78% + 12px); } }
/* the map is for dragging, not selecting: no text selection or native drag inside it (the details panel still allows both) */
.world, .world * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.drawer .hist { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.drawer .hist li { line-height: 1.4; }

/* Locked (and "? check") boxes: hollow header in the type colour, dimmed body. Maxed boxes fade instead. */
.box.is-locked, .box.is-maybe { background: var(--surface); }   /* outlined header: no type-colour fill behind it */
.box.is-locked .hd, .box.is-maybe .hd { background: transparent; color: var(--c); box-shadow: inset 0 -1px 0 var(--c); }
.box.rec-mini.is-locked .hd, .box.rec-mini.is-maybe .hd { box-shadow: none; }   /* header-only box: no divider line at its bottom edge */
.box.is-locked .hd .hstars, .box.is-maybe .hd .hstars { color: var(--accent); text-shadow: none; }
.box.is-locked .bd { opacity: .55; }
.box.is-maybe { border-style: dashed; }
.box.is-maybe .bd { opacity: .8; }
.box.is-locked .hd .st.locked { background: transparent; color: var(--fg); border: 1px solid var(--c); padding: 2px 6px; }
.box.is-maybe .hd .st.maybe { border-color: var(--fg-dim); color: var(--fg); }
.box.is-locked:hover .bd, .box.is-maybe:hover .bd { opacity: 1; }
.legend .act-key { white-space: nowrap; display: inline-block; }
.legend .act-key .act { margin-right: 4px; }

/* ---------- Rewards tab (a scrolling page over the map) ---------- */
.rewards { position: absolute; inset: 0; z-index: 12; overflow: auto; background: var(--bg); overscroll-behavior: contain; }
body[data-view="rewards"] .pane, body[data-view="rewards"] .zoom, body[data-view="rewards"] .credit { visibility: hidden; }
.rw-inner { max-width: 1180px; margin: 0 auto; padding: 20px 24px 60px; }
.rw-empty { position: static; margin-top: 10px; }
.rw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 6px; }
.rw-head h2 { margin: 0; font: 700 22px/1.2 var(--font-display); letter-spacing: .04em; }
.rw-head p { margin: 4px 0 0; }
.rw-all { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--fg-dim); font-size: 13px; }
.tree-title .rec-repeat { margin-top: 10px; font: 400 13px/1.3 var(--font-body); letter-spacing: 0; width: fit-content; }
.rw-group { margin-top: 22px; }
.rw-group h3 { font: 600 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-dim); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.rw-card { display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; padding: 11px 13px 10px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--fg);
  transition: opacity .15s, border-color .15s, background .15s; }
.rw-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rw-card.hit { box-shadow: 0 0 0 2px var(--accent); }
.rw-card.off { opacity: .5; }
/* two faces in one grid cell: the card is always as tall as the taller face, so flipping never moves the grid */
.rw-face { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-content: start; min-width: 0; }
.rw-bh span { min-width: 0; overflow-wrap: anywhere; }
.rw-back { visibility: hidden; gap: 2px; }
.rw-card.flip .rw-front { visibility: hidden; }
.rw-card.flip .rw-back { visibility: visible; }
.rw-card.flip { background: var(--surface-2); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0,0,0,.35); opacity: 1; }
.rewards.spot .rw-card:not(.flip) { opacity: .6; }
/* Firefox-based browsers sometimes leave unpainted patches when ~100 cards fade while the page scrolls,
   so the fade is opacity only (no filter) and switches off instantly while dragging */
.viewport.dragging .rw-card { transition: none; }
.rewards.spot .rw-card.off:not(.flip) { opacity: .35; }
.rw-bh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.rw-bh b { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; }
.rw-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 3px; }
.rw-row b { font: 600 13px/1.2 var(--font-mono); white-space: nowrap; }
.rw-pill { flex: none; }
.rw-mid { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-row b { flex: none; }
.rw-row.no b, .rw-row.no .rw-mid, .rw-row.no + .rw-sub { color: var(--fg-faint); }
.rw-sub { font-size: 11.5px; line-height: 1.3; color: var(--fg-dim); }
.rw-pill { font: 600 11px/1 var(--font-mono); padding: 4px 7px 3px; border-radius: 999px; border: 1px solid var(--c); border-left-width: 4px;
  background: var(--surface); color: var(--fg); white-space: nowrap; }
button.rw-pill { cursor: pointer; }
button.rw-pill:hover { background: color-mix(in srgb, var(--c) 30%, var(--surface)); }
.rw-v { font: 700 22px/1.15 var(--font-mono); font-variant-numeric: tabular-nums; }
.rw-card.full .rw-v { color: var(--accent); }
.rw-card.flag .rw-v { font-size: 16px; color: var(--ok); }
.rw-card.flag.off .rw-v { color: var(--fg-faint); }
.rw-l { font-weight: 600; font-size: 13px; line-height: 1.3; }
.rw-u { font-size: 11.5px; color: var(--fg-dim); line-height: 1.3; }
.rw-s { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rw-s i { font: 600 10.5px/1 var(--font-mono); font-style: normal; padding: 3px 5px 2px; border-radius: 4px; border-left: 3px solid var(--c); background: var(--surface-2); color: var(--fg-dim); }
.rw-s i.no { opacity: .45; }
.rw-foot { margin-top: 28px; font-size: 12px; max-width: 90ch; }
@media (max-width: 720px) {
  .rw-inner { padding: 14px 16px 60px; }
  .rw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .rw-v { font-size: 19px; }
}
.rewards .muted { color: var(--fg-dim); }
@media (max-width: 520px) { .seg { width: 100%; } .seg button { flex: 1 1 auto; padding: 6px 6px; font-size: 12px; white-space: nowrap; } }
.drawer .rwl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drawer .rwl li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.drawer .rwl li small { display: block; color: var(--fg-dim); font-size: 11.5px; }
.drawer .rwl li b { font: 600 13px/1.3 var(--font-mono); white-space: nowrap; text-align: right; }
.drawer .rwl li.no { color: var(--fg-dim); }
.drawer .rwl li.no b { color: var(--fg-faint); }
/* panels inside the map keep a normal cursor and native scrolling (touch too: the map itself has touch-action: none) */
.drawer, .legend { cursor: auto; touch-action: pan-y; overscroll-behavior: contain; }

/* Import split button: main part opens the window, the ▾ opens a small menu */
.split { position: relative; display: inline-flex; }
.split .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split .split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 7px 9px; border-left: 0;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.split .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 45; min-width: 210px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: grid; }
.split .menu button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.split .menu button:hover, .split .menu button:focus-visible { background: var(--surface-2); outline: none; }
.modal .row.left { justify-content: flex-start; }
.modal.drop .card { outline: 2px dashed var(--accent); outline-offset: 4px; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--accent); box-shadow: var(--shadow); font-size: 13px; cursor: pointer; }