* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  color-scheme: light;
  --ink: #1f2933;
  --muted: #64748b;
  --line: #d9e2ec;
  --panel: rgba(255, 255, 255, 0.94);
  --accent: #2fa66f;
  --accent-soft: #e5f7ee;
  --gold: #b97b25;
  --blue: #4777a8;
  --shell: rgba(248, 251, 249, 0.84);
  --panel-soft: rgba(248, 251, 249, 0.72);
  --shadow: 0 18px 40px rgba(37, 58, 79, 0.12);
  --shadow-soft: 0 10px 26px rgba(37, 58, 79, 0.08);
  --page-bg:
    radial-gradient(circle at 16% -10%, rgba(104, 211, 145, 0.18), transparent 32%),
    radial-gradient(circle at 90% 0%, rgba(99, 179, 237, 0.14), transparent 26%),
    linear-gradient(180deg, #f7fafc 0%, #eef5f0 54%, #f8fafc 100%);
  --header-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 249, 0.92)),
    rgba(255, 255, 255, 0.94);
  --header-border: #dce5ee;
  --control-bg: rgba(255, 255, 255, 0.96);
  --control-soft: rgba(248, 251, 249, 0.84);
  --control-hover: rgba(239, 249, 243, 0.96);
  --control-border: #c6d2df;
  --control-text: #334155;
  --nav-bg: rgba(255, 255, 255, 0.56);
  --nav-hover: rgba(239, 249, 243, 0.96);
  --row-border: #edf1f6;
  --detail-bg: rgba(255, 255, 255, 0.62);
  --hero-bg: rgba(255, 255, 255, 0.93);
  --hero-border: #dbe5ef;
  --card-bg: rgba(255, 255, 255, 0.82);
  --icon-bg: rgba(255, 255, 255, 0.88);
  --dash-line: #b9d7ec;
  --mini-border: #c9d9e8;
  --glyph-bg: #e5f5df;
  --glyph-text: #1d5e42;
  --item-glyph-bg: #fff7df;
  --item-glyph-border: #d9c290;
  --item-glyph-text: #7a5417;
  --quest-glyph-bg: #eef7f1;
  --stat-border: #d8e2dc;
  --text-strong: #245b45;
  --plain-text: #334155;
  --active-text: #1d5e42;
  --hover-bg: rgba(47, 125, 91, 0.08);
  --link-hover-border: #80b99a;
  --link-hover-bg: rgba(223, 241, 229, 0.72);
  --monster-border: #95bfa8;
  --resist-border: #9fb7d6;
  --resist-bg: #e7f0fb;
  --resist-text: #285986;
  --weak-border: #e2a48b;
  --weak-bg: #fff0e8;
  --weak-text: #a74224;
  --immune-border: #a4abb7;
  --immune-bg: #eef0f3;
  --immune-text: #374151;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5edf5;
  --muted: #9fb2c8;
  --line: #293548;
  --panel: rgba(18, 25, 38, 0.92);
  --accent: #56d58f;
  --accent-soft: rgba(86, 213, 143, 0.18);
  --gold: #f6c56f;
  --blue: #83b7ff;
  --shell: rgba(13, 19, 31, 0.82);
  --panel-soft: rgba(21, 30, 45, 0.68);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.28);
  --page-bg:
    radial-gradient(circle at 12% -10%, rgba(86, 213, 143, 0.14), transparent 30%),
    radial-gradient(circle at 90% 0%, rgba(96, 165, 250, 0.12), transparent 28%),
    linear-gradient(180deg, #0c111b 0%, #111827 58%, #0e151f 100%);
  --header-bg:
    linear-gradient(180deg, rgba(17, 24, 39, 0.97), rgba(13, 20, 33, 0.94)),
    #111827;
  --header-border: #253246;
  --control-bg: rgba(20, 29, 43, 0.96);
  --control-soft: rgba(27, 38, 54, 0.82);
  --control-hover: rgba(51, 65, 85, 0.95);
  --control-border: #526173;
  --control-text: #e5edf5;
  --nav-bg: rgba(30, 41, 59, 0.72);
  --nav-hover: rgba(51, 65, 85, 0.95);
  --row-border: rgba(148, 163, 184, 0.2);
  --detail-bg: rgba(15, 23, 42, 0.66);
  --hero-bg: rgba(15, 23, 42, 0.95);
  --hero-border: #334155;
  --card-bg: rgba(30, 41, 59, 0.76);
  --icon-bg: rgba(15, 23, 42, 0.86);
  --dash-line: rgba(125, 167, 210, 0.34);
  --mini-border: #3d526a;
  --glyph-bg: #143429;
  --glyph-text: #a7f3d0;
  --item-glyph-bg: rgba(92, 63, 22, 0.35);
  --item-glyph-border: #8b6b36;
  --item-glyph-text: #f7d58a;
  --quest-glyph-bg: #132b25;
  --stat-border: #334155;
  --text-strong: #a7f3d0;
  --plain-text: #d8e2ee;
  --active-text: #a7f3d0;
  --hover-bg: rgba(86, 213, 143, 0.12);
  --link-hover-border: #56d58f;
  --link-hover-bg: rgba(20, 83, 45, 0.45);
  --monster-border: #2f7d5b;
  --resist-border: #45668f;
  --resist-bg: rgba(37, 74, 115, 0.45);
  --resist-text: #b7d7ff;
  --weak-border: #8f4f3b;
  --weak-bg: rgba(116, 45, 23, 0.45);
  --weak-text: #ffc1aa;
  --immune-border: #667085;
  --immune-bg: rgba(51, 65, 85, 0.66);
  --immune-text: #d8e2ee;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page-bg);
}
.seoIntro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.appHeader {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  box-shadow: 0 10px 30px rgba(37, 58, 79, 0.1);
  backdrop-filter: blur(14px);
}
.titleArea {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(420px, 1.6fr) auto;
  grid-template-areas:
    "brand nav actions"
    "meta nav actions";
  gap: 6px 14px;
  align-items: center;
  width: 100%;
  min-width: 0;
}
h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
}
.siteBrandTitle {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  line-height: 1.16;
}
.navDrawerToggle {
  display: none;
}
.navDrawerBackdrop {
  display: none;
}
.headerActions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 42px;
}
.siteBrandIcon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.siteBrandText {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.siteBrandMain,
.siteBrandSubtitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siteBrandMain {
  color: var(--text-strong);
  font-size: 25px;
  font-weight: 950;
  line-height: 1.12;
}
.siteBrandSubtitle {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
}
.topNav {
  grid-area: nav;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px;
  align-items: start;
  width: 100%;
}
.navMenuGroup {
  position: relative;
  display: block;
  min-width: 0;
  align-items: stretch;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--nav-bg);
  overflow: visible;
}
.navMenuGroup[open] {
  z-index: 160;
}
.navMenuGroup summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 5px 9px 5px 11px;
  color: var(--control-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
  user-select: none;
}
.navMenuGroup summary::-webkit-details-marker {
  display: none;
}
.navMenuGroup summary::after {
  content: "▾";
  margin-left: 8px;
  color: var(--muted);
  font-size: 11px;
}
.navMenuGroup:not([open]) summary::after {
  content: "▸";
}
.navMenuGroup.active > summary {
  color: var(--active-text);
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}
.navMenuLinks {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 170;
  transform-origin: top left;
  will-change: opacity, transform;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: max-content;
  min-width: max(100%, 210px);
  max-width: min(300px, calc(100vw - 32px));
  padding: 7px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--nav-bg);
  box-shadow: 0 16px 36px rgba(37, 58, 79, 0.18);
}
.navMenuGroup:last-child .navMenuLinks {
  right: 0;
  left: auto;
}
.navMenuGroup[data-nav-closing] .navMenuLinks {
  pointer-events: none;
}
.topNav a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  color: var(--control-text);
  background: var(--nav-bg);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.16s ease, border-color 0.16s ease;
}
.topNav a::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-right: 6px;
  background-image: var(--nav-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.topNav a[href$="index.html"] { --nav-icon: url("./assets/monster_frames/100100.png"); }
.topNav a[href$="items.html"] { --nav-icon: url("./assets/items/2000000.png"); }
.topNav a[href$="quests.html"] { --nav-icon: url("./assets/npcs/2005.png"); }
.topNav a[href$="maps.html"] { --nav-icon: url("./assets/map_marks/Henesys.png"); }
.topNav a[href$="skills.html"] { --nav-icon: url("./assets/skills/2301002.png"); }
.topNav a[href$="scroll-simulator.html"] { --nav-icon: url("./assets/items/2040407.png"); }
.topNav a[href$="damage-calculator.html"] { --nav-icon: url("./assets/skills/1121002.png"); }
.topNav a[href$="combat-analysis.html"] { --nav-icon: url("./assets/meso/gold.png"); }
.topNav a[href$="boss-timer.html"] { --nav-icon: url("./assets/monster_frames/6130101.png"); }
.topNav a[href$="avatar-maker.html"] { --nav-icon: url("./assets/items/5150040.png"); }
.topNav a[href$="gacha-simulator.html"] { --nav-icon: url("./assets/items/5222214.png"); }
.topNav a[href$="third-job.html"] { --nav-icon: url("./assets/items/4031058.png"); }
.topNav a[href$="goddess-tower.html"] { --nav-icon: url("./assets/items/4001158.png"); }
.topNav a[href$="exp-exchange.html"] { --nav-icon: url("./assets/items/4001000.png"); }
.topNav a[href$="halloween.html"] { --nav-icon: url("./assets/items/1012939.png"); }
.topNav a[href$="skill-changes.html"] { --nav-icon: url("./assets/skills/1001004.png"); }
.topNav a[href$="patch-notes.html"] { --nav-icon: url("./assets/map_marks/Event.png"); }
.topNav a[href$="web-changelog.html"] { --nav-icon: url("./assets/map_marks/Quest.png"); }
.topNav a:hover {
  background: var(--nav-hover);
  border-color: var(--link-hover-border);
  transform: translateY(-1px);
}
.topNav a.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
html[data-map-view="maps"] .worldModeOnly,
html[data-map-view="world"] .mapModeOnly {
  display: none !important;
}
.mapViewTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.mapViewTabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--nav-bg);
  padding: 0 12px;
  color: var(--control-text);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}
.mapViewTabs a:hover {
  background: var(--nav-hover);
}
html[data-map-view="maps"] #smallMapViewTab,
html[data-map-view="world"] #worldMapViewTab {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.buildMeta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--control-text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}
.pageToolbar {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-bottom: 1px solid var(--header-border);
  background: color-mix(in srgb, var(--page-bg) 84%, var(--panel));
}
.pageToolbar .searchWrap {
  width: min(1220px, 100%);
  margin: 0 auto;
}
.pageToolbar .simulatorHeaderControls {
  justify-content: flex-end;
}
.pageToolbar .pageToolbarNoSearch {
  justify-content: flex-end;
}
.searchWrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: min(760px, 55vw);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
input, select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 0 13px;
  font: inherit;
  color: var(--control-text);
  background: var(--control-bg);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
