:root {
  --bg: #1a1f18;
  --panel: #24301f;
  --text: #e8edd9;
  --muted: #9aa88a;
  --accent: #c4a35a;
  --danger: #c45a5a;
  --flash: #3d5a2e;
  --border: #3a4a32;
  --sidebar: #1c2419;
  --left-sidebar-w: 220px;
  --font: "IBM Plex Mono", "Consolas", "Courier New", monospace;
  --scroll-track: #12160f;
  --scroll-thumb: #3a4a32;
  --scroll-thumb-hover: #c4a35a;
}

* { box-sizing: border-box; }

/* Prevent accidental blue selection highlight on fast clicks (inventory, icons, etc.) */
html,
body {
  -webkit-user-select: none;
  user-select: none;
}

img,
svg {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

::selection {
  background: transparent;
  color: inherit;
}

/* Keep typing / copy-paste working in forms and editable fields */
input,
textarea,
select,
[contenteditable="true"],
.allow-select,
.allow-select * {
  -webkit-user-select: text;
  user-select: text;
}

.allow-select ::selection,
input::selection,
textarea::selection {
  background: rgba(196, 163, 90, 0.35);
  color: inherit;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

/* Chromium / Safari / Edge */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-left: 1px solid var(--border);
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid var(--scroll-track);
  border-radius: 0;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(ellipse at top, #2a3524 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
}

.top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Keep brand | event | nav slots even when event is empty/hidden */
.top > .brand {
  grid-column: 1;
  justify-self: start;
}

.top > .header-event {
  grid-column: 2;
  justify-self: center;
}

.top > nav.top-nav {
  grid-column: 3;
  justify-self: end;
}

/* Mobile shell — toggles hidden on desktop */
.mobile-shell-toggles {
  display: none;
  align-items: center;
  gap: 0.35rem;
}

.mobile-shell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.45rem;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  border-radius: 6px;
  background: color-mix(in srgb, var(--sidebar) 92%, #000);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-shell-btn.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 16%, var(--sidebar));
  color: var(--accent);
}

.mobile-shell-icon {
  font-size: 1rem;
  line-height: 1;
}

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.52);
  cursor: pointer;
}

.mobile-drawer-backdrop[hidden] {
  display: none !important;
}

body.mobile-drawer-open {
  overflow: hidden;
}

.mobile-drawer-head {
  display: none;
}

.mobile-drawer-nav {
  display: none;
}

.mobile-header-clock {
  display: none;
}

.mobile-top-end {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
  flex-wrap: nowrap;
}

.mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.28rem;
}

.mobile-nav-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mobile-nav-grid--1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 5.5rem;
}

.mobile-nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  margin: 0;
  padding: 0.28rem 0.15rem;
  min-height: 2.85rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, #000);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 90%, #000);
  color: var(--text);
  font: inherit;
  font-size: 0.54rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-nav-tile:hover,
.mobile-nav-tile:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--accent);
}

.mobile-nav-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
}

.mobile-nav-tile-icon img,
.mobile-nav-tile-icon .mobile-nav-tile-img,
.mobile-nav-tile-icon .page-heading-icon {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  display: block;
}

.mobile-nav-tile-icon .page-heading-icon--emoji {
  font-size: 0.95rem;
  line-height: 1;
}

.mobile-nav-tile-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mobile-nav-tile-logout {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  color: color-mix(in srgb, var(--danger) 88%, var(--text));
}

.mobile-drawer-divider {
  display: none;
}

.mobile-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 88%, #000);
  color: var(--text);
  font: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-drawer-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.mobile-drawer-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  padding: 0.35rem 0.4rem 0.55rem;
  font-variant-numeric: tabular-nums;
}

.mobile-drawer-clock .header-clock-time {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
}

.mobile-drawer-clock .header-clock-date {
  font-size: 0.78rem;
  color: var(--muted);
}

.mobile-drawer-logout {
  margin: 0;
}

.side-link-logout {
  color: color-mix(in srgb, var(--danger) 88%, var(--text));
}

.side-link-logout:hover {
  color: var(--danger);
}

.mobile-drawer-divider {
  text-align: center;
  min-width: 0;
  max-width: min(28rem, 100%);
}

.header-event-btn {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.55rem;
  max-width: 100%;
  margin: 0;
  padding: 0.28rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  line-height: 1.25;
}

.header-event-btn:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}

.header-event-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  opacity: 0.85;
}

.header-event-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}

.event-popup-card {
  max-width: min(36rem, 96vw);
}

.event-popup-body {
  max-height: min(65vh, 32rem);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.event-popup-desc {
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.45;
}

.event-popup-section {
  margin: 0 0 1rem;
}

.event-popup-section h3 {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.event-popup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-popup-list li {
  padding: 0.28rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.event-popup-list li:last-child {
  border-bottom: none;
}

.event-popup-pick {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0.45rem 0.1rem;
  cursor: pointer;
}

.event-popup-pick:hover {
  color: var(--accent);
}

@media (max-width: 780px) {
  .top {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .top > .brand {
    grid-column: 1;
  }
  .mobile-top-end {
    grid-column: 2;
  }
  .mobile-shell-label {
    display: none;
  }
  .mobile-shell-btn {
    min-width: 2.45rem;
    padding: 0.35rem;
  }
  .top > .header-event {
    grid-column: 1 / -1;
    order: 3;
    justify-self: stretch;
  }
  .header-event-name {
    max-width: none;
  }
  .header-clock {
    gap: 0.35rem;
  }
  .header-clock-time {
    font-size: 0.82rem;
  }
}

.brand {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

nav.top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem 0.75rem;
}

.top-nav-tools {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.45rem;
  max-width: 100%;
}

.top-nav-tray {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sidebar) 88%, #000);
  box-shadow: inset 0 1px 0 rgba(196, 163, 90, 0.06);
}

.top-nav-gear {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  position: relative;
  z-index: 50;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sidebar) 88%, #000);
  box-shadow: inset 0 1px 0 rgba(196, 163, 90, 0.06);
}

.top-nav-tray .nav-group {
  gap: 0.45rem;
}

.top-nav-tray .nav-group + .nav-group {
  padding-left: 0.65rem;
  margin-left: 0.5rem;
  border-left: 1px solid rgba(196, 163, 90, 0.35);
}

.top-nav-session {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.28rem 0.55rem 0.28rem 0.65rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sidebar) 88%, #000);
  box-shadow: inset 0 1px 0 rgba(196, 163, 90, 0.06);
}

.top-nav-session form.inline {
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.header-clock {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.55rem;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.header-clock-time {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.header-clock-date {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.nav-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.nav-group + .nav-group {
  padding-left: 0.85rem;
  margin-left: 0.15rem;
  border-left: 1px solid rgba(196, 163, 90, 0.35);
}

.nav-gear-wrap {
  position: relative;
  display: inline-flex;
}
.nav-gear-btn {
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}
.nav-gear-btn.is-filled {
  filter: drop-shadow(0 0 3px rgba(155, 196, 106, 0.55));
}
.nav-gear-flyout {
  display: none;
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  min-width: 12rem;
  max-width: min(96vw, 42rem);
  padding: 0.65rem 0.7rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(28, 34, 22, 0.98) 0%, rgba(14, 18, 12, 0.98) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.nav-gear-flyout::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.45rem;
}
.nav-gear-wrap:hover > .nav-gear-flyout,
.nav-gear-wrap:focus-within > .nav-gear-flyout,
.nav-gear-wrap.is-open > .nav-gear-flyout {
  display: block;
}
.nav-gear-wrap[data-nav-gear="equipment"] > .nav-gear-flyout {
  min-width: min(96vw, 32rem);
  width: max-content;
}
.nav-toolbelt-flyout {
  min-width: max-content;
  max-width: min(96vw, 28rem);
  width: max-content;
}
.gear-toolbelt-row {
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}
.inv-slot.is-unequipable,
.inv-slot.is-mount-item {
  cursor: pointer;
}
button.gear-repair-btn {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  z-index: 2;
  margin: 0;
  min-width: 0;
  padding: 0.05rem 0.28rem;
  font-size: 0.62rem;
  line-height: 1.2;
  cursor: pointer;
}
.smith-repair-panel {
  margin-top: 0.85rem;
}

.top-nav-guest .nav-group + .nav-group {
  padding-left: 0.85rem;
  margin-left: 0.15rem;
}

nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}

nav a:hover { color: var(--accent); }

nav a.nav-icon-only,
nav button.nav-icon-only,
.nav-reports-btn.nav-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 0;
  font-size: 1.15rem;
}

/* Strip global button chrome so nav icons align with <a> icons.
   Do NOT target dropdown items (.nav-reports-opt) — those need normal text layout. */
nav.top-nav > .top-nav-tools .nav-map-btn,
nav.top-nav > .top-nav-tools .nav-reports-btn,
nav.top-nav > .top-nav-tools .nav-gear-btn,
nav.top-nav > .top-nav-tools form.inline button,
nav.top-nav .top-nav-tray > .nav-group > a.nav-icon-only,
nav.top-nav .top-nav-session form.inline button {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: inherit;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: middle;
}
nav.top-nav > .top-nav-tools .nav-map-btn:hover,
nav.top-nav > .top-nav-tools .nav-reports-btn:hover,
nav.top-nav > .top-nav-tools form.inline button:hover,
nav.top-nav .top-nav-session form.inline button:hover {
  filter: none;
  color: var(--accent);
}
nav.top-nav .top-nav-session form.inline button.nav-icon-only,
nav.top-nav > .top-nav-tools .nav-reports-btn.nav-icon-only,
nav.top-nav > .top-nav-tools .nav-map-btn.nav-icon-only {
  font-size: 1.15rem;
}
nav.top-nav img.nav-link-icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  flex-shrink: 0;
}
.nav-link-icon {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
  font-size: 1.15rem;
  line-height: 1;
}

nav a[aria-label="Settings"] {
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.1rem 0.15rem;
}

.settings-header {
  margin-bottom: 1.1rem;
}

.settings-header h1 {
  margin-bottom: 0.25rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
  max-width: 52rem;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.86rem;
  color: var(--muted);
}

.settings-form .settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-form .settings-field-label {
  font-size: 0.86rem;
  color: var(--muted);
}

.settings-form input,
.settings-form select {
  font: inherit;
  color: var(--text);
  background: #12160f;
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
}

.settings-form input.is-locked,
.settings-form input:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  color: var(--muted);
}

.settings-flag-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}

.country-picker {
  position: relative;
}

.country-picker-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  color: var(--text);
  background: #12160f;
  border: 1px solid var(--border);
  padding: 0.45rem 1.9rem 0.45rem 0.55rem;
  text-align: left;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.country-picker-trigger .country-picker-flag {
  width: 28px;
  max-height: 21px;
  flex: 0 0 auto;
}

.country-picker-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 16rem;
  overflow-y: auto;
  background: #0e120c;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.country-picker-group {
  padding: 0.4rem 0.55rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.country-picker-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 0;
  padding: 0.4rem 0.55rem;
  text-align: left;
  cursor: pointer;
}

.country-picker-option:hover,
.country-picker-option:focus-visible {
  background: #1a2214;
  outline: none;
}

.country-picker-option.is-selected {
  background: #243018;
  color: var(--accent);
}

.country-picker-flag-slot {
  flex: 0 0 28px;
  width: 28px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.country-picker-flag-slot .flag-img {
  width: 28px;
  max-height: 21px;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.country-flag-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.nav-location {
  font-weight: 600;
  color: var(--accent);
}

.nav-location:hover {
  color: var(--accent);
}

.quest-npc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 35%, transparent);
}

.quest-npc-row:last-child { border-bottom: none; }

