/* FireRed Atlas — "night-route field guide": ink-dark chrome around a crisp pixel map, Pokédex red + item gold accents,
   an original pixel display face for headings and GBA-style dialogue boxes. Light theme = parchment field notes. */

@font-face {
  font-family: "Atlas Pixel";
  src: url("fonts/atlas-pixel.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", "Noto Sans", sans-serif;
  --mono: "Cascadia Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --pixel: "Atlas Pixel", var(--mono);
  --side-w: 268px;
  --insp-w: 404px;
  --top-h: 56px;
  --r: 10px;
  --red: #e8433f;
  --gold: #ffd65a;
  --good: #46d483;
  --bad: #ff5a4f;
  --warn: #ffaa28;
  --hm: #7aa8ff;
  --wild: #58d66e;
  --c-npc: #4cc9f0; --c-trainer: #ff5a4f; --c-item: #ffc83d; --c-hidden: #ff7ad9; --c-warp: #4fe08a; --c-sign: #e0a96d; --c-trigger: #b197fc;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root, [data-theme="dark"] {
  --bg: #0b0e17;
  --stage: #070910;
  --stage-dot: rgba(140, 160, 210, .09);
  --panel: #111624;
  --panel-2: #171d2e;
  --panel-3: #1e2539;
  --line: #252d44;
  --line-2: #323c58;
  --text: #ece6d6;
  --text-2: #c3c6d2;
  --muted: #8a92a8;
  --glass: rgba(13, 16, 27, .86);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --chip: #1c2336;
  --track: #232a3f;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #ece5d6;
  --stage: #ddd4c1;
  --stage-dot: rgba(90, 70, 40, .13);
  --panel: #f8f4ea;
  --panel-2: #f1ebdd;
  --panel-3: #e8e0cf;
  --line: #d8cdb8;
  --line-2: #c6b99f;
  --text: #1b1f2c;
  --text-2: #353a4b;
  --muted: #6c6b70;
  --glass: rgba(250, 246, 236, .93);
  --shadow: 0 10px 28px rgba(60, 40, 10, .18);
  --chip: #e7dfcd;
  --track: #e2d9c6;
  --red: #c9302c;
  --gold: #b07d00;
  --good: #1f9a55;
  --c-item: #c99400;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text); font: 14px/1.45 var(--font);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--c-npc); }
code, .mono { font-family: var(--mono); font-size: .92em; }
kbd {
  font: 11px/1 var(--mono); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--line-2);
  border-bottom-width: 2px; color: var(--muted); background: var(--panel-2);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #000; padding: 6px 10px; border-radius: 6px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; }
.empty { color: var(--muted); padding: 10px 2px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------------------------------- layout */
.app {
  display: grid; height: 100dvh;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--insp-w);
  grid-template-rows: var(--top-h) minmax(0, 1fr);
  grid-template-areas: "top top top" "side stage insp";
}
.topbar { grid-area: top; }
.sidebar { grid-area: side; }
.stage { grid-area: stage; }
.inspector { grid-area: insp; }

/* ------------------------------------------------------------------------------------------- top bar */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 0 14px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.topbar::after { /* thin Pokédex-red rule */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--red) 0 var(--side-w), transparent var(--side-w));
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: calc(var(--side-w) - 28px); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative;
  background: linear-gradient(var(--red) 0 46%, #151a28 46% 54%, #f6efe0 54%); box-shadow: inset 0 0 0 2px #151a28;
}
.brand-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #f6efe0; box-shadow: 0 0 0 2px #151a28; }
.brand-name { font: 20px/1 var(--pixel); letter-spacing: 1px; white-space: nowrap; font-synthesis: none; }
.brand-name b { font-weight: 400; color: var(--red); }
.searchbox {
  flex: 1; min-width: 0; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px 0 12px;
  border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); cursor: text; text-align: left;
  transition: border-color .15s, background .15s;
}
.searchbox:hover { border-color: var(--muted); }
.sb-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-ico { display: flex; }
.top-actions { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.ico-slot { display: inline-flex; }

/* ------------------------------------------------------------------------------------------- buttons, chips, pills */
.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:hover { background: var(--panel-3); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.sm { height: 28px; padding: 0 9px; font-size: 12.5px; }
.btn.xs { height: 24px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; }
.btn.sm .ico, .btn.xs .ico { width: 15px; height: 15px; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-3); border-color: var(--line-2); }
.btn.on { background: color-mix(in srgb, var(--wild) 22%, var(--panel-2)); border-color: var(--wild); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.btn.primary:hover { background: color-mix(in srgb, var(--red) 85%, #fff); }
.icon-btn {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; color: var(--text-2);
}
.icon-btn:hover { background: var(--panel-3); border-color: var(--line-2); color: var(--text); }
.icon-btn.sm { width: 30px; height: 30px; }
.only-narrow { display: none; }
.link { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.link:hover { text-decoration-color: var(--gold); color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--chip); cursor: pointer; font-size: 12.5px;
}
.chip:hover { border-color: var(--gold); }
.chip .dir { font-weight: 700; color: var(--gold); }
.chip .ico { width: 14px; height: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; line-height: 18px;
  background: var(--chip); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap;
}
.pill .ico { width: 13px; height: 13px; }
.pill.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill.hm { color: var(--hm); border-color: color-mix(in srgb, var(--hm) 45%, transparent); }
.pill.wild { color: var(--wild); border-color: color-mix(in srgb, var(--wild) 45%, transparent); }
.pill.money, .price { color: var(--gold); font-variant-numeric: tabular-nums; }
.price { font-weight: 600; margin-left: auto; padding-left: 8px; white-space: nowrap; }
.facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.types { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.type {
  display: inline-block; padding: 0 6px; border-radius: 4px; font: 700 10.5px/17px var(--font); letter-spacing: .4px; text-transform: uppercase;
  color: #fff; background: var(--tc, #888); text-shadow: 0 1px 0 rgba(0, 0, 0, .45); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.lv { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.qty { font-family: var(--mono); font-size: 12px; color: var(--gold); }
.input {
  width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  font: inherit;
}
.input:focus { outline: none; border-color: var(--gold); }

/* pictures (sprites / icons) */
.mon { width: 64px; height: 64px; object-fit: contain; }
.mon.xl { width: 128px; height: 128px; }
.mon.lg { width: 96px; height: 96px; }
.mon.md { width: 56px; height: 56px; }
.mon.sm { width: 36px; height: 36px; }
.mon.xs { width: 28px; height: 28px; }
.itm { width: 24px; height: 24px; }
.itm.lg { width: 48px; height: 48px; }
.itm.sm { width: 24px; height: 24px; }
.itm.xs { width: 22px; height: 22px; }
.tpic { width: 80px; height: 80px; object-fit: contain; }
.pic-missing { display: inline-block; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--line-2) 0 30%, transparent 32%), var(--panel-3); }
.mon.pic-missing, .tpic.pic-missing { transform: scale(.6); }
.itm.pic-missing { border-radius: 6px; }

/* ------------------------------------------------------------------------------------------- sidebar */
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; scrollbar-width: thin;
}
.side-sec { padding: 12px 12px 4px; }
.side-label { font: 10px/1 var(--pixel); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 2px 8px; }
.regions { display: grid; gap: 4px; }
.region {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; text-align: left; color: var(--text-2);
}
.region:hover { background: var(--panel-2); }
.region.on { background: color-mix(in srgb, var(--red) 16%, var(--panel-2)); border-color: color-mix(in srgb, var(--red) 50%, transparent); color: var(--text); }
.region .ico { width: 16px; height: 16px; color: var(--muted); }
.side-list { padding: 4px 8px 24px; }
.grp { margin-top: 4px; }
.grp > summary, .sub > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 8px; border-radius: 7px; user-select: none;
}
.grp > summary::-webkit-details-marker, .sub > summary::-webkit-details-marker { display: none; }
.grp > summary { font-weight: 650; color: var(--text); }
.grp > summary:hover, .sub > summary:hover { background: var(--panel-2); }
.grp > summary .ico { width: 16px; height: 16px; color: var(--red); }
.grp > summary::after, .sub > summary::after {
  content: ""; margin-left: 4px; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.grp[open] > summary::after, .sub[open] > summary::after { transform: rotate(45deg); }
.count { margin-left: auto; font: 11px var(--mono); color: var(--muted); }
.sub { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 4px; }
.sub > summary { font-size: 13px; color: var(--text-2); padding: 5px 8px; }
.map-row {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 8px 5px 12px; border: 0; border-radius: 6px;
  background: none; cursor: pointer; text-align: left; font-size: 13px; color: var(--text-2);
}
.grp > .map-row { margin-left: 4px; width: calc(100% - 4px); }
.map-row:hover { background: var(--panel-2); color: var(--text); }
.map-row.on { background: color-mix(in srgb, var(--gold) 14%, var(--panel-2)); color: var(--text); box-shadow: inset 2px 0 0 var(--gold); }
.map-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-badges { display: inline-flex; gap: 4px; align-items: center; }
.b { font: 10.5px/16px var(--mono); padding: 0 5px; border-radius: 4px; background: var(--panel-3); color: var(--muted); }
.b.tr { color: var(--c-trainer); }
.b.it { color: var(--c-item); }
.b.wild { background: none; color: var(--wild); padding: 0; display: inline-flex; }
.b.wild .ico { width: 13px; height: 13px; }

/* ------------------------------------------------------------------------------------------- stage */
.stage {
  position: relative; overflow: hidden; background-color: var(--stage);
  background-image: radial-gradient(var(--stage-dot) 1px, transparent 1.4px);
  background-size: 16px 16px;
}
.stage::after { /* vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .28));
}
[data-theme="light"] .stage::after { background: radial-gradient(ellipse at center, transparent 60%, rgba(90, 60, 20, .12)); }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; outline: none; }
#map.panning { cursor: grabbing; }
#map:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.stage-top { position: absolute; top: 12px; left: 12px; right: 72px; display: flex; pointer-events: none; z-index: 2; }
.crumbs {
  pointer-events: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px 6px 12px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px); max-width: 100%;
}
.crumb { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 0; font-size: 12.5px; }
.crumb:hover { color: var(--gold); }
.crumb::after { content: "›"; margin-left: 6px; color: var(--line-2); }
.crumb-title { font: 20px/1 var(--pixel); letter-spacing: .5px; padding: 2px 4px 0 0; font-synthesis: none; }
.crumb-kind { font-size: 12px; color: var(--muted); padding-right: 6px; }
.zoom {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.zoom-label { font-size: 10.5px; color: var(--muted); min-width: 36px; text-align: center; padding: 2px 0; }
.legend {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; justify-content: center; pointer-events: none;
}
.legend-chips {
  pointer-events: auto; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; padding: 6px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px); max-width: 100%;
}
.legend-toggle { display: none; pointer-events: auto; }
.ov {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line-2); background: transparent; cursor: pointer; color: var(--muted); transition: all .15s;
}
.ov .sw { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--c); background: transparent; transition: background .15s; }
.ov.on { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ov.on .sw { background: var(--c); }
.ov:hover { border-color: var(--c); }
.loadbar { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; overflow: hidden; opacity: 0; transition: opacity .3s; }
.loadbar.on { opacity: 1; }
.loadbar::before {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: slide 1.1s infinite linear;
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.tooltip {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; max-width: 280px; padding: 8px 10px; border-radius: 9px;
  background: var(--glass); border: 1px solid var(--line-2); box-shadow: var(--shadow); backdrop-filter: blur(10px); font-size: 12.5px;
}
.tt-head { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.tt-head .mono { color: var(--gold); font-size: 11.5px; }
.tt-terrain { color: var(--muted); font-size: 12px; }
.tt-ev { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tt-ev .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.tt-wild { margin-top: 3px; color: var(--wild); }
.tt-more { color: var(--muted); font-size: 11.5px; }
.stage-msg {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; z-index: 3; gap: 4px;
}
.stage-msg h2 { font: 20px var(--pixel); margin: 0 0 8px; }
.stage-msg code { background: var(--panel-2); padding: 2px 6px; border-radius: 5px; }

/* ------------------------------------------------------------------------------------------- inspector */
.inspector {
  background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; position: relative;
}
.sheet-grip { display: none; }
.insp-bar {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line); flex: none;
}
.insp-bar-title { font: 10px/1 var(--pixel); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); flex: 1; min-width: 0; padding-left: 4px; }
#insp-back:not([hidden]) + .insp-bar-title { flex: 1; }
.insp-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 40px; flex: 1; scrollbar-width: thin; outline: none; }
.insp-head { padding: 14px 0 12px; border-bottom: 1px dashed var(--line); }
.kicker { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; }
.insp-title { font: 20px/1.25 var(--pixel); margin: 6px 0 4px; letter-spacing: .3px; font-weight: 400; font-synthesis: none; overflow-wrap: anywhere; }
.insp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.coord { color: var(--gold); font-size: 13px; padding-right: 4px; white-space: pre; }
.hint { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
.hint .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--c-npc); }
.sec { padding: 14px 0 6px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 10px/1 var(--pixel); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-2); font-weight: 400; font-synthesis: none;
}
.sec-title .ico { width: 15px; height: 15px; color: var(--red); }
details.sec > summary { cursor: pointer; font-weight: 600; color: var(--text-2); }
.terrain { display: flex; gap: 12px; align-items: flex-start; }
.terrain p { margin: 2px 0 0; }
.swatch { width: 34px; height: 34px; border-radius: 8px; flex: none; background: var(--panel-3); border: 1px solid var(--line-2); position: relative; }
.swatch::after { content: ""; position: absolute; inset: 9px; border-radius: 3px; background: var(--muted); }
.swatch.cat-grass::after { background: var(--wild); }
.swatch.cat-water::after { background: #4696ff; }
.swatch.cat-ledge::after { background: var(--warn); }
.swatch.cat-ice::after { background: #aae6ff; }
.swatch.cat-warp::after, .swatch.cat-door::after { background: var(--c-warp); }
.swatch.cat-wall::after, .swatch.cat-furniture::after { background: #a77a5a; }
.swatch.cat-hazard::after { background: var(--bad); }
.swatch.cat-sign::after { background: var(--c-sign); }
.swatch.cat-interact::after { background: var(--c-npc); }
.swatch.cat-puzzle::after { background: var(--gold); }

/* skeleton */
.skel-wrap { padding: 18px 0; display: grid; gap: 12px; }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.skel.block { height: 90px; border-radius: 10px; }
.skel.w60 { width: 60%; height: 22px; } .skel.w40 { width: 40%; } .skel.w80 { width: 80%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* encounter tables */
.enc { margin: 4px 0 12px; }
.enc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.enc-head .ico { width: 16px; height: 16px; color: var(--wild); }
.enc-title { font-weight: 650; }
.enc-head .muted { margin-left: auto; }
.enc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.enc-rows li {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(64px, 1fr) auto; gap: 8px; align-items: center;
  padding: 2px 6px 2px 2px; border-radius: 8px; background: var(--panel-2);
}
.enc-mon { display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; text-align: left; }
.enc-mon:hover .enc-name { color: var(--gold); }
.enc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.bar { position: relative; height: 16px; border-radius: 5px; background: var(--track); overflow: hidden; display: block; min-width: 50px; }
.bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: linear-gradient(90deg, color-mix(in srgb, var(--wild) 70%, transparent), var(--wild)); border-radius: 5px; }
.bar > span { position: relative; font: 600 10.5px/16px var(--mono); padding-left: 6px; color: var(--text); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.bar.sm { height: 14px; width: 70px; flex: none; }
.bar.sm > span { line-height: 14px; }
.slots summary, .variants summary, .rematch summary, .inside summary { cursor: pointer; color: var(--muted); font-size: 12.5px; margin: 6px 0; }
.slot-list { margin: 0; padding-left: 4px; list-style: none; font-size: 12px; columns: 2; }

/* event cards */
.card {
  border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--r); background: var(--panel-2); margin: 0 0 12px; overflow: hidden;
}
.card.conditional { border-left-style: dashed; }
.card-head { display: flex; gap: 10px; align-items: center; padding: 10px 10px 8px; }
.card-titles { flex: 1; min-width: 0; }
.card-titles h4 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; }
.card-sub { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 3px; }
.cat-tag { font: 10px/16px var(--pixel); text-transform: uppercase; letter-spacing: 1px; color: var(--c); font-synthesis: none; }
.card-actions { display: flex; flex-direction: column; gap: 3px; align-self: flex-start; }
.card-actions .btn.on { background: var(--panel-3); border-color: var(--line-2); }
.card-sprite {
  width: 52px; height: 64px; flex: none; display: grid; place-items: end center; border-radius: 8px; padding-bottom: 4px;
  background: radial-gradient(ellipse 60% 18% at 50% 88%, color-mix(in srgb, var(--c) 45%, transparent), transparent), var(--panel-3);
}
.card-sprite .sprite { max-width: 48px; max-height: 64px; width: auto; height: auto; transform: scale(2); transform-origin: bottom center; margin-bottom: 4px; }
.card-sprite .sprite.pic-missing { width: 26px; height: 26px; background: var(--c); transform: none; margin: auto; }
.card-ico { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--panel-3)); }
.card-body { padding: 0 12px 12px; }
.summary { margin: 0 0 8px; color: var(--text-2); }
.cond-note { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.cond-note .ico { width: 14px; height: 14px; }
.flag { color: var(--text-2); font-style: italic; border-bottom: 1px dotted var(--line-2); cursor: help; }
.const { border-bottom: 1px dotted var(--line-2); cursor: help; color: var(--text); }
.hm-note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; }
.hm-note p { margin: 0; color: var(--text-2); font-size: 13px; }
.howto { background: color-mix(in srgb, var(--c-hidden) 10%, var(--panel-3)); border-radius: 8px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.howto p { margin: 2px 0 0; color: var(--text-2); }

/* trainer */
.trainer-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.trainer-head .tpic { background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c-trainer) 25%, transparent), transparent 70%); border-radius: 10px; }
.tclass { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.tname { font: 20px/1.2 var(--pixel); font-synthesis: none; }
.party { display: grid; gap: 6px; margin-bottom: 10px; }
.party-mon { display: flex; gap: 8px; padding: 6px; border-radius: 9px; background: var(--panel-3); }
.party-pic { background: none; border: 0; padding: 0; cursor: pointer; flex: none; }
.party-info { min-width: 0; flex: 1; }
.party-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.held { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.moves { list-style: none; padding: 0; margin: 5px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.moves li { font-size: 12px; padding: 1px 6px 1px 8px; border-radius: 5px; background: var(--panel-2); border-left: 3px solid var(--tc, var(--line-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
.rematch-row { margin: 6px 0; }
.party-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.pm { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px 0 0; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3); cursor: pointer; font: 11px var(--mono); }
.static-mon { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; background: var(--panel-3); margin-bottom: 10px; }

/* items */
.item-detail { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.item-big { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: radial-gradient(circle, color-mix(in srgb, var(--c-item) 18%, transparent), transparent 70%), var(--panel-3); cursor: pointer; }
.item-name { font-weight: 650; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.item-detail p { margin: 6px 0 0; font-size: 13px; }
.move-block { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--panel-3); border-left: 3px solid var(--tc); }
.move-block p { margin: 4px 0 0; }
.item-link, .mon-link { font-weight: 550; }
.mon-link .mon.sm { width: 30px; height: 30px; margin: -6px 0; }

/* warp */
.warp-dest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.warp-frame { display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #0b0e17; cursor: pointer; margin-bottom: 8px; }
.warp-frame:hover { border-color: var(--c-warp); }
.warp-preview { display: block; width: 100%; height: auto; }

/* interaction tree */
.interactions { margin-top: 4px; }
.tree { display: grid; gap: 7px; }
.node { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.node-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--panel-3); color: var(--text-2); }
.node-ico .ico { width: 15px; height: 15px; }
.node-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding-top: 2px; }
.verb { color: var(--muted); }
.n-item .node-ico { color: var(--c-item); }
.n-take .node-ico { color: var(--warn); }
.n-mon .node-ico, .n-wild .node-ico { color: var(--wild); }
.n-heal .node-ico { color: #ff8fb1; }
.n-warp .node-ico { color: var(--c-warp); }
.n-money .node-ico { color: var(--gold); }
.n-badge .node-ico { color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--panel-3)); }
.n-flag .node-ico { color: var(--c-trigger); }
.n-flag.minor { display: none; }
.show-flags .n-flag.minor { display: flex; opacity: .75; }
.n-note .node-body { color: var(--text-2); font-style: italic; }
.n-unknown, .n-goto { opacity: .7; }
.n-battle, .n-shop { display: block; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--c-trainer) 7%, var(--panel-3)); border: 1px solid color-mix(in srgb, var(--c-trainer) 25%, transparent); }
.n-shop { background: color-mix(in srgb, var(--c-item) 6%, var(--panel-3)); border-color: color-mix(in srgb, var(--c-item) 22%, transparent); }
.battle-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.battle-head .ico { color: var(--c-trainer); width: 16px; height: 16px; }
.n-shop .battle-head .ico { color: var(--c-item); }
table.shop { width: 100%; border-collapse: collapse; font-size: 13px; }
table.shop td { padding: 3px 0; border-top: 1px solid var(--line); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
table.shop .num { color: var(--gold); font-family: var(--mono); font-size: 12.5px; }
.branch { display: grid; gap: 4px; }
details.if { border-left: 2px solid var(--c-trigger); padding-left: 10px; margin-left: 2px; }
details.if.else { border-left-color: var(--line-2); }
details.if > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; padding: 2px 0 6px;
}
details.if > summary::-webkit-details-marker { display: none; }
details.if > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg);
  transition: transform .15s; margin-right: 2px;
}
details.if[open] > summary::before { transform: rotate(45deg); }
.kw { font: 10px/16px var(--pixel); text-transform: uppercase; letter-spacing: 1px; color: var(--c-trigger); font-synthesis: none; }
.else > summary .kw { color: var(--muted); }
.cond { color: var(--text); }