input {
  flex: 1 1 260px;
  min-width: 180px;
}
.nameOnlySearchControl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--control-soft);
  color: var(--control-text);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.nameOnlySearchControl input {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.nameOnlySearchControl:hover {
  background: var(--control-hover);
}
.nameOnlySearchControl.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
select {
  width: 156px;
  flex: 0 0 156px;
}
.multiSelect {
  position: relative;
  width: 184px;
  flex: 0 0 184px;
  z-index: 20;
}
.multiSelectButton {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 0 34px 0 12px;
  background: var(--control-bg);
  color: var(--control-text);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.multiSelectButton::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}
.multiSelectButton[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.multiSelectOptions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(280px, 76vw);
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.multiSelectOptions[hidden] {
  display: none;
}
.multiSelectClear {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  margin-bottom: 4px;
  background: var(--control-soft);
  color: var(--control-text);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.multiSelectOption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--control-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.multiSelectOption:hover,
.multiSelectClear:hover {
  background: var(--control-hover);
}
.multiSelectOption input {
  width: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.settingsToggle, .toggleButton, .toggleIdButton, .toggleThemeButton {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--control-soft);
  color: var(--control-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.settingsToggle {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 21px;
  line-height: 1;
}
.themeIconButton {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}
.settingsToggle:hover, .settingsToggle.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.advancedField {
  display: grid;
  gap: 5px;
  width: 118px;
  color: var(--control-text);
  font-size: 12px;
  font-weight: 850;
}
.advancedField input {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
}
.priceHint {
  min-height: 15px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.weaknessFilter {
  display: flex;
  flex: 1 1 340px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  margin: 0;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 7px 9px 8px;
  color: var(--control-text);
}
.weaknessFilter legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.weaknessOption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  padding: 4px 9px;
  background: var(--control-bg);
  color: var(--control-text);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}
.weaknessOption:hover {
  background: var(--control-hover);
}
.weaknessOption input {
  width: 15px;
  min-width: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.settingsPanel {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-soft);
}
.settingsPanel[hidden] {
  display: none;
}
.settingsPanel.utilitySettingsPanel {
  position: static;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
}
.settingsPanel.utilitySettingsPanel::before {
  display: none;
}
.utilitySettingsSection .advancedField,
.utilitySettingsSection .toggleButton,
.utilitySettingsSection .toggleIdButton {
  width: 100%;
  min-width: 0;
}
.settingsSection {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
.settingsAdvancedSection {
  border-top: 1px solid var(--control-border);
  padding-top: 10px;
}
.settingsSectionTitle {
  flex: 1 0 100%;
  color: var(--control-text);
  font-size: 13px;
  font-weight: 900;
}
.clearFiltersButton {
  min-width: 112px;
}
.toggleButton {
  min-width: 146px;
}
#unnamedMapToggle, #specialMapToggle {
  min-width: 184px;
}
.toggleIdButton {
  min-width: 96px;
}
.toggleThemeButton {
  min-width: 104px;
}
.themeIconButton.toggleThemeButton {
  min-width: 42px;
}
.toggleButton:hover, .toggleIdButton:hover, .toggleThemeButton:hover {
  background: var(--control-hover);
}
.toggleButton[aria-pressed="true"], .toggleIdButton[aria-pressed="true"], .toggleThemeButton[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
:root[data-theme="dark"] .toggleButton[aria-pressed="true"],
:root[data-theme="dark"] .toggleIdButton[aria-pressed="true"],
:root[data-theme="dark"] .toggleThemeButton[aria-pressed="true"],
:root[data-theme="dark"] .nameOnlySearchControl.active,
:root[data-theme="dark"] .settingsToggle.active,
:root[data-theme="dark"] .navMenuGroup.active > summary,
:root[data-theme="dark"] .topNav a.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #a7f3d0;
}
#resultCount {
  min-width: 64px;
  color: var(--control-text);
  text-align: right;
}
.layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}
.itemLayout {
  grid-template-columns: 410px minmax(0, 1fr);
}
.skillLayout {
  grid-template-columns: 410px minmax(0, 1fr);
}
.accuracyLayout {
  grid-template-columns: 380px minmax(0, 1fr);
}
.patchHeaderControls {
  display: flex;
  justify-content: flex-end;
  min-width: 42px;
}
.patchNotesLayout {
  display: grid;
  grid-template-columns: 280px minmax(0, 920px);
  justify-content: center;
  gap: 14px;
  padding: 12px;
}
.patchVersionList {
  align-self: start;
}
.patchVersionRow {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--row-border);
  color: var(--ink);
  text-decoration: none;
}
.patchVersionRow:hover {
  background: var(--hover-bg);
}
.patchVersionRow.active {
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}
.patchVersionRow strong {
  font-size: 18px;
}
.patchVersionRow span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}
.patchNotesDetail {
  overflow: visible;
}
.patchNoteArticle {
  background: var(--shell);
}
.patchNoteHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hero-border);
  background: var(--hero-bg);
}
.patchNoteHero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.patchEyebrow {
  color: var(--text-strong) !important;
  font-size: 13px;
  font-weight: 900;
}
.patchNoteDate {
  min-width: 132px;
  border: 1px solid var(--item-glyph-border);
  border-radius: 8px;
  background: var(--item-glyph-bg);
  padding: 10px 12px;
  text-align: center;
}
.patchNoteDate strong,
.patchNoteDate span {
  display: block;
}
.patchNoteDate strong {
  font-size: 18px;
}
.patchNoteDate span {
  color: var(--item-glyph-text);
  font-size: 12px;
  font-weight: 850;
}
.patchNoteSection {
  padding: 18px 22px;
  border-bottom: 1px dashed var(--dash-line);
}
.patchChangeList {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 1.25rem;
  color: var(--plain-text);
  line-height: 1.55;
}
.patchChangeList strong {
  color: var(--ink);
}
.patchChangeList b {
  color: var(--text-strong);
}
.commitHashLink {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--item-glyph-border);
  border-radius: 7px;
  background: var(--item-glyph-bg);
  padding: 0 8px;
  color: var(--blue);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  font-weight: 900;
  text-decoration: none;
}
.commitHashLink:hover {
  text-decoration: underline;
}
.patchDiffPanel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow: hidden;
}
.patchDiffPanel summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.patchDiffPanel summary::-webkit-details-marker {
  display: none;
}
.patchDiffPanel summary::before {
  content: "›";
  color: var(--muted);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}