.npc-role-tags {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.npc-actions {
  display: flex;
  gap: 0.65rem;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.quest-name-completed,
.quest-mark-completed,
.quest-badge-completed { color: #6fbf73; }
.quest-name-active,
.quest-mark-active,
.quest-badge-active { color: #e6c35c; }
.quest-name-available,
.quest-mark-available,
.quest-badge-available { color: #e09345; }
.quest-name-locked,
.quest-mark-locked,
.quest-badge-locked { color: #d45b5b; }
.sa-item.quest-sa-active.is-selected a,
.sa-item.quest-sa-available.is-selected a,
.sa-item.quest-sa-locked.is-selected a,
.sa-item.quest-sa-completed.is-selected a {
  border-left: 0;
  box-shadow: inset 3px 0 0 currentColor;
}
#quest-journal-list .sa-item {
  overflow: hidden;
}
#quest-journal-list .sa-item.is-selected a {
  border-left: 0;
}
.quest-journal-editor {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  min-height: 18rem;
  overflow: hidden;
}
.quest-journal-editor .quest-journal-header {
  margin: 0 0 0.55rem;
  padding: 0 0.15rem;
  flex: 0 0 auto;
}
.quest-journal-header h2 {
  margin: 0;
  font-size: 1.05rem;
}
.quest-journal-body .quest-journal-header {
  margin: 0 0 0.75rem;
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--border);
}
.quest-journal-body {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.85rem 0.95rem 1rem;
  flex: 1 1 auto;
  min-height: 0;
}
.quest-journal-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12.5rem);
  gap: 0.85rem 1.25rem;
  align-items: start;
  margin-bottom: 0.85rem;
}
.quest-journal-copy .quest-lede {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.quest-journal-copy .quest-intro {
  margin: 0.55rem 0 0;
}
.quest-journal-reqs {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.quest-req-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.quest-req-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.quest-req-cb {
  flex: 0 0 auto;
  margin-top: 0.12rem;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid color-mix(in srgb, var(--muted) 85%, var(--text));
  border-radius: 2px;
  background: color-mix(in srgb, #0a0c08 92%, transparent);
  box-sizing: border-box;
}
.quest-req-cb.is-checked {
  border-color: #6fbf73;
  background: #6fbf73;
  color: #0a0c08;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.quest-req-cb.is-checked::before {
  content: "✓";
}
.quest-req-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.quest-req-label {
  color: var(--text);
}
.quest-req-row.is-unmet .quest-req-label {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
}
.quest-req-detail {
  font-size: 0.75rem;
  color: var(--muted);
}
.quest-req-none .quest-req-text {
  font-size: 0.84rem;
}
.quest-begin-simple {
  margin: 0;
  padding: 0;
  border: 0;
}
.quest-begin-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12.5rem);
  gap: 0.85rem 1.25rem;
  align-items: start;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0 0;
  border-top: 1px solid var(--border);
}
.quest-begin-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.quest-begin-custom {
  white-space: pre-wrap;
}
.quest-begin-rewards {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.quest-reward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.quest-reward-row {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text);
}
@media (max-width: 800px) {
  .quest-begin-split {
    grid-template-columns: 1fr;
  }
}
.quest-journal-copy .quest-section-next {
  margin: 0.15rem 0 0;
}
.quest-req-col {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0.3rem;
}
.quest-check-item.quest-req-none {
  border-left-color: var(--border);
  padding: 0.25rem 0.35rem;
}
@media (max-width: 800px) {
  .quest-journal-split {
    grid-template-columns: 1fr;
  }
}
.quest-journal-editor .quest-lede {
  margin: 0.15rem 0 0.55rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.quest-intro {
  margin: 0 0 0.85rem;
  white-space: pre-wrap;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size: 0.92rem;
}
.quest-section {
  margin: 0 0 1rem;
}
.quest-section-label,
.quest-card-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.quest-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.35rem 0.75rem;
}
.quest-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border-left: 2px solid var(--border);
  background: color-mix(in srgb, #10140e 92%, transparent);
}
.quest-check-item.is-ok {
  border-left-color: #6fbf73;
}
.quest-check-item.is-miss {
  border-left-color: #d45b5b;
}
.quest-check-mark {
  flex: 0 0 auto;
  font-weight: 700;
  line-height: 1.35;
  font-size: 0.85rem;
}
.quest-check-item.is-ok .quest-check-mark {
  color: #6fbf73;
}
.quest-check-item.is-miss .quest-check-mark {
  color: #d45b5b;
}
.quest-check-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.quest-check-label {
  font-size: 0.88rem;
  line-height: 1.3;
}
.quest-check-detail {
  font-size: 0.75rem;
  color: var(--muted);
}
.quest-next-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}
.quest-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.quest-card {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.75rem 0.85rem;
}
.quest-card-now {
  border-color: color-mix(in srgb, #e6c35c 55%, var(--border));
  background: color-mix(in srgb, #e6c35c 8%, #12160f);
}
.quest-card-body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
}
.quest-card-clue {
  margin: 0.45rem 0 0;
  font-weight: 650;
  color: var(--accent);
  line-height: 1.4;
}
.quest-card-meta {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
}
.quest-quote {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  white-space: pre-wrap;
  font-size: 0.9rem;
}
.quest-section-rewards {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.quest-reward-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.quest-reward-chips li {
  border: 1px solid var(--border);
  padding: 0.2rem 0.45rem;
  font-size: 0.8rem;
  background: #0e120c;
}
.quest-path {
  margin-top: 0.15rem;
}
.quest-path-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.quest-path-chapter {
  padding: 0.5rem 0.65rem 0.55rem 0.75rem;
  border-left: 2px solid var(--border);
  background: transparent;
}
.quest-path-chapter.is-done {
  opacity: 0.78;
}
.quest-path-chapter.is-current {
  border-left-color: #e6c35c;
  background: color-mix(in srgb, #e6c35c 7%, transparent);
}
.quest-path-chapter.is-epilogue {
  border-left-color: #6fbf73;
  opacity: 0.95;
}
.quest-path-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.quest-path-chapter.is-current .quest-path-tag {
  color: #e6c35c;
}
.quest-path-chapter.is-epilogue .quest-path-tag {
  color: #6fbf73;
}
.quest-path-story {
  margin: 0;
  line-height: 1.45;
}
.quest-path-clue {
  margin: 0.35rem 0 0;
  color: var(--accent);
  font-weight: 650;
  font-size: 0.92rem;
}

button.linkish {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.travel-page {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}
.travel-page-title {
  margin: 0;
  flex: 0 0 auto;
}
.travel-page-layout {
  display: grid;
  grid-template-columns: minmax(11.5rem, 15rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.travel-side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 0.85rem;
  margin: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}
.travel-map-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding-bottom: 0.55rem;
  box-sizing: border-box;
}
.travel-graph-stage {
  width: 100%;
  flex: 1 1 auto;
  min-height: 18rem;
  height: auto;
  border: 1px solid var(--border);
  background: #0c100a;
  overflow: hidden;
  position: relative;
}

body.has-sidebar main:has(.travel-page) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1rem;
}
body.has-sidebar main:has(.travel-page) > .flash,
body.has-sidebar main:has(.travel-page) > .site-banner {
  flex: 0 0 auto;
}
.travel-side h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.travel-side-from,
.travel-side-to {
  margin: 0.35rem 0 0;
}
.travel-side-dest {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.25;
  word-break: break-word;
}
.travel-side-count {
  margin: 0.35rem 0 0;
  font-variant-numeric: tabular-nums;
}
.travel-side-idle {
  margin-top: 0.55rem;
}
.travel-side .travel-progress {
  margin: 0.55rem 0 0.2rem;
}
.travel-side .travel-cancel-form {
  margin-top: 0.45rem;
}
.travel-side .travel-cancel-form button {
  width: 100%;
}
.travel-map-panel .panel-header {
  margin-bottom: 0.3rem;
  flex: 0 0 auto;
}
.travel-map-hint {
  margin: 0 0 0.45rem;
  flex: 0 0 auto;
}
.travel-graph-stage .travel-graph {
  width: 100%;
  height: 100%;
  display: block;
}
.travel-graph-stage .travel-node.is-dest {
  cursor: pointer;
  outline: none;
}
.travel-graph-stage .travel-node.is-dest:focus,
.travel-graph-stage .travel-node.is-dest:focus-visible {
  outline: none;
}
.travel-graph-stage .travel-node.is-dest:hover .world-map-node-dot,
.travel-graph-stage .travel-node.is-dest:focus .world-map-node-dot,
.travel-graph-stage .travel-node.is-dest:focus-visible .world-map-node-dot,
.travel-graph-stage .travel-node.is-dest:active .world-map-node-dot {
  fill: #ffe08a;
  stroke: #ffe08a;
  stroke-width: 0.32;
  filter:
    drop-shadow(0 0 0.35px #ffe08a)
    drop-shadow(0 0 1.1px rgba(255, 224, 138, 0.95))
    drop-shadow(0 0 2.2px rgba(196, 163, 90, 0.75));
}
.travel-graph-stage .travel-node.is-dest:hover .world-map-node-label,
.travel-graph-stage .travel-node.is-dest:focus .world-map-node-label,
.travel-graph-stage .travel-node.is-dest:focus-visible .world-map-node-label {
  fill: var(--accent);
}
.travel-graph-stage .travel-node.is-dest:hover .world-map-node-icon,
.travel-graph-stage .travel-node.is-dest:focus .world-map-node-icon,
.travel-graph-stage .travel-node.is-dest:focus-visible .world-map-node-icon {
  filter: drop-shadow(0 0 0.6px rgba(255, 224, 138, 0.85));
}
.travel-graph-stage .travel-node.is-here .world-map-node-dot {
  fill: var(--accent);
  stroke: transparent;
  stroke-width: 0;
  filter:
    drop-shadow(0 0 0.4px #ffe08a)
    drop-shadow(0 0 1.4px rgba(196, 163, 90, 0.95));
}
.travel-graph-stage .travel-node.is-here .world-map-node-pulse {
  stroke: var(--accent);
  stroke-width: 0.18;
  opacity: 0.55;
  filter: drop-shadow(0 0 1px rgba(196, 163, 90, 0.65));
}
.travel-graph-stage .travel-node.is-target .world-map-node-dot {
  fill: #6faf5a;
  stroke: #b8e0ba;
  stroke-width: 0.22;
  filter:
    drop-shadow(0 0 0.5px #8fbc8f)
    drop-shadow(0 0 1.6px rgba(111, 175, 90, 0.9));
}
.travel-graph-stage .travel-node.is-target .world-map-node-label {
  fill: #b8e0ba;
}
.travel-graph-stage .travel-node.is-locked .world-map-node-dot {
  fill: #d45b5b;
}
.travel-graph-stage .travel-node.is-locked .world-map-node-label,
.travel-graph-stage .travel-node.is-locked .travel-node-meta {
  opacity: 0.78;
}
.travel-graph-stage.is-busy .travel-node.is-dest:not(.is-target) {
  cursor: default;
  pointer-events: none;
  opacity: 0.45;
}
.travel-graph-stage.is-busy .travel-node.is-target {
  opacity: 1;
  pointer-events: none;
}
.travel-edge.is-locked {
  stroke: rgba(212, 91, 91, 0.45);
  opacity: 0.7;
}
.travel-node-meta {
  fill: #9aa88a;
  font-size: 1.05px;
  font-family: var(--font);
  pointer-events: none;
}
.travel-graph-stage.has-map-style .travel-node-meta {
  font-size: 1.1px;
}
.travel-graph-stage .world-map-node-label {
  font-size: 1.55px;
}
.travel-graph-stage .travel-edge {
  stroke-width: 0.35;
}
.travel-graph-stage .travel-edge.is-curved {
  stroke-width: 0.42;
}

@media (max-width: 900px) {
  body.has-sidebar main:has(.travel-page) {
    overflow: auto;
  }
  .travel-page {
    height: auto;
  }
  .travel-page-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .travel-side,
  .travel-map-panel {
    height: auto;
  }
  .travel-graph-stage {
    min-height: 16rem;
    height: min(55vh, 26rem);
    flex: none;
  }
}

.world-map-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}
.world-map-modal[hidden] {
  display: none !important;
}
.world-map-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.world-map-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100vw - 1.5rem, 1600px);
  height: min(100vh - 1.5rem, 980px);
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.world-map-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.world-map-modal-head h2 {
  margin: 0;
  font-size: 1.65rem;
  color: var(--accent);
}
.world-map-zoom-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.world-map-zoom-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.world-map-zoom-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
}
.world-map-modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}
.world-map-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.6rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.world-map-full {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  background: #0c100a;
  border: 1px solid var(--border);
  cursor: grab;
  overflow: hidden;
  touch-action: none;
}
.world-map-full.is-dragging {
  cursor: grabbing;
}
.world-map-full img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
  transform: scale(1);
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
/* Larger than the modal viewport — pan to explore, don't squeeze everything in. */
.world-map-graph {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 3000px;
  height: auto;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.world-map-graph .world-map-node-hit {
  pointer-events: all;
}
.world-map-full.is-editing-pins .world-map-node {
  pointer-events: all;
  cursor: move;
}
.world-map-full.is-editing-pins .world-map-node-hit {
  pointer-events: all;
}
.world-map-node.is-dragging-pin .world-map-node-dot {
  stroke: #f0e2b8;
  stroke-width: 0.35;
}
.world-map-zoom-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
.world-map-edit-status {
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.world-map-edit-status.is-error {
  color: #c45a5a;
}
.admin-world-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
  gap: 0.75rem;
  align-items: stretch;
  min-height: min(70vh, 640px);
}
.admin-world-map-layout:fullscreen,
.admin-world-map-layout:-webkit-full-screen,
.admin-world-map-layout.is-page-fullscreen {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 0.75rem;
  gap: 0.75rem;
  background: var(--bg, #12160f);
  grid-template-rows: minmax(0, 1fr);
}
.admin-world-map-layout.is-page-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 80;
}
body.admin-map-fs-open {
  overflow: hidden;
}
.admin-world-map-layout:fullscreen .admin-world-map-stage-wrap,
.admin-world-map-layout:-webkit-full-screen .admin-world-map-stage-wrap,
.admin-world-map-layout.is-page-fullscreen .admin-world-map-stage-wrap,
.admin-world-map-layout:fullscreen .admin-world-map-list,
.admin-world-map-layout:-webkit-full-screen .admin-world-map-list,
.admin-world-map-layout.is-page-fullscreen .admin-world-map-list {
  min-height: 0;
  max-height: none;
  height: 100%;
}
.admin-world-map-layout:fullscreen .world-map-full,
.admin-world-map-layout:-webkit-full-screen .world-map-full,
.admin-world-map-layout.is-page-fullscreen .world-map-full {
  min-height: 0;
}
.admin-world-map-stage-wrap {
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 640px);
  padding: 0.55rem;
  gap: 0.45rem;
}
.admin-world-map-tools {
  flex: 0 0 auto;
  justify-content: flex-end;
}
.admin-world-map-tools .admin-map-status {
  margin-right: auto;
}
.admin-world-map-stage-wrap .world-map-full {
  flex: 1 1 auto;
  min-height: 28rem;
  height: auto;
}
.admin-world-map-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(70vh, 640px);
  padding: 0.55rem;
  gap: 0.45rem;
}
.admin-world-map-pins {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1 1 auto;
}
.admin-world-map-pin {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.admin-world-map-pin-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 0.4rem 0.25rem;
  cursor: pointer;
}
.admin-world-map-pin-btn:hover,
.admin-world-map-pin.is-on .admin-world-map-pin-btn {
  color: var(--accent);
}
.admin-world-map-pin-xy {
  font-variant-numeric: tabular-nums;
}
#admin-map-status.is-error {
  color: #c45a5a;
}
.admin-map-status {
  display: inline-block;
  min-height: 1.1em;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--border);
  color: var(--accent);
}
.admin-map-status.is-flash {
  animation: admin-map-status-flash 0.7s ease;
}
@keyframes admin-map-status-flash {
  0% { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}
.admin-map-status[hidden] {
  display: none;
}
@media (max-width: 960px) {
  .admin-world-map-layout {
    grid-template-columns: 1fr;
  }
  .admin-world-map-list {
    max-height: 16rem;
  }
}
.world-map-graph-bg {
  fill: #12180f;
}
.world-map-edge {
  stroke: #3a4a32;
  stroke-width: 0.22;
  stroke-linecap: round;
  opacity: 0.92;
}
.world-map-edge.is-curved {
  fill: none;
  stroke: #4a5c42;
  stroke-width: 0.28;
  opacity: 0.88;
}
.world-map-node-icon {
  fill: #0c100a;
  font-size: 1.05px;
  font-family: var(--font);
  pointer-events: none;
  opacity: 0.9;
}
.admin-world-map-tools .muted.tiny {
  margin-right: auto;
}
.admin-world-map-list a.admin-world-map-pin-btn {
  text-decoration: none;
  color: inherit;
}
.world-map-node-hit {
  fill: transparent;
  pointer-events: all;
}
.world-map-node-dot {
  fill: #9aa88a;
  stroke: #1a2214;
  stroke-width: 0.18;
}
.world-map-node.is-city .world-map-node-dot { fill: #c4a35a; }
.world-map-node.is-village .world-map-node-dot { fill: #b8c99a; }
.world-map-node.is-camp .world-map-node-dot { fill: #8fbc8f; }
.world-map-node.is-forest .world-map-node-dot { fill: #4f7a4a; }
.world-map-node.is-field .world-map-node-dot { fill: #a3b86c; }
.world-map-node.is-cave .world-map-node-dot,
.world-map-node.is-mountain .world-map-node-dot { fill: #7a8490; }
.world-map-node.is-swamp .world-map-node-dot { fill: #5a7a52; }
.world-map-node.is-vulcanic .world-map-node-dot { fill: #c45a5a; }
.world-map-node-label {
  fill: #d5ddc8;
  font-size: 1.55px;
  font-family: var(--font);
  pointer-events: none;
  paint-order: stroke;
  stroke: #0c100a;
  stroke-width: 0.35px;
}
.world-map-node.is-here .world-map-node-dot {
  fill: var(--accent);
  stroke: #f0e2b8;
  stroke-width: 0.28;
}
.world-map-node-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.22;
  opacity: 0.85;
}
.world-map-node.is-here .world-map-node-label {
  fill: var(--accent);
  font-weight: 700;
}
.world-map-modal-hint {
  margin: 0;
  padding: 0.4rem 0.85rem 0.55rem;
  flex: 0 0 auto;
}
body.world-map-open {
  overflow: hidden;
}
body.world-map-open.has-sidebar main {
  overflow: hidden;
}
@media (max-width: 900px) {
  .world-map-modal {
    padding: 0.5rem;
  }
  .world-map-modal-panel {
    width: calc(100vw - 1rem);
    height: calc(100vh - 1rem);
  }
}

.town-page {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(11rem, auto));
  gap: 0.85rem;
  align-items: stretch;
}
.town-page > .town-people {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.town-page > .town-bank {
  grid-column: 2;
  grid-row: 1;
}
.town-page > .town-market {
  grid-column: 2;
  grid-row: 2;
}
.town-page > .town-shops {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
}
.town-page > .town-skills {
  grid-column: 3 / span 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(11rem, auto));
  gap: 0.85rem;
  min-width: 0;
}
.town-page > .town-tile,
.town-skills > .town-tile {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.town-tile-empty {
  margin: 0.5rem 0 0;
  padding: 0 0.15rem;
}
.town-activity--empty {
  opacity: 0.45;
  border-style: dashed;
}
.action-pick-row.town-npc-row {
  display: block;
  padding: 0;
}
.town-npc-row .town-npc-card {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}
.town-npc-row:last-child .town-npc-card {
  border-bottom: 0;
}
.town-npc-card {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}
.town-npc-face {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}
.town-npc-hover-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0 0.35rem;
  background: color-mix(in srgb, #0a0c08 90%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.town-npc-row:hover .town-npc-hover-actions,
.town-npc-row:focus-within .town-npc-hover-actions {
  opacity: 1;
  pointer-events: auto;
}
.town-npc-action {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 18%, #10140e);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.town-npc-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}
@media (hover: none) {
  .town-npc-hover-actions {
    position: static;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    margin-left: auto;
    padding: 0;
  }
}
.npc-talk-popup-card {
  width: min(42rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
}
.npc-talk-popup-body {
  overflow: auto;
  max-height: calc(100vh - 8rem);
  padding: 0 0.15rem 0.35rem;
}
.npc-talk-popup-body .town-talk-layout {
  margin: 0;
}
.npc-talk-popup-body .town-talk-header {
  display: none;
}
.npc-talk-popup-body.is-typing .dialogue-actions {
  visibility: hidden;
  pointer-events: none;
}
.npc-talk-popup-body .town-talk-block.is-spoken .dialogue-actions,
.npc-talk-popup-body:not(.is-typing) .dialogue-actions {
  visibility: visible;
  pointer-events: auto;
}
.dialogue-text.is-typing-line::after {
  content: "▌";
  margin-left: 1px;
  color: var(--accent);
  animation: npc-talk-caret 0.85s step-end infinite;
}
@keyframes npc-talk-caret {
  50% { opacity: 0; }
}
body.npc-talk-open {
  overflow: hidden;
}
.npc-shop-popup-card {
  width: min(52rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}
.npc-shop-popup-body {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0.15rem 0.35rem;
}
body.bank-popup-open,
body.market-popup-open {
  overflow: hidden;
}
.bank-popup-card {
  /* overridden below with .hs-popup-card.bank-popup-card (order/specificity) */
  overflow: hidden;
}
.hs-popup-card.bank-popup-card {
  /* Tall enough for full bag (5×8 slots) without Bag scrollbar; Vault may still scroll */
  width: min(70rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  height: min(42rem, calc(100vh - 2rem));
  max-height: min(42rem, calc(100vh - 2rem));
}
.market-popup-card {
  width: min(56rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}
.hs-popup-card.market-popup-card {
  width: min(56rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100vh - 2rem);
}
.bank-popup-body .bank-qty-modal {
  z-index: 1600;
}
.bank-popup-body {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0.15rem 0.35rem;
  display: flex;
  flex-direction: column;
}
.market-popup-body {
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0.15rem 0.35rem;
}
/* Full rules live AFTER .bank-page / .bank-bag-grid (those would override earlier). */
.bank-popup-page .bank-hero {
  display: none;
}
.bank-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: 100%;
  padding-right: 2.25rem;
}
.bank-popup-cap-host {
  flex: 0 0 auto;
  margin-left: auto;
}
.bank-popup-cap-host .bank-cap {
  min-width: 8rem;
  text-align: right;
}
.bank-popup-cap-host .bank-cap-label {
  align-items: baseline;
}
.bank-popup-cap-host .bank-cap-bar {
  margin-top: 0.2rem;
  width: 100%;
  min-width: 8rem;
}
.town-npc-main.action-pick-main,
button.town-npc-main,
button.town-npc-shop {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
button.town-npc-shop {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.npc-shop-body {
  --shop-pane-h: 18.25rem;
  position: relative;
}
.npc-shop-body .shop-tabs {
  flex-shrink: 0;
}
.npc-shop-body .panel.shop-panel,
.npc-shop-body .panel.shop-checkout {
  margin-bottom: 0;
  padding: 0.75rem 0.85rem 1rem;
}
.npc-shop-body .shop-layout {
  align-items: stretch;
}
.npc-shop-body .shop-main {
  display: grid;
  grid-template-areas: "panel";
  min-width: 0;
  min-height: 0;
}
.npc-shop-body .shop-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.npc-shop-body .shop-panel[hidden] {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}
.npc-shop-body .shop-panel-body {
  flex: 1 1 auto;
  height: var(--shop-pane-h);
  min-height: var(--shop-pane-h);
  max-height: var(--shop-pane-h);
  overflow-x: hidden;
  overflow-y: auto;
}
.npc-shop-body .shop-panel-body-empty {
  display: flex;
  align-items: flex-start;
}
.npc-shop-body .shop-panel-body-empty .muted {
  margin: 0;
}
.npc-shop-body .shop-checkout {
  position: static;
  top: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.npc-shop-body .shop-checkout-stage {
  position: relative;
  flex: 1 1 auto;
  height: var(--shop-pane-h);
  min-height: var(--shop-pane-h);
  max-height: var(--shop-pane-h);
  overflow: hidden;
}
.npc-shop-body .shop-checkout-empty,
.npc-shop-body .shop-checkout-body {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.npc-shop-body .shop-checkout-body[hidden],
.npc-shop-body .shop-checkout-empty[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}
.npc-shop-body .shop-npc-heading {
  display: none;
}
.npc-shop-body .shop-npc-heading h2.shop-npc-name {
  margin: 0;
  font-size: 1.05rem;
}
.npc-shop-body .shop-ctx-menu {
  position: absolute;
  z-index: 12;
}
.shop-flash-msg {
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.55rem;
  border-left: 2px solid var(--accent);
  font-size: 0.88rem;
  color: var(--accent);
}
body.npc-shop-open {
  overflow: hidden;
}
.quest-storyline-section {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0 0;
  border-top: 1px solid var(--border);
}
.quest-story-flow {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.35rem;
}
.quest-story-beat {
  margin: 0;
}
.quest-story-beat.is-done .quest-story-text,
.quest-story-beat.is-epilogue .quest-story-text {
  color: color-mix(in srgb, var(--text) 74%, var(--muted));
}
.quest-story-beat.is-current {
  padding-left: 0.75rem;
  border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.quest-story-text,
.quest-story-task,
.quest-story-dialogue {
  margin: 0 0 0.55rem;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.92rem;
}
.quest-story-text:last-child,
.quest-story-task:last-child,
.quest-story-dialogue:last-child {
  margin-bottom: 0;
}
.quest-story-task {
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
}
.quest-story-dialogue {
  padding-left: 0.65rem;
  border-left: 2px solid var(--border);
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
}
.quest-story-where {
  margin: 0.45rem 0 0;
}
.quest-story-checklist {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.quest-story-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
}
.quest-story-check-item.is-done {
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
}
.quest-story-check-item.is-done .quest-story-check-label {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
}
.quest-story-check-box {
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.08rem;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  line-height: 1;
  background: #0e120c;
}
.quest-story-check-item.is-done .quest-story-check-box {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
}
.quest-storyline-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.town-page > .town-tile > .town-npc-list,
.town-page > .town-tile > .action-pick,
.town-skills > .town-tile > .town-npc-list,
.town-skills > .town-tile > .action-pick {
  flex: 1 1 auto;
}
@media (max-width: 1100px) {
  .town-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .town-page > .town-people {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .town-page > .town-bank {
    grid-column: 2;
    grid-row: 1;
  }
  .town-page > .town-market {
    grid-column: 2;
    grid-row: 2;
  }
  .town-page > .town-shops {
    grid-column: 2;
    grid-row: 3;
  }
  .town-page > .town-skills {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
}
@media (max-width: 640px) {
  .town-page {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .town-page > .town-people,
  .town-page > .town-bank,
  .town-page > .town-market,
  .town-page > .town-skills,
  .town-page > .town-shops {
    grid-column: 1;
    grid-row: auto;
  }
  .town-page > .town-skills {
    grid-template-columns: 1fr;
  }
}
.town-people .action-pick,
.town-shops .action-pick,
.town-market .action-pick,
.town-bank .action-pick,
.town-activity .action-pick,
.town-quests .action-pick {
  margin-top: 0.35rem;
}
.town-market .action-pick-row {
  gap: 0.35rem;
}
.town-npc-main {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.town-npc-main:hover strong {
  color: var(--accent);
}
.town-npc-shop {
  flex: 0 0 auto;
  font-size: 0.85rem;
}
.town-quest-heading {
  margin: 0.85rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.town-quest-heading:first-of-type {
  margin-top: 0.35rem;
}
.quest-journal-tools {
  margin: 0 0 0.65rem;
}
.quest-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.quest-filter-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 4px;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--muted);
}
.quest-filter-chip.is-on,
.quest-sort-row a.is-on {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.quest-sort-row {
  margin: 0.45rem 0 0;
}
.quest-sort-row a {
  text-decoration: none;
}
.town-quest-row .action-pick-info {
  gap: 0.15rem;
}
.town-quest-row.is-done {
  opacity: 0.75;
}
.town-npc-row.is-active {
  color: var(--accent);
}
.town-talk-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.town-talk-avatar {
  flex: 0 0 8.75rem;
  width: 8.75rem;
  position: sticky;
  top: 0.75rem;
}
.town-talk-avatar img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 1px solid var(--border);
  background: #12160f;
}
.town-talk-body {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 640px) {
  .town-talk-layout.has-avatar {
    flex-direction: column;
    align-items: stretch;
  }
  .town-talk-avatar {
    flex-basis: auto;
    width: 7rem;
    align-self: flex-start;
    position: static;
  }
}
.shop-npc-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.65rem;
}
.shop-npc-heading h1 {
  margin: 0;
}
.shop-npc-heading .muted {
  margin: 0.2rem 0 0;
}
.shop-npc-avatar {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--border);
  background: #12160f;
  flex: 0 0 auto;
}
.town-talk-header {
  align-items: baseline;
}
.town-talk-header h2 {
  margin: 0;
}
.town-talk-desc {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.9rem;
}
.town-talk-shop {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}
.town-talk-block {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.town-talk-block:first-of-type {
  margin-top: 0.5rem;
}
.town-talk-block .panel-header {
  margin-bottom: 0.35rem;
}
.town-talk-block h3 {
  margin: 0;
  font-size: 1rem;
}
.town-talk .dialogue-text {
  margin: 0.35rem 0 0.65rem;
}

.layout {
  display: block;
}

body.has-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

body.has-sidebar > .site-banner,
body.has-sidebar > .top {
  flex: 0 0 auto;
}

body.has-sidebar .layout {
  display: grid;
  grid-template-columns: var(--left-sidebar-w) minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  column-gap: 1.35rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.skill-sidebar,
.inv-sidebar {
  background: var(--sidebar);
  padding: 1rem 0.85rem 1.25rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  align-self: stretch;
}

.skill-sidebar {
  border-right: 1px solid var(--border);
}

.inv-sidebar {
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0.75rem;
}

.currency-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  border: 1px solid var(--border);
  background: #12160f;
}

.currency-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.currency-row:last-child {
  border-bottom: none;
}

.currency-name {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--muted);
}

.currency-amt {
  color: var(--accent);
  font-size: 1.05rem;
}

.inv-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0.55rem 0 0.4rem;
  flex-shrink: 0;
}

.inv-head-row .sidebar-title {
  margin: 0;
}

.inv-gold-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
}

.inv-gold-inline img,
.inv-gold-inline .ui-icon,
.inv-gold-inline .ui-icon-img {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem;
  max-height: 1.25rem;
  margin: 0;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.inv-gold-inline-amt {
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.inv-name {
  text-transform: capitalize;
  color: var(--text);
}

.ui-icon {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.28rem;
  vertical-align: -0.08rem;
}

/* Nested img inside a .ui-icon box fills the box */
.ui-icon .ui-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* img that IS the icon — never use % (intrinsic SVG size blows up layout) */
img.ui-icon,
img.ui-icon-img {
  width: 1.1rem;
  height: 1.1rem;
  max-width: 1.1rem;
  max-height: 1.1rem;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: block;
  flex-shrink: 0;
}

.inv-empty {
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

.sidebar-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  flex-shrink: 0;
}

.skill-name { text-transform: capitalize; }
.skill-level {
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}
.skill-level strong { color: var(--accent); font-weight: 700; }

.sidebar-location-name {
  margin: 0 0 0.8rem;
}

.sidebar-group {
  margin-bottom: 0.95rem;
}

.sidebar-group-title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.side-link {
  display: block;
  text-decoration: none;
  color: var(--text);
  font-size: 0.88rem;
  padding: 0.28rem 0.4rem;
  border-left: 2px solid transparent;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: none;
  border-top: none;
  border-right: none;
  border-bottom: none;
  font: inherit;
  cursor: pointer;
}

button.side-link-btn {
  appearance: none;
  -webkit-appearance: none;
}

.side-link-sub {
  padding-left: 1.05rem;
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}

.side-link:hover {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(0, 0, 0, 0.15);
}

.location-players-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 11rem;
  overflow-y: auto;
}

.location-player-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.35rem;
  cursor: context-menu;
  border-left: 2px solid transparent;
}

.location-player-item:hover {
  background: rgba(0, 0, 0, 0.18);
  border-left-color: var(--accent);
}

.location-player-item.is-self .location-player-name {
  color: var(--accent);
}

.location-player-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
}

.location-player-icon .ui-icon,
.location-player-icon .ui-icon-img,
.location-player-icon img {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  object-fit: contain;
  display: block;
}

.location-player-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.location-player-name {
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-player-activity {
  font-size: 0.68rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-players-empty {
  padding: 0.15rem 0.35rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  background: #12160f;
  flex-shrink: 0;
}

.skill-tile {
  text-decoration: none;
  color: var(--text);
  border: 0;
  background: transparent;
  padding: 0.42rem 0.2rem;
  min-height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font: inherit;
  cursor: pointer;
  border-radius: 0;
}

.skill-tile:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.skill-tile.is-locked {
  opacity: 0.72;
}

.skill-tile.is-locked .ui-icon,
.skill-tile.is-locked .ui-icon-img {
  filter: grayscale(0.35);
}

.skill-tile .skill-lock-mark {
  margin-left: 0.12rem;
  font-size: 0.62rem;
  line-height: 1;
  vertical-align: super;
}

.skill-tile-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-width: 0;
  min-height: 0;
}

.skill-tile .ui-icon {
  width: 1.7rem;
  height: 1.7rem;
  max-width: 1.7rem;
  max-height: 1.7rem;
  margin-right: 0;
  font-size: 1.35rem;
}

.skill-tile .ui-icon-img,
.skill-tile img.ui-icon,
.skill-tile img.ui-icon-img {
  width: 1.7rem;
  height: 1.7rem;
  max-width: 1.7rem;
  max-height: 1.7rem;
}

.skill-tile .skill-name {
  font-size: 0.72rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-tile .skill-level {
  font-size: 1rem;
  line-height: 1;
}

.skill-tile .skill-level .lvl-num {
  font-size: 1.05rem;
  font-weight: 700;
}

.inv-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding-right: 0.15rem;
}

.inv-slot {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  background: #12160f;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  contain: layout style;
}

.inv-slot-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.ui-tip,
.inv-ctx-menu,
.chat-ctx-menu {
  background: #1a2214;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-family: var(--font);
}

.ui-tip {
  position: fixed;
  z-index: 4000;
  max-width: 16rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: pre-line;
  pointer-events: none;
}
.ui-tip[hidden] { display: none !important; }

.inv-ctx-menu {
  position: fixed;
  z-index: 2000;
  min-width: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.2rem;
}
.inv-ctx-menu[hidden] { display: none !important; }
.inv-ctx-menu button {
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: left;
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
}
.inv-ctx-menu button:hover {
  background: rgba(232, 237, 217, 0.08);
  filter: none;
}
.ground-inv-grid {
  margin-top: 0.35rem;
}
.ground-slot .ground-pickup-form {
  position: absolute;
  right: 0.05rem;
  bottom: 0.05rem;
  margin: 0;
  z-index: 2;
}
.ground-pickup-btn {
  margin: 0;
  padding: 0.05rem 0.25rem;
  font-size: 0.65rem;
  min-width: 0;
  width: auto;
  max-width: none;
  line-height: 1.1;
}

.inv-slot-hover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.28rem);
  min-width: max-content;
  max-width: 11rem;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
  z-index: 8;
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: left;
  color: var(--text);
  background: #1a2214;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  padding: 0.35rem 0.55rem;
  border-radius: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font);
}

.inv-slot:hover {
  overflow: visible;
  z-index: 6;
}

.inv-slot:hover .inv-slot-hover {
  opacity: 1;
  transform: translate(-50%, 0);
}

.inv-slot-emoji,
.inv-slot-fallback {
  font-size: 1.1rem;
  color: var(--text);
}

.inv-slot-fallback {
  color: var(--muted);
  font-weight: 700;
}

.inv-slot-qty {
  position: absolute;
  right: 0.08rem;
  bottom: 0.02rem;
  font-size: 0.66rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 0 0.2rem;
  line-height: 1.2;
  z-index: 2;
}

main {
  max-width: 820px;
  padding: 1rem 1.25rem 2rem;
}

body.has-sidebar main {
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  /* Breathing room inside the content column (not the sidebars) */
  padding: 1rem 1.5rem 1.75rem;
  align-self: stretch;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: block;
  position: relative;
  box-sizing: border-box;
}

/* Make the main content scrollbar readable when overflow kicks in */
body.has-sidebar main::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, var(--scroll-thumb));
}
body.has-sidebar main::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

.player-chat {
  margin-top: 0.75rem;
  max-width: 72%;
  padding: 0.45rem 0.65rem 0.55rem;
}

body.has-sidebar .player-chat {
  position: fixed;
  left: 0.65rem;
  bottom: 0.8rem;
  width: min(32rem, calc(100vw - 1.3rem));
  max-width: none;
  margin: 0;
  z-index: 60;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--panel) 90%, #0f130d);
  transition: width 0.15s ease;
}

/* Minimized: stay inside the left location menu column */
body.has-sidebar .player-chat.is-collapsed {
  width: calc(var(--left-sidebar-w) - 1.3rem);
  max-width: calc(var(--left-sidebar-w) - 1.3rem);
  padding: 0.28rem 0.45rem;
  box-shadow: none;
}

body.has-sidebar .player-chat.is-collapsed .panel-header {
  margin-bottom: 0;
  gap: 0.35rem;
  align-items: center;
}

body.has-sidebar .player-chat.is-collapsed .panel-header h2 {
  font-size: 0.85rem;
}

body.has-sidebar .player-chat.is-collapsed #chat-status,
body.has-sidebar .player-chat.is-collapsed #chat-online-btn,
body.has-sidebar .player-chat.is-collapsed .chat-channel-bar,
body.has-sidebar .player-chat.is-collapsed .chat-workspace {
  display: none;
}

body.has-sidebar .player-chat.is-collapsed .chat-toggle-btn {
  padding: 0.15rem 0.35rem;
  font-size: 0.68rem;
  white-space: nowrap;
}

.chat-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.chat-toggle-btn,
.chat-icon-btn {
  margin: 0;
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.1;
}

.chat-icon-btn {
  min-width: 1.7rem;
  padding: 0.12rem 0.35rem;
  font-size: 0.95rem;
  line-height: 1;
}

.player-chat.is-collapsed .chat-log,
.player-chat.is-collapsed .chat-compose {
  display: none;
}

body.has-sidebar .player-chat.is-online-open {
  width: min(44rem, calc(100vw - 1.3rem));
}

.chat-workspace {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.4rem;
  min-height: 0;
}

.chat-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat-online-panel {
  flex: 0 0 10rem;
  width: 10rem;
  max-width: 10rem;
  border: 1px solid var(--border);
  background: #12160f;
  margin: 0;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-online-panel[hidden] {
  display: none !important;
}

.player-chat .panel-header.chat-header {
  margin: 0 0 0.35rem;
  padding: 0;
  align-items: center;
  gap: 0.5rem;
}

.player-chat .panel-header h2 {
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.2;
}

.chat-channel-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
}

.chat-channel-btn {
  margin: 0;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.chat-channel-btn.is-on {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(196, 163, 90, 0.12);
}

.chat-online-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #12160f;
  z-index: 1;
}

.chat-online-tab {
  flex: 1;
  margin: 0;
  padding: 0.35rem 0.4rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.chat-online-tab.is-on {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.chat-online-label {
  margin: 0;
  padding: 0.35rem 0.5rem 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.chat-online-manage {
  margin: 0;
  padding: 0.25rem 0.5rem 0.4rem;
  font-size: 0.72rem;
  border-top: 1px solid var(--border);
}

.chat-online-manage a {
  color: var(--accent);
  text-decoration: none;
}

.chat-online-manage a:hover {
  text-decoration: underline;
}

.chat-online-list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.chat-online-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
}

.chat-online-item:hover {
  background: rgba(196, 163, 90, 0.1);
}

.chat-online-item.is-offline .chat-online-name {
  color: var(--muted);
}

.chat-online-icon {
  width: 1.2rem;
  display: inline-flex;
  justify-content: center;
}

.chat-online-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

.chat-online-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #6faf5a;
  flex: 0 0 auto;
}

.friend-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 5.5rem;
  z-index: 130;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
  max-width: min(18rem, calc(100vw - 2rem));
}

.friend-toast {
  padding: 0.55rem 0.85rem;
  background: #1a2214;
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: 0.88rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  animation: friend-toast-in 0.25s ease-out;
}

.friend-toast.is-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.friend-toast-request {
  border-color: #e05555;
}

@keyframes friend-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.friends-section {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem 1rem;
}

.friends-section h2 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.friends-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.friends-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #455540;
}

.friends-name {
  color: var(--text);
  text-decoration: none;
}

.friends-online-tag {
  color: #6faf5a;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.friends-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.btn-small {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}

.btn-small.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.chat-ctx-menu {
  position: fixed;
  z-index: 120;
  min-width: 9rem;
  padding: 0.2rem;
}

.chat-ctx-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.55rem;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.chat-ctx-item:hover {
  background: rgba(232, 237, 217, 0.08);
  color: var(--text);
  filter: none;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  margin-left: 0.3rem;
  border-radius: 0.25rem;
  background: #c62828;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}

.nav-badge.is-blink {
  animation: nav-badge-blink 1.4s ease-in-out infinite;
}

@keyframes nav-badge-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.06);
  }
}

.nav-admin.has-badge {
  color: #f0b4b4;
}

.nav-reports-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-reports-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.nav-reports-btn:hover {
  color: var(--accent);
}

.nav-reports-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 80;
  min-width: 11.5rem;
  padding: 0.3rem;
  background: #1a2116;
  border: 1px solid #4a5c40;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-reports-menu[hidden] {
  display: none !important;
}

.nav-badge[hidden] {
  display: none !important;
}

.nav-news-link {
  position: relative;
}
.nav-news-link.nav-icon-only .nav-news-badge,
#nav-news.nav-icon-only .nav-news-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.2rem;
  margin-left: 0;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.22rem;
  font-size: 0.68rem;
  border-radius: 999px;
}
.mobile-nav-tile .nav-news-badge {
  margin-left: 0.25rem;
  min-width: 0.95rem;
  height: 0.95rem;
  padding: 0 0.22rem;
  font-size: 0.65rem;
}

#report-player-wrap[hidden] {
  display: none !important;
}

.nav-reports-opt {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-left: 3px solid #888;
  background: #12160f !important;
  color: var(--text) !important;
  font: inherit;
  font-size: 0.86rem !important;
  font-weight: 500;
  line-height: 1.3 !important;
  padding: 0.45rem 0.55rem !important;
  margin: 0 !important;
  cursor: pointer;
  box-shadow: none;
  filter: none;
}

.nav-reports-opt:hover {
  background: rgba(196, 163, 90, 0.12);
}

.nav-reports-opt.kind-player {
  border-left-color: #d64545;
}

.nav-reports-opt.kind-chat {
  border-left-color: #d4a017;
}

.nav-reports-opt.kind-bug {
  border-left-color: #e07020;
}

.nav-reports-opt.kind-idea {
  border-left-color: #3a9e6e;
}

.nav-reports-opt.nav-reports-inbox {
  margin-top: 0.2rem;
  border-left-color: #6b7c6a;
  border-top: 1px solid #3a4638;
}

.report-kind-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
}

.report-kind-pill.kind-player {
  background: #b33535;
}

.report-kind-pill.kind-chat {
  background: #b88810;
}

.report-kind-pill.kind-bug {
  background: #c45e18;
}

.report-kind-pill.kind-idea {
  background: #2f8a5c;
}

.sa-item .report-kind-pill {
  margin-right: 0;
  flex-shrink: 0;
}

#report-list .sa-item a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.45rem 0.55rem;
}

#report-list .sa-item-name {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reports-inbox-item .report-kind-pill {
  align-self: flex-start;
  margin-bottom: 0.1rem;
}

.chat-icon-btn {
  position: relative;
}

.chat-icon-btn .nav-badge {
  position: absolute;
  top: -0.35rem;
  right: -0.45rem;
  margin: 0;
  font-size: 0.7rem;
  min-width: 1.05rem;
  height: 1.05rem;
}

.report-modal .profile-modal-card {
  width: min(36rem, 100%);
}

.report-inbox-card {
  width: min(72rem, calc(100vw - 2rem));
  height: min(85vh, 48rem);
  max-height: min(85vh, 48rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.85rem;
}

.report-inbox-card > h2 {
  flex: 0 0 auto;
  margin-bottom: 0.65rem;
}

.report-quote {
  margin: 0.35rem 0 0.75rem;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid #4a5c40;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.88rem;
}

.reports-inbox-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.reports-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--border);
  overflow: auto;
  min-height: 0;
  max-height: none;
  height: 100%;
}

.reports-inbox-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding-right: 0.25rem;
}

.reports-inbox-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(74, 92, 64, 0.4);
}

.reports-inbox-item:hover,
.reports-inbox-item.is-selected {
  background: rgba(196, 163, 90, 0.12);
}

.reports-inbox-item.is-unread strong {
  color: var(--accent);
}

.report-inbox-card .report-thread {
  flex: 1 1 auto;
  max-height: none;
  min-height: 12rem;
}

.report-inbox-card .report-reply-form {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.5rem;
}

.report-inbox-card .report-reply-form textarea {
  min-height: 5.5rem;
}

.report-thread {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.75rem 0;
  max-height: 16rem;
  overflow: auto;
}

.report-msg {
  padding: 0.45rem 0.55rem;
  border: 1px solid #455540;
  background: #1a2116;
}

.report-msg.is-staff {
  border-color: #6a5c40;
  background: #242016;
}

.report-msg-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
}

.report-msg p {
  margin: 0;
  font-size: 0.88rem;
  white-space: pre-wrap;
}

.report-reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.report-reply-form textarea,
.report-modal textarea,
.report-modal input[type="text"] {
  width: 100%;
  background: #12160f;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  font: inherit;
  resize: vertical;
}

.report-meta p {
  margin: 0.25rem 0;
  font-size: 0.9rem;
}

.sa-item.is-unread .sa-item-name {
  color: var(--accent);
}