/* GBA dialogue boxes */
.dlg { display: grid; gap: 4px; position: relative; }
.dlg-label { font: 10px/1 var(--pixel); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin: 2px 0 1px; font-synthesis: none; }
.dlg-speaker {
  justify-self: start; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 5px 5px 0 0; margin-bottom: -5px;
  background: #3a4a63; color: #f3f6fb; position: relative; z-index: 1; margin-left: 10px;
}
.dlg-page {
  margin: 0; position: relative; white-space: pre-line; color: #2b2f38; background: #fbfbf6; font-size: 13px; line-height: 1.55;
  padding: 8px 22px 8px 12px; border-radius: 7px; border: 2px solid #4b5a70;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #c9d3de, 0 2px 0 rgba(0, 0, 0, .25);
}
.dlg-sign .dlg-page { background: #f6e8c6; color: #3b2a12; border-color: #7a5a2f; box-shadow: inset 0 0 0 2px #fff4dc, inset 0 0 0 4px #d8bd86, 0 2px 0 rgba(0, 0, 0, .25); }
.dlg-msg .dlg-page, .dlg-auto .dlg-page { background: #eef3f8; }
.dlg-defeat .dlg-page { border-color: #8a3a35; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #e7c3bf, 0 2px 0 rgba(0, 0, 0, .25); }
.dlg-more { position: absolute; right: 9px; bottom: 5px; color: #d0342c; font-size: 10px; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.dlg-choice { justify-self: end; display: flex; gap: 2px; padding: 4px 10px; background: #fbfbf6; color: #2b2f38; border: 2px solid #4b5a70; border-radius: 7px; font: 10px/1.6 var(--pixel); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #c9d3de; }
.dlg-choice span { padding: 0 6px; }
.dlg-choice.menu { flex-direction: column; font: 12.5px/1.5 var(--font); gap: 0; padding: 5px 10px; }
.dlg-choice.menu span::before { content: "▶"; color: transparent; margin-right: 3px; font-size: 9px; }
.dlg-choice.menu span:first-child::before { color: #d0342c; }
.dlg-expand {
  justify-self: center; border: 1px dashed var(--line-2); background: none; color: var(--muted); border-radius: 999px; padding: 1px 12px;
  font-size: 12px; cursor: pointer;
}
.dlg-expand:hover { color: var(--text); border-color: var(--muted); }
.dlg-braille .dlg-page { background: #e9e3d6; font-style: italic; }
.dlg-choice span:first-child::before { content: "▶"; color: #d0342c; margin-right: 3px; }
.code { display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: 4px; background: #dbe6f5; color: #1c3c78; font: 700 11.5px/17px var(--mono); vertical-align: 1px; white-space: nowrap; }
.code.var { background: #eadff5; color: #5a2c86; }

/* event rows (nearby / overview) */
.near { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ev-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; border: 0; background: none; cursor: pointer; text-align: left; }
.ev-row:hover { background: var(--panel-2); }
.ev-row .dot { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, var(--panel-2)); flex: none; }
.ev-row .dot .ico { width: 14px; height: 14px; }
.ev-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.map-script { margin-bottom: 8px; }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
.legend-list .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--c); margin-right: 8px; vertical-align: -1px; }

/* species / item panels */
.mon-head { display: flex; gap: 14px; align-items: center; }
.mon-hero { width: 128px; height: 128px; flex: none; border-radius: 16px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tc) 40%, transparent), transparent 70%), var(--panel-2); }
.stats { display: grid; gap: 4px; }
.stat { display: grid; grid-template-columns: 34px 32px 1fr; gap: 8px; align-items: center; font-size: 12.5px; }
.stat-k { color: var(--muted); }
.stat-v { text-align: right; }
.stat-bar { height: 8px; border-radius: 4px; background: var(--track); position: relative; overflow: hidden; }
.stat-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 4px; background: hsl(calc(var(--h) * 1deg), 70%, 55%); }
.where-group { margin-bottom: 12px; }
.where-group h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; font-size: 13px; }
.where-group h4 .ico { width: 15px; height: 15px; color: var(--wild); }
.where-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.where-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 0; background: var(--panel-2); cursor: pointer; text-align: left; }
.where-row:hover:not(:disabled) { background: var(--panel-3); }
.where-row:disabled { opacity: .5; cursor: default; }
.where-map { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where-row .price { margin-left: 0; }
.go { color: var(--muted); display: flex; }
.go .ico { width: 14px; height: 14px; }
table.learnset { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
table.learnset td { padding: 3px 4px; border-top: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; margin: 8px 0 10px; }
.tab { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: none; cursor: pointer; font-weight: 600; color: var(--muted); }
.tab.on { background: var(--red); border-color: var(--red); color: #fff; }
.dex-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.dex-row { width: 100%; display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 2px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; }
.dex-row:hover { background: var(--panel-2); }
.dex-name { flex: 1; font-weight: 550; }

/* ------------------------------------------------------------------------------------------- palette */
.palette { position: fixed; inset: 0; z-index: 50; background: rgba(4, 6, 12, .55); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.pal-box { width: min(660px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); overflow: hidden; animation: pop .16s var(--ease); }
@keyframes pop { from { transform: translateY(-8px) scale(.985); opacity: 0; } }
.pal-top { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.pal-top .ico { color: var(--muted); }
.pal-input { flex: 1; height: 54px; border: 0; background: none; color: var(--text); font: 16px var(--font); outline: none; }
.pal-results { overflow-y: auto; padding: 6px; }
.pal-group { display: flex; align-items: center; gap: 7px; padding: 10px 10px 4px; font: 10px/1 var(--pixel); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-synthesis: none; }
.pal-group .ico { width: 13px; height: 13px; color: var(--red); }
.pal-opt { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer; min-height: 38px; }
.pal-opt[aria-selected="true"] { background: var(--panel-3); box-shadow: inset 2px 0 0 var(--gold); }
.pal-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--muted); }
.pal-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-label mark { background: none; color: var(--gold); font-weight: 700; }
.pal-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pal-empty { padding: 22px 14px; color: var(--muted); text-align: center; }
.pal-empty .chip { margin: 3px; }
.pal-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pal-foot kbd { margin: 0 1px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: all .25s var(--ease); z-index: 60; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 19; }

/* ------------------------------------------------------------------------------------------- floor switcher */
.stage-top { flex-direction: column; align-items: flex-start; gap: 6px; }
.floors {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.floors-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.floors-btns { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.floor {
  position: relative; min-width: 34px; height: 28px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2);
  font: 10px/1 var(--pixel); color: var(--text-2); cursor: pointer; font-synthesis: none; white-space: nowrap;
}
.floor:hover { border-color: var(--gold); color: var(--text); }
.floor.on { background: var(--gold); border-color: var(--gold); color: #1a1406; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.floor.lift { border-style: dashed; }
.floor-dot { position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-trainer); }
.floor.on .floor-dot { background: #7a1a10; }
.tt-hint { margin-top: 3px; color: var(--c-warp); font-size: 11.5px; }

/* ------------------------------------------------------------------------------------------- tool pages */
.top-actions .btn.on { background: color-mix(in srgb, var(--red) 18%, var(--panel-2)); border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.page {
  position: fixed; z-index: 12; top: var(--top-h); left: var(--side-w); right: 0; bottom: 0; background: var(--bg);
  display: flex; flex-direction: column; animation: pop .16s var(--ease);
}
.page-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.page-title { font: 20px/1 var(--pixel); margin: 0; flex: 1; font-weight: 400; font-synthesis: none; }
.page-body { flex: 1; min-height: 0; overflow: auto; }
.chip-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 6px; line-height: 0; }
.chip-btn .type { opacity: .55; transition: opacity .12s; }
.chip-btn:hover .type, .chip-btn.on .type { opacity: 1; }
.chip-btn.on .type { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--gold); }
.types.wrap { flex-wrap: wrap; gap: 4px; }
.mgroups .chip-btn .type, .tc-summary .chip-btn .type { opacity: 1; }
.input.sm { height: 30px; width: auto; padding: 0 6px; font-size: 12.5px; }

/* TM finder */
.tm-page { display: grid; grid-template-columns: minmax(330px, 440px) minmax(0, 1fr); height: 100%; min-height: 0; }
.tm-side { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-right: 1px solid var(--line); min-height: 0; background: var(--panel); }
.tm-ctl { justify-content: space-between; }
.tm-ctl .tabs { margin: 0; }
.tm-types { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.tm-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 120px; scrollbar-width: thin; }
.tm-row {
  width: 100%; display: grid; grid-template-columns: 26px 44px minmax(0, 1fr) auto 32px 24px; gap: 8px; align-items: center; padding: 4px 6px;
  border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left;
}
.tm-row:hover { background: var(--panel-2); }
.tm-row.on { background: var(--panel-3); box-shadow: inset 2px 0 0 var(--gold); }
.tm-num { color: var(--gold); font-size: 12px; }
.tm-move { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-pow { text-align: right; }
.tm-src { font: 11px/18px var(--mono); text-align: center; border-radius: 5px; background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.tm-src.none { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.tm-detail { padding: 18px 26px 40px; overflow-y: auto; min-height: 0; max-width: 860px; }
.tm-head { display: flex; gap: 16px; align-items: center; }
.tm-head .itm.lg { width: 64px; height: 64px; padding: 6px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); }
.tm-desc { font-size: 15px; color: var(--text-2); max-width: 64ch; }
.tm-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tm-places .where-row { padding: 9px 10px; }
.tm-places .where-map { white-space: normal; }
.tm-place-ico { color: var(--c-item); display: flex; }
.tm-place-ico .ico { width: 16px; height: 16px; }
.learners { display: flex; flex-wrap: wrap; gap: 2px; }
.learner { background: var(--panel-2); border: 1px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; line-height: 0; }
.learner:hover { border-color: var(--gold); }

/* type chart */
.tc-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; padding: 14px 20px 30px; align-items: start; }
.tc-main { min-width: 0; }
.tc-scroll { overflow: auto; max-width: 100%; }
table.tc { border-collapse: separate; border-spacing: 2px; font: 600 12px/1 var(--mono); }
.tc th { position: sticky; background: var(--bg); z-index: 1; padding: 0; }
.tc thead th { top: 0; z-index: 2; }
.tc tbody th { left: 0; text-align: right; padding-right: 4px; }
.tc thead th:first-child { left: 0; z-index: 3; }
.tc-corner { font: 9px/1.3 var(--mono); color: var(--muted); vertical-align: bottom; text-align: left !important; min-width: 84px; }
.tc-corner span { display: block; }
.tc-col {
  width: 30px; height: 26px; border: 0; border-radius: 5px; background: var(--tc); color: #fff; font: 700 9.5px/26px var(--font);
  letter-spacing: .3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); cursor: pointer; padding: 0;
}
.tc-row { background: none; border: 0; padding: 0; cursor: pointer; }
.tc th.hl .tc-col, .tc th.hl .type { box-shadow: 0 0 0 2px var(--gold); }
.tc td { width: 30px; height: 26px; font: 700 13px/1 var(--font); text-align: center; border-radius: 5px; background: var(--panel-2); color: var(--text); cursor: default; }
.tc td.hl { filter: brightness(1.35); }
[data-theme="light"] .tc td.hl { filter: brightness(.9); }
.tc td.x { outline: 2px solid var(--gold); outline-offset: -1px; }
.m-2 { --m: #2f9e55; } .m-4 { --m: #1f7a3f; } .m-0_5 { --m: #c4473f; } .m-0_25 { --m: #8f2a24; } .m-0 { --m: #11131a; } .m-1 { --m: var(--panel-2); }
.tc td.m-2, .tc td.m-0_5, .tc td.m-0 { background: var(--m); color: #fff; }
.tc td.m-0 { color: #c9cbd3; box-shadow: inset 0 0 0 1px #3b3f4f; }
.tc-readout { min-height: 20px; margin: 8px 0 4px; font-size: 13px; color: var(--text-2); }
.tc-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.tc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tc-legend i { display: inline-grid; place-items: center; width: 22px; height: 18px; border-radius: 4px; background: var(--m); color: #fff; font: 700 12px var(--font); font-style: normal; }
.tc-legend i.m-1 { border: 1px solid var(--line-2); }
.tc-foot { max-width: 620px; margin-top: 8px; }
.tc-side { display: grid; gap: 18px; min-width: 0; }
.tc-summary h4, .calc h4 { margin: 0 0 6px; font-size: 13px; }
.tc-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mgroups { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 10px; align-items: start; }
.mgroups dt { font-size: 12px; font-weight: 650; white-space: nowrap; padding: 2px 6px; border-radius: 5px; border-left: 4px solid var(--m, var(--line-2)); background: var(--panel-2); }
.mgroups dd { margin: 0; padding-top: 1px; }
.calc-pick { margin-bottom: 10px; }

@media (max-width: 1180px) {
  .tc-page { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .page { left: 0; }
  .tm-page { grid-template-columns: 1fr; height: auto; }
  .tm-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .tm-list { max-height: 46vh; }
}
@media (max-width: 760px) {
  .page { z-index: 16; }
  .tm-detail { padding: 14px 14px 40px; }
  .tc-page { padding: 10px 10px 30px; }
  #btn-tms .lbl, #btn-types .lbl, #btn-rival .lbl { display: none; }
  #btn-tms, #btn-types, #btn-rival { padding: 0 8px; }
  .floors-name { display: none; }
}

/* ------------------------------------------------------------------------------------------- matchups on parties */
.weak, .team-best { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
.weak-k { font: 10px/16px var(--pixel); text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-synthesis: none; white-space: nowrap; }
.wk-list { display: inline-flex; flex-wrap: wrap; gap: 3px 4px; }
.wk { display: inline-flex; align-items: center; gap: 2px; padding-right: 3px; border-radius: 5px; background: var(--panel-2); }
.wk b { font: 700 10.5px/17px var(--mono); color: var(--text-2); }
.wk.x4 { box-shadow: 0 0 0 1.5px var(--bad); }
.wk.x4 b { color: var(--bad); }
.wk.x0 b { color: var(--muted); }
.team-best { padding: 6px 8px; border-radius: 9px; background: color-mix(in srgb, var(--good) 9%, var(--panel-3)); border: 1px solid color-mix(in srgb, var(--good) 25%, transparent); margin: 0 0 2px; }
.team-best .tiny { flex-basis: 100%; }
details.resist { margin-top: 4px; font-size: 12px; }
details.resist > summary { cursor: pointer; color: var(--muted); }
details.resist .wk-list { margin-top: 4px; }
.n-battle .party { margin-top: 6px; }
.card.battle .card-head h4 { color: var(--c-trainer); }

/* starter tabs */
.starter-tabs { border: 1px solid color-mix(in srgb, var(--c-trainer) 30%, var(--line)); border-radius: 10px; overflow: hidden; }
.st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; background: var(--panel-3); }
.st-label { font: 10px/1 var(--pixel); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-synthesis: none; }
.st-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.st-tab {
  display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 9px 0 3px; border-radius: 7px; border: 1px solid var(--line-2);
  background: var(--panel-2); cursor: pointer; font-size: 12.5px; color: var(--text-2);
}
.st-tab:hover { border-color: var(--muted); color: var(--text); }
.st-tab.on { background: var(--gold); border-color: var(--gold); color: #1a1406; font-weight: 650; }
.st-panel { padding: 8px; }

/* inspector trail */
#insp-back { max-width: 46%; }
.back-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trail { display: flex; align-items: center; gap: 4px; min-width: 0; font: 12px var(--font); text-transform: none; letter-spacing: 0; overflow: hidden; white-space: nowrap; }
.trail > * { overflow: hidden; text-overflow: ellipsis; }
.trail-step { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit; text-transform: none; }
.trail-step:hover { color: var(--gold); }
.trail-step::after { content: " ›"; color: var(--line-2); }
.insp-bar-title .trail span:last-child { color: var(--text-2); }

/* rival hub */
.rival-page { padding: 16px 22px 40px; max-width: 980px; display: grid; gap: 14px; }
.rival-intro { margin: 0; }
.rival-toc { margin-bottom: 4px; }
.rival-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); scroll-margin-top: 12px; }
.rival-head { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px 10px; flex-wrap: wrap; }
.rival-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-trainer); color: #fff; font: 10px/1 var(--pixel); font-synthesis: none; }
.rival-titles { flex: 1; min-width: 220px; }
.rival-titles h3 { margin: 2px 0 2px; font: 20px/1.2 var(--pixel); font-weight: 400; font-synthesis: none; }
.rival-titles p { margin: 2px 0 0; }
.rival-card .starter-tabs { margin: 0 14px 14px; }
.rival-team .facts { margin: 0 0 8px; }
.rival-team .party { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rival-team .team-best { grid-column: 1 / -1; }

/* ------------------------------------------------------------------------------------------- day care */
.dc-page { padding: 14px 20px 40px; display: grid; gap: 14px; max-width: 1180px; }
.dc-top { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.dc-top .tabs { margin: 0; }
.dc-places { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-place { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; text-align: left; }
.dc-place:hover { border-color: var(--gold); }
.dc-place span { display: grid; }
.dc-training, .dc-breeding { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.dc-breeding .dc-find { grid-column: 1 / -1; }
.dc-inputs { display: grid; gap: 12px; }
.dc-slots, .dc-parents { display: grid; gap: 12px; }
.dc-slot, .dc-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 12px; display: grid; gap: 10px; align-content: start; }
.dc-slot-head { display: flex; justify-content: space-between; align-items: center; }
.dc-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dc-field { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.dc-field .input.num { width: 110px; }
.dc-steps { display: grid; gap: 8px; }
.dc-steps:empty { display: none; }
.dc-add { justify-self: start; }
.dc-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.dc-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
.dc-results { display: grid; gap: 12px; min-width: 0; }
.dc-card h4 { margin: 0; font-size: 14px; }
.dc-card-head { display: flex; gap: 10px; align-items: center; }
.dc-card-head h3, .dc-baby h3 { margin: 0; font: 20px/1.2 var(--pixel); font-weight: 400; font-synthesis: none; display: flex; gap: 8px; align-items: center; }
.dc-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-stat { display: grid; padding: 6px 10px; border-radius: 9px; background: var(--panel-2); min-width: 84px; }
.dc-k { font-size: 11px; color: var(--muted); }
.dc-stat b { font: 600 15px/1.3 var(--mono); }
.dc-stat.big b { font-size: 18px; color: var(--gold); }
.dc-stat.money b { color: var(--gold); }
.warn-note { color: var(--warn); }
.bad-text { color: var(--bad); }
.dc-learned { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 2px; }
.dc-moveset { display: grid; gap: 4px; }
.dc-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: mv; }
.dc-moves li { counter-increment: mv; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); font-size: 13px; }
.dc-moves li::before { content: counter(mv) ". "; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.dc-moves li.new { box-shadow: inset 3px 0 0 var(--good); }
.move-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.move-slots .input { width: 100%; }
.dc-moves-in > summary, .dc-per > summary, .dc-card details > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.dc-moves-in .move-slots { margin-top: 6px; }
.dc-table { border-collapse: collapse; font-size: 13px; min-width: 220px; }
.dc-table td, .dc-table th { padding: 3px 8px; border-top: 1px solid var(--line); text-align: left; }
.dc-chart { width: 100%; max-width: 520px; height: auto; background: var(--panel-2); border-radius: 8px; }
.dc-chart .cv { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.dc-chart .cv.on { stroke: var(--gold); stroke-width: 2.4; }
.dc-chart .span { fill: color-mix(in srgb, var(--good) 22%, transparent); }
.dc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.dc-legend li.on { color: var(--gold); font-weight: 650; }
.dc-compat { grid-template-columns: auto 1fr; align-items: center; }
.dc-compat p { margin: 0; }
.dc-pct { display: grid; place-items: center; width: 110px; padding: 8px; border-radius: 12px; text-align: center; }
.dc-pct b { font: 30px/1.1 var(--pixel); font-synthesis: none; }
.dc-pct span { font-size: 11px; }
.dc-compat.ok .dc-pct { background: color-mix(in srgb, var(--good) 18%, var(--panel-2)); color: var(--good); }
.dc-compat.no .dc-pct { background: color-mix(in srgb, var(--bad) 16%, var(--panel-2)); color: var(--bad); }
.dc-babies { display: grid; gap: 10px; }
.dc-baby { display: flex; gap: 12px; align-items: flex-start; }
.dc-baby > div { display: grid; gap: 6px; }
.dc-rules { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: grid; gap: 3px; }
.dc-prob { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; align-items: end; }
.dc-prob-col { display: grid; gap: 2px; justify-items: center; }
.dc-prob-bar { width: 100%; height: 64px; border-radius: 5px; background: var(--track); position: relative; overflow: hidden; }
.dc-prob-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--p); background: var(--good); }
.dc-group { display: grid; gap: 4px; }
.dc-group-k { font-size: 12.5px; font-weight: 650; }
.dc-partners { display: flex; flex-wrap: wrap; gap: 2px; }
.dc-how ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; color: var(--text-2); display: grid; gap: 3px; }
.dc-how > summary { cursor: pointer; font-weight: 650; }
.sp-picker { position: relative; display: flex; align-items: center; gap: 6px; }
.sp-face { flex: none; line-height: 0; }
.sp-list {
  position: absolute; z-index: 5; top: 100%; left: 0; right: 0; max-height: 280px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow);
}
.sp-list li { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.sp-list li.on, .sp-list li:hover { background: var(--panel-3); }
.dc-actions { margin-top: 8px; }
@media (max-width: 960px) {
  .dc-training, .dc-breeding { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dc-page { padding: 10px 10px 30px; }
  .dc-compat { grid-template-columns: 1fr; }
  #btn-daycare .lbl { display: none; }
  #btn-daycare { padding: 0 8px; }
  .brand-mark { display: none; }
}

/* ------------------------------------------------------------------------------------------- route tool */
.rt-pin { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font: 700 11px/1 var(--font); flex: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); }
.rt-pin.sm { width: 16px; height: 16px; font-size: 9px; }
.rt-ends { display: grid; gap: 8px; }
.rt-end { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--panel-2); }
.rt-end-main { flex: 1; min-width: 0; display: grid; }
.rt-end-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-end-btns { display: flex; gap: 3px; }
.rt-opts > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.rt-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 8px 0; }
.rt-opt { display: flex; gap: 6px; align-items: center; font-size: 12.5px; cursor: pointer; }
.rt-opt input { accent-color: var(--c-warp); }
.rt-busy { display: flex; align-items: center; gap: 10px; padding: 12px 2px; color: var(--muted); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: #35e0ff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rt-res { display: grid; gap: 10px; }
.rt-follow { gap: 6px; }
.rt-segs { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rt-seg { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--panel-2); cursor: pointer; text-align: left; }
.rt-seg:hover { background: var(--panel-3); }
.rt-seg.on { box-shadow: inset 3px 0 0 #35e0ff; background: var(--panel-3); }
.rt-seg-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, #35e0ff 22%, var(--panel-3)); font: 600 11px var(--mono); }
.rt-seg-main { display: grid; gap: 2px; min-width: 0; }
.rt-moves { font-size: 11.5px; color: var(--text-2); word-break: break-word; }
.rt-seg-steps { color: #35e0ff; font-size: 12px; }
.rt-notes > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.rt-fail p { margin: 4px 0 8px; }
.pickchip {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; border-radius: 999px; background: var(--glass); border: 1px solid #35e0ff; box-shadow: var(--shadow); font-size: 13px; font-weight: 600;
}
.floor.onroute { box-shadow: inset 0 -3px 0 #35e0ff; }
.floor.on.onroute { box-shadow: inset 0 -3px 0 #0b5f73, 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
.exitbar {
  pointer-events: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: 100%; padding: 4px 6px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.exitbar .chip .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.exitbar .chip.on { border-color: #9dff4a; background: color-mix(in srgb, #9dff4a 14%, var(--chip)); }
.exitbar .input.sm { max-width: 240px; }
.exit-status { max-width: 360px; }
.chip.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--chip)); }

/* ------------------------------------------------------------------------------------------- dungeons */
.dg-page { padding: 14px 20px 40px; max-width: 1200px; }
.dg-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; align-items: center; }
.dg-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dg-card { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; cursor: pointer; }
.dg-card:hover { border-color: var(--gold); }
.dg-card.static { cursor: default; }
.dg-card.static:hover { border-color: var(--line); }
.dg-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.dg-card-top b { font-size: 15px; }
.dg-wild { display: flex; gap: 2px; flex-wrap: wrap; }
.pill.req { color: var(--hm); border-color: color-mix(in srgb, var(--hm) 40%, transparent); }
.pill.diff-easy { color: var(--good); } .pill.diff-medium { color: var(--warn); } .pill.diff-hard { color: var(--bad); }
.dg-gyms { margin-top: 24px; }
.dg-detail { display: grid; gap: 12px; }
.dg-detail > .btn { justify-self: start; }
.dg-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dg-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dg-side { display: grid; gap: 12px; }
.dg-routes, .dg-puzzles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dg-route, .dg-puzzles li { padding: 10px; border-radius: 10px; background: var(--panel-2); display: grid; gap: 6px; }
.dg-route p, .dg-puzzles p { margin: 0; }
.dg-route-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dg-free { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.dg-free select { max-width: 260px; }
.dg-engine { color: #35e0ff; }
.dg-badge { cursor: pointer; margin-bottom: 8px; color: var(--c-warp); }
.dg-badge .ico { width: 13px; height: 13px; }
@media (max-width: 960px) {
  .dg-cols { grid-template-columns: 1fr; }
}
@media (max-width: 1366px) {
  .top-actions .btn .lbl { display: none; }
  .top-actions .btn { padding: 0 9px; }
}
@media (max-width: 760px) {
  #btn-route, #btn-dungeons { padding: 0 7px; }
  .dg-page { padding: 10px; }
  .top-actions { gap: 0; }
}

/* ------------------------------------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  :root { --side-w: 236px; --insp-w: 368px; }
  .brand-name { font-size: 10px; }
}
@media (max-width: 960px) {
  :root { --side-w: 0px; }
  .app { grid-template-columns: minmax(0, 1fr) var(--insp-w); grid-template-areas: "top top" "stage insp"; }
  .only-narrow { display: inline-grid; }
  .sidebar {
    position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); transform: translateX(-102%);
    transition: transform .25s var(--ease); box-shadow: var(--shadow);
  }
  .drawer-open .sidebar { transform: none; }
  .brand { min-width: 0; }
  .topbar::after { background: var(--red); height: 2px; }
}
@media (max-width: 760px) {
  :root { --top-h: 52px; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stage"; }
  .topbar { gap: 8px; padding: 0 8px; }
  .brand-name { display: none; }
  .sb-text { font-size: 13px; }
  .searchbox kbd, #btn-dex .lbl { display: none; }
  #btn-dex { padding: 0 8px; }
  .inspector {
    position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; height: 86dvh; border-left: 0; border-top: 1px solid var(--line-2);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .4); transition: transform .28s var(--ease);
    transform: translateY(calc(86dvh - 46dvh));
  }
  .inspector[data-sheet="peek"] { transform: translateY(calc(86dvh - 64px)); }
  .inspector[data-sheet="full"] { transform: none; }
  .sheet-grip { display: block; width: 100%; height: 20px; border: 0; background: none; cursor: pointer; flex: none; padding: 0; }
  .sheet-grip span { display: block; width: 42px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 8px auto 0; }
  .insp-bar { height: 40px; }
  .insp-body { padding: 0 14px 30px; }
  .stage-top { right: 64px; left: 8px; top: 8px; }
  .zoom { top: 8px; right: 8px; }
  .zoom-label { display: none; }
  .crumb-title { font-size: 10px; }
  .legend { top: 140px; bottom: auto; left: auto; right: 8px; justify-content: flex-start; flex-direction: column; align-items: flex-end; gap: 6px; }
  .legend-toggle { display: inline-grid; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .legend-chips { display: none; justify-content: flex-start; max-width: calc(100vw - 16px); }
  .legend.open .legend-chips { display: flex; }
  .tooltip { display: none; }
  .mon.xl { width: 96px; height: 96px; }
  .mon-hero { width: 104px; height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.static-mon .lv { margin-right: 6px; }
.dc-card .cond-note { display: block; }
.dc-card .cond-note .ico { vertical-align: -3px; margin-right: 4px; }
.dc-table .num { text-align: right; }
.exitbar { flex-wrap: nowrap; }
.exitbar .input.sm { min-width: 0; flex: 0 1 auto; max-width: 220px; }
.exit-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.exitbar .btn { flex: none; }
.exitbar .chip { white-space: nowrap; flex: none; }

/* ------------------------------------------------------------------------------------------- forgiving search */
.pal-tips-btn { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--muted); font: 700 12px var(--font); cursor: pointer; }
.pal-tips-btn:hover, .pal-tips-btn[aria-expanded="true"] { color: var(--text); border-color: var(--gold); }
.pal-tips { padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: 13px; color: var(--text-2); }
.pal-note { padding: 8px 10px 2px; font-size: 13px; color: var(--muted); }
.pal-note b { color: var(--gold); }
.pal-fuzzy { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 6px; margin-right: 6px; white-space: nowrap; }
.pal-correct { color: var(--text); font-weight: 700; }
.pal-more { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin-top: 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; text-align: left; font-size: 13px; }
.pal-more:hover { color: var(--text); background: var(--panel-2); }
.pal-more .ico { width: 15px; height: 15px; }
.pal-recent { margin-bottom: 8px; }
.pal-recent .chip { margin: 2px; }
.dg-search { max-width: 420px; margin-top: 6px; }

/* ------------------------------------------------------------------------------------------- puzzle-aware routes */
.rt-puzzles { display: grid; gap: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #ffd65a 8%, var(--panel-2)); border: 1px solid color-mix(in srgb, #ffd65a 30%, transparent); }
.rt-puzzles .tabs { margin: 0; flex-wrap: wrap; }
.rt-puzzles p { margin: 0; }
.rt-sub { font: 10px/1.4 var(--pixel); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-synthesis: none; }
.rt-uses { align-items: center; }
.rt-puzzle-steps h4 { margin: 4px 0 6px; font-size: 13px; }
.rt-puzzle-steps ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: ps; }
.rt-puzzle-steps li { counter-increment: ps; }
.rt-pstep { width: 100%; display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--panel-2); cursor: pointer; text-align: left; font-size: 12.5px; color: var(--text); }
.rt-pstep:hover { background: var(--panel-3); }
.rt-pstep::before { content: counter(ps); flex: none; width: 18px; height: 18px; border-radius: 50%; background: #ffd65a; color: #1a1406; font: 700 10px/18px var(--font); text-align: center; }
.rt-pmark { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); color: #10121c; font: 700 11px/18px sans-serif; text-align: center; }
.dg-howto { display: grid; gap: 4px; }
.dg-howto ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 12.5px; }
.dg-howto .btn { margin-left: 4px; }

.game-select { font: inherit; color: var(--text); padding-right: 8px; max-width: 150px; }
.game-select option { background: var(--panel); color: var(--text); }

/* multi-game additions: time-of-day switch, version tags, Gen 1/2 extras */
.enc-head { flex-wrap: wrap; }
.enc-head .tod { flex-basis: 100%; }
.tod { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--track); width: max-content; max-width: 100%; }
.tod-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.tod-btn .ico { width: 13px; height: 13px; }
.tod-btn:hover { color: var(--text); }
.tod-btn.on { background: var(--panel); color: var(--gold); box-shadow: 0 0 0 1px var(--line-2); }
.vtag { display: inline-block; padding: 0 5px; margin-left: 4px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); font: 700 9.5px/14px var(--mono); flex: none; }
.pill.tiny { font-size: 10.5px; line-height: 15px; padding: 0 6px; }
.pill.ability { cursor: help; }
.chip.static { cursor: default; border-color: color-mix(in srgb, var(--tc, var(--line-2)) 55%, transparent); }
.chip.static:hover { border-color: color-mix(in srgb, var(--tc, var(--line-2)) 55%, transparent); }
.enc-notes { margin-top: 6px; }
.enc-notes .cond-note { align-items: flex-start; }
.n-phone .verb { white-space: nowrap; }