.patchDiffPanel[open] summary::before {
  transform: rotate(90deg);
}
.patchDiffPanel summary span {
  display: grid;
  gap: 3px;
}
.patchDiffPanel summary strong {
  color: var(--ink);
  font-size: 16px;
}
.patchDiffPanel summary em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
}
.patchDiffBody {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px 44px;
}
.patchDiffBlock {
  border-top: 1px dashed var(--dash-line);
  padding-top: 14px;
}
.patchDiffBlock h4 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 15px;
}
.patchDiffBlock p {
  margin: 0 0 10px;
  color: var(--plain-text);
  line-height: 1.55;
}
.patchDiffItemGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.patchDiffItemGrid span {
  min-width: 0;
  border: 1px solid var(--row-border);
  border-radius: 8px;
  background: var(--shell);
  padding: 8px 10px;
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}
.monsterList {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.favoriteRowShell {
  position: relative;
  display: block;
}
.monsterList .favoriteRowShell {
  border-bottom: 1px solid var(--row-border);
}
.monsterList .favoriteRowShell > .monsterRow {
  border-bottom: 0;
  padding-left: 42px;
}
.favoriteButton {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.16s ease, opacity 0.16s ease, transform 0.12s ease;
}
.monsterList .favoriteButton {
  min-height: 0;
}
.favoriteButton:hover {
  color: var(--gold);
  transform: translateY(-50%) scale(1.04);
}
.favoriteButton.active {
  color: var(--gold);
  text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 40%, transparent);
}
.favoriteButton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.monsterRow {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px 10px;
  width: 100%;
  min-height: 72px;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid var(--row-border);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
.monsterList .monsterRow:not(.skillIndexRow):not(.worldRegionRow) {
  grid-template-columns: 52px minmax(0, 1fr);
}
.monsterRow:hover {
  background: var(--hover-bg);
  transform: translateX(1px);
}
.monsterRow.active {
  background: var(--accent-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}
.monsterRow strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rowMonsterImage {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  font-size: 22px;
  align-self: center;
}
.itemGlyph, .itemMark {
  display: grid;
  place-items: center;
  border: 1px solid var(--item-glyph-border);
  background: var(--item-glyph-bg);
  color: var(--item-glyph-text);
  font-weight: 900;
}
.itemGlyph {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  font-size: 22px;
  align-self: center;
}
.itemMark {
  width: 66px;
  height: 66px;
  border-radius: 8px;
  font-size: 30px;
}
.questGlyph, .questMark {
  display: grid;
  place-items: center;
  border: 1px solid var(--mini-border);
  background: var(--quest-glyph-bg);
  color: var(--text-strong);
  font-weight: 900;
}
.questGlyph {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  font-size: 22px;
  align-self: center;
}
.questMark {
  width: 66px;
  height: 66px;
  border-radius: 8px;
  font-size: 30px;
}
.questGlyph.assetImage, .questMark.assetImage {
  object-fit: contain;
}
.questGlyph.assetImage {
  padding: 3px;
}
.questMark.assetImage {
  padding: 5px;
}
.skillGlyph, .skillMark {
  display: grid;
  place-items: center;
  border: 1px solid var(--mini-border);
  background: var(--accent-soft);
  color: var(--active-text);
  font-weight: 900;
}
.skillGlyph {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  font-size: 22px;
  align-self: center;
}
.skillMark {
  width: 66px;
  height: 66px;
  border-radius: 8px;
  font-size: 30px;
}
.skillGlyph.assetImage, .skillMark.assetImage {
  object-fit: contain;
}
.skillGlyph.assetImage {
  padding: 5px;
}
.skillMark.assetImage {
  padding: 7px;
}
.rowText {
  display: grid;
  min-width: 0;
  align-self: center;
  gap: 2px;
}
.rowMeta {
  color: var(--muted);
  font-size: 12px;
}
.rowText em {
  overflow: hidden;
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monsterRow small {
  grid-column: 3;
  align-self: center;
  color: var(--gold);
  font-weight: 800;
}
.detail {
  position: relative;
  isolation: isolate;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--detail-bg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.monsterHero {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--hero-border);
  background: var(--hero-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.38) inset;
}
.monsterMark, .rowMonsterImage {
  display: grid;
  place-items: center;
  border: 1px solid var(--monster-border);
  background: var(--glyph-bg);
  color: var(--glyph-text);
  font-weight: 800;
}
.monsterMark {
  width: 66px;
  height: 66px;
  border-radius: 8px;
  font-size: 30px;
}
.assetImage {
  display: block;
  object-fit: contain;
  padding: 4px;
}
.heroText {
  min-width: 0;
}
h2 {
  margin: 0 0 3px;
  overflow-wrap: anywhere;
  font-size: 28px;
  letter-spacing: 0;
}
h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}
.monsterHero p, .itemText p, .mapCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}
.itemHeroMeta {
  margin-bottom: 4px;
}
.itemHeroDescription,
.itemDescription {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.itemHeroDescription {
  max-width: 860px;
}
.heroCounters {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, auto));
  gap: 8px;
  justify-self: end;
}
.heroCounter {
  min-width: 92px;
  text-align: center;
  border: 1px solid var(--item-glyph-border);
  border-radius: 8px;
  background: var(--item-glyph-bg);
  padding: 8px 10px;
}
.heroCounter strong {
  display: block;
  font-size: 24px;
}
.itemHero .heroCounter strong {
  overflow-wrap: anywhere;
  font-size: 18px;
}
.heroCounter span {
  color: var(--item-glyph-text);
  font-size: 13px;
}
.mapHero:not(.worldMapHero) .heroCounters {
  grid-template-columns: repeat(3, minmax(72px, auto));
}
.worldMapHero .heroCounters {
  grid-template-columns: minmax(92px, auto);
}
.skillHero .heroCounters {
  grid-template-columns: minmax(92px, auto);
}
.mapHero:not(.worldMapHero) .heroCounter {
  min-width: 72px;
  padding: 8px 8px;
  white-space: nowrap;
}
.sectionBlock {
  border-bottom: 1px dashed var(--dash-line);
  background: var(--shell);
}
.sectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 0;
}
.sectionHeading {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 9px;
  min-width: 0;
}
.sectionHeading h3 {
  flex: 0 0 auto;
}
.sectionTitleActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.sectionTitle span {
  color: var(--muted);
  font-size: 13px;
}
.dropRateReferenceInline {
  flex: 1 1 220px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.inlineToggleButton {
  min-height: 30px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  padding: 4px 9px;
  background: var(--control-soft);
  color: var(--control-text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.inlineToggleButton:hover,
.inlineToggleButton[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.sectionTitle a {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.sectionTitle a:hover {
  text-decoration: underline;
}
.collapsibleSection > summary.sectionTitle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.collapsibleSection > summary.sectionTitle::-webkit-details-marker {
  display: none;
}
.collapsibleSection > summary.sectionTitle::before {
  content: "▸";
  color: var(--accent);
  font-weight: 950;
  line-height: 1;
}
.collapsibleSection[open] > summary.sectionTitle::before {
  content: "▾";
}
.collapsibleSection:not([open]) > summary.sectionTitle {
  padding-bottom: 12px;
}
.collapsibleSection > summary.sectionTitle h3 {
  min-width: 0;
}
.accuracyPanel {
  padding: 0;
}
.accuracyPanel summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 12px 14px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.accuracyPanel summary::-webkit-details-marker {
  display: none;
}
.accuracyPanel summary::before {
  content: "▸";
  grid-row: 1;
  grid-column: 1;
  width: 18px;
  color: var(--accent);
  font-weight: 900;
}
.accuracyPanel[open] summary::before {
  content: "▾";
}
.accuracyPanel summary > span {
  display: grid;
  grid-column: 2;
  gap: 3px;
}
.accuracyPanel summary strong {
  font-size: 18px;
}
.accuracyPanel summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.accuracyPanel summary small {
  grid-column: 3;
  justify-self: end;
  border: 1px solid var(--item-glyph-border);
  border-radius: 8px;
  background: var(--item-glyph-bg);
  color: var(--item-glyph-text);
  padding: 5px 8px;
  font-weight: 900;
}
.accuracyBody {
  border-top: 1px dashed var(--dash-line);
}
.accuracyForm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}
.fieldControl {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
}
.fieldControl > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.fieldControl.isHidden {
  display: none;
}
.segmentedControl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 42px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--control-bg);
}
.segmentedControl button {
  min-width: 0;
  border: 0;
  border-right: 1px solid var(--control-border);
  background: transparent;
  color: var(--control-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.segmentedControl button:last-child {
  border-right: 0;
}
.segmentedControl button:hover {
  background: var(--control-hover);
}
.segmentedControl button.active {
  background: var(--accent-soft);
  color: var(--active-text);
}
.accuracyResults .statCell.resultGood,
.heroCounter.resultGood {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.accuracyResults .statCell.resultGood strong,
.heroCounter.resultGood strong {
  color: var(--active-text);
}
.accuracyResults .statCell.resultWarn,
.heroCounter.resultWarn {
  border-color: rgba(185, 123, 37, 0.7);
  background: rgba(185, 123, 37, 0.12);
}
.accuracyResults .statCell.resultBad,
.heroCounter.resultBad {
  border-color: var(--weak-border);
  background: var(--weak-bg);
}
.accuracyResults .statCell.resultBad strong,
.heroCounter.resultBad strong {
  color: var(--weak-text);
}
.formulaCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  padding: 0 14px 10px;
}
.formulaCard {
  display: grid;
  gap: 7px;
  align-content: start;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 10px 11px;
}
.formulaCard strong {
  color: var(--text-strong);
}
.formulaCard p {
  margin: 0;
  color: var(--plain-text);
  font-size: 13px;
  line-height: 1.45;
}
.formulaCard code {
  display: block;
  overflow-wrap: anywhere;
  border: 1px dashed var(--dash-line);
  border-radius: 6px;
  background: var(--control-soft);
  color: var(--plain-text);
  padding: 6px 7px;
  font-size: 12px;
  line-height: 1.35;
}
.statsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
}
.sourceStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 12px 14px 14px;
}
.itemTradeAttributes > p,
.itemTradeAttributes > small,
.itemTradeAttributes > details {
  margin: 8px 14px;
  overflow-wrap: anywhere;
}
.itemTradeAttributes > small {
  display: block;
  color: var(--muted);
}
.statCell {
  min-width: 0;
  min-height: 56px;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 8px 10px;
}
.statCell span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.statCell strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 19px;
  line-height: 1.2;
}
.statCell em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.questChain {
  padding: 16px;
  border-left: 4px solid var(--accent, #247957);
}
.questChainColumns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}
.questChainGroup { min-width: 0; }
.questChainGroup h4, .questDialogueStage h4 { margin: 0 0 10px; font-size: 14px; }
.questChain .miniLink {
  border: 1px solid var(--stat-border);
  background: var(--card-bg);
  text-decoration: none;
}
.questChain .miniLink strong { text-decoration: underline; text-underline-offset: 3px; }
.questChain .miniLink:hover, .questChain .miniLink:focus-visible {
  outline: 2px solid var(--accent, #247957);
  outline-offset: 2px;
}
.questDialogueDetails > summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--plain-text);
  font-size: 16px;
}
.questDialogueDetails > summary span { margin-left: 12px; font-size: 13px; font-weight: 400; }
.questDialogueStage { padding: 16px 0; border-top: 1px solid var(--stat-border); }
.questDialogueStage .ringDialogueEntry + .ringDialogueEntry { margin-top: 12px; }
.questDialogueSection .ringDialogueText { overflow-wrap: anywhere; }
.questDialogueEmpty { margin: 12px 0; }
.questDialogueSection { padding: 0 16px; }
.questDetailPane .questMapRefList { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 10px 0; }
.questDetailPane .ringDialogueEntry > .questMapRefList { grid-column: 1 / -1; }
.questDetailPane .questMapLink { flex: 0 1 280px; width: 280px; max-width: 100%; min-width: 0; grid-template-columns: 36px minmax(0, 1fr); text-decoration: none; }
.questDetailPane .questMapLink > .miniIcon { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.questDetailPane .questMapLinkText { min-width: 0; }
.questDetailPane .questMapLinkText strong { font-size: 14px; line-height: 1.5; }
.questDetailPane .questMapLinkText strong, .questDetailPane .questMapLinkText em { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
.questDetailPane .questMapLinkAction { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--active-text); text-decoration: underline; text-underline-offset: 3px; }
.questDetailPane .questMapLink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.partyQuestFlowSection { line-height: 1.7; padding: 0 16px; }
#partyQuestFlow { scroll-margin-top: 112px; }
.partyQuestReference, .partyQuestExchange > .partyQuestEvidence { padding: 0 16px; }
.partyQuestExchange > .partyQuestRewardNote { margin-inline: 16px; }
.partyQuestFlowSection a { color: var(--active-text); text-underline-offset: 3px; }
.partyQuestAnchors, .partyQuestMaps { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0; font-size: 13px; }
.partyQuestSteps { list-style: none; margin: 12px 0 0; padding: 0; }
.partyQuestStep { padding: 20px 0; border-top: 1px solid var(--line); scroll-margin-top: 120px; overflow-wrap: anywhere; }
.partyQuestStep h4 { margin: 0; font-size: 17px; color: var(--text-strong); }
.partyQuestInstructions { padding-left: 22px; margin: 12px 0; }
.partyQuestInstructions li + li { margin-top: 6px; }
.partyQuestEntities { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.partyQuestEntities .miniLink, .partyQuestMusic .miniLink { flex: 0 1 auto; max-width: 100%; width: auto; text-decoration: none; }
.partyQuestEntities .miniLink > span, .partyQuestMusic .miniLink > span { min-width: 0; }
.partyQuestEntities .miniLink strong, .partyQuestMusic .miniLink strong { white-space: normal; overflow: visible; }
.partyQuestMusic { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 18px 0; }
.partyQuestMusic > div { display: grid; gap: 6px; align-content: start; }
.partyQuestMusic > div > strong { font-size: 13px; color: var(--muted); }
.partyQuestBlessingTable { width: 100%; max-width: 640px; table-layout: fixed; border-collapse: collapse; margin: 10px 0; font-size: 14px; }
.partyQuestBlessingTable th, .partyQuestBlessingTable td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.partyQuestBlessingTable th:first-child { width: 120px; }
.partyQuestBlessingTable thead { color: var(--muted); font-size: 12px; }
.partyQuestBlessingTable a { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.partyQuestBlessingTable .miniIcon { width: 28px; height: 28px; flex-shrink: 0; }
.partyQuestBlessingTable td span { display: block; }
.partyQuestFeeding h5 { margin: 16px 0 4px; font-size: 14px; }
#partyQuest-friendship { scroll-margin-top: 120px; }
.partyQuestToolLink { display: inline-block; font-weight: 700; margin: 4px 0; }
.partyQuestRewardNote { color: var(--muted); line-height: 1.7; overflow-wrap: anywhere; margin: 10px 0; font-size: 13px; }
.partyQuestEvidence { margin-top: 12px; }
.partyQuestEvidence .ringDialogueText, .partyQuestDialogue p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.partyQuestDialogue { padding: 12px 0; border-top: 1px solid var(--line); }
.partyQuestDialogue small, .partyQuestEvidence code { overflow-wrap: anywhere; font-size: 11px; color: var(--muted); }
.partyQuestDialogue p { margin: 6px 0 0; }
.partyQuestSeedMap { min-width: 0; margin: 20px 0 12px; }
.partyQuestSeedMap figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; font-weight: 700; }
.partyQuestSeedMap figcaption a { font-size: 13px; font-weight: 400; }
.partyQuestSeedViewport { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--control-bg); overscroll-behavior-x: contain; }
.partyQuestSeedViewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.partyQuestSeedCanvas { position: relative; overflow: hidden; width: 100%; min-width: 360px; }
.seedMap-plant { max-width: 720px; }
.seedMap-drop .partyQuestSeedCanvas { min-width: 1260px; }
.partyQuestSeedTerrain { position: absolute; max-width: none; object-fit: fill; pointer-events: none; image-rendering: pixelated; }
.partyQuestFlowSection .partyQuestSeedMarker { position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px; transform: translate(-50%, calc(-100% - 6px)); padding: 4px 6px; border: 2px solid var(--seed-color); border-radius: 5px; background: var(--control-bg); color: var(--plain-text); white-space: nowrap; text-decoration: none; font-size: 13px; line-height: 1.3; box-shadow: 0 1px 3px #0005; }
.partyQuestSeedMarker::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--seed-color); }
.partyQuestSeedMarker:hover, .partyQuestSeedMarker:focus-visible { outline: 2px solid var(--plain-text); outline-offset: 2px; z-index: 1; }
.partyQuestSeedMarker img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.partyQuestSeedMarker.seed-green { --seed-color: #6b9f23; }
.partyQuestSeedMarker.seed-purple { --seed-color: #8053cb; }
.partyQuestSeedMarker.seed-pink { --seed-color: #d246c6; }
.partyQuestSeedMarker.seed-brown { --seed-color: #b66c32; }
.partyQuestSeedMarker.seed-yellow { --seed-color: #d8a31b; }
.partyQuestSeedMarker.seed-blue { --seed-color: #397fe2; }
@media (max-width: 600px) {
  .seedMap-plant .partyQuestSeedCanvas { min-width: 0; }
  .seedMap-plant .partyQuestSeedPosition { display: none; }
}
.partyQuestGuideMap { min-width: 0; max-width: 620px; margin: 20px 0; }
.partyQuestGuideMap figcaption { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 10px; font-weight: 700; }
.partyQuestGuideMap figcaption a { font-size: 13px; font-weight: 400; }
.partyQuestGuideViewport { overflow-x: auto; max-width: 100%; overscroll-behavior-x: contain; }
.partyQuestGuideViewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.partyQuestGuideCanvas { position: relative; overflow: hidden; background: var(--control-bg); min-width: 0; }
.partyQuestGuideTerrain { position: absolute; max-width: none; object-fit: fill; image-rendering: pixelated; pointer-events: none; }
.partyQuestHallScene { display: grid; grid-template-columns: 128px minmax(0, 1fr); min-width: 270px; max-width: 480px; height: var(--hall-height); }
.partyQuestHallLabels { position: relative; min-width: 0; }
.partyQuestGuideLeaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.partyQuestGuideLeaders line { stroke: var(--plain-text); stroke-width: 1; vector-effect: non-scaling-stroke; }
.partyQuestGuideMap .partyQuestHallLabel { position: absolute; left: 0; right: 0; transform: translateY(-50%); padding: 3px 10px; border-left: 3px solid var(--pq-tone); text-decoration: none; color: var(--plain-text); font-size: 13px; line-height: 1.65; }
.partyQuestHallLabel strong { display: block; font-size: 14px; }
.partyQuestHallLabel span { display: block; }
.partyQuestGuideMap .partyQuestGuidePin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 4px; border: 2px solid var(--pq-tone, var(--accent)); border-radius: 14px; background: var(--control-bg); color: var(--plain-text); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; }
.partyQuestGuideMap a:focus-visible, .partyQuestGuideMap .partyQuestGuidePin:hover { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 2; }
.pqTone-red { --pq-tone: #d65353; }
.pqTone-blue { --pq-tone: #3988d2; }
.pqTone-yellow { --pq-tone: #b78d17; }
.pqTone-neutral { --pq-tone: #7a8490; }
.pqGuide-statue { max-width: 590px; }
.partyQuestDropArea { position: absolute; border: 2px dashed #39a584; background: #39a58430; pointer-events: none; }
.partyQuestFragmentLegend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px 14px; margin-top: 12px; }
.partyQuestGuideMap .partyQuestFragment { display: flex; gap: 8px; align-items: center; min-width: 0; padding: 6px 0; text-decoration: none; color: var(--plain-text); font-size: 13px; line-height: 1.5; }
.partyQuestFragment img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.partyQuestFragment > span { min-width: 0; }
.partyQuestFragment strong, .partyQuestFragment span span, .partyQuestFragment small { display: block; }
.partyQuestFragment small { color: var(--muted); font-size: 12px; }
.partyQuestQuiz { margin: 18px 0; min-width: 0; }
.partyQuestQuizTable { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.partyQuestQuizTable caption { padding: 0 0 8px; text-align: left; font-weight: 700; color: var(--plain-text); }
.partyQuestQuizTable th, .partyQuestQuizTable td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.partyQuestQuizTable th { color: var(--muted); font-weight: 600; font-size: 13px; }
.partyQuestQuizTable th:last-child, .partyQuestQuizTable td:last-child { width: 88px; text-align: center; }
.partyQuestQuizTable td strong { color: var(--active-text); white-space: nowrap; font-size: 16px; }
.partyQuestQuizTable td small { display: block; color: var(--muted); font-size: 12px; }
.questAnswerList {
  margin: 0;
  padding-left: 24px;
  color: var(--active-text);
}
.questAnswerList li { padding: 8px 0 8px 4px; }
.questAnswerOption {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.questAnswerText {
  color: var(--plain-text);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.ringDialogueChoice.questDialogueCorrect { border-width: 2px; }
.npcStatCell {
  display: grid;
  align-content: start;
  gap: 6px;
}
.npcStatBody {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.npcStatIcon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  color: var(--text-strong);
  display: grid;
  place-items: center;
  font-weight: 900;
  object-fit: contain;
  padding: 3px;
}
.npcStatText {
  min-width: 0;
}
.npcStatText strong {
  margin-top: 0;
}
.elementGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  padding: 12px 14px 8px;
}
.elementCell {
  min-height: 58px;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 8px 10px;
}
.elementCell span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.elementCell strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
}
.elementCell em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}
.elementCell.resist {
  border-color: var(--resist-border);
  background: var(--resist-bg);
}
.elementCell.resist strong {
  color: var(--resist-text);
}
.elementCell.weak {
  border-color: var(--weak-border);
  background: var(--weak-bg);
}
.elementCell.weak strong {
  color: var(--weak-text);
}
.elementCell.immune {
  border-color: var(--immune-border);
  background: var(--immune-bg);
}
.elementCell.immune strong {
  color: var(--immune-text);
}
.elementSource {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--muted);
  font-size: 12px;
}
.mapGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
}
.mapCard {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 68px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: inherit;
  padding: 9px 10px;
  text-decoration: none;
}
.mapCard:not(.withMapMark) {
  display: block;
}
.mapLinkCard:hover, .mapLinkCard:focus-visible {
  border-color: var(--link-hover-border);
  background: var(--link-hover-bg);
  outline: none;
}
.mapLinkCard:hover strong, .mapLinkCard:focus-visible strong {
  color: var(--blue);
}
.mapMarkImage {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border: 1px solid var(--mini-border);
  border-radius: 6px;
  background: var(--icon-bg);
  padding: 3px;
}
.mapCard strong {
  display: block;
  overflow-wrap: anywhere;
}
.mapCard span {
  display: block;
  margin: 3px 0;
  color: var(--blue);
  font-size: 12px;
}
.dropGroups {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}
.sourceList {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}
.compactSourceList {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.compactSourceList .sourceRow {
  width: min(100%, 380px);
}
.monsterSourceList {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: stretch;
}
.sourceRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-height: 64px;
  padding: 10px 11px;
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  background: var(--card-bg);
}
.monsterSourceRow, .sourceQuestRow, .craftSourceRow, .shopSourceRow {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
}
.monsterSourceList .monsterSourceRow {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 72px;
  padding-right: 94px;
}
.monsterSourceList .sourceMonsterImage {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}
.monsterSourceList .monsterSourceRow strong,
.monsterSourceList .monsterSourceRow span,
.monsterSourceList .monsterSourceRow p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monsterSourceList .monsterSourceRow small {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 72px;
  max-width: none;
  white-space: nowrap;
  padding: 3px 5px;
  font-size: 11px;
  text-align: center;
}
.sourceChipList {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: stretch;
}
.sourceChipList .sourceChipRow {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 72px;
  align-items: center;
}
.sourceChipList .sourceMonsterImage {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}
.sourceChipList .sourceChipRow strong,
.sourceChipList .sourceChipRow span,
.sourceChipList .sourceChipRow p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sourceChipList .sourceChipBadge {
  align-self: start;
  justify-self: end;
  min-width: 72px;
  max-width: none;
  white-space: nowrap;
  padding: 3px 5px;
  font-size: 11px;
  text-align: center;
}
.sourceChipList .sourceReferenceRow > .sourceReferenceNote {
  grid-column: 1 / -1;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.sourceChipList .sourceReferenceRow > .sourceChipBadge {
  grid-column: 3;
  grid-row: 1;
}
.sourceChipList .sourcePartyRewardRow {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr);
  padding-top: 32px;
}
.sourceChipList .sourcePartyRewardRow strong,
.sourceChipList .sourcePartyRewardRow span,
.sourceChipList .sourcePartyRewardRow p {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sourceChipList .sourcePartyRewardRow > .sourceChipBadge {
  position: absolute;
  top: 8px;
  right: 8px;
}
.shopSourceList .sourceChipBadge {
  min-width: 90px;
}
.shopSourceList {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.shopSourceList .sourceChipRow {
  align-items: start;
}
.shopSourceList .sourceChipRow span,
.shopSourceList .sourceChipRow p {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.shopPriceTiers {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}
.shopPriceTiers summary { cursor: pointer; }
.shopPriceTiers ol { list-style: none; padding-left: 0; margin: 6px 0 0; }
.boxSourceList {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 360px));
}
.boxSourceList .sourceChipRow strong,
.boxSourceList .sourceChipRow span,
.boxSourceList .sourceChipRow p {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.boxSourceList .sourceChipRow small { white-space: nowrap; }
.exchangeSourceList {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 360px));
}
.exchangeSourceList .sourceChipRow {
  grid-template-columns: 38px minmax(0, 1fr);
  position: relative;
  padding-top: 32px;
}
.exchangeSourceList .sourceChipRow strong,
.exchangeSourceList .sourceChipRow p {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.exchangeSourceList .sourceChipBadge {
  position: absolute;
  top: 8px;
  right: 8px;
}
.monsterQuestRequirementSourceList {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.monsterQuestRequirementSourceList .sourceChipBadge {
  min-width: 86px;
}
.sourceIconFallback {
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
}
.sourceMonsterImage {
  width: 38px;
  height: 38px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 3px;
  color: var(--text-strong);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.itemLinkCard, .sourceLinkRow {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.itemLinkCard:hover, .sourceLinkRow:hover {
  border-color: var(--link-hover-border);
  background: var(--link-hover-bg);
  transform: translateY(-1px);
}
.inlineSourceLink {
  color: inherit;
  text-decoration: none;
}
.inlineSourceLink:hover {
  color: var(--blue);
}
.sourceRow strong {
  display: block;
  overflow-wrap: anywhere;
}
.sourceRow span, .sourceRow p {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.sourceRow small {
  align-self: start;
  border: 1px solid var(--item-glyph-border);
  border-radius: 8px;
  background: var(--item-glyph-bg);
  color: var(--item-glyph-text);
  padding: 4px 7px;
  font-weight: 800;
}
.simulatorLayout {
  grid-template-columns: 430px minmax(0, 1fr);
}
.simulatorHeaderControls {
  justify-content: flex-end;
}
.simulatorControls {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
}
.simControlSection {
  display: grid;
  gap: 10px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 12px;
}
.simControlSection h2 {
  font-size: 18px;
}
.simControlSection select:not(.simNativeSelect) {
  width: 100%;
  min-height: 38px;
  flex: 0 0 auto;
}
.simNativeSelect {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.simPickerList {
  display: grid;
  gap: 6px;
  max-height: 282px;
  overflow: auto;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  padding: 6px;
}
.compactPickerList {
  max-height: 238px;
}
.simPickerRow {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--plain-text);
  padding: 6px 8px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.simPickerRow:hover {
  border-color: var(--link-hover-border);
  background: var(--hover-bg);
}
.simPickerRow.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.simPickerIcon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  color: var(--text-strong);
  object-fit: contain;
  padding: 3px;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.simPickerText {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.simPickerText strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.25;
}
.simPickerText span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}
.simPickerBadge {
  align-self: center;
  border: 1px solid var(--item-glyph-border);
  border-radius: 999px;
  background: var(--item-glyph-bg);
  color: var(--item-glyph-text);
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.simPickerEmpty {
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  color: var(--muted);
  padding: 12px;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}
.initialStatsPanel {
  display: grid;
  gap: 8px;
}
.initialStatsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.initialStatsHeader strong,
.initialStatsHeader span {
  display: block;
}
.initialStatsHeader strong {
  font-size: 14px;
}
.initialStatsHeader span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.initialStatsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.initialStatField {
  display: grid;
  grid-template-columns: minmax(58px, 0.7fr) minmax(62px, 1fr);
  gap: 4px 6px;
  align-items: center;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--control-soft);
  padding: 7px 8px;
}
.initialStatField span {
  color: var(--control-text);
  font-size: 12px;
  font-weight: 850;
}
.initialStatField input {
  min-width: 0;
  min-height: 30px;
  padding: 0 7px;
  text-align: right;
}
.initialStatField input:disabled {
  opacity: 0.72;
}
.initialStatField small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.fullWidthField {
  width: 100%;
}
.simInlineControls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.simInlineControls .advancedField {
  width: auto;
  min-width: 0;
}
.simInlineControls .priceField {
  grid-column: 1 / -1;
}
.simInlineControls input {
  width: 100%;
}
.simFilterGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.simFilterGrid.twoColumn {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.simFilterGrid select {
  min-height: 38px;
}
.simFilterGrid .fullGridControl {
  grid-column: 1 / -1;
}
.simFilterGrid .advancedField {
  min-width: 0;
}
.simLevelRangeField {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  color: var(--control-text);
  font-size: 12px;
  font-weight: 850;
}
.simLevelRangeInputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.simLevelRangeInputs input {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
}
.simLevelRangeInputs span {
  color: var(--muted);
  font-weight: 900;
}
.simFilterGrid .simCheckControl {
  grid-column: 1 / -1;
}
.simCheckControl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--control-text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 850;
}
.simCheckControl input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}
.primaryActionButton {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.primaryActionButton:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.strategyList {
  display: grid;
  gap: 8px;
}
.simSlotNote {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.strategyRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 8px;
}
.strategyRow strong {
  display: block;
  overflow-wrap: anywhere;
}
.strategyRow span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.strategyInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.strategyInputs label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.strategyInputs input {
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
}
.strategyInputs .priceField {
  grid-column: 1 / -1;
}
.strategyActions {
  display: grid;
  gap: 4px;
}
.iconMiniButton {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--control-border);
  border-radius: 7px;
  background: var(--control-soft);
  color: var(--control-text);
  font-weight: 900;
  cursor: pointer;
}
.iconMiniButton:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.smallEmpty {
  min-height: auto;
  padding: 10px;
  font-size: 13px;
}
.simHero {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--hero-border);
  background: var(--hero-bg);
}
.simHero p {
  margin: 0;
  color: var(--muted);
}
.simHero .heroCounters {
  grid-template-columns: repeat(4, minmax(84px, auto));
}
.simHero .heroCounter {
  min-width: 84px;
  white-space: nowrap;
}
.simHero .heroCounter strong {
  font-size: 17px;
}
.simChipLine {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.simChipLine span {
  border: 1px solid var(--mini-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--plain-text);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
}
.simIntro {
  padding: 12px 14px 16px;
  color: var(--plain-text);
  line-height: 1.6;
}
.simIntro p {
  margin: 0;
}
.simStatsGrid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.simTableWrap {
  overflow-x: auto;
  padding: 12px 14px 14px;
}
.simTableWrap h3 {
  margin-bottom: 8px;
}
.simTable {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: var(--plain-text);
  font-size: 13px;
}
.simTable th,
.simTable td {
  border-bottom: 1px solid var(--row-border);
  padding: 8px 9px;
  text-align: left;
  white-space: nowrap;
}
.simTable th {
  color: var(--text-strong);
  font-weight: 900;
}
.simTableGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 8px;
}
.simWarning {
  margin: 12px 14px 14px;
  border: 1px solid var(--weak-border);
  border-radius: 8px;
  background: var(--weak-bg);
  color: var(--weak-text);
  padding: 12px;
  font-weight: 850;
}
.compactWarning {
  margin: 0;
}
.simPolicyBox {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}
.simPolicyBox p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.simPathLine {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  padding: 8px 10px;
}
.simPathLine strong {
  color: var(--active-text);
}
.simPathLine span {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.successPreviewGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 8px;
  padding: 12px 14px 14px;
}
.successPreviewCell {
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 9px 10px;
}
.successPreviewCell span,
.successPreviewCell em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}
.successPreviewCell strong {
  display: block;
  margin: 3px 0;
  color: var(--text-strong);
  font-size: 19px;
  line-height: 1.2;
}
.simSamples {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}
.simSample {
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 9px 11px;
}
.simSample summary {
  cursor: pointer;
  font-weight: 900;
}
.simSampleBody {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.simSampleBody article {
  border-top: 1px dashed var(--dash-line);
  padding-top: 8px;
}
.simSampleBody ol {
  margin: 6px 0 0;
  padding-left: 1.4rem;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.simSampleNotice {
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 850;
}
.bossTimerLayout {
  grid-template-columns: 340px minmax(0, 1fr);
}
.bossTimerBossList,
.bossTimerLog {
  display: grid;
  gap: 8px;
}
.bossTimerFavoriteShell {
  position: relative;
  display: block;
}
.bossTimerFavoriteShell .favoriteButton {
  left: 10px;
  min-height: 0;
}
.bossTimerBossCard {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  color: var(--plain-text);
  padding: 8px 8px 8px 42px;
  text-align: left;
  cursor: pointer;
}
.bossTimerBossCard:hover {
  border-color: var(--link-hover-border);
  background: var(--hover-bg);
}
.bossTimerBossCard.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.bossTimerBossText {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.bossTimerBossText strong,
.bossTimerBossText span,
.bossTimerBossText small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bossTimerBossText strong {
  font-size: 15px;
  font-weight: 950;
}
.bossTimerBossText span,
.bossTimerBossText small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.bossTimerModeHint {
  display: grid;
  gap: 3px;
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  background: var(--control-soft);
  padding: 9px 10px;
}
.bossTimerModeHint strong {
  color: var(--text-strong);
  font-size: 14px;
}
.bossTimerModeHint span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}
.bossTimerSettingActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bossTimerLogRow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  padding: 7px 8px;
}
.bossTimerLogRow img {
  width: 30px;
  height: 30px;
  border: 1px solid var(--mini-border);
  border-radius: 7px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 2px;
}
.bossTimerLogRow strong,
.bossTimerLogRow small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bossTimerLogRow strong {
  font-size: 12px;
  font-weight: 900;
}
.bossTimerLogRow small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.bossTimerDetailCard {
  display: grid;
  gap: 0;
  min-height: auto;
  border: 1px solid var(--detail-border);
  border-radius: 8px;
  background: var(--detail-bg);
  overflow: hidden;
}
.bossTimerHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--detail-border);
  background: var(--hero-bg);
  padding: 16px;
}
.bossTimerHeroIdentity {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.bossTimerHeroIdentity img {
  width: 64px;
  height: 64px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 5px;
}
.bossTimerHeroIdentity h2 {
  margin: 2px 0 3px;
  color: var(--text-strong);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
}
.bossTimerHeroIdentity p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}
.bossTimerMapLink {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-top: 8px;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--control-text);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}
.bossTimerMapLink:hover {
  border-color: var(--link-hover-border);
  background: var(--link-hover-bg);
}
.bossTimerHeroStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 8px;
}
.bossTimerHeroStats div {
  min-width: 82px;
  border: 1px solid var(--item-glyph-border);
  border-radius: 8px;
  background: var(--item-glyph-bg);
  color: var(--item-glyph-text);
  padding: 10px 8px;
  text-align: center;
}
.bossTimerHeroStats strong,
.bossTimerHeroStats span {
  display: block;
  white-space: nowrap;
}
.bossTimerHeroStats strong {
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 950;
}
.bossTimerHeroStats span {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 900;
}
.bossTimerGridPanel {
  display: grid;
  gap: 10px;
  padding: 14px 16px 18px;
}
.sectionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.sectionHeading h3 {
  color: var(--text-strong);
  font-size: 18px;
}
.sectionHeading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}
.bossTimerQuickHint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.bossTimerLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.bossTimerLegend span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--mini-border);
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
}
.bossTimerLegendUnknown {
  border-style: dashed;
  background: color-mix(in srgb, var(--card-bg) 62%, var(--page-bg));
  color: var(--muted);
}
.bossTimerLegendWaiting {
  border-color: rgba(37, 99, 235, 0.52);
  background: rgba(37, 99, 235, 0.18);
  color: color-mix(in srgb, #2563eb 76%, var(--text-strong));
}
.bossTimerLegendReady { background: rgba(65, 163, 105, 0.18); color: var(--active-text); }
.bossTimerLegendSoon { background: rgba(214, 163, 62, 0.2); color: var(--item-glyph-text); }
.bossTimerChannelGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.bossTimerChannel {
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  min-height: 64px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--plain-text);
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.16s ease, background 0.16s ease;
}
.bossTimerChannel:hover {
  border-color: var(--link-hover-border);
  background: var(--hover-bg);
  transform: translateY(-1px);
}
.bossTimerChannel.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
}
.bossTimerChannel strong,
.bossTimerChannel span,
.bossTimerChannel small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bossTimerChannel strong {
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 950;
}
.bossTimerChannel span {
  font-size: 13px;
  font-weight: 950;
}
.bossTimerChannel small {
  display: none;
}
.bossTimerState-unknown {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--mini-border) 58%, var(--muted));
  background: color-mix(in srgb, var(--card-bg) 62%, var(--page-bg));
}
.bossTimerState-unknown strong,
.bossTimerState-unknown span {
  color: var(--muted);
}
.bossTimerState-waiting {
  border-color: rgba(37, 99, 235, 0.64);
  background: rgba(37, 99, 235, 0.18);
}
.bossTimerState-waiting span {
  color: color-mix(in srgb, #2563eb 76%, var(--text-strong));
}
.bossTimerState-ready {
  border-color: rgba(65, 163, 105, 0.55);
  background: rgba(65, 163, 105, 0.18);
}
.bossTimerState-ready span {
  color: var(--active-text);
}
.bossTimerState-soon,
.bossTimerState-overdue {
  border-color: rgba(214, 163, 62, 0.62);
  background: rgba(214, 163, 62, 0.16);
}
.bossTimerState-soon span,
.bossTimerState-overdue span {
  color: var(--item-glyph-text);
}
.bossTimerState-overdue {
  box-shadow: inset 0 0 0 2px rgba(214, 163, 62, 0.2);
}
.gachaProductGrid {
  display: grid;
  gap: 8px;
}
.gachaProductCard {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  color: var(--plain-text);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}
.gachaProductCard:hover {
  border-color: var(--link-hover-border);
  background: var(--hover-bg);
}
.gachaProductCard.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.gachaProductCard img {
  width: 42px;
  height: 42px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 4px;
}
.gachaProductCard strong,
.gachaProductCard small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gachaProductCard strong {
  font-size: 15px;
  font-weight: 950;
}
.gachaProductCard small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.gachaProductCard em {
  color: var(--item-glyph-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}
.gachaPrizePicker {
  max-height: 330px;
}
.gachaTierIcon {
  font-size: 14px;
}
.gachaRoyalPrizeRow {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  min-height: 66px;
}
.simPickerIcon.gachaRoyalAvatarIcon {
  width: 54px;
  height: 54px;
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 252, 0.86));
  object-fit: contain;
}
.gachaPrizeIcon,
.gachaLogIcon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid var(--mini-border);
  border-radius: 7px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 3px;
}
.gachaPrizeIcon.gachaRoyalAvatarIcon {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  padding: 0;
}
.gachaLogIcon.gachaRoyalAvatarIcon {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  padding: 0;
}
.gachaPrizePickerIcon {
  display: block;
}
.gachaPrizeIconFallback {
  display: inline-grid;
  place-items: center;
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 950;
}
.gachaPrizeNameCell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gachaPrizeNameCell > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gachaTierSettings {
  display: grid;
  gap: 8px;
}
.gachaPetStrategyActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gachaPetStrategySettings {
  display: grid;
  gap: 8px;
}
.gachaPetStrategyRow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  padding: 7px 8px;
}
.gachaPetStrategyIcon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--mini-border);
  border-radius: 7px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 3px;
}
.gachaPetStrategyRow strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.gachaPetMode {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  border: 1px solid var(--mini-border);
  border-radius: 7px;
  overflow: hidden;
}
.gachaPetMode button {
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-right: 1px solid var(--mini-border);
  background: var(--control-bg);
  color: var(--muted);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.gachaPetMode button:last-child {
  border-right: 0;
}
.gachaPetMode button.active {
  background: var(--accent-soft);
  color: var(--active-text);
}
.gachaTierControl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  padding: 8px 10px;
}
.gachaTierControl label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 900;
}
.gachaTierControl label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gachaTierControl input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.gachaTierControl input[type="number"] {
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  text-align: right;
}
.gachaCheckField {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  color: var(--plain-text);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 900;
}
.gachaCheckField span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gachaCheckField input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.gachaDrawButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.gachaDrawButtons .primaryActionButton,
.gachaDrawButtons .clearFiltersButton {
  grid-column: 1 / -1;
}
.gachaHero .monsterPortrait {
  object-fit: contain;
  padding: 6px;
}
.gachaPanel {
  border-top: 1px dashed var(--dash-line);
  padding: 14px 16px;
}
.gachaPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gachaPanelHeader h2,
.gachaPanelHeader h3 {
  margin: 0;
  font-size: 18px;
}
.gachaPanelHeader span,
.gachaPanelHeader a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}
.gachaPanelHeader a:hover {
  color: var(--link);
}
.gachaStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}
.gachaStatCard {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 10px 12px;
}
.gachaStatCard span,
.gachaStatCard small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.gachaStatCard strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.gachaFormulaNote {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}
.gachaSplitGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 10px;
  margin-top: 12px;
}
.gachaSubPanel {
  min-width: 0;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  padding: 10px;
}
.gachaSubPanel h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.gachaTableWrap {
  overflow-x: auto;
}
.gachaTable {
  width: 100%;
  border-collapse: collapse;
  color: var(--plain-text);
  font-size: 13px;
}
.gachaTable th,
.gachaTable td {
  border-bottom: 1px solid var(--row-border);
  padding: 8px 9px;
  text-align: left;
  white-space: nowrap;
}
.gachaTable th {
  color: var(--text-strong);
  font-weight: 950;
}
.gachaTable td:last-child,
.gachaTable th:last-child {
  text-align: right;
}
.gachaTable tr.active {
  background: var(--accent-soft);
  color: var(--active-text);
}
.gachaLog {
  display: grid;
  gap: 6px;
  max-height: 260px;
  margin: 0;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 8px;
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 800;
}
.gachaLogEntry {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border-radius: 4px;
  padding: 3px 5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.gachaLogEntry > span {
  min-width: 0;
}
.gachaLogBigPrize {
  background: #ffe66d;
  color: #111111;
  font-family: "MingLiU", "PMingLiU", serif;
  font-weight: 900;
}
.gachaLogPrize {
  color: #7e22ce;
  font-weight: 950;
}
.gachaPrizeGroup {
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--detail-bg);
  overflow: hidden;
}
.gachaPrizeGroup + .gachaPrizeGroup {
  margin-top: 10px;
}
.gachaPrizeGroup summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 10px 12px;
  color: var(--text-strong);
  font-weight: 950;
}
.gachaPrizeGroup summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.hiddenMapClusterList {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}
.hiddenMapCluster {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  background: rgba(74, 119, 168, 0.05);
}
.hiddenMapCluster .sourceList {
  padding: 0;
}
.hiddenMapClusterHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.hiddenMapClusterHeader strong,
.hiddenMapClusterHeader span {
  display: block;
}
.hiddenMapClusterHeader span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.hiddenMapClusterHeader small {
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}
.recipeChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.recipeChip {
  display: inline-grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  max-width: 260px;
  min-height: 36px;
  padding: 4px 7px 4px 4px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  color: inherit;
  text-decoration: none;
}
.recipeMesoChip {
  border-color: rgba(214, 163, 62, 0.45);
  background: rgba(214, 163, 62, 0.1);
}
.recipeMesoChip .mesoInlineIcon {
  justify-self: center;
  width: 26px;
  height: 26px;
}
.recipeChip:hover {
  border-color: var(--link-hover-border);
  background: var(--link-hover-bg);
}
.recipeIcon {
  width: 26px;
  height: 26px;
  border: 1px solid var(--mini-border);
  border-radius: 6px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 2px;
  color: var(--text-strong);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}