.profile-modal[hidden],
.chat-ctx-menu[hidden],
.chat-online-panel[hidden],
.chat-online-list[hidden],
.chat-channel-bar[hidden] {
  display: none !important;
}

.profile-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.profile-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.profile-modal-card {
  position: relative;
  z-index: 1;
  width: min(42rem, 100%);
  max-height: min(92vh, 48rem);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  padding: 0.9rem 0.95rem 1rem;
}

.profile-modal-card.report-inbox-card {
  width: min(72rem, calc(100vw - 2rem));
  max-width: none;
  height: min(85vh, 48rem);
  max-height: min(85vh, 48rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.profile-modal-close {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  margin: 0;
  padding: 0.1rem 0.45rem;
  font-size: 1.2rem;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

.profile-modal-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto;
  gap: 1rem 1rem;
  align-items: start;
  padding-right: 0.35rem;
}

.profile-modal-top-left {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.profile-modal-top-right {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.profile-modal-achievements-block {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

.profile-modal-stats-block {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.profile-modal-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0;
  padding-right: 0;
}

.profile-modal-footer {
  margin: 0;
  padding: 0;
}

.profile-modal-achievements-block .profile-achievements-title,
.profile-modal-stats-block .profile-stats-title,
.profile-skills-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--accent);
}

.profile-modal-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  justify-content: center;
}

.profile-modal-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.profile-modal-gender-symbol {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted);
}

.profile-modal-gender-symbol.is-male {
  color: #7eb6e8;
}

.profile-modal-gender-symbol.is-female {
  color: #e89ab8;
}

.profile-modal-gender-symbol[hidden] {
  display: none !important;
}

.profile-modal-head h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-modal-identity > p {
  margin: 0;
  line-height: 1.2;
}

.profile-modal-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  text-align: left;
  max-width: none;
  margin: 0;
}

.profile-meta-row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

.profile-meta-flag {
  width: 22px;
  max-height: 16px;
}

.profile-modal-avatar {
  flex: 0 0 6.2rem;
  width: 6.2rem;
  height: 6.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #12160f;
  font-size: 2.4rem;
  line-height: 1;
  overflow: hidden;
}

.profile-modal-avatar img,
.profile-modal-avatar img.profile-modal-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-modal-avatar img.ui-icon-img {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
}

.profile-modal-roles {
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
}

.profile-modal-roles[hidden] {
  display: none !important;
}

.profile-modal-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.profile-modal-role-icon {
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #12160f;
  font-size: 0.95rem;
  line-height: 1;
  overflow: hidden;
}

.profile-modal-role-icon img,
.profile-modal-role-icon .ui-icon,
.profile-modal-role-icon .ui-icon-img,
.profile-modal-role-icon .profile-role-img {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  object-fit: contain;
  display: block;
}

.profile-modal-role-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.2;
  text-transform: none;
}

.profile-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}

.profile-modal-stats.profile-modal-stats-qp {
  grid-template-columns: 1fr 1fr;
  margin: 0.45rem 0 0;
}

.profile-modal-stats.profile-modal-stats-qp div {
  text-align: center;
}

.profile-modal-stats.profile-modal-stats-qp dt,
.profile-modal-stats.profile-modal-stats-qp dd {
  text-align: center;
}

.profile-modal-stats div {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.4rem 0.5rem;
}

.profile-modal-stats dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-modal-stats dd {
  margin: 0.15rem 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile-skills-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--accent);
}

.profile-skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  background: #12160f;
  max-height: none;
  overflow: visible;
}

.profile-skills-totals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.profile-skills-totals div {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.4rem 0.5rem;
}

.profile-skills-totals dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.profile-skills-totals dd {
  margin: 0.15rem 0 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile-skill-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.4rem 0.15rem;
  min-height: 2.35rem;
  border: 0;
  border-bottom: none;
  font-size: inherit;
}

.profile-skill-row:last-child {
  border-bottom: none;
}

.profile-skill-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

.profile-skill-name .skill-label {
  display: none;
}

.profile-skill-name .ui-icon {
  width: 1.7rem;
  height: 1.7rem;
  max-width: 1.7rem;
  max-height: 1.7rem;
  margin-right: 0;
  font-size: 1.35rem;
}

.profile-skill-name .ui-icon-img,
.profile-skill-name img.ui-icon,
.profile-skill-name img.ui-icon-img {
  width: 1.7rem;
  height: 1.7rem;
  max-width: 1.7rem;
  max-height: 1.7rem;
}

.profile-skill-lvl {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.profile-achievements-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--accent);
}

.profile-achievements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  background: #12160f;
}

.profile-ach-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(58, 74, 50, 0.55);
  min-width: 0;
}

.profile-ach-item:last-child {
  border-bottom: none;
}

.profile-ach-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-ach-icon img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  display: block;
}

.profile-ach-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.profile-achievements-empty {
  margin: 0.35rem 0 0;
}

.profile-modal-actions {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 36rem) {
  .profile-modal-cols {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .profile-modal-top-left,
  .profile-modal-top-right,
  .profile-modal-achievements-block,
  .profile-modal-stats-block {
    grid-column: 1;
    grid-row: auto;
  }
}

.skill-guide-modal[hidden] {
  display: none !important;
}

.skill-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.skill-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
}

.skill-guide-card {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  height: min(85vh, 40rem);
  max-height: min(85vh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #2c3826;
  border: 1px solid #4a5c40;
  color: var(--text);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

.skill-guide-close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  border: 0;
  background: transparent;
  color: #c5d0b6;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

.skill-guide-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding-right: 1.5rem;
}

.skill-guide-icon {
  flex: 0 0 3.1rem;
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4a5c40;
  background: #354530;
  font-size: 1.75rem;
  line-height: 1;
  overflow: hidden;
  padding: 0.2rem;
  box-sizing: border-box;
}

.skill-guide-icon img,
.skill-guide-icon .skill-guide-icon-img,
.skill-guide-icon img.ui-icon,
.skill-guide-icon img.ui-icon-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
  margin: 0;
}

.skill-guide-action .ui-icon,
.skill-guide-action .ui-icon-img,
.skill-guide-action img.ui-icon,
.skill-guide-action img.ui-icon-img,
.skill-guide-action .skill-guide-row-img {
  flex: 0 0 auto;
  width: 1.85rem !important;
  height: 1.85rem !important;
  max-width: 1.85rem !important;
  max-height: 1.85rem !important;
  margin-right: 0;
  font-size: 1.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

.skill-guide-identity h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1.65rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.skill-guide-identity p {
  margin: 0.15rem 0 0;
  line-height: 1.2;
}

.skill-guide-blurb {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  color: #c5d0b6;
}

.skill-guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}

.skill-guide-tabs[hidden] {
  display: none;
}

.skill-guide-tab {
  appearance: none;
  border: 1px solid rgba(212, 175, 88, 0.35);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(232, 220, 180, 0.78);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}

.skill-guide-tab:hover {
  color: #f0e6c8;
  border-color: rgba(212, 175, 88, 0.55);
}