.recipeChip strong, .recipeChip em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipeChip em, .sourceNote {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.listLimit {
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.equipStats {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}
.equipRangeNote {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.equipStatGroup {
  display: grid;
  gap: 8px;
}
.equipStatGroup > strong {
  color: var(--text-strong);
  font-size: 15px;
}
.equipStatsGrid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  padding: 0;
}
.equipStatRange {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-style: normal;
  line-height: inherit;
}
.textLines, .questGroups {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}
.textLine {
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 10px 11px;
}
.textLine strong, .requirementGroup > strong {
  display: block;
  color: var(--text-strong);
  font-size: 15px;
}
.textLine p {
  margin: 6px 0 0;
  color: var(--plain-text);
  white-space: pre-wrap;
}
.requirementGroup {
  display: grid;
  gap: 8px;
}
.compactStats {
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  padding: 0;
}
.skillTableWrap {
  overflow: auto;
  padding: 12px 14px 14px;
}
.skillTable {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--plain-text);
  font-size: 13px;
}
.skillTable th, .skillTable td {
  border-right: 1px solid var(--stat-border);
  border-bottom: 1px solid var(--stat-border);
  background: var(--card-bg);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.skillTable th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-strong);
  background: var(--hero-bg);
  font-weight: 900;
  white-space: nowrap;
}
.skillTable th:first-child, .skillTable td:first-child {
  border-left: 1px solid var(--stat-border);
}
.skillTable thead th {
  border-top: 1px solid var(--stat-border);
}
.skillLevelCell {
  width: 56px;
  color: var(--text-strong);
  font-weight: 900;
}
.skillValueCell {
  min-width: 86px;
  font-weight: 800;
  white-space: nowrap;
}
.skillDescCell {
  min-width: 320px;
  line-height: 1.45;
}
.linkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.miniLink {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 50px;
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 8px;
  color: inherit;
  text-decoration: none;
}
.miniLink:not(.staticMini):hover {
  border-color: var(--link-hover-border);
  background: var(--link-hover-bg);
}
.miniIcon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 3px;
  color: var(--text-strong);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.miniLink strong {
  display: block;
  overflow-wrap: anywhere;
}
.miniLink em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.dropGroup {
  border-top: 1px dashed var(--dash-line);
}
.dropGroup:first-child {
  border-top: 0;
}
.dropGroupTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 6px 2px 9px;
}
.dropGroupTitle strong {
  color: var(--text-strong);
  font-size: 15px;
}
.dropGroupTitle span {
  color: var(--muted);
  font-size: 12px;
}
.dropsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 9px;
  padding: 0;
}
.mesoDropCard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(214, 163, 62, 0.45);
  border-radius: 8px;
  background: rgba(214, 163, 62, 0.11);
}
.mesoIcon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(214, 163, 62, 0.55);
  border-radius: 8px;
  background: rgba(214, 163, 62, 0.18);
  color: #f5c45b;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.mesoInlineIcon {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -4px;
}
.mesoDropIcon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.mesoValue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  white-space: nowrap;
}
.statCell strong .mesoValue, .sourceRow .mesoValue {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.statCell strong .mesoValue {
  width: 100%;
  flex-wrap: wrap;
  white-space: normal;
}
.statCell strong .mesoValueText, .sourceRow .mesoValueText {
  display: inline;
  min-width: 0;
  color: inherit;
  font-size: inherit;
  margin: 0;
  line-height: inherit;
}
.statCell strong .mesoValueText {
  overflow-wrap: anywhere;
  white-space: normal;
}
.mesoText strong {
  display: block;
  color: var(--text-strong);
}
.mesoText span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.itemCard {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px dashed var(--dash-line);
  border-radius: 8px;
  background: var(--card-bg);
}
.itemIcon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--icon-bg);
  object-fit: contain;
  padding: 4px;
  font-weight: 900;
  color: var(--text-strong);
  display: grid;
  place-items: center;
}
.itemText strong {
  display: block;
  overflow-wrap: anywhere;
}
.dropRateLine {
  display: block;
  margin-top: 2px;
  color: var(--control-text);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}
.compactDropItemCard .itemText strong {
  margin-top: 0;
}
.itemText span {
  display: block;
  margin: 2px 0;
  color: var(--muted);
  font-size: 12px;
}
.itemText p {
  font-size: 12px;
}
.equipRequirementLines {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}
.equipRequirementLines p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 8px;
  align-items: start;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}
.equipRequirementLines .equipRequirementPrimary {
  display: block;
}
.equipRequirementLines .equipRequirementPrimary strong {
  display: block;
  text-align: left;
}
.equipRequirementLines p span {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.equipRequirementLines p strong {
  color: var(--plain-text);
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: right;
}
.equipRangeLines {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.equipRangeLines p {
  margin: 0;
  color: var(--plain-text);
  font-size: 12px;
  line-height: 1.35;
}
.empty {
  padding: 28px;
  color: var(--muted);
}
.mapLayout {
  grid-template-columns: 420px minmax(0, 1fr);
}
.mapIndexRow small {
  min-width: 42px;
  text-align: right;
}
.mapRegionDivider {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 11px;
  border-bottom: 1px solid var(--row-border);
  background: var(--hero-bg);
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
}
.mapGlyph {
  display: grid;
  place-items: center;
  border: 1px solid var(--mini-border);
  background: var(--quest-glyph-bg);
  color: var(--text-strong);
  font-weight: 900;
}
.mapCanvasShell {
  display: grid;
  min-width: 0;
  gap: 10px;
  padding: 12px 14px 14px;
}
.mapDetailPane,
.mapDetailPane .sectionBlock {
  min-width: 0;
}
.mapDetailPane > .mapHero {
  position: static;
}
.mapDetailPane .heroText,
.mapDetailPane .sourceLinkRow,
.mapDetailPane .mapLayerToggle {
  overflow-wrap: anywhere;
  min-width: 0;
}
.mapViewportFrame {
  position: relative;
  min-width: 0;
  height: min(60vh, 640px);
  height: min(60svh, 640px);
  min-height: 200px;
  overflow: hidden;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background: var(--card-bg);
}
.mapScrollViewport {
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
.mapCanvasStage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: max-content;
  min-width: 100%;
  min-height: 100%;
  padding: 12px;
}
.mapZoomControls {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--stat-border);
  border-radius: 6px;
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}
.mapZoomControls button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--stat-border);
  border-radius: 4px;
  background: var(--control-bg);
  color: var(--text-strong);
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.mapZoomControls [data-map-zoom="native"] {
  width: 58px;
  font-size: 13px;
}
.mapZoomControls button:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mapZoomControls button:disabled {
  opacity: .45;
  cursor: default;
}
.mapZoomControls button:focus-visible,
.mapScrollViewport:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.mapCanvas {
  position: relative;
  z-index: 0;
  isolation: isolate;
  contain: paint;
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background:
    linear-gradient(rgba(47, 125, 91, 0.12), rgba(47, 125, 91, 0.03)),
    repeating-linear-gradient(0deg, rgba(71, 119, 168, 0.12) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(71, 119, 168, 0.12) 0 1px, transparent 1px 48px),
    var(--card-bg);
}
.mapCanvas.withMiniMapImage {
  background-color: rgba(255, 255, 255, 0.72);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.mapCanvas.withRenderedMapImage {
  min-height: 0;
  max-height: none;
  background-color: #94cfe8;
}
.mapCanvas.withRegionPreviewImage {
  background-color: #eef7fb;
  background-size: contain;
}
:root[data-theme="dark"] .mapCanvas {
  background:
    linear-gradient(rgba(86, 213, 143, 0.08), rgba(86, 213, 143, 0.02)),
    repeating-linear-gradient(0deg, rgba(131, 183, 255, 0.12) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(131, 183, 255, 0.12) 0 1px, transparent 1px 48px),
    var(--card-bg);
}
:root[data-theme="dark"] .mapCanvas.withMiniMapImage {
  background-color: rgba(15, 23, 42, 0.78);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
:root[data-theme="dark"] .mapCanvas.withRenderedMapImage {
  background-color: #1f4255;
}
:root[data-theme="dark"] .mapCanvas.withRegionPreviewImage {
  background-color: #172033;
}
.mapPreviewNotice {
  position: absolute;
  right: 12px;
  bottom: 12px;
  max-width: min(460px, calc(100% - 24px));
  padding: 6px 9px;
  border: 1px solid var(--mini-border);
  border-radius: 6px;
  background: var(--hero-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}
.mapAxisLabel {
  position: absolute;
  z-index: 4;
  border: 1px solid var(--stat-border);
  border-radius: 6px;
  background: var(--hero-bg);
  color: var(--muted);
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 800;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.mapAxisLabelX {
  left: 8px;
  bottom: 8px;
}
.mapAxisLabelY {
  right: 8px;
  top: 8px;
}
.portalArrowLayer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.portalArrowLine {
  fill: none;
  stroke: #d69e2e;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.45));
}
.portalArrowHead path {
  fill: #d69e2e;
}
:root[data-theme="dark"] .portalArrowLine {
  stroke: #f4c46a;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
:root[data-theme="dark"] .portalArrowHead path {
  fill: #f4c46a;
}
.terrainLineLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.terrainLine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.terrainFootholdLine {
  stroke: #ef4444;
  stroke-width: 1.1;
  opacity: 0.58;
}
.terrainLadderLine {
  stroke: #2563eb;
  stroke-width: 1.15;
  opacity: 0.68;
}
.terrainRopeLine {
  stroke: #8b5a2b;
  stroke-width: 1.15;
  opacity: 0.7;
}
:root[data-theme="dark"] .terrainFootholdLine {
  stroke: #fb7185;
  opacity: 0.64;
}
:root[data-theme="dark"] .terrainLadderLine {
  stroke: #60a5fa;
  opacity: 0.72;
}
:root[data-theme="dark"] .terrainRopeLine {
  stroke: #d6ad5b;
  opacity: 0.74;
}
.mapMarker {
  position: absolute;
  z-index: 3;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.36);
  cursor: pointer;
}
.spawnMarker {
  display: grid;
  place-items: end center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  transform: translate(-50%, -100%);
  box-shadow: none;
}
.spawnMarkerImage {
  display: block;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.48));
  pointer-events: none;
}
.spawnMarkerFallback {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ef4444;
}
.npcMarker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: 24px;
  max-width: 142px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-12px, -100%);
  cursor: default;
}
.npcMarkerImage, .npcMarkerFallback {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.86);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.48));
}
.npcMarkerFallback {
  display: grid;
  place-items: center;
  color: #1d5e42;
  font-size: 12px;
  font-weight: 900;
}
.npcMarkerLabel {
  display: block;
  min-width: 0;
  max-width: 108px;
  overflow: hidden;
  border: 1px solid rgba(47, 125, 91, 0.42);
  border-radius: 6px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.86);
  color: #1d5e42;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.72));
}
:root[data-theme="dark"] .npcMarkerImage,
:root[data-theme="dark"] .npcMarkerFallback,
:root[data-theme="dark"] .npcMarkerLabel {
  border-color: rgba(86, 213, 143, 0.42);
  background: rgba(15, 23, 42, 0.84);
  color: #a7f3d0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
}
.portalMarker {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #3b82f6;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sameMapPortal {
  background: #d69e2e;
}
.mapMarker:hover {
  z-index: 3;
  outline: 3px solid var(--accent-soft);
}
.mapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mapLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mapLayerControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.mapLayerToggle, .layerIconButton {
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}
.mapLayerToggle {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}
.layerIconButton {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 12px;
}
.visibilityIcon {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.mapLayerToggle:hover, .layerIconButton:hover {
  border-color: var(--link-hover-border);
  color: var(--text-strong);
}
.mapLayerToggle[aria-pressed="true"], .layerIconButton[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
}
.spawnControlRow {
  grid-template-columns: 32px 42px minmax(0, 1fr) auto;
}
.spawnControlRow.isMuted {
  opacity: 0.62;
}
.spawnImageLink, .spawnTextLink {
  color: inherit;
  text-decoration: none;
}
.spawnImageLink:hover + .spawnTextLink strong,
.spawnTextLink:hover strong {
  color: var(--blue);
}
.legendDot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}
.legendLine {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid currentColor;
}
.spawnDot {
  background: #ef4444;
}
.npcDot {
  background: #2f7d5b;
}
.portalDot {
  border-radius: 3px;
  background: #3b82f6;
  transform: rotate(45deg);
}
.sameMapDot {
  border-radius: 3px;
  background: #d69e2e;
  transform: rotate(45deg);
}
.terrainLegendLine {
  color: #ef4444;
  opacity: 0.72;
}
.portalMiniIcon {
  background: var(--accent-soft);
  color: var(--active-text);
}
.worldMapLayout {
  grid-template-columns: 340px minmax(0, 1fr);
}
.worldRegionRow small {
  min-width: 64px;
  text-align: right;
  white-space: nowrap;
}
.worldMapCanvasShell {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
}
.worldMapCanvas {
  position: relative;
  z-index: 0;
  isolation: isolate;
  contain: paint;
  width: 100%;
  min-height: min(68vh, 700px);
  overflow: hidden;
  border: 1px solid var(--mini-border);
  border-radius: 8px;
  background:
    linear-gradient(rgba(47, 125, 91, 0.10), rgba(47, 125, 91, 0.03)),
    repeating-linear-gradient(0deg, rgba(71, 119, 168, 0.12) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, rgba(71, 119, 168, 0.12) 0 1px, transparent 1px 52px),
    var(--card-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  aspect-ratio: 4 / 3;
}
.worldMapCanvas.withWorldMapImage {
  background-color: rgba(255, 255, 255, 0.82);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
:root[data-theme="dark"] .worldMapCanvas {
  background:
    linear-gradient(rgba(86, 213, 143, 0.08), rgba(86, 213, 143, 0.02)),
    repeating-linear-gradient(0deg, rgba(131, 183, 255, 0.12) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, rgba(131, 183, 255, 0.12) 0 1px, transparent 1px 52px),
    var(--card-bg);
}
:root[data-theme="dark"] .worldMapCanvas.withWorldMapImage {
  background-color: rgba(15, 23, 42, 0.78);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.worldMapEdgeLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.worldEdge {
  fill: none;
  stroke: rgba(36, 91, 69, 0.46);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.75));
}
.worldRoutedEdge {
  stroke: rgba(36, 91, 69, 0.58);
}
.worldDenseEdge {
  opacity: 0.24;
}
:root[data-theme="dark"] .worldEdge {
  stroke: rgba(167, 243, 208, 0.42);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.68));
}
:root[data-theme="dark"] .worldRoutedEdge {
  stroke: rgba(167, 243, 208, 0.56);
}
.worldMapNode {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 24px;
  max-width: 150px;
  transform: translate(-12px, -50%);
  color: var(--plain-text);
  text-decoration: none;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.95));
}
.worldNodeIcon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: #1f2937;
  object-fit: contain;
  padding: 2px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.42);
}
.worldNodeLabel {
  display: none;
  flex: 0 1 auto;
  width: max-content;
  max-width: 112px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  padding: 1px 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  color: #1f2937;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: auto;
}
.worldMapNode:hover .worldNodeLabel,
.worldMapNode:focus-visible .worldNodeLabel {
  display: block;
}
.worldMapNode:hover {
  z-index: 6;
}
.worldMapNode:hover .worldNodeIcon {
  outline: 3px solid var(--accent-soft);
}
.worldMapNode:hover .worldNodeLabel {
  border-color: var(--accent);
  color: var(--active-text);
}
:root[data-theme="dark"] .worldMapNode {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.82));
}
:root[data-theme="dark"] .worldNodeLabel {
  border-color: rgba(15, 23, 42, 0.72);
  background: rgba(15, 23, 42, 0.84);
  color: #e5edf5;
}
:root[data-theme="dark"] .worldNodeIcon {
  border-color: rgba(15, 23, 42, 0.72);
  background: rgba(15, 23, 42, 0.84);
  color: #e5edf5;
}
.worldNodeLegend {
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 3px rgba(47, 125, 91, 0.36);
}
.worldLineLegend {
  display: inline-block;
  width: 24px;
  height: 0;
  border-top: 2px solid #2f7d5b;
}
.adventureGuidePage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scroll-behavior: smooth;
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 58%, transparent), transparent 320px),
    var(--page-bg);
}
.ringGuideLayout {
  display: grid;
  grid-template-columns: 174px minmax(0, 1180px);
  gap: 16px;
  align-items: start;
  width: min(1380px, 100%);
  margin: 0 auto;
}
.ringGuideContent {
  min-width: 0;
}
.ringGuideSideNav {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 6px;
  max-height: calc(100dvh - 112px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.ringGuideSideNav strong {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}
.ringGuideSideNav a {
  display: flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
}
.ringGuideSideNav a:hover,
.ringGuideSideNav a:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--active-text);
  outline: none;
}
.ringGuideNavGroup {
  display: grid;
  gap: 5px;
  border-top: 1px solid var(--stat-border);
  padding-top: 7px;
}
.ringGuideNavGroup:first-of-type {
  border-top: 0;
  padding-top: 2px;
}
.ringGuideNavGroup summary {
  cursor: pointer;
  border-radius: 7px;
  padding: 4px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}