.skill-guide-tab.is-on {
  color: #1a1610;
  background: linear-gradient(180deg, #e8d090 0%, #c9a84a 100%);
  border-color: #b8923a;
  font-weight: 600;
}

.skill-guide-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.skill-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.skill-guide-table th,
.skill-guide-table td {
  padding: 0.18rem 0.5rem;
  border-bottom: 1px solid #455540;
  text-align: left;
  vertical-align: middle;
  line-height: 1.2;
}

.skill-guide-table th {
  color: #b8c4a8;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.skill-guide-table tbody tr:not(.is-locked):hover {
  background: rgba(232, 237, 217, 0.06);
}
.skill-guide-table tbody tr.has-loc-tip {
  cursor: help;
}

.skill-guide-table th:first-child,
.skill-guide-table td:first-child {
  width: 2.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* XP / chance column — skip when table has only Lvl+Action (combat skills).
   Highscores reuse .skill-guide-table but need a wide XP column — exclude .hs-popup-table. */
.skill-guide-table:not(.is-no-xp):not(.hs-popup-table) th:last-child,
.skill-guide-table:not(.is-no-xp):not(.hs-popup-table) td:last-child {
  width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.skill-guide-table.is-no-xp th:last-child,
.skill-guide-table.is-no-xp td:last-child {
  width: auto;
  text-align: left;
}

.skill-guide-table td.skill-guide-qty {
  width: 3.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.skill-guide-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.skill-guide-row.is-locked {
  opacity: 0.55;
}

.skill-guide-row.is-unlock-row {
  opacity: 1;
}

.skill-guide-row.is-unlock-row.is-locked {
  opacity: 0.92;
}

.skill-guide-row.is-unlock-row td:first-child {
  font-weight: 700;
}

.skill-guide-empty {
  margin: 0.75rem 0 0;
}

.hs-popup-card {
  width: min(52rem, 100%);
  max-width: calc(100vw - 2rem);
  max-height: min(88vh, 44rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hs-popup-card .skill-guide-head {
  flex: 0 0 auto;
}

.hs-popup-body {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.hs-popup-boards {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--border);
  background: #12160f;
}

.hs-popup-tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.32rem 0.45rem;
  margin: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  max-width: none;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-sizing: border-box;
}

.hs-popup-tab-icon {
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
}

.hs-popup-tab-icon img {
  width: 0.95rem;
  height: 0.95rem;
  object-fit: contain;
}

.hs-popup-tab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-popup-tab:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  filter: none;
}

.hs-popup-tab.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  filter: none;
}

.hs-popup-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.hs-popup-main .skill-guide-table-wrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.hs-popup-player {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.hs-popup-table {
  table-layout: fixed;
  width: 100%;
}

.hs-popup-table th:nth-child(1),
.hs-popup-table td:nth-child(1) {
  width: 3.2rem;
  text-align: center;
}

.hs-popup-table th:nth-child(2),
.hs-popup-table td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-popup-table th:nth-child(3),
.hs-popup-table td:nth-child(3) {
  width: 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Beat .skill-guide-table last-child XP width (3.2rem) — room for 3_000_000_000 */
.skill-guide-table.hs-popup-table th:nth-child(4),
.skill-guide-table.hs-popup-table td:nth-child(4),
.skill-guide-table.hs-popup-table th:last-child,
.skill-guide-table.hs-popup-table td:last-child {
  width: 12ch;
  min-width: 12ch;
  max-width: none;
  padding-right: 0.85rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hs-popup-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid #455540;
  flex: 0 0 auto;
  min-width: 0;
}

.hs-popup-page-btn {
  border: 1px solid #4a5c40;
  background: #354530;
  color: #c5d0b6;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  min-width: 2rem;
  margin: 0;
}

.hs-popup-page-btn:hover:not(:disabled) {
  background: #3f5240;
  color: var(--text);
  filter: none;
}

.hs-popup-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.hs-popup-page-info {
  font-size: 0.78rem;
}

.news-popup-card {
  width: min(56rem, 100%);
  height: min(88vh, 44rem);
  max-height: min(88vh, 44rem);
}

.news-popup-body {
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  align-content: stretch;
}

.news-popup-side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #141a12 0%, #10140e 100%);
  padding: 0.45rem 0.35rem 0.5rem;
}

.news-popup-side-label {
  margin: 0 0.35rem 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.news-popup-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.news-cat-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.42rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.news-cat-btn:hover {
  background: color-mix(in srgb, var(--news-cat, #8a9a7a) 10%, transparent);
  border-color: color-mix(in srgb, var(--news-cat, #8a9a7a) 28%, transparent);
}

.news-cat-btn.is-on {
  background: color-mix(in srgb, var(--news-cat, #8a9a7a) 16%, transparent);
  border-color: color-mix(in srgb, var(--news-cat, #8a9a7a) 45%, transparent);
  color: color-mix(in srgb, var(--news-cat, #8a9a7a) 75%, #fff);
}

.news-cat-dot {
  flex: 0 0 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--news-cat, #8a9a7a);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--news-cat, #8a9a7a) 25%, transparent);
}

.news-cat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-cat-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--news-cat, #8a9a7a) 45%, transparent);
  background: color-mix(in srgb, var(--news-cat, #8a9a7a) 14%, transparent);
  color: color-mix(in srgb, var(--news-cat, #8a9a7a) 82%, #fff);
  text-decoration: none;
}

a.news-cat-chip:hover {
  background: color-mix(in srgb, var(--news-cat, #8a9a7a) 22%, transparent);
  filter: none;
}

.news-popup-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

.news-popup-list-view,
.news-popup-detail-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.news-popup-list-view[hidden],
.news-popup-detail-view[hidden] {
  display: none !important;
}

.news-popup-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.65rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border);
}

.news-popup-panel-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--accent);
}

.news-popup-rows {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0.1rem 0.25rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.news-popup-item {
  margin: 0;
  border: 0;
}

.news-popup-item-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, #1a2118 0%, #151a13 100%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--news-cat, #8a9a7a);
  border-radius: 6px;
  color: inherit;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.news-popup-item-btn:hover {
  border-color: color-mix(in srgb, var(--news-cat, #8a9a7a) 55%, var(--border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
  color: inherit;
  filter: none;
}

.news-popup-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.news-popup-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.news-popup-item-title {
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--text);
}

.news-popup-pin {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.news-popup-new {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, #e05555 22%, transparent);
  color: #ffb0b0;
  border: 1px solid color-mix(in srgb, #e05555 45%, transparent);
  animation: nav-news-flash 1.2s ease-in-out infinite;
}

.news-popup-item-blurb {
  margin: 0 0 0.35rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

.news-popup-meta,
.news-popup-detail-meta {
  margin: 0;
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--muted) 88%, #fff);
}

.news-popup-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  min-height: 0;
  text-align: center;
  color: var(--muted);
}

.news-popup-empty-icon {
  font-size: 1.75rem;
  opacity: 0.55;
}

.news-popup-empty p {
  margin: 0;
  font-size: 0.9rem;
}

.news-popup-article {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.news-popup-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.news-popup-article h3 {
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.3;
}

.news-popup-detail-body {
  margin-top: 1rem;
}

.news-body {
  margin-top: 1rem;
  line-height: 1.6;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
  max-width: 40rem;
}
.news-body .news-p {
  margin: 0 0 0.85rem;
}
.news-body .news-p:last-child {
  margin-bottom: 0;
}
.news-body .news-h {
  margin: 1.15rem 0 0.45rem;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.3;
}
.news-body .news-h--sub {
  font-size: 0.9rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.news-body .news-h:first-child {
  margin-top: 0;
}
.news-body .news-list {
  margin: 0.35rem 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.news-body .news-list li {
  position: relative;
  padding: 0.45rem 0.65rem 0.45rem 1.15rem;
  border-radius: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, #141910 88%, #000);
  line-height: 1.45;
}
.news-body .news-list li::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.85rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #c4a06a) 75%, #fff);
}
.news-body .news-hr {
  border: 0;
  height: 1px;
  margin: 1.1rem 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 85%, transparent) 18%,
    color-mix(in srgb, var(--border) 85%, transparent) 82%,
    transparent
  );
}
.news-body .news-cta {
  margin: 1.1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--accent, #c4a06a) 35%, var(--border));
  background: color-mix(in srgb, var(--accent, #c4a06a) 10%, #12160f);
  line-height: 1.45;
}
.news-body .news-cta a {
  color: var(--accent, #c4a06a);
  font-weight: 650;
  text-decoration: none;
}
.news-body .news-cta a:hover {
  text-decoration: underline;
}
.news-body a {
  color: var(--accent, #c4a06a);
}

@media (max-width: 560px) {
  .news-popup-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-popup-nav {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 7.5rem;
    overflow-y: auto;
  }

  .news-cat-btn {
    width: auto;
    flex: 1 1 calc(50% - 0.15rem);
    min-width: 7rem;
  }
}

@media (max-width: 560px) {
  .hs-popup-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .hs-popup-boards {
    flex-direction: column;
    max-height: 9.5rem;
    border-right: 0;
  }

  .hs-popup-tab {
    width: 100%;
  }
}

.quests-popup-card {
  width: min(68rem, 96vw);
  height: min(88vh, 46rem);
  max-height: min(88vh, 46rem);
}

.ach-popup-card {
  width: min(56rem, 100%);
  height: min(88vh, 44rem);
  max-height: min(88vh, 44rem);
}

.ach-popup-body {
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

.ach-popup-side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.45rem 0.35rem 0.5rem;
}

.ach-popup-side-label {
  margin: 0 0.35rem 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ach-popup-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: flex-start;
  gap: 0.15rem;
}

.ach-popup-cat {
  width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.ach-popup-cat-btn,
.ach-popup-part-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0.4rem 0.45rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}

.ach-popup-cat-btn:hover,
.ach-popup-part-btn:hover {
  border-color: var(--border);
  background: rgba(196, 163, 90, 0.08);
}

.ach-popup-cat-btn.is-on,
.ach-popup-part-btn.is-on {
  border-color: var(--accent);
  background: rgba(196, 163, 90, 0.14);
  color: var(--accent);
}

.ach-popup-cat-left {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.ach-popup-caret {
  width: 0.75rem;
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--muted);
}

.ach-popup-caret.is-spacer {
  visibility: hidden;
}

.ach-popup-cat-name,
.ach-popup-part-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ach-popup-cat-count,
.ach-popup-part-count {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ach-popup-cat-btn.is-on .ach-popup-cat-count,
.ach-popup-part-btn.is-on .ach-popup-part-count {
  color: var(--accent);
}

.ach-popup-parts {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.1rem 0 0.25rem 0.85rem;
}

.ach-popup-part-btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.4rem;
}

.ach-popup-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.ach-popup-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  flex: 0 0 auto;
}

.ach-popup-panel-head h3 {
  margin: 0;
  color: var(--accent);
  font-size: 1.05rem;
}

.ach-popup-list {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 700px) {
  .ach-popup-body {
    grid-template-columns: 1fr;
  }
  .ach-popup-side {
    max-height: 11rem;
  }
}

.quests-popup-body {
  grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.quests-popup-side {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

.quests-popup-filter-label {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}

.quests-popup-filter {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: #12160f;
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
}

.quests-popup-quest-boards {
  flex: 1 1 auto;
  min-height: 0;
}

.quests-popup-empty-list {
  margin: 0;
  padding: 0.55rem 0.45rem;
}

.quests-popup-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

.quests-popup-detail-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.quests-popup-detail-wrap .quest-journal-body {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
}

.quests-popup-empty {
  position: absolute;
  top: 0.35rem;
  left: 0.1rem;
  right: 0.35rem;
  margin: 0;
  z-index: 1;
}

.quests-popup-detail-head {
  margin-bottom: 0.35rem;
}

.quests-popup-main .quest-lede {
  margin: 0.15rem 0 0.55rem;
  color: var(--muted);
}

.quests-popup-quest-tab {
  overflow: hidden;
}

.quests-popup-quest-tab.active {
  box-shadow: inset 3px 0 0 currentColor;
}

.quests-popup-quest-tab .quests-popup-mark {
  flex: 0 0 1.1rem;
  width: 1.1rem;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
}

.quests-popup-quest-tab.active .quest-mark-active,
.quests-popup-quest-tab .quest-mark-active {
  color: #e6c35c;
}

.quests-popup-quest-tab.active .quest-mark-available,
.quests-popup-quest-tab .quest-mark-available {
  color: #e09345;
}

.quests-popup-quest-tab.active .quest-mark-locked,
.quests-popup-quest-tab .quest-mark-locked {
  color: #d45b5b;
}

.quests-popup-quest-tab.active .quest-mark-completed,
.quests-popup-quest-tab .quest-mark-completed {
  color: #6fbf73;
}

.quests-popup-quest-tab.active .quest-name-active {
  color: #e6c35c;
}
.quests-popup-quest-tab.active .quest-name-available {
  color: #e09345;
}
.quests-popup-quest-tab.active .quest-name-locked {
  color: #d45b5b;
}
.quests-popup-quest-tab.active .quest-name-completed {
  color: #6fbf73;
}

@media (max-width: 560px) {
  .quests-popup-card {
    height: min(88vh, 40rem);
  }

  .quests-popup-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .quests-popup-side {
    max-height: 11rem;
  }

  .quests-popup-quest-boards {
    max-height: none;
  }
}

.chat-log {
  height: 11rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.chat-msg {
  display: grid;
  grid-template-columns: 2.6rem 1.4rem max-content minmax(0, 1fr);
  column-gap: 0.35rem;
  row-gap: 0.15rem;
  align-items: baseline;
  font-size: 0.86rem;
  line-height: 1.35;
}

.chat-msg.is-mine .chat-user {
  color: var(--accent, #c4a35a);
}

.chat-msg.is-system {
  grid-template-columns: 2.6rem 1fr;
  color: var(--muted);
  font-style: italic;
}

.chat-msg.is-system .chat-body {
  color: #d2c49a;
  font-style: normal;
}

.chat-msg.is-system .chat-system-tag {
  font-weight: 600;
  color: var(--accent, #c4a35a);
  margin-right: 0.35rem;
  font-style: normal;
}

/* System chat categories */
.chat-msg.is-system.is-gather .chat-body { color: #b7d39a; }
.chat-msg.is-system.is-gather .chat-system-tag { color: #8fbf6a; }

.chat-msg.is-system.is-craft .chat-body { color: #d4c4a0; }
.chat-msg.is-system.is-craft .chat-system-tag { color: #c4a35a; }

.chat-msg.is-system.is-broadcast .chat-body { color: #f0d078; }
.chat-msg.is-system.is-broadcast .chat-system-tag { color: #e2b84a; }

.chat-msg.is-system.is-death .chat-body,
.chat-msg.is-system.is-danger .chat-body { color: #e8a0a0; }
.chat-msg.is-system.is-death .chat-system-tag,
.chat-msg.is-system.is-danger .chat-system-tag { color: var(--danger, #c45a5a); }

.chat-msg.is-system.is-inv_full .chat-body { color: #f0b070; }
.chat-msg.is-system.is-inv_full .chat-system-tag { color: #e0893a; }

.chat-msg.is-system.is-level_up .chat-body { color: #ffe6a0; }
.chat-msg.is-system.is-level_up .chat-system-tag { color: #ffd45a; }

.chat-msg.is-system.is-daily .chat-body { color: #9fd4d0; }
.chat-msg.is-system.is-daily .chat-system-tag { color: #5fb8b0; }

.chat-msg.is-system.is-achievement .chat-body { color: #e8d5a0; }
.chat-msg.is-system.is-achievement .chat-system-tag { color: var(--accent, #c4a35a); }

.chat-msg.is-system.is-quest .chat-body { color: #c5b8e0; }
.chat-msg.is-system.is-quest .chat-system-tag { color: #9a88c8; }

.chat-msg.is-system.is-slayer .chat-body { color: #d4a8c8; }
.chat-msg.is-system.is-slayer .chat-system-tag { color: #c078a8; }

.chat-msg.is-system.is-tool .chat-body { color: #c8b896; }
.chat-msg.is-system.is-tool .chat-system-tag { color: #a89060; }

/* Level-up celebration */
.level-up-modal[hidden] {
  display: none !important;
}

.level-up-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.level-up-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 6, 0.72);
}

.level-up-card {
  position: relative;
  z-index: 1;
  width: min(22rem, 100%);
  text-align: center;
  padding: 1.5rem 1.35rem 1.25rem;
  border: 1px solid #6d5a2e;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196, 163, 90, 0.22), transparent 55%),
    linear-gradient(180deg, #2a3220 0%, #1a2014 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  animation: level-up-in 0.35s ease-out;
}

.level-up-kicker {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #c4a35a);
  font-weight: 700;
}

.level-up-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  margin-bottom: 0.45rem;
  font-size: 2.1rem;
  line-height: 1;
}

.level-up-icon img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

.level-up-skill {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.level-up-level {
  margin: 0 0 1.1rem;
  font-size: 1.55rem;
  color: #e8d9a8;
}

.level-up-level strong {
  font-size: 1.85rem;
  color: #f0e2b0;
  font-variant-numeric: tabular-nums;
}

.level-up-ok {
  min-width: 8rem;
}

@keyframes level-up-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-time {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.chat-user {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: context-menu;
  max-width: 8.5rem;
}

.chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.1rem;
}

.chat-body {
  color: var(--text);
  word-break: break-word;
}

.chat-compose {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.chat-main .chat-compose {
  margin-top: 0;
}

.chat-compose input {
  flex: 1;
  min-width: 0;
}

.chat-compose button {
  flex-shrink: 0;
}

#chat-status {
  font-size: 0.8rem;
}

body.admin-page .player-chat {
  display: none;
}

@media (max-width: 700px) {
  .chat-log {
    height: 9rem;
  }
  .chat-msg {
    grid-template-columns: 2.4rem 1.2rem max-content minmax(0, 1fr);
    column-gap: 0.3rem;
    font-size: 0.82rem;
  }
  .chat-user {
    max-width: 6.5rem;
  }
  .player-chat {
    max-width: none;
  }
}

@media (max-width: 1024px) {
  body.has-sidebar .player-chat {
    position: static;
    width: auto;
    left: auto;
    bottom: auto;
    margin-top: 0.75rem;
    box-shadow: none;
    max-width: none;
  }
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.1rem;
}

.dash-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "stats news"
    "daily activity";
  gap: 0.85rem;
  margin: 1rem 0 1.1rem;
  align-items: stretch;
}

.dash-stats-2x2 {
  grid-area: stats;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-content: stretch;
}

.dash-stats-2x2 .dash-stat {
  min-height: 0;
  height: 100%;
}

.dash-area-news {
  grid-area: news;
}

.dash-area-daily {
  grid-area: daily;
}

.dash-area-activity {
  grid-area: activity;
}

.dash-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 5.5rem;
}

.dash-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dash-value {
  font-size: 1.35rem;
  color: var(--accent);
  font-weight: 700;
  text-transform: capitalize;
}

.dash-value-link {
  text-decoration: none;
  display: inline-block;
  width: fit-content;
}

.dash-value-link:hover {
  text-decoration: underline;
  color: var(--accent);
}

.dash-sub {
  font-size: 0.78rem;
}

.dash-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.dash-routes li,
.dash-skills li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.dash-skill-name {
  text-transform: capitalize;
  min-width: 5.5rem;
}

.dash-skill-xp {
  color: var(--accent);
  margin-left: auto;
}

.dash-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.dash-action {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.65rem 0.5rem;
}

.dash-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 980px) {
  .dash-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-board {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stats"
      "news"
      "daily"
      "activity";
  }
  .dash-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dash-home {
    grid-template-columns: 1fr;
  }
  .dash-card-wide {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .dash-actions {
    grid-template-columns: 1fr 1fr;
  }
}

h1, h2 { font-weight: 600; letter-spacing: 0.02em; }
h1 { margin: 0 0 0.75rem; color: var(--accent); }
h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }

.page-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.page-heading-icon {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.page-heading-icon--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}
.page-heading-text {
  min-width: 0;
}
.sidebar-title.page-heading {
  gap: 0.35rem;
}
.sidebar-title .page-heading-icon {
  width: 1.15rem;
  height: 1.15rem;
}
.skill-guide-identity .page-heading,
.world-map-modal-head .page-heading {
  margin: 0;
  font-size: 1.65rem;
  line-height: 1.2;
  gap: 0.5rem;
}
.skill-guide-identity .page-heading-icon,
.world-map-modal-head .page-heading-icon,
.report-inbox-card > .page-heading .page-heading-icon {
  width: 1.75rem;
  height: 1.75rem;
}
.world-map-modal-head h2.page-heading,
.world-map-modal-head .page-heading {
  font-size: 1.65rem;
}
.report-inbox-card > .page-heading {
  margin: 0 0 0.75rem;
  font-size: 1.65rem;
  gap: 0.5rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.meta, .muted { color: var(--muted); font-size: 0.9rem; }

.flash {
  background: var(--flash);
  border: 1px solid #4e6e3c;
  padding: 0.6rem 0.8rem;
}

.toast-flash {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 1600;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 2rem 0.75rem 0.9rem;
  background: #3a5230;
  border: 1px solid #5a7a48;
  color: #f0f4e6;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.22s ease-out;
}

.toast-flash.is-error {
  border-color: rgba(220, 80, 80, 0.65);
  background: rgba(80, 20, 20, 0.92);
}

.toast-flash.is-warn {
  border-color: rgba(220, 170, 60, 0.7);
  background: rgba(70, 55, 15, 0.95);
}

.toast-flash.is-hiding {
  animation: toast-out 0.26s ease-in forwards;
  pointer-events: none;
}

.toast-flash-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e8edd9;
}

.toast-flash-detail {
  font-size: 0.78rem;
  color: #c5d0b6;
  line-height: 1.3;
}

.toast-flash-close {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  border: 0;
  background: transparent;
  color: #c5d0b6;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
}

.error {
  color: #ffb4b4;
  background: #3a2020;
  padding: 0.6rem 0.8rem;
}

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.35rem 0; border-bottom: 1px dashed var(--border); }
.item-row { margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }

.recipe-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.recipe {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.85rem 0.95rem;
}

.recipe.is-locked { opacity: 0.72; }
.recipe.is-running { border-color: var(--accent); }

.recipe-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.recipe-name {
  display: block;
  font-size: 1rem;
  color: var(--text);
}

.recipe-meta {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
}

.recipe-action {
  flex-shrink: 0;
  text-align: right;
}

.recipe-action form { margin: 0; }
.recipe-action button { margin-top: 0; }

.recipe-io {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.7rem;
}

.recipe-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.recipe-item {
  display: block;
  font-size: 0.92rem;
}

.recipe-item.out {
  color: var(--accent);
  font-weight: 700;
}

.recipe-item.in {
  color: var(--text);
}

.skill-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

body.has-sidebar main:has(.skill-layout) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 1rem;
}

body.has-sidebar main:has(.skill-layout) > h1 {
  flex: 0 0 auto;
  margin-bottom: 0.75rem;
}

.skill-actions {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.skill-actions > h2 {
  flex: 0 0 auto;
  margin-top: 0;
}

.skill-actions > .action-pick,
.skill-actions .skill-actions-empty-msg {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 0.75rem;
}

.foraging-findables {
  flex: 0 0 auto;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.foraging-findables-title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
}

.foraging-findables-hint {
  margin: 0 0 0.5rem;
}

.foraging-findables-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
}

.foraging-find-row {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.28rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.foraging-find-row.is-locked {
  opacity: 0.45;
}

.foraging-find-row:last-child {
  border-bottom: none;
}

.foraging-find-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.foraging-find-chance {
  font-variant-numeric: tabular-nums;
  min-width: 3.2rem;
  text-align: right;
  color: var(--gold, #d4b483);
}

.skill-active-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.skill-active {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skill-active-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-right: 0.1rem;
}

.skill-active-header {
  flex: 0 0 auto;
  align-items: center;
  min-height: 2.15rem;
  margin-bottom: 0.65rem;
}

.skill-stop-form {
  margin: 0;
  flex: 0 0 auto;
}

.skill-stop-form button {
  margin-top: 0;
  min-width: 4.75rem;
}

/* Keep Stop footprint when idle so the layout never shifts on Start. */
.skill-stop-form.is-idle {
  visibility: hidden;
  pointer-events: none;
}

.skill-actions h2,
.skill-active h2 {
  margin-top: 0;
}

.action-pick {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.action-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.action-pick-row:last-child { border-bottom: none; }
.action-pick-row.is-active { color: var(--accent); }
.action-pick-row.is-locked { opacity: 0.65; }

.skill-unlock-panel {
  padding: 0.35rem 0.1rem 0.15rem;
}

.skill-unlock-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--warn, #d4a017) 85%, var(--text));
}

.skill-unlock-quest {
  margin-top: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--warn, #d4a017) 35%, var(--border));
  background: color-mix(in srgb, var(--warn, #d4a017) 6%, transparent);
  border-radius: 0.35rem;
}

.skill-unlock-quest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.skill-unlock-status.is-available { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.skill-unlock-status.is-active { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.skill-unlock-status.is-locked { background: color-mix(in srgb, var(--muted) 18%, transparent); }

.skill-unlock-desc,
.skill-unlock-npc {
  margin: 0.45rem 0 0;
}

.skill-unlock-steps {
  margin: 0.65rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.45rem;
}

.skill-unlock-step.is-current {
  color: var(--text);
  font-weight: 600;
}

.skill-unlock-step.is-done {
  opacity: 0.72;
}

.skill-unlock-step-where {
  display: block;
  margin-top: 0.12rem;
}

.skill-unlock-journal-btn {
  margin-top: 0.75rem;
}

.action-pick-group {
  list-style: none;
  border-bottom: 1px solid var(--border);
}
.action-pick-group:last-child {
  border-bottom: none;
}
.action-bar-acc {
  margin: 0;
}
.action-bar-acc > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.action-bar-acc > summary::-webkit-details-marker {
  display: none;
}
.action-bar-acc-summary {
  border-bottom: none;
  position: relative;
  padding-left: 1.1rem;
}
.action-bar-acc-summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
}
.action-bar-acc[open] > .action-bar-acc-summary::before {
  content: "▾";
}
.action-bar-acc-aside {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}
.action-bar-acc-count {
  min-width: 1.1rem;
  text-align: right;
}
.action-pick-nested {
  list-style: none;
  margin: 0 0 0.15rem;
  padding: 0 0 0 0.85rem;
  border-left: 2px solid rgba(196, 163, 90, 0.22);
  margin-left: 0.55rem;
}
.action-pick-nested .action-pick-row {
  padding-left: 0.35rem;
}
.action-pick-start {
  margin: 0;
}
.action-pick-start button {
  margin-top: 0;
}
.action-pick-start button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.action-pick-start-btn.is-unavailable {
  opacity: 0.72;
}
.action-pick-row.is-locked .action-pick-start-btn.is-unavailable {
  opacity: 0.85;
}

.action-pick-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.action-pick-icon {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
}

.action-pick-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0;
}

.action-pick-emoji {
  font-size: 1.1rem;
  line-height: 1;
}

.action-pick-fallback {
  color: var(--muted);
  font-size: 0.85rem;
}

.action-pick-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.action-pick-info strong {
  font-size: 0.95rem;
}

.action-pick-row form { margin: 0; }
.action-pick-row button { margin-top: 0; }

.event-bind-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.5rem 0 0.85rem;
}

.event-bind-row {
  align-items: flex-end;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.event-bind-row:last-child {
  border-bottom: none;
}

.event-bind-qty {
  display: inline-flex;
  gap: 0.45rem;
  align-items: flex-end;
}

.event-bind-qty[hidden] {
  display: none !important;
}

.event-bind-remove {
  flex: 0 0 auto;
  min-width: 2rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.tiny { font-size: 0.75rem; }

.active-title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  color: var(--accent);
  font-weight: 700;
}

.active-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
}

.active-hero-art {
  flex: 0 0 5.5rem;
  width: 5.5rem;
  height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #12160f;
  overflow: hidden;
}

.active-hero-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
}

.active-hero-emoji {
  font-size: 2rem;
  line-height: 1;
}

.active-hero-placeholder {
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 700;
}

.active-hero-body {
  flex: 1 1 auto;
  min-width: 0;
}

.active-hero-body .active-io {
  margin-top: 0.55rem;
}

.active-timer {
  margin: 0;
  font-size: 0.95rem;
  min-height: 1.2em;
}

.active-countdown {
  margin: 0.15rem 0 0.35rem;
}

.active-timer-bar {
  height: 6px;
  margin-top: 0.35rem;
  background: color-mix(in srgb, var(--border) 70%, #12160f);
  overflow: hidden;
}
.active-timer-bar > span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.active-level-line {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.active-level-line strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.active-mult {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

.active-burn {
  display: block;
  margin-top: 0.2rem;
}

.active-blocked {
  margin: 0 0 0.65rem;
  color: #ffb4b4;
  font-size: 0.9rem;
  min-height: 1.35em;
}

.need-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 1.4em;
}

.need-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--text);
}

.need-row.is-missing,
.need-row.is-missing .need-qty {
  color: var(--danger);
}

.need-qty {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.active-io {
  margin: 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding: 0.55rem 0;
  min-height: 0;
}

.active-meta {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0;
}

.active-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.65rem;
  margin: 0;
}
.active-kpis > div {
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--border);
  background: #12160f;
}
.active-kpis dt {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.12rem;
}
.active-kpis dd {
  margin: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.active-kpis dd .muted.tiny {
  display: block;
  font-weight: 400;
  margin-top: 0.12rem;
}

.active-buffs-wrap {
  margin: 0;
}
.active-buffs-wrap .active-meta-title {
  margin-bottom: 0.3rem;
}
.buff-strip.action-buffs {
  margin: 0;
  padding: 0.3rem;
}
.buff-strip.action-buffs li.is-match {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.active-buffs-empty {
  margin: 0;
}
.active-buffs-empty[hidden] {
  display: none;
}

.active-meta-title {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.active-tool-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.4rem;
}

.active-tool-name {
  font-size: 0.95rem;
  min-width: 0;
}

.active-tool-dur {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

.active-tool-line {
  margin: 0;
  font-size: 0.92rem;
}

.active-tool-line.is-missing {
  color: var(--danger);
}

.skill-bar-tool {
  height: 7px;
  margin-top: 0;
}

.skill-bar-tool.is-warn .skill-bar-fill {
  background: #d4a24a;
}

.skill-bar-tool.is-critical .skill-bar-fill {
  background: var(--danger, #c45a5a);
}

.skill-bar-lg {
  height: 10px;
  margin-top: 0.45rem;
}

.skill-progress { margin-top: 0.15rem; }

.skill-gear-bar {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  min-height: 3.45rem;
}

.skill-gear-mount-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}

.skill-gear-mount-wrap > .skill-gear-btn {
  flex: 1 1 auto;
}

.skill-gear-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3.45rem;
  margin: 0;
  padding: 0.4rem 0.55rem 0.55rem;
  border: 1px solid var(--border);
  background: #12160f;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

a.skill-gear-btn,
button.skill-gear-btn,
span.skill-gear-btn {
  flex: 1 1 0;
  min-width: 0;
}

.skill-gear-btn.is-filled {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.skill-gear-btn.is-missing {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: #ffb4b4;
}

.skill-gear-btn.is-static {
  cursor: default;
}

.skill-gear-btn.is-openable:hover,
a.skill-gear-btn:hover {
  border-color: var(--accent);
}

.skill-gear-icon {
  flex: 0 0 1.85rem;
  width: 1.85rem;
  height: 1.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #0e120c;
  font-size: 0.95rem;
  line-height: 1;
  overflow: hidden;
}

.skill-gear-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.skill-gear-label {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.15;
}

.skill-gear-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.skill-gear-label strong {
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-gear-sub {
  min-height: 0.95em;
  line-height: 1;
}

.skill-gear-dur-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.skill-gear-dur-bar.is-spacer {
  background: transparent;
}

.skill-gear-dur-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.skill-gear-dur-bar.is-warn > span {
  background: #d4a24a;
}

.skill-gear-dur-bar.is-critical > span {
  background: var(--danger, #c45a5a);
}

.mount-bag-popover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 40;
  padding: 0.65rem 0.7rem 0.75rem;
  border: 1px solid var(--border);
  background: #151a12;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  max-height: min(42vh, 16rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mount-bag-popover[hidden] {
  display: none !important;
}

.mount-bag-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
}

.mount-bag-popover-head strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.mount-bag-grid {
  margin: 0;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
}

@media (max-width: 1024px) {
  body.has-sidebar main:has(.skill-layout),
  body.has-sidebar main:has(.combat-page) {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
  }

  .skill-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 0.75rem;
    flex: none;
    min-height: 0;
  }

  .skill-active-col,
  .skill-active,
  .skill-active-body,
  .skill-actions {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: none;
  }

  .skill-actions {
    order: 0;
    min-height: 0;
  }

  .skill-active-col {
    order: -1;
  }

  .skill-actions > .action-pick,
  .skill-actions .skill-actions-empty-msg {
    max-height: none !important;
    overflow: visible !important;
    flex: none;
  }

  .action-pick-row {
    padding: 0.55rem 0;
    min-height: 2.75rem;
  }

  .action-pick-start-btn {
    min-height: 2.35rem;
    min-width: 3.25rem;
    padding: 0.4rem 0.65rem;
    touch-action: manipulation;
  }

  .combat-monster-row {
    min-height: 2.75rem;
    touch-action: manipulation;
    cursor: pointer;
  }
}

@media (max-width: 780px) {
  body.has-sidebar main:has(.skill-layout) {
    overflow-y: auto;
  }
  .skill-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
  .skill-actions {
    max-height: none;
  }
  .skill-active-col {
    height: auto;
    overflow: visible;
  }
  .skill-gear-bar {
    flex-direction: column;
  }
  .mount-bag-popover {
    max-height: min(50vh, 18rem);
  }
  .active-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .recipe-top { flex-direction: column; }
  .recipe-action { text-align: left; }
  .recipe-io { grid-template-columns: 1fr; }
}

label {
  display: block;
  margin: 0.45rem 0;
  font-size: 0.9rem;
}

input, select, button {
  font-family: inherit;
  font-size: 0.9rem;
}

input, select {
  background: #12160f;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  margin-top: 0.2rem;
  width: 100%;
  max-width: 360px;
}

button {
  background: var(--accent);
  color: #1a1508;
  border: none;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font-weight: 600;
  margin-top: 0.35rem;
}

button:hover { filter: brightness(1.08); }
button.danger { background: var(--danger); color: #fff; }
/* .muted on buttons must not use light text on accent background */
button.muted {
  color: #1a1508;
}

form.inline { display: inline; margin-left: 0.4rem; }
form.inline input, form.inline select { width: auto; display: inline-block; margin: 0; }
form.stack label { margin-top: 0.55rem; }

a { color: var(--accent); }

.hs-layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.hs-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: sticky;
  top: 72px;
}

.hs-tab {
  display: block;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
}

.hs-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hs-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: #2a3520;
}

.hs-board {
  margin-bottom: 0;
}

.hs-me td {
  background: rgba(196, 163, 90, 0.08);
}

@media (max-width: 700px) {
  .hs-layout {
    grid-template-columns: 1fr;
  }
  .hs-menu {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
}

/* Highscores page: no global skill/inventory sidebars */
body.hs-page .skill-sidebar,
body.hs-page .inv-sidebar {
  display: none;
}

body.hs-page {
  height: auto;
  overflow: visible;
  display: block;
}

body.hs-page .layout {
  display: block;
  overflow: visible;
}

body.hs-page main {
  max-width: none;
  margin: 0;
  width: 100%;
  padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
  overflow: visible;
}

.hs-page-wrap {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.hs-header {
  margin-bottom: 1.25rem;
}

.hs-header h1 {
  margin-bottom: 0.25rem;
}

.hs-shell {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  min-height: 420px;
  width: 100%;
}

.hs-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-right: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  position: sticky;
  top: 56px;
  align-self: stretch;
}

.hs-menu-label {
  margin: 0 0.85rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hs-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
}

.hs-tab-icon {
  flex: 0 0 1.2rem;
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.hs-tab-icon img {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}

.hs-tab-name {
  font-weight: 600;
}

.hs-tab-hint {
  display: none;
}

.hs-tab:hover {
  background: rgba(196, 163, 90, 0.08);
  color: var(--accent);
  border-color: transparent;
  border-left-color: transparent;
}

.hs-tab.active {
  background: rgba(196, 163, 90, 0.14);
  border-left-color: var(--accent);
  color: var(--accent);
}

.hs-board {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.hs-board-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.hs-board-head h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1.05rem;
}

.hs-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
}

.hs-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--border);
  background: #1a2116;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
}

.hs-page-btn:hover:not(.is-disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.hs-page-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.hs-page-info {
  font-size: 0.82rem;
}

.hs-table {
  margin: 0;
  table-layout: fixed;
  width: 100%;
}

.hs-table th,
.hs-table td {
  padding: 0.7rem 0.85rem;
}

.hs-table th {
  background: rgba(0, 0, 0, 0.2);
}

.hs-col-rank { width: 4.5rem; }
.hs-col-player { width: auto; }
.hs-col-lvl { width: 5.5rem; }
.hs-col-xp { width: 12ch; min-width: 12ch; }

.col-rank {
  width: 4.5rem;
  text-align: center;
}

.col-player {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-lvl,
.col-xp,
.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.col-xp {
  width: 12ch;
  min-width: 12ch;
  padding-right: 0.75rem;
}

.hs-xp {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.hs-player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.hs-tags {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.rank-medal,
.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.rank-medal {
  border: 1px solid var(--border);
}

.rank-medal.gold {
  color: #1a1508;
  background: #c4a35a;
  border-color: #c4a35a;
}

.rank-medal.silver {
  color: #1a1f18;
  background: #b8c0b0;
  border-color: #b8c0b0;
}

.rank-medal.bronze {
  color: #1a1508;
  background: #a67c52;
  border-color: #a67c52;
}

.rank-num {
  color: var(--muted);
}

.hs-me td {
  background: rgba(196, 163, 90, 0.1);
}

@media (max-width: 700px) {
  .hs-shell {
    grid-template-columns: 1fr;
  }
  .hs-menu {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .hs-tab {
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .hs-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
}

.travel-progress {
  margin: 0.65rem 0 0.35rem;
  height: 10px;
  background: #12160f;
  border: 1px solid var(--border);
  overflow: hidden;
}

.travel-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6b8f3a, var(--accent));
  width: 0%;
  transition: width 0.9s linear;
}
.travel-progress.is-returning .travel-progress-fill {
  background: var(--accent);
}
.travel-cancel-form {
  margin-top: 0.55rem;
}
.travel-cancel-form button {
  margin: 0;
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-label {
  font-size: 0.85rem;
  color: var(--muted, #a8b89a);
}

.checkbox-list {
  max-height: 9rem;
  overflow: auto;
  background: #12160f;
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.check-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
  cursor: pointer;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"] {
  width: auto !important;
  max-width: none !important;
  margin: 0;
  flex-shrink: 0;
}

.check-row-input .check-row-pick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.check-row-input .check-row-label {
  flex: 1;
  min-width: 0;
}

.check-row-input .input-qty {
  width: 3.25rem !important;
  min-width: 3.25rem;
  flex-shrink: 0;
  padding: 0.15rem 0.3rem !important;
  font-size: 0.85rem;
  text-align: center;
}

.checkbox-list-inputs {
  max-height: 14rem;
}

/* Skill-action craft input picker — compact rows (override form label column layout) */
.sa-input-picker {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.sa-input-picker-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sa-input-picker-bar .sa-input-filter {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.45rem !important;
  font-size: 0.85rem;
  width: auto !important;
}
.sa-input-selected {
  padding: 0.3rem 0.45rem;
  background: rgba(196, 160, 80, 0.08);
  border: 1px solid var(--border, #3a4533);
  border-radius: 4px;
}
.sa-input-selected-list {
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.sa-input-selected-list li {
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
  background: #1a2116;
  border: 1px solid var(--border, #3a4533);
  border-radius: 3px;
}
.sa-input-list {
  max-height: min(28rem, 55vh);
  overflow: auto;
  background: #12160f;
  border: 1px solid var(--border, #3a4533);
  border-radius: 4px;
}
.sa-input-group {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.2rem 0.45rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #a8b89a);
  background: #1a2116;
  border-bottom: 1px solid var(--border, #3a4533);
}
.sa-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.4rem;
  border-bottom: 1px solid rgba(58, 69, 51, 0.45);
  min-height: 0;
}
.sa-input-row:last-child {
  border-bottom: none;
}
.sa-input-row.is-on {
  background: rgba(196, 160, 80, 0.12);
  border-left: 2px solid var(--accent, #c4a35a);
  padding-left: calc(0.4rem - 2px);
}
.sa-input-row.is-filtered-out {
  display: none;
}
.sa-input-row:hover {
  background: rgba(196, 163, 90, 0.08);
}
.skill-action-form .sa-input-pick {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  flex: unset;
  flex-direction: row !important;
  min-width: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text);
  font-size: 0.85rem;
}
.skill-action-form .sa-input-pick input[type="checkbox"] {
  width: auto !important;
  max-width: none;
  flex-shrink: 0;
  margin: 0;
  padding: 0 !important;
}
.sa-input-name {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sa-input-key {
  font-size: 0.7rem;
  flex-shrink: 0;
  line-height: 1.2;
}
.skill-action-form .sa-input-qty-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.7rem;
}
.skill-action-form .sa-input-qty {
  width: 2.75rem !important;
  min-width: 2.75rem;
  max-width: 2.75rem;
  padding: 0.12rem 0.2rem !important;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.2;
}

.shop-sell-row {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.shop-stock-input {
  width: 4.25rem !important;
  margin: 0 !important;
  padding: 0.25rem 0.35rem !important;
  font-size: 0.8rem !important;
}

.shop-catalog-tools {
  margin-bottom: 0.65rem;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: end;
}

.npc-shop-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem 1rem;
  align-items: start;
}

.npc-shop-panel .field-label {
  display: block;
  margin-bottom: 0.15rem;
}

.npc-shop-panel .field-hint,
.npc-shop-panel .shop-side-count {
  margin: 0 0 0.35rem;
}

.shop-panel-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
}

.shop-panel-tools .shop-side-search,
.shop-panel-tools .shop-side-filter {
  width: 100%;
  min-width: 0;
}

.shop-item-list {
  max-height: 18rem;
}

.npc-shop-panel .shop-item-list {
  grid-template-columns: 1fr;
  max-height: 18rem;
}

.shop-buy-rules {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
}
.shop-rule-list {
  max-height: 8rem;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.shop-buy-extras {
  margin-top: 0.25rem;
}
.shop-buy-extras > summary {
  cursor: pointer;
  user-select: none;
}
.shop-catalog-row.is-filtered-out {
  display: none !important;
}

@media (max-width: 720px) {
  .npc-shop-panels {
    grid-template-columns: 1fr;
  }
  .shop-panel-tools {
    grid-template-columns: 1fr;
  }
}

/* Admin */
body.admin-page {
  height: auto;
  overflow: visible;
  display: block;
}

.page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.page-title-row h1 {
  margin: 0;
}

.page-title-row .meta {
  margin: 0;
  flex: 1;
  min-width: 12rem;
}

.seed-chip {
  flex-shrink: 0;
}

.seed-chip-form {
  margin: 0;
}

.seed-chip-btn {
  font-size: 0.72rem !important;
  padding: 0.28rem 0.55rem !important;
  margin: 0 !important;
  opacity: 0.85;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
}

.seed-chip-btn:hover {
  opacity: 1;
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

body.admin-page .skill-sidebar,
body.admin-page .inv-sidebar {
  display: none;
}

body.admin-page .layout {
  display: block;
  overflow: visible;
}

body.admin-page main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem) 2.5rem;
  overflow: visible;
}

.admin-shell { width: 100%; }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
}

.admin-tab {
  text-decoration: none;
  color: var(--muted);
  padding: 0.55rem 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-tab:hover { color: var(--text); }

.admin-tab.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.admin-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.admin-body.admin-body-full {
  grid-template-columns: 1fr;
}

.admin-subnav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.35rem 0;
  border-right: 1px solid var(--border);
  min-height: 8rem;
}

.admin-subnav-label {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-subnav-label:not(:first-child) {
  margin-top: 0.85rem;
}

.admin-sublink {
  text-decoration: none;
  color: var(--text);
  padding: 0.4rem 0.55rem;
  font-size: 0.9rem;
  border-left: 2px solid transparent;
}

.admin-sublink:hover { color: var(--accent); }

.admin-sublink.is-on {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(0, 0, 0, 0.18);
}

.admin-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.admin-page-tabs a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}

.admin-page-tabs a:hover {
  color: var(--accent);
}

.admin-page-tabs a.is-on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: rgba(0, 0, 0, 0.28);
}

.smithing-time-globals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  align-items: end;
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  max-width: 36rem;
}

.smithing-time-globals label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.smithing-time-globals input[type="number"] {
  width: 7rem;
  max-width: 7rem;
  margin: 0;
}

.smithing-time-hint {
  flex: 1 1 100%;
  margin: 0;
}

.set-tier-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.set-tier-row {
  align-items: flex-end;
  flex-wrap: wrap;
}

.set-piece-list {
  list-style: none;
  margin: 0.35rem 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.set-piece-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--border, #444) 70%, transparent);
  border-radius: 4px;
}

.set-piece-list form {
  display: inline;
  margin: 0;
}

.smithing-rates-panel {
  width: fit-content;
  max-width: 100%;
}

.smithing-rates-form {
  width: fit-content;
  max-width: 100%;
}

.smithing-rates-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.smithing-rates-table {
  width: auto;
  table-layout: auto;
  font-size: 0.86rem;
}

.smithing-rates-table th,
.smithing-rates-table td {
  padding: 0.35rem 0.5rem;
  white-space: nowrap;
  vertical-align: middle;
}

.smithing-rates-table th {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.smithing-bar-cell {
  min-width: 9rem;
  white-space: normal !important;
}

.smithing-rates-table input[type="number"] {
  width: 4.5rem;
  min-width: 3.5rem;
  max-width: 5rem;
  padding: 0.25rem 0.35rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.skill-times-subhead {
  margin: 1rem 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent, #c9a227);
}

.skill-times-subhead:first-of-type {
  margin-top: 0;
}

.skill-times-table td:first-child {
  min-width: 10rem;
  white-space: normal !important;
}

.admin-main { min-width: 0; }

.admin-split {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  align-items: start;
}

.admin-split > .panel { margin-bottom: 0; }

.catalog-chips {
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
  align-items: end;
}

.admin-filter {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 9rem;
}

.admin-filter-grow {
  flex: 1;
  min-width: 14rem;
}

.admin-filter input,
.admin-filter select {
  margin-top: 0;
  max-width: none;
  width: 100%;
}

.admin-crumb {
  margin: -0.4rem 0 1rem;
  font-size: 0.85rem;
}

.admin-overview-group {
  margin: 0 0 1.1rem;
}
.admin-overview-title {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.admin-cards {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-cards > li {
  min-width: 0;
  aspect-ratio: 1 / 1;
}
.admin-cards .admin-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.55rem 0.6rem;
  text-align: left;
}
.admin-cards .admin-card strong {
  font-size: 0.82rem;
  line-height: 1.15;
}
.admin-cards .admin-card span {
  font-size: 0.68rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1400px) {
  .admin-cards {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .admin-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .admin-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .admin-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}

.admin-card:hover {
  border-color: var(--accent);
  color: var(--text);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.65rem;
}
.stats-grid .span-2 {
  grid-column: span 2;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  background: #12160f;
  min-width: 0;
}
.stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.market-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.market-layout-single {
  grid-template-columns: 1fr;
}
@media (max-width: 900px) {
  .market-layout { grid-template-columns: 1fr; }
}
.market-tabs {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid #455540;
  padding-bottom: 0.35rem;
}
.market-tab {
  padding: 0.4rem 0.9rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 4px 4px 0 0;
  font-weight: 600;
}
.market-tab:hover { color: var(--text); }
.market-tab.is-on {
  color: var(--accent);
  background: rgba(212, 175, 55, 0.08);
  box-shadow: inset 0 -2px 0 var(--accent);
}
button.market-tab {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(11.5rem + 10px), calc(14rem + 10px));
  gap: 0.85rem;
  align-items: start;
}
.shop-main {
  min-width: 0;
}
.shop-checkout {
  position: sticky;
  top: 0.75rem;
  padding: 0.75rem 0.85rem 1rem;
}
.shop-checkout .panel-header {
  margin-bottom: 0.65rem;
}
.shop-checkout-empty {
  margin: 0;
}
.shop-checkout-preview {
  width: 4.75rem;
  height: 4.75rem;
  margin: 0 auto 0.65rem;
  border: 1px solid var(--border);
  background: #12160f;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.shop-checkout-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}
.shop-checkout-emoji,
.shop-checkout-fallback {
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
}
.shop-checkout-name {
  margin: 0 0 0.2rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  word-break: break-word;
}
.shop-checkout-qty {
  display: block;
  margin: 0.75rem 0 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.shop-checkout-qty input {
  width: 100%;
  max-width: none;
  margin-top: 0.3rem;
}
.shop-checkout-total {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.shop-checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.shop-checkout-actions button {
  margin: 0;
  width: 100%;
}
.shop-checkout-clear {
  background: #2a3524;
  color: var(--text);
  border: 1px solid var(--border);
}
.shop-checkout-clear:hover {
  filter: brightness(1.1);
}
.shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(4.15rem, 1fr));
  max-height: none;
  overflow: visible;
  gap: 0.45rem;
  padding-right: 0;
}
.shop-slot {
  cursor: pointer;
}
.shop-slot .inv-slot-img {
  width: 94%;
  height: 94%;
}
.shop-slot .inv-slot-emoji,
.shop-slot .inv-slot-fallback {
  font-size: 1.55rem;
}
.shop-slot.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.shop-slot.is-sold-out {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 820px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-checkout {
    position: static;
    order: -1;
  }
}
.market-table .market-buy-qty {
  width: 4.5rem;
  margin: 0;
}
.market-buy-form { margin: 0; }
.market-earn-preview {
  margin: 0.25rem 0 0;
  font-size: 0.92rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  align-items: center;
}
.market-suggest-btn {
  width: auto;
  max-width: none;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  margin: 0;
}
.market-intel-panel { min-width: 0; }
.market-intel-pick { display: block; margin-bottom: 0.75rem; }
.market-intel-stats {
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.35rem;
}
.market-intel-stats > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid #455540;
}
.market-intel-stats dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.market-intel-stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.market-intel-sub {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.market-sales-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.market-my-listings {
  grid-column: 1 / -1;
}
.market-trend { margin: 0 0 0.25rem; }

/* Site banner + news */
.site-banner {
  border-bottom: 1px solid #455540;
  background: #1a2218;
  color: var(--text);
}
.site-banner-warn { background: #2a1c14; border-color: #6a4030; }
.site-banner-event { background: #1a2428; border-color: #3a5560; }
.site-banner-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}
.site-banner-text { font-size: 0.9rem; line-height: 1.4; flex: 1; }
.site-banner-dismiss {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.1rem 0.45rem;
  background: transparent;
  border: 1px solid #455540;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
}
@keyframes nav-news-flash {
  0%, 100% { color: #e05555; }
  50% { color: #ffb0b0; }
}
#nav-news.is-news-flash {
  /* Prefer badge (.nav-news-badge); keep class for older caches */
}
#nav-settings.is-friend-flash {
  color: #e05555;
  animation: nav-news-flash 1s ease-in-out infinite;
}
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}
.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  border-bottom: none;
  font-size: 0.9rem;
}
.settings-tab:hover {
  color: var(--accent);
}
.settings-tab.is-on {
  color: var(--accent);
  border-color: var(--border);
  background: rgba(196, 163, 90, 0.1);
  font-weight: 600;
}
.admin-settings-panel {
  max-width: 40rem;
}
.admin-settings-sub {
  margin: 1.1rem 0 0.4rem;
  font-size: 1rem;
  color: var(--accent);
}
.settings-panel {
  max-width: 36rem;
}
.settings-combat-panel {
  max-width: 48rem;
}
.settings-ability-editor {
  margin-top: 0.75rem;
}
.settings-loadout-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.settings-loadout-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  border-radius: 7px;
  background: color-mix(in srgb, #1a2116 92%, #000);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.settings-loadout-tab:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 40%, var(--border));
}
.settings-loadout-tab.is-active {
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 55%, var(--border));
  background: color-mix(in srgb, var(--accent, #c4a06a) 14%, #1a2116);
  color: var(--text);
}
.settings-loadout-tab.is-in-use .settings-loadout-badge,
.settings-loadout-badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent, #c4a06a);
}
.settings-loadout-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.75rem;
  margin-bottom: 0.55rem;
}
.settings-loadout-name-label,
.settings-loadout-copy-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
}
.settings-loadout-name-label input,
.settings-loadout-copy-label select {
  min-width: 10rem;
}
.settings-ability-vis-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.1rem;
  cursor: pointer;
}
.settings-ability-vis {
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--accent, #c4a06a);
}
.settings-ability-slot.is-hidden-ability {
  opacity: 0.45;
}
.settings-ability-bar {
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.45rem;
  padding: 0.35rem 0;
  min-height: 0;
}
.settings-ability-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  cursor: grab;
}
.settings-ability-slot.is-dragging {
  opacity: 0.55;
}
.settings-ability-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 4.5rem;
  min-height: 4.35rem;
  padding: 0.35rem 0.25rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  border-radius: 8px;
  background: color-mix(in srgb, #1a2116 92%, #000);
  text-align: center;
  box-sizing: border-box;
}
.settings-ability-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
}
.settings-ability-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.settings-ability-name {
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-ability-meta {
  font-size: 0.58rem;
  line-height: 1.1;
}
.settings-ability-bar .combat-ability-shift-btn {
  display: inline-flex;
}
.settings-ability-status {
  margin: 0.55rem 0 0;
  min-height: 1.1rem;
}
.settings-subhead {
  margin: 1rem 0 0.45rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-home {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: stretch;
  margin-top: 0.85rem;
}
.dash-card {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}
.dash-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.dash-card-wide {
  grid-column: 1 / -1;
}
.daily-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.daily-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #2a3528) 80%, transparent);
}
.daily-row:last-child {
  border-bottom: 0;
}
.daily-row.is-claimed {
  opacity: 0.65;
}
.daily-icon {
  flex: 0 0 1.7rem;
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
}
.daily-icon-img {
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
  display: block;
}
.daily-name {
  margin: 0;
  font-weight: 600;
}
.daily-body p {
  margin: 0.15rem 0 0;
}
.daily-action button {
  white-space: nowrap;
}
.daily-status {
  font-size: 0.85rem;
}
.dash-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-feed li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid #455540;
}
.dash-feed-kind {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.dash-feed-title {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}
a.dash-feed-title:hover {
  color: var(--accent);
}
.dash-feed-icon {
  width: 1.25rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-feed-icon-img {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  display: block;
}
.dash-feed li.is-done .dash-feed-title {
  color: var(--accent);
}
.dash-hs-table {
  margin: 0;
}
.news-tag-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
}
.news-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--news-cat, var(--muted)) 82%, #fff);
  border: 1px solid color-mix(in srgb, var(--news-cat, #455540) 45%, transparent);
  background: color-mix(in srgb, var(--news-cat, transparent) 12%, transparent);
  border-radius: 999px;
  font-size: 0.85rem;
}
.news-tag::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--news-cat, var(--muted));
}
.news-tag.is-on,
.news-tag:hover {
  color: color-mix(in srgb, var(--news-cat, var(--accent)) 85%, #fff);
  border-color: color-mix(in srgb, var(--news-cat, var(--accent)) 55%, transparent);
  background: color-mix(in srgb, var(--news-cat, var(--accent)) 18%, transparent);
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.news-card {
  padding: 0.85rem 0;
  border-bottom: 1px solid #455540;
}
.news-card-top {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.news-card h2 {
  margin: 0;
  font-size: 1.1rem;
}
.news-card h2 a {
  color: var(--accent);
  text-decoration: none;
}
.news-pin {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0;
}
.news-tag-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--news-cat, #455540) 45%, transparent);
  background: color-mix(in srgb, var(--news-cat, #455540) 14%, transparent);
  color: color-mix(in srgb, var(--news-cat, var(--muted)) 82%, #fff);
  text-decoration: none;
}
a.news-tag-chip:hover {
  background: color-mix(in srgb, var(--news-cat, var(--accent)) 22%, transparent);
  filter: none;
}
.news-article-head h1 { margin-bottom: 0.35rem; }
.land-news {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.land-news a { color: var(--accent); text-decoration: none; }
.land-news a:hover { text-decoration: underline; }

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.activity-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #455540;
  align-items: start;
}
.activity-kind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding-top: 0.15rem;
}
.activity-summary {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}
.activity-body .muted { margin: 0.2rem 0 0; }
.mod-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}
.mod-inline input,
.mod-inline select {
  width: auto;
  min-width: 0;
  max-width: 8rem;
  margin: 0;
}
.mod-inline button {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}
.mod-table td {
  vertical-align: top;
}
.stats-shell {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: var(--panel);
  min-height: 360px;
  width: 100%;
  max-width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.stats-menu {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 0;
  border-right: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
}
.stats-menu-label {
  margin: 0 0.85rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats-tab {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.stats-tab:hover {
  background: rgba(255, 255, 255, 0.04);
}
.stats-tab.active {
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}
.stats-main {
  padding: 0.85rem 1rem 1.1rem;
  min-width: 0;
  max-width: none;
}
.stats-panel {
  margin: 0;
}
.stats-panel-head {
  margin: 0 0 0.75rem;
}
.stats-panel-head h2 {
  margin: 0;
  font-size: 1rem;
}
.stats-shell .stats-kv {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}
.stats-shell .stats-kv > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
  margin: 0;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.16);
  min-width: 0;
  grid-template-columns: unset;
}
.stats-shell .stats-kv > div.stats-kv-wide {
  grid-column: span 2;
}
.stats-shell .stats-kv dt {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.stats-shell .stats-kv dd {
  margin: 0;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.25;
}
.stats-shell .stats-kv dd .muted {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--muted);
}
.stats-shell .table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.stats-shell .stats-by-skill {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
}
.stats-dashboard > .stats-panel {
  margin: 0;
  min-width: 0;
}
@media (max-width: 1100px) {
  .stats-shell .stats-kv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .stats-shell {
    width: 100%;
    grid-template-columns: 1fr;
  }
  .stats-main {
    max-width: none;
  }
  .stats-shell .stats-kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-shell .stats-by-skill {
    grid-template-columns: 1fr;
  }
  .stats-menu {
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.55rem;
    gap: 0.25rem;
  }
  .stats-menu-label {
    width: 100%;
    margin: 0 0.25rem 0.25rem;
  }
  .stats-tab {
    width: auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    padding: 0.45rem 0.65rem;
  }
  .stats-tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
}
@media (max-width: 560px) {
  .stats-shell .stats-kv {
    grid-template-columns: 1fr;
  }
  .stats-shell .stats-kv > div.stats-kv-wide {
    grid-column: auto;
  }
}
.skill-tile.is-buffed .lvl-num {
  color: var(--accent);
}
.skill-tile .skill-buff-mark {
  margin-left: 0.1rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  vertical-align: super;
}

.buff-strip {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  border: 1px solid var(--border);
  background: #12160f;
}
.buff-strip[hidden] {
  display: none;
}
.buff-strip li {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.12rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 0.72rem;
}
.buff-strip .buff-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.inv-slot.is-empty-pad,
.inv-slot.is-empty {
  opacity: 0.45;
}
.inv-slot.is-food,
.inv-slot.is-potion {
  cursor: pointer;
}
.inv-slot.is-tool {
  cursor: pointer;
}
body.combat-running .inv-slot.is-food,
body.combat-running .inv-slot.is-potion {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.inv-slot.is-dragging {
  opacity: 0.45;
}
.inv-slot.is-drop-target {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.inv-full-modal .skill-guide-card {
  max-width: 22rem;
  text-align: center;
}
.tool-deg-panel {
  margin-bottom: 0.85rem;
}
.tool-deg-panel form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.broken-badge {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  font-size: 0.55rem;
  font-weight: 700;
  color: #f0c0a0;
  background: #4a2018;
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
  letter-spacing: 0.03em;
}
.stats-panel-skills {
  grid-column: auto;
  min-width: 0;
  overflow: auto;
}
.stats-panel-by-skill {
  grid-column: auto;
}
.stats-panel-countries {
  grid-column: auto;
}
.stats-panel-skills .table-wrap {
  max-height: 22rem;
  overflow: auto;
}
.stats-country-list li {
  align-items: center;
}
.stats-country-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.stats-country-flag {
  width: 1.25rem;
  height: auto;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.stats-country-unset {
  margin: 0.65rem 0 0;
}
.defaults-dashboard {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.2fr) minmax(0, 1.3fr);
  gap: 0.85rem;
  align-items: start;
}
.defaults-dashboard > .defaults-panel {
  margin: 0;
  min-width: 0;
}
.defaults-skill-grid {
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}
.defaults-item-list {
  max-height: 22rem;
  overflow: auto;
}
@media (max-width: 1100px) {
  .defaults-dashboard {
    grid-template-columns: 1fr 1fr;
  }
  .defaults-dashboard > .defaults-panel:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .defaults-dashboard {
    grid-template-columns: 1fr;
  }
}
.stats-kv {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.stats-kv > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: baseline;
  padding: 0.28rem 0;
  border-bottom: 1px solid #455540;
}
.stats-kv dt {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.stats-kv dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--accent);
}
.stats-kv-wide dd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  line-height: 1.2;
}
.stats-mini-table {
  margin-top: 0.65rem;
  max-height: 12rem;
  overflow: auto;
}
.stats-by-skill {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.stats-split {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-start;
}
.stats-split > div {
  flex: 0 1 14rem;
  min-width: 11rem;
  max-width: 18rem;
}
.stats-subhead {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stats-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #455540;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .stats-dashboard {
    grid-template-columns: 1fr 1fr;
  }
  .stats-panel-skills {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .stats-dashboard {
    grid-template-columns: 1fr;
  }
  .stats-panel-skills,
  .stats-panel-by-skill,
  .stats-panel-countries {
    grid-column: 1 / -1;
  }
  .stats-by-skill {
    grid-template-columns: 1fr;
  }
}

.player-title {
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 0.15rem;
}
#profile-modal-title {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
}
.hs-player .player-title,
.hs-popup-player .player-title {
  display: inline;
  margin-right: 0.35rem;
}
.ach-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.ach-nav {
  margin: 0;
  padding: 0.75rem;
  align-self: start;
  position: sticky;
  /* Scroll is inside main — sticky offset is relative to main, not the site header */
  top: 0.5rem;
}
.ach-nav-label {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ach-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ach-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.ach-nav-btn:hover {
  border-color: var(--border);
  background: rgba(196, 163, 90, 0.08);
}
.ach-nav-btn.is-on {
  border-color: var(--accent);
  background: rgba(196, 163, 90, 0.14);
  color: var(--accent);
}
.ach-nav-name {
  font-weight: 600;
  font-size: 0.9rem;
}
.ach-nav-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ach-nav-btn.is-on .ach-nav-count {
  color: var(--accent);
}
.ach-panels {
  min-width: 0;
  align-self: start;
}
.ach-section {
  margin: 0;
}
.ach-section[hidden] {
  display: none !important;
}
.ach-section .panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ach-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem 0;
  border-bottom: 1px solid #455540;
  opacity: 0.72;
}
.ach-row.is-unlocked {
  opacity: 1;
}
.ach-icon {
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  width: 1.6rem;
  flex: 0 0 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ach-icon img {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}
.ach-name {
  margin: 0;
  font-weight: 600;
}
.ach-title-reward {
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 0.35rem;
}
.ach-body .muted {
  margin: 0.2rem 0 0;
}
.ach-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.75rem;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.ach-progress {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  height: 0.35rem;
  background: #1a2214;
  border: 1px solid var(--border);
  overflow: hidden;
}
.ach-progress-bar {
  display: block;
  height: 100%;
  background: var(--accent);
}
.ach-progress-count {
  margin: 0;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ach-status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 0.2rem;
}
.ach-row.is-unlocked .ach-status {
  color: #6faf5a;
}
@media (max-width: 700px) {
  .ach-layout {
    grid-template-columns: 1fr;
  }
  .ach-nav {
    position: static;
  }
  .ach-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ach-nav-btn {
    width: auto;
  }
}

.mod-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.mod-card {
  margin: 0;
  padding: 0.85rem 1rem;
}

.mod-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  align-items: baseline;
  margin-bottom: 0.45rem;
}

.mod-name {
  font-size: 1.05rem;
  margin-right: 0.35rem;
}

.mod-reason {
  margin: 0 0 0.35rem;
}

.mod-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}

.mod-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.mod-form-label {
  flex: 0 0 6.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.mod-form input,
.mod-form select {
  font: inherit;
  color: var(--text);
  background: #12160f;
  border: 1px solid var(--border);
  padding: 0.3rem 0.45rem;
  min-width: 8rem;
}

.mod-form button {
  margin: 0;
}

.admin-card strong {
  display: block;
  color: var(--accent);
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.admin-card span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .admin-body {
    grid-template-columns: 1fr;
  }
  .admin-subnav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
    min-height: 0;
    padding-bottom: 0.65rem;
    gap: 0.25rem;
  }
  .admin-subnav-label { width: 100%; }
  .admin-sublink {
    border-left: none;
    border-bottom: 2px solid transparent;
  }
  .admin-sublink.is-on {
    border-left: none;
    border-bottom-color: var(--accent);
  }
  .admin-split {
    grid-template-columns: 1fr;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.65rem 0.85rem;
  align-items: end;
}

.form-grid label {
  margin: 0;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  max-width: none;
  width: 100%;
}

.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
.gift-target {
  border: 1px solid var(--border);
  padding: 0.65rem 0.75rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
}
.gift-target legend {
  padding: 0 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.form-actions button { margin-top: 0; }

/* Compact skill-action create form */
.skill-action-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 56rem;
}

.skill-action-form label {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.skill-action-form input,
.skill-action-form select {
  max-width: none;
  width: 100%;
  background: #12160f;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  font: inherit;
}

.catalog-combo {
  position: relative;
  width: 100%;
}
/* Hide native select completely — searchable input is the only UI */
.catalog-combo > select,
select.catalog-combo-native,
.skill-action-form select.js-catalog-combo,
.skill-action-form .catalog-combo select {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
}
.catalog-combo-input {
  width: 100%;
  background: #12160f;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.35rem 0.45rem;
  font: inherit;
  box-sizing: border-box;
}
.catalog-combo-input:focus {
  outline: 1px solid rgba(196, 163, 90, 0.55);
  border-color: rgba(196, 163, 90, 0.55);
}
.catalog-combo-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: 0.2rem 0;
  list-style: none;
  background: #161c12;
  border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.catalog-combo-option {
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalog-combo-option:hover,
.catalog-combo-option.is-active {
  background: rgba(196, 163, 90, 0.16);
}
.catalog-combo-option.is-selected {
  color: #e6d39a;
}
.catalog-combo-empty {
  padding: 0.4rem 0.5rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.saf-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
  align-items: start;
}
.saf-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.saf-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  gap: 0.4rem;
  align-items: end;
}
.saf-chance {
  max-width: 5.5rem;
}
.saf-two-col .saf-hint {
  margin: 0.1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.sa-loc-picker {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.2rem;
  max-width: 28rem;
}
.sa-loc-picker-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sa-loc-picker-bar .sa-loc-filter {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.45rem !important;
  font-size: 0.85rem;
  width: auto !important;
}
.sa-loc-list {
  max-height: min(16rem, 40vh);
  overflow: auto;
  background: #12160f;
  border: 1px solid var(--border);
}
.sa-loc-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem;
  margin: 0 !important;
  padding: 0.28rem 0.45rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.sa-loc-row:last-child {
  border-bottom: none;
}
.sa-loc-row.is-on {
  background: rgba(196, 160, 80, 0.1);
}
.sa-loc-row.is-filtered-out {
  display: none !important;
}
.sa-loc-row input[type="checkbox"] {
  width: auto !important;
  margin: 0;
  flex: 0 0 auto;
}
.sa-loc-hint {
  margin: 0.15rem 0 0;
}

@media (max-width: 900px) {
  .saf-two-col {
    grid-template-columns: 1fr;
  }
  .sa-loc-picker {
    max-width: none;
  }
}

.saf-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.55rem 0.75rem;
  align-items: end;
}

/* .saf-row/.field-block set display; keep [hidden] effective for mount/cape blocks */
.skill-action-form [data-mount-benefits][hidden],
.skill-action-form [data-mount-skilling][hidden] {
  display: none !important;
}

.event-edit-form {
  max-width: none;
}

.event-meta-row {
  grid-template-columns: minmax(7rem, 1.35fr) repeat(2, minmax(8.5rem, 1fr)) repeat(2, minmax(4.75rem, 0.55fr));
  width: 100%;
}

.event-meta-row .event-name-field {
  min-width: 0;
}

.event-edit-actions {
  margin-top: 0.1rem;
}

.event-edit-actions button {
  width: auto;
  max-width: none;
  min-width: 5rem;
  padding: 0.35rem 0.85rem;
}

@media (max-width: 1000px) {
  .event-meta-row {
    grid-template-columns: 1fr 1fr;
  }
  .event-meta-row .event-name-field {
    grid-column: 1 / -1;
  }
}

.saf-row-tight {
  grid-template-columns: minmax(10rem, 14rem) minmax(12rem, 1fr);
  max-width: 36rem;
}

.saf-grow {
  grid-column: span 2;
}

.saf-compact {
  max-width: 8.5rem;
}

.hazard-table-wrap {
  max-width: 36rem;
  margin: 0.35rem 0 0.25rem;
}

.hazard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.hazard-table th,
.hazard-table td {
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.hazard-table thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.hazard-table .col-hazard-chance {
  width: 6.5rem;
  white-space: nowrap;
}

.hazard-table select,
.hazard-table input[type="number"] {
  width: 100%;
  max-width: none;
  margin: 0;
}

.hazard-table tbody tr:last-child td {
  border-bottom: none;
}

.saf-edit-top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem 1.1rem;
  max-width: 36rem;
}

.saf-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
}

.skill-action-form .check-inline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  color: var(--text);
  white-space: nowrap;
}

.skill-action-form .check-inline input[type="checkbox"] {
  width: auto;
  max-width: none;
  margin: 0;
  flex-shrink: 0;
}

.saf-bonus-drops label:not(.saf-grow) {
  max-width: 6.5rem;
}

.saf-full {
  width: 100%;
}

.saf-hint {
  margin: -0.25rem 0 0;
}

.checkbox-list-compact {
  max-height: 6.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.15rem 0.75rem;
}

@media (max-width: 700px) {
  .saf-grow {
    grid-column: span 1;
  }
  .skill-action-form {
    max-width: none;
  }
}

.field-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.45rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.data-table tr:hover td {
  background: rgba(0, 0, 0, 0.15);
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  color: var(--muted);
}

.badge.on {
  border-color: #4e6e3c;
  color: #b7d59a;
}

.badge.off {
  border-color: #5a3a3a;
  color: #c49a9a;
}

.badge.skill {
  color: var(--accent);
  border-color: #5a4a2a;
}

.catalog-toolbar {
  padding: 0.75rem 0.9rem;
}

.catalog-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
}

.catalog-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.catalog-add-head strong {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.catalog-add-head button {
  margin: 0;
  padding: 0.32rem 0.85rem;
}

.catalog-add-grid {
  display: grid;
  grid-template-columns: minmax(9rem, 1.5fr) 4.2rem 7rem auto minmax(12rem, 1.4fr);
  gap: 0.45rem 0.55rem;
  align-items: end;
}

.catalog-add-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.catalog-add-field > span {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.catalog-add-field input,
.catalog-add-field select {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.catalog-add-flags .catalog-add-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: center;
  min-height: 2rem;
}

.catalog-add-field-image .catalog-image-picker {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.catalog-add-field-image .catalog-image-folder {
  width: 6rem;
  flex: 0 0 6rem;
}

.catalog-add-field-image .catalog-image-file {
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-image-picker {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
}

.catalog-image-picker.is-compact {
  width: 100%;
}

.catalog-image-folder {
  flex: 0 0 4.6rem;
  width: 4.6rem;
  min-width: 0;
}

.catalog-image-file {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
}

.catalog-add-form button {
  margin: 0;
}

@media (max-width: 1100px) {
  .catalog-add-grid {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-add-field-name,
  .catalog-add-field-image {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .catalog-add-grid {
    grid-template-columns: 1fr;
  }
  .catalog-add-field-name,
  .catalog-add-field-image {
    grid-column: auto;
  }
}

.catalog-table {
  table-layout: fixed;
  width: 100%;
}

.catalog-table td,
.catalog-table th {
  padding: 0.35rem 0.4rem;
  vertical-align: middle;
  overflow: hidden;
}

.catalog-table .col-id {
  width: 3.9rem;
  padding-left: 0.3rem;
  padding-right: 0.15rem;
}
.catalog-table .col-img {
  width: 2rem;
  padding-left: 0.15rem;
  padding-right: 0.25rem;
}
.catalog-table .col-name {
  width: 9rem;
  max-width: 9rem;
}
.catalog-table .col-gold {
  width: 6.2rem;
  min-width: 6.2rem;
}
.catalog-table .col-cat { width: 7rem; }
.catalog-table .col-trade,
.catalog-table .col-stack,
.catalog-table .col-event {
  width: 2rem;
  min-width: 2rem;
  padding-left: 0.12rem;
  padding-right: 0.12rem;
  text-align: center;
}
.catalog-table .col-image-file {
  width: 22rem;
  min-width: 20rem;
  overflow: visible;
}
.catalog-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 0.75rem;
}
.catalog-bulk-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
.catalog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.65rem;
}
.catalog-tools-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--accent);
}
.catalog-tools-count {
  white-space: nowrap;
}
.catalog-tools-search {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 22rem;
  margin: 0;
  padding: 0.28rem 0.45rem;
  font-size: 0.85rem;
}
.catalog-tools select {
  margin: 0;
  width: auto;
  min-width: 7rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.85rem;
}
.catalog-tools-select {
  white-space: nowrap;
}
.catalog-tools-actions {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: auto;
}
.catalog-tools-actions button {
  margin: 0;
  padding: 0.28rem 0.65rem;
  font-size: 0.82rem;
}
.catalog-id-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
  max-width: 100%;
}
.catalog-id-pick code {
  font-size: 0.78em;
  line-height: 1.1;
}
.catalog-check { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }

/* --- Bank page --- */
.bank-page {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: calc(100dvh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  min-height: 18rem;
  overflow: hidden;
}
.bank-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin: 0;
  flex: 0 0 auto;
}
.bank-hero h1 {
  margin: 0;
}
.bank-cap {
  min-width: 9rem;
  text-align: right;
}
.bank-cap-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.bank-cap-label strong {
  color: var(--accent);
  font-size: 1.1rem;
}
.bank-cap-tag {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border: 1px solid rgba(196, 163, 90, 0.45);
  color: var(--accent);
}
.bank-cap-tag.is-free {
  border-color: var(--border);
  color: var(--muted);
}
.bank-cap-bar {
  margin-top: 0.3rem;
  height: 0.35rem;
  background: #12160f;
  border: 1px solid var(--border);
  overflow: hidden;
}
.bank-cap-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6b8f4e, var(--accent));
}
.bank-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
  gap: 0.75rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.bank-mobile-sheet-tabs {
  display: none;
  flex: 0 0 auto;
  gap: 0;
  margin: 0 0 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.bank-mobile-sheet-tab {
  flex: 1 1 50%;
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--sidebar) 92%, #000);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
}
.bank-mobile-sheet-tab + .bank-mobile-sheet-tab {
  border-left: 1px solid var(--border);
}
.bank-mobile-sheet-tab.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--sidebar));
  color: var(--accent);
}
.bank-vault-panel,
.bank-deposit-panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.bank-vault-panel .panel-header,
.bank-deposit-panel .panel-header {
  align-items: baseline;
  flex: 0 0 auto;
  margin-bottom: 0.45rem;
}
.bank-vault-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}
.bank-vault-header h2 {
  margin: 0;
  flex: 0 0 auto;
}
.bank-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}
.bank-tab {
  appearance: none;
  border: 1px solid rgba(120, 140, 90, 0.35);
  background: #1a2214;
  color: var(--muted, #a8b090);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  max-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bank-tab:hover {
  border-color: rgba(196, 163, 90, 0.45);
  color: var(--text, #e8ecd8);
}
.bank-tab.is-active {
  border-color: rgba(196, 163, 90, 0.7);
  background: #2a3220;
  color: #f0e6c8;
}
.bank-tab.is-drop-target {
  border-color: #c4a35a;
  box-shadow: 0 0 0 1px rgba(196, 163, 90, 0.45);
  color: #ffe6a0;
}
.bank-tab-add {
  min-width: 1.6rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-weight: 600;
  color: #c4a35a;
}
.bank-vault-hint {
  flex: 0 0 auto;
  margin-left: auto;
}
.bank-header-toggles {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  z-index: 2;
}
.bank-ph-toggle {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid rgba(120, 140, 90, 0.4);
  background: #1a2214;
  color: var(--muted, #a8b090);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.bank-ph-toggle:hover {
  border-color: rgba(196, 163, 90, 0.5);
  color: var(--text, #e8ecd8);
}
.bank-ph-toggle.is-on {
  border-color: rgba(196, 163, 90, 0.75);
  background: #2a3220;
  color: #f0e6c8;
}
.inv-slot.is-noted {
  box-shadow: inset 0 0 0 1px rgba(180, 160, 90, 0.55);
}
.inv-slot.is-noted::after {
  content: "N";
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(240, 220, 140, 0.9);
  pointer-events: none;
  text-shadow: 0 0 2px #0a0c08;
}
.bank-bag-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.bank-bag-header h2 {
  margin: 0;
  flex: 0 0 auto;
}
.bank-bag-hint {
  flex: 1 1 auto;
  min-width: 0;
}
.bank-deposit-all {
  appearance: none;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid rgba(196, 163, 90, 0.55);
  background: #2a3220;
  color: #f0e6c8;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.22rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
}
.bank-deposit-all:hover {
  border-color: rgba(196, 163, 90, 0.85);
  color: #ffe6a0;
}
.bank-deposit-all:disabled {
  opacity: 0.55;
  cursor: default;
}
.bank-slot.is-placeholder {
  opacity: 0.45;
  filter: grayscale(0.35);
}
.bank-slot.is-placeholder .bank-slot-qty.is-ph {
  color: #a89060;
}
.bank-slot.is-dragging {
  opacity: 0.45;
}
.bank-slot.is-drop-target {
  border-color: rgba(196, 163, 90, 0.75);
  background: #1e2818;
}
.bank-grid {
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  display: grid;
  grid-template-columns: repeat(var(--bank-cols, 10), minmax(3.25rem, 1fr));
  grid-auto-rows: 3.6rem;
  gap: 0.3rem;
  background: #12160f;
  border: 1px solid var(--border);
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow: auto;
}
.bank-slot {
  position: relative;
  width: 100%;
  height: 3.6rem;
  min-height: 3.6rem;
  max-height: 3.6rem;
  border: 1px solid var(--border);
  background: #1a2214;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}
.bank-slot.is-empty {
  background: #141a10;
  opacity: 0.7;
}
.bank-slot:not(.is-empty):hover {
  border-color: rgba(196, 163, 90, 0.55);
}
.bank-slot-img {
  width: 62%;
  height: 62%;
  max-width: 2.8rem;
  max-height: 2.8rem;
  object-fit: contain;
  pointer-events: none;
}
.bank-slot-emoji,
.bank-slot-fallback {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
}
.bank-slot-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.15rem 0.2rem;
  font-size: 0.58rem;
  line-height: 1.1;
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
}
.bank-slot:hover .bank-slot-name {
  opacity: 1;
}
.bank-slot-qty {
  position: absolute;
  right: 0.15rem;
  top: 0.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.bank-slot-actions {
  display: none;
}
.bank-bag-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  align-content: start;
  padding: 0.2rem;
  background: #12160f;
  border: 1px solid var(--border);
  gap: 0.3rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bank-bag-grid .inv-slot {
  cursor: context-menu;
}
.bank-slot[data-key] {
  cursor: context-menu;
}
.bank-qty-card {
  max-width: 18rem;
}
.bank-qty-form label {
  display: block;
  margin-bottom: 0.75rem;
}
.bank-qty-form input[type="number"],
.bank-qty-form input[type="text"] {
  width: 100%;
  margin-top: 0.35rem;
}
.bank-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.bank-tab-delete {
  margin-left: auto;
  border-color: rgba(180, 70, 60, 0.55);
  color: #e8a090;
  background: #2a1814;
}
.bank-tab-delete:hover {
  border-color: rgba(220, 90, 70, 0.75);
  color: #ffc8b8;
}
.bank-popup-body .bank-tab-modal {
  z-index: 2100;
}
.bank-tab.is-main {
  cursor: default;
  user-select: none;
}
.bank-tab:not(.is-main):not(.bank-tab-add) {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.bank-tab.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.bank-deposit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.bank-deposit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  background: #12160f;
  flex: 0 0 auto;
}
.bank-deposit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}
.bank-deposit-item strong {
  display: block;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-deposit-icon {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  flex: 0 0 auto;
}
.bank-deposit-icon.emoji,
.bank-deposit-icon.fallback {
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--muted);
  border: 1px solid var(--border);
  background: #1a2214;
}
.bank-deposit-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.bank-deposit-actions form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.bank-deposit-qty input[type="number"] {
  width: 3.2rem;
  margin: 0;
  padding: 0.2rem 0.3rem;
  font-size: 0.78rem;
}
.bank-deposit-actions button {
  margin: 0;
  padding: 0.22rem 0.45rem;
  font-size: 0.75rem;
}
.bank-deposit-empty {
  margin: 0.5rem 0 0;
}
@media (max-width: 980px) {
  .bank-layout {
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem);
  }
}
@media (max-width: 860px) {
  .bank-page {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .bank-layout {
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    overflow: visible;
  }
  .bank-vault-panel,
  .bank-deposit-panel {
    height: auto;
    overflow: visible;
  }
  .bank-grid {
    --bank-cols: 8;
    flex: 0 0 auto;
    max-height: min(55vh, 28rem);
    overflow: auto;
  }
  .bank-bag-grid {
    max-height: min(50vh, 28rem);
    flex: 0 0 auto;
  }
  .bank-cap {
    text-align: left;
    width: 100%;
  }
}

/*
 * Bank popup overrides MUST come after .bank-page / .bank-grid / .bank-bag-grid.
 * .bank-page sets height: calc(100dvh - …) which otherwise blows past the modal
 * and clips the Bag with no working inner scroll.
 */
.bank-popup-page.bank-page {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  gap: 0;
  overflow: hidden;
}
.bank-popup-page .bank-layout {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  /* 5×3rem slots + gaps + padding — keep 5 cols so bag stays 8 rows */
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 20rem);
  overflow: hidden;
}
.bank-popup-page .bank-vault-panel,
.bank-popup-page .bank-deposit-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.bank-popup-page .bank-grid {
  --bank-slot: 3rem;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, var(--bank-slot));
  grid-auto-rows: var(--bank-slot);
  justify-content: start;
  align-content: start;
  align-items: start;
  overflow-x: hidden;
  overflow-y: auto;
}
.bank-popup-page .bank-slot {
  width: var(--bank-slot);
  max-width: var(--bank-slot);
  height: var(--bank-slot);
  min-height: var(--bank-slot);
  max-height: var(--bank-slot);
  aspect-ratio: 1 / 1;
  align-self: start;
}
.bank-popup-page .bank-bag-grid {
  --bank-slot: 3rem;
  flex: 1 1 auto;
  min-height: 0;
  /* Same 5-col bag as sidebar inventory — fixed tracks, never 1fr-stretch */
  grid-template-columns: repeat(5, var(--bank-slot));
  grid-auto-rows: var(--bank-slot);
  justify-content: start;
  align-content: start;
  align-items: start;
  overflow-x: hidden;
  /* Popup height sized for 8 rows — no Bag scrollbar */
  overflow-y: hidden;
}
  .bank-popup-page .bank-bag-grid .inv-slot {
  width: var(--bank-slot);
  max-width: var(--bank-slot);
  height: var(--bank-slot);
  min-height: var(--bank-slot);
  max-height: var(--bank-slot);
  aspect-ratio: 1 / 1;
  align-self: start;
}
@media (max-width: 1024px) {
  .bank-popup-page .bank-mobile-sheet-tabs {
    display: flex;
  }
  .bank-popup-page[data-bank-mobile-view="vault"] .bank-deposit-panel {
    display: none !important;
  }
  .bank-popup-page[data-bank-mobile-view="bag"] .bank-vault-panel {
    display: none !important;
  }
  .bank-popup-page .bank-layout {
    grid-template-columns: 1fr;
  }
  .bank-popup-page .bank-vault-panel,
  .bank-popup-page .bank-deposit-panel {
    height: 100%;
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .bank-popup-page .bank-mobile-sheet-tabs {
    display: none;
  }
  .bank-popup-page .bank-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .bank-popup-page .bank-vault-panel,
  .bank-popup-page .bank-deposit-panel {
    display: flex !important;
  }
}
@media (max-width: 860px) {
  .bank-popup-page.bank-page {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .bank-popup-page .bank-layout {
    grid-template-columns: 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .bank-popup-page .bank-vault-panel,
  .bank-popup-page .bank-deposit-panel {
    height: auto;
    max-height: min(40vh, 18rem);
    overflow: hidden;
  }
  .bank-popup-page .bank-grid,
  .bank-popup-page .bank-bag-grid {
    flex: 1 1 auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
}


.users-roles-form {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
}
.users-roles-checks {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem 0.45rem;
  align-items: center;
}
.users-roles-checks .check-inline {
  font-size: 0.72rem;
  white-space: nowrap;
  margin: 0;
  gap: 0.2rem;
}

.users-table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
.users-table th,
.users-table td {
  vertical-align: middle;
  white-space: nowrap;
  padding: 0.35rem 0.5rem;
}
.users-table .col-id {
  width: 2.5rem;
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.users-table .col-user {
  white-space: nowrap;
}
.users-table .col-user .tiny {
  margin-left: 0.35rem;
}
.users-table .roles-group {
  text-align: center;
  border-bottom: none;
}
.users-table .users-role-subhead th {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 0.2rem 0.35rem 0.4rem;
  text-align: center;
  border-top: none;
}
.users-table .role-sub {
  min-width: 3.2rem;
}
.users-table .col-role-check {
  text-align: center;
  padding: 0.3rem 0.35rem;
  width: 1%;
}
.users-table .col-role-check input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}
.users-table .col-save {
  width: 1%;
  padding-left: 0.35rem;
}
.users-table .col-save button {
  margin: 0;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
}
.users-table .col-tools .reset-actions {
  flex-wrap: nowrap;
  gap: 0.25rem;
}
.users-table .col-tools .reset-actions button {
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
}
.users-table .users-roles-form button {
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.users-panel-header {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
}
.users-panel-header h2 {
  margin: 0;
  flex: 0 0 auto;
}
.users-filter-q {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 22rem;
  margin: 0;
  padding: 0.32rem 0.55rem;
  font-size: 0.85rem;
}
.users-panel-header #users-total-label {
  flex: 0 0 auto;
  margin-left: auto;
}
.users-reset-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.users-reset-all button {
  flex: 0 0 auto;
}
.users-reset-all .muted {
  flex: 1 1 14rem;
}


.catalog-table input,
.catalog-table select {
  margin: 0;
  max-width: none;
  width: 100%;
  padding: 0.28rem 0.35rem;
  font-size: 0.82rem;
}

.catalog-table .catalog-image-picker {
  width: 100%;
  min-width: 0;
}

.catalog-table .catalog-image-picker select {
  width: auto;
  max-width: 100%;
  padding: 0.22rem 0.28rem;
  font-size: 0.76rem;
}

.catalog-table .catalog-image-folder {
  flex: 0 0 4.8rem;
  width: 4.8rem;
  max-width: 4.8rem;
}

.catalog-table .catalog-image-file {
  flex: 1 1 14rem;
  min-width: 13rem;
  max-width: none;
  width: auto;
}

.catalog-table .col-name input {
  width: 100%;
  min-width: 0;
}

.catalog-table .col-gold input {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.catalog-table .col-trade input,
.catalog-table .col-stack input,
.catalog-table .col-event input,
.catalog-table .col-id input[type="checkbox"] {
  width: auto;
  max-width: none;
}

.catalog-table button {
  margin: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.catalog-thumb {
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--border);
  background: #12160f;
  display: block;
}

.catalog-thumb-empty {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--border);
  background: #12160f;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.catalog-thumb[hidden],
.catalog-thumb-empty[hidden] {
  display: none !important;
}

.monster-image-row {
  align-items: flex-end;
  gap: 0.65rem;
}
.monster-image-preview {
  flex: 0 0 auto;
  margin-bottom: 0.15rem;
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  flex-shrink: 0;
}
.monster-image-preview .catalog-thumb,
.monster-image-preview .catalog-thumb-empty {
  width: 5.5rem;
  height: 5.5rem;
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
}
.monster-image-preview .catalog-thumb[hidden],
.monster-image-preview .catalog-thumb-empty[hidden] {
  display: none !important;
}

.monster-form-grid {
  display: grid;
  gap: 0.5rem 0.65rem;
  align-items: end;
}
.monster-form-grid > label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  min-width: 0;
}
.monster-form-grid > label > input,
.monster-form-grid > label > select {
  width: 100%;
}
.monster-form-grid > .span-2 {
  grid-column: span 2;
}
.monster-form-grid > .span-all {
  grid-column: 1 / -1;
}
.monster-form-hint {
  margin: 0.45rem 0 0;
}
.monster-combat-grid input.is-autofill {
  opacity: 0.92;
  background: color-mix(in srgb, var(--panel, #1a2016) 88%, #d4b56a 12%);
}
#monster-boss-hp-hint {
  display: block;
  margin-top: 0.25rem;
  color: #d4b56a;
}

.monster-basics-grid {
  grid-template-columns: minmax(6.5rem, 0.55fr) minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}
.monster-basics-visual {
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}
.monster-basics-visual .monster-image-preview {
  margin: 0;
  align-self: stretch;
  width: 100%;
  max-width: 7.5rem;
  aspect-ratio: 1;
  height: auto;
  min-height: 5.5rem;
}
.monster-basics-visual .monster-image-preview .catalog-thumb,
.monster-basics-visual .monster-image-preview .catalog-thumb-empty {
  width: 100%;
  height: 100%;
}
.monster-basics-image {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.monster-basics-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  min-height: 2.2rem;
  padding-bottom: 0.1rem;
}
.monster-basics-flags .check-inline {
  margin: 0;
  white-space: nowrap;
}

.monster-combat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.monster-combat-grid > .span-all-sm {
  grid-column: span 1;
}

.monster-boss-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.55rem;
}
.monster-boss-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.35rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
.monster-boss-phases-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.boss-phase-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}

.boss-phase-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: end;
}

.boss-phase-chat {
  display: block;
  width: 100%;
}

.boss-phase-chat input {
  width: 100%;
}

.phase-specials-block {
  margin: 0.15rem 0 0.25rem 0.35rem;
  padding: 0.45rem 0.55rem;
  border-left: 2px solid rgba(212, 175, 88, 0.35);
  background: rgba(0, 0, 0, 0.12);
}

.boss-specials-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.boss-special-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: end;
}

#monster-accordion .quest-acc-body {
  padding-top: 0.7rem;
}
#monster-accordion .checkbox-list-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem 0.55rem;
}

@media (max-width: 900px) {
  .monster-basics-grid,
  .monster-combat-grid,
  .monster-boss-grid {
    grid-template-columns: 1fr 1fr;
  }
  .monster-basics-visual {
    grid-row: auto;
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: end;
  }
  .monster-basics-visual .monster-basics-image {
    flex: 1;
  }
  .monster-form-grid > .span-2,
  .monster-form-grid > .span-all {
    grid-column: 1 / -1;
  }
  #monster-accordion .checkbox-list-compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .monster-basics-grid,
  .monster-combat-grid,
  .monster-boss-grid {
    grid-template-columns: 1fr;
  }
  .monster-basics-visual {
    flex-direction: column;
    align-items: stretch;
  }
  #monster-accordion .checkbox-list-compact {
    grid-template-columns: 1fr;
  }
}
.catalog-item-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}

.catalog-item-basics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.catalog-item-basics input[name="name"] {
  min-width: 10rem;
  max-width: 16rem;
  width: auto;
  margin: 0;
}

.catalog-item-basics input[name="gold_value"] {
  width: 4.5rem;
  max-width: 4.5rem;
  margin: 0;
}

.catalog-item-basics select[name="category"] {
  width: 8rem;
  max-width: 8rem;
  margin: 0;
}

.catalog-item-basics button {
  margin: 0;
}

.catalog-item-image {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  background: #12160f;
}

.catalog-item-preview {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.catalog-item-preview img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.catalog-item-path {
  display: block;
  font-size: 0.78rem;
  color: var(--accent);
  word-break: break-all;
  white-space: normal;
  line-height: 1.3;
}

.catalog-item-image label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.catalog-item-image select,
.catalog-item-image input[type="file"],
.catalog-item-image input[name="image_subdir"] {
  max-width: none;
  width: 100%;
  margin-top: 0.2rem;
}

.catalog-item-upload {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 0.45rem;
}

@media (max-width: 900px) {
  .catalog-item-upload {
    grid-template-columns: 1fr;
  }
}

.skill-actions-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.skill-actions-list {
  padding: 0.75rem;
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 5.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.monster-list-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.45rem;
}

.monster-list-tools {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  min-width: 0;
}

.monster-list-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.45rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.25;
  color: #f3ebd2;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(212, 175, 88, 0.45);
  border-radius: 4px;
}

.monster-list-search::placeholder {
  color: rgba(232, 220, 180, 0.72);
  opacity: 1;
}

.monster-list-search:focus {
  outline: none;
  border-color: rgba(232, 200, 100, 0.85);
  background: rgba(0, 0, 0, 0.45);
}

.monster-list-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
}

.monster-list-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 2rem;
  margin: 0;
  padding: 0.4rem 0.35rem;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 88, 0.4);
  background: rgba(0, 0, 0, 0.28);
  color: #f0e6c8;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.monster-list-btn:hover {
  border-color: rgba(212, 175, 88, 0.7);
  color: #fff8e4;
}

.monster-list-btn.is-danger {
  border-color: rgba(180, 60, 60, 0.65);
  background: #8a2f2f;
  color: #fff;
}

.monster-list-btn.is-danger:hover {
  background: #a03939;
  border-color: rgba(220, 90, 90, 0.8);
  color: #fff;
}

.monster-list-btn.is-add {
  border-color: #b8923a;
  background: linear-gradient(180deg, #e8d090 0%, #c9a84a 100%);
  color: #1a1610;
}

.monster-list-btn.is-add:hover {
  filter: brightness(1.06);
  color: #1a1610;
}

/* Only 1–2 action buttons: still share the row evenly */
.monster-list-actions:has(> :nth-child(1):last-child) {
  grid-template-columns: 1fr;
}
.monster-list-actions:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monster-list-toolbar,
.monster-list-bulk {
  display: none;
}

.monster-list-tab {
  appearance: none;
  border: 1px solid rgba(212, 175, 88, 0.35);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(232, 220, 180, 0.78);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}

.monster-list-tab:hover {
  color: #f0e6c8;
  border-color: rgba(212, 175, 88, 0.55);
}

.monster-list-tab.is-on {
  color: #1a1610;
  background: linear-gradient(180deg, #e8d090 0%, #c9a84a 100%);
  border-color: #b8923a;
  font-weight: 600;
}

.reports-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.85rem;
  position: relative;
  z-index: 5;
}
.reports-page-head h1 {
  margin: 0;
}
.reports-page-tabs {
  margin: 0;
}
.reports-sync-form {
  margin: 0;
}
.reports-sync-tab {
  cursor: pointer;
  font: inherit;
}
.reports-sync-tab:hover {
  color: #f0e6c8;
  border-color: rgba(212, 175, 88, 0.55);
}

.skill-actions-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.skill-actions-list .skill-actions-head-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  width: 100%;
}

.skill-actions-list .skill-actions-head-row .skill-actions-add {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  align-self: auto !important;
  margin: 0 !important;
}

.skill-actions-list .skill-actions-head-row button.skill-actions-reset {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0.28rem 0.5rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.skill-actions-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
  color: #1a1508;
  background: var(--accent);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.28rem 0.55rem;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.skill-actions-head {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.skill-actions-head .skill-actions-add {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.skill-actions-bulk-del {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  align-self: stretch;
}

.skill-actions-add:hover {
  filter: brightness(1.08);
  color: #1a1508;
}

.skill-actions-tools {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.skill-actions-tools-row {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
}

.skill-actions-tools select {
  flex: 0 1 7.5rem;
  width: auto;
  min-width: 0;
  max-width: 9rem;
  margin: 0;
  font-size: 0.78rem;
  padding: 0.26rem 0.35rem;
}

.skill-actions-tools input[type="search"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  font-size: 0.78rem;
  padding: 0.26rem 0.35rem;
}

.skill-actions-list button.skill-actions-reset {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.28rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
}

.skill-actions-list button.skill-actions-reset:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  filter: none;
  background: transparent;
}

.sa-check-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.1rem 0.15rem;
  cursor: pointer;
}

.sa-check-all input {
  width: auto !important;
  max-width: none;
  margin: 0;
  accent-color: var(--accent);
}

.skill-actions-count {
  margin: 0 0 0.35rem;
}

.skill-actions-tools-row .skill-actions-count {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}

.skill-actions-items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--border);
  background: #12160f;
}

.sa-item {
  border-bottom: 1px solid var(--border);
}

.sa-item:last-child {
  border-bottom: none;
}

.sa-item-compact {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-left: 0.2rem;
}

.sa-item-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.15rem 0.2rem;
  cursor: pointer;
}

.sa-item-check input {
  width: auto;
  max-width: none;
  margin: 0;
  accent-color: var(--accent);
}

.sa-item-compact > a {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  grid-template-columns: none;
  padding: 0.22rem 0.4rem 0.22rem 0.15rem;
}

.sa-item-compact > a:has(.sa-item-lvl) {
  grid-template-columns: none;
}

.sa-item-main {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

.sa-item-main .sa-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-item-main .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sa-item a {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  padding: 0.28rem 0.4rem;
  text-decoration: none;
  color: var(--text);
}

.sa-item a:has(.sa-item-lvl) {
  grid-template-columns: 1.35rem 1.6rem minmax(0, 1fr);
}

.sa-item a.sa-item-link-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.12rem;
  align-items: start;
  padding: 0.4rem 0.5rem;
}

.sa-item a.sa-item-link-stack .sa-item-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

.sa-item a.sa-item-link-stack .muted {
  display: block;
}

.sa-item a:hover {
  background: rgba(196, 163, 90, 0.08);
}

.sa-item.is-selected a {
  background: rgba(196, 163, 90, 0.16);
  border-left: 2px solid var(--accent);
}

.sa-item.is-selected.sa-item-compact {
  background: rgba(196, 163, 90, 0.16);
  border-left: 2px solid var(--accent);
}

.sa-item.is-selected.sa-item-compact > a {
  background: transparent;
  border-left: 0;
  padding-left: calc(0.4rem - 2px);
}

.sa-item.is-off a {
  opacity: 0.55;
}

.sa-item-skill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
}

.sa-skill-icon {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
  display: block;
}

.sa-skill-emoji {
  font-size: 0.95rem;
  line-height: 1;
}

.sa-skill-fallback {
  font-size: 0.58rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.sa-item-lvl {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}

.sa-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sa-item-meta {
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-preview-box {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: #12160f;
  margin-bottom: 0.1rem;
}

.quest-edit-split {
  align-items: start;
}

.quest-edit-main {
  min-width: 0;
}

.quest-edit-main > h1 {
  margin-top: 0;
}

.quest-accordion,
.quest-accordion-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quest-acc {
  background: var(--panel);
  border: 1px solid var(--border);
  margin: 0;
}

.quest-acc > summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.quest-acc > summary::-webkit-details-marker {
  display: none;
}

.quest-acc[open] > summary {
  border-bottom: 1px solid var(--border);
}

.quest-acc-num {
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--muted);
}

.quest-acc.is-done > summary .quest-acc-num {
  border-color: var(--accent);
  color: var(--accent);
}

.quest-acc-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.quest-acc-preview {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(55%, 22rem);
  text-align: right;
}

.quest-acc[open] > summary .quest-acc-preview {
  opacity: 0.55;
}

.quest-acc-body {
  padding: 0.85rem 0.9rem 1rem;
}

.quest-acc-hint {
  margin: 0 0 0.65rem;
}

.quest-acc-next {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.35rem;
}

.quest-save-bar {
  margin: 0.85rem 0 1.25rem;
}

.skill-actions-editor {
  margin-bottom: 0;
  min-height: 18rem;
}

.skill-actions-empty {
  padding: 1.5rem 0.5rem;
}

.skill-actions-empty h2 {
  margin-top: 0;
}

@media (max-width: 900px) {
  .skill-actions-layout {
    grid-template-columns: 1fr;
  }
  .skill-actions-list {
    position: static;
    max-height: 22rem;
  }
}

.row-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.row-actions form { margin: 0; }
.row-actions button {
  margin: 0;
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
}

.reset-actions button {
  font-size: 0.75rem;
  padding: 0.25rem 0.45rem;
}

.row-actions select {
  width: auto;
  max-width: 110px;
  margin: 0;
  padding: 0.2rem 0.35rem;
  font-size: 0.78rem;
}

details.edit-drawer {
  margin-top: 0.35rem;
}

details.edit-drawer > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.8rem;
  list-style: none;
}

details.edit-drawer > summary::-webkit-details-marker { display: none; }

details.edit-drawer[open] > summary {
  margin-bottom: 0.55rem;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.panel-header .town-panel-title {
  margin: 0;
  font-size: 1.05rem;
}

.panel-header .town-panel-title .page-heading-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.perm-table .col-perm {
  text-align: center;
  width: 5.5rem;
}

.perm-check {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.perm-check input {
  width: auto;
  max-width: none;
  margin: 0;
  accent-color: var(--accent);
}

.table-wrap { overflow-x: auto; }

@media (max-width: 1024px) {
  body.has-sidebar {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  body.has-sidebar > .site-banner,
  body.has-sidebar > .top {
    flex: 0 0 auto;
  }

  body.has-sidebar .layout {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: auto;
    overflow: visible;
    column-gap: 0;
  }

  body.has-sidebar .layout > main {
    order: 1;
    flex: none;
    min-height: auto;
    max-height: none;
    height: auto;
    overflow: visible;
    padding: 0.85rem 0.85rem 1.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
  }

  .mobile-shell-toggles {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .mobile-top-end {
    display: flex;
    grid-column: 2;
    justify-self: end;
  }

  .mobile-header-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.05rem;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 0.1rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  .skill-sidebar,
  .inv-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 260;
    width: min(20rem, 88vw);
    max-width: 88vw;
    height: auto;
    min-height: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.22s ease;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -0.85rem 0.65rem;
    padding: calc(0.65rem + env(safe-area-inset-top, 0px)) 0.85rem 0.65rem;
    background: var(--sidebar);
    border-bottom: 1px solid var(--border);
  }

  .mobile-drawer-nav {
    display: block;
    margin-bottom: 0.35rem;
  }

  .mobile-drawer-divider {
    display: block;
    margin: 0.5rem 0 0.85rem;
    border: 0;
    border-top: 1px solid var(--border);
  }

  .mobile-drawer-group .side-link {
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
  }

  .mobile-drawer-group .mobile-nav-grid {
    margin-top: 0.15rem;
  }

  .mobile-header-clock .header-clock-time {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
  }

  .mobile-header-clock .header-clock-date {
    font-size: 0.62rem;
    color: var(--muted);
    line-height: 1.1;
  }

  .top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .top > .brand {
    grid-column: 1;
  }

  .mobile-drawer-backdrop {
    z-index: 240;
  }

  body.mobile-nav-open .skill-sidebar,
  body.mobile-inv-open .inv-sidebar {
    z-index: 260;
  }

  .top {
    z-index: 200;
  }

  .skill-sidebar {
    left: 0;
    transform: translateX(-108%);
    border-right: 1px solid var(--border);
    border-bottom: none;
  }

  .inv-sidebar {
    right: 0;
    left: auto;
    transform: translateX(108%);
    border-left: 1px solid var(--border);
    border-top: none;
    display: flex;
    flex-direction: column;
  }

  body.mobile-nav-open .skill-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45);
  }

  body.mobile-inv-open .inv-sidebar {
    transform: translateX(0);
    box-shadow: -4px 0 28px rgba(0, 0, 0, 0.45);
  }

  .inv-sidebar {
    --inv-slot: 2.65rem;
  }

  .inv-grid {
    flex: 0 1 auto;
    max-height: min(52dvh, 24rem);
    overflow-y: auto;
    overflow-x: hidden;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.28rem;
    align-content: start;
  }

  .inv-grid .inv-slot {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    min-height: var(--inv-slot);
  }

  .skills-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .top {
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem 0.55rem;
    padding: 0.55rem 0.75rem;
    z-index: 200;
  }

  /* Tray links live in hamburger; gear flyouts stay reachable off-screen */
  .top > nav.top-nav .top-nav-tray,
  .top > nav.top-nav .top-nav-session {
    display: none !important;
  }

  .top > nav.top-nav {
    position: fixed;
    left: -9999px;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    opacity: 0;
    pointer-events: none;
    border: 0;
  }

  .top > nav.top-nav .top-nav-gear,
  .nav-gear-wrap.is-open,
  .nav-gear-wrap.is-open .nav-gear-flyout {
    pointer-events: auto;
  }

  .top > .brand {
    grid-column: 1;
    font-size: 1rem;
  }

  .mobile-top-end {
    grid-column: 2;
  }

  .top > .header-event {
    grid-column: 1 / -1;
    order: 4;
  }

  .nav-gear-flyout,
  .combat-eq-flyout,
  .combat-mount-flyout,
  .nav-toolbelt-flyout {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(22rem, 94vw);
    max-height: min(70dvh, 28rem);
    overflow-y: auto;
    z-index: 300;
  }

  .form-grid .span-2 { grid-column: span 1; }
}

/* —— Landing / index —— */
body.landing-page {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.landing-page > .top,
body.landing-page > .site-banner {
  flex-shrink: 0;
}

body.landing-page .layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.landing-page main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.land-band {
  width: 100%;
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

.land-hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, rgba(107, 143, 58, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(196, 163, 90, 0.12), transparent 50%);
}

.land-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 32rem) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  min-height: 0;
  width: 100%;
}

.land-hero-copy {
  align-self: center;
  justify-self: start;
  max-width: 36rem;
  width: 100%;
}

.land-hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 100%;
  min-width: 0;
  pointer-events: none;
}

.land-logo-img {
  display: block;
  width: 100%;
  max-width: min(34rem, 100%);
  max-height: min(42dvh, 22rem);
  height: auto;
  object-fit: contain;
  /* Full opacity — no blend modes (those washed the art out) */
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.land-hero-auth {
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 280px;
  background: rgba(18, 22, 15, 0.72);
  border: 1px solid var(--border);
  padding: 0.75rem 0.85rem 0.9rem;
}

body.landing-page .brand {
  display: none;
}

body.landing-page header.top {
  justify-content: flex-end;
}

.land-auth-error {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  padding: 0.4rem 0.5rem;
}

.land-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.land-auth-tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin: 0 0 -1px;
  padding: 0.35rem 0.25rem 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

.land-auth-tab.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.land-auth-tab:hover {
  color: var(--text);
  filter: none;
}

.land-form-compact {
  margin: 0;
}

.land-form-compact label {
  margin: 0.3rem 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.land-form-compact input {
  max-width: none;
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.land-form-compact button {
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}
.land-auth-hint {
  margin: -0.15rem 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

.land-kicker {
  margin: 0 0 0.85rem;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.land-hero h1 {
  margin: 0 0 0.55rem;
  max-width: 28ch;
  font-size: clamp(1.4rem, 2.8vw, 2.15rem);
  line-height: 1.25;
  color: var(--text);
}

.land-lead {
  margin: 0 0 1rem;
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.land-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.land-btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.55rem 1rem;
  background: var(--accent);
  color: #1a1508;
  font-weight: 700;
  border: 1px solid var(--accent);
}

.land-btn.ghost {
  background: transparent;
  color: var(--accent);
}

.land-btn:hover { filter: brightness(1.08); }

.land-meta {
  margin: 0;
  font-size: 0.82rem;
}

.land-section {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--border);
}

.land-below {
  flex: 0 0 auto;
  border-bottom: none;
  padding-top: 0.65rem;
  padding-bottom: 0.85rem;
}

.land-tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  align-items: start;
}

.land-col {
  min-width: 0;
}

.land-col + .land-col {
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
}

.land-stats-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 0;
}

.land-stats-stack li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.18rem 0;
  border-top: none;
  border-bottom: 1px solid var(--border);
}

.land-stats-stack .land-stat-value {
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0;
  margin-bottom: 0;
  order: 2;
}

.land-stats-stack .land-stat-label {
  display: inline;
  margin: 0;
  margin-bottom: 0;
  order: 1;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.land-section-head {
  margin-bottom: 0.45rem;
  max-width: none;
}

.land-section-head h2 {
  margin: 0 0 0.2rem;
  color: var(--accent);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.land-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.land-skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}

.land-skills li {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.land-skills strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.land-skills p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

.land-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.1rem 1.5rem;
}

.land-features li {
  margin: 0;
  padding: 0.15rem 0 0.15rem 0.85rem;
  border-left: 2px solid #5a7a48;
}

.land-features strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text);
}

.land-features p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

.land-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.land-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 1rem 1.25rem;
}

.land-stats-tight {
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.75rem 1rem;
}

.land-stats li {
  padding: 0.85rem 0.15rem 0.5rem;
  border-top: 1px solid var(--border);
}

.land-stats-tight li {
  padding: 0.55rem 0 0.15rem;
}

.land-stat-value {
  display: block;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.land-stats-tight .land-stat-value {
  font-size: 1.55rem;
}

.land-stat-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.land-stats-tight .land-stat-label {
  margin-bottom: 0;
}

.land-stats p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.land-section-head-inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.land-news-section {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.land-news-compact {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.land-news-compact li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.land-news-compact li:last-child {
  border-bottom: none;
}

.land-skill-tags {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.land-skill-tags li {
  margin: 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.land-places li,
.land-quests li {
  padding: 0.65rem 0;
}

.land-places strong,
.land-quests strong {
  display: block;
  margin-bottom: 0.15rem;
}

.land-places span {
  display: block;
  font-size: 0.85rem;
}

.land-quest-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.land-badge {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.land-quests p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
}

.land-hs-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
}

.land-hs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.land-hs th,
.land-hs td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.land-hs th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.2);
}

.land-hs tbody tr:last-child td { border-bottom: none; }
.land-hs tbody tr:nth-child(1) td:nth-child(2) { color: var(--accent); }

.land-hs-cta .land-btn {
  margin-top: 0.25rem;
}

@media (max-width: 1100px) {
  .land-features {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

@media (max-width: 1100px) {
  body.landing-page {
    height: auto;
    max-height: none;
    overflow: visible;
    display: block;
  }
  body.landing-page .layout,
  body.landing-page main {
    flex: none;
    min-height: 0;
    height: auto;
    overflow: visible;
    display: block;
  }
  body.landing-page main {
    padding-bottom: 2rem;
  }
  .land-hero {
    display: block;
    padding: 1.75rem 0 1.5rem;
  }
  .land-logo-img {
    max-height: none;
  }
  .land-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 1.75rem 2rem;
  }
  .land-hero-logo {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    max-width: 26rem;
  }
  .land-hero-copy {
    grid-row: 2;
  }
  .land-hero-auth {
    grid-row: 2;
  }
  .land-logo-img {
    max-width: 26rem;
  }
  .land-below {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
  }
}

@media (max-width: 780px) {
  .land-split {
    grid-template-columns: 1fr;
  }
  .land-tri {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .land-col + .land-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
  }
  .land-stats {
    grid-template-columns: 1fr 1fr;
  }
  .land-stats-tight {
    grid-template-columns: repeat(3, 1fr);
  }
  .land-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    align-items: stretch;
    gap: 1.75rem;
  }
  .land-hero-logo {
    order: -1;
    max-width: 24rem;
    margin: 0 auto;
    grid-column: auto;
    grid-row: auto;
  }
  .land-logo-img {
    max-width: 24rem;
  }
  .land-hero-copy {
    grid-row: auto;
  }
  .land-hero-auth {
    justify-self: stretch;
    max-width: none;
    grid-row: auto;
  }
  .land-skills {
    grid-template-columns: 1fr 1fr;
  }
  .land-hero {
    padding-top: 2.25rem;
  }
  .land-hero h1 {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .land-skills,
  .land-features {
    grid-template-columns: 1fr;
  }
}

/* Admin quest edit ? category columns */
.quest-admin-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
}

.quest-admin-col .panel-header h2 {
  font-size: 0.95rem;
}

.quest-admin-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0 0.15rem 0.35rem;
}

.quest-admin-stack > label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.quest-admin-stack input,
.quest-admin-stack select,
.quest-admin-stack textarea {
  width: 100%;
}

.quest-admin-stack .check-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
}

.quest-admin-stack .check-inline input {
  width: auto;
}

.quest-basics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(6.5rem, 0.55fr) minmax(0, 1.25fr);
  gap: 0.65rem 0.75rem;
  align-items: end;
}

.quest-basics-grid > label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

.quest-basics-grid > .span-2 {
  grid-column: span 2;
}

.quest-basics-grid > .span-all {
  grid-column: 1 / -1;
}

.quest-basics-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
  min-height: 2.35rem;
  padding-bottom: 0.15rem;
}

@media (max-width: 800px) {
  .quest-basics-grid {
    grid-template-columns: 1fr;
  }
  .quest-basics-grid > .span-2,
  .quest-basics-grid > .span-all {
    grid-column: auto;
  }
}

.quest-dialogue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.75rem;
  align-items: start;
}

.quest-dialogue-grid > label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 800px) {
  .quest-dialogue-grid {
    grid-template-columns: 1fr;
  }
}

.quest-reward-basics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.quest-reward-basics label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.quest-list-table {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.35rem 0.5rem;
}

.quest-list-table.quest-list-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 1rem;
  align-content: start;
}

@media (max-width: 800px) {
  .quest-list-table.quest-list-cols-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .quest-list-table.quest-list-cols-3 {
    grid-template-columns: 1fr;
  }
}

.quest-list-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.28rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 30%, transparent);
  font-size: 0.88rem;
  color: var(--text);
}

.quest-list-row:last-child { border-bottom: none; }

.quest-list-row input[type="number"] {
  width: 4.5rem !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.quest-qty-input {
  width: 4rem !important;
  margin-left: auto !important;
  flex-shrink: 0;
}

.quest-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0.25rem 0 0.5rem;
}

.quest-choice-block {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.quest-obj-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.25rem 0 0.5rem;
}

.quest-obj-row {
  border: 1px solid var(--border);
  background: #12160f;
  padding: 0.45rem 0.55rem;
}

.quest-obj-collect {
  margin-top: 0.45rem;
}

.quest-obj-skill-items {
  margin-top: 0.45rem;
}

.quest-obj-row [data-obj-f].is-obj-off,
.quest-obj-row [data-obj-f][hidden],
.quest-obj-row .is-obj-off {
  display: none !important;
}

.quest-choice-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.quest-choice-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
  gap: 0.45rem 0.65rem;
  align-items: end;
}

.quest-choice-meta label {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.quest-choice-meta input,
.quest-choice-meta select {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .quest-choice-meta {
    grid-template-columns: 1fr;
  }
}

.quest-choice-correct {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
  margin: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}

.quest-choice-correct input[type="radio"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.quest-choice-text {
  flex: 1;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .quest-admin-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .quest-admin-cols {
    grid-template-columns: 1fr;
  }
}

.quest-steps-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0 0.15rem 0.35rem;
}

.quest-steps-list {
  border: 1px solid var(--border);
  background: #12160f;
  min-height: 12rem;
}

.step-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-order-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.45rem;
}

.step-order-item.is-selected {
  background: color-mix(in srgb, var(--accent, #c4a35a) 14%, transparent);
}

.step-order-main {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.step-order-num {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
}

.step-order-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  font-size: 0.8rem;
}

.step-order-body strong {
  text-transform: capitalize;
}

.step-order-prompt {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-order-actions {
  display: flex;
  gap: 0.25rem;
}

.step-order-actions button {
  min-width: 1.7rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.8rem;
}

.step-order-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.step-order-empty {
  padding: 0.75rem 0.55rem;
  margin: 0;
  font-size: 0.85rem;
}

.step-order-new {
  display: block;
  padding: 0.55rem;
  text-align: center;
  text-decoration: none;
  color: var(--accent, #c4a35a);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}

.step-order-new.is-selected {
  background: color-mix(in srgb, var(--accent, #c4a35a) 14%, transparent);
}

.quest-steps-editor-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}

.quest-rewards-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 0 0.15rem 0.35rem;
  align-items: start;
}

.quest-reward-items {
  max-height: 22rem;
  min-height: 18rem;
  overflow: auto;
  background: #12160f;
  border: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.quest-rewards-cols .quest-list-table {
  max-height: 22rem;
  overflow: auto;
}

.quest-reward-xp-row {
  justify-content: flex-start !important;
}

.quest-reward-xp-row input[type="checkbox"] {
  width: auto !important;
  flex-shrink: 0;
}

.quest-reward-xp-row span {
  flex: 1;
}

.quest-save-bar {
  margin: 0.25rem 0 1.25rem;
}

@media (max-width: 900px) {
  .quest-steps-layout,
  .quest-rewards-cols {
    grid-template-columns: 1fr;
  }
}

/* Quests / NPC talk */
.quest-list, .quest-npc-list { list-style: none; padding: 0; margin: 0; }
.quest-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.quest-row:last-child { border-bottom: none; }
.dialogue-text {
  white-space: pre-wrap;
  line-height: 1.45;
  margin: 0.5rem 0 0.85rem;
}
.choice-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.choice-btn {
  width: 100%;
  text-align: left;
  background: #12160f;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}
.choice-btn:hover {
  border-color: var(--accent);
}
.collect-needs { margin: 0.5rem 0 0.85rem; padding: 0; list-style: none; }
.collect-needs .need-missing { color: #c45c5c; }
.collect-needs .need-done {
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
}
.dialogue-objectives .need-done {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
}
.dialogue-blocked {
  margin: 0.35rem 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
}

/* —— Combat & equipment —— */
.combat-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(16rem, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.equipment-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(36rem, 100%);
  margin: 0 auto;
}
.equipment-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  width: 100%;
  align-items: stretch;
}
.eq-worn-panel,
.equipment-stats,
.eq-toolbelt-panel,
.eq-broken-panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}
.eq-worn-panel {
  padding: 0.65rem 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
}
.eq-worn-panel .panel-header,
.equipment-stats .panel-header,
.eq-toolbelt-panel .panel-header {
  margin-bottom: 0.35rem;
}
.equipment-stats {
  position: static;
  padding: 0.65rem 0.75rem 0.8rem;
  display: flex;
  flex-direction: column;
}
.eq-paper-doll {
  display: grid;
  grid-template-columns: repeat(3, 2.85rem);
  grid-template-rows: repeat(5, auto);
  gap: 0.3rem 0.35rem;
  justify-content: center;
  margin: auto 0;
  padding: 0.35rem 0 0.1rem;
  flex: 1 1 auto;
  align-content: center;
}
.eq-doll-helmet { grid-column: 2; grid-row: 1; }
.eq-doll-cape { grid-column: 1; grid-row: 2; }
.eq-doll-necklace { grid-column: 2; grid-row: 2; }
.eq-doll-ammo { grid-column: 3; grid-row: 2; }
.eq-doll-mainhand { grid-column: 1; grid-row: 3; }
.eq-doll-body { grid-column: 2; grid-row: 3; }
.eq-doll-offhand { grid-column: 3; grid-row: 3; }
.eq-doll-gloves { grid-column: 1; grid-row: 4; }
.eq-doll-legs { grid-column: 2; grid-row: 4; }
.eq-doll-ring { grid-column: 3; grid-row: 4; }
.eq-doll-feet { grid-column: 2; grid-row: 5; }
.eq-doll-mount { grid-column: 3; grid-row: 5; }
.eq-paper-doll .eq-labeled-slot .inv-slot {
  width: 2.85rem;
  height: 2.85rem;
  min-height: 0;
  aspect-ratio: 1 / 1;
}
.eq-paper-doll .eq-slot-label {
  font-size: 0.62rem;
}
.eq-toolbelt-panel {
  padding: 0.55rem 0.75rem 0.7rem;
}
.eq-toolbelt-row {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.3rem 0.35rem;
}
.eq-tool-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 2.85rem;
  flex: 0 0 auto;
}
.eq-tool-slot .inv-slot {
  width: 2.85rem;
  height: 2.85rem;
  min-height: 0;
  aspect-ratio: 1 / 1;
}
.eq-tool-skill {
  font-size: 0.62rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eq-tool-slot.is-empty .inv-slot {
  opacity: 0.5;
}
.eq-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin: 0.1rem 0 0.55rem;
}
.eq-stats-table th,
.eq-stats-table td {
  padding: 0.38rem 0.3rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.eq-stats-table thead th {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom-color: #455540;
}
.eq-stats-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
}
.eq-stats-table td.is-bonus,
.eq-stats-table td.is-buff {
  color: var(--accent);
  font-weight: 700;
}
.eq-stats-hint {
  margin: auto 0 0;
  line-height: 1.35;
}
.eq-broken-slot {
  position: relative;
}
.eq-inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
}
.eq-fixed-grid {
  grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: 0.55rem 0.4rem;
}
.eq-labeled-slot {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  list-style: none;
}
.eq-slot-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-labeled-slot .inv-slot {
  width: 100%;
}
.inv-slot.is-empty {
  opacity: 0.55;
}
.eq-inv-slot.is-locked {
  opacity: 0.55;
}
.eq-slot-action {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  margin: 0;
  z-index: 2;
}
.eq-slot-action button {
  margin: 0;
  padding: 0.05rem 0.28rem;
  font-size: 0.62rem;
  line-height: 1.2;
  min-width: 0;
  width: auto;
  max-width: none;
}
@media (max-width: 800px) {
  .combat-layout { grid-template-columns: 1fr; }
  .equipment-page { width: min(22rem, 100%); }
  .equipment-top { grid-template-columns: 1fr; }
}
.combat-monster-list,
.equipment-slots,
.equipment-bag {
  list-style: none;
  margin: 0;
  padding: 0;
}
.combat-monster-list.action-pick {
  margin-top: 0.5rem;
}
.combat-monster-row {
  cursor: pointer;
  flex-wrap: nowrap;
}
.combat-monster-row .combat-monster-info {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  overflow: hidden;
}
.combat-monster-row .combat-monster-info strong {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combat-monster-row .combat-monster-info > .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}
.combat-monster-level {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}
.combat-monster-level.is-easy {
  color: #8bd98f;
}
.combat-monster-level.is-fair {
  color: #f0d479;
}
.combat-monster-level.is-hard {
  color: #f2a258;
}
.combat-monster-level.is-deadly {
  color: #ec7b7b;
}
.combat-monster-row .combat-monster-reason {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combat-monster-row.is-locked {
  cursor: not-allowed;
}
.combat-monster-row:not(.is-locked):hover {
  color: var(--accent);
}
.equipment-bag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.55rem 0.35rem;
  border-bottom: 1px solid var(--border);
}
.equipment-bag-row.is-locked {
  opacity: 0.72;
}
.gear-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: end;
}
.gear-reqs-cell {
  min-width: 14rem;
  max-width: 22rem;
}
.gear-reqs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.45rem;
}
.gear-reqs-editor {
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.45rem 0.65rem;
  margin-top: 0.35rem;
}
.gear-req {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted, #a8b09a);
}
.gear-req.is-combat {
  color: var(--text, #e8e4d4);
}
.gear-req input {
  width: 100% !important;
  min-width: 0;
  padding: 0.15rem 0.3rem !important;
  font-size: 0.8rem;
}
.gear-stats-table td {
  vertical-align: top;
}
.combat-style {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.55rem;
  flex: 0 0 auto;
}
.combat-style-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.combat-style-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.28rem;
  border: 0;
  background: transparent;
}
.combat-style-opt {
  display: block !important;
  flex-direction: column !important;
  margin: 0 !important;
  cursor: pointer;
  gap: 0 !important;
  min-width: 0;
}
.combat-style-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.combat-style-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  width: 100%;
  padding: 0.38rem 0.15rem 0.32rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
  border: 1px solid var(--border);
  background: #12160f;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.combat-style-opt:hover .combat-style-chip {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, #12160f);
}
.combat-style-opt input:checked + .combat-style-chip,
.combat-style-opt:has(input:checked) .combat-style-chip {
  color: #1a1508;
  border-color: var(--accent);
  background: var(--accent);
}
.combat-style-opt input:focus-visible + .combat-style-chip {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.combat-style-icon {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  display: block;
}
.combat-style-emoji {
  font-size: 0.95rem;
  line-height: 1;
}
.combat-style-name {
  letter-spacing: 0.02em;
}
.combat-bars { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 0.75rem; }
.combat-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  margin-bottom: 0.28rem;
}
.combat-bar {
  height: 0.72rem;
  background: linear-gradient(180deg, #0a0e09 0%, #141a11 100%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.combat-bar-fill {
  height: 100%;
  transition: width 0.28s ease;
  position: relative;
}
.combat-bar-fill.is-player {
  background: linear-gradient(90deg, #2d7a54 0%, #4ec98a 55%, #6ee0a4 100%);
  box-shadow: 0 0 10px rgba(62, 180, 120, 0.35);
}
.combat-bar-fill.is-monster {
  background: linear-gradient(90deg, #8a3a12 0%, #c45e18 55%, #e8893a 100%);
  box-shadow: 0 0 10px rgba(220, 110, 40, 0.3);
}
.equipment-slot {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--border);
}
.equipment-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.equipment-slot-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.equipment-icon {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
}
.tiny-btn {
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
}

#monster-list .sa-item a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.55rem;
  grid-template-columns: none;
}

#ability-list .sa-item a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  grid-template-columns: none;
}
#ability-list .sa-item-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
#ability-list .sa-item-main .sa-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#ability-list .sa-item-main .muted {
  font-size: 0.72rem;
}

.monster-drop-slot {
  margin: 0.65rem 0 0.85rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  background: #12160f;
}
.monster-drop-slot-head {
  align-items: center;
  margin-bottom: 0.45rem;
}
.monster-drop-opt {
  align-items: flex-end;
  padding: 0.35rem 0;
  border-top: 1px solid rgba(74, 92, 64, 0.4);
}
.monster-drop-opt label { margin: 0; }

.combat-page {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
body.has-sidebar main:has(.combat-page) {
  display: flex;
  flex-direction: column;
}
body.has-sidebar main:has(.combat-page) > h1 {
  flex: 0 0 auto;
}
.combat-monsters,
.combat-encounter {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin-bottom: 0;
}
.combat-monsters > .panel-header,
.combat-encounter > :not(.combat-log-wrap) {
  flex: 0 0 auto;
}
.combat-monsters .combat-monster-list,
.combat-monsters > .muted {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.combat-log-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0.5rem;
}
.combat-log-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.combat-log-wrap > .field-label,
.combat-log-head > .field-label {
  flex: 0 0 auto;
  margin: 0;
}
.combat-log-console {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  background:
    linear-gradient(180deg, rgba(18, 24, 16, 0.55) 0%, rgba(8, 11, 7, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(232, 237, 217, 0.04);
}
.combat-log-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.45rem;
  min-height: 3.4rem;
  padding: 0.45rem 0.55rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, #12160f 88%, #000);
  box-sizing: border-box;
}
.combat-gear-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0;
  flex: 0 0 auto;
}
.combat-ability-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding: 0 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.combat-ability-empty {
  padding: 0 0.35rem;
  white-space: nowrap;
}
.combat-loadout-wrap {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
.combat-loadout-icon-btn {
  position: relative;
}
.combat-loadout-active-badge {
  position: absolute;
  right: -0.15rem;
  bottom: -0.1rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #c4a06a) 85%, #000);
  color: #1a140c;
  font-size: 0.62rem;
  font-weight: 750;
  line-height: 1rem;
  text-align: center;
  pointer-events: none;
}
.combat-loadout-flyout {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: 40;
  min-width: 11rem;
  padding: 0.45rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  border-radius: 8px;
  background: color-mix(in srgb, #171c13 96%, #000);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  display: none;
}
.combat-loadout-wrap.is-open > .combat-loadout-flyout {
  display: block;
}
.combat-loadout-flyout-title {
  margin: 0 0 0.35rem;
  padding: 0 0.25rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.combat-loadout-flyout-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.combat-loadout-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.combat-loadout-option:hover {
  background: color-mix(in srgb, var(--accent, #c4a06a) 12%, #1a2116);
}
.combat-loadout-option.is-active {
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 50%, var(--border));
  background: color-mix(in srgb, var(--accent, #c4a06a) 16%, #1a2116);
}
.combat-loadout-option:disabled {
  opacity: 0.55;
  cursor: wait;
}
.combat-loadout-option-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  background: color-mix(in srgb, #1a2116 90%, #000);
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #c4a06a);
}
.combat-loadout-option-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combat-loadout-settings-link {
  display: block;
  margin-top: 0.4rem;
  padding: 0.35rem 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--muted);
  font-size: 0.72rem;
  text-decoration: none;
}
.combat-loadout-settings-link:hover {
  color: var(--accent, #c4a06a);
}
.combat-ability-slot {
  flex: 0 0 auto;
}
.combat-ability-bar.is-arrange {
  flex-wrap: wrap;
}
.combat-ability-bar.is-arrange .combat-ability-slot {
  cursor: grab;
}
.combat-ability-bar.is-arrange .combat-ability-slot.is-dragging {
  opacity: 0.55;
}
.combat-ability-shift-btn {
  display: none;
}
.combat-ability-bar.is-arrange .combat-ability-shift-btn {
  display: inline-flex;
}
.combat-ability-slot {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  flex: 0 0 auto;
}
.combat-ability-bar.is-arrange {
  flex-wrap: wrap;
  align-content: flex-start;
  max-height: 8rem;
  overflow-y: auto;
}
.combat-ability-bar.is-arrange .combat-ability-slot {
  cursor: grab;
}
.combat-ability-bar.is-arrange .combat-ability-slot.is-dragging {
  opacity: 0.55;
}
.combat-ability-shift-btn {
  display: none;
  margin: 0;
  padding: 0.1rem 0.2rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #12160f;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}
.combat-ability-bar.is-arrange .combat-ability-shift-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  min-height: 1.15rem;
}
.combat-ability-btn.is-arrange {
  cursor: grab;
}
.combat-ability-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000);
  border-radius: 6px;
  background: color-mix(in srgb, #1a2116 90%, #000);
  cursor: pointer;
  color: inherit;
  flex: 0 0 auto;
}
.combat-ability-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.combat-ability-emoji,
.combat-ability-fallback {
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}
.combat-ability-btn.is-cooling {
  opacity: 0.45;
  cursor: not-allowed;
}
.combat-ability-btn.is-counter {
  border-color: color-mix(in srgb, #d4b56a 55%, var(--border, #3a4234));
  box-shadow:
    0 0 0 1px rgba(212, 181, 106, 0.22),
    0 0 10px rgba(212, 181, 106, 0.18);
  animation: combat-hint-glow 2.4s ease-in-out infinite;
}
@keyframes combat-hint-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(212, 181, 106, 0.18),
      0 0 8px rgba(212, 181, 106, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 181, 106, 0.32),
      0 0 14px rgba(212, 181, 106, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .combat-ability-btn.is-counter {
    animation: none;
  }
}
.combat-ability-cd {
  position: absolute;
  right: 0.15rem;
  bottom: 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #f0d479;
  text-shadow: 0 1px 2px #000;
}
.combat-special-banner {
  position: absolute;
  right: 0.55rem;
  left: auto;
  bottom: calc(100% + 0.35rem);
  transform: none;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(236, 123, 123, 0.7);
  border-radius: 4px;
  background: rgba(80, 20, 20, 0.92);
  color: #ec7b7b;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: normal;
  max-width: min(15rem, 42%);
  text-align: right;
  line-height: 1.25;
  pointer-events: none;
  z-index: 2;
}
.combat-buff-banner {
  position: absolute;
  right: 0.55rem;
  left: auto;
  bottom: calc(100% + 0.35rem);
  transform: none;
  margin: 0;
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(120, 190, 140, 0.75);
  border-radius: 4px;
  background: rgba(18, 48, 28, 0.92);
  color: #9ed4a8;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: normal;
  max-width: min(15rem, 42%);
  text-align: right;
  line-height: 1.25;
  pointer-events: none;
  z-index: 2;
}
/* When both banners show, stack buff above the special on the right */
.combat-log-actions:has(.combat-special-banner:not([hidden])) .combat-buff-banner:not([hidden]) {
  bottom: calc(100% + 2.35rem);
}
.combat-log-actions {
  position: relative;
}
.combat-gear-wrap {
  position: relative;
}
.combat-gear-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000);
  border-radius: 6px;
  background: color-mix(in srgb, #1a2116 90%, #000);
  cursor: pointer;
  color: inherit;
}
.combat-gear-icon-btn img {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  pointer-events: none;
}
.combat-gear-icon-btn:hover,
.combat-gear-wrap:hover > .combat-gear-icon-btn,
.combat-gear-wrap:focus-within > .combat-gear-icon-btn {
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 55%, var(--border));
  background: color-mix(in srgb, #24301c 88%, #000);
}
.combat-gear-icon-btn.is-filled {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #9bc46a 35%, transparent);
}
.combat-gear-flyout {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.15rem);
  z-index: 40;
  min-width: 12rem;
  max-width: min(96vw, 42rem);
  padding: 0.65rem 0.7rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(28, 34, 22, 0.98) 0%, rgba(14, 18, 12, 0.98) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.combat-eq-flyout {
  min-width: min(96vw, 32rem);
  width: max-content;
}
.combat-gear-flyout::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.55rem;
}
.combat-gear-wrap:hover > .combat-gear-flyout,
.combat-gear-wrap:focus-within > .combat-gear-flyout,
.combat-gear-wrap.is-open > .combat-gear-flyout {
  display: block;
}
.combat-eq-flyout-inner,
.gear-eq-flyout-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1.1rem 1.35rem;
  align-items: center;
}
.combat-eq-doll.eq-paper-doll,
.combat-eq-doll {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
.combat-eq-stats {
  flex: 0 0 auto;
  width: 18.25rem;
  min-width: 18.25rem;
  align-self: center;
}
.combat-eq-stats .eq-stats-table {
  margin: 0;
  font-size: 0.8rem;
  width: 100%;
}
.combat-eq-stats .eq-stats-table th,
.combat-eq-stats .eq-stats-table td {
  padding: 0.28rem 0.25rem;
}
@media (max-width: 560px) {
  .combat-eq-flyout-inner,
  .gear-eq-flyout-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .combat-eq-stats {
    width: auto;
    min-width: 0;
  }
}
.combat-mount-flyout {
  min-width: 14rem;
  max-width: min(92vw, 18rem);
}
.combat-mount-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.combat-mount-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, #12160f 80%, #000);
  flex: 0 0 auto;
  overflow: hidden;
}
.combat-mount-icon img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
}
.combat-mount-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.combat-mount-meta strong {
  font-size: 0.9rem;
  line-height: 1.2;
}
.combat-mount-bag {
  margin: 0;
  max-width: 100%;
}
.combat-mount-bag .inv-slot.is-mount-item {
  cursor: pointer;
}
.combat-mount-bag .inv-slot.is-mount-item:hover {
  outline: 1px solid color-mix(in srgb, var(--accent, #c4a06a) 60%, transparent);
}
.combat-mount-empty {
  margin: 0;
}
.combat-log-actions .danger {
  margin: 0;
  min-width: 4.25rem;
}
.combat-log-actions .danger.is-slot-empty {
  display: none;
  pointer-events: none;
}

.combat-mobile-toolbar,
.combat-monsters-toggle {
  display: none;
}

.combat-fight-split {
  display: contents;
}

.combat-mobile-rail {
  display: none;
}

.combat-mobile-inv-title {
  margin: 0;
  padding: 0.35rem 0.45rem 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.combat-monsters-toggle {
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, #12160f);
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}

@media (max-width: 1024px) {
  body.has-sidebar main:has(.combat-page) {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .combat-page {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: auto;
    min-height: 0;
    flex: none;
  }

  .combat-monsters,
  .combat-encounter,
  .combat-log-wrap,
  .combat-log-console {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none;
  }

  .combat-monsters {
    flex: 0 0 auto;
  }

  .combat-monsters .combat-monster-list,
  .combat-monsters > .muted,
  .combat-monsters-body .combat-monster-list {
    max-height: none !important;
    overflow: visible !important;
    flex: none;
  }

  .combat-encounter {
    display: block;
  }

  .combat-log {
    min-height: 8rem;
    max-height: none;
    overflow-y: visible;
  }

  body.combat-mobile-active main:has(.combat-page) {
    padding-bottom: 1.25rem;
  }

  body.combat-mobile-active .combat-log-actions {
    position: static;
    box-shadow: none;
    margin: 0;
    padding: 0.4rem 0.45rem;
  }

  body.combat-mobile-active .combat-log-console {
    min-height: 0;
    padding-bottom: 0;
  }

  body.combat-mobile-active .combat-eq-flyout,
  body.combat-mobile-active .combat-mount-flyout {
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .combat-mobile-toolbar {
    display: none;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin: 0 0 0.35rem;
  }

  .combat-page.is-fighting .combat-mobile-toolbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 6;
    margin: -0.15rem -0.15rem 0.35rem;
    padding: 0.35rem 0.15rem;
    background: color-mix(in srgb, var(--panel) 92%, #000);
    border-bottom: 1px solid var(--border);
  }

  .combat-page.is-fighting .combat-monsters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .combat-arena {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    margin: 0;
  }

  .combat-vs {
    display: none;
  }

  .combat-fighter.is-monster {
    order: 2;
  }

  .combat-portrait {
    width: 2.85rem;
    height: 2.85rem;
  }

  .combat-log-actions {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.4rem 0.45rem;
  }

  .combat-ability-bar {
    flex: 1 1 auto;
    order: 2;
    min-width: 0;
    min-height: 3.1rem;
    max-width: 100%;
  }

  .combat-loadout-wrap {
    order: 2;
    margin-left: 0;
  }

  .combat-log-actions .danger {
    flex: 0 0 auto;
    order: 3;
    min-width: 3.5rem;
  }

  .combat-page.is-fighting .combat-fight-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 44%);
    gap: 0.45rem;
    align-items: stretch;
    min-height: 0;
    margin-top: 0.35rem;
  }

  .combat-page.is-fighting .combat-mobile-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid color-mix(in srgb, var(--border) 85%, #000);
    border-radius: 6px;
    background: color-mix(in srgb, var(--panel) 94%, #000);
    overflow: hidden;
  }

  .combat-page.is-fighting #combat-style-slot-rail .combat-style {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, #12160f 88%, #000);
  }

  .combat-page.is-fighting #combat-style-slot-rail .combat-style-options {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  .combat-page.is-fighting #combat-style-slot-rail .combat-style-chip {
    min-width: 2.35rem;
    padding: 0.22rem 0.28rem;
  }

  .combat-page.is-fighting .combat-mobile-inv {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .combat-page.is-fighting .combat-mobile-inv-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.35rem;
    align-content: start;
  }

  .combat-page.is-fighting .combat-mobile-inv-grid .inv-slot {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    min-height: 2.35rem;
  }

  .combat-page.is-fighting .combat-log-wrap {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    margin-top: 0;
  }

  .combat-page.is-fighting .combat-log-console {
    flex: 1 1 auto;
    min-height: 10rem;
    max-height: min(48dvh, 24rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .combat-page.is-fighting .combat-log {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  #combat-style-slot-monsters:empty {
    display: none;
  }
}

@media (max-width: 800px) {
  .combat-page { grid-template-columns: 1fr; }
}
.combat-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.85rem;
  align-items: center;
  margin: 0.35rem 0 0.65rem;
  flex: 0 0 auto;
  padding: 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, #000);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(176, 164, 111, 0.08), transparent 55%),
    linear-gradient(180deg, #161c13 0%, #0f140e 100%);
  box-shadow: inset 0 1px 0 rgba(232, 237, 217, 0.05);
}
.combat-arena.is-won {
  border-color: color-mix(in srgb, #4ec98a 45%, var(--border));
}
.combat-arena.is-lost {
  border-color: color-mix(in srgb, #c45e18 50%, var(--border));
}
.combat-arena.is-idle .combat-fighter.is-monster {
  opacity: 0.78;
}
.combat-fighter-name.is-placeholder {
  color: var(--muted) !important;
  font-weight: 650;
  font-style: italic;
}
.combat-portrait.is-empty {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--muted) 55%, var(--border)) !important;
  box-shadow: none !important;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(232, 237, 217, 0.03),
      rgba(232, 237, 217, 0.03) 4px,
      transparent 4px,
      transparent 9px
    ),
    #0c100b;
}
.combat-portrait-img[hidden],
.combat-portrait-fallback[hidden],
.combat-portrait-emoji[hidden],
.combat-portrait-idle[hidden] {
  display: none !important;
}
.combat-portrait-idle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.combat-portrait-idle-mark {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid color-mix(in srgb, var(--muted) 70%, transparent);
  border-radius: 50%;
  position: relative;
  opacity: 0.85;
}
.combat-portrait-idle-mark::before,
.combat-portrait-idle-mark::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}
.combat-portrait-idle-mark::before {
  width: 2px;
  height: 1.85rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.combat-portrait-idle-mark::after {
  width: 1.85rem;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.combat-arena[hidden],
#combat-food[hidden],
#combat-idle-hint[hidden] {
  display: none !important;
}
.combat-fighter {
  min-width: 0;
}
.combat-fighter-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.combat-fighter-top.is-monster {
  justify-content: flex-end;
}
.combat-fighter-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.combat-fighter.is-monster .combat-fighter-meta {
  text-align: right;
}
.combat-fighter.is-monster .combat-bar-label { justify-content: flex-end; }
.combat-portrait {
  flex: 0 0 auto;
  width: 3.85rem;
  height: 3.85rem;
  border: 1px solid var(--border);
  background: #0c100b;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.combat-fighter.is-player .combat-portrait {
  border-color: color-mix(in srgb, #4ec98a 55%, var(--border));
  box-shadow: 0 0 0 1px rgba(78, 201, 138, 0.18);
}
.combat-fighter.is-monster .combat-portrait {
  border-color: color-mix(in srgb, #e8893a 50%, var(--border));
  box-shadow: 0 0 0 1px rgba(232, 137, 58, 0.16);
}
.combat-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.combat-portrait-img[hidden] {
  display: none !important;
}
.combat-portrait-fallback,
.combat-portrait-emoji {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.combat-portrait-emoji {
  font-size: 1.6rem;
  font-weight: 400;
}
.combat-fighter-name {
  font-weight: 700;
  margin-bottom: 0.28rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.combat-fighter.is-player .combat-fighter-name {
  color: #8fd9b0;
}
.combat-fighter.is-monster .combat-fighter-name {
  color: #efb07a;
}
.combat-vs {
  align-self: center;
  display: grid;
  place-items: center;
}
.combat-vs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.28rem 0.45rem;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: #1a1508;
  background: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
}
.combat-log {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0.45rem;
  flex: 1 1 auto;
  min-height: 10rem;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: transparent;
  border: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  box-sizing: border-box;
}
.combat-log-line {
  margin: 0;
  padding: 0.32rem 0.55rem 0.32rem 0.65rem;
  border-bottom: 1px solid rgba(74, 92, 64, 0.28);
  border-left: 2px solid transparent;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.combat-log-line:last-child { border-bottom: none; }
.combat-log-line.is-hit {
  border-left-color: color-mix(in srgb, #e8893a 70%, transparent);
  background: linear-gradient(90deg, rgba(196, 94, 24, 0.1), transparent 70%);
}
.combat-log-line.is-miss {
  border-left-color: color-mix(in srgb, var(--muted) 55%, transparent);
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
}
.combat-log-line.is-heal {
  border-left-color: color-mix(in srgb, #4ec98a 75%, transparent);
  background: linear-gradient(90deg, rgba(62, 180, 120, 0.1), transparent 70%);
}
.combat-log-line.is-victory {
  border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(176, 164, 111, 0.14), transparent 75%);
  color: var(--accent);
  font-weight: 650;
}
.combat-log-line.is-defeat {
  border-left-color: #b84a3a;
  background: linear-gradient(90deg, rgba(184, 74, 58, 0.12), transparent 75%);
}
.combat-log-name {
  font-weight: 700;
}
.combat-log-name.is-player {
  color: #7fd4a6;
}
.combat-log-name.is-monster {
  color: #ef9a5a;
}
.combat-log-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f0d58a;
}
.combat-boss-panel {
  margin-bottom: 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.12);
}
.combat-party-list {
  margin: 0.35rem 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.combat-party-actions { gap: 0.4rem; flex-wrap: wrap; }
.combat-chest {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed var(--accent, #c45e18);
  border-radius: 6px;
}
.combat-chest ul { margin: 0.25rem 0 0.5rem; padding-left: 1.1rem; }
.combat-allies {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.85rem;
  color: var(--muted, #999);
}
.combat-ally { margin: 0.15rem 0; }
.combat-food {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  margin: 0.65rem 0;
}
.combat-food-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.combat-food-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}
.combat-food-icon {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  margin-right: 0.2rem;
}

.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.avatar-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  cursor: pointer;
  width: 4.25rem;
}
.avatar-pick[hidden] {
  display: none !important;
}
.avatar-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.avatar-pick-img,
.avatar-pick-fallback {
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--border);
  background: #12160f;
  object-fit: cover;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--muted);
}
.avatar-pick-img { display: block; }
.avatar-pick:hover .avatar-pick-img,
.avatar-pick:hover .avatar-pick-fallback,
.avatar-pick:has(input:checked) .avatar-pick-img,
.avatar-pick:has(input:checked) .avatar-pick-fallback,
.avatar-pick.is-selected .avatar-pick-img,
.avatar-pick.is-selected .avatar-pick-fallback {
  border-color: var(--accent);
}
.avatar-pick-caption {
  font-size: 0.68rem;
  color: var(--muted);
}
.avatar-admin-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.55rem;
}
.avatar-admin-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.35rem;
  border: 1px solid var(--border);
  background: #12160f;
}
.avatar-admin-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.avatar-admin-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #0c100b;
  display: block;
}
.avatar-admin-card.is-active .avatar-admin-thumb {
  border-color: var(--accent);
}
.avatar-admin-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
}
.avatar-admin-active {
  margin: 0;
  font-size: 0.72rem;
  gap: 0.3rem;
}
.avatar-admin-gender {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.68rem;
  color: var(--muted);
}
.avatar-admin-gender select {
  font-size: 0.72rem;
  padding: 0.15rem 0.25rem;
  min-height: 0;
}
.avatar-defaults-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.55rem;
}
.avatar-defaults-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.82rem;
}
.avatar-assign-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0.45rem 0 0.55rem;
}

/* ---- Mythronia Wiki ---- */
.wiki-shell {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  min-height: calc(100vh - 8rem);
}

.wiki-sidebar {
  position: sticky;
  top: 0.75rem;
  padding: 0.85rem 0.75rem;
}

.wiki-brand {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
}

.wiki-brand a {
  color: var(--gold, #d4b483);
  text-decoration: none;
}

.wiki-nav ul {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.wiki-nav-link {
  display: block;
  padding: 0.35rem 0.45rem;
  border-radius: 4px;
  color: var(--text, #e8edd8);
  text-decoration: none;
  font-size: 0.92rem;
}

.wiki-nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wiki-nav-link.is-active {
  background: rgba(212, 180, 131, 0.15);
  color: var(--gold, #d4b483);
  font-weight: 600;
}

.wiki-main {
  padding: 1rem 1.1rem 1.25rem;
  min-width: 0;
}

.wiki-page-head {
  margin-bottom: 1rem;
}

.wiki-page-head h2 {
  margin: 0 0 0.35rem;
}

.wiki-breadcrumb {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
}

.wiki-breadcrumb a {
  color: var(--gold, #d4b483);
}

.wiki-lead {
  margin: 0;
  max-width: 52rem;
  line-height: 1.45;
}

.wiki-section {
  margin-top: 1.25rem;
}

.wiki-section h3 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.wiki-h4 {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.88rem;
}

.wiki-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.wiki-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: inherit;
}

.wiki-stat-card strong {
  font-size: 1.35rem;
  color: var(--gold, #d4b483);
}

.wiki-stat-card span {
  font-size: 0.82rem;
  color: var(--muted, #9aa88a);
}

.wiki-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.35rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-link-grid a {
  color: var(--gold, #d4b483);
}

.wiki-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wiki-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.12);
}

.wiki-skill-chip img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

.wiki-skill-chip.is-more {
  color: var(--muted, #9aa88a);
}

.wiki-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.wiki-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.wiki-table th,
.wiki-table td {
  padding: 0.42rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.wiki-table th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #9aa88a);
  background: rgba(0, 0, 0, 0.2);
}

.wiki-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.wiki-table--wide {
  min-width: 42rem;
}

.wiki-table--compact {
  font-size: 0.82rem;
}

.wiki-col-icon {
  width: 2rem;
  text-align: center;
}

.wiki-col-link {
  white-space: nowrap;
  text-align: right;
}

.wiki-col-link a {
  color: var(--gold, #d4b483);
}

.wiki-col-wrap {
  max-width: 14rem;
  word-break: break-word;
}

.wiki-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.28rem;
}
.wiki-tag {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, #1a1f16 88%, #000);
  color: var(--muted, #9aa88a);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wiki-col-nums {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wiki-empty {
  text-align: center;
  color: var(--muted, #9aa88a);
  padding: 1rem !important;
}

.wiki-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wiki-icon--sm img,
.wiki-icon--sm .wiki-icon-emoji {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 1.1rem;
}

.wiki-icon--lg img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.wiki-icon--lg .wiki-icon-emoji {
  font-size: 2rem;
}

.wiki-skill-hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.wiki-search {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.65rem;
  max-width: 22rem;
}

.wiki-search input {
  flex: 1;
  min-width: 0;
}

.wiki-tag-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.wiki-tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  font-size: 0.82rem;
  color: inherit;
}

.wiki-tag.is-active {
  border-color: rgba(212, 180, 131, 0.45);
  color: var(--gold, #d4b483);
}

.wiki-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.45rem 1rem;
  margin: 0;
}

.wiki-dl div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.wiki-dl dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted, #9aa88a);
}

.wiki-dl dd {
  margin: 0;
}

.wiki-plain-list {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}

.wiki-plain-list a {
  color: var(--gold, #d4b483);
}

.wiki-subpanel {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
}

.wiki-subpanel h4 {
  margin: 0 0 0.35rem;
}

.wiki-prose {
  white-space: pre-wrap;
  line-height: 1.5;
  max-width: 48rem;
}

@media (max-width: 820px) {
  .wiki-shell {
    grid-template-columns: 1fr;
  }

  .wiki-sidebar {
    position: static;
  }
}

/* Admin → Abilities form (abf) */
.skill-action-form .abf {
  max-width: none;
  gap: 0.55rem;
}
.abf {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.abf-card {
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #141910 94%, #000);
  padding: 0.55rem 0.7rem 0.65rem;
}
.abf-card-h {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #c4a06a) 80%, var(--muted));
}
.abf-basics {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.55rem 0.75rem;
  align-items: start;
}
.abf-icon {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.abf-preview {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 8px;
  overflow: hidden;
}
.abf-select,
.skill-action-form .abf-select {
  width: 100%;
  max-width: none;
  font-size: 0.72rem;
  padding: 0.2rem 0.3rem;
  margin: 0;
}
.abf-basics-main {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.abf-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: end;
}
.abf-grow { flex: 1 1 10rem; min-width: 0; }
.abf-narrow { width: 4.5rem; flex: 0 0 auto; }
.abf-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 !important;
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 0;
}
.abf-field > span {
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.skill-action-form .abf-field > input,
.skill-action-form .abf-field > select,
.abf-field > input,
.abf-field > select {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.28rem 0.4rem;
  font-size: 0.84rem;
  border-radius: 6px;
}
.abf-toggle {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.15rem !important;
  padding: 0.35rem 0.45rem;
  font-size: 0.8rem;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, #000 18%, transparent);
  white-space: nowrap;
}
.skill-action-form .abf-toggle input,
.abf-toggle input {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.abf-grid {
  display: grid;
  gap: 0.35rem 0.5rem;
  align-items: end;
}
.abf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.abf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.abf-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.abf-grid-effect {
  grid-template-columns: minmax(9rem, 1.6fr) repeat(4, minmax(0, 1fr));
}
.abf-span-2 { grid-column: span 2; }
.abf-tight-top { margin-top: 0.4rem; }
.abf-sub { margin-top: 0.55rem; }
.abf-sub-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text);
}
.abf-hint {
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--muted);
}
.abf-empty {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}
.abf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.abf-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.3rem;
  margin: 0 !important;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, #000 25%, transparent);
  color: var(--muted);
  font-size: 0.74rem;
  cursor: pointer;
  line-height: 1.2;
  max-width: 100%;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.abf-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 45%, var(--border));
  color: var(--text);
}
.abf-chip.is-on {
  background: color-mix(in srgb, var(--accent, #c4a06a) 22%, #1a160e);
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 55%, transparent);
  color: var(--text);
}
.abf-chip-id {
  font-weight: 700;
  opacity: 0.75;
  flex: 0 0 auto;
}
.abf-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.abf-combo { margin-top: 0.45rem; }
.abf-combo-seq {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.2rem;
  margin-bottom: 0.45rem;
  padding: 0.4rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, #000 20%, transparent);
}
.abf-combo-empty {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.15rem 0.25rem;
}
.abf-seq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.3rem 0.25rem 0.35rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #c4a06a) 18%, #1c1810);
  border: 1px solid color-mix(in srgb, var(--accent, #c4a06a) 40%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  cursor: grab;
}
.abf-seq-chip.is-dragging { opacity: 0.55; }
.abf-seq-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #c4a06a) 85%, #000);
  color: #1a140c;
  font-size: 0.68rem;
  font-weight: 800;
}
.abf-seq-name em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.7rem;
}
.abf-seq-x {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  margin: 0;
  font-weight: 600;
}
.abf-seq-chip.is-self {
  cursor: default;
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 45%, var(--border));
  background: color-mix(in srgb, var(--accent, #c4a06a) 12%, #12160f);
}
.abf-seq-lock {
  font-style: normal;
  color: var(--accent, #c4a06a);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.abf-combo-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-height: 8.5rem;
  overflow: auto;
  padding: 0.15rem;
}
.skill-action-form .abf-pool-btn,
.abf-pool-btn {
  appearance: none;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, #1a1f16 90%, #000);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}
.abf-pool-btn span {
  color: var(--muted);
  font-size: 0.68rem;
}
.abf-pool-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 50%, var(--border));
}
.abf-pool-btn.is-picked {
  opacity: 0.4;
  text-decoration: line-through;
}
.abf-help {
  margin: 0.35rem 0 0;
  line-height: 1.4;
}

.abf-card-h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.abf-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.abf-effect-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.abf-effect-row {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 0.45rem;
  background: color-mix(in srgb, #12160f 92%, #000);
  padding: 0.45rem 0.55rem 0.55rem;
  cursor: grab;
}
.abf-effect-row.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}
.abf-effect-head {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.abf-effect-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #c4a06a) 80%, #000);
  color: #1a140c;
  font-size: 0.72rem;
  font-weight: 800;
  flex: 0 0 auto;
  margin-bottom: 0.15rem;
}
.abf-effect-type {
  flex: 1 1 8rem;
  min-width: 7rem;
  margin: 0;
}
.abf-effect-actions {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
  margin-bottom: 0.15rem;
}
.abf-icon-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, #1a1f16 90%, #000);
  color: var(--text);
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.3rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.abf-icon-btn:hover {
  border-color: color-mix(in srgb, var(--accent, #c4a06a) 45%, var(--border));
}
.abf-icon-danger:hover {
  border-color: color-mix(in srgb, var(--danger, #c44) 55%, var(--border));
  color: var(--danger, #c44);
}
.abf-effect-fields {
  margin: 0;
}
.abf-json-wrap {
  margin-top: 0.55rem;
}
.abf-json-wrap textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .abf-grid-4,
  .abf-grid-5,
  .abf-grid-3,
  .abf-grid-effect {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .abf-basics {
    grid-template-columns: 1fr;
  }
  .abf-span-2,
  .abf-kind { grid-column: span 2; }
}

/* Legacy ability-form classes kept as no-ops if referenced elsewhere */
.ability-form { display: contents; }


/* �� Duke Reginald UI tutorial �� */
html.ui-tutorial-active {
  overflow: hidden;
}
.ui-tutorial {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}
.ui-tutorial[hidden] {
  display: none !important;
}
.ui-tutorial-scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 8, 0.55);
  pointer-events: auto;
}
.ui-tutorial-ring {
  position: fixed;
  z-index: 12001;
  border: 2px solid #d4b56a;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(8, 10, 8, 0.55),
    0 0 0 3px color-mix(in srgb, #d4b56a 45%, transparent);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.ui-tutorial-callout {
  position: fixed;
  z-index: 12002;
  max-width: 11rem;
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  background: #1c2218;
  border: 1px solid #d4b56a;
  color: #f0e6c8;
  font-size: 0.78rem;
  line-height: 1.25;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.ui-tutorial-target {
  position: relative;
  z-index: 12003 !important;
}
.ui-tutorial-panel {
  position: fixed;
  z-index: 12010;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  width: min(34rem, calc(100vw - 1.5rem));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: linear-gradient(165deg, #2a3224 0%, #1a2016 100%);
  border: 1px solid color-mix(in srgb, #d4b56a 55%, #3a4532);
  color: #f3ecd8;
  pointer-events: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  outline: none;
}
.ui-tutorial-portrait {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, #d4b56a 40%, transparent);
  background: #121610;
}
.ui-tutorial-portrait.is-fallback {
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  color: #d4b56a;
}
.ui-tutorial-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ui-tutorial-name {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d4b56a;
}
.ui-tutorial-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.ui-tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.15rem;
}
.ui-tutorial-step {
  font-size: 0.75rem;
  color: color-mix(in srgb, #f3ecd8 55%, transparent);
}
.ui-tutorial-actions button {
  background: #d4b56a;
  color: #1a2016;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  cursor: pointer;
}
.ui-tutorial-actions button:hover {
  filter: brightness(1.06);
}
.ui-tutorial-actions button:disabled {
  opacity: 0.65;
  cursor: wait;
}
@media (max-width: 1024px) {
  .ui-tutorial-panel {
    bottom: 0.65rem;
    grid-template-columns: 52px 1fr;
    padding: 0.7rem 0.8rem;
  }
  .ui-tutorial-portrait {
    width: 52px;
    height: 52px;
  }
  .ui-tutorial-text {
    font-size: 0.88rem;
  }
}

/* �� Mobile not-optimized disclaimer �� */
html.mobile-disclaimer-open {
  overflow: hidden;
}
.mobile-disclaimer {
  display: none;
}
@media (max-width: 1024px) {
  .mobile-disclaimer:not([hidden]) {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 13000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(6, 8, 6, 0.72);
  }
}
.mobile-disclaimer-card {
  width: min(26rem, 100%);
  padding: 1.15rem 1.2rem 1.25rem;
  border-radius: 12px;
  background: linear-gradient(165deg, #2a3224 0%, #1a2016 100%);
  border: 1px solid color-mix(in srgb, #d4b56a 50%, #3a4532);
  color: #f3ecd8;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.mobile-disclaimer-card h2 {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  color: #d4b56a;
}
.mobile-disclaimer-card p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.mobile-disclaimer-hint {
  color: color-mix(in srgb, #f3ecd8 72%, transparent);
  font-size: 0.85rem !important;
}
.mobile-disclaimer-card button {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.85rem;
  border: none;
  border-radius: 8px;
  background: #d4b56a;
  color: #1a2016;
  font-weight: 650;
  cursor: pointer;
}
.mobile-disclaimer-card button:hover {
  filter: brightness(1.05);
}

/* Content review board */
.content-review-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.content-review-page-head h1 { margin: 0 0 0.35rem; }
.content-review-page-head .muted { margin: 0; }
.content-review-count {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border, #3d4a35);
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: #d4b56a;
  font-size: 0.9rem;
  white-space: nowrap;
}
.content-review-board {
  border: 1px solid var(--border, #3d4a35);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel, #1e261c) 92%, #000);
  overflow: hidden;
}
.content-review-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, #3d4a35);
  background: rgba(0,0,0,0.18);
}
.content-review-check-all {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--muted, #a9b09a);
  font-size: 0.9rem;
  white-space: nowrap;
}
.content-review-check-all span {
  white-space: nowrap;
}
.content-review-toolbar-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-left: auto;
}
.content-review-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.content-review-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.content-review-table th,
.content-review-table td {
  padding: 0.7rem 0.75rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #3d4a35) 70%, transparent);
  white-space: nowrap;
}
.content-review-table thead th {
  color: var(--muted, #a9b09a);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
  background: rgba(0,0,0,0.22);
  border-bottom: 1px solid var(--border, #3d4a35);
}
.content-review-table tbody tr:hover {
  background: rgba(212, 181, 106, 0.05);
}
.content-review-table .col-check { width: 2.5rem; text-align: center; }
.content-review-table .col-when { width: 9.5rem; }
.content-review-table .col-who { width: 8rem; }
.content-review-table .col-op { width: 6.5rem; }
.content-review-table .col-fields { width: 4.5rem; text-align: center; }
.content-review-table .col-action { width: 6.5rem; text-align: right; }
.content-review-table .col-change {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}
.content-review-table td.col-who,
.content-review-table td.col-when {
  color: var(--muted, #a9b09a);
  font-size: 0.9rem;
}
.content-review-table td.col-change {
  color: #f0e6d0;
  font-weight: 600;
}
.content-review-op {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.content-review-op-update {
  color: #d4b56a;
  border-color: color-mix(in srgb, #d4b56a 45%, transparent);
  background: color-mix(in srgb, #d4b56a 12%, transparent);
}
.content-review-op-create {
  color: #9fc48a;
  border-color: color-mix(in srgb, #9fc48a 45%, transparent);
  background: color-mix(in srgb, #9fc48a 12%, transparent);
}
.content-review-op-delete {
  color: #c98b8b;
  border-color: color-mix(in srgb, #c98b8b 45%, transparent);
  background: color-mix(in srgb, #c98b8b 12%, transparent);
}
.content-review-detail-btn {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid color-mix(in srgb, #d4b56a 55%, transparent);
  border-radius: 6px;
  color: #d4b56a;
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
}
.content-review-detail-btn:hover {
  background: color-mix(in srgb, #d4b56a 16%, transparent);
  color: #f0e6d0;
}
.content-review-empty {
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.content-review-empty p { margin: 0 0 0.4rem; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.btn-danger {
  background: color-mix(in srgb, #8a3a3a 75%, #2a1a1a) !important;
  color: #f3d8d8 !important;
  border: 1px solid color-mix(in srgb, #c98b8b 40%, transparent) !important;
}

/* Content review detail modal */
.content-review-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.content-review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.content-review-modal-panel {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--panel, #1e261c);
  border: 1px solid var(--border, #3d4a35);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.content-review-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--border, #3d4a35);
}
.content-review-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #d4b56a;
}
.content-review-modal-meta {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.content-review-modal-close {
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
  color: #cfc6b0;
  padding: 0 0.25rem;
}
.content-review-modal-close:hover { color: #fff; }
.content-review-modal-body {
  padding: 0.85rem 1.15rem;
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.content-review-diff-table {
  width: 100%;
  border-collapse: collapse;
}
.content-review-diff-table th,
.content-review-diff-table td {
  vertical-align: top;
  padding: 0.65rem 0.7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #3d4a35) 80%, transparent);
  text-align: left;
}
.content-review-diff-table th {
  color: var(--muted, #a9b09a);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.content-review-field {
  font-weight: 650;
  white-space: nowrap;
  width: 9.5rem;
  color: #e6dcc4;
}
.content-review-value {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  background: transparent;
  border: none;
  padding: 0;
}
.diff-old {
  background: color-mix(in srgb, #c98b8b 8%, transparent);
}
.diff-new {
  background: color-mix(in srgb, #9fc48a 8%, transparent);
}
.diff-old .content-review-value { color: #e0a0a0; }
.diff-new .content-review-value { color: #b5d9a0; }
.content-review-modal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: flex-end;
  padding: 0.85rem 1.15rem;
  border-top: 1px solid var(--border, #3d4a35);
}
.content-review-modal-foot .btn-link {
  margin-right: auto;
  color: #cfc6b0;
  text-decoration: none;
}

.quest-test-tools {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.85rem;
  border: 1px dashed color-mix(in srgb, #d4b56a 45%, transparent);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}
.quest-test-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.quest-test-btn {
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, #d4b56a 50%, transparent);
  background: color-mix(in srgb, #d4b56a 12%, transparent);
  color: #d4b56a;
  font: inherit;
  font-size: 0.88rem;
}
.quest-test-btn:hover {
  background: color-mix(in srgb, #d4b56a 22%, transparent);
  color: #f0e6d0;
}