.ringGuideNavGroup summary:hover,
.ringGuideNavGroup summary:focus-visible {
  background: var(--accent-soft);
  color: var(--text-strong);
  outline: none;
}
.ringGuideSubLinks {
  display: grid;
  gap: 4px;
  padding: 0 0 2px 8px;
}
.ringGuideSideNav .ringGuideSubLinks a {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 850;
}
.ringGuideHero,
.ringGuideSection {
  width: min(1180px, 100%);
  margin: 0 auto 16px;
  scroll-margin-top: 18px;
}
.ringTimeline > li,
.ringRewardChoice {
  scroll-margin-top: 18px;
}
.ringGuideHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.sectionEyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}
.ringGuideHero h2,
.ringGuideSection h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 28px;
  line-height: 1.2;
}
.ringGuideHero p,
.ringTimeline p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.7;
}
.ringRewardPreview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  justify-items: center;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  padding: 16px;
  background: var(--card-bg);
}
.ringRewardPreview img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  image-rendering: auto;
}
.ringTimeline > li,
.ringRewardChoice article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.ringAssetRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ringGuideSection {
  display: grid;
  gap: 12px;
}
.ringTimeline {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ringTimeline > li {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.ringStepHeader {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-strong);
}
.ringStepHeader span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--active-text);
  font-size: 13px;
  font-weight: 950;
}
.ringStepHeader strong {
  margin-right: auto;
  font-size: 19px;
  line-height: 1.25;
}
.ringStepExpBadge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--card-bg);
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
.ringAvatar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  padding: 4px 9px 4px 5px;
  background: var(--card-bg);
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 900;
}
.ringAvatar img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
}
.ringNpcSpot {
  display: grid;
  grid-template-columns: 34px minmax(54px, 1fr) 98px;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  padding: 6px;
  background: var(--card-bg);
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 900;
}
.ringNpcLocationNote {
  grid-column: 1 / -1;
  line-height: 1.5;
  font-weight: 400;
}
.ringNpcIcon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.ringNpcSpot strong {
  min-width: 0;
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
}
.ringMiniMap {
  position: relative;
  display: block;
  width: 98px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 78%, #ffffff);
}
.ringMiniMap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ringMiniMap small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  left: 3px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  padding: 1px 3px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--text-strong);
  font-size: 9px;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ringMapPin {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.24), 0 1px 4px rgba(15, 23, 42, 0.45);
  transform: translate(-50%, -50%);
}
.ringMapPin::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: #ffffff;
}
.ringRouteDetails {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 1px;
  border-top: 1px dashed var(--stat-border);
  padding-top: 5px;
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}
.ringRouteDetails summary {
  cursor: pointer;
  color: var(--text-strong);
  font-size: 11px;
  font-weight: 950;
}
.ringRouteDetails summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 5px;
}
.ringRouteFlow {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 7px 1px 2px;
}
.ringRouteStep {
  display: grid;
  flex: 0 0 116px;
  gap: 4px;
  min-width: 0;
}
.ringRouteMap {
  width: 116px;
  height: 66px;
}
.ringRouteStep small {
  display: block;
  color: var(--muted-text);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
}
.ringRouteArrow {
  flex: 0 0 auto;
  padding-top: 25px;
  color: var(--muted-text);
  font-weight: 950;
}
.ringPortalPin {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-radius: 3px;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 1px 4px rgba(15, 23, 42, 0.45);
  transform: translate(-50%, -50%) rotate(45deg);
}
.ringPortalPin::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 1px;
  background: #ffffff;
}
.ringMaterialGrid,
.ringTotalGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.ringRewardChoice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.ringMaterialGrid span,
.ringTotalGrid span {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  flex: 0 1 286px;
  max-width: 100%;
  min-height: 50px;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--card-bg);
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 880;
  line-height: 1.32;
}
.ringMaterialGrid img,
.ringTotalGrid img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.ringMaterialGrid small,
.ringTotalGrid small {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}
.ringMaterialGrid span > br,
.ringTotalGrid span > br {
  display: none;
}
.ringMaterialGrid small img,
.ringTotalGrid small img {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 3px 2px;
  object-fit: contain;
  vertical-align: middle;
}
.ringMaterialGroupTitle {
  margin: 16px 0 8px;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 950;
}
.ringNote {
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--accent-soft);
  color: var(--active-text) !important;
  font-size: 13px !important;
  font-weight: 880 !important;
}
.ringMonsterRequirementGrid span {
  grid-template-columns: 44px minmax(0, 1fr);
}
.ringMonsterRequirementGrid img {
  width: 42px;
  height: 42px;
}
.ringRewardChoice article {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--text-strong);
  font-weight: 920;
}
.ringRewardChoice img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
}
.ringRewardInfo {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.ringRewardInfo strong {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}
.ringRewardInfo small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
}
.ringRewardStats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ringRewardStats b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0 8px;
  background: var(--accent-soft);
  color: var(--active-text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}
.ringTotalGrid {
  padding-bottom: 6px;
}
.ringDialogueIntro {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.65;
}
.ringDialogueList {
  display: grid;
  gap: 10px;
}
.ringDialogueQuest {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}
.ringDialogueQuest summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
  color: var(--text-strong);
}
.ringDialogueQuest summary::-webkit-details-marker {
  display: none;
}
.ringDialogueQuest summary:hover,
.ringDialogueQuest summary:focus-visible {
  background: var(--accent-soft);
  outline: none;
}
.ringDialogueQuest summary span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.ringDialogueQuest summary code,
.ringDialogueMeta code {
  border: 1px solid var(--stat-border);
  border-radius: 7px;
  padding: 3px 6px;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.ringDialogueQuest summary strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.3;
}
.ringDialogueQuest summary em {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}
.ringDialogueQuest[open] summary {
  border-bottom: 1px solid var(--line);
}
.ringDialogueEntries {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.ringDialogueEmpty {
  margin: 0;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.5;
}
.ringDialogueEntry {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--stat-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--card-bg);
}
.ringDialogueMeta {
  display: grid;
  gap: 6px;
  align-items: start;
}
.ringDialogueMeta strong {
  color: var(--active-text);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.3;
}
.ringDialogueText {
  min-width: 0;
  color: var(--plain-text);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.ringDialogueInlineIcon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 3px 2px;
  object-fit: contain;
  vertical-align: middle;
}
.ringDialogueToken,
.ringDialogueChoice {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 0 6px;
  background: var(--accent-soft);
  color: var(--active-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.mobileDock {
  display: none;
}
.backToTop {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--control-bg);
  color: var(--active-text);
  box-shadow: var(--shadow-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}
.backToTop:hover { background: var(--accent-soft); }
.backToTop:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (min-width: 861px) {
  body {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .appHeader {
    flex: 0 0 auto;
  }
  .layout {
    flex: 1 1 auto;
    min-height: 0;
  }
  .patchNotesLayout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}
@media (max-width: 860px) {
  html {
    height: 100%;
  }
  body {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .appHeader {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    z-index: 520;
    padding: 9px 10px;
    min-height: 58px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
    backdrop-filter: none;
  }
  .adventureGuidePage {
    padding: 12px;
  }
  .ringGuideLayout {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
  }
  .ringGuideSideNav {
    top: 0;
    z-index: 40;
    display: flex;
    gap: 6px;
    max-height: none;
    margin: 0 0 12px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: none;
  }
  .ringGuideSideNav::-webkit-scrollbar {
    display: none;
  }
  .ringGuideSideNav strong {
    display: none;
  }
  .ringGuideSideNav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .ringGuideNavGroup {
    flex: 0 0 auto;
    border-top: 0;
    padding-top: 0;
  }
  .ringGuideNavGroup summary {
    min-height: 34px;
    border: 1px solid var(--stat-border);
    padding: 8px 10px;
    white-space: nowrap;
  }
  .ringGuideNavGroup[open] .ringGuideSubLinks {
    display: flex;
    gap: 6px;
    padding: 6px 0 0;
  }
  .ringGuideSideNav .ringGuideSubLinks a {
    min-height: 30px;
  }
  .ringGuideHero,
  .ringGuideSection,
  .ringTimeline > li,
  .ringRewardChoice {
    scroll-margin-top: 64px;
  }
  .ringGuideHero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .ringGuideHero h2,
  .ringGuideSection h2 {
    font-size: 22px;
  }
  .ringRewardPreview {
    grid-template-columns: repeat(3, 1fr);
    padding: 12px;
  }
  .ringRewardPreview img {
    width: 48px;
    height: 48px;
  }
  .ringMaterialGrid,
  .ringTotalGrid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ringRewardChoice {
    grid-template-columns: 1fr;
  }
  .ringMaterialGrid span,
  .ringTotalGrid span {
    width: 100%;
  }
  .ringTimeline > li {
    padding: 14px;
  }
  .ringNpcSpot {
    grid-template-columns: 32px minmax(64px, 1fr) 88px;
    width: 100%;
  }
  .ringDialogueQuest summary {
    align-items: flex-start;
  }
  .ringDialogueQuest summary em {
    padding-top: 3px;
  }
  .ringDialogueEntry {
    grid-template-columns: 1fr;
  }
  .ringDialogueMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .ringMiniMap {
    width: 88px;
    height: 52px;
  }
  .titleArea {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    grid-template-areas:
      "brand actions menu"
      "meta meta meta";
    align-items: center;
    min-width: 0;
    width: 100%;
    gap: 4px;
  }
  h1 {
    font-size: 20px;
    line-height: 1.2;
  }
  .siteBrandTitle {
    grid-area: brand;
    gap: 8px;
  }
  .siteBrandMain {
    font-size: 18px;
  }
  .siteBrandSubtitle {
    font-size: 11px;
  }
  .siteBrandIcon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 7px;
    padding: 2px;
  }
  .buildMeta {
    grid-area: meta;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
  }
  .navDrawerToggle {
    grid-area: menu;
    display: grid;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-soft);
    color: var(--control-text);
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
  }
  .navDrawerToggle[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--active-text);
  }
  .navDrawerBackdrop {
    position: fixed;
    inset: 0;
    z-index: 360;
    display: block;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  :root[data-nav-drawer-open="true"] .navDrawerBackdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .topNav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 370;
    display: block;
    width: min(330px, calc(100vw - 52px));
    padding: 72px 12px 18px;
    border-right: 1px solid var(--header-border);
    background: var(--panel);
    box-shadow: 22px 0 44px rgba(15, 23, 42, 0.22);
    overflow: auto;
    overscroll-behavior: contain;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-104%);
    transition: transform 0.2s cubic-bezier(.2,.8,.2,1), opacity 0.18s ease;
  }
  :root[data-nav-drawer-open="true"] .topNav {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
  .navMenuGroup {
    position: static;
    display: block;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 10px;
  }
  .navMenuGroup summary {
    display: flex;
    min-height: 30px;
    padding: 4px 8px;
    border-right: 0;
    border-bottom: 0;
    font-size: 12px;
  }
  .navMenuLinks {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: auto;
    min-width: 0;
    max-width: none;
    border: 0;
    border-top: 1px solid var(--control-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 6px;
  }
  .topNav a {
    justify-content: flex-start;
    min-height: 28px;
    padding: 0 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pageToolbar {
    padding: 8px 10px;
  }
  .searchWrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px auto;
    gap: 7px;
    width: 100%;
    margin-top: 0;
  }
  .searchWrap.pageToolbarNoSearch {
    display: flex;
    justify-content: flex-end;
  }
  .searchWrap > input[type="search"] {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 40px;
  }
  #resultCount {
    align-self: center;
    min-width: 42px;
    text-align: right;
    font-size: 13px;
    font-weight: 850;
  }
  .settingsToggle,
  .themeIconButton {
    flex-basis: 42px;
  }
  .nameOnlySearchControl {
    grid-column: 1 / 2;
    min-height: 40px;
    min-width: 0;
    padding: 0 10px;
    justify-content: center;
  }
  .themeIconButton,
  .settingsToggle {
    min-height: 40px;
    width: 42px;
  }
  .settingsPanel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 58px;
    z-index: 180;
    max-height: min(62dvh, 520px);
    overflow: auto;
    padding: 10px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.24);
    overscroll-behavior: contain;
  }
  .settingsPanel.utilitySettingsPanel {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    box-shadow: none;
    overscroll-behavior: auto;
  }
  .advancedField {
    flex: 1 1 calc(50% - 10px);
    width: auto;
  }
  .weaknessFilter {
    flex: 1 1 100%;
  }
  .clearFiltersButton {
    flex: 1 1 100%;
  }
  select {
    width: 132px;
    flex-basis: 132px;
  }
  .multiSelect {
    width: 100%;
    flex: 1 1 100%;
  }
  .multiSelectOptions {
    width: 100%;
  }
  .toggleButton {
    flex-basis: 142px;
  }
  #unnamedMapToggle, #specialMapToggle {
    flex-basis: 184px;
  }
  .toggleIdButton, .toggleThemeButton {
    flex-basis: 92px;
  }
  .themeIconButton.toggleThemeButton {
    flex-basis: 42px;
  }
  .layout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 64px;
  }
  .itemLayout, .skillLayout, .accuracyLayout, .mapLayout, .worldMapLayout, .simulatorLayout {
    grid-template-columns: 1fr;
  }
  .monsterList,
  .detail {
    height: 100%;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
  }
  html[data-mobile-pane="list"] .detail,
  html[data-mobile-pane="filters"] .detail,
  html:not([data-mobile-pane]) .detail {
    display: none;
  }
  html[data-mobile-pane="detail"] .monsterList,
  html[data-mobile-pane="filters"] .monsterList {
    display: none;
  }
  html[data-mobile-pane="list"] .simulatorControls.monsterList,
  html[data-mobile-pane="list"] .damageControls.monsterList {
    display: block;
  }
  html[data-mobile-pane="detail"] .simulatorControls.monsterList,
  html[data-mobile-pane="detail"] .damageControls.monsterList {
    display: none;
  }
  .bossTimerHero {
    grid-template-columns: 1fr;
  }
  .bossTimerHero {
    padding: 14px;
  }
  .bossTimerHeroIdentity {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .bossTimerHeroIdentity img {
    width: 58px;
    height: 58px;
  }
  .bossTimerHeroStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bossTimerGridPanel {
    padding: 12px;
  }
  .bossTimerChannelGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bossTimerChannel {
    min-height: 58px;
  }
  .patchNotesLayout {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 8px 64px;
  }
  html[data-mobile-pane="list"] .patchNotesDetail,
  html[data-mobile-pane="filters"] .patchNotesDetail,
  html:not([data-mobile-pane]) .patchNotesDetail {
    display: none;
  }
  html[data-mobile-pane="detail"] .patchVersionList,
  html[data-mobile-pane="filters"] .patchVersionList {
    display: none;
  }
  .mobileDock {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 190;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
    border: 1px solid var(--control-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(10px);
  }
  .mobileDock button {
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: var(--control-bg);
    color: var(--control-text);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
  }
  .mobileDock button.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--active-text);
  }
  .mobileDock button:disabled {
    opacity: 0.48;
  }
  .patchNotesLayout {
    grid-template-columns: 1fr;
  }
  .patchVersionList {
    max-height: none;
  }
  .patchNoteHero {
    grid-template-columns: 1fr;
  }
  .patchNoteDate {
    justify-self: start;
  }
  .patchDiffBody {
    padding: 0 12px 12px 12px;
  }
  .patchDiffItemGrid {
    grid-template-columns: 1fr;
  }
  .simulatorControls.monsterList {
    max-height: none;
    overflow: auto;
  }
  .patchVersionList.monsterList {
    max-height: none;
  }
  .monsterHero {
    grid-template-columns: auto minmax(0, 1fr);
    position: static;
    padding: 11px;
  }
  .simHero {
    grid-template-columns: auto minmax(0, 1fr);
    position: static;
    padding: 11px;
  }
  .monsterMark,
  .itemMark,
  .questMark,
  .skillMark {
    width: 54px;
    height: 54px;
  }
  h2 {
    font-size: 22px;
  }
  .sectionTitle {
    padding: 10px 11px 0;
  }
  .statsGrid,
  .elementGrid,
  .mapGrid,
  .dropGroups,
  .sourceList,
  .textLines,
  .questGroups,
  .skillTableWrap,
  .mapCanvasShell,
  .worldMapCanvasShell,
  .simIntro,
  .simTableWrap,
  .simSamples,
  .simPolicyBox,
  .successPreviewGrid,
  .equipStats {
    padding-left: 11px;
    padding-right: 11px;
  }
  .heroCounters {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    justify-self: stretch;
  }
  .simHero .heroCounters {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
  }
  .heroCounter {
    min-width: 0;
    padding: 7px 6px;
    text-align: center;
  }
  .heroCounter strong {
    font-size: 20px;
  }
  .heroCounter span {
    font-size: 12px;
  }
  .simTableGrid {
    grid-template-columns: 1fr;
  }
  .simInlineControls,
  .simFilterGrid,
  .initialStatsGrid,
  .strategyInputs {
    grid-template-columns: 1fr;
  }
  .strategyRow {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .strategyActions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }
  .mapHero:not(.worldMapHero) .heroCounters {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
  }
  .mapHero:not(.worldMapHero) .heroCounter {
    text-align: center;
  }
  .worldMapCanvas {
    min-height: 360px;
    overflow: auto;
    touch-action: pan-x pan-y;
  }
  .worldNodeLabel {
    max-width: 118px;
    font-size: 11px;
  }
  .worldMapNode:hover .worldNodeLabel,
  .worldMapNode:focus-visible .worldNodeLabel {
    display: none;
  }
  .worldMapNode.labelOpen .worldNodeLabel,
  .worldMapNode:focus-within .worldNodeLabel {
    display: block;
  }
  .itemLinkCard:hover,
  .sourceLinkRow:hover,
  .mapLinkCard:hover,
  .simPickerRow:hover,
  .monsterRow:hover {
    transform: none;
  }
  .accuracyPanel summary {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .accuracyPanel summary small {
    grid-column: 2;
    justify-self: start;
  }
  .formulaCards {
    grid-template-columns: 1fr;
  }
  .monsterSourceRow, .sourceQuestRow, .craftSourceRow {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .monsterSourceRow small, .sourceQuestRow small, .craftSourceRow small {
    grid-column: 2;
    justify-self: start;
  }
  .elementGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sourceStats {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }
  .skillTable,
  .simTable,
  .gachaTable {
    min-width: 0;
  }
  .skillTable th,
  .skillTable td,
  .gachaTable th,
  .gachaTable td {
    padding: 7px 8px;
  }
  .gachaSplitGrid,
  .gachaStatsGrid {
    grid-template-columns: 1fr;
  }
  .gachaPanel {
    padding: 12px;
  }
  .gachaPanelHeader,
  .gachaPrizeGroup summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .gachaDrawButtons {
    grid-template-columns: 1fr;
  }
  .mapMarker:hover {
    outline: none;
  }
}