/* JourneyDen consolidated visual baseline. GENERATED — do not edit directly.
   Edit styles/edit/*.css instead. Rebuild with: npm run build:styles */

/* ==========================================================================
   Legacy baseline layer: journeyden-ui.css
   ========================================================================== */
/* JourneyDen 1.01.252 locked UI release bundle.
 * Visual baseline: V1.01.246.
 * Generated by tools/build-ui-release-bundle.js; do not hand-edit.
 */

/* JourneyDen UI source: styles/main.css | sha256:e6396e1b7eefd5b107fdad92740b84178c7f73372c1247fc47b70be245e22e4f */
:root {
  --bg: #08121b;
  --surface: #08121b;
  --surface-2: #08121b;
  --surface-3: #0d1721;
  --line: #08121b;
  --text: #f4efdf;
  --muted: #efb227;
  --gold: #d7ad56;
  --gold: #f0b62f;
  --red: #b65d5d;
  --shadow: 0 16px 40px rgba(7,16,25,.25);
  --sidebar-width: 230px;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: radial-gradient(circle at top, #0d1721 0, #08121b 48%);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select { font: inherit; }

button {
  border: 0;
  border-radius: 7px;
  padding: 9px 13px;
  background: var(--gold);
  color: #08121b;
  font-weight: 800;
  cursor: pointer;
}

button:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .42; cursor: not-allowed; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  width: min(1500px, 100%);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  border-inline: 1px solid #0d1721;
  background: rgba(7,16,25,.97);
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  border-right: 1px solid var(--line);
  background: #08121b;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 17px;
  border-bottom: 1px solid var(--line);
  background: #08121b;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(215, 173, 86, .55);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(215, 173, 86, .22), rgba(239, 178, 39, .12));
  color: var(--gold);
  font: 800 16px Georgia, serif;
}

.brand-block h1 {
  margin: 1px 0 0;
  font: 700 22px Georgia, serif;
}

.eyebrow {
  display: block;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.main-navigation {
  display: grid;
  gap: 4px;
  padding: 12px 9px;
}

.main-navigation button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.main-navigation button span {
  width: 24px;
  font-size: 17px;
  text-align: center;
}

.main-navigation button.active {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 3px 0 var(--gold);
}

.sidebar-footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.app-main {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(8,18,27,.96);
}

.topbar-title p,
.section-heading p,
.activity-header p {
  margin: 0;
  color: var(--muted);
}

.top-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-chip {
  min-width: 106px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-2);
}

.stat-chip span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stat-chip strong { font-size: 16px; }

main {
  flex: 1;
  padding: 20px;
}

.page { display: none; }
.page.active { display: block; }

.page-title-row,
.activity-header,
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.page-title-row { margin-bottom: 12px; }
.page-title-row h2,
.activity-header h2,
.section-heading h2 { margin: 2px 0 5px; }

.activity-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.activity-sidebar-panel,
.current-activity-card,
.card,
.item-card,
.bank-row,
.equipment-slot {
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.activity-sidebar-panel {
  position: sticky;
  top: 92px;
  overflow: hidden;
  border-radius: 9px;
}

.panel-heading {
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.panel-heading strong { display: block; margin-top: 3px; }

.skill-tabs {
  display: grid;
  gap: 1px;
  padding: 0;
  background: var(--line);
}

.skill-tabs button {
  width: 100%;
  padding: 11px 13px;
  border-radius: 0;
  background: #08121b;
  color: var(--muted);
  text-align: left;
}

.skill-tabs button.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: inset 3px 0 var(--gold);
}

.activity-content { min-width: 0; }

.current-activity-card {
  margin-bottom: 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(215, 173, 86, .09), rgba(239, 178, 39, .05));
}

.activity-header { padding: 15px; }

.danger {
  background: var(--red);
  color: #fff;
}

.progress-panel {
  margin: 0;
  padding: 12px 15px 15px;
  border-top: 1px solid rgba(239, 178, 39, .72);
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
}

.progress-track,
.mini-progress {
  height: 11px;
  overflow: hidden;
  border: 1px solid #08121b;
  border-radius: 4px;
  background: #08121b;
}

.progress-fill,
.mini-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold));
  transition: width .05s linear;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.activity-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card,
.item-card,
.bank-row,
.equipment-slot {
  position: relative;
  padding: 14px;
  border-radius: 9px;
}

.card:hover,
.item-card:hover,
.equipment-slot:hover {
  border-color: #08121b;
  transform: translateY(-1px);
}

.card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.card h3,
.card h2,
.item-card h3 { margin: 4px 0; }

.large-icon { font-size: 29px; }
.requirements { min-height: 42px; color: var(--muted); font-size: 13px; }
.card > button { width: 100%; margin-top: 8px; }

.active-card {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(215, 173, 86, .65), var(--shadow);
}

.unlock-tooltip {
  display: none;
  position: absolute;
  z-index: 20;
  left: 10px;
  right: 10px;
  top: calc(100% - 8px);
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: #08121b;
  box-shadow: 0 15px 35px #08121b;
}

.has-tooltip:hover .unlock-tooltip,
.has-tooltip:focus-within .unlock-tooltip,
.has-tooltip:focus .unlock-tooltip,
.has-tooltip.tooltip-open .unlock-tooltip { display: block; }

.unlock-tooltip h4 { margin: 0 0 8px; }

.unlock-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid #0d1721;
  color: #efb227;
}

.unlock-row.unlocked { color: #efb227; }

.section-heading { margin-bottom: 14px; }

.item-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.item-card { min-height: 128px; }
.item-card.empty { display: grid; place-items: center; border-style: dashed; color: #efb227; box-shadow: none; }

.item-actions,
.bank-actions { display: flex; gap: 6px; margin-top: 9px; }
.item-actions button,
.bank-actions button { flex: 1; padding: 6px 8px; }

.bank-heading { align-items: flex-end; margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filters input,
.filters select {
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #08121b;
  color: #fff;
}

.bank-list { display: grid; gap: 7px; }

.bank-row {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr 1.6fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.equipment-slot .equipped { color: var(--gold); }

.diagnostics {
  margin-top: 20px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
}

.diagnostics pre { white-space: pre-wrap; color: #cbd4cd; }

footer {
  display: flex;
  justify-content: space-between;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.text-button { padding: 0; background: none; color: #dc8c8c; }

@media (max-width: 1050px) {
  :root { --sidebar-width: 190px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-block { padding: 12px 14px; }
  .main-navigation { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px; }
  .main-navigation button { justify-content: center; padding: 9px 5px; text-align: center; }
  .main-navigation button b { display: none; }
  .sidebar-footer { display: none; }
  .activity-layout { grid-template-columns: 1fr; }
  .activity-sidebar-panel { position: static; }
  .skill-tabs { grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .skill-tabs button { text-align: center; }
  .topbar { align-items: flex-start; }
  .topbar-title { display: none; }
  .top-stats { width: 100%; justify-content: flex-end; }
  .bank-row { grid-template-columns: 1fr 1fr; }
  .bank-actions { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  main { padding: 12px; }
  .topbar { padding: 10px 12px; }
  .top-stats { flex-wrap: wrap; justify-content: stretch; }
  .stat-chip { flex: 1; min-width: 120px; }
  #saveButton { flex: 1 1 100%; }
  .activity-card-grid,
  .card-grid,
  .equipment-grid { grid-template-columns: 1fr; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-tabs { grid-template-columns: repeat(2, 1fr); }
  .section-heading,
  .activity-header,
  .bank-heading { align-items: flex-start; flex-direction: column; }
  .filters { width: 100%; }
  .filters input,
  .filters select { flex: 1; min-width: 130px; }
}

.skill-tabs button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.skill-tab-icon {
  width: 26px;
  font-size: 19px;
  text-align: center;
}

.skill-tabs button span:last-child { min-width: 0; }
.skill-tabs button b { display: block; color: inherit; }
.skill-tabs button small { display: block; margin-top: 1px; color: #efb227; font-size: 11px; }
.skill-tabs button.active small { color: #efb227; }

@media (max-width: 820px) {
  .skill-tabs button { justify-content: center; }
}

/* Equipment controls */
.equipment-options {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.equipment-options button,
.equipment-slot > button {
  width: 100%;
}

.equipment-empty-note {
  margin-top: 1rem;
  opacity: 0.7;
}

/* Keep skill and shop hover panels above surrounding UI cards. */
.has-tooltip {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.has-tooltip:hover,
.has-tooltip:focus,
.has-tooltip:focus-within,
.has-tooltip.tooltip-open {
  z-index: 1000;
  isolation: auto;
}

.has-tooltip .unlock-tooltip {
  z-index: 1001;
}

.card-grid,
.page,
main,
.app-main {
  overflow: visible;
}

/* Bank-only quantity controls */
.quantity-actions {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) repeat(3, auto) minmax(72px, auto) minmax(72px, auto);
  align-items: center;
}

.quantity-actions input {
  width: 100%;
  min-width: 72px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #08121b;
  color: #fff;
}

@media (max-width: 820px) {
  .quantity-actions { grid-template-columns: minmax(72px, 1fr) repeat(3, auto); }
  .quantity-actions button:nth-last-child(-n+2) { grid-column: span 2; }
}

/* Achievements */
.achievement-heading { align-items: flex-end; }

.achievement-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 145px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.achievement-summary strong {
  color: var(--gold);
  font-size: 24px;
}

.achievement-summary span { color: var(--muted); }

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.achievement-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.achievement-card.completed {
  border-color: rgba(215, 173, 86, .75);
  background: linear-gradient(135deg, rgba(215, 173, 86, .13), rgba(239, 178, 39, .07));
}

.achievement-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.achievement-card h3 { margin: 3px 0 5px; }
.achievement-card p { min-height: 42px; margin: 8px 0; color: var(--muted); }
.achievement-card .achievement-icon { font-size: 29px; }
.achievement-card .achievement-progress-text { display: flex; justify-content: space-between; min-height: 0; font-size: 12px; }
.achievement-card.completed .achievement-progress-text { color: #efb227; }

@media (max-width: 1050px) {
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .main-navigation { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-heading { align-items: flex-start; }
}

.achievement-reward {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(215, 173, 86, .28);
  border-radius: 7px;
  background: rgba(215, 173, 86, .07);
}
.achievement-reward span { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.achievement-reward b { font-size: 12px; line-height: 1.45; }


/* Mobile / Android-ready interaction foundations */
button,
input,
select {
  min-height: 44px;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

.has-tooltip {
  touch-action: manipulation;
}

@media (hover: none), (pointer: coarse) {
  button:hover:not(:disabled),
  .card:hover,
  .item-card:hover,
  .equipment-slot:hover {
    filter: none;
    transform: none;
  }

  .has-tooltip:hover .unlock-tooltip {
    display: none;
  }

  .has-tooltip:focus .unlock-tooltip,
  .has-tooltip:focus-within .unlock-tooltip,
  .has-tooltip.tooltip-open .unlock-tooltip {
    display: block;
  }
}

@media (max-width: 560px) {
  .main-navigation button { min-height: 48px; }
  .card > button,
  .equipment-slot > button,
  .bank-actions button,
  .item-actions button { min-height: 44px; }
}


/* Offline progress summary */
.offline-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(7,16,25,.78);
  backdrop-filter: blur(6px);
}

.offline-modal.open { display: flex; }

.offline-modal-card {
  width: min(430px, 100%);
  max-height: min(680px, 90vh);
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 22px 70px rgba(7,16,25,.55);
}

.offline-modal-card h2 { margin: 4px 0 6px; }
.offline-duration { margin: 0 0 16px; color: var(--muted); }

.offline-rewards {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.offline-reward-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.offline-reward-icon { font-size: 20px; text-align: center; }
.offline-reward-row strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.offline-continue-button { width: 100%; }


/* Achievement unlock toast */
.achievement-unlock-toast {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  z-index: 6000;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 35px rgba(7,16,25,.42);
  transform: translate(-50%, calc(-100% - 28px));
  opacity: 0;
  pointer-events: none;
  transition: transform .32s ease, opacity .25s ease;
}

.achievement-unlock-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.achievement-unlock-toast.hide {
  transform: translate(-50%, calc(-100% - 28px));
  opacity: 0;
}

.achievement-unlock-icon {
  flex: 0 0 auto;
  font-size: 25px;
  line-height: 1;
}

.achievement-unlock-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.achievement-unlock-copy span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.achievement-unlock-copy strong {
  overflow: hidden;
  color: var(--gold);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .achievement-unlock-toast {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100vw - 20px);
    padding: 10px 12px;
  }
}

/* Compact RuneScape-inspired skill overview */
#skillsPage .section-heading {
  margin-bottom: 10px;
}

.skill-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.skill-overview-card {
  position: relative;
  min-width: 0;
  padding: 10px 11px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, #08121b, #08121b);
  box-shadow: 0 8px 22px rgba(7,16,25,.18);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.skill-overview-card:hover,
.skill-overview-card:focus {
  border-color: rgba(215, 173, 86, .72);
  background: linear-gradient(145deg, #08121b, #08121b);
  transform: translateY(-1px);
  outline: none;
}

.skill-overview-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.skill-overview-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(215, 173, 86, .24);
  border-radius: 7px;
  background: rgba(215, 173, 86, .07);
  font-size: 23px;
}

.skill-overview-copy {
  min-width: 0;
}

.skill-overview-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-overview-copy span {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-overview-level {
  min-width: 42px;
  text-align: right;
}

.skill-overview-level small {
  display: block;
  color: var(--gold);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.skill-overview-level b {
  display: block;
  margin-top: -2px;
  font-size: 22px;
  line-height: 1;
}

.skill-overview-progress {
  height: 5px;
  margin: 9px 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #08121b;
  box-shadow: inset 0 0 0 1px #08121b;
}

.skill-overview-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold));
}

.skill-overview-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #efb227;
  font-size: 9px;
}

.skill-overview-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-overview-meta span:last-child {
  text-align: right;
}

/* Smaller, cleaner Activities layout */
.activity-layout {
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 10px;
}

.activity-sidebar-panel {
  border-radius: 8px;
}

.activity-sidebar-panel .panel-heading {
  padding: 9px 10px;
}

.activity-sidebar-panel .panel-heading strong {
  font-size: 13px;
}

.skill-tabs button {
  gap: 7px;
  min-height: 40px;
  padding: 8px 9px;
}

.skill-tab-icon {
  width: 22px;
  font-size: 17px;
}

.skill-tabs button b { font-size: 12px; }
.skill-tabs button small { font-size: 9px; }

.current-activity-card {
  margin-bottom: 10px;
  border-radius: 8px;
}

.activity-header {
  gap: 10px;
  padding: 10px 12px;
}

.activity-header h2 {
  margin: 1px 0 2px;
  font-size: 18px;
}

.activity-header p { font-size: 11px; }

.activity-header .danger {
  min-height: 36px;
  padding: 7px 11px;
}

.progress-panel {
  padding: 8px 12px 10px;
}

.progress-meta {
  margin-bottom: 5px;
  font-size: 11px;
}

.progress-track { height: 8px; }

.activity-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.activity-card-grid .card {
  padding: 10px;
  border-radius: 8px;
}

.activity-card-grid .card-top {
  gap: 8px;
}

.activity-card-grid .card h3 {
  margin: 2px 0;
  font-size: 14px;
}

.activity-card-grid .large-icon { font-size: 23px; }

.activity-card-grid .requirements {
  min-height: 0;
  margin: 7px 0 4px;
  font-size: 11px;
  line-height: 1.3;
}

.activity-card-grid .card > p:not(.requirements) {
  margin: 4px 0;
  color: #efb227;
  font-size: 10px;
}

.activity-card-grid .card > button {
  min-height: 36px;
  margin-top: 7px;
  padding: 6px 9px;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .skill-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .activity-layout { grid-template-columns: 1fr; }
  .skill-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skill-tabs button { min-height: 42px; }
}

@media (max-width: 560px) {
  .skill-overview-grid { gap: 6px; }
  .skill-overview-card { padding: 9px; }
  .skill-overview-main { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; }
  .skill-overview-icon { width: 34px; height: 34px; font-size: 20px; }
  .skill-overview-copy strong { font-size: 12px; }
  .skill-overview-copy span { font-size: 9px; }
  .skill-overview-level { min-width: 34px; }
  .skill-overview-level b { font-size: 18px; }
  .skill-overview-meta { font-size: 8px; }
  .activity-card-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .skill-overview-grid,
  .activity-card-grid { grid-template-columns: 1fr; }
}


/* Touch-friendly skill details */
.skill-details-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.skill-details-modal.is-open { display: flex; }
.skill-details-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,16,25,.62);
  backdrop-filter: blur(3px);
}
.skill-details-panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(620px, 82vh);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #08121b;
  box-shadow: 0 18px 60px rgba(7,16,25,.45);
  padding: 20px;
}
.skill-details-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.skill-details-header {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-right: 38px;
}
.skill-details-header h2 { margin: 0 0 3px; }
.skill-details-icon { font-size: 38px; }
.skill-details-level { opacity: .78; }
.skill-details-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 18px 0;
}
.skill-details-stats > div {
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.055);
}
.skill-details-stats span,
.skill-details-stats strong { display: block; }
.skill-details-stats span { font-size: 12px; opacity: .68; margin-bottom: 4px; }
.skill-details-unlocks h3 { margin: 0 0 10px; }
.skill-details-muted { opacity: .7; }
.skill-card, .skill-tile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.skill-card:focus-visible, .skill-tile:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* The details are now opened by click/tap rather than hover. */
.skill-card:hover .skill-hover,
.skill-card:hover .skill-tooltip,
.skill-tile:hover .skill-hover,
.skill-tile:hover .skill-tooltip { display: none !important; }

@media (max-width: 600px) {
  .skill-details-modal { align-items: flex-end; padding: 10px; }
  .skill-details-panel {
    width: 100%;
    max-height: 78vh;
    border-radius: 18px 18px 12px 12px;
    padding: 18px;
  }
  .skill-details-stats { grid-template-columns: 1fr; }
}

/* Click-only skill details: disable all hover detail popups */
.skill-card .skill-hover,
.skill-card .skill-tooltip,
.skill-tile .skill-hover,
.skill-tile .skill-tooltip,
.skill-card:hover .skill-hover,
.skill-card:hover .skill-tooltip,
.skill-tile:hover .skill-hover,
.skill-tile:hover .skill-tooltip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Skill modal only appears after click/tap */
.skill-details-modal { display: none !important; }
.skill-details-modal.is-open { display: flex !important; }

/* HARD DISABLE: absolutely no hover UI on skill tiles */
.skill-card:hover,
.skill-tile:hover {
  transform: none !important;
}

.skill-card:hover::before,
.skill-card:hover::after,
.skill-tile:hover::before,
.skill-tile:hover::after,
.skill-card::before,
.skill-card::after,
.skill-tile::before,
.skill-tile::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Common tooltip/detail containers: never show from hover */
.skill-card .tooltip,
.skill-card .hover-info,
.skill-card .hover-details,
.skill-card .unlock-tooltip,
.skill-card .skill-hover,
.skill-card .skill-tooltip,
.skill-tile .tooltip,
.skill-tile .hover-info,
.skill-tile .hover-details,
.skill-tile .unlock-tooltip,
.skill-tile .skill-hover,
.skill-tile .skill-tooltip,
.skill-card:hover .tooltip,
.skill-card:hover .hover-info,
.skill-card:hover .hover-details,
.skill-card:hover .unlock-tooltip,
.skill-card:hover .skill-hover,
.skill-card:hover .skill-tooltip,
.skill-tile:hover .tooltip,
.skill-tile:hover .hover-info,
.skill-tile:hover .hover-details,
.skill-tile:hover .unlock-tooltip,
.skill-tile:hover .skill-hover,
.skill-tile:hover .skill-tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove native title hover hint on styled skill tiles where possible */
.skill-card,
.skill-tile {
  cursor: pointer;
}


/* Skills: click/tap only. No hover/focus reveal panel exists on skill cards. */
.skill-overview-card > .unlock-tooltip { display: none !important; }
.skill-overview-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.skill-overview-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skill-details-modal {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 16px;
}
.skill-details-modal.is-open { display: flex !important; }
.skill-details-backdrop { position: absolute; inset: 0; background: rgba(7,16,25,.66); backdrop-filter: blur(3px); }
.skill-details-panel { position: relative; width: min(440px,100%); max-height: 82vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #08121b; box-shadow: 0 20px 60px rgba(7,16,25,.55); padding: 20px; }
.skill-details-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 9px; font-size: 26px; line-height: 1; }
.skill-modal-unlock-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--line); color:var(--muted); }
.skill-modal-unlock-row.unlocked { color:#efb227; }
@media (max-width:600px) {
  .skill-details-modal { align-items:flex-end; padding:10px; }
  .skill-details-panel { width:100%; max-height:78vh; border-radius:18px 18px 12px 12px; }
}


/* ===== Clean Achievements page ===== */
.achievement-toolbar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.achievement-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.achievement-filter,
.achievement-tools select,
.achievement-tools input {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: inherit;
}

.achievement-filter {
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 700;
}

.achievement-filter.is-active {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
}

.achievement-tools {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.achievement-tools select,
.achievement-tools input {
  padding: 7px 10px;
}

.achievement-tools input {
  width: min(220px, 100%);
}

.achievement-filter-summary {
  grid-column: 1 / -1;
  font-size: 12px;
  opacity: .68;
}

.achievements-grid,
.achievement-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
}

.achievement-overview-card {
  position: relative;
  min-width: 0;
  padding: 13px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}

.achievement-overview-card:hover {
  transform: none !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.achievement-overview-card.is-unlocked {
  border-color: rgba(255,255,255,.16) !important;
}

.achievement-overview-card.is-locked {
  opacity: .72;
}

.achievement-state-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 9px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  background: rgba(255,255,255,.065);
}

.achievement-overview-card.is-unlocked .achievement-state-pill {
  background: rgba(255,255,255,.12);
}

.achievement-overview-card h3,
.achievement-overview-card h4,
.achievement-overview-card .achievement-name,
.achievement-overview-card .achievement-title {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
}

.achievement-overview-card p {
  margin: 4px 0 !important;
  line-height: 1.35;
}

.achievement-overview-card progress,
.achievement-overview-card .progress,
.achievement-overview-card .progress-bar {
  height: 6px !important;
}

@media (max-width: 900px) {
  .achievements-grid,
  .achievement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .achievement-toolbar {
    grid-template-columns: 1fr;
  }

  .achievement-tools {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .achievement-tools > * {
    flex: 1 1 145px;
  }
}

@media (max-width: 560px) {
  .achievements-grid,
  .achievement-list {
    grid-template-columns: 1fr;
  }

  .achievement-toolbar {
    padding: 10px;
  }

  .achievement-filter-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .achievement-filter {
    padding-inline: 6px;
  }

  .achievement-tools {
    display: grid;
    grid-template-columns: 1fr;
  }

  .achievement-tools input {
    width: 100%;
  }
}


/* ===== Achievement page v2: compact, Skills-inspired ===== */
#achievementsPage .achievement-heading {
  margin-bottom: 12px;
}

.achievement-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.achievement-filter-tabs,
.achievement-filter-tools {
  display: flex;
  align-items: center;
  gap: 7px;
}

.achievement-filter-tabs button {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.achievement-filter-tabs button.active {
  color: #fff;
  border-color: rgba(215, 173, 86, .7);
  background: rgba(215, 173, 86, .12);
}

.achievement-filter-tools select,
.achievement-filter-tools input {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #08121b;
  color: #fff;
}

#achievementSearchInput {
  width: 180px;
}

.achievement-filter-summary {
  min-height: 0 !important;
  margin: 0 0 9px !important;
  color: var(--muted);
  font-size: 12px;
}

#achievementCards.achievement-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#achievementCards .achievement-card {
  padding: 11px 12px;
  border-radius: 10px;
  box-shadow: none;
}

#achievementCards .achievement-card.completed {
  background: linear-gradient(135deg, rgba(215, 173, 86, .10), rgba(239, 178, 39, .055));
}

.achievement-card-main {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

#achievementCards .achievement-icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 24px;
}

.achievement-card-copy {
  min-width: 0;
  flex: 1;
}

.achievement-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#achievementCards .achievement-card h3 {
  margin: 1px 0 3px;
  font-size: 15px;
}

#achievementCards .achievement-card p {
  min-height: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.achievement-status-pill {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.completed .achievement-status-pill {
  color: var(--gold);
  background: rgba(215,173,86,.12);
}

.achievement-progress-bar {
  height: 5px;
  margin: 10px 0 7px;
}

.achievement-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11px;
}

.achievement-reward-inline {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.achievement-reward-inline b {
  color: var(--text);
}

@media (max-width: 900px) {
  .achievement-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .achievement-filter-tools {
    flex-wrap: wrap;
  }
  .achievement-filter-tools > * {
    flex: 1 1 150px;
  }
  #achievementSearchInput {
    width: auto;
  }
}

@media (max-width: 620px) {
  #achievementCards.achievement-grid {
    grid-template-columns: 1fr;
  }
  .achievement-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .achievement-filter-tools {
    display: grid;
    grid-template-columns: 1fr;
  }
  .achievement-card-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .achievement-reward-inline {
    text-align: left;
    white-space: normal;
  }
}


/* ===== Categorized Smithing & Construction UI ===== */
#activityCards.categorized-activity-root {
  display: block !important;
}

.activity-category-section {
  margin-bottom: 18px;
}

.activity-category-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 0 2px;
}

.activity-category-heading h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.activity-category-heading > span {
  color: var(--muted);
  font-size: 12px;
}

.activity-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.activity-category-grid .card {
  min-width: 0;
}

@media (max-width: 1050px) {
  .activity-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .activity-category-grid {
    grid-template-columns: 1fr;
  }

  .activity-category-heading {
    align-items: flex-start;
  }
}


/* ===== Google account + cloud saves ===== */
.cloud-account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cloud-signed-in,
.cloud-signed-out {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cloud-user-copy {
  display: flex;
  flex-direction: column;
  max-width: 190px;
}

.cloud-user-copy strong,
.cloud-user-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-user-copy span {
  color: var(--muted);
  font-size: 11px;
}

.google-signin-button {
  white-space: nowrap;
}

.cloud-sync-status {
  width: 100%;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}

.cloud-sync-status[data-state="connected"] { color: #efb227; }
.cloud-sync-status[data-state="syncing"] { color: var(--gold); }
.cloud-sync-status[data-state="error"],
.cloud-sync-status[data-state="warning"] { color: #e8a39a; }

.cloud-conflict-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(7,16,25,.72);
  backdrop-filter: blur(4px);
}

.cloud-conflict-modal.open {
  display: grid;
}

.cloud-conflict-card {
  width: min(520px, 100%);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.cloud-conflict-card h2 {
  margin: 4px 0 8px;
}

.cloud-conflict-card > p {
  color: var(--muted);
  line-height: 1.5;
}

.cloud-conflict-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 15px;
}

.cloud-conflict-options button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-height: 78px;
  padding: 12px;
  text-align: left;
}

.cloud-conflict-options button span {
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 820px) {
  .topbar {
    align-items: flex-start;
  }

  .cloud-account {
    justify-content: flex-start;
    width: 100%;
  }

  .cloud-sync-status {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .cloud-signed-in {
    flex-wrap: wrap;
  }

  .cloud-user-copy {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .cloud-conflict-options {
    grid-template-columns: 1fr;
  }
}


/* ===== Online leaderboards ===== */
.leaderboard-tabs { display:flex; gap:7px; overflow-x:auto; padding-bottom:8px; margin-bottom:12px; }
.leaderboard-tabs button { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-height:38px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--muted); }
.leaderboard-tabs button.active { color:#fff; border-color:rgba(215,173,86,.7); background:rgba(215,173,86,.12); }
.leaderboard-panel { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.leaderboard-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border-bottom:1px solid var(--line); }
.leaderboard-panel-heading h3 { margin:2px 0 0; }
.leaderboard-header-row,.leaderboard-row { display:grid; grid-template-columns:72px minmax(0,1fr) 110px; gap:10px; align-items:center; }
.leaderboard-header-row { padding:8px 14px; background:var(--surface-2); color:var(--muted); font-size:11px; text-transform:uppercase; }
.leaderboard-row { padding:10px 14px; border-top:1px solid rgba(255,255,255,.04); }
.leaderboard-row.current-player { background:rgba(215,173,86,.08); }
.leaderboard-rank { color:var(--gold); font-weight:800; }
.leaderboard-player { display:flex; align-items:center; gap:9px; min-width:0; }
.leaderboard-player img,.leaderboard-avatar { width:30px; height:30px; flex:0 0 30px; border-radius:50%; }
.leaderboard-player img { object-fit:cover; }
.leaderboard-avatar { display:grid; place-items:center; background:var(--surface-2); }
.leaderboard-player strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-score { text-align:right; font-weight:800; }
.leaderboard-empty { padding:20px; text-align:center; color:var(--muted); }
@media (max-width:560px) {
  .leaderboard-header-row,.leaderboard-row { grid-template-columns:54px minmax(0,1fr) 72px; padding-inline:10px; }
}


/* Leaderboard visibility and live-refresh polish */
#leaderboardsPage .leaderboard-panel {
  min-height: 260px;
}

#leaderboardsPage .leaderboard-rows {
  min-height: 120px;
}

@media (max-width: 820px) {
  .main-navigation {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .main-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ===== Settings page ===== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.settings-card h3 {
  margin: 4px 0 7px;
}

.settings-card p {
  color: var(--muted);
  line-height: 1.45;
}

.settings-name-row,
.settings-action-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-name-row input {
  flex: 1 1 220px;
  min-width: 0;
}

.settings-hint {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

#settingsPage .cloud-sync-status {
  width: auto;
  display: block;
  margin-top: 8px;
  text-align: left;
}

#settingsPage .cloud-signed-in,
#settingsPage .cloud-signed-out {
  align-items: flex-start;
  flex-direction: column;
}

#settingsPage .cloud-user-copy {
  max-width: 100%;
}

@media (max-width: 760px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* Google identity is not shown in leaderboards. */
.leaderboard-player img {
  display: none !important;
}


/* ===== Equipment & Tool Progression 2.0 ===== */
.equipment-progression {
  display: grid;
  gap: 16px;
}

.equipment-progression-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.equipment-progression-header {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(260px, 1.25fr) minmax(180px, .8fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.equipment-slot-title h2,
.equipment-current h3 {
  margin: 3px 0 5px;
}

.equipment-slot-title p,
.equipment-current p {
  margin: 0;
  color: var(--muted);
}

.equipment-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.equipment-current-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 9px;
  background: var(--surface-3);
  font-size: 27px;
}

.equipment-current-copy {
  min-width: 0;
  flex: 1;
}

.equipment-current-copy b {
  color: var(--gold);
}

.equipment-current-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.equipment-current-actions button {
  min-height: 36px;
  padding: 6px 9px;
  font-size: 12px;
}

.equipment-secondary-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

.equipment-next-upgrade {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  padding: 11px;
  border: 1px solid rgba(215,173,86,.3);
  border-radius: 10px;
  background: rgba(215,173,86,.06);
}

.equipment-next-upgrade > span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.equipment-next-upgrade small {
  color: var(--muted);
}

.equipment-next-upgrade.mastered {
  border-color: var(--line);
  background: var(--surface);
}

.tool-tier-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  padding: 12px;
}

.tool-tier-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #08121b;
}

.tool-tier-card.equipped {
  border-color: var(--gold);
  background: rgba(215,173,86,.08);
  box-shadow: inset 0 0 0 1px rgba(215,173,86,.2);
}

.tool-tier-card.owned {
  border-color: rgba(239, 178, 39, .6);
}

.tool-tier-card.locked {
  opacity: .55;
}

.tool-tier-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.tool-tier-icon {
  font-size: 24px;
}

.tool-tier-name {
  display: block;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-tier-top small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .08em;
}

.tool-tier-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px solid rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 11px;
}

.tool-tier-stat b {
  color: var(--text);
}

.tool-tier-status {
  width: fit-content;
  margin: 8px 0;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.tool-tier-status.equipped { background: rgba(215,173,86,.16); color: var(--gold); }
.tool-tier-status.owned { background: rgba(239, 178, 39, .16); color: #efb227; }
.tool-tier-status.unlocked { background: rgba(255,255,255,.06); color: var(--muted); }
.tool-tier-status.locked { background: rgba(182,93,93,.12); color: #d99a9a; }

.tool-tier-card > button {
  width: 100%;
  min-height: 36px;
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 11px;
}

.tool-tier-guidance {
  display: block;
  min-height: 30px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

@media (max-width: 1150px) {
  .equipment-progression-header {
    grid-template-columns: 1fr 1.5fr;
  }
  .equipment-next-upgrade {
    grid-column: 1 / -1;
  }
  .tool-tier-track {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .equipment-progression-header {
    grid-template-columns: 1fr;
  }
  .equipment-next-upgrade {
    grid-column: auto;
  }
  .equipment-current {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .equipment-current-actions {
    width: 100%;
    margin-left: 0;
  }
  .tool-tier-track {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 480px) {
  .tool-tier-track {
    grid-template-columns: 1fr;
  }
}


/* ===== Milestones & Mastery v1 ===== */
.mastery-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  gap: 10px;
  margin: 12px 0;
}

.mastery-summary-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.mastery-summary-card span,
.mastery-summary-card small {
  display: block;
  color: var(--muted);
}

.mastery-summary-card strong {
  display: block;
  margin: 2px 0;
  font-size: 22px;
  color: var(--gold);
}

.mastery-skill-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0 12px;
}

.mastery-skill-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.mastery-skill-tabs button.active {
  border-color: rgba(215,173,86,.65);
  background: rgba(215,173,86,.12);
  color: var(--text);
}

.mastery-section {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.mastery-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mastery-section-heading h3 {
  margin: 2px 0 0;
}

.mastery-section-heading > span {
  color: var(--muted);
  font-size: 11px;
}

.mastery-milestone-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
}

.mastery-milestone-card {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.mastery-milestone-card.claimed {
  border-color: rgba(239, 178, 39, .55);
  background: rgba(239, 178, 39, .07);
}

.mastery-milestone-card.locked {
  opacity: .58;
}

.mastery-milestone-level {
  text-align: center;
  min-width: 42px;
}

.mastery-milestone-level small {
  display: block;
  color: var(--muted);
  font-size: 8px;
}

.mastery-milestone-level strong {
  font-size: 22px;
  color: var(--gold);
}

.mastery-milestone-card h4 {
  margin: 0 0 2px;
}

.mastery-milestone-card p,
.mastery-milestone-card span {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.mastery-activity-list {
  display: grid;
  gap: 7px;
}

.mastery-activity-row {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 70px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
}

.mastery-activity-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-3);
  font-size: 22px;
}

.mastery-activity-title,
.mastery-activity-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.mastery-activity-title span,
.mastery-activity-meta {
  color: var(--muted);
  font-size: 10px;
}

.mastery-progress {
  height: 5px;
  margin: 5px 0;
  overflow: hidden;
  border-radius: 999px;
  background: #08121b;
}

.mastery-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold));
}

.mastery-activity-bonus {
  text-align: right;
}

.mastery-activity-bonus small {
  display: block;
  color: var(--muted);
}

.mastery-activity-bonus strong {
  color: var(--gold);
}

@media (max-width: 1000px) {
  .mastery-milestone-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 650px) {
  .mastery-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mastery-milestone-grid {
    grid-template-columns: 1fr;
  }

  .mastery-activity-row {
    grid-template-columns: 38px minmax(0,1fr) 60px;
  }

  .mastery-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* ===== Bank & Inventory 2.0 FIXED ===== */
.bank-toolbar-v2 {
  display:grid;
  grid-template-columns:minmax(180px,1fr) 170px 190px;
  gap:8px;
  margin:12px 0 10px;
}
.bank-toolbar-v2 input,.bank-toolbar-v2 select,.bank-sell-x-v2 input {
  min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#08121b;color:var(--text);
}
.bank-discovery-v2 {
  display:grid;grid-template-columns:auto auto minmax(120px,1fr);align-items:center;gap:10px;
  padding:10px 12px;margin-bottom:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
}
.bank-discovery-v2 span { color:var(--muted); }
.bank-discovery-bar { height:7px;overflow:hidden;border-radius:999px;background:#08121b; }
.bank-discovery-bar span { display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold)); }
.bank-card-grid-v2 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px; }
.bank-card-v2 {
  display:block;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--text);text-align:left;box-shadow:var(--shadow);
}
.bank-card-v2:hover { border-color:#08121b; }
.bank-card-top-v2,.bank-card-meta-v2 { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.bank-card-top-v2 > span { font-size:28px; }
.bank-card-top-v2 small { color:var(--muted);text-transform:uppercase;font-size:9px; }
.bank-card-v2 > strong { display:block;margin:7px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.bank-card-meta-v2 { color:var(--muted);font-size:11px; }
.bank-empty-v2 { grid-column:1/-1;padding:24px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);text-align:center; }

.bank-item-modal-v2 { position:fixed;inset:0;z-index:12500;display:none;place-items:center;padding:16px; }
.bank-item-modal-v2.open { display:grid; }
.bank-item-backdrop-v2 { position:absolute;inset:0;background:rgba(7,16,25,.68);backdrop-filter:blur(4px); }
.bank-item-panel-v2 {
  position:relative;width:min(620px,100%);max-height:86vh;overflow:auto;padding:18px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);box-shadow:0 20px 70px rgba(7,16,25,.5);
}
.bank-item-close-v2 { position:absolute;top:10px;right:10px;width:36px;height:36px;padding:0;font-size:24px; }
.bank-item-header-v2 { display:flex;align-items:center;gap:12px;padding-right:42px; }
.bank-item-header-v2 > span { font-size:34px; }
.bank-item-header-v2 h2 { margin:2px 0; }
.bank-item-stats-v2 { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0; }
.bank-item-stats-v2 > div { padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2); }
.bank-item-stats-v2 small,.bank-item-stats-v2 strong { display:block; }
.bank-item-stats-v2 small { color:var(--muted); }
.bank-item-equipment-v2 {
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;margin-bottom:12px;border:1px solid rgba(215,173,86,.35);
  border-radius:9px;background:rgba(215,173,86,.07);
}
.bank-item-equipment-v2 small { width:100%;color:var(--muted); }
.bank-item-info-v2 { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.bank-item-info-v2 > div { padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2); }
.bank-item-info-v2 ul { margin:7px 0 0;padding-left:18px;color:var(--muted);font-size:11px; }
.bank-item-info-v2 p { color:var(--muted);font-size:11px; }
.bank-sell-v2 { margin-top:12px;padding-top:12px;border-top:1px solid var(--line); }
.bank-sell-buttons-v2,.bank-sell-x-v2 { display:flex;gap:7px;margin-top:8px; }
.bank-sell-buttons-v2 button { flex:1; }
.bank-sell-x-v2 input { min-width:0;flex:1; }

@media(max-width:1000px){.bank-card-grid-v2{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:720px){
  .bank-toolbar-v2{grid-template-columns:1fr;}
  .bank-card-grid-v2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bank-item-info-v2{grid-template-columns:1fr;}
  .bank-discovery-v2{grid-template-columns:1fr auto;}
  .bank-discovery-bar{grid-column:1/-1;}
}
@media(max-width:460px){.bank-card-grid-v2{grid-template-columns:1fr;}}


/* ===== Collections merged into Mastery ===== */
.mastery-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 240px));
}

.mastery-collection-controls {
  margin-top: 4px;
}

.mastery-collection-grid {
  margin-top: 8px;
}

#achievementsPage[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .mastery-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Clickable Activity Tiles - Fixed ===== */
.activity-click-card {
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--line);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.activity-click-card:hover {
  border-color: #efb227;
  background: rgba(255,255,255,.025);
}

.activity-click-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.activity-click-card.active-card {
  border-color: var(--gold) !important;
  background: rgba(215,173,86,.08);
  box-shadow: inset 0 0 0 1px rgba(215,173,86,.2);
}

.activity-click-card.activity-disabled {
  cursor: not-allowed;
  opacity: .62;
}

.activity-card-state {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.activity-card-state.active {
  color: var(--gold);
}

.activity-card-state.blocked {
  color: #c98f8f;
}


/* ===== Bank UI Cleanup ===== */
.bank-nav-v3 {
  display:grid;
  gap:10px;
  margin:12px 0;
}

.bank-category-tabs {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding-bottom:2px;
}

.bank-category-tabs button {
  flex:0 0 auto;
  min-height:34px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
}

.bank-category-tabs button:hover {
  border-color:var(--line);
  color:var(--text);
}

.bank-category-tabs button.active {
  border-color:var(--gold);
  background:rgba(215,173,86,.08);
  color:var(--text);
}

.bank-tools-v3 {
  display:grid;
  grid-template-columns:minmax(180px,1fr) 220px;
  gap:8px;
}

.bank-tools-v3 input,
.bank-tools-v3 select {
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#08121b;
  color:var(--text);
}

.bank-card-grid-v2 {
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}

.bank-card-v2 {
  min-height:112px;
  padding:10px;
}

.bank-card-top-v3,
.bank-card-bottom-v3 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.bank-card-icon-v3 {
  font-size:26px;
}

.bank-card-count-v3 {
  color:var(--text);
  font-size:11px;
  font-weight:800;
}

.bank-card-name-v3 {
  display:block;
  margin:9px 0 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.bank-card-bottom-v3 {
  color:var(--muted);
  font-size:10px;
  text-transform:capitalize;
}

.bank-item-panel-v2 {
  width:min(560px,100%);
}

.bank-item-stats-v2 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.bank-item-info-v2 {
  gap:8px;
}

.bank-discovery-v2 {
  padding:8px 10px;
}

@media(max-width:1100px) {
  .bank-card-grid-v2 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media(max-width:850px) {
  .bank-card-grid-v2 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:650px) {
  .bank-tools-v3 { grid-template-columns:1fr; }
  .bank-card-grid-v2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:420px) {
  .bank-card-grid-v2 { grid-template-columns:1fr 1fr; }
  .bank-card-v2 { min-height:104px; }
}


/* ===== Bank 2.1 Compact Stacks ===== */
.bank-heading {
  align-items:end;
}

.bank-stack-note {
  margin:3px 0 0;
  color:var(--muted);
  font-size:10px;
}

.bank-card-grid-v2 {
  grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
  gap:7px;
}

.bank-card-v2 {
  min-height:96px;
  padding:9px;
}

.bank-card-icon-v3 {
  font-size:24px;
}

.bank-card-count-v3 {
  max-width:72px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

.bank-card-name-v3 {
  margin:7px 0 6px;
  font-size:12px;
}

.bank-card-bottom-v3 {
  font-size:9px;
}

.bank-category-tabs {
  padding-bottom:4px;
}

.bank-category-tabs button {
  min-height:32px;
  padding:5px 9px;
}

.bank-tools-v3 input,
.bank-tools-v3 select {
  min-height:38px;
}

.bank-item-stats-v2 > div {
  min-width:0;
}

.bank-stack-limit-v3 {
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}

@media(max-width:520px){
  .bank-card-grid-v2 {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .bank-card-v2 {
    min-height:90px;
    padding:8px;
  }
  .bank-card-icon-v3 { font-size:22px; }
  .bank-card-name-v3 { font-size:11px; }
}

@media(max-width:390px){
  .bank-card-grid-v2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ===== RuneScape-Style Bank ===== */
.bank-shell-rs{border:1px solid var(--line);border-radius:10px;background:#08121b;overflow:hidden;box-shadow:var(--shadow)}
.bank-topbar-rs{padding:10px;border-bottom:1px solid var(--line);background:#08121b}
.bank-tools-rs{display:grid;grid-template-columns:minmax(180px,1fr) 220px;gap:8px;margin-top:8px}
.bank-tools-rs input,.bank-tools-rs select{min-height:38px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#08121b;color:var(--text)}
.bank-content-rs{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:420px}
.bank-grid-panel-rs{min-width:0;padding:10px}
.bank-discovery-rs{display:grid;grid-template-columns:auto auto minmax(100px,1fr);gap:8px;align-items:center;margin-bottom:8px;color:var(--muted);font-size:10px}
.bank-discovery-rs strong{color:var(--text)}
.bank-slot-grid-rs{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px}
.bank-slot-rs{position:relative;aspect-ratio:1/1;min-width:0;padding:4px;border:1px solid #0d1721;border-radius:5px;background:#08121b;color:var(--text);cursor:pointer}
.bank-slot-rs:hover{border-color:#efb227;background:#08121b}
.bank-slot-rs.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(215,173,86,.35);background:rgba(215,173,86,.08)}
.bank-slot-icon-rs{display:grid;place-items:center;width:100%;height:100%;font-size:28px}
.bank-slot-count-rs{position:absolute;right:3px;bottom:2px;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 3px;border-radius:3px;background:rgba(7,16,25,.66);color:#f4df95;font-size:9px;font-weight:800;line-height:1.2}
.bank-selected-panel-rs{border-left:1px solid var(--line);background:#08121b;padding:12px}
.bank-selected-empty-rs{display:flex;min-height:100%;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--muted);gap:6px}
.bank-selected-empty-icon{font-size:34px;opacity:.7}
.bank-selected-header-rs{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bank-selected-header-rs h3{margin:2px 0 0}
.bank-selected-icon-rs{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:7px;background:#08121b;font-size:28px}
.bank-selected-stats-rs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.bank-selected-stats-rs>div{padding:7px;border:1px solid var(--line);border-radius:6px;background:#08121b}
.bank-selected-stats-rs small,.bank-selected-stats-rs strong{display:block}
.bank-selected-stats-rs small{color:var(--muted);font-size:9px}
.bank-selected-info-rs{display:grid;gap:7px;margin-bottom:10px}
.bank-selected-info-rs>div{padding:8px;border:1px solid var(--line);border-radius:6px;background:#08121b}
.bank-selected-info-rs ul{margin:6px 0 0;padding-left:17px;color:var(--muted);font-size:10px}
.bank-selected-info-rs p{margin:6px 0 0;color:var(--muted);font-size:10px}
.bank-selected-equipment-rs{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:8px;border:1px solid rgba(215,173,86,.35);border-radius:6px;background:rgba(215,173,86,.06)}
.bank-selected-equipment-rs small,.bank-selected-equipment-rs strong{display:block}
.bank-equipped-pill-rs{margin-left:auto;padding:3px 6px;border-radius:999px;background:rgba(239, 178, 39, .15);color:#efb227;font-size:9px;font-weight:800}
.bank-upgrade-note-rs{width:100%;color:var(--muted)}
.bank-sell-rs{padding-top:10px;border-top:1px solid var(--line)}
.bank-sell-buttons-rs,.bank-sell-x-rs{display:flex;gap:6px;margin-top:6px}
.bank-sell-buttons-rs button{flex:1}
.bank-sell-x-rs input{min-width:0;flex:1;min-height:36px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#08121b;color:var(--text)}
.bank-empty-rs{grid-column:1/-1;padding:24px;color:var(--muted);text-align:center}
@media(max-width:900px){.bank-content-rs{grid-template-columns:1fr}.bank-selected-panel-rs{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:600px){.bank-tools-rs{grid-template-columns:1fr}.bank-slot-grid-rs{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}.bank-slot-icon-rs{font-size:25px}.bank-category-tabs{overflow-x:auto;flex-wrap:nowrap}}


/* ===== B1 Equipment Slot Foundation ===== */
.equipment-foundation-section {
  margin-bottom:14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.equipment-foundation-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.equipment-foundation-heading h3 {
  margin:2px 0 0;
}

.equipment-foundation-heading small {
  color:var(--muted);
}

.equipment-slot-overview {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
}

.equipment-slot-foundation {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.equipment-slot-foundation.filled {
  border-color:rgba(215,173,86,.45);
  background:rgba(215,173,86,.06);
}

.equipment-slot-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:7px;
  background:#08121b;
  font-size:20px;
}

.equipment-slot-foundation small,
.equipment-slot-foundation strong {
  display:block;
}

.equipment-slot-foundation small {
  color:var(--muted);
  font-size:9px;
}

.equipment-slot-foundation strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}

@media(max-width:900px){
  .equipment-slot-overview{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:600px){
  .equipment-foundation-heading{align-items:flex-start;flex-direction:column;}
  .equipment-slot-overview{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ===== B2 Weapon & Armor Item Data ===== */
.equipment-preview-heading {
  margin-top:14px;
  margin-bottom:8px;
}

.equipment-preview-heading h3 {
  margin:2px 0;
}

.equipment-preview-heading small {
  color:var(--muted);
}

.equipment-item-preview-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.equipment-item-preview-card {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
}

.equipment-item-preview-icon {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:6px;
  background:#08121b;
  font-size:19px;
}

.equipment-item-preview-card strong,
.equipment-item-preview-card small {
  display:block;
}

.equipment-item-preview-card strong {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}

.equipment-item-preview-card small {
  color:var(--muted);
  font-size:9px;
  text-transform:capitalize;
}

@media(max-width:800px){
  .equipment-item-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:480px){
  .equipment-item-preview-grid{grid-template-columns:1fr;}
}


/* ===== B3 Equipment Stats ===== */
.equipment-combat-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.equipment-combat-summary h3{margin:2px 0 0}
.equipment-combat-stats{display:grid;grid-template-columns:repeat(3,minmax(70px,1fr));gap:6px}
.equipment-combat-stats>div{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#08121b;text-align:center}
.equipment-combat-stats small,.equipment-combat-stats strong{display:block}
.equipment-combat-stats small{color:var(--muted);font-size:9px}
.equipment-preview-stats{display:block;margin-top:2px;color:var(--gold);font-size:8px;font-weight:800}
@media(max-width:650px){.equipment-combat-summary{align-items:stretch;flex-direction:column}.equipment-combat-stats{width:100%}}


/* ===== C1 HP & Health State ===== */
.health-header-stat {
  min-width:140px;
}

.health-bar {
  width:100%;
  height:6px;
  margin-top:5px;
  overflow:hidden;
  border-radius:999px;
  background:#08121b;
}

.health-bar span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#9b2f2f,#d95c5c);
  transition:width .18s ease;
}


/* ===== C2 Enemy System ===== */
.enemy-preview-heading{margin-top:16px;margin-bottom:8px}
.enemy-preview-heading h3{margin:2px 0}
.enemy-preview-heading small{color:var(--muted)}
.enemy-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.enemy-preview-card{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}
.enemy-preview-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:7px;background:#08121b;font-size:22px}
.enemy-preview-card strong,.enemy-preview-card small,.enemy-preview-card div>span{display:block}
.enemy-preview-card small{margin-top:2px;color:var(--muted);font-size:9px}
.enemy-preview-card div>span{margin-top:2px;color:var(--gold);font-size:8px;font-weight:800}
@media(max-width:600px){.enemy-preview-grid{grid-template-columns:1fr}}


/* ===== C3 Combat Loop ===== */
.combat-layout{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);gap:12px}
.combat-roster-panel,.combat-battle-panel{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.combat-panel-heading h3{margin:2px 0 10px}
.combat-enemy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.combat-enemy-card{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--text);text-align:left}
.combat-enemy-card.active{border-color:var(--gold);background:rgba(215,173,86,.08)}
.combat-enemy-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:7px;background:#08121b;font-size:22px}
.combat-enemy-card strong,.combat-enemy-card small,.combat-enemy-card div>span{display:block}
.combat-enemy-card small{margin-top:2px;color:var(--muted);font-size:9px}
.combat-enemy-card div>span{margin-top:2px;color:var(--gold);font-size:8px;font-weight:800}
.combat-battle-view{min-height:100%;display:flex;flex-direction:column;justify-content:center}
.combat-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-height:260px;color:var(--muted);text-align:center}
.combat-empty>span{font-size:42px}
.combat-versus{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.combatant-card{padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);text-align:center}
.combatant-card.enemy{background:#08121b}
.combatant-icon{font-size:38px}
.combatant-card h3{margin:6px 0 10px}
.combat-health-line{display:flex;justify-content:space-between;gap:8px;font-size:10px}
.combat-health-bar{height:8px;margin:5px 0 8px;overflow:hidden;border-radius:999px;background:#08121b}
.combat-health-bar span{display:block;height:100%;background:linear-gradient(90deg,#9b2f2f,#d95c5c)}
.combat-health-bar.enemy span{background:linear-gradient(90deg,#7b2626,#b44242)}
.combatant-card small{color:var(--muted)}
.combat-vs{color:var(--gold);font-size:13px;font-weight:900}
.combat-stop-button{margin-top:12px;width:100%}
@media(max-width:850px){.combat-layout{grid-template-columns:1fr}.combat-enemy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.combat-enemy-grid{grid-template-columns:1fr}.combat-versus{grid-template-columns:1fr}.combat-vs{padding:4px 0}}


/* ===== C4 Food Healing ===== */
.combat-food-panel{grid-column:1/-1;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.combat-food-panel .combat-panel-heading{display:flex;align-items:end;justify-content:space-between;gap:10px}
.combat-food-panel .combat-panel-heading small{color:var(--muted)}
.combat-food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:7px;margin-top:8px}
.combat-food-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);color:var(--text);text-align:left}
.combat-food-item>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:6px;background:#08121b;font-size:20px}
.combat-food-item strong,.combat-food-item small{display:block}
.combat-food-item small{margin-top:2px;color:var(--muted);font-size:9px}
.combat-food-empty{grid-column:1/-1;padding:12px;color:var(--muted);text-align:center}

/* ===== C5 Combat Loot ===== */
.combat-last-loot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}
.combat-last-loot strong{width:100%;color:var(--text);font-size:10px}
.combat-last-loot span{padding:4px 6px;border-radius:5px;background:#08121b;color:var(--gold);font-size:9px}


/* ===== Combat 2.0 Idle Revamp ===== */
.combat-layout{
  grid-template-columns:minmax(250px,.72fr) minmax(420px,1.28fr);
  align-items:start;
}

.combat-roster-panel{
  position:sticky;
  top:10px;
}

.combat-enemy-grid{
  grid-template-columns:1fr;
}

.combat-enemy-card{
  min-height:58px;
}

.combat-battle-panel{
  min-height:420px;
}

.combat-idle-summary{
  display:grid;
  gap:10px;
}

.combat-idle-hero{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.combat-idle-hero>span{
  font-size:34px;
}

.combat-idle-hero strong,
.combat-idle-hero small{
  display:block;
}

.combat-idle-hero small{
  color:var(--muted);
  margin-top:2px;
}

.combat-player-overview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}

.combat-player-overview>div{
  padding:8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#08121b;
  text-align:center;
}

.combat-player-overview small,
.combat-player-overview strong{
  display:block;
}

.combat-player-overview small{
  color:var(--muted);
  font-size:9px;
}

.combat-equipped-food-summary{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid rgba(215,173,86,.32);
  border-radius:8px;
  background:rgba(215,173,86,.05);
}

.combat-equipped-food-summary.empty{
  border-color:var(--line);
  background:var(--surface-2);
}

.combat-equipped-food-summary>span{
  font-size:26px;
}

.combat-equipped-food-summary small,
.combat-equipped-food-summary strong,
.combat-equipped-food-summary div>span{
  display:block;
}

.combat-equipped-food-summary small,
.combat-equipped-food-summary div>span{
  color:var(--muted);
  font-size:9px;
}

.combat-main-card{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:stretch;
}

.combat-fighter{
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
}

.combat-fighter.enemy{
  background:#08121b;
}

.combat-fighter-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
}

.combat-fighter-head small{
  color:var(--muted);
  font-size:9px;
}

.combat-fighter-head h3{
  margin:1px 0 0;
}

.combat-center-vs{
  align-self:center;
  color:var(--gold);
  font-size:12px;
  font-weight:900;
}

.combat-attack-timer{
  margin:8px 0 7px;
}

.combat-attack-timer small{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:9px;
}

.combat-attack-timer>div{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#08121b;
}

.combat-attack-timer>div>span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#8a7533,#d9b95c);
}

.combat-attack-timer.enemy>div>span{
  background:linear-gradient(90deg,#703737,#bd5a5a);
}

.combat-stat-row{
  display:flex;
  justify-content:space-between;
  gap:5px;
  color:var(--muted);
  font-size:9px;
}

.combat-action-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:10px;
}

.combat-eat-equipped{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid rgba(239, 178, 39, .4);
  border-radius:8px;
  background:rgba(239, 178, 39, .06);
  color:var(--text);
  text-align:left;
}

.combat-eat-equipped>span{
  font-size:22px;
}

.combat-eat-equipped strong,
.combat-eat-equipped small{
  display:block;
}

.combat-eat-equipped small{
  color:var(--muted);
  margin-top:2px;
}

.combat-no-food{
  display:flex;
  align-items:center;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
}

.combat-food-controls{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-direction:column;
}

.combat-food-controls small{
  max-width:260px;
  text-align:right;
}

#combatAutoEatControl.active{
  border-color:#efb227;
  background:rgba(239, 178, 39, .12);
}

.combat-food-grid{
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}

.combat-food-slot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.combat-food-slot.selected{
  border-color:var(--gold);
  background:rgba(215,173,86,.06);
}

.combat-food-select{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:6px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
}

.combat-food-select>span{
  font-size:20px;
}

.combat-food-select strong,
.combat-food-select small,
.combat-food-select b{
  display:block;
}

.combat-food-select small{
  color:var(--muted);
  margin-top:2px;
}

.combat-food-select b{
  margin-top:2px;
  color:var(--gold);
  font-size:8px;
  text-transform:uppercase;
}

.combat-food-eat{
  align-self:stretch;
  min-width:52px;
}

@media(max-width:900px){
  .combat-layout{
    grid-template-columns:1fr;
  }

  .combat-roster-panel{
    position:static;
  }

  .combat-enemy-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .combat-main-card{
    grid-template-columns:1fr;
  }

  .combat-center-vs{
    justify-self:center;
  }

  .combat-action-strip{
    grid-template-columns:1fr;
  }

  .combat-player-overview{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .combat-food-controls{
    align-items:flex-start;
  }

  .combat-food-controls small{
    text-align:left;
  }
}


/* ===== Combat Skills Rebalance ===== */
.combat-player-overview>div>span{display:block;margin-top:2px;color:var(--gold);font-size:8px;font-weight:800}
.combat-level-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:6px;color:var(--muted);font-size:8px;text-align:center}


/* ===== Equipment Construction Integration ===== */
.equipment-foundation-heading small::after{
  content:" • Gear is now produced through Smithing and Construction.";
}


/* ===== RuneScape-Style Combat Revamp ===== */
.combat-style-panel{
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.combat-style-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}

.combat-style-heading h3{margin:2px 0 0}

.combat-level-badge{
  min-width:92px;
  padding:7px 10px;
  border:1px solid rgba(215,173,86,.4);
  border-radius:8px;
  background:rgba(215,173,86,.06);
  text-align:center;
}

.combat-level-badge small,.combat-level-badge strong{display:block}
.combat-level-badge small{color:var(--muted);font-size:8px;text-transform:uppercase}
.combat-level-badge strong{font-size:19px;color:var(--gold)}

.combat-style-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
}

.combat-style-button{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text);
  text-align:left;
}

.combat-style-button.active{
  border-color:var(--gold);
  background:rgba(215,173,86,.08);
  box-shadow:inset 0 0 0 1px rgba(215,173,86,.18);
}

.combat-style-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:6px;
  background:#08121b;
  font-size:19px;
}

.combat-style-button strong,
.combat-style-button small,
.combat-style-button b{display:block}

.combat-style-button small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.combat-style-button b{
  margin-top:3px;
  color:var(--gold);
  font-size:8px;
}

.combat-gear-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  margin-top:4px;
  color:#efb227;
  font-size:8px;
  text-align:center;
}

@media(max-width:780px){
  .combat-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:430px){
  .combat-style-grid{grid-template-columns:1fr}
}


/* ===== Equipment Tab Combat Equip Fix ===== */
.equipment-slot-foundation{
  grid-template-columns:auto minmax(0,1fr) auto;
}

.equipment-slot-copy{
  min-width:0;
}

.equipment-slot-copy small,
.equipment-slot-copy strong,
.equipment-slot-copy span{
  display:block;
}

.equipment-slot-copy span{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.equipment-slot-unequip{
  align-self:center;
  padding:5px 7px;
  font-size:9px;
}

.combat-equipment-owned-section{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}

.combat-equipment-owned-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.combat-equipment-owned-heading h3{
  margin:2px 0 0;
}

.combat-equipment-owned-heading small{
  color:var(--muted);
}

.combat-equipment-owned-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:7px;
}

.combat-equipment-card{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.combat-equipment-card.equipped{
  border-color:var(--gold);
  background:rgba(215,173,86,.06);
}

.combat-equipment-card.locked{
  opacity:.68;
}

.combat-equipment-card-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.combat-equipment-card-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:7px;
  background:#08121b;
  font-size:22px;
}

.combat-equipment-card-top small,
.combat-equipment-card-top strong,
.combat-equipment-card-top div>span{
  display:block;
}

.combat-equipment-card-top small{
  color:var(--muted);
  font-size:8px;
  text-transform:capitalize;
}

.combat-equipment-card-top div>span{
  color:var(--gold);
  font-size:8px;
  margin-top:2px;
}

.combat-equipment-card-stats,
.combat-equipment-card-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.combat-equipment-card-stats span{
  padding:5px;
  border-radius:5px;
  background:#08121b;
  color:var(--muted);
  font-size:8px;
  text-align:center;
}

.combat-equipment-card-stats b{
  color:var(--text);
}

.combat-equipment-card-meta{
  grid-template-columns:1fr 1fr;
  color:var(--muted);
  font-size:8px;
}

.combat-equipment-card-meta span:last-child{
  text-align:right;
}

.combat-equipment-empty{
  grid-column:1/-1;
  padding:16px;
  border:1px dashed var(--line);
  border-radius:8px;
  color:var(--muted);
  text-align:center;
}

@media(max-width:600px){
  .combat-equipment-owned-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ===== Combat Level Visibility Fix ===== */
.equipment-combat-level-card{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid rgba(215,173,86,.42);
  border-radius:9px;
  background:rgba(215,173,86,.06);
}

.equipment-combat-level-card small{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
}

.equipment-combat-level-card strong{
  font-size:22px;
  color:var(--gold);
}

.equipment-combat-level-card span{
  margin-left:auto;
  color:var(--muted);
  font-size:9px;
}

@media(max-width:600px){
  .equipment-combat-level-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .equipment-combat-level-card span{
    margin-left:0;
  }
}


/* ===== Combat UI + Food + Activity Exclusivity Fix ===== */
.combat-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:12px;
}

.combat-roster-panel{
  position:static;
}

.combat-enemy-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
}

.combat-enemy-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:52px;
  padding:8px;
}

.combat-enemy-copy{
  min-width:0;
}

.combat-enemy-copy strong,
.combat-enemy-copy small{
  display:block;
}

.combat-enemy-copy small{
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}

.combat-enemy-xp{
  color:var(--gold);
  font-size:9px;
  font-weight:800;
}

.combat-battle-panel{
  min-height:360px;
}

.combat-idle-panel{
  display:grid;
  gap:12px;
}

.combat-idle-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.combat-idle-title>span{
  font-size:32px;
}

.combat-idle-title strong,
.combat-idle-title small{
  display:block;
}

.combat-idle-title small{
  margin-top:2px;
  color:var(--muted);
}

.combat-idle-stats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

.combat-idle-stats>div{
  padding:8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#08121b;
  text-align:center;
}

.combat-idle-stats small,
.combat-idle-stats strong{
  display:block;
}

.combat-idle-stats small{
  color:var(--muted);
  font-size:8px;
}

.combat-selected-food-summary{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid rgba(239, 178, 39, .28);
  border-radius:8px;
  background:rgba(239, 178, 39, .05);
}

.combat-selected-food-summary>span{
  font-size:24px;
}

.combat-selected-food-summary small,
.combat-selected-food-summary strong,
.combat-selected-food-summary b{
  display:block;
}

.combat-selected-food-summary small{
  color:var(--muted);
  font-size:8px;
}

.combat-selected-food-summary b{
  margin-top:2px;
  color:#efb227;
  font-size:9px;
}

.combat-battle-clean{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:10px;
  align-items:center;
}

.combat-fighter-clean{
  padding:12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-2);
}

.combat-fighter-clean.enemy{
  background:#08121b;
}

.combat-fighter-clean-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:10px;
}

.combat-fighter-clean-head>span{
  font-size:30px;
}

.combat-fighter-clean-head small,
.combat-fighter-clean-head strong,
.combat-fighter-clean-head b{
  display:block;
}

.combat-fighter-clean-head small{
  color:var(--muted);
  font-size:8px;
}

.combat-fighter-clean-head b{
  margin-top:2px;
  color:var(--gold);
  font-size:8px;
}

.combat-vs-clean{
  color:var(--gold);
  font-weight:900;
}

.combat-clean-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}

.combat-clean-stats span{
  padding:5px;
  border-radius:5px;
  background:#08121b;
  color:var(--muted);
  font-size:8px;
  text-align:center;
}

.combat-clean-stats b{
  color:var(--text);
}

.combat-bottom-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:10px;
}

.combat-food-grid{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}

.combat-food-slot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.combat-food-slot.selected{
  border-color:#efb227;
  box-shadow:inset 0 0 0 1px rgba(239, 178, 39, .2);
  background:rgba(239, 178, 39, .06);
}

.combat-food-select{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
}

.combat-food-icon{
  font-size:21px;
}

.combat-food-copy{
  min-width:0;
}

.combat-food-copy strong,
.combat-food-copy small{
  display:block;
}

.combat-food-copy small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.combat-food-state{
  padding:3px 6px;
  border-radius:999px;
  background:#08121b;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
}

.combat-food-slot.selected .combat-food-state{
  background:rgba(239, 178, 39, .16);
  color:#efb227;
}

.combat-food-eat{
  min-width:64px;
}

@media(max-width:850px){
  .combat-layout{grid-template-columns:1fr}
  .combat-enemy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:620px){
  .combat-enemy-grid{grid-template-columns:1fr}
  .combat-battle-clean{grid-template-columns:1fr}
  .combat-vs-clean{justify-self:center}
  .combat-bottom-actions{grid-template-columns:1fr}
  .combat-idle-stats{grid-template-columns:repeat(2,1fr)}
}


/* ===== Combat Auto-Repeat + Right Food + Session Loot ===== */
.combat-layout-v2{
  display:grid;
  grid-template-columns:250px minmax(0,1fr) 300px;
  gap:12px;
  align-items:start;
}

.combat-side-panel{
  display:grid;
  gap:12px;
}

.combat-food-panel-v2,
.combat-session-panel{
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.combat-food-panel-v2 .combat-panel-heading,
.combat-session-panel .combat-panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.combat-food-panel-v2 h3,
.combat-session-panel h3{
  margin:2px 0 0;
}

.combat-side-help{
  margin:6px 0 8px;
  color:var(--muted);
  font-size:9px;
}

.combat-selected-food-box{
  margin-bottom:8px;
}

.combat-selected-food-large,
.combat-selected-food-empty{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid rgba(239, 178, 39, .3);
  border-radius:8px;
  background:rgba(239, 178, 39, .05);
}

.combat-selected-food-empty{
  grid-template-columns:auto minmax(0,1fr);
  border-color:var(--line);
  background:var(--surface-2);
}

.combat-selected-food-large>span,
.combat-selected-food-empty>span{
  font-size:24px;
}

.combat-selected-food-large small,
.combat-selected-food-large strong,
.combat-selected-food-large b,
.combat-selected-food-empty small,
.combat-selected-food-empty strong,
.combat-selected-food-empty b{
  display:block;
}

.combat-selected-food-large small,
.combat-selected-food-empty small{
  color:var(--muted);
  font-size:8px;
}

.combat-selected-food-large b,
.combat-selected-food-empty b{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.combat-food-grid-v2{
  display:grid;
  gap:5px;
  max-height:330px;
  overflow-y:auto;
  padding-right:2px;
}

.combat-food-choice{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  width:100%;
  padding:7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text);
  text-align:left;
}

.combat-food-choice.selected{
  border-color:#efb227;
  background:rgba(239, 178, 39, .08);
}

.combat-food-choice-icon{
  font-size:20px;
}

.combat-food-choice strong,
.combat-food-choice small{
  display:block;
}

.combat-food-choice small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.combat-food-choice>b{
  color:var(--gold);
  font-size:8px;
}

.combat-session-panel{
  min-height:150px;
}

#combatSessionKills{
  color:var(--gold);
  font-size:10px;
}

.combat-session-loot{
  display:grid;
  gap:5px;
  margin-top:8px;
  max-height:300px;
  overflow-y:auto;
}

.combat-session-loot-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
}

.combat-session-loot-icon{
  font-size:19px;
}

.combat-session-loot-row strong,
.combat-session-loot-row small{
  display:block;
}

.combat-session-loot-row small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.combat-session-loot-row>b{
  color:var(--gold);
}

.combat-session-empty{
  padding:12px;
  border:1px dashed var(--line);
  border-radius:7px;
  color:var(--muted);
  text-align:center;
  font-size:9px;
}

.combat-repeat-note{
  display:flex;
  align-items:center;
  padding:9px;
  border:1px solid rgba(215,173,86,.25);
  border-radius:8px;
  background:rgba(215,173,86,.05);
  color:var(--muted);
  font-size:9px;
}

@media(max-width:1050px){
  .combat-layout-v2{
    grid-template-columns:230px minmax(0,1fr);
  }
  .combat-side-panel{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .combat-layout-v2{
    grid-template-columns:1fr;
  }
  .combat-side-panel{
    grid-column:auto;
    grid-template-columns:1fr;
  }
}


/* ===== Clean Equipment Tab + Best in Slot ===== */
.equipment-page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.equipment-best-loadout-button{
  min-width:180px;
}

.equipment-clean-section{
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.equipment-clean-summary{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:10px;
  margin-bottom:12px;
}

.equipment-clean-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.equipment-clean-heading h3{
  margin:2px 0 0;
}

.equipment-clean-heading small{
  color:var(--muted);
}

.equipment-slot-overview-clean{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.equipment-clean-slot,
.equipment-tool-clean{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.equipment-clean-slot.filled{
  border-color:rgba(215,173,86,.25);
}

.equipment-clean-slot-main,
.equipment-tool-clean-main{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.equipment-clean-slot-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:7px;
  background:#08121b;
  font-size:22px;
}

.equipment-clean-slot-main small,
.equipment-clean-slot-main strong,
.equipment-clean-slot-main div>span,
.equipment-tool-clean-main small,
.equipment-tool-clean-main strong,
.equipment-tool-clean-main div>span{
  display:block;
}

.equipment-clean-slot-main small,
.equipment-tool-clean-main small{
  color:var(--muted);
  font-size:8px;
}

.equipment-clean-slot-main div>span,
.equipment-tool-clean-main div>span{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.equipment-clean-slot-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
}

.equipment-bis-label{
  color:var(--muted);
  font-size:8px;
  white-space:nowrap;
}

.equipment-tools-clean{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.equipment-tool-clean{
  grid-template-columns:1fr;
}

.equipment-tool-clean .equipment-clean-slot-actions{
  justify-content:flex-start;
}

@media(max-width:850px){
  .equipment-page-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .equipment-clean-summary{
    grid-template-columns:1fr;
  }

  .equipment-slot-overview-clean,
  .equipment-tools-clean{
    grid-template-columns:1fr;
  }
}


/* ===== Combat Balance + Loot Session Fix ===== */
.combat-session-total-wrap,
.combat-session-history{
  display:grid;
  gap:5px;
}

.combat-session-history{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--line);
}

.combat-session-subtitle{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.combat-session-kill-entry{
  padding:7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
}

.combat-session-kill-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:5px;
}

.combat-session-kill-head small{
  color:var(--muted);
  font-size:8px;
}

.combat-session-kill-drops{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.combat-session-kill-drops span{
  padding:3px 5px;
  border-radius:5px;
  background:#08121b;
  color:var(--gold);
  font-size:8px;
}

.combat-session-kill-drops .no-drop{
  color:var(--muted);
}


/* ===== Clean Stacked Session Loot ===== */
.combat-session-summary-list{display:grid;gap:6px}
.combat-session-summary-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
.combat-session-summary-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:7px;background:#08121b;font-size:20px}
.combat-session-summary-copy{min-width:0}
.combat-session-summary-copy strong,.combat-session-summary-copy small,.combat-session-summary-amount strong,.combat-session-summary-amount small{display:block}
.combat-session-summary-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-session-summary-copy small{margin-top:2px;color:var(--muted);font-size:8px}
.combat-session-summary-amount{text-align:right}
.combat-session-summary-amount strong{color:var(--gold)}
.combat-session-summary-amount small{margin-top:2px;color:var(--muted);font-size:8px}


/* ===== Smooth Combat Timers ===== */
.combat-attack-timer>div>span{
  transition:width .08s linear;
  will-change:width;
}


/* ===== Combat Session XP Stats ===== */
.combat-session-xp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:8px;margin-bottom:8px}
.combat-session-xp>div{padding:7px 5px;border:1px solid var(--line);border-radius:7px;background:#08121b;text-align:center}
.combat-session-xp small,.combat-session-xp strong{display:block}
.combat-session-xp small{color:var(--muted);font-size:8px}
.combat-session-xp strong{margin-top:2px;color:var(--gold);font-size:11px}


/* ===== Activity-Style Combat Timers ===== */
.combat-progress-track{
  height:11px !important;
  overflow:hidden;
  border:1px solid #08121b !important;
  border-radius:4px !important;
  background:#08121b !important;
}

.combat-progress-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold)) !important;
  transition:width .05s linear !important;
  will-change:width;
}

.combat-progress-fill.enemy{
  background:linear-gradient(90deg,#8f3d3d,#d36a5f) !important;
}


/* ===== Equipment Page Repair ===== */
.equipment-clean-slot .equipment-bis-label{
  max-width:150px;
  white-space:normal;
  text-align:right;
}


/* ===== Combat Page Recovery + Skill Overview ===== */
.combat-skills-inline-panel{
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.combat-skills-inline-heading{
  margin-bottom:8px;
}

.combat-skills-inline-heading h3{
  margin:2px 0 0;
}

.combat-skill-overview-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.combat-skill-overview-card{
  min-width:0;
}

@media(max-width:900px){
  .combat-skill-overview-grid{
    grid-template-columns:1fr;
  }
}


/* ===== Logical Grouped Navigation ===== */
.main-navigation.grouped-navigation{
  display:grid;
  gap:12px;
}

.main-navigation.grouped-navigation .nav-group{
  display:grid;
  gap:4px;
}

.main-navigation.grouped-navigation .nav-group-label{
  display:block;
  padding:0 9px 2px;
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.main-navigation.grouped-navigation .nav-item{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:36px;
  padding:7px 9px;
  border-radius:7px;
  text-align:left;
}

.main-navigation.grouped-navigation .nav-item-icon{
  display:grid;
  place-items:center;
  width:20px;
  flex:0 0 20px;
  font-size:14px;
}

.main-navigation.grouped-navigation .nav-item b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ===== Activity UI Cleanup ===== */
.activity-browse-controls{display:grid;gap:7px;margin:0 0 10px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.activity-filter-row{display:flex;align-items:center;gap:8px}.activity-filter-row[hidden]{display:none}
.activity-filter-label{width:58px;flex:0 0 58px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.activity-filter-chips{display:flex;flex-wrap:wrap;gap:5px}
.activity-filter-chip{min-height:27px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--muted);font:inherit;font-size:9px;cursor:pointer}
.activity-filter-chip:hover{border-color:var(--gold);color:var(--text)}
.activity-filter-chip.active{border-color:var(--gold);background:var(--surface-3);color:var(--gold)}
#activitiesPage .activity-card,#activitiesPage .activity-tile{padding:9px}
#activitiesPage .activity-grid{gap:7px}
@media(max-width:700px){.activity-filter-row{align-items:flex-start;flex-direction:column;gap:4px}.activity-filter-label{width:auto;flex-basis:auto}.activity-filter-chips{width:100%}}


/* ===== Activity Filters 2.0 ===== */
.activity-filter-toolbar{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.activity-search{
  display:grid;
  gap:4px;
  min-width:180px;
  flex:1;
}

.activity-search > span{
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.activity-search input{
  width:100%;
  min-height:32px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:10px;
}

.activity-search input:focus{
  outline:none;
  border-color:var(--gold);
}

.activity-clear-filters{
  min-height:32px;
  padding:6px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font-size:9px;
}

.activity-clear-filters[hidden]{display:none}

.activity-filter-label{
  width:76px;
  flex-basis:76px;
}

.activity-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.activity-filter-chip small{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:8px;
}

.activity-filter-chip.active small{
  color:var(--gold);
}

@media(max-width:700px){
  .activity-filter-toolbar{
    align-items:stretch;
    flex-direction:column;
  }
}


/* ===== Activity Filters 3.0 ===== */
.activity-browse-controls{
  gap:9px;
}

.activity-filter-row{
  padding:2px 0;
}

.activity-filter-label{
  width:82px;
  flex-basis:82px;
}

.activity-filter-chip{
  min-height:30px;
  padding:5px 9px;
  border-radius:8px;
}

.activity-filter-chip span{
  font-weight:700;
}

.activity-filter-chip small{
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:10px;
}

.activity-filter-chip.active{
  box-shadow:inset 0 0 0 1px var(--gold);
}

.activity-filter-summary{
  min-height:20px;
  padding-top:7px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
}

.activity-category-heading{
  position:sticky;
  top:0;
  z-index:2;
  padding:7px 0 6px;
  background:var(--surface);
}

.activity-category-heading h3{
  margin:2px 0 0;
}

.activity-category-grid{
  gap:7px;
}


/* ===== Activity Filters 4.0: Type drill-down ===== */
#activityTypeRow{
  padding-left:8px;
  border-left:2px solid var(--line);
}

#activityTypeRow .activity-filter-chip.active{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);
}


/* ===== Skill Detail + XP Table ===== */
.skill-card.selected{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold);
}

.skill-card-progress{
  height:8px;
  margin:8px 0 5px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:4px;
  background:#08121b;
}

.skill-card-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold));
}

.skill-detail-panel{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}

.skill-detail-panel[hidden]{
  display:none;
}

.skill-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.skill-detail-header h3{
  margin:2px 0 0;
}

.skill-detail-header > strong{
  color:var(--gold);
}

.skill-detail-tabs{
  display:flex;
  gap:6px;
  margin:12px 0;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}

.skill-detail-tabs button{
  min-height:32px;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--muted);
}

.skill-detail-tabs button.active{
  border-color:var(--gold);
  color:var(--gold);
}

.skill-unlock-list{
  display:grid;
  gap:5px;
}

.skill-unlock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
}

.skill-unlock-row.locked{
  opacity:.55;
}

.skill-unlock-row.unlocked b{
  color:var(--gold);
}

.skill-unlock-row.skill-unlock-capstone{
  border-color:rgba(239,178,39,.62);
  background:linear-gradient(135deg, rgba(239,178,39,.12), rgba(215,173,86,.04));
}

.skill-unlock-row.skill-unlock-capstone span,
.skill-unlock-row.skill-unlock-capstone b{
  color:var(--gold);
  font-weight:800;
}

.skill-detail-view[hidden]{
  display:none;
}

.skill-xp-table-wrap{
  max-height:520px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:8px;
}

.skill-xp-table{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
}

.skill-xp-table th,
.skill-xp-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  text-align:right;
}

.skill-xp-table th:first-child,
.skill-xp-table td:first-child{
  text-align:left;
}

.skill-xp-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-2);
  color:var(--muted);
}

.skill-xp-table tbody tr.reached{
  background:rgba(255,255,255,.025);
}

.skill-xp-table tbody tr.reached td:first-child{
  color:var(--gold);
  font-weight:800;
}

.skill-detail-empty{
  padding:14px;
  color:var(--muted);
  text-align:center;
}


/* ===== Skill Detail Modal ===== */
.skill-detail-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
}

.skill-detail-modal.open{
  display:block;
}

.skill-detail-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,16,25,.68);
  backdrop-filter:blur(3px);
}

.skill-detail-modal-card{
  position:absolute;
  top:50%;
  left:50%;
  width:min(760px,calc(100vw - 28px));
  max-height:min(82vh,760px);
  margin:0;
  transform:translate(-50%,-50%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 20px 60px rgba(7,16,25,.45);
}

.skill-detail-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.skill-detail-close{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.skill-detail-close:hover{
  border-color:var(--gold);
  color:var(--gold);
}

.skill-detail-modal-card .skill-detail-view{
  min-height:0;
  overflow:auto;
}

.skill-detail-modal-card .skill-xp-table-wrap{
  max-height:none;
  height:min(54vh,520px);
}

.skill-detail-modal-open{
  overflow:hidden;
}

@media(max-width:650px){
  .skill-detail-modal-card{
    width:calc(100vw - 16px);
    max-height:90vh;
  }

  .skill-detail-header{
    align-items:flex-start;
  }

  .skill-detail-header-actions{
    flex-direction:column-reverse;
    align-items:flex-end;
  }
}


/* ===== Bottom-left Gain Feed ===== */
.gain-feed{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:1400;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  gap:6px;
  width:min(320px,calc(100vw - 28px));
  pointer-events:none;
}

.gain-toast{
  min-width:190px;
  max-width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(7,16,25,.96);
  box-shadow:0 8px 24px rgba(7,16,25,.28);
  opacity:0;
  transform:translateX(-10px);
  transition:opacity .18s ease,transform .18s ease;
}

.gain-toast.visible{opacity:1;transform:translateX(0)}
.gain-toast.leaving{opacity:0;transform:translateX(-10px)}

.gain-toast-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:7px;
  background:var(--surface-2);
  font-size:17px;
}

.gain-toast-copy{min-width:0}
.gain-toast-copy strong,.gain-toast-copy small{display:block}
.gain-toast-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.gain-toast-copy small{margin-top:1px;color:var(--muted);font-size:8px}
.gain-toast>b{color:var(--gold);font-size:10px;white-space:nowrap}

@media(max-width:600px){
  .gain-feed{left:8px;bottom:8px;width:min(295px,calc(100vw - 16px))}
  .gain-toast{min-width:170px}
}


/* Gain feed visibility fix */
#gainFeed.gain-feed{
  position:fixed !important;
  left:16px !important;
  bottom:16px !important;
  z-index:99999 !important;
  display:flex;
  visibility:visible;
}


/* ===== Production Filters Revamp ===== */
.activity-browse-controls{
  position:sticky;
  top:0;
  z-index:12;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(7,16,25,.97);
  box-shadow:0 8px 22px rgba(7,16,25,.18);
}

.activity-filter-toolbar{
  align-items:end;
}

.activity-filter-row{
  align-items:flex-start;
}

.activity-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.activity-filter-label{
  padding-top:7px;
  font-weight:700;
}

.activity-filter-summary{
  padding:8px 0 1px;
  white-space:normal;
}


.activity-category-grid-selected{
  margin-top:8px;
}

.activity-filter-empty{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:22px;
  border:1px dashed var(--line);
  border-radius:10px;
  color:var(--muted);
  text-align:center;
}

.activity-filter-empty strong{
  color:var(--text);
}

@media(max-width:700px){
  .activity-browse-controls{
    top:0;
    padding:8px;
  }

  .activity-filter-row{
    display:block;
  }

  .activity-filter-label{
    display:block;
    width:auto;
    margin-bottom:5px;
    padding-top:0;
  }

  .activity-filter-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:thin;
  }

  .activity-filter-chip{
    flex:0 0 auto;
  }
}


/* ===== Production Filters Mobile / Compact ===== */
.activity-browse-controls{
  position:sticky;
  top:0;
  z-index:12;
  padding:7px 8px;
}

.activity-quick-nav{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.activity-category-nav{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}

.activity-category-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  overflow-x:auto;
  padding:1px 0 4px;
  scrollbar-width:thin;
}

.activity-category-chips .activity-filter-chip{
  flex:0 0 auto;
}

.activity-filter-toggle{
  flex:0 0 auto;
  min-height:34px;
  padding:6px 10px;
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--muted);
}

.activity-filter-toggle.active{
  border-color:var(--gold);
  color:var(--gold);
}

.activity-filter-badge{
  display:grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--gold);
  color:#08121b;
  font-size:8px;
  font-weight:800;
}

.activity-filter-badge[hidden]{
  display:none;
}

.activity-advanced-filters{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--line);
}

.activity-advanced-filters[hidden]{
  display:none;
}

.activity-advanced-filters .activity-search{
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  align-items:center;
  gap:7px;
  margin-bottom:7px;
}

.activity-advanced-filters .activity-search span{
  font-size:9px;
  font-weight:700;
  color:var(--muted);
}

.activity-advanced-filters .activity-search input{
  min-width:0;
}

.activity-filter-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:7px;
}

.activity-filter-actions .activity-filter-summary{
  flex:1 1 auto;
  padding:0;
  font-size:8px;
}

.activity-filter-actions .activity-clear-filters{
  flex:0 0 auto;
}

@media(max-width:700px){
  .activity-browse-controls{
    padding:6px;
  }

  .activity-filter-toggle{
    min-height:32px;
    padding:5px 8px;
  }

  .activity-advanced-filters .activity-search{
    grid-template-columns:1fr;
    gap:3px;
  }

  .activity-advanced-filters .activity-search span{
    display:none;
  }

  .activity-advanced-filters .activity-filter-row{
    margin-top:7px;
  }

  .activity-advanced-filters .activity-filter-label{
    margin-bottom:4px;
  }

  .activity-advanced-filters .activity-filter-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
  }

  .activity-category-section{
    margin-top:8px;
  }

  .activity-category-heading{
    padding:8px 9px;
  }

  .activity-category-grid{
    gap:7px;
  }
}


/* ===== Main Availability Filter ===== */
.activity-main-filters{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
}

.activity-availability-nav{
  flex:0 0 auto;
}

.activity-availability-chips{
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
}

.activity-availability-chips .activity-filter-chip{
  flex:0 0 auto;
}

.activity-category-nav{
  flex:1 1 auto;
}

@media(max-width:700px){
  .activity-main-filters{
    gap:5px;
    overflow:hidden;
  }

  .activity-availability-nav{
    max-width:44%;
    overflow-x:auto;
    scrollbar-width:thin;
  }

  .activity-category-nav{
    min-width:0;
  }

  .activity-availability-chips,
  .activity-category-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:thin;
  }
}


/* ===== v2.54.1 Expedition Confirmation Polish ===== */
/* ===== Expedition Start Confirmation ===== */
.expedition-start-modal{
  position:fixed;
  inset:0;
  z-index:1700;
  display:none;
}

.expedition-start-modal.open{
  display:grid;
  place-items:center;
}

.expedition-start-backdrop{
  position:absolute;
  border:0;
  padding:0;
  inset:0;
  background:rgba(5,12,20,.78);
  backdrop-filter:blur(4px);
}

.expedition-start-card{
  position:relative;
  z-index:1;
  width:min(450px,calc(100vw - 24px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  padding:18px;
  border:1px solid rgba(239,178,39,.34);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(239,178,39,.045),rgba(239,178,39,0)),var(--surface);
  box-shadow:0 24px 70px rgba(3,9,15,.58),0 0 0 1px rgba(255,255,255,.025) inset;
}

.expedition-start-icon{
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border:1px solid rgba(239,178,39,.32);
  border-radius:11px;
  background:linear-gradient(rgba(239,178,39,.07),rgba(239,178,39,.07)),var(--surface-2);
  font-size:26px;
}

.expedition-start-copy h3{
  margin:2px 0 5px;
}

.expedition-start-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.expedition-start-levels{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.expedition-start-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-2);
}

.expedition-start-stat span{
  color:var(--muted);
  font-size:12px;
}

.expedition-start-stat strong{
  font-size:17px;
}

.expedition-start-stat.recommended strong{
  color:var(--gold);
}

.expedition-start-warning{
  grid-column:1/-1;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 11px;
  border:1px solid rgba(228,171,61,.28);
  border-radius:9px;
  background:rgba(228,171,61,.08);
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}

.expedition-start-cost{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-2);
}

.expedition-start-cost > span{
  color:var(--muted);
}

.expedition-start-cost strong{
  color:var(--gold);
}

.expedition-start-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:8px;
  padding-top:2px;
}

.expedition-start-actions button{
  width:100%;
}

.expedition-start-confirm-open{
  overflow:hidden;
}

@media(max-width:520px){
  .expedition-start-modal.open{
    align-items:end;
  }

  .expedition-start-card{
    grid-template-columns:1fr;
    width:calc(100vw - 12px);
    margin-bottom:6px;
    padding:15px;
    border-radius:14px;
  }

  .expedition-start-icon{
    width:44px;
    height:44px;
  }

  .expedition-start-levels{
    grid-template-columns:1fr;
  }
}

/* ===== Sell Confirmation ===== */
.sell-confirm-modal{
  position:fixed;
  inset:0;
  z-index:1600;
  display:none;
}

.sell-confirm-modal.open{
  display:grid;
  place-items:center;
}

.sell-confirm-backdrop{
  position:absolute;
  inset:0;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(7,16,25,.72);
  backdrop-filter:blur(3px);
}

.sell-confirm-card{
  position:relative;
  z-index:1;
  width:min(420px,calc(100vw - 24px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 20px 60px rgba(7,16,25,.45);
}

.sell-confirm-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-2);
  font-size:28px;
}

.sell-confirm-copy h3{
  margin:2px 0 5px;
}

.sell-confirm-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.sell-confirm-total{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}

.sell-confirm-total strong{
  color:var(--gold);
}

.sell-confirm-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  gap:7px;
  padding-top:2px;
}

.sell-confirm-open,
.reset-confirm-open{
  overflow:hidden;
}

.reset-confirm-card{
  border-color:rgba(209,103,84,.42);
}

.reset-confirm-icon{
  color:#efb27a;
  border-color:rgba(209,103,84,.38);
  background:rgba(143,63,48,.12);
}

body.premium-everywhere .reset-confirm-button{
  border-color:rgba(209,103,84,.58) !important;
  background:linear-gradient(180deg,rgba(164,73,55,.95),rgba(116,48,38,.95)) !important;
  color:#fff4ef !important;
}

body.premium-everywhere .reset-confirm-button:hover{
  border-color:rgba(235,135,112,.78) !important;
  background:linear-gradient(180deg,rgba(184,82,61,.98),rgba(132,54,42,.98)) !important;
}

@media(max-width:520px){
  .sell-confirm-card{
    grid-template-columns:1fr;
    width:calc(100vw - 16px);
    padding:13px;
  }

  .sell-confirm-icon{
    width:42px;
    height:42px;
  }

  .sell-confirm-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .sell-confirm-actions button{
    width:100%;
  }
}


/* ===== Bank UX 2.0 - Phase 1 ===== */
.bank-topbar-v2{
  display:block;
  padding:8px;
}

.bank-main-nav{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.bank-main-nav .bank-category-tabs{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  overflow-x:auto;
  padding-bottom:3px;
  scrollbar-width:thin;
}

.bank-main-nav .bank-category-tabs button{
  flex:0 0 auto;
}

.bank-filter-toggle{
  flex:0 0 auto;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--muted);
}

.bank-filter-toggle.active{
  border-color:var(--gold);
  color:var(--gold);
}

.bank-filter-badge{
  display:grid;
  place-items:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--gold);
  color:#08121b;
  font-size:8px;
  font-weight:800;
}

.bank-filter-badge[hidden],
.bank-advanced-filters[hidden]{
  display:none;
}

.bank-advanced-filters{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(150px,220px) auto;
  align-items:end;
  gap:7px;
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--line);
}

.bank-advanced-filters label{
  display:grid;
  gap:4px;
}

.bank-advanced-filters label > span{
  font-size:9px;
  font-weight:700;
  color:var(--muted);
}

.bank-advanced-filters input,
.bank-advanced-filters select{
  width:100%;
  min-width:0;
}

.bank-reset-filters{
  min-height:34px;
}

@media(max-width:700px){
  .bank-topbar-v2{
    padding:6px;
  }

  .bank-main-nav{
    gap:5px;
  }

  .bank-filter-toggle{
    min-height:32px;
    padding:5px 8px;
  }

  .bank-advanced-filters{
    grid-template-columns:1fr;
  }

  .bank-reset-filters{
    width:100%;
  }
}


/* ===== Bank UX 2.0 - Phase 2 ===== */
.bank-content-rs{
  min-height:430px;
}

.bank-grid-panel-rs{
  min-width:0;
}

.bank-slot-grid-rs{
  grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:5px;
}

.bank-slot-rs{
  aspect-ratio:1/1;
  min-height:58px;
  padding:4px;
  touch-action:manipulation;
}

.bank-slot-icon-rs{
  font-size:26px;
}

.bank-slot-count-rs{
  right:3px;
  bottom:3px;
  max-width:80%;
  font-size:8px;
}

.bank-selected-panel-rs{
  position:relative;
  min-width:260px;
}

.bank-selected-close-rs{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:18px;
  line-height:1;
}

.bank-selected-header-rs{
  padding-right:36px;
}

.bank-selected-info-rs{
  display:grid;
  gap:7px;
}

.bank-selected-info-rs > div{
  max-height:190px;
  overflow:auto;
}

.bank-selected-mobile-handle{
  display:none;
}

@media(min-width:761px){
  .bank-selected-close-rs{
    display:none;
  }
}

@media(max-width:760px){
  .bank-content-rs{
    display:block;
    min-height:0;
  }

  .bank-grid-panel-rs{
    width:100%;
  }

  .bank-slot-grid-rs{
    grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
    gap:4px;
  }

  .bank-slot-rs{
    min-height:52px;
  }

  .bank-slot-icon-rs{
    font-size:23px;
  }

  .bank-selected-panel-rs{
    position:fixed;
    left:8px;
    right:8px;
    bottom:8px;
    z-index:1450;
    display:none;
    max-height:min(74vh,620px);
    min-width:0;
    overflow:auto;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    box-shadow:0 18px 60px rgba(7,16,25,.58);
  }

  .bank-selected-panel-rs.open{
    display:block;
  }

  .bank-selected-panel-rs.open::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    background:rgba(7,16,25,.45);
    pointer-events:none;
  }

  .bank-selected-mobile-handle{
    display:block;
    width:42px;
    height:4px;
    margin:0 auto 9px;
    border-radius:999px;
    background:var(--line);
  }

  .bank-selected-header-rs{
    position:sticky;
    top:-12px;
    z-index:1;
    margin:-12px -12px 8px;
    padding:12px 48px 10px 12px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }

  .bank-selected-close-rs{
    position:sticky;
    float:right;
    top:0;
    margin:-2px 0 -30px auto;
  }

  .bank-selected-stats-rs{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }

  .bank-selected-stats-rs > div{
    padding:6px;
  }

  .bank-selected-stats-rs small{
    font-size:8px;
  }

  .bank-selected-stats-rs strong{
    font-size:10px;
  }

  .bank-selected-info-rs{
    grid-template-columns:1fr;
  }

  .bank-selected-info-rs > div{
    max-height:135px;
  }

  .bank-sell-buttons-rs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
  }

  .bank-sell-x-rs{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:5px;
  }

  .bank-selected-empty-rs{
    display:none;
  }
}

@media(max-width:420px){
  .bank-slot-grid-rs{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }

  .bank-slot-rs{
    min-height:0;
  }

  .bank-slot-icon-rs{
    font-size:22px;
  }
}


/* ============================================================
   Android UI Polish - Phase 1: Global Shell
   Consolidated mobile overrides to replace conflicting legacy
   responsive rules without changing desktop behavior.
   ============================================================ */

@media (max-width:760px){
  html{
    overflow-x:hidden;
  }

  body{
    min-width:0;
    overflow-x:hidden;
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }

  .app-shell{
    display:block;
    width:100%;
    min-width:0;
    border-inline:0;
  }

  .app-main{
    width:100%;
    min-width:0;
    min-height:100dvh;
  }

  /* Bottom app navigation */
  .sidebar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:1500;
    height:auto;
    min-height:0;
    border:0;
    border-top:1px solid var(--line);
    background:rgba(8,18,27,.98);
    box-shadow:0 -8px 28px rgba(7,16,25,.34);
    padding-bottom:env(safe-area-inset-bottom);
  }

  .brand-block,
  .sidebar-footer,
  .nav-group-label{
    display:none !important;
  }

  .main-navigation,
  .main-navigation.grouped-navigation{
    display:flex !important;
    gap:2px;
    width:100%;
    overflow-x:auto;
    padding:5px 6px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .main-navigation::-webkit-scrollbar{
    display:none;
  }

  .main-navigation .nav-group{
    display:contents;
  }

  .main-navigation button,
  .main-navigation .nav-item{
    flex:0 0 68px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2px;
    min-width:68px;
    min-height:50px;
    padding:5px 4px;
    border:1px solid transparent;
    border-radius:8px;
    text-align:center;
    scroll-snap-align:center;
  }

  .main-navigation button span,
  .main-navigation .nav-item-icon{
    width:auto;
    font-size:18px;
    line-height:1;
  }

  .main-navigation button b{
    display:block !important;
    max-width:64px;
    overflow:hidden;
    font-size:8px;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .main-navigation button.active{
    border-color:rgba(215,173,86,.4);
    box-shadow:none;
    background:rgba(215,173,86,.10);
    color:var(--gold);
  }

  /* Compact account header while retaining HP on phone */
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center !important;
    gap:7px;
    min-height:0;
    padding:7px 9px;
  }

  .topbar-title{
    display:block !important;
    min-width:0;
  }

  .topbar-title > .eyebrow,
  .topbar-title > p{
    display:none;
  }

  .health-header-stat{
    min-width:0;
    margin:0;
  }

  .health-header-stat > span{
    font-size:8px;
  }

  .health-header-stat > strong{
    font-size:11px;
  }

  .health-header-stat .health-bar{
    height:5px;
  }

  .top-stats{
    width:auto !important;
    display:flex;
    flex-wrap:nowrap !important;
    justify-content:flex-end !important;
    gap:5px;
  }

  .stat-chip{
    flex:0 0 auto !important;
    min-width:70px !important;
    padding:5px 7px;
  }

  .stat-chip span{
    font-size:7px;
  }

  .stat-chip strong{
    font-size:11px;
  }

  /* Global page spacing */
  main{
    width:100%;
    min-width:0;
    padding:9px !important;
  }

  .page,
  .activity-content{
    min-width:0;
  }

  .page-title-row,
  .section-heading{
    gap:7px;
    margin-bottom:9px;
  }

  .page-title-row h2,
  .section-heading h2{
    margin:1px 0 2px;
    font-size:20px;
  }

  .section-heading p{
    font-size:11px;
    line-height:1.35;
  }

  .eyebrow{
    font-size:8px;
  }

  /* Consistent touch controls */
  button,
  input,
  select{
    max-width:100%;
  }

  button{
    min-height:40px;
  }

  input,
  select{
    min-height:40px;
    font-size:16px; /* prevents Android browser zoom on focus */
  }

  /* Activity skill selector becomes a compact horizontal strip */
  .activity-layout{
    display:block;
  }

  .activity-sidebar-panel{
    position:static;
    margin-bottom:8px;
    overflow:hidden;
    border-radius:8px;
  }

  .activity-sidebar-panel .panel-heading{
    display:none;
  }

  .skill-tabs{
    display:flex !important;
    gap:2px;
    overflow-x:auto;
    background:transparent;
    padding:4px;
    scrollbar-width:none;
  }

  .skill-tabs::-webkit-scrollbar{
    display:none;
  }

  .skill-tabs button{
    flex:0 0 auto;
    width:auto;
    min-width:74px;
    min-height:42px;
    justify-content:center;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:7px;
    text-align:center;
  }

  .skill-tabs button.active{
    box-shadow:none;
    border-color:var(--gold);
  }

  .skill-tabs button small{
    font-size:8px;
  }

  .skill-tab-icon{
    width:auto;
    font-size:16px;
  }

  /* Current activity block should not dominate the screen */
  .current-activity-card{
    margin-bottom:8px;
  }

  .activity-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center !important;
    gap:7px;
    padding:10px;
  }

  .activity-header h2{
    font-size:16px;
  }

  .activity-header p{
    font-size:10px;
  }

  .activity-header .danger{
    width:auto;
    min-height:36px;
    padding:6px 9px;
  }

  .progress-panel{
    padding:8px 10px 10px;
  }

  .progress-meta{
    margin-bottom:4px;
    font-size:10px;
  }

  /* Shared card rhythm */
  .card,
  .item-card,
  .equipment-slot,
  .settings-card,
  .combat-roster-panel,
  .combat-battle-panel,
  .combat-food-panel-v2,
  .combat-session-panel,
  .equipment-clean-section{
    box-shadow:none;
  }

  .card,
  .item-card{
    padding:10px;
  }

  .card-grid,
  .activity-card-grid,
  .achievement-grid,
  .achievements-grid,
  .achievement-list{
    gap:7px;
  }

  /* Prevent common flex rows from overflowing the viewport */
  .filters,
  .settings-action-row,
  .equipment-clean-slot-actions,
  .combat-panel-heading,
  .achievement-title-row{
    min-width:0;
    flex-wrap:wrap;
  }

  /* Dialogs act like phone sheets */
  .skill-detail-modal,
  .skill-details-modal,
  .bank-item-modal-v2{
    align-items:flex-end;
    padding:0;
  }

  .skill-detail-panel,
  .skill-details-panel,
  .bank-item-panel-v2{
    width:100% !important;
    max-width:none !important;
    max-height:88dvh !important;
    border-radius:14px 14px 0 0 !important;
    padding-bottom:max(14px,env(safe-area-inset-bottom));
  }

  /* Leave enough space above fixed bottom navigation */
  .gain-feed{
    bottom:calc(70px + env(safe-area-inset-bottom)) !important;
  }

  footer{
    padding:9px 10px;
    margin-bottom:4px;
    font-size:9px;
  }
}

@media (max-width:390px){
  main{
    padding:7px !important;
  }

  .main-navigation button,
  .main-navigation .nav-item{
    flex-basis:62px;
    min-width:62px;
  }

  .main-navigation button b{
    max-width:58px;
    font-size:7px;
  }

  .stat-chip{
    min-width:62px !important;
  }

  .skill-tabs button{
    min-width:68px;
  }
}


/* ============================================================
   Android UI Polish - Phase 2: Combat + Equipment
   Mobile-only layout and density improvements.
   ============================================================ */

@media (max-width:760px){

  /* ---------- Combat ---------- */
  #combatPage .section-heading{
    margin-bottom:7px;
  }

  .combat-skill-overview-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    margin-bottom:7px;
  }

  .combat-skill-overview-card{
    min-width:0;
    padding:7px !important;
  }

  .combat-skill-overview-card .skill-overview-main{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:5px;
    align-items:center;
  }

  .combat-skill-overview-card .skill-overview-icon{
    width:28px;
    height:28px;
    font-size:16px;
  }

  .combat-skill-overview-card .skill-overview-copy strong{
    font-size:10px;
  }

  .combat-skill-overview-card .skill-overview-copy span{
    display:none;
  }

  .combat-skill-overview-card .skill-overview-level small{
    font-size:6px;
  }

  .combat-skill-overview-card .skill-overview-level b{
    font-size:12px;
  }

  .combat-skill-overview-card .skill-overview-progress{
    margin-top:5px;
    height:4px;
  }

  .combat-skill-overview-card .skill-overview-meta{
    display:none;
  }

  .combat-style-grid{
    display:flex !important;
    gap:5px;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
  }

  .combat-style-grid::-webkit-scrollbar{
    display:none;
  }

  .combat-style-button{
    flex:0 0 160px;
    min-height:58px;
    padding:7px !important;
  }

  .combat-style-button .combat-style-icon{
    font-size:20px;
  }

  .combat-style-button strong{
    font-size:10px;
  }

  .combat-style-button small{
    display:none;
  }

  .combat-style-button b{
    font-size:8px;
  }

  .combat-layout-v2{
    display:flex !important;
    flex-direction:column;
    gap:7px !important;
  }

  .combat-roster-panel,
  .combat-battle-panel,
  .combat-food-panel-v2,
  .combat-session-panel{
    padding:7px !important;
    border-radius:8px;
  }

  .combat-roster-panel{
    order:1;
  }

  .combat-battle-panel{
    order:2;
  }

  .combat-side-panel{
    order:3;
    display:grid !important;
    grid-template-columns:1fr;
    gap:7px !important;
  }

  .combat-panel-heading{
    align-items:center !important;
    gap:5px;
    margin-bottom:6px;
  }

  .combat-panel-heading h3{
    margin:1px 0 0;
    font-size:14px;
  }

  .combat-panel-heading strong,
  .combat-panel-heading button{
    min-height:32px;
    padding:5px 7px;
    font-size:9px;
  }

  .combat-enemy-grid{
    display:flex !important;
    gap:5px;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
  }

  .combat-enemy-grid::-webkit-scrollbar{
    display:none;
  }

  .combat-enemy-card{
    flex:0 0 145px;
    min-height:58px;
    padding:7px !important;
  }

  .combat-enemy-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
    font-size:18px;
  }

  .combat-enemy-card strong{
    font-size:10px;
  }

  .combat-enemy-card small{
    font-size:8px;
  }

  .combat-battle-view{
    min-height:0 !important;
  }

  .combat-main-card,
  .combat-battle-clean{
    gap:7px !important;
    padding:0 !important;
  }

  .combatant-card{
    padding:8px !important;
  }

  .combatant-card h3,
  .combatant-card strong{
    font-size:13px;
  }

  .combat-health-bar{
    height:6px;
    margin:4px 0 6px;
  }

  .combat-attack-progress,
  .combat-timer-track{
    height:6px !important;
  }

  .combat-food-panel-v2{
    order:1;
  }

  .combat-session-panel{
    order:2;
  }

  .combat-side-help{
    margin:0 0 6px;
    font-size:9px;
  }

  .combat-selected-food-box{
    margin-bottom:6px;
  }

  .combat-food-grid-v2{
    display:flex !important;
    gap:5px;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
  }

  .combat-food-grid-v2::-webkit-scrollbar{
    display:none;
  }

  .combat-food-choice{
    flex:0 0 145px;
    min-height:54px;
    padding:6px !important;
  }

  .combat-food-choice-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
    font-size:17px;
  }

  .combat-food-choice strong{
    font-size:10px;
  }

  .combat-food-choice small{
    font-size:8px;
  }

  .combat-session-xp{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  .combat-session-xp > div{
    padding:5px 4px !important;
  }

  .combat-session-xp small{
    font-size:7px;
  }

  .combat-session-xp strong{
    font-size:10px;
  }

  .combat-session-loot{
    max-height:150px;
    overflow:auto;
  }

  .combat-session-summary-row{
    gap:5px !important;
    padding:6px !important;
  }

  .combat-session-summary-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
    font-size:17px;
  }

  /* ---------- Equipment ---------- */
  #equipmentPage .section-heading,
  .equipment-page-heading{
    gap:6px !important;
  }

  .equipment-best-loadout-button{
    width:100%;
    min-height:38px;
    padding:7px 9px;
  }

  .equipment-clean-section{
    padding:9px !important;
    margin-bottom:8px !important;
    border-radius:8px;
  }

  .equipment-clean-summary{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .equipment-combat-level-card{
    display:grid !important;
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:center !important;
    gap:6px;
    padding:8px !important;
  }

  .equipment-combat-level-card small{
    font-size:8px;
  }

  .equipment-combat-level-card strong{
    font-size:18px;
  }

  .equipment-combat-level-card span{
    font-size:9px;
  }

  .equipment-combat-stats{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    width:100%;
  }

  .equipment-combat-stats > div{
    padding:6px !important;
  }

  .equipment-combat-stats small{
    font-size:7px;
  }

  .equipment-combat-stats strong{
    font-size:11px;
  }

  .equipment-clean-heading{
    align-items:center !important;
    gap:6px;
    margin-bottom:6px;
  }

  .equipment-clean-heading h3{
    margin:1px 0;
    font-size:14px;
  }

  .equipment-clean-heading > small{
    display:none;
  }

  .equipment-slot-overview,
  .equipment-slot-overview-clean{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .equipment-clean-slot{
    min-width:0;
    padding:7px !important;
  }

  .equipment-clean-slot-main{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
    gap:6px !important;
  }

  .equipment-clean-slot-icon{
    width:32px !important;
    height:32px !important;
    font-size:18px !important;
  }

  .equipment-clean-slot-main small{
    font-size:7px;
  }

  .equipment-clean-slot-main strong{
    font-size:10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .equipment-clean-slot-main span{
    font-size:8px;
    line-height:1.25;
  }

  .equipment-clean-slot-actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:4px !important;
    margin-top:6px;
  }

  .equipment-clean-slot-actions button{
    width:100%;
    min-height:32px;
    padding:5px 6px;
    font-size:8px;
  }

  .equipment-bis-label{
    font-size:7px;
    line-height:1.25;
  }

  .equipment-tools-clean{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .equipment-tool-clean{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px !important;
    align-items:center;
    padding:7px !important;
  }

  .equipment-tool-clean-main{
    min-width:0;
  }

  .equipment-tool-clean-main strong{
    font-size:10px;
  }

  .equipment-tool-clean-main span{
    font-size:8px;
  }

  .equipment-tool-clean .equipment-clean-slot-actions{
    min-width:92px;
    margin-top:0;
  }

  /* Keep fixed bottom navigation from covering lower actions */
  #combatPage,
  #equipmentPage{
    padding-bottom:8px;
  }
}

@media (max-width:390px){
  .combat-skill-overview-grid{
    gap:4px !important;
  }

  .combat-skill-overview-card{
    padding:6px !important;
  }

  .combat-style-button,
  .combat-enemy-card,
  .combat-food-choice{
    flex-basis:132px;
  }

  .equipment-slot-overview,
  .equipment-slot-overview-clean{
    grid-template-columns:1fr !important;
  }

  .equipment-tool-clean{
    grid-template-columns:1fr;
  }

  .equipment-tool-clean .equipment-clean-slot-actions{
    min-width:0;
  }
}


/* ============================================================
   Android UI Polish - Phase 3: Skills + Mastery + Collections
   ============================================================ */

@media (max-width:760px){

  /* Skills */
  #skillsPage .section-heading{
    margin-bottom:7px;
  }

  #skillCards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #skillCards .card{
    min-width:0;
    padding:8px !important;
  }

  #skillCards .card-top{
    gap:6px;
    align-items:center;
  }

  #skillCards .large-icon{
    font-size:22px;
  }

  #skillCards h3{
    font-size:11px;
    line-height:1.2;
  }

  #skillCards .requirements,
  #skillCards p{
    min-height:0;
    font-size:8px;
    line-height:1.3;
  }

  #skillCards button{
    min-height:32px;
    padding:5px 6px;
    font-size:8px;
  }

  .skill-detail-modal{
    align-items:flex-end;
    padding:0 !important;
  }

  .skill-detail-panel,
  .skill-detail-modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:88dvh !important;
    border-radius:14px 14px 0 0 !important;
  }

  .skill-detail-header{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px !important;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }

  .skill-detail-header h3{
    font-size:16px;
  }

  .skill-detail-header-actions{
    gap:5px;
  }

  .skill-detail-header-actions strong{
    font-size:10px;
  }

  .skill-detail-close{
    width:32px;
    height:32px;
    min-height:32px;
    padding:0;
  }

  .skill-detail-tabs{
    position:sticky;
    top:58px;
    z-index:2;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:4px;
    padding:7px 10px;
    background:var(--surface);
    border-bottom:1px solid var(--line);
  }

  .skill-detail-tabs button{
    min-height:34px;
    padding:5px 7px;
    font-size:9px;
  }

  .skill-detail-view{
    padding:9px !important;
  }

  #skillXpTableView{
    overflow-x:auto;
  }

  #skillXpTableView table{
    min-width:360px;
    font-size:9px;
  }

  #skillXpTableView th,
  #skillXpTableView td{
    padding:5px 6px;
  }

  /* Mastery */
  #masteryPage .section-heading{
    margin-bottom:7px;
  }

  .mastery-summary-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    margin-bottom:7px !important;
  }

  .mastery-summary-card{
    min-width:0;
    padding:7px !important;
  }

  .mastery-summary-card span{
    font-size:7px;
  }

  .mastery-summary-card strong{
    font-size:13px;
  }

  .mastery-summary-card small{
    display:none;
  }

  #masterySkillTabs,
  .mastery-skill-tabs{
    display:flex !important;
    gap:5px;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
  }

  #masterySkillTabs::-webkit-scrollbar,
  .mastery-skill-tabs::-webkit-scrollbar{
    display:none;
  }

  #masterySkillTabs button,
  .mastery-skill-tabs button{
    flex:0 0 auto;
    min-width:82px;
    min-height:38px;
    padding:6px 8px;
    font-size:9px;
  }

  .mastery-section{
    margin-bottom:8px !important;
  }

  .mastery-section-heading{
    gap:6px;
    margin-bottom:6px;
  }

  .mastery-section-heading h3{
    font-size:14px;
  }

  #masteryMilestones,
  .mastery-milestone-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .mastery-milestone-card{
    min-width:0;
    padding:8px !important;
  }

  .mastery-milestone-card h4,
  .mastery-milestone-card strong{
    font-size:10px;
  }

  .mastery-milestone-card p,
  .mastery-milestone-card small{
    font-size:8px;
  }

  #masteryActivityRows,
  .mastery-activity-list{
    display:grid;
    gap:6px;
  }

  .mastery-activity-row{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
    gap:7px !important;
    align-items:center;
    padding:8px !important;
  }

  .mastery-activity-icon{
    width:34px !important;
    height:34px !important;
    font-size:20px !important;
  }

  .mastery-activity-copy{
    min-width:0;
  }

  .mastery-activity-title{
    gap:5px;
  }

  .mastery-activity-title strong{
    font-size:10px;
  }

  .mastery-activity-title span{
    font-size:8px;
  }

  .mastery-progress{
    height:5px;
    margin:5px 0;
  }

  .mastery-activity-meta{
    gap:5px;
    font-size:8px;
  }

  .mastery-activity-bonus{
    grid-column:1/-1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:5px;
    border-top:1px solid var(--line);
  }

  .mastery-activity-bonus small{
    font-size:7px;
  }

  .mastery-activity-bonus strong{
    font-size:9px;
  }

  /* Collections */
  .mastery-collection-controls,
  .achievement-controls{
    gap:5px !important;
  }

  .achievement-filter-tabs{
    display:flex !important;
    gap:5px;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
  }

  .achievement-filter-tabs::-webkit-scrollbar{
    display:none;
  }

  .achievement-filter-tabs button{
    flex:0 0 auto;
    min-width:72px;
    min-height:34px;
    padding:5px 7px;
    font-size:8px;
  }

  .achievement-filter-tools{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
  }

  .achievement-filter-tools input,
  .achievement-filter-tools select,
  #achievementSearchInput{
    width:100% !important;
    min-height:38px;
    font-size:16px;
  }

  .achievement-filter-summary{
    margin-bottom:6px !important;
    font-size:9px !important;
  }

  #achievementCards,
  #achievementCards.achievement-grid,
  .mastery-collection-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  #achievementCards .achievement-card{
    padding:8px !important;
  }

  .achievement-card-main{
    gap:7px !important;
  }

  #achievementCards .achievement-icon{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    font-size:20px !important;
  }

  #achievementCards .achievement-card h3{
    font-size:11px !important;
  }

  #achievementCards .achievement-card p{
    font-size:8px !important;
    line-height:1.3 !important;
  }

  .achievement-status-pill{
    padding:2px 5px;
    font-size:7px;
  }

  .achievement-progress-bar{
    height:4px;
    margin:6px 0 5px;
  }

  .achievement-card-footer{
    display:grid !important;
    grid-template-columns:1fr auto;
    align-items:center !important;
    gap:5px !important;
    font-size:8px !important;
  }

  .achievement-reward-inline{
    max-width:150px;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width:390px){
  #skillCards{
    grid-template-columns:1fr !important;
  }

  .mastery-summary-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .mastery-summary-card:last-child{
    grid-column:1/-1;
  }

  #masteryMilestones,
  .mastery-milestone-grid{
    grid-template-columns:1fr !important;
  }

  .achievement-card-footer{
    grid-template-columns:1fr !important;
  }

  .achievement-reward-inline{
    max-width:none;
    text-align:left;
  }
}


/* ============================================================
   Android UI Polish - Phase 4: Bank + Production + Shop/Settings
   ============================================================ */

@media (max-width:760px){

  /* ---------- Bank ---------- */
  #bankPage .section-heading{
    margin-bottom:7px;
  }

  .bank-stack-note{
    margin-top:3px !important;
    font-size:8px !important;
  }

  .bank-shell-rs{
    border-radius:8px;
  }

  .bank-topbar-rs,
  .bank-topbar-v2{
    padding:6px !important;
  }

  .bank-main-nav{
    gap:5px !important;
  }

  #bankCategoryTabs{
    gap:4px !important;
  }

  #bankCategoryTabs button{
    min-height:34px;
    padding:5px 8px;
    font-size:8px;
  }

  .bank-filter-toggle{
    min-height:34px !important;
    padding:5px 8px !important;
    font-size:8px;
  }

  .bank-advanced-filters{
    gap:5px !important;
    padding-top:6px !important;
  }

  .bank-advanced-filters label > span{
    font-size:7px !important;
  }

  .bank-advanced-filters input,
  .bank-advanced-filters select{
    min-height:38px !important;
  }

  .bank-reset-filters{
    min-height:36px !important;
  }

  .bank-discovery-rs{
    padding:6px 7px !important;
    margin-bottom:6px !important;
  }

  .bank-discovery-rs span,
  .bank-discovery-rs strong{
    font-size:8px !important;
  }

  .bank-discovery-bar{
    height:5px !important;
  }

  .bank-slot-grid-rs{
    gap:4px !important;
  }

  .bank-slot-rs{
    border-radius:5px !important;
  }

  .bank-selected-panel-rs{
    padding:10px !important;
  }

  .bank-selected-header-rs{
    padding-top:10px !important;
  }

  .bank-selected-stats-rs{
    gap:4px !important;
  }

  .bank-selected-info-rs{
    gap:6px !important;
  }

  .bank-selected-info-rs > div{
    padding:7px !important;
  }

  .bank-sell-rs{
    margin-top:7px !important;
  }

  .bank-sell-buttons-rs button,
  .bank-sell-x-rs button{
    min-height:34px;
    font-size:8px;
  }

  /* ---------- Production activities ---------- */
  .activity-browse-controls{
    position:sticky;
    top:0;
    z-index:20;
    margin-bottom:7px !important;
    padding:6px !important;
    border-radius:8px;
  }

  .activity-quick-nav{
    gap:5px !important;
  }

  .activity-main-filters{
    gap:4px !important;
  }

  .activity-filter-chip{
    min-height:31px !important;
    padding:4px 7px !important;
    font-size:8px !important;
  }

  .activity-filter-toggle{
    min-height:31px !important;
    padding:4px 7px !important;
    font-size:8px !important;
  }

  .activity-advanced-filters{
    margin-top:6px !important;
    padding-top:6px !important;
  }

  .activity-advanced-filters .activity-filter-row{
    margin-top:6px !important;
  }

  .activity-advanced-filters .activity-search input{
    min-height:38px !important;
  }

  .activity-filter-summary{
    font-size:8px !important;
  }

  .activity-clear-filters{
    min-height:32px !important;
    padding:4px 7px !important;
    font-size:8px !important;
  }

  .activity-category-section{
    margin-top:7px !important;
  }

  .activity-category-heading{
    padding:7px 8px !important;
  }

  .activity-category-heading h3{
    font-size:13px !important;
  }

  .activity-category-heading > span{
    font-size:8px !important;
  }

  .activity-category-grid{
    gap:6px !important;
  }

  .activity-category-grid .card{
    padding:8px !important;
  }

  .activity-category-grid .card h3{
    font-size:11px;
  }

  .activity-category-grid .requirements{
    font-size:8px;
    min-height:0;
  }

  .activity-category-grid .card > button{
    min-height:34px;
    font-size:8px;
  }

  /* ---------- Shop ---------- */
  #shopPage .section-heading{
    margin-bottom:7px;
  }

  #shopCards.card-grid,
  #shopCards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #shopCards .card{
    min-width:0;
    padding:8px !important;
  }

  #shopCards .card-top{
    gap:5px;
  }

  #shopCards .card h3{
    font-size:11px;
  }

  #shopCards .card b{
    font-size:9px;
  }

  #shopCards .card > button{
    min-height:34px;
    font-size:8px;
  }

  #shopCards .unlock-tooltip{
    left:4px;
    right:4px;
    padding:8px;
    font-size:8px;
  }

  /* ---------- Settings ---------- */
  #settingsPage .section-heading{
    margin-bottom:7px;
  }

  .settings-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  .settings-card{
    padding:9px !important;
    border-radius:8px;
  }

  .settings-card h3{
    margin:2px 0 5px;
    font-size:14px;
  }

  .settings-card p,
  .settings-hint,
  .cloud-sync-status{
    font-size:9px !important;
    line-height:1.35;
  }

  .settings-name-row{
    display:grid !important;
    grid-template-columns:1fr;
    gap:5px !important;
  }

  .settings-name-row input,
  .settings-name-row button{
    width:100%;
  }

  .settings-action-row{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:5px !important;
  }

  .settings-action-row button,
  .google-signin-button{
    min-height:38px;
    font-size:9px;
  }

  .cloud-signed-in{
    gap:6px !important;
  }

  .cloud-user-copy{
    min-width:0;
  }

  .cloud-user-copy strong,
  .cloud-user-copy span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* ---------- Shared modal/action density ---------- */
  .sell-confirm-card{
    max-height:86dvh;
    overflow:auto;
  }

  .sell-confirm-actions button{
    min-height:38px;
  }
}

@media (max-width:390px){
  #shopCards.card-grid,
  #shopCards{
    grid-template-columns:1fr !important;
  }

  .settings-action-row{
    grid-template-columns:1fr !important;
  }
}


/* ============================================================
   Android UI Polish - Phase 5: Final Stability / Layout Pass
   ============================================================ */

@media (max-width:760px){
  html,body,.app-shell,.app-main,main,.page{
    max-width:100%;
    overflow-x:hidden;
  }

  img,svg,canvas{max-width:100%;}

  pre,code{
    max-width:100%;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }

  h1,h2,h3,h4,strong,p,span,small,li{
    overflow-wrap:anywhere;
  }

  .card,.item-card,.achievement-card,.mastery-activity-row,
  .equipment-clean-slot,.equipment-tool-clean,.combat-enemy-card,
  .combat-food-item,.combat-food-choice,.settings-card{
    min-width:0;
  }

  .page.active{padding-bottom:4px;}

  body{
    scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom));
  }

  .activity-browse-controls,
  .bank-topbar-v2{
    top:0 !important;
  }

  button,input,select{
    touch-action:manipulation;
  }

  button{line-height:1.15;}
  input,select{width:100%;}

  .main-navigation,.skill-tabs,#masterySkillTabs,.mastery-skill-tabs,
  .achievement-filter-tabs,.activity-category-chips,.activity-availability-chips,
  #bankCategoryTabs,.combat-style-grid,.combat-enemy-grid,.combat-food-grid-v2{
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  .sell-confirm-modal,.skill-detail-modal,.skill-details-modal,.bank-item-modal-v2{
    max-width:100vw;
    overflow:hidden;
  }

  .sell-confirm-card,.skill-detail-panel,.skill-details-panel,
  .skill-detail-modal-card,.bank-item-panel-v2,.bank-selected-panel-rs.open{
    max-width:100vw !important;
    max-height:88dvh !important;
  }

  .sell-confirm-card,.skill-detail-panel,.skill-details-panel,
  .skill-detail-modal-card,.bank-item-panel-v2{
    overflow:auto;
  }

  .section-heading,.page-title-row{
    align-items:flex-start !important;
  }

  .section-heading > div,.page-title-row > div{
    min-width:0;
  }

  .bank-selected-panel-rs.open{
    bottom:calc(70px + env(safe-area-inset-bottom)) !important;
  }

  .gain-feed{
    max-height:40dvh;
    overflow:hidden;
  }

  .gain-toast{max-width:100%;}

  .achievement-unlock-toast{
    max-width:calc(100vw - 16px);
  }

  .diagnostics{overflow:hidden;}

  .diagnostics pre{
    max-height:50dvh;
    overflow:auto;
  }

  table{max-width:100%;}

  .combat-layout-v2,.combat-side-panel,.combat-battle-view,
  .combat-main-card,.combat-battle-clean,.combatant-card{
    min-width:0 !important;
    max-width:100%;
  }

  .equipment-clean-slot-main > div,
  .equipment-tool-clean-main > div{
    min-width:0;
  }

  .achievement-title-row > *{min-width:0;}

  .activity-quick-nav,.activity-main-filters,.activity-category-nav{
    min-width:0;
  }

  footer{
    padding-bottom:calc(9px + env(safe-area-inset-bottom));
  }
}

@media (max-width:420px){
  .topbar{
    grid-template-columns:1fr;
  }

  .top-stats{
    justify-content:stretch !important;
  }

  .stat-chip{
    flex:1 1 0 !important;
  }

  .health-header-stat{
    width:100%;
  }

  .activity-header{
    grid-template-columns:1fr;
  }

  .activity-header .danger{
    width:100%;
  }

  .bank-selected-stats-rs{
    grid-template-columns:1fr !important;
  }

  .combat-session-xp{
    grid-template-columns:1fr 1fr !important;
  }
}


/* ============================================================
   Android Top Navigation + Compact Gain Feed
   ============================================================ */

@media (max-width:760px){

  /* Navigation moves to the top */
  body{
    padding-bottom:0 !important;
    padding-top:0;
    scroll-padding-top:64px;
    scroll-padding-bottom:0;
  }

  .sidebar{
    position:sticky !important;
    top:0 !important;
    bottom:auto !important;
    left:auto;
    right:auto;
    z-index:1500;
    width:100%;
    padding-bottom:0 !important;
    border-top:0 !important;
    border-bottom:1px solid var(--line) !important;
    background:rgba(8,18,27,.98);
    box-shadow:0 8px 24px rgba(7,16,25,.28);
  }

  .main-navigation,
  .main-navigation.grouped-navigation{
    min-height:56px;
    padding:
      calc(4px + env(safe-area-inset-top))
      6px
      4px !important;
  }

  .main-navigation button,
  .main-navigation .nav-item{
    flex-basis:64px !important;
    min-width:64px !important;
    min-height:46px !important;
    padding:4px 3px !important;
  }

  .main-navigation button span,
  .main-navigation .nav-item-icon{
    font-size:17px !important;
  }

  .main-navigation button b{
    max-width:60px !important;
    font-size:7px !important;
  }

  /* Topbar now follows the navigation instead of competing with it */
  .topbar{
    position:relative;
    z-index:20;
  }

  /* Sticky controls must sit below the top navigation + stats header */
  .activity-browse-controls,
  .bank-topbar-v2{
    top:0 !important;
  }

  /* Remove bottom-nav compensation introduced by previous Android phases */
  .bank-selected-panel-rs.open{
    bottom:8px !important;
  }

  footer{
    padding-bottom:9px !important;
  }

  /* Compact Gain Feed: smaller, less intrusive, lower-left */
  .gain-feed{
    left:6px !important;
    bottom:6px !important;
    width:min(220px,calc(100vw - 12px)) !important;
    max-height:28dvh !important;
    gap:4px !important;
    pointer-events:none;
  }

  .gain-toast{
    min-width:0 !important;
    max-width:100% !important;
    padding:5px 7px !important;
    border-radius:7px !important;
    box-shadow:0 5px 16px rgba(7,16,25,.30) !important;
  }

  .gain-toast-icon,
  .gain-toast > span:first-child{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
    font-size:15px !important;
  }

  .gain-toast strong{
    font-size:9px !important;
    line-height:1.15 !important;
  }

  .gain-toast small,
  .gain-toast span{
    font-size:7px !important;
    line-height:1.15 !important;
  }
}

@media (max-width:390px){
  .main-navigation button,
  .main-navigation .nav-item{
    flex-basis:58px !important;
    min-width:58px !important;
  }

  .main-navigation button b{
    max-width:54px !important;
    font-size:6.5px !important;
  }

  .gain-feed{
    width:min(195px,calc(100vw - 10px)) !important;
    left:5px !important;
    bottom:5px !important;
  }

  .gain-toast{
    padding:4px 6px !important;
  }
}


/* ===== Bank Item Close Fix ===== */
@media (max-width:760px){
  .bank-selected-panel-rs.open{
    isolation:isolate;
  }

  .bank-selected-close-rs{
    position:absolute !important;
    top:8px !important;
    right:8px !important;
    z-index:20 !important;
    float:none !important;
    margin:0 !important;
    display:grid !important;
    place-items:center;
    width:36px !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 !important;
    touch-action:manipulation;
  }

  .bank-selected-header-rs{
    padding-right:52px !important;
  }

  .bank-selected-panel-rs.open::before{
    pointer-events:none !important;
  }
}


/* ============================================================
   Mobile Top Navigation 2.0
   ============================================================ */
.mobile-top-navigation{display:none;}

@media (max-width:760px){
  .sidebar{display:none !important;}

  .mobile-top-navigation{
    position:sticky;
    top:0;
    z-index:1600;
    display:block;
    width:100%;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid var(--line);
    background:rgba(8,18,27,.985);
    box-shadow:0 5px 18px rgba(7,16,25,.30);
  }

  .mobile-nav-primary{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    padding:5px 6px;
  }

  .mobile-nav-item{
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    min-width:0;
    min-height:48px !important;
    padding:4px 2px !important;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    box-shadow:none;
  }

  .mobile-nav-item>span{font-size:18px;line-height:1;}
  .mobile-nav-item>b{
    width:100%;
    overflow:hidden;
    font-size:8px;
    line-height:1.1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-nav-item.active,
  .mobile-nav-item.menu-open{
    border-color:rgba(215,173,86,.45);
    background:rgba(215,173,86,.11);
    color:var(--gold);
  }

  .mobile-more-button>span{
    font-size:17px;
    font-weight:900;
    letter-spacing:2px;
  }

  .mobile-nav-more{
    position:absolute;
    top:100%;
    left:6px;
    right:6px;
    z-index:1610;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    padding:7px;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 10px 10px;
    background:rgba(8,18,27,.995);
    box-shadow:0 12px 30px rgba(7,16,25,.46);
  }

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

  .mobile-nav-more-item{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:6px;
    min-width:0;
    min-height:42px !important;
    padding:6px 8px !important;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface-2);
    color:var(--muted);
    text-align:left;
  }

  .mobile-nav-more-item>span{
    display:grid;
    place-items:center;
    font-size:17px;
  }

  .mobile-nav-more-item>b{
    overflow:hidden;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-nav-more-item.active{
    border-color:rgba(215,173,86,.5);
    background:rgba(215,173,86,.11);
    color:var(--gold);
  }

  .mobile-nav-more-item:last-child:nth-child(odd){grid-column:1/-1;}

  .topbar{
    position:relative !important;
    top:auto !important;
    z-index:20 !important;
  }

  body{scroll-padding-top:64px !important;}
}

@media (max-width:390px){
  .mobile-nav-primary{gap:2px;padding-inline:4px;}
  .mobile-nav-item{min-height:46px !important;}
  .mobile-nav-item>span{font-size:17px;}
  .mobile-nav-item>b{font-size:7px;}
  .mobile-nav-more{left:4px;right:4px;padding:6px;}
}


/* ============================================================
   Mastery / Collections Split
   ============================================================ */

#achievementsPage .mastery-section{
  margin-bottom:0;
}

#achievementsPage .mastery-section-heading{
  display:none;
}

@media (max-width:760px){
  #achievementsPage .achievement-controls{
    margin-top:0;
  }

  #achievementsPage .achievement-filter-tabs{
    position:sticky;
    top:0;
    z-index:15;
    padding:5px 0 4px;
    background:var(--bg);
  }

  #achievementsPage .achievement-filter-tools{
    margin-top:5px;
  }

  #achievementsPage .mastery-collection-grid{
    margin-top:6px;
  }

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


/* Collections summary belongs to the standalone Collections page. */
.collections-page-summary{
  display:grid;
  grid-template-columns:minmax(180px,240px);
  margin:0 0 12px;
}
.collections-page-summary > *{
  width:100%;
}
@media (max-width:760px){
  .collections-page-summary{
    grid-template-columns:1fr;
    margin-bottom:8px;
  }
}

/* Expeditions v1 - Phase 1 */
.expedition-page-heading { align-items: center; }
.expedition-layout { display: grid; grid-template-columns: minmax(230px, 0.72fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.expedition-regions-panel, .expedition-detail-panel { background: var(--panel, #08121b); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 18px; padding: 18px; }
.expedition-region-grid { display: grid; gap: 10px; margin-top: 14px; }
.expedition-region-card { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 13px; border-radius: 14px; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.035); }
.expedition-region-card.selected { outline: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.075); }
.expedition-region-card.locked { opacity: .58; }
.expedition-region-icon { font-size: 24px; }
.expedition-region-copy { display: grid; gap: 3px; }
.expedition-region-copy small, .expedition-region-state { opacity: .72; font-size: 12px; }
.expedition-detail-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.expedition-detail-heading h3 { margin: 4px 0 6px; }
.expedition-detail-heading p { margin: 0; max-width: 720px; opacity: .76; }
.expedition-level-pill { flex: 0 0 auto; display: grid; gap: 2px; text-align: right; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.expedition-level-pill small { opacity: .65; }
.expedition-phase-note { margin: 16px 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.045); font-size: 13px; opacity: .84; }
.expedition-encounter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.expedition-encounter-card { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; min-height: 118px; padding: 15px; border-radius: 15px; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.035); }
.expedition-encounter-card.locked { opacity: .56; }
.expedition-encounter-card.boss { grid-column: 1 / -1; }
.expedition-encounter-icon { font-size: 28px; }
.expedition-encounter-copy h4 { margin: 3px 0 6px; font-size: 16px; }
.expedition-encounter-copy p { margin: 0; opacity: .72; font-size: 13px; }
.expedition-encounter-status { grid-column: 1 / -1; font-size: 12px; opacity: .68; }

@media (max-width: 900px) {
  .expedition-layout { grid-template-columns: 1fr; }
  .expedition-region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expedition-region-card { grid-template-columns: 34px 1fr; }
  .expedition-region-state { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .expedition-region-grid, .expedition-encounter-grid { grid-template-columns: 1fr; }
  .expedition-encounter-card.boss { grid-column: auto; }
  .expedition-detail-heading { flex-direction: column; }
  .expedition-level-pill { width: 100%; text-align: left; }
}

/* Expeditions v1 - Phase 2 playable encounter layer */
.expedition-encounter-card.active {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.085);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.expedition-health { grid-column: 1 / -1; display: grid; gap: 6px; }
.expedition-health > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; opacity: .8; }
.expedition-health-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.expedition-health-track span { display: block; height: 100%; border-radius: inherit; background: currentColor; opacity: .72; transition: width .2s linear; }
.expedition-action { grid-column: 1 / -1; min-height: 38px; border-radius: 11px; border: 1px solid var(--border, rgba(255,255,255,.1)); background: rgba(255,255,255,.09); font-weight: 700; cursor: pointer; }
.expedition-action:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.expedition-action.stop { background: rgba(255,255,255,.055); }
.expedition-action:disabled { cursor: not-allowed; opacity: .48; }
.expedition-encounter-card.locked .expedition-action { pointer-events: none; }

/* Expeditions Phase 3 progression */
.expedition-kill-progress { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); font-size: 12px; }
.expedition-kill-progress span, .expedition-kill-progress small { opacity: .68; font-weight: 500; }
.expedition-kill-progress strong { font-size: 14px; }
.expedition-region-progress { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.expedition-region-progress span { opacity: .72; }

/* Expeditions Phase 5: compact loot previews */
.expedition-loot-preview { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 2px; }
.expedition-loot-list { display: flex; flex-wrap: wrap; gap: 6px; }
.expedition-loot-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 999px; background: rgba(255,255,255,.035); font-size: .78rem; line-height: 1; }
.expedition-loot-chip small { opacity: .62; font-size: .68rem; }
.expedition-loot-chip.unique { border-color: rgba(245, 193, 82, .65); box-shadow: inset 0 0 0 1px rgba(245, 193, 82, .08); }
@media (max-width: 700px) { .expedition-loot-chip { font-size: .74rem; padding: 5px 7px; } }


/* Expeditions Phase 6: boss identity, mechanics and first-victory rewards */
.expedition-boss-mechanic { grid-column: 1 / -1; position: relative; display: grid; gap: 6px; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); }
.expedition-boss-mechanic > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.expedition-boss-mechanic p { margin: 0; font-size: 12px; line-height: 1.45; opacity: .72; }
.expedition-boss-mechanic.active { border-color: rgba(245,193,82,.62); background: rgba(245,193,82,.08); box-shadow: inset 0 0 0 1px rgba(245,193,82,.06); }
.expedition-phase-active { justify-self: start; padding: 4px 7px; border-radius: 999px; background: rgba(245,193,82,.14); font-size: 11px; font-weight: 800; }
.expedition-first-kill { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.04); }
.expedition-first-kill strong { font-size: 12px; text-align: right; }
.expedition-first-kill.claimed { opacity: .62; }
@media (max-width: 640px) { .expedition-first-kill { align-items: flex-start; flex-direction: column; } .expedition-first-kill strong { text-align: left; } }

/* Expeditions v1 - Phase 7 UI polish */
.expedition-page-heading { margin-bottom: 18px; }
.expedition-layout { grid-template-columns: minmax(220px, .62fr) minmax(0, 2.38fr); gap: 20px; }
.expedition-regions-panel { position: sticky; top: 18px; padding: 16px; }
.expedition-detail-panel { padding: 0; overflow: hidden; background: transparent; border: 0; }
.expedition-region-grid { gap: 9px; }
.expedition-region-card { position: relative; overflow: hidden; min-height: 72px; grid-template-columns: 42px 1fr; padding: 12px 13px; transition: transform .16s ease, background .16s ease, border-color .16s ease; cursor: pointer; }
.expedition-region-card:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); }
.expedition-region-card.selected { outline: 0; border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.085); box-shadow: inset 3px 0 0 rgba(255,255,255,.45); }
.expedition-region-card.locked { opacity: .62; }
.expedition-region-state { grid-column: 2; justify-self: start; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.055); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.expedition-region-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 18px; background: rgba(255,255,255,.035); }
.expedition-region-hero-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 17px; background: rgba(255,255,255,.065); font-size: 34px; }
.expedition-region-hero-copy h3 { margin: 3px 0 5px; font-size: 22px; }
.expedition-region-hero-copy p { margin: 0; max-width: 760px; opacity: .72; line-height: 1.5; }
.expedition-region-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.expedition-region-tags span { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.05); font-size: 11px; opacity: .82; }
.expedition-region-hero-level { min-width: 118px; display: grid; gap: 3px; text-align: right; padding: 11px 12px; border-radius: 13px; background: rgba(255,255,255,.05); }
.expedition-region-hero-level small, .expedition-region-hero-level span { opacity: .65; }
.expedition-region-hero-level strong { font-size: 18px; }
.expedition-region-hero-level span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }

.expedition-progress-overview { margin: 12px 0 18px; padding: 16px 18px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 16px; background: rgba(255,255,255,.025); }
.expedition-progress-copy { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.expedition-progress-copy > div { display: grid; gap: 2px; text-align: right; }
.expedition-progress-copy > div span { opacity: .62; font-size: 12px; }
.expedition-progress-track, .expedition-kill-bar { height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.expedition-progress-track { margin: 11px 0; }
.expedition-progress-track > span, .expedition-kill-bar > span { display: block; height: 100%; border-radius: inherit; background: currentColor; opacity: .62; }
.expedition-progress-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.expedition-progress-metrics > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.035); }
.expedition-progress-metrics span { opacity: .62; font-size: 11px; }
.expedition-progress-metrics strong { font-size: 12px; }
.expedition-path-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 2px 10px; }
.expedition-path-heading h3 { margin: 2px 0 0; }
.expedition-path-hint { opacity: .58; font-size: 11px; }

.expedition-encounter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.expedition-encounter-card { display: flex; flex-direction: column; gap: 11px; min-height: 0; padding: 15px; border-radius: 16px; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.expedition-encounter-card:hover { transform: translateY(-1px); }
.expedition-encounter-card.locked, .expedition-encounter-card.level-locked { opacity: .64; }
.expedition-encounter-card.ready { border-color: rgba(255,255,255,.13); }
.expedition-encounter-card.active { opacity: 1; transform: none; border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.075); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.expedition-encounter-card.boss { grid-column: 1 / -1; border-color: rgba(245,193,82,.22); background: linear-gradient(135deg, rgba(245,193,82,.055), rgba(255,255,255,.025)); }
.expedition-card-topline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.expedition-step { font-size: 10px; font-weight: 900; letter-spacing: .12em; opacity: .52; }
.expedition-state-badge { padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.055); font-size: 10px; font-weight: 800; }
.expedition-encounter-card.active .expedition-state-badge { background: rgba(255,255,255,.12); }
.expedition-encounter-identity { display: grid; grid-template-columns: 46px 1fr; gap: 11px; align-items: center; }
.expedition-encounter-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.05); font-size: 25px; }
.expedition-encounter-copy h4 { margin: 2px 0 4px; font-size: 17px; }
.expedition-encounter-copy p { font-size: 12px; }
.expedition-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.expedition-card-stats > div { display: grid; gap: 2px; padding: 7px 8px; border-radius: 9px; background: rgba(255,255,255,.032); }
.expedition-card-stats span { opacity: .58; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.expedition-card-stats strong { font-size: 12px; }
.expedition-kill-bar { height: 5px; }
.expedition-active-combat { display: grid; gap: 8px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.045); }
.expedition-active-label { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.expedition-active-label span { opacity: .62; }
.expedition-health { display: grid; gap: 6px; }
.expedition-card-footer { margin-top: auto; display: grid; gap: 8px; }
.expedition-encounter-status { opacity: .62; line-height: 1.35; }
.expedition-action { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 10px; }
.expedition-action span { font-size: 11px; }
.expedition-loot-preview, .expedition-boss-mechanic, .expedition-first-kill { grid-column: auto; }
.expedition-loot-preview { margin-top: 0; padding-top: 2px; }
.expedition-loot-list { gap: 5px; }
.expedition-loot-chip { padding: 5px 7px; }
.expedition-boss-mechanic { padding: 10px 11px; }

@media (max-width: 1100px) {
  .expedition-layout { grid-template-columns: 1fr; }
  .expedition-regions-panel { position: static; }
  .expedition-region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expedition-region-card { min-height: 68px; }
}
@media (max-width: 700px) {
  .expedition-region-grid { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .expedition-region-card { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; }
  .expedition-region-hero { grid-template-columns: 52px 1fr; padding: 15px; }
  .expedition-region-hero-icon { width: 52px; height: 52px; font-size: 28px; }
  .expedition-region-hero-level { grid-column: 1 / -1; width: 100%; grid-template-columns: 1fr auto; align-items: center; text-align: left; }
  .expedition-region-hero-level span { grid-column: 1 / -1; }
  .expedition-progress-copy { align-items: flex-start; flex-direction: column; }
  .expedition-progress-copy > div { text-align: left; }
  .expedition-progress-metrics { grid-template-columns: 1fr; }
  .expedition-path-heading { align-items: flex-start; flex-direction: column; }
  .expedition-encounter-grid { grid-template-columns: 1fr; }
  .expedition-encounter-card.boss { grid-column: auto; }
  .expedition-card-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .expedition-card-stats > div { padding: 7px 6px; }
  .expedition-loot-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .expedition-loot-chip { flex: 0 0 auto; }
}

/* ===== Farming & Apothecary Phase 3: plots, seeds, and rare cultivation ===== */
.farming-activity-root {
  display: block;
}

.farming-dashboard {
  display: grid;
  gap: 16px;
}

.farming-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  border: 1px solid rgba(105, 176, 102, .28);
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 22%, rgba(109, 190, 105, .16), transparent 34%),
    linear-gradient(135deg, rgba(22, 47, 37, .94), rgba(13, 24, 31, .98));
  box-shadow: 0 16px 34px rgba(3, 12, 10, .24);
}

.farming-dashboard-hero h2,
.farming-dashboard-hero p { margin: 0; }
.farming-dashboard-hero h2 { margin-top: 3px; color: #f7efd8; font: 700 26px Georgia, serif; }
.farming-dashboard-hero p { margin-top: 7px; max-width: 680px; color: #b7c4bd; }

.farming-plot-count {
  display: grid;
  min-width: 126px;
  padding: 12px 16px;
  border: 1px solid rgba(244, 190, 83, .28);
  border-radius: 12px;
  background: rgba(7, 15, 19, .46);
  text-align: center;
}
.farming-plot-count strong { color: #f3c766; font: 700 25px Georgia, serif; }
.farming-plot-count span { color: #9fb3aa; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

.farming-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(190px, 1.45fr);
  gap: 8px;
}
.farming-stat-strip > div {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid rgba(157, 180, 164, .13);
  border-radius: 10px;
  background: rgba(13, 26, 30, .72);
}
.farming-stat-strip small,
.farming-stat-strip strong { display: block; }
.farming-stat-strip small { color: #8da29a; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.farming-stat-strip strong { margin-top: 2px; color: #e8ddc2; overflow-wrap: anywhere; }

.farming-plot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.farming-plot-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(157, 180, 164, .16);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(18, 34, 36, .94), rgba(10, 21, 27, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.farming-plot-card.ready {
  border-color: rgba(111, 207, 116, .58);
  box-shadow: 0 0 26px rgba(58, 159, 78, .12), inset 0 1px rgba(181, 244, 171, .08);
}
.farming-plot-card.locked { opacity: .72; }

.farming-plot-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.farming-plot-head small,
.farming-plot-head h3 { display: block; margin: 0; }
.farming-plot-head small { color: #8fac9b; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.farming-plot-head h3 { color: #f3ead2; font: 700 18px Georgia, serif; }
.farming-plot-head h3 em {
  margin-left: 4px;
  color: #f0b62f;
  font: 800 9px system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.farming-plot-number,
.farming-crop-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(109, 186, 111, .28);
  border-radius: 11px;
  background: rgba(64, 128, 76, .11);
  color: #bfe0af;
  font-weight: 800;
  font-size: 22px;
}
.farming-crop-icon-art { width: 35px; height: 35px; object-fit: contain; }

.farming-plot-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.farming-plot-form label { min-width: 0; }
.farming-plot-form label > span { display: block; margin-bottom: 4px; color: #93a89e; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.farming-plot-form select {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 9px;
  border: 1px solid rgba(168, 190, 174, .18);
  border-radius: 8px;
  background: #0b171d;
  color: #e9dfc7;
}
.farming-plot-form button { grid-column: 1 / -1; width: 100%; background: linear-gradient(135deg, #dca637, #f1c55d); }

.farming-plot-locked { display: grid; place-items: center; min-height: 116px; color: #82978d; text-align: center; }
.farming-plot-locked > span { font-size: 24px; }
.farming-plot-locked strong { color: #b8c4bc; }
.farming-plot-locked p { margin: 4px 0 0; font-size: 12px; }

.farming-growth-meta,
.farming-harvest-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.farming-growth-meta { color: #9db0a6; font-size: 12px; }
.farming-growth-meta strong { color: #e9cf86; font-variant-numeric: tabular-nums; }
.farming-growth-track {
  height: 8px;
  margin: 9px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}
.farming-growth-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #477a50, #7ecb78, #dec363);
  transition: width .5s linear;
}
.farming-harvest-preview { margin-bottom: 12px; color: #8fa198; font-size: 11px; }
.farming-harvest-preview b { color: #e8ddc2; }
.farming-plot-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.farming-harvest-button { width: 100%; }
.farming-stop-button { min-width: 116px; white-space: nowrap; }
.farming-plot-card.ready .farming-harvest-button { background: linear-gradient(135deg, #61a95d, #a8d56f); }
.farming-plot-card.stopped { border-color: rgba(169, 120, 82, .28); }

.farming-seed-vault {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(216, 178, 92, .16);
  border-radius: 13px;
  background: rgba(11, 22, 28, .82);
}
.farming-seed-vault h3 { margin: 3px 0 0; color: #eee3ca; font: 700 17px Georgia, serif; }
.farming-seed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.farming-seed-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; border: 1px solid rgba(153, 174, 159, .13); border-radius: 9px; background: rgba(18, 35, 35, .64); }
.farming-seed-chip.rare { border-color: rgba(236, 180, 67, .34); background: rgba(92, 62, 20, .12); }
.farming-seed-chip > span { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; font-size: 20px; }
.farming-seed-icon-art { width: 27px; height: 27px; object-fit: contain; }
.farming-seed-chip div { min-width: 0; }
.farming-seed-chip small,
.farming-seed-chip strong { display: block; }
.farming-seed-chip small { overflow: hidden; color: #9fb0a7; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.farming-seed-chip strong { color: #e9dfc8; }

.farming-offline-cultivation {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(260px, 1.8fr) minmax(180px, .9fr);
  align-items: center;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(157, 180, 164, .13);
  background: rgba(13, 26, 30, .72);
}
.farming-offline-cultivation h3, .farming-offline-cultivation p { margin: 0; }
.farming-offline-cultivation h3 { margin-top: 2px; color: #e8ddc2; font-size: 16px; }
.farming-offline-cultivation p { color: #9fb0a7; font-size: 11px; line-height: 1.45; }
.farming-offline-cultivation > small { color: #8da29a; font-size: 10px; line-height: 1.4; }
.farming-offline-plot-hint {
  display: grid;
  gap: 2px;
  margin: -2px 0 12px;
  padding: 7px 8px;
  border-left: 2px solid rgba(216, 178, 92, .42);
  background: rgba(8, 18, 22, .44);
}
.farming-offline-plot-hint small { color: #8f8069; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.farming-offline-plot-hint span { color: #a99a80; font-size: 10px; line-height: 1.35; }
.farming-offline-plot-hint span b { color: #d8bd86; font-weight: 700; }
.farming-offline-plot-hint em { color: #756a59; font-size: 9px; font-style: normal; }

.farming-source-note { display: flex; gap: 11px; padding: 11px 13px; border-left: 3px solid #d9a640; border-radius: 5px 10px 10px 5px; background: rgba(98, 65, 20, .12); }
.farming-source-note strong { color: #ebc66f; white-space: nowrap; }
.farming-source-note span { color: #adbbb3; }
.offline-reward-row.farming-ready strong { color: #8fd487; }
.offline-reward-row.farming-offline-report { align-items: start; }
.farming-offline-copy { min-width: 0; }
.farming-offline-copy b,
.farming-offline-copy small { display: block; }
.farming-offline-copy b { color: #e9dfc8; font-size: 12px; }
.farming-offline-copy small { margin-top: 2px; color: #9fb0a7; font-size: 10px; line-height: 1.35; }
.offline-reward-row.farming-offline-report > strong { max-width: 84px; text-align: right; font-size: 10px; line-height: 1.25; }

@media (max-width: 900px) {
  .farming-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .farming-seed-vault { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .farming-dashboard { gap: 10px; }
  .farming-dashboard-hero { align-items: flex-start; padding: 15px; }
  .farming-dashboard-hero h2 { font-size: 21px; }
  .farming-dashboard-hero p { font-size: 12px; }
  .farming-offline-cultivation { grid-template-columns: 1fr 1fr; }
  .farming-offline-cultivation > small { grid-column: 1 / -1; }
  .farming-plot-count { min-width: 88px; padding: 9px; }
  .farming-plot-grid { grid-template-columns: 1fr; }
  .farming-seed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .farming-dashboard-hero { display: grid; }
  .farming-plot-count { width: 100%; }
  .farming-stat-strip { grid-template-columns: 1fr 1fr; }
  .farming-offline-cultivation { grid-template-columns: 1fr; gap: 7px; }
  .farming-offline-cultivation > small { grid-column: auto; }
  .farming-plot-form { grid-template-columns: 1fr; }
  .farming-plot-form button { grid-column: auto; }
  .farming-seed-grid { grid-template-columns: 1fr; }
  .farming-source-note { display: grid; }
}


/* Expeditions Phase 7.1: unmistakable active stage + single-stage runs */
.expedition-now-running { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 14px; align-items: center; margin-bottom: 12px; padding: 14px 16px; border: 2px solid rgba(245,193,82,.72); border-radius: 16px; background: linear-gradient(135deg, rgba(245,193,82,.15), rgba(255,255,255,.045)); box-shadow: 0 0 0 3px rgba(245,193,82,.06), 0 10px 30px rgba(7,16,25,.16); }
.expedition-now-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: rgba(245,193,82,.16); font-size: 25px; }
.expedition-now-copy { display: grid; gap: 2px; }
.expedition-now-copy strong { font-size: 16px; }
.expedition-now-copy > span:last-child { font-size: 12px; opacity: .7; }
.expedition-now-hp { display: grid; gap: 2px; min-width: 105px; text-align: right; }
.expedition-now-hp small { opacity: .6; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.expedition-now-hp strong { font-size: 13px; }
.expedition-now-stop { min-width: 88px; min-height: 38px; }
.expedition-encounter-card.active { border: 2px solid rgba(245,193,82,.78); background: linear-gradient(135deg, rgba(245,193,82,.11), rgba(255,255,255,.065)); box-shadow: 0 0 0 3px rgba(245,193,82,.055); }
.expedition-encounter-card.active .expedition-state-badge { background: rgba(245,193,82,.18); font-weight: 900; }
.expedition-encounter-card.active .expedition-encounter-icon { background: rgba(245,193,82,.13); }
.expedition-active-combat { border: 1px solid rgba(245,193,82,.28); background: rgba(245,193,82,.07); }
.expedition-active-label strong { font-weight: 900; letter-spacing: .03em; }
@media (max-width: 700px) {
  .expedition-now-running { grid-template-columns: 42px 1fr; gap: 10px; padding: 12px; }
  .expedition-now-icon { width: 42px; height: 42px; }
  .expedition-now-hp { grid-column: 1 / -1; grid-template-columns: 1fr auto; text-align: left; align-items: center; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); }
  .expedition-now-stop { grid-column: 1 / -1; width: 100%; }
}


/* Expeditions 7.2 — keys + stronger start CTA */
.expedition-action.start {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:48px; padding:10px 14px; border-width:2px;
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  box-shadow:0 5px 18px rgba(7,16,25,.18), inset 0 0 0 1px rgba(255,255,255,.08);
  font-size:14px; letter-spacing:.01em;
}
.expedition-action.start:not(:disabled) { transform:translateY(0); }
.expedition-action.start:hover:not(:disabled) { transform:translateY(-2px); background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.11)); box-shadow:0 8px 22px rgba(7,16,25,.24), inset 0 0 0 1px rgba(255,255,255,.12); }
.expedition-start-main { font-weight:900; font-size:14px; }
.expedition-start-cost { flex:0 0 auto; padding:6px 9px; border-radius:999px; background:rgba(7,16,25,.22); font-weight:900; }
.expedition-action.start:disabled .expedition-start-cost { opacity:.75; }
.expedition-key-balance { font-weight:900; background:rgba(245,193,82,.12) !important; border:1px solid rgba(245,193,82,.28); opacity:1 !important; }
@media (max-width:640px) { .expedition-action.start { min-height:52px; } }


/* Expedition tiered key sources */
.expedition-key-sources {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .82;
}
.expedition-key-sources strong { opacity: 1; }


/* Expeditions Phase 7.5 — brighter interactive controls */
#expeditionsView button:not(:disabled),
.expeditions-view button:not(:disabled),
[data-view="expeditions"] button:not(:disabled),
.expedition-card button:not(:disabled),
.expedition-region button:not(:disabled),
.expedition-region-card:not(.locked),
.expedition-encounter-card:not(.locked) {
  filter: brightness(1.16) saturate(1.22);
}

#expeditionsView button:not(:disabled):hover,
.expeditions-view button:not(:disabled):hover,
[data-view="expeditions"] button:not(:disabled):hover,
.expedition-card button:not(:disabled):hover,
.expedition-region button:not(:disabled):hover,
.expedition-region-card:not(.locked):hover,
.expedition-encounter-card:not(.locked):hover {
  filter: brightness(1.32) saturate(1.32);
  transform: translateY(-1px);
}

#expeditionsView button:not(:disabled):focus-visible,
.expeditions-view button:not(:disabled):focus-visible,
[data-view="expeditions"] button:not(:disabled):focus-visible,
.expedition-card button:not(:disabled):focus-visible {
  outline: 3px solid rgba(255,255,255,.78);
  outline-offset: 2px;
}

/* Make primary expedition start actions unmistakably clickable. */
.expedition-start-btn:not(:disabled),
.start-expedition-btn:not(:disabled),
button[data-action="start-expedition"]:not(:disabled) {
  filter: brightness(1.28) saturate(1.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 8px 22px rgba(7,16,25,.28);
  font-weight: 800;
}

.expedition-start-btn:not(:disabled):hover,
.start-expedition-btn:not(:disabled):hover,
button[data-action="start-expedition"]:not(:disabled):hover {
  filter: brightness(1.45) saturate(1.45);
}


/* Expeditions Phase 7.6 — gold primary expedition actions */
.expedition-action.start:not(:disabled),
.expedition-start-btn:not(:disabled),
.start-expedition-btn:not(:disabled),
button[data-action="start-expedition"]:not(:disabled) {
  background: linear-gradient(180deg, #ffd95a 0%, #e9a91b 100%) !important;
  border: 1px solid #ffe88d !important;
  color: #08121b !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 1px rgba(255,216,77,.25), 0 8px 22px rgba(233,169,27,.28) !important;
  filter: none !important;
}

.expedition-action.start:not(:disabled):hover,
.expedition-start-btn:not(:disabled):hover,
.start-expedition-btn:not(:disabled):hover,
button[data-action="start-expedition"]:not(:disabled):hover {
  background: linear-gradient(180deg, #ffe77a 0%, #f2b82d 100%) !important;
  border-color: #fff0a9 !important;
  box-shadow: 0 0 0 2px rgba(255,229,112,.32), 0 10px 26px rgba(233,169,27,.38) !important;
  filter: brightness(1.05) !important;
}

.expedition-action.start:disabled,
button[data-action="start-expedition"]:disabled {
  background: rgba(120,110,82,.22) !important;
  border-color: rgba(180,165,120,.22) !important;
  color: rgba(235,226,198,.48) !important;
  box-shadow: none !important;
}


/* Expeditions Phase 7.7 — full run and player combat clarity */
.expedition-player-power{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0 18px;padding:16px 18px;border:1px solid rgba(255,217,90,.48);border-radius:14px;background:linear-gradient(135deg,rgba(255,217,90,.14),rgba(233,169,27,.08));}
.expedition-player-power-copy strong{display:block;margin:3px 0 4px;font-size:1.05rem}.expedition-player-power-copy p{margin:0;opacity:.82}.expedition-player-power-stats{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.expedition-player-power-stats span{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.07);white-space:nowrap}.expedition-run-next{display:inline-block;padding:6px 0;font-size:.82rem;font-weight:750;opacity:.76}@media(max-width:720px){.expedition-player-power{align-items:flex-start;flex-direction:column}.expedition-player-power-stats{justify-content:flex-start}}



/* Expeditions Phase 7.8 — Equipment-tab style expedition loadout */
.expedition-loadout-panel {
  margin: 16px 0 20px;
  padding: 18px;
  border: 1px solid rgba(255, 214, 75, .32);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 205, 64, .09), rgba(255,255,255,.025)),
    rgba(13, 17, 24, .72);
}

.expedition-loadout-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.expedition-loadout-header h3 {
  margin: 2px 0 3px;
  font-size: 1.05rem;
}

.expedition-loadout-header p {
  margin: 0;
  opacity: .72;
}

.expedition-style-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(255, 215, 90, .38);
  border-radius: 999px;
  background: rgba(255, 208, 58, .12);
  font-weight: 800;
}

.expedition-loadout-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.expedition-stat-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}

.expedition-stat-card small,
.expedition-stat-card span {
  display: block;
  opacity: .72;
}

.expedition-stat-card strong {
  display: block;
  margin: 2px 0;
  font-size: 1.35rem;
}

.expedition-stat-card.food strong {
  font-size: .95rem;
  line-height: 1.25;
}

.expedition-equipped-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.expedition-equipped-slot {
  min-width: 0;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  opacity: .62;
}

.expedition-equipped-slot.filled {
  opacity: 1;
  border-color: rgba(255, 214, 75, .18);
  background: rgba(255, 214, 75, .045);
}

.expedition-equipped-slot small,
.expedition-equipped-slot strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expedition-equipped-slot small {
  font-size: .66rem;
  opacity: .66;
}

.expedition-equipped-slot strong {
  margin-top: 3px;
  font-size: .69rem;
}

.expedition-equipped-icon {
  display: block;
  margin: 4px 0 2px;
  font-size: 1.15rem;
}

@media (max-width: 900px) {
  .expedition-loadout-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .expedition-equipped-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .expedition-loadout-header {
    flex-direction: column;
  }
  .expedition-equipped-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}




/* Expeditions Phase 7.9 — compact active-stage layout */
.expedition-path-heading.compact {
  margin-bottom: 10px;
}

.expedition-current-stage-wrap {
  margin-top: 12px;
}

.expedition-current-stage-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 10px;
}

.expedition-current-stage-heading h3 {
  margin: 2px 0 0;
}

.expedition-stage-counter {
  text-align: right;
}

.expedition-stage-counter strong,
.expedition-stage-counter span {
  display: block;
}

.expedition-stage-counter strong {
  font-size: .95rem;
}

.expedition-stage-counter span {
  margin-top: 2px;
  font-size: .75rem;
  opacity: .7;
}

.expedition-current-stage-wrap .expedition-encounter-card {
  margin: 0;
}

.expedition-loadout-panel {
  padding: 14px;
  margin: 12px 0 14px;
}

.expedition-loadout-header {
  margin-bottom: 10px;
}

.expedition-loadout-vitals {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.expedition-vital-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.expedition-vital-icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.expedition-vital-card > div {
  min-width: 0;
  flex: 1;
}

.expedition-vital-card small,
.expedition-vital-card strong,
.expedition-vital-card span {
  display: block;
}

.expedition-vital-card strong {
  margin: 1px 0;
}

.expedition-vital-card.food span {
  font-size: .76rem;
  opacity: .72;
}

.expedition-vital-track {
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.expedition-vital-track span {
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.expedition-loadout-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.expedition-stat-card {
  padding: 9px 10px;
}

.expedition-stat-card strong {
  font-size: 1.15rem;
}

.expedition-equipped-grid {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
}

.expedition-equipped-slot {
  padding: 6px 4px;
}

.expedition-equipped-icon {
  margin: 2px 0 1px;
  font-size: 1rem;
}

.expedition-equipped-slot strong {
  font-size: .62rem;
}

.expedition-region-hero,
.expedition-progress-overview {
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .expedition-current-stage-heading {
    align-items: flex-start;
  }
  .expedition-stage-counter {
    text-align: left;
  }
  .expedition-loadout-vitals {
    grid-template-columns: 1fr;
  }
  .expedition-loadout-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .expedition-current-stage-heading {
    flex-direction: column;
  }
  .expedition-loadout-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .expedition-stat-card {
    text-align: center;
    padding: 8px 4px;
  }
}




/* Expeditions Phase 7.10 fixed — safe compact layout */
.exp-compact-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.exp-compact-summary-left {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}
.exp-compact-summary-left span {
  font-size: .75rem;
  opacity: .72;
}
.exp-compact-player {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.exp-compact-player > span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: .72rem;
  white-space: nowrap;
}
.exp-compact-mob {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(125px,150px) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 13px;
  border: 1px solid rgba(255,215,90,.22);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
}
.exp-compact-mob.boss {
  border-color: rgba(255,215,90,.46);
  background: linear-gradient(135deg, rgba(255,205,64,.08), rgba(255,255,255,.025));
}
.exp-compact-mob-main {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.exp-compact-mob-icon { font-size: 1.8rem; }
.exp-compact-mob-main h3 { margin: 1px 0; }
.exp-compact-mob-main p {
  margin: 0;
  font-size: .74rem;
  opacity: .68;
}
.exp-compact-progress {
  text-align: right;
  white-space: nowrap;
}
.exp-compact-progress strong,
.exp-compact-progress span { display: block; }
.exp-compact-progress strong { font-size: .82rem; }
.exp-compact-progress span {
  font-size: .68rem;
  opacity: .66;
}
.exp-compact-enemyhp > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  font-size: .68rem;
}
.exp-compact-hp-track {
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.exp-compact-hp-track span {
  display: block;
  height: 100%;
  background: currentColor;
}
.exp-compact-action { min-width: 140px; }

@media (max-width: 900px) {
  .exp-compact-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .exp-compact-player { justify-content: flex-start; }
  .exp-compact-mob { grid-template-columns: 1fr auto; }
  .exp-compact-enemyhp { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .exp-compact-player { gap: 5px; }
  .exp-compact-mob { grid-template-columns: 1fr; }
  .exp-compact-progress { text-align: left; }
  .exp-compact-action { width: 100%; }
}




/* Expeditions Phase 7.11 — richer current stage without clutter */
.exp-compact-mob {
  grid-template-columns: minmax(220px, 1.25fr) auto minmax(145px, 180px) auto;
  padding: 16px 17px;
  gap: 14px;
}

.exp-compact-mob-icon {
  font-size: 2.25rem;
}

.exp-compact-mob-main h3 {
  font-size: 1.08rem;
}

.exp-stage-timers,
.exp-stage-loot {
  grid-column: 1 / -1;
}

.exp-stage-timers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: -2px;
}

.exp-stage-timer {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}

.exp-stage-timer > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .7rem;
}

.exp-stage-timer-track {
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.exp-stage-timer-track span {
  display: block;
  height: 100%;
  background: currentColor;
}

.exp-stage-timer.enemy {
  opacity: .88;
}

.exp-stage-loot {
  padding-top: 2px;
}

.exp-stage-loot > small {
  display: block;
  margin-bottom: 5px;
  opacity: .64;
}

.exp-stage-loot > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.exp-stage-loot span {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size: .7rem;
}

.exp-stage-loot b {
  opacity: .7;
}

@media (max-width: 900px) {
  .exp-compact-mob {
    grid-template-columns: 1fr auto;
  }
  .exp-stage-timers,
  .exp-stage-loot,
  .exp-compact-enemyhp {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .exp-stage-timers {
    grid-template-columns: 1fr;
  }
}




/* Expeditions Phase 7.12 — world map polish + pre-run route preview */
.expedition-world-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 16px;
  padding: 18px 14px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 30%, rgba(239, 178, 39, .12), transparent 28%),
    radial-gradient(circle at 50% 70%, rgba(76, 115, 159, .12), transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(189, 115, 55, .13), transparent 28%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
}

.expedition-map-path {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 50%;
  height: 2px;
  border-top: 2px dashed rgba(255, 215, 90, .18);
  transform: translateY(-50%);
  pointer-events: none;
}

.expedition-region-card.map-node {
  position: relative;
  z-index: 1;
  min-height: 108px;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(18, 23, 31, .84);
  box-shadow: 0 8px 24px rgba(7,16,25,.16);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.expedition-region-card.map-node:hover:not(.locked) {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 90, .28);
  background: rgba(28, 34, 44, .95);
}

.expedition-region-card.map-node.selected {
  border-color: rgba(255, 215, 90, .52);
  box-shadow: 0 0 0 1px rgba(255, 215, 90, .14), 0 10px 28px rgba(7,16,25,.22);
}

.expedition-map-marker {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 8px;
  border-radius: 50%;
  font-size: 1.7rem;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

.expedition-map-key {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .7rem;
  background: rgba(255,255,255,.045);
}

.expedition-region-card.map-node .expedition-region-copy {
  text-align: center;
}

.exp-stage-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 9px;
  align-items: center;
}

.expedition-preview-button {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: inherit;
  border-radius: 9px;
  padding: 9px 12px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.expedition-preview-button:hover {
  border-color: rgba(255,215,90,.34);
  background: rgba(255,215,90,.07);
}

.expedition-route-preview {
  margin-top: 10px;
  padding: 13px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.expedition-route-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 9px;
}

.expedition-route-preview-head strong,
.expedition-route-preview-head span {
  display: block;
}

.expedition-route-preview-head > span {
  font-size: .75rem;
  opacity: .68;
}

.expedition-route-preview-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.expedition-route-preview-stage {
  min-width: 0;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.065);
  background: rgba(255,255,255,.025);
}

.expedition-route-preview-stage.boss {
  border-color: rgba(255,215,90,.28);
  background: rgba(255,215,90,.045);
}

.preview-stage-number,
.preview-stage-icon,
.preview-stage-copy,
.preview-stage-loot {
  display: block;
}

.preview-stage-number {
  font-size: .62rem;
  opacity: .58;
}

.preview-stage-icon {
  margin: 4px 0;
  font-size: 1.3rem;
}

.preview-stage-copy strong,
.preview-stage-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-stage-copy small {
  margin-top: 2px;
  font-size: .68rem;
  opacity: .65;
}

.preview-stage-loot {
  margin-top: 5px;
  font-size: .75rem;
  min-height: 1em;
}

@media (max-width: 800px) {
  .expedition-world-map {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 12px;
  }

  .expedition-map-path {
    display: none;
  }

  .expedition-region-card.map-node {
    flex: 0 0 180px;
  }

  .expedition-route-preview-list {
    grid-template-columns: 1fr;
  }

  .expedition-route-preview-stage {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .preview-stage-icon,
  .preview-stage-loot {
    margin: 0;
  }
}

@media (max-width: 560px) {
  .exp-stage-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .expedition-preview-button {
    width: 100%;
  }
}




/* Expeditions Phase 7.12.1 — premium world map cleanup */
.expedition-world-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)),
    rgba(14, 18, 24, .78);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 10px 28px rgba(7,16,25,.16);
}

.expedition-map-path {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,215,90,0),
    rgba(255,215,90,.16) 15%,
    rgba(255,215,90,.16) 85%,
    rgba(255,215,90,0)
  );
  transform: translateY(-50%);
  pointer-events: none;
}

.expedition-region-card.map-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    rgba(20, 25, 33, .92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 18px rgba(7,16,25,.16);
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.expedition-region-card.map-node:hover:not(.locked) {
  transform: translateY(-2px);
  border-color: rgba(255,215,90,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 22px rgba(7,16,25,.2);
}

.expedition-region-card.map-node.selected {
  border-color: rgba(255,215,90,.5);
  background:
    linear-gradient(180deg, rgba(255,215,90,.07), rgba(255,255,255,.02)),
    rgba(22, 27, 35, .96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,215,90,.08),
    0 10px 26px rgba(7,16,25,.22);
}

.expedition-region-card.map-node.locked {
  opacity: .48;
  filter: saturate(.65);
}

.expedition-map-marker {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 9px;
  border-radius: 50%;
  font-size: 1.65rem;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.expedition-region-card.map-node.selected .expedition-map-marker {
  border-color: rgba(255,215,90,.32);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,215,90,.16), rgba(255,255,255,.02)),
    rgba(255,215,90,.05);
}

.expedition-region-card.map-node .expedition-region-copy {
  display: block;
  text-align: center;
  line-height: 1.25;
}

.expedition-region-card.map-node .expedition-region-copy strong {
  display: block;
  font-size: .93rem;
}

.expedition-region-card.map-node .expedition-region-copy small {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  opacity: .62;
}

.expedition-map-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .69rem;
  font-weight: 700;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  opacity: .86;
}

.expedition-region-card.map-node.selected .expedition-map-key {
  background: rgba(255,215,90,.07);
  border-color: rgba(255,215,90,.14);
}

/* Remove the positional feel from the previous map version. */
.expedition-region-card.map-node.map-left,
.expedition-region-card.map-node.map-center,
.expedition-region-card.map-node.map-right {
  transform: none;
}

.expedition-region-card.map-node.map-left:hover:not(.locked),
.expedition-region-card.map-node.map-center:hover:not(.locked),
.expedition-region-card.map-node.map-right:hover:not(.locked) {
  transform: translateY(-2px);
}

@media (max-width: 800px) {
  .expedition-world-map {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    overflow: visible;
  }

  .expedition-map-path {
    display: none;
  }

  .expedition-region-card.map-node {
    min-height: 72px;
    width: 100%;
    flex: none;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    justify-items: start;
    padding: 10px 12px;
  }

  .expedition-map-marker {
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 1.35rem;
  }

  .expedition-region-card.map-node .expedition-region-copy {
    text-align: left;
  }

  .expedition-map-key {
    margin-top: 0;
  }
}




/* Two-step Expedition flow */
.two-step-map,
.two-step-expedition {
  width: 100%;
  box-sizing: border-box;
}

.two-step-map {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  background: linear-gradient(180deg, #08121b, #08121b);
}

.two-step-map-head,
.two-step-expedition-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.two-step-map-head h2,
.two-step-expedition-head h2 {
  margin:2px 0 0;
  font-size:1.6rem;
}

.two-step-map-head p {
  margin:6px 0 0;
  opacity:.7;
}

.two-step-map-level,
.two-step-expedition-key {
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  text-align:center;
}

.two-step-map-level small,
.two-step-map-level strong {
  display:block;
}

.two-step-map-level strong {
  margin-top:2px;
  color:#f3b92d;
  font-size:1.5rem;
}

.two-step-map-track {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.two-step-region-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:#08121b;
  color:inherit;
  text-align:center;
  cursor:pointer;
  overflow:visible;
}

.two-step-region-card.selected {
  border-color:#d7a92f;
  box-shadow:0 0 0 1px rgba(215,169,47,.18);
}

.two-step-region-card.locked {
  opacity:.55;
}

.two-step-region-icon {
  position:absolute;
  top:-24px;
  left:50%;
  transform:translateX(-50%);
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#08121b;
  border:2px solid rgba(255,255,255,.12);
  font-size:1.6rem;
}

.two-step-region-art {
  position:relative;
  display:grid;
  place-items:center;
  height:230px;
  margin-top:16px;
  border-radius:14px;
  overflow:hidden;
  font-size:4rem;
}

.two-step-region-art.whispering_woods {
  background:linear-gradient(180deg,#efb227,#0d1721);
}
.two-step-region-art.abandoned_mine {
  background:linear-gradient(180deg,#3b3456,#08121b);
}
.two-step-region-art.scorched_wastes {
  background:linear-gradient(180deg,#6e3125,#08121b);
}

.two-step-region-art b {
  position:absolute;
  font-size:2rem;
}

.two-step-region-copy {
  display:block;
  padding:18px 0 0;
}

.two-step-region-copy strong,
.two-step-region-copy small {
  display:block;
}

.two-step-region-copy strong {
  font-size:1.15rem;
}

.two-step-region-copy small {
  margin-top:10px;
  color:#f2c04c;
}

.two-step-region-key {
  margin:auto auto 0;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.two-step-region-state {
  margin-top:10px;
  font-size:.68rem;
  opacity:.58;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.two-step-map-footer {
  margin-top:18px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}

.two-step-map-footer p {
  margin:2px 0 0;
  color:#e6b93f;
}

.two-step-back {
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  color:inherit;
  border-radius:9px;
  padding:8px 11px;
  cursor:pointer;
}

.two-step-expedition-title {
  display:flex;
  align-items:center;
  gap:10px;
}

.two-step-expedition-title > span {
  font-size:1.8rem;
}

.two-step-player-strip {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:12px;
}

.two-step-player-strip span {
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  font-size:.75rem;
}

.two-step-stage-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(150px,180px);
  gap:14px;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(255,215,90,.22);
  background:rgba(255,255,255,.025);
}

.two-step-stage-main {
  display:flex;
  align-items:center;
  gap:11px;
}

.two-step-stage-icon {
  font-size:2.2rem;
}

.two-step-stage-main h3 {
  margin:1px 0;
}

.two-step-stage-main p {
  margin:0;
  opacity:.68;
}

.two-step-stage-progress {
  text-align:right;
}

.two-step-stage-progress strong,
.two-step-stage-progress span {
  display:block;
}

.two-step-stage-progress span {
  opacity:.65;
  font-size:.72rem;
}

.two-step-stage-hp > div:first-child {
  display:flex;
  justify-content:space-between;
  font-size:.72rem;
}

.two-step-hp-track {
  height:5px;
  margin-top:5px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}

.two-step-hp-track span,
.two-step-timers i {
  display:block;
  height:100%;
  background:currentColor;
}

.two-step-timers,
.exp-stage-loot,
.two-step-stage-actions {
  grid-column:1 / -1;
}

.two-step-timers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.two-step-timers > div {
  padding:8px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
}

.two-step-timers > div > span {
  display:block;
  margin-bottom:5px;
  font-size:.7rem;
}

.two-step-timers > div > div {
  height:5px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}

.two-step-stage-actions {
  display:flex;
  justify-content:space-between;
  gap:10px;
}

@media (max-width: 850px) {
  .two-step-map-track {
    grid-template-columns:1fr;
  }

  .two-step-region-card {
    min-height:140px;
    display:grid;
    grid-template-columns:90px 1fr auto;
    align-items:center;
    gap:12px;
    text-align:left;
  }

  .two-step-region-icon {
    position:static;
    transform:none;
    margin:auto;
  }

  .two-step-region-art {
    display:none;
  }

  .two-step-region-copy {
    padding:0;
  }

  .two-step-region-key {
    margin:0;
  }

  .two-step-region-state {
    grid-column:2 / 4;
    margin:0;
  }

  .two-step-stage-card {
    grid-template-columns:1fr;
  }

  .two-step-stage-progress {
    text-align:left;
  }

  .two-step-timers {
    grid-template-columns:1fr;
  }
}



/* Clickable World Map return card */
.two-step-worldmap-return {
  min-width: 235px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: #08121b;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.two-step-worldmap-return .eyebrow {
  color: #f2c04c;
  font-size: .68rem;
  letter-spacing: .12em;
}

.two-step-worldmap-return strong {
  font-size: 1.05rem;
  line-height: 1.2;
}

.two-step-worldmap-return:hover {
  border-color: rgba(242,192,76,.45);
  background: #08121b;
  transform: translateY(-1px);
}

.two-step-worldmap-return:focus-visible {
  outline: 2px solid #f2c04c;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .two-step-worldmap-return {
    min-width: 0;
    width: 100%;
  }
}



/* Expedition World Map Artwork Pass */
.two-step-map {
  padding: 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, #08121b 0%, #08121b 100%);
}

.two-step-map-track {
  gap: 28px;
  align-items: stretch;
}

.two-step-region-card {
  min-height: 500px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: #08121b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 14px 30px rgba(7,16,25,.22);
}

.two-step-region-card.selected {
  border-color: #d8aa2f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(216,170,47,.16),
    0 16px 34px rgba(7,16,25,.26);
}

.two-step-region-icon {
  top: -28px;
  width: 58px;
  height: 58px;
  font-size: 1.8rem;
  background: #08121b;
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 18px rgba(7,16,25,.25);
}

.two-step-region-card.selected .two-step-region-icon {
  border-color: #d8aa2f;
}

.two-step-region-art {
  position: relative;
  display: block;
  height: 285px;
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

.two-step-region-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,16,25,.02), rgba(7,16,25,.12));
  pointer-events: none;
}

.two-step-region-card.locked .two-step-region-art {
  filter: brightness(.56) saturate(.72);
}

.two-step-region-art b {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%,-50%);
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(17,22,29,.9);
  border: 1px solid rgba(216,170,47,.35);
  font-size: 1.75rem;
}

.two-step-region-copy {
  padding-top: 18px;
}

.two-step-region-copy strong {
  font-size: 1.18rem;
}

.two-step-region-copy small {
  margin-top: 12px;
  color: #f0c14b;
}

.two-step-region-key {
  min-width: 132px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 14px;
}

.two-step-region-state {
  margin-top: 12px;
}

@media (max-width: 850px) {
  .two-step-region-card {
    min-height: 150px;
  }

  .two-step-region-art {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .two-step-region-icon {
    display: none;
  }

  .two-step-region-copy {
    padding: 0;
  }
}




/* =========================================================
   JOURNEYDEN — PREMIUM LOOK
   Global visual system inspired by the approved Expedition UI.
   ========================================================= */

body.premium-ui,
body.premium-ui * {
  box-sizing: border-box;
}

body.premium-ui {
  --premium-bg: #08121b;
  --premium-bg-deep: #08121b;
  --premium-panel: #08121b;
  --premium-panel-2: #08121b;
  --premium-panel-3: #0d1721;
  --premium-border: rgba(255,255,255,.075);
  --premium-border-strong: rgba(255,255,255,.12);
  --premium-gold: #f0b62f;
  --premium-gold-soft: #d39b27;
  --premium-gold-dim: rgba(240,182,47,.18);
  --premium-text: #f4efe7;
  --premium-muted: #9da8b5;
  --premium-gold: #efb227;
  --premium-purple: #c98bff;
  --premium-red: #ff6a34;
  --premium-shadow: 0 14px 36px rgba(7,16,25,.28);

  margin: 0;
  color: var(--premium-text);
  background:
    radial-gradient(circle at 25% 0%, rgba(35,58,73,.16), transparent 34%),
    linear-gradient(180deg, #08121b 0%, #08121b 100%);
}

body.premium-ui a {
  color: inherit;
}

body.premium-ui button,
body.premium-ui input,
body.premium-ui select {
  font: inherit;
}

/* App shell */
body.premium-ui .app-shell,
body.premium-ui .app,
body.premium-ui #app {
  background: transparent !important;
}

body.premium-ui .sidebar,
body.premium-ui .side-nav,
body.premium-ui nav.sidebar,
body.premium-ui #sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008)),
    #08121b !important;
  border-right: 1px solid rgba(240,182,47,.14) !important;
  box-shadow: 8px 0 30px rgba(7,16,25,.18);
}

body.premium-ui .sidebar button,
body.premium-ui .side-nav button,
body.premium-ui .nav-item,
body.premium-ui [data-view] {
  border: 1px solid transparent;
  border-radius: 11px;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

body.premium-ui .sidebar button:hover,
body.premium-ui .side-nav button:hover,
body.premium-ui .nav-item:hover,
body.premium-ui [data-view]:hover {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.06);
}

body.premium-ui .sidebar button.active,
body.premium-ui .side-nav button.active,
body.premium-ui .nav-item.active,
body.premium-ui [data-view].active,
body.premium-ui [aria-current="page"] {
  color: var(--premium-gold) !important;
  background:
    linear-gradient(180deg, rgba(240,182,47,.10), rgba(240,182,47,.045)) !important;
  border-color: rgba(240,182,47,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Main content */
body.premium-ui main,
body.premium-ui .main-content,
body.premium-ui .content,
body.premium-ui #mainContent {
  background: transparent !important;
}

body.premium-ui .page,
body.premium-ui .view,
body.premium-ui .panel,
body.premium-ui .card,
body.premium-ui .section-card,
body.premium-ui .content-card {
  border-color: var(--premium-border) !important;
}

body.premium-ui h1,
body.premium-ui h2,
body.premium-ui h3,
body.premium-ui h4 {
  color: var(--premium-text);
  letter-spacing: -.015em;
}

body.premium-ui .eyebrow,
body.premium-ui .section-label,
body.premium-ui .kicker {
  color: var(--premium-gold) !important;
  letter-spacing: .10em;
  font-weight: 800;
  text-transform: uppercase;
}

/* Generic premium surfaces */
body.premium-ui .panel,
body.premium-ui .card,
body.premium-ui .content-card,
body.premium-ui .section-card,
body.premium-ui .bank-panel,
body.premium-ui .skill-panel,
body.premium-ui .equipment-panel,
body.premium-ui .combat-panel,
body.premium-ui .shop-panel,
body.premium-ui .achievement-card,
body.premium-ui .collection-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.010)),
    var(--premium-panel) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 24px rgba(7,16,25,.14);
}

/* Buttons */
body.premium-ui button {
  border-radius: 10px;
}

body.premium-ui .primary,
body.premium-ui .btn-primary,
body.premium-ui .action-primary,
body.premium-ui .expedition-action.start,
body.premium-ui button[data-action="start-expedition-run"] {
  color: #08121b !important;
  font-weight: 850;
  border: 1px solid #ffdc72 !important;
  background: linear-gradient(180deg, #ffd45f, #edae21) !important;
  box-shadow:
    0 0 0 1px rgba(240,182,47,.14),
    0 8px 20px rgba(240,182,47,.22) !important;
}

body.premium-ui .primary:hover,
body.premium-ui .btn-primary:hover,
body.premium-ui .action-primary:hover,
body.premium-ui .expedition-action.start:hover,
body.premium-ui button[data-action="start-expedition-run"]:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

body.premium-ui button:disabled {
  opacity: .45 !important;
  filter: saturate(.55);
}

/* Inputs */
body.premium-ui input,
body.premium-ui select,
body.premium-ui textarea {
  color: var(--premium-text);
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 9px !important;
}

body.premium-ui input:focus,
body.premium-ui select:focus,
body.premium-ui textarea:focus {
  outline: none;
  border-color: rgba(240,182,47,.46) !important;
  box-shadow: 0 0 0 2px rgba(240,182,47,.08);
}

/* Pills / badges / stats */
body.premium-ui .badge,
body.premium-ui .pill,
body.premium-ui .chip,
body.premium-ui .stat-pill,
body.premium-ui .tag {
  border: 1px solid rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.035) !important;
  border-radius: 999px !important;
}

/* Progress */
body.premium-ui progress,
body.premium-ui .progress-track,
body.premium-ui .xp-track,
body.premium-ui .health-track {
  background: rgba(255,255,255,.075) !important;
  border-radius: 999px !important;
}

/* Tables */
body.premium-ui table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-radius: 12px;
  background: var(--premium-panel);
}

body.premium-ui th {
  color: var(--premium-gold);
  background: rgba(255,255,255,.028);
}

body.premium-ui td,
body.premium-ui th {
  border-color: rgba(255,255,255,.055) !important;
}

/* Skills */
body.premium-ui .skill-card,
body.premium-ui .activity-card,
body.premium-ui .activity-tile {
  background:
    linear-gradient(180deg, rgba(255,255,255,.027), rgba(255,255,255,.012)),
    #08121b !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
}

body.premium-ui .skill-card:hover,
body.premium-ui .activity-card:hover,
body.premium-ui .activity-tile:hover {
  border-color: rgba(240,182,47,.20) !important;
  background: #08121b !important;
}

/* Bank */
body.premium-ui .bank-item,
body.premium-ui .inventory-item,
body.premium-ui .item-card {
  border-radius: 12px !important;
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.065) !important;
}

body.premium-ui .bank-item:hover,
body.premium-ui .inventory-item:hover,
body.premium-ui .item-card:hover {
  border-color: rgba(240,182,47,.24) !important;
}

/* Equipment */
body.premium-ui .equipment-slot {
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(240,182,47,.05), transparent 55%),
    #08121b !important;
  border: 1px solid rgba(255,255,255,.075) !important;
}

body.premium-ui .equipment-slot.filled {
  border-color: rgba(240,182,47,.22) !important;
}

/* Combat */
body.premium-ui .combat-enemy-card {
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 13px !important;
}

body.premium-ui .combat-enemy-card.active {
  border-color: rgba(240,182,47,.58) !important;
  background: linear-gradient(180deg, rgba(240,182,47,.065), rgba(255,255,255,.014)), #08121b !important;
}

/* Achievements / Collections */
body.premium-ui .achievement-card,
body.premium-ui .collection-card {
  transition: transform .15s ease, border-color .15s ease;
}
body.premium-ui .achievement-card:hover,
body.premium-ui .collection-card:hover {
  transform: translateY(-1px);
  border-color: rgba(240,182,47,.20) !important;
}

/* Shop */
body.premium-ui .shop-item,
body.premium-ui .product-card {
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 14px !important;
}

/* Diagnostics */
body.premium-ui details,
body.premium-ui .diagnostics {
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.018) !important;
}

/* =========================================================
   EXPEDITIONS — PREMIUM REFERENCE LAYOUT
   ========================================================= */

body.premium-ui #expeditionsPage,
body.premium-ui [data-page="expeditions"] {
  max-width: none !important;
}

body.premium-ui #expeditionRegionGrid {
  width: 100%;
}

body.premium-ui .two-step-map {
  padding: 26px !important;
  border: 1px solid rgba(240,182,47,.20) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(239, 178, 39, .08), transparent 26%),
    radial-gradient(circle at 50% 30%, rgba(95,72,139,.08), transparent 25%),
    radial-gradient(circle at 82% 30%, rgba(157,67,39,.09), transparent 28%),
    linear-gradient(180deg, #08121b, #08121b) !important;
  box-shadow: var(--premium-shadow);
}

body.premium-ui .two-step-map-head {
  margin-bottom: 30px !important;
}

body.premium-ui .two-step-map-head h2 {
  font-size: clamp(1.7rem, 2.5vw, 2.4rem) !important;
}

body.premium-ui .two-step-map-level {
  min-width: 170px;
  padding: 14px 18px !important;
  border-color: rgba(240,182,47,.20) !important;
}

body.premium-ui .two-step-map-track {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch;
}

body.premium-ui .two-step-region-card {
  min-height: 500px !important;
  padding: 18px 16px 16px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.010)),
    #08121b !important;
  border-color: rgba(151,165,182,.24) !important;
}

body.premium-ui .two-step-region-card.selected {
  border-color: var(--premium-gold) !important;
  box-shadow:
    0 0 0 1px rgba(240,182,47,.18),
    0 16px 35px rgba(7,16,25,.28) !important;
}

body.premium-ui .two-step-region-icon {
  top: -30px !important;
  width: 62px !important;
  height: 62px !important;
  border-width: 2px !important;
  background: #08121b !important;
}

body.premium-ui .two-step-region-card.selected .two-step-region-icon {
  border-color: var(--premium-gold) !important;
}

body.premium-ui .two-step-region-art {
  height: 285px !important;
  margin-top: 17px !important;
  border-radius: 15px !important;
}

body.premium-ui .two-step-region-copy strong {
  font-size: 1.25rem !important;
}

body.premium-ui .two-step-region-copy small {
  color: var(--premium-gold) !important;
  font-size: .88rem !important;
}

body.premium-ui .two-step-region-key {
  min-width: 145px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.028) !important;
}

body.premium-ui .two-step-map-footer {
  border-color: rgba(255,255,255,.055) !important;
  background: rgba(255,255,255,.018) !important;
}

/* Region expedition view */
body.premium-ui .two-step-expedition {
  border: 1px solid rgba(240,182,47,.14);
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    rgba(9,15,21,.86);
}

body.premium-ui .two-step-player-strip span {
  background: rgba(255,255,255,.032) !important;
  border-color: rgba(255,255,255,.07) !important;
}

body.premium-ui .two-step-stage-card {
  border-color: rgba(240,182,47,.28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)),
    #08121b !important;
}

body.premium-ui .two-step-stage-icon {
  font-size: 2.55rem !important;
}

body.premium-ui .exp-stage-loot span {
  border-color: rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.026) !important;
}

/* Responsive */
@media (max-width: 980px) {
  body.premium-ui .two-step-map-track {
    gap: 14px !important;
  }

  body.premium-ui .two-step-region-card {
    min-height: 420px !important;
  }

  body.premium-ui .two-step-region-art {
    height: 220px !important;
  }
}

@media (max-width: 820px) {
  body.premium-ui .two-step-map-track {
    grid-template-columns: 1fr !important;
  }

  body.premium-ui .two-step-region-card {
    min-height: 150px !important;
  }

  body.premium-ui .two-step-region-art {
    width: 100px !important;
    height: 100px !important;
  }
}




/* ============================================================
   JOURNEYDEN — EXACT REFERENCE UI REBUILD
   ============================================================ */

body.exact-reference-ui {
  --jr-bg: #08121b;
  --jr-shell: #08121b;
  --jr-panel: #08121b;
  --jr-panel-2: #08121b;
  --jr-panel-3: #08121b;
  --jr-border: rgba(255,255,255,.075);
  --jr-border-2: rgba(255,255,255,.12);
  --jr-gold: #f4b72d;
  --jr-gold-soft: #d99818;
  --jr-text: #f7f0e7;
  --jr-muted: #a7b0bb;
  --jr-gold: #efb227;
  --jr-purple: #c68cff;
  --jr-red: #ff5a2a;
  --jr-radius: 14px;
  --jr-shadow: 0 16px 36px rgba(7,16,25,.28);

  margin: 0 !important;
  min-height: 100vh;
  color: var(--jr-text) !important;
  background: linear-gradient(180deg,#08121b 0%,#08121b 100%) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* FULL PAGE SHELL */
body.exact-reference-ui #app,
body.exact-reference-ui .app,
body.exact-reference-ui .app-shell {
  min-height: 100vh;
  background: transparent !important;
}

body.exact-reference-ui .sidebar,
body.exact-reference-ui .reference-sidebar,
body.exact-reference-ui nav[class*="side"] {
  width: 230px !important;
  min-width: 230px !important;
  padding: 18px 14px !important;
  background: linear-gradient(180deg,#08121b 0%,#08121b 100%) !important;
  border-right: 1px solid rgba(244,183,45,.17) !important;
  box-shadow: 8px 0 28px rgba(7,16,25,.18) !important;
}

body.exact-reference-ui .main-content,
body.exact-reference-ui .reference-main,
body.exact-reference-ui main {
  padding: 26px 30px !important;
  background: transparent !important;
}

/* BRAND AREA */
body.exact-reference-ui .brand,
body.exact-reference-ui .logo,
body.exact-reference-ui .app-title {
  color: var(--jr-text) !important;
  letter-spacing: .04em;
}

body.exact-reference-ui .brand::before,
body.exact-reference-ui .logo::before {
  content: "✦";
  color: var(--jr-gold);
  margin-right: 8px;
}

/* LEFT NAV */
body.exact-reference-ui .sidebar button,
body.exact-reference-ui .sidebar a,
body.exact-reference-ui .nav-item,
body.exact-reference-ui [data-view] {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px !important;
  margin: 3px 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #e9e4db !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.exact-reference-ui .sidebar button:hover,
body.exact-reference-ui .sidebar a:hover,
body.exact-reference-ui .nav-item:hover {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.06) !important;
}

body.exact-reference-ui .sidebar button.active,
body.exact-reference-ui .sidebar a.active,
body.exact-reference-ui .nav-item.active,
body.exact-reference-ui [data-view].active {
  color: var(--jr-gold) !important;
  background: linear-gradient(180deg,rgba(244,183,45,.11),rgba(244,183,45,.045)) !important;
  border-color: rgba(244,183,45,.55) !important;
}

/* PAGE HEADER/TOP BAR */
body.exact-reference-ui h1,
body.exact-reference-ui h2,
body.exact-reference-ui h3 {
  color: var(--jr-text) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

body.exact-reference-ui .page-header,
body.exact-reference-ui .topbar,
body.exact-reference-ui .header-stats,
body.exact-reference-ui .combat-summary {
  border: 1px solid var(--jr-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.008)),#08121b !important;
}

/* GLOBAL CARD SYSTEM */
body.exact-reference-ui .card,
body.exact-reference-ui .panel,
body.exact-reference-ui .section-card,
body.exact-reference-ui .content-card,
body.exact-reference-ui .skill-card,
body.exact-reference-ui .activity-card,
body.exact-reference-ui .combat-enemy-card,
body.exact-reference-ui .shop-item,
body.exact-reference-ui .achievement-card,
body.exact-reference-ui .collection-card,
body.exact-reference-ui .bank-item,
body.exact-reference-ui .inventory-item,
body.exact-reference-ui .item-card,
body.exact-reference-ui .equipment-slot {
  background: linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008)),#08121b !important;
  border: 1px solid var(--jr-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025),0 8px 20px rgba(7,16,25,.14) !important;
}

body.exact-reference-ui .card:hover,
body.exact-reference-ui .skill-card:hover,
body.exact-reference-ui .activity-card:hover,
body.exact-reference-ui .combat-enemy-card:hover,
body.exact-reference-ui .bank-item:hover,
body.exact-reference-ui .item-card:hover {
  border-color: rgba(244,183,45,.24) !important;
  background: #08121b !important;
}

/* SECTION LABELS */
body.exact-reference-ui .eyebrow,
body.exact-reference-ui .section-label,
body.exact-reference-ui .kicker {
  color: var(--jr-gold) !important;
  font-size: .7rem !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

/* STATS PILLS */
body.exact-reference-ui .pill,
body.exact-reference-ui .badge,
body.exact-reference-ui .chip,
body.exact-reference-ui .stat-pill,
body.exact-reference-ui .tag {
  padding: 6px 9px !important;
  color: var(--jr-text) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.035) !important;
}

/* BUTTONS */
body.exact-reference-ui button,
body.exact-reference-ui .button,
body.exact-reference-ui .btn {
  border-radius: 10px !important;
}

body.exact-reference-ui .primary,
body.exact-reference-ui .btn-primary,
body.exact-reference-ui .action-primary,
body.exact-reference-ui .expedition-action.start,
body.exact-reference-ui button[data-action="start-expedition-run"] {
  color: #08121b !important;
  border: 1px solid #ffe07a !important;
  background: linear-gradient(180deg,#ffd45b 0%,#eead20 100%) !important;
  font-weight: 850 !important;
  box-shadow: 0 0 0 1px rgba(244,183,45,.14),0 8px 22px rgba(244,183,45,.24) !important;
}

body.exact-reference-ui .primary:hover,
body.exact-reference-ui .btn-primary:hover,
body.exact-reference-ui .action-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* INPUTS */
body.exact-reference-ui input,
body.exact-reference-ui select,
body.exact-reference-ui textarea {
  color: var(--jr-text) !important;
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 9px !important;
}

/* BANK */
body.exact-reference-ui .bank-grid {
  gap: 10px !important;
}

body.exact-reference-ui .bank-item {
  min-height: 86px;
  padding: 10px !important;
}

body.exact-reference-ui .bank-item.selected {
  border-color: rgba(244,183,45,.48) !important;
  box-shadow: 0 0 0 1px rgba(244,183,45,.08) !important;
}

/* SKILLS */
body.exact-reference-ui .skill-grid,
body.exact-reference-ui .skills-grid {
  gap: 12px !important;
}

body.exact-reference-ui .skill-card {
  padding: 14px !important;
}

body.exact-reference-ui .skill-card .progress,
body.exact-reference-ui .skill-card progress {
  height: 6px !important;
}

/* COMBAT */
body.exact-reference-ui .combat-enemy-card.active {
  border-color: rgba(244,183,45,.58) !important;
  background: linear-gradient(180deg,rgba(244,183,45,.055),rgba(255,255,255,.008)),#08121b !important;
}

/* EQUIPMENT */
body.exact-reference-ui .equipment-slot {
  min-height: 92px;
  background:
    radial-gradient(circle at 50% 25%,rgba(244,183,45,.055),transparent 55%),
    #08121b !important;
}

body.exact-reference-ui .equipment-slot.filled {
  border-color: rgba(244,183,45,.24) !important;
}

/* SHOP */
body.exact-reference-ui .shop-grid {
  gap: 12px !important;
}

body.exact-reference-ui .shop-item {
  padding: 14px !important;
}

/* ACHIEVEMENTS / COLLECTIONS */
body.exact-reference-ui .achievement-card.completed,
body.exact-reference-ui .collection-card.completed {
  border-color: rgba(244,183,45,.34) !important;
}

/* EXPEDITIONS — match reference composition */
body.exact-reference-ui #expeditionsPage,
body.exact-reference-ui [data-page="expeditions"] {
  max-width: none !important;
}

body.exact-reference-ui #expeditionRegionGrid {
  width: 100% !important;
  max-width: none !important;
}

body.exact-reference-ui .two-step-map {
  padding: 24px !important;
  border: 1px solid rgba(244,183,45,.16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 20% 30%,rgba(239, 178, 39, .07),transparent 28%),
    radial-gradient(circle at 52% 30%,rgba(98,75,141,.07),transparent 27%),
    radial-gradient(circle at 83% 30%,rgba(166,73,43,.08),transparent 30%),
    linear-gradient(180deg,#08121b,#08121b) !important;
}

body.exact-reference-ui .two-step-map-track {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 24px !important;
}

body.exact-reference-ui .two-step-region-card {
  min-height: 500px !important;
  border-radius: 18px !important;
  background: #08121b !important;
  border: 1px solid rgba(147,160,176,.22) !important;
}

body.exact-reference-ui .two-step-region-card.selected {
  border-color: var(--jr-gold) !important;
  box-shadow: 0 0 0 1px rgba(244,183,45,.17),0 16px 34px rgba(7,16,25,.28) !important;
}

body.exact-reference-ui .two-step-region-art {
  height: 290px !important;
  border-radius: 14px !important;
}

body.exact-reference-ui .two-step-region-copy strong {
  font-size: 1.25rem !important;
}

body.exact-reference-ui .two-step-region-key {
  min-width: 145px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.028) !important;
}

body.exact-reference-ui .two-step-expedition {
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(244,183,45,.16) !important;
  background: #08121b !important;
}

body.exact-reference-ui .two-step-stage-card {
  padding: 18px !important;
  border-color: rgba(244,183,45,.28) !important;
  background: #08121b !important;
}

/* DIAGNOSTICS BAR */
body.exact-reference-ui details,
body.exact-reference-ui .diagnostics {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  background: #08121b !important;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  body.exact-reference-ui .sidebar,
  body.exact-reference-ui .reference-sidebar {
    width: 190px !important;
    min-width: 190px !important;
  }

  body.exact-reference-ui .main-content,
  body.exact-reference-ui .reference-main,
  body.exact-reference-ui main {
    padding: 20px !important;
  }
}

@media (max-width: 820px) {
  body.exact-reference-ui .two-step-map-track {
    grid-template-columns: 1fr !important;
  }

  body.exact-reference-ui .two-step-region-card {
    min-height: 150px !important;
  }

  body.exact-reference-ui .two-step-region-art {
    height: 100px !important;
  }
}




/* ============================================================
   PREMIUM BRANDING + gold CLEANUP
   ============================================================ */

/* Brand */
body.exact-reference-ui .premium-brand-block {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

body.exact-reference-ui .premium-brand-block img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(244,183,45,.18);
}

body.exact-reference-ui .premium-brand-block div {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

body.exact-reference-ui .premium-brand-block strong {
  font-size: 1rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

body.exact-reference-ui .premium-brand-block span {
  margin-top: 4px;
  color: var(--jr-gold);
  font-size: .72rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Global gold surfaces -> navy/gold.
   Health/success bars stay gold where semantically useful. */
body.exact-reference-ui .gold,
body.exact-reference-ui .success-surface,
body.exact-reference-ui .gold-card,
body.exact-reference-ui .gold-panel,
body.exact-reference-ui [class*="gold-bg"],
body.exact-reference-ui [class*="gold-bg"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)),
    #08121b !important;
  border-color: rgba(255,255,255,.075) !important;
  color: var(--jr-text) !important;
}

/* Old gold page sections */
body.exact-reference-ui .page-header,
body.exact-reference-ui .page-toolbar,
body.exact-reference-ui .subnav,
body.exact-reference-ui .filter-bar,
body.exact-reference-ui .bank-toolbar,
body.exact-reference-ui .shop-toolbar,
body.exact-reference-ui .skills-toolbar,
body.exact-reference-ui .equipment-toolbar,
body.exact-reference-ui .achievement-toolbar,
body.exact-reference-ui .collection-toolbar {
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: var(--jr-text) !important;
}

/* gold borders and highlights -> gold */
body.exact-reference-ui .selected,
body.exact-reference-ui .active-card,
body.exact-reference-ui .is-active,
body.exact-reference-ui .current {
  border-color: rgba(244,183,45,.45) !important;
}

/* Replace legacy gold action buttons but preserve heal/success semantics */
body.exact-reference-ui button.success:not(.heal):not(.health),
body.exact-reference-ui .btn-success:not(.heal):not(.health),
body.exact-reference-ui .button-gold:not(.heal):not(.health) {
  color: #08121b !important;
  border-color: #ffe07a !important;
  background: linear-gradient(180deg,#ffd45b,#eead20) !important;
}

/* Tab system */
body.exact-reference-ui .tabs,
body.exact-reference-ui .tab-bar,
body.exact-reference-ui .subtabs {
  padding: 4px !important;
  border-radius: 11px !important;
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.065) !important;
}

body.exact-reference-ui .tab,
body.exact-reference-ui .tabs button,
body.exact-reference-ui .subtabs button {
  color: var(--jr-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

body.exact-reference-ui .tab.active,
body.exact-reference-ui .tabs button.active,
body.exact-reference-ui .subtabs button.active {
  color: var(--jr-gold) !important;
  background: rgba(244,183,45,.075) !important;
  border-color: rgba(244,183,45,.30) !important;
}

/* Headings / separators */
body.exact-reference-ui hr,
body.exact-reference-ui .divider,
body.exact-reference-ui .separator {
  border-color: rgba(255,255,255,.055) !important;
  background: rgba(255,255,255,.055) !important;
}

/* Legacy bright gold text should be muted/gold except health/xp indicators */
body.exact-reference-ui .accent-gold:not(.health):not(.xp):not(.success),
body.exact-reference-ui .text-gold:not(.health):not(.xp):not(.success),
body.exact-reference-ui [class*="gold-text"]:not(.health):not(.xp):not(.success) {
  color: var(--jr-gold) !important;
}

/* Tooltips / popovers / modals */
body.exact-reference-ui .modal,
body.exact-reference-ui .dialog,
body.exact-reference-ui .popover,
body.exact-reference-ui .tooltip {
  color: var(--jr-text) !important;
  background: #08121b !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 18px 48px rgba(7,16,25,.38) !important;
}

/* Status footer / summary bars */
body.exact-reference-ui .status-bar,
body.exact-reference-ui .summary-bar,
body.exact-reference-ui .footer-bar {
  background: #08121b !important;
  border-color: rgba(255,255,255,.06) !important;
}

/* Premium icon treatment for any emoji/icon containers */
body.exact-reference-ui .icon,
body.exact-reference-ui .nav-icon,
body.exact-reference-ui .skill-icon,
body.exact-reference-ui .item-icon,
body.exact-reference-ui .equipment-icon {
  filter: drop-shadow(0 2px 5px rgba(7,16,25,.22));
}

/* Make all section headers visually match the approved UI */
body.exact-reference-ui .section-header,
body.exact-reference-ui .panel-header,
body.exact-reference-ui .card-header {
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  color: var(--jr-gold) !important;
}

/* Scrollbars */
body.exact-reference-ui * {
  scrollbar-width: thin;
  scrollbar-color: rgba(244,183,45,.35) rgba(255,255,255,.035);
}

/* Preserve semantic gold for HP/progress only */
body.exact-reference-ui .health-bar span,
body.exact-reference-ui .hp-bar span,
body.exact-reference-ui .progress-health span,
body.exact-reference-ui .success-progress span {
  background: #efb227 !important;
}




/* =====================================================================
   JOURNEYDEN — PREMIUM THEME EVERYWHERE
   Navy / blue-black + gold visual language from the approved references.
   This block is intentionally authoritative and replaces legacy styling.
   ===================================================================== */

body.premium-everywhere {
  --p-bg-0: #08121b;
  --p-bg-1: #08121b;
  --p-bg-2: #08121b;
  --p-panel: #08121b;
  --p-panel-2: #08121b;
  --p-panel-3: #0d1721;
  --p-panel-hover: #0d1721;
  --p-border: rgba(157,177,199,.12);
  --p-border-soft: rgba(157,177,199,.075);
  --p-border-gold: rgba(239,178,39,.48);
  --p-gold: #efb227;
  --p-gold-hi: #ffd461;
  --p-gold-dark: #bd8114;
  --p-text: #f4efe7;
  --p-muted: #9aa7b5;
  --p-muted-2: #718091;
  --p-blue: #5f8dff;
  --p-purple: #bd82ef;
  --p-orange: #f16631;
  --p-hp: #efb227;
  --p-danger: #ee5a51;
  --p-radius-sm: 9px;
  --p-radius: 13px;
  --p-radius-lg: 18px;
  --p-shadow: 0 14px 34px rgba(7,16,25,.28);

  color: var(--p-text) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(32,61,81,.15), transparent 28rem),
    linear-gradient(180deg,var(--p-bg-1),var(--p-bg-0)) !important;
}

/* ---- page geometry ---- */
body.premium-everywhere .app-shell {
  background: transparent !important;
  border-color: rgba(239,178,39,.12) !important;
}

body.premium-everywhere main,
body.premium-everywhere .main,
body.premium-everywhere .main-content,
body.premium-everywhere .content-area {
  background: transparent !important;
}

body.premium-everywhere .view,
body.premium-everywhere .page {
  color: var(--p-text) !important;
}

/* ---- sidebar, exactly one premium navigation language ---- */
body.premium-everywhere .sidebar {
  background:
    linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,0)),
    #08121b !important;
  border-right: 1px solid rgba(239,178,39,.17) !important;
}

body.premium-everywhere .sidebar .nav-button,
body.premium-everywhere .sidebar button[data-view],
body.premium-everywhere .sidebar [data-view] {
  color: #e5e4df !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.premium-everywhere .sidebar .nav-button:hover,
body.premium-everywhere .sidebar button[data-view]:hover,
body.premium-everywhere .sidebar [data-view]:hover {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(157,177,199,.08) !important;
}

body.premium-everywhere .sidebar .nav-button.active,
body.premium-everywhere .sidebar button[data-view].active,
body.premium-everywhere .sidebar [data-view].active {
  color: var(--p-gold) !important;
  background: linear-gradient(180deg,rgba(239,178,39,.11),rgba(239,178,39,.045)) !important;
  border-color: rgba(239,178,39,.55) !important;
}

/* ---- absolutely all large surfaces navy, never legacy gold ---- */
body.premium-everywhere :where(
  .card,.panel,.box,.tile,.section-card,.content-card,.summary-card,
  .skill-card,.activity-card,.activity-tile,.bank-panel,.bank-item,
  .inventory-item,.item-card,.equipment-panel,.equipment-slot,
  .combat-panel,.combat-enemy-card,.shop-panel,.shop-item,
  .achievement-card,.collection-card,.settings-card,.mastery-card,
  .offline-card,.leaderboard-card,.modal,.dialog,.popover,
  .toolbar,.filter-bar,.tabs,.tab-bar,.subtabs
) {
  color: var(--p-text) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.007)),
    var(--p-panel) !important;
  border-color: var(--p-border-soft) !important;
}

/* Catch old literal gold utility classes */
body.premium-everywhere [class*="gold"],
body.premium-everywhere [class*="gold"] {
  background-color: var(--p-panel) !important;
  border-color: var(--p-border-soft) !important;
}

/* But semantic HP bars should still look alive */
body.premium-everywhere :where(.hp-bar,.health-bar,.player-health,.enemy-health) span,
body.premium-everywhere progress.hp::-webkit-progress-value {
  background: var(--p-hp) !important;
}

/* ---- headings ---- */
body.premium-everywhere h1,
body.premium-everywhere h2,
body.premium-everywhere h3,
body.premium-everywhere h4,
body.premium-everywhere strong {
  color: var(--p-text);
}

body.premium-everywhere :where(.eyebrow,.kicker,.section-label,.section-kicker,.overline) {
  color: var(--p-gold) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .10em;
}

/* ---- buttons ---- */
body.premium-everywhere button,
body.premium-everywhere .btn {
  color: var(--p-text);
  background: #08121b;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
}

body.premium-everywhere button:hover:not(:disabled),
body.premium-everywhere .btn:hover:not(:disabled) {
  border-color: rgba(239,178,39,.28);
  background: #0d1721;
}

body.premium-everywhere :where(
  .primary,.btn-primary,.action-primary,.buy-button,.sell-button,
  .equip-button,.craft-button,.start-button,.expedition-action.start
) {
  color: #08121b !important;
  font-weight: 850 !important;
  background: linear-gradient(180deg,var(--p-gold-hi),#e7a61e) !important;
  border-color: #ffdf7d !important;
  box-shadow: 0 8px 20px rgba(239,178,39,.20) !important;
}

/* ---- tabs ---- */
body.premium-everywhere :where(.tabs,.tab-bar,.subtabs) {
  padding: 4px;
  background: #08121b !important;
  border: 1px solid var(--p-border-soft) !important;
  border-radius: 11px !important;
}

body.premium-everywhere :where(.tab,.tabs button,.tab-bar button,.subtabs button) {
  color: var(--p-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body.premium-everywhere :where(.tab.active,.tabs button.active,.tab-bar button.active,.subtabs button.active) {
  color: var(--p-gold) !important;
  background: rgba(239,178,39,.075) !important;
  border-color: rgba(239,178,39,.28) !important;
}

/* ---- controls ---- */
body.premium-everywhere input,
body.premium-everywhere select,
body.premium-everywhere textarea {
  color: var(--p-text) !important;
  background: #08121b !important;
  border: 1px solid var(--p-border) !important;
}

body.premium-everywhere input:focus,
body.premium-everywhere select:focus,
body.premium-everywhere textarea:focus {
  border-color: rgba(239,178,39,.5) !important;
  outline: 2px solid rgba(239,178,39,.08);
}

/* ---- pill/chip language ---- */
body.premium-everywhere :where(.pill,.badge,.chip,.tag,.stat-pill,.filter-chip) {
  color: var(--p-text) !important;
  background: rgba(255,255,255,.034) !important;
  border: 1px solid rgba(157,177,199,.09) !important;
  border-radius: 999px !important;
}

/* ---- activity/skill cards ---- */
body.premium-everywhere :where(.skill-card,.activity-card,.activity-tile) {
  border-radius: 14px !important;
}
body.premium-everywhere :where(.skill-card,.activity-card,.activity-tile):hover {
  background: var(--p-panel-hover) !important;
  border-color: rgba(239,178,39,.20) !important;
}

/* ---- bank / item UI ---- */
body.premium-everywhere :where(.bank-item,.inventory-item,.item-card) {
  background: #08121b !important;
  border-radius: 12px !important;
}
body.premium-everywhere :where(.bank-item,.inventory-item,.item-card).selected {
  border-color: rgba(239,178,39,.52) !important;
  box-shadow: 0 0 0 1px rgba(239,178,39,.08);
}

/* ---- equipment ---- */
body.premium-everywhere .equipment-slot {
  background:
    radial-gradient(circle at 50% 25%,rgba(239,178,39,.045),transparent 55%),
    #08121b !important;
}
body.premium-everywhere .equipment-slot.filled {
  border-color: rgba(239,178,39,.25) !important;
}

/* ---- combat ---- */
body.premium-everywhere .combat-enemy-card.active {
  background:
    linear-gradient(180deg,rgba(239,178,39,.055),rgba(255,255,255,.007)),
    #08121b !important;
  border-color: rgba(239,178,39,.55) !important;
}

/* ---- shop ---- */
body.premium-everywhere .shop-item {
  background: #08121b !important;
}

/* ---- achievements / collections ---- */
body.premium-everywhere :where(.achievement-card,.collection-card).completed {
  border-color: rgba(239,178,39,.34) !important;
}

/* ---- tables ---- */
body.premium-everywhere table {
  background: var(--p-panel) !important;
  border-color: var(--p-border-soft) !important;
}
body.premium-everywhere th {
  color: var(--p-gold) !important;
  background: rgba(255,255,255,.025) !important;
}
body.premium-everywhere td,
body.premium-everywhere th {
  border-color: rgba(157,177,199,.065) !important;
}

/* ---- diagnostics ---- */
body.premium-everywhere details,
body.premium-everywhere .diagnostics {
  color: var(--p-muted) !important;
  background: #08121b !important;
  border-color: var(--p-border-soft) !important;
}

/* ---- EXPEDITIONS: retain artwork, but force approved premium treatment ---- */
body.premium-everywhere .two-step-map {
  background:
    radial-gradient(circle at 18% 30%,rgba(239, 178, 39, .065),transparent 27%),
    radial-gradient(circle at 50% 30%,rgba(91,68,137,.065),transparent 26%),
    radial-gradient(circle at 83% 30%,rgba(153,62,35,.075),transparent 28%),
    linear-gradient(180deg,#08121b,#08121b) !important;
  border-color: rgba(239,178,39,.17) !important;
}

body.premium-everywhere .two-step-region-card {
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),
    #08121b !important;
  border-color: rgba(157,177,199,.18) !important;
}

body.premium-everywhere .two-step-region-card.selected {
  border-color: var(--p-gold) !important;
  box-shadow: 0 0 0 1px rgba(239,178,39,.16),0 16px 34px rgba(7,16,25,.28) !important;
}

body.premium-everywhere .two-step-expedition {
  background: #08121b !important;
  border-color: rgba(239,178,39,.16) !important;
}

body.premium-everywhere .two-step-stage-card {
  background: #08121b !important;
  border-color: rgba(239,178,39,.27) !important;
}

/* ---- eliminate legacy gold via CSS variables and generic background declarations ---- */
body.premium-everywhere .success:not(.hp):not(.health):not(.progress),
body.premium-everywhere .positive:not(.hp):not(.health):not(.progress) {
  color: var(--p-gold) !important;
}

/* Scrollbars */
body.premium-everywhere * {
  scrollbar-width: thin;
  scrollbar-color: rgba(239,178,39,.30) rgba(255,255,255,.025);
}



/* ABSOLUTE PREMIUM THEME FINAL PASS */
body.premium-everywhere,
body.exact-reference-ui,
body.premium-ui {
  color: #f4efe7 !important;
  background: linear-gradient(180deg,#08121b,#08121b) !important;
}

body.premium-everywhere :where(
  .card,.panel,.box,.tile,.section-card,.content-card,
  .skill-card,.activity-card,.bank-item,.inventory-item,.item-card,
  .equipment-slot,.combat-enemy-card,.shop-item,.achievement-card,
  .collection-card,.settings-card,.mastery-card,.offline-card,.leaderboard-card
) {
  background: linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.007)),#08121b !important;
  border-color: rgba(157,177,199,.10) !important;
  color: #f4efe7 !important;
}

body.premium-everywhere :where(
  .primary,.btn-primary,.action-primary,.buy-button,.sell-button,
  .equip-button,.craft-button,.start-button,.expedition-action.start
) {
  background: linear-gradient(180deg,#ffd461,#e7a61e) !important;
  border-color: #ffdf7d !important;
  color: #08121b !important;
}

body.premium-everywhere :where(
  .hp-bar span,.health-bar span,.player-health span,.enemy-health span,
  .progress-health span,.success-progress span
) {
  background: linear-gradient(90deg,#5f8dff,#efb227) !important;
}



/* ====================================================================
   PREMIUM VISUAL CLEANUP — PAGE-SPECIFIC OVERRIDES
   Navy / blue-black / gold throughout the entire app.
   ==================================================================== */

body.premium-everywhere,
body.premium-ui,
body.exact-reference-ui {
  --premium-navy-0: #08121b;
  --premium-navy-1: #08121b;
  --premium-navy-2: #08121b;
  --premium-navy-3: #08121b;
  --premium-navy-4: #0d1721;
  --premium-blue: #5f8dff;
  --premium-gold: #efb227;
  --premium-gold-hi: #ffd461;
  --premium-border: rgba(151,174,201,.12);
  --premium-border-gold: rgba(239,178,39,.42);
  --premium-text: #f4efe7;
  --premium-muted: #9aa8b6;
}

/* Main logo / home header */
body.premium-everywhere .brand,
body.premium-everywhere .logo,
body.premium-everywhere .app-logo,
body.premium-everywhere .game-logo,
body.premium-everywhere .brand-mark,
body.premium-everywhere .home-logo {
  color: var(--premium-gold) !important;
  border-color: var(--premium-border-gold) !important;
  background:
    radial-gradient(circle at 50% 35%,rgba(239,178,39,.10),transparent 58%),
    #08121b !important;
}

body.premium-everywhere .brand img,
body.premium-everywhere .logo img,
body.premium-everywhere .app-logo img,
body.premium-everywhere .game-logo img,
body.premium-everywhere .premium-brand-block img {
  border-color: var(--premium-border-gold) !important;
  box-shadow: 0 0 0 1px rgba(239,178,39,.10),0 8px 18px rgba(7,16,25,.28) !important;
}

/* HOME / DASHBOARD */
body.premium-everywhere :where(
  .home-card,.dashboard-card,.overview-card,.quick-card,.summary-card,
  .stat-card,.profile-card,.character-card,.account-card
) {
  color: var(--premium-text) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.006)),#08121b !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: 14px !important;
}

body.premium-everywhere :where(.home-card,.dashboard-card,.overview-card).active {
  border-color: var(--premium-border-gold) !important;
  background: linear-gradient(180deg,rgba(239,178,39,.055),rgba(255,255,255,.006)),#08121b !important;
}

/* COMBAT PAGE */
body.premium-everywhere :where(
  .combat-page,.combat-layout,.combat-main,.combat-sidebar,.combat-panel,
  .combat-card,.enemy-card,.combat-enemy-card,.monster-card,
  .combat-player-card,.combat-stats,.combat-loadout,.combat-actions
) {
  color: var(--premium-text) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.021),rgba(255,255,255,.006)),#08121b !important;
  border-color: var(--premium-border) !important;
}

body.premium-everywhere :where(.enemy-card,.combat-enemy-card,.monster-card) {
  border: 1px solid rgba(151,174,201,.10) !important;
  border-radius: 13px !important;
}

body.premium-everywhere :where(.enemy-card,.combat-enemy-card,.monster-card).active,
body.premium-everywhere :where(.enemy-card,.combat-enemy-card,.monster-card).selected {
  border-color: var(--premium-border-gold) !important;
  background: linear-gradient(180deg,rgba(239,178,39,.055),rgba(255,255,255,.006)),#08121b !important;
}

body.premium-everywhere :where(
  .combat-style,.combat-style-button,.style-button,.attack-style
) {
  color: var(--premium-muted) !important;
  background: #08121b !important;
  border: 1px solid rgba(151,174,201,.10) !important;
}
body.premium-everywhere :where(
  .combat-style,.combat-style-button,.style-button,.attack-style
).active {
  color: var(--premium-gold) !important;
  border-color: var(--premium-border-gold) !important;
  background: rgba(239,178,39,.07) !important;
}

/* Equipment page */
body.premium-everywhere :where(
  .equipment-page,.equipment-layout,.equipment-panel,.equipment-grid,
  .loadout-panel,.gear-panel,.stats-panel,.equipment-stats
) {
  color: var(--premium-text) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.021),rgba(255,255,255,.006)),#08121b !important;
  border-color: var(--premium-border) !important;
}

body.premium-everywhere .equipment-slot {
  background:
    radial-gradient(circle at 50% 28%,rgba(95,141,255,.075),transparent 56%),
    #08121b !important;
  border: 1px solid rgba(151,174,201,.11) !important;
  border-radius: 13px !important;
}
body.premium-everywhere .equipment-slot.filled,
body.premium-everywhere .equipment-slot.selected {
  border-color: var(--premium-border-gold) !important;
  background:
    radial-gradient(circle at 50% 28%,rgba(239,178,39,.065),transparent 58%),
    #08121b !important;
}

/* Mastery page */
body.premium-everywhere :where(
  .mastery-page,.mastery-panel,.mastery-card,.mastery-skill,
  .mastery-grid,.mastery-overview,.mastery-summary,.mastery-progress
) {
  color: var(--premium-text) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.021),rgba(255,255,255,.006)),#08121b !important;
  border-color: var(--premium-border) !important;
}
body.premium-everywhere :where(.mastery-card,.mastery-skill).active,
body.premium-everywhere :where(.mastery-card,.mastery-skill).selected {
  border-color: var(--premium-border-gold) !important;
  background: linear-gradient(180deg,rgba(239,178,39,.055),rgba(255,255,255,.006)),#08121b !important;
}

/* Collections */
body.premium-everywhere :where(
  .collections-page,.collection-page,.collections-panel,.collection-panel,
  .collection-card,.collection-entry,.collection-item,.collection-grid,
  .collection-log,.collection-category
) {
  color: var(--premium-text) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.021),rgba(255,255,255,.006)),#08121b !important;
  border-color: var(--premium-border) !important;
}
body.premium-everywhere :where(.collection-card,.collection-entry,.collection-item).completed,
body.premium-everywhere :where(.collection-card,.collection-entry,.collection-item).selected {
  border-color: var(--premium-border-gold) !important;
  background: linear-gradient(180deg,rgba(239,178,39,.05),rgba(255,255,255,.006)),#08121b !important;
}

/* Achievements */
body.premium-everywhere :where(
  .achievements-page,.achievement-page,.achievements-panel,.achievement-panel,
  .achievement-card,.achievement-grid,.achievement-category
) {
  color: var(--premium-text) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.021),rgba(255,255,255,.006)),#08121b !important;
  border-color: var(--premium-border) !important;
}
body.premium-everywhere .achievement-card.completed {
  border-color: var(--premium-border-gold) !important;
}

/* Bank / Shop / Skills / Activities / Settings / Stats / Leaderboard */
body.premium-everywhere :where(
  .bank-page,.shop-page,.skills-page,.activities-page,.settings-page,
  .stats-page,.leaderboard-page,.news-page,.offline-page
) {
  color: var(--premium-text) !important;
  background: transparent !important;
}

body.premium-everywhere :where(
  .bank-panel,.shop-panel,.skills-panel,.activity-panel,.settings-panel,
  .stats-panel,.leaderboard-panel,.news-panel,.offline-panel
) {
  background: #08121b !important;
  border-color: var(--premium-border) !important;
}

/* Progress / status: absolutely no green visual language */
body.premium-everywhere :where(
  .progress-bar span,.progress-fill,.xp-bar span,.xp-fill,
  .mastery-bar span,.mastery-fill,.collection-progress span,
  .achievement-progress span,.health-bar span,.hp-bar span
) {
  background: linear-gradient(90deg,#5f8dff,#efb227) !important;
}

/* Selected / unlocked / completed states use gold */
body.premium-everywhere :where(
  .completed,.unlocked,.success,.positive,.ready,.available
) {
  color: var(--premium-gold) !important;
}

body.premium-everywhere :where(
  .completed,.unlocked,.success,.positive,.ready,.available
):not(button) {
  border-color: rgba(239,178,39,.28) !important;
}

/* Footer / status strip */
body.premium-everywhere :where(.status-bar,.footer-bar,.bottom-bar,.summary-bar) {
  color: var(--premium-muted) !important;
  background: #08121b !important;
  border-color: rgba(151,174,201,.08) !important;
}

/* Remove any residual CSS filter that tints elements toward old accent palette */
body.premium-everywhere :where(
  .logo,.brand,.nav-icon,.skill-icon,.item-icon,.equipment-icon,
  .combat-icon,.mastery-icon,.collection-icon,.achievement-icon
) {
  filter: none !important;
}




/* ======================================================================
   PREMIUM NAVY PAGE PASS
   Force all major pages, milestone/mastery sections, rows and cards
   to the approved navy / blue-black Premium Look.
   ====================================================================== */

body.premium-everywhere {
  --premium-page-bg: #08121b;
  --premium-section-bg: #08121b;
  --premium-card-bg: #08121b;
  --premium-card-bg-2: #08121b;
  --premium-border-blue: rgba(124,153,188,.14);
  --premium-border-soft: rgba(124,153,188,.09);
  --premium-gold: #efb227;
  --premium-gold-hi: #ffd461;
  --premium-blue: #5f8dff;
  --premium-text: #f4efe7;
  --premium-muted: #93a1b1;
}

/* PAGE ROOTS */
body.premium-everywhere :where(
  #skillsPage,#masteryPage,#combatPage,#equipmentPage,#bankPage,#shopPage,
  #achievementsPage,#collectionsPage,#settingsPage,#statsPage,#leaderboardPage,
  #activitiesPage,#constructionPage,#smithingPage,#cookingPage,
  #fishingPage,#miningPage,#woodcuttingPage,#expeditionsPage,
  [data-page="skills"],[data-page="mastery"],[data-page="combat"],
  [data-page="equipment"],[data-page="bank"],[data-page="shop"],
  [data-page="achievements"],[data-page="collections"],[data-page="settings"],
  [data-page="stats"],[data-page="leaderboard"],[data-page="activities"]
) {
  color: var(--premium-text) !important;
  background: var(--premium-page-bg) !important;
}

/* COMMON PAGE SECTIONS / WRAPPERS */
body.premium-everywhere :where(
  .page-section,.section,.section-block,.content-section,.content-group,
  .skill-section,.mastery-section,.combat-section,.equipment-section,
  .bank-section,.shop-section,.achievement-section,.collection-section,
  .settings-section,.stats-section,.leaderboard-section
) {
  background: var(--premium-section-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* MASTERY / MILESTONES - specifically matches screenshot */
body.premium-everywhere :where(
  .milestones,.milestone-section,.milestone-panel,.milestone-grid,
  .milestone-card,.skill-milestone,.skill-milestones,
  .mastery,.mastery-section,.mastery-panel,.mastery-list,.mastery-grid,
  .mastery-card,.mastery-row,.mastery-item,.mastery-activity,
  .activity-mastery,.activity-mastery-row,.activity-mastery-card
) {
  color: var(--premium-text) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.005)),
    var(--premium-card-bg) !important;
  border-color: var(--premium-border-blue) !important;
}

/* Large green-looking strips in mastery page */
body.premium-everywhere :where(
  .mastery-row,.mastery-item,.mastery-activity,
  .activity-mastery-row,.activity-mastery-card
) {
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

/* Milestone cards */
body.premium-everywhere :where(
  .milestone-card,.skill-milestone
) {
  border: 1px solid rgba(239,178,39,.28) !important;
  background:
    linear-gradient(180deg,rgba(239,178,39,.035),rgba(255,255,255,.004)),
    #08121b !important;
  border-radius: 11px !important;
}

/* Mastery progress bars */
body.premium-everywhere :where(
  .mastery-progress,.mastery-bar,.mastery-progress-bar,
  .activity-mastery-progress,.activity-progress
) {
  background: #08121b !important;
  border-color: rgba(124,153,188,.08) !important;
}
body.premium-everywhere :where(
  .mastery-progress span,.mastery-bar span,.mastery-progress-bar span,
  .activity-mastery-progress span,.activity-progress span
) {
  background: linear-gradient(90deg,#5f8dff,#efb227) !important;
}

/* SKILL / ACTIVITY ROWS */
body.premium-everywhere :where(
  .skill-row,.skill-item,.skill-entry,.activity-row,.activity-item,
  .activity-entry,.resource-row,.resource-item
) {
  color: var(--premium-text) !important;
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
}

/* COMBAT */
body.premium-everywhere :where(
  .combat-layout,.combat-main,.combat-sidebar,.combat-panel,.combat-card,
  .enemy-list,.enemy-row,.enemy-card,.monster-row,.monster-card,
  .combat-loadout,.combat-stats,.combat-actions
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* EQUIPMENT */
body.premium-everywhere :where(
  .equipment-layout,.equipment-panel,.equipment-grid,.equipment-list,
  .gear-grid,.gear-list,.loadout-panel,.equipment-stats,.gear-stats
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* BANK / INVENTORY */
body.premium-everywhere :where(
  .bank-layout,.bank-panel,.bank-grid,.bank-list,.bank-category,
  .bank-details,.inventory-panel,.inventory-grid,.inventory-list
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* SHOP */
body.premium-everywhere :where(
  .shop-layout,.shop-panel,.shop-grid,.shop-list,.shop-category,.shop-item
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* ACHIEVEMENTS */
body.premium-everywhere :where(
  .achievements-layout,.achievements-panel,.achievement-grid,.achievement-list,
  .achievement-category,.achievement-row,.achievement-item,.achievement-card
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* COLLECTIONS */
body.premium-everywhere :where(
  .collections-layout,.collections-panel,.collection-grid,.collection-list,
  .collection-category,.collection-row,.collection-item,.collection-card,
  .collection-log
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* SETTINGS / STATS / LEADERBOARD / OTHER utility pages */
body.premium-everywhere :where(
  .settings-layout,.settings-panel,.settings-group,.settings-card,
  .stats-layout,.stats-panel,.stats-grid,.stats-card,
  .leaderboard-layout,.leaderboard-panel,.leaderboard-list,.leaderboard-row,
  .offline-panel,.offline-card,.news-panel,.news-card
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* ALL LIST-LIKE ROWS - kills broad old green strips */
body.premium-everywhere :where(
  .list-row,.list-item,.data-row,.data-item,.entry-row,.entry-item,
  .result-row,.result-item,.option-row,.option-item
) {
  background: var(--premium-card-bg) !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* ALL headers/toolbars */
body.premium-everywhere :where(
  .page-header,.section-header,.panel-header,.card-header,
  .toolbar,.page-toolbar,.filter-bar,.controls-bar,.summary-bar
) {
  background: #08121b !important;
  border-color: var(--premium-border-soft) !important;
  color: var(--premium-text) !important;
}

/* selected/current states */
body.premium-everywhere :where(
  .selected,.active,.current,.completed,.unlocked,.ready
) {
  border-color: rgba(239,178,39,.36) !important;
}

/* no dark moss / forest tinted surfaces in generic blocks */
body.premium-everywhere :where(
  div,section,article,aside
)[style*="background"] {
  /* inline styles still lose to the important page component rules above */
}

/* Text accents */
body.premium-everywhere :where(
  .reward,.bonus,.milestone-label,.mastery-label,.progress-label,
  .level-label,.completion-label
) {
  color: var(--premium-gold) !important;
}

/* Everything neutral looks blue/navy, not brown/moss */
body.premium-everywhere :where(
  .muted,.secondary,.hint,.description,.subtitle
) {
  color: var(--premium-muted) !important;
}




/* ================================================================
   APPROVED REFERENCE THEME — EXACT NAVY / GOLD SYSTEM
   ================================================================ */

body.premium-everywhere,
body.exact-reference-ui,
body.premium-ui {
  --premium-page: #08121b;
  --premium-sidebar: #08121b;
  --premium-panel: #08121b;
  --premium-card: #0d1721;
  --premium-card-2: #0d1721;
  --premium-hover: #101b26;
  --premium-border: #13202c;
  --premium-border-soft: #101b26;
  --premium-gold: #efb227;
  --premium-gold-hi: #ffd461;
  --premium-text: #f4efe7;
  --premium-muted: #98a6b4;
  --premium-blue: #5f8dff;

  color: var(--premium-text) !important;
  background: var(--premium-page) !important;
}

/* Global page canvas */
body.premium-everywhere .app-shell,
body.premium-everywhere .main-content,
body.premium-everywhere main,
body.premium-everywhere .content,
body.premium-everywhere .page,
body.premium-everywhere .view {
  background: var(--premium-page) !important;
}

/* Sidebar */
body.premium-everywhere .sidebar {
  background: var(--premium-sidebar) !important;
  border-right: 1px solid rgba(239,178,39,.17) !important;
}

/* Global panels and all page-specific panels */
body.premium-everywhere :where(
  .card,.panel,.box,.tile,.section,.section-block,.page-section,
  .section-card,.content-card,.summary-card,.stat-card,
  .home-card,.dashboard-card,.overview-card,
  .skill-card,.skill-row,.skill-item,.activity-card,.activity-row,.activity-item,
  .mastery-card,.mastery-row,.mastery-item,.mastery-section,.milestone-card,.milestone-section,
  .combat-panel,.combat-card,.combat-enemy-card,.enemy-card,.enemy-row,.monster-card,.monster-row,
  .equipment-panel,.equipment-card,.equipment-slot,.gear-panel,.loadout-panel,
  .bank-panel,.bank-card,.bank-item,.bank-row,.inventory-item,.item-card,
  .shop-panel,.shop-card,.shop-item,.shop-row,
  .achievement-panel,.achievement-card,.achievement-row,
  .collection-panel,.collection-card,.collection-row,.collection-item,.collection-log,
  .settings-panel,.settings-card,.settings-group,
  .leaderboard-panel,.leaderboard-card,.leaderboard-row,
  .stats-panel,.stats-card,.news-panel,.offline-panel,
  .toolbar,.page-toolbar,.filter-bar,.controls-bar,
  .modal,.dialog,.popover,.tooltip
) {
  color: var(--premium-text) !important;
  background: var(--premium-panel) !important;
  border-color: var(--premium-border-soft) !important;
}

/* Nested interactive cards */
body.premium-everywhere :where(
  .skill-card,.activity-card,.mastery-card,.mastery-row,.combat-enemy-card,
  .enemy-card,.monster-card,.equipment-slot,.bank-item,.inventory-item,
  .item-card,.shop-item,.achievement-card,.collection-card,.collection-item
) {
  background: var(--premium-card) !important;
  border: 1px solid var(--premium-border-soft) !important;
}

/* Selected / active */
body.premium-everywhere :where(
  .selected,.active-card,.current,.is-active,
  .skill-card.active,.activity-card.active,.mastery-card.active,
  .combat-enemy-card.active,.enemy-card.active,.monster-card.active,
  .equipment-slot.selected,.bank-item.selected,.collection-card.selected
) {
  background: linear-gradient(180deg,rgba(239,178,39,.055),rgba(255,255,255,.004)),var(--premium-card) !important;
  border-color: rgba(239,178,39,.46) !important;
}

/* Mastery page: screenshot-specific old moss surfaces */
body.premium-everywhere :where(
  .milestones,.milestone-grid,.skill-milestones,.activity-mastery,
  .mastery-list,.mastery-grid,.mastery-overview,.mastery-summary
) {
  background: var(--premium-page) !important;
}

body.premium-everywhere :where(
  .milestone-card,.skill-milestone
) {
  background: var(--premium-card) !important;
  border-color: rgba(239,178,39,.34) !important;
}

body.premium-everywhere :where(
  .mastery-row,.mastery-item,.mastery-activity,.activity-mastery-row,.activity-mastery-card
) {
  background: var(--premium-card) !important;
  border-color: var(--premium-border-soft) !important;
}

/* Combat page exact surface levels */
body.premium-everywhere :where(
  .combat-layout,.combat-main,.combat-sidebar,.combat-section,
  .combat-skills,.combat-styles,.combat-roster,.combat-food,.combat-session
) {
  background: var(--premium-page) !important;
}

body.premium-everywhere :where(
  .combat-panel,.combat-card,.combat-stats,.combat-loadout,.combat-actions
) {
  background: var(--premium-panel) !important;
}

body.premium-everywhere :where(
  .combat-enemy-card,.enemy-card,.monster-card,.combat-style,.combat-style-button
) {
  background: var(--premium-card) !important;
}

/* Equipment / Collections / Bank / Shop roots */
body.premium-everywhere :where(
  .equipment-layout,.equipment-grid,.equipment-list,
  .collections-layout,.collection-grid,.collection-list,
  .bank-layout,.bank-grid,.bank-list,
  .shop-layout,.shop-grid,.shop-list,
  .achievement-grid,.achievement-list,
  .skills-grid,.activity-grid
) {
  background: var(--premium-page) !important;
}

/* Top overview / account bar */
body.premium-everywhere :where(
  .account-overview,.account-summary,.top-summary,.header-summary,.header-stats
) {
  background: var(--premium-sidebar) !important;
  border-color: var(--premium-border-soft) !important;
}

/* Buttons and controls */
body.premium-everywhere button,
body.premium-everywhere .btn {
  color: var(--premium-text);
  background: var(--premium-card) !important;
  border-color: var(--premium-border-soft) !important;
}

body.premium-everywhere button:hover:not(:disabled),
body.premium-everywhere .btn:hover:not(:disabled) {
  background: var(--premium-hover) !important;
  border-color: rgba(239,178,39,.25) !important;
}

body.premium-everywhere :where(
  .primary,.btn-primary,.action-primary,.start-button,.expedition-action.start,
  .buy-button,.sell-button,.equip-button,.craft-button
) {
  color: #0d1721 !important;
  background: linear-gradient(180deg,var(--premium-gold-hi),#e7a61e) !important;
  border-color: #ffdf7d !important;
}

/* Tabs */
body.premium-everywhere :where(.tabs,.tab-bar,.subtabs) {
  background: var(--premium-sidebar) !important;
  border-color: var(--premium-border-soft) !important;
}
body.premium-everywhere :where(.tab,.tabs button,.tab-bar button,.subtabs button) {
  background: transparent !important;
  color: var(--premium-muted) !important;
}
body.premium-everywhere :where(.tab.active,.tabs button.active,.tab-bar button.active,.subtabs button.active) {
  color: var(--premium-gold) !important;
  background: rgba(239,178,39,.075) !important;
  border-color: rgba(239,178,39,.28) !important;
}

/* Inputs */
body.premium-everywhere :where(input,select,textarea) {
  color: var(--premium-text) !important;
  background: var(--premium-sidebar) !important;
  border-color: var(--premium-border-soft) !important;
}

/* Progress bars: reference gold/blue, never moss */
body.premium-everywhere :where(
  .progress,.progress-bar,.xp-bar,.mastery-bar,.mastery-progress,
  .health-bar,.hp-bar,.collection-progress,.achievement-progress
) {
  background: #08121b !important;
}
body.premium-everywhere :where(
  .progress span,.progress-fill,.progress-bar span,.xp-bar span,
  .mastery-bar span,.mastery-progress span,.health-bar span,.hp-bar span,
  .collection-progress span,.achievement-progress span
) {
  background: linear-gradient(90deg,var(--premium-blue),var(--premium-gold)) !important;
}

/* Sidebar selected */
body.premium-everywhere .sidebar :where(.active,[aria-current="page"]) {
  color: var(--premium-gold) !important;
  background: rgba(239,178,39,.075) !important;
  border-color: rgba(239,178,39,.48) !important;
}

/* Gold headings */
body.premium-everywhere :where(
  .eyebrow,.kicker,.section-label,.overline,.reward,.bonus,.level-label,
  .milestone-label,.mastery-label,.completion-label
) {
  color: var(--premium-gold) !important;
}

/* Muted copy */
body.premium-everywhere :where(.muted,.secondary,.hint,.description,.subtitle) {
  color: var(--premium-muted) !important;
}




/* Expedition attack timers — Premium Navy */
body.premium-everywhere .two-step-timers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.premium-everywhere .two-step-timer-card {
  padding: 10px 11px;
  border: 1px solid #1b2b39;
  border-radius: 10px;
  background: #101b26;
}

body.premium-everywhere .two-step-timer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font-size: .75rem;
  color: #f4efe7;
}

body.premium-everywhere .two-step-timer-label strong {
  color: #efb227;
}

body.premium-everywhere .two-step-timer-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #06111a;
}

body.premium-everywhere .two-step-timer-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#5f8dff,#efb227);
}

body.premium-everywhere .two-step-timer-track.enemy i {
  background: linear-gradient(90deg,#9b6cff,#efb227);
}

@media (max-width: 700px) {
  body.premium-everywhere .two-step-timers {
    grid-template-columns: 1fr;
  }
}




/* Expedition timers — compact + smooth Premium UI */
body.premium-everywhere .expedition-attack-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 2px;
}

body.premium-everywhere .expedition-attack-line {
  min-width: 0;
}

body.premium-everywhere .expedition-attack-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #98a6b4;
  font-size: .68rem;
  line-height: 1;
}

body.premium-everywhere .expedition-attack-line-head b {
  color: #efb227;
  font-size: .66rem;
  font-weight: 800;
  min-width: 30px;
  text-align: right;
}

body.premium-everywhere .expedition-attack-line-track {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #06111a;
  border: 1px solid rgba(124,153,188,.08);
}

body.premium-everywhere .expedition-attack-line-track i {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  border-radius: inherit;
  background: linear-gradient(90deg,#5f8dff,#efb227);
}

body.premium-everywhere .expedition-attack-line.enemy .expedition-attack-line-track i {
  background: linear-gradient(90deg,#8b72ff,#d99527);
}

@media (max-width: 700px) {
  body.premium-everywhere .expedition-attack-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}



/* Independent Expedition attack timers */
body.premium-everywhere .expedition-attack-line-track i {
  width: 100% !important;
  transform-origin: left center;
}

body.premium-everywhere .expedition-attack-line-head em {
  margin-left: 4px;
  color: #6f8091;
  font-style: normal;
  font-size: .61rem;
  font-weight: 650;
}



/* ============================================================
   EXPEDITIONS — MOBILE POLISH
   ============================================================ */

@media (max-width: 760px) {
  /* General expedition page spacing */
  body.premium-everywhere #expeditionsPage,
  body.premium-everywhere [data-page="expeditions"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.premium-everywhere #expeditionRegionGrid,
  body.premium-everywhere #expeditionDetailPanel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* World map */
  body.premium-everywhere .two-step-map {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  body.premium-everywhere .two-step-map-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  body.premium-everywhere .two-step-map-head h2 {
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
  }

  body.premium-everywhere .two-step-map-head p {
    font-size: .8rem !important;
    line-height: 1.35 !important;
  }

  body.premium-everywhere .two-step-map-level {
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  body.premium-everywhere .two-step-map-level small,
  body.premium-everywhere .two-step-map-level strong {
    display: inline !important;
  }

  body.premium-everywhere .two-step-map-level strong {
    margin: 0 !important;
    font-size: 1.15rem !important;
  }

  body.premium-everywhere .two-step-map-track {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.premium-everywhere .two-step-region-card {
    min-height: 112px !important;
    display: grid !important;
    grid-template-columns: 82px minmax(0,1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    padding: 10px !important;
    text-align: left !important;
    border-radius: 13px !important;
  }

  body.premium-everywhere .two-step-region-art {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 82px !important;
    height: 82px !important;
    margin: 0 !important;
    border-radius: 11px !important;
  }

  body.premium-everywhere .two-step-region-icon {
    display: none !important;
  }

  body.premium-everywhere .two-step-region-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  body.premium-everywhere .two-step-region-copy strong {
    font-size: .96rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.premium-everywhere .two-step-region-copy small {
    margin-top: 4px !important;
    font-size: .72rem !important;
  }

  body.premium-everywhere .two-step-region-key {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
  }

  body.premium-everywhere .two-step-region-state {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: .61rem !important;
  }

  body.premium-everywhere .two-step-map-footer {
    display: none !important;
  }

  /* Open expedition header */
  body.premium-everywhere .two-step-expedition {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  body.premium-everywhere .two-step-expedition-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px 10px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }

  body.premium-everywhere .two-step-expedition-title {
    min-width: 0 !important;
  }

  body.premium-everywhere .two-step-expedition-title > span {
    font-size: 1.45rem !important;
  }

  body.premium-everywhere .two-step-expedition-title h2 {
    font-size: 1.18rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.premium-everywhere .two-step-expedition-key {
    padding: 8px 10px !important;
    min-width: 0 !important;
  }

  /* Player stat strip */
  body.premium-everywhere .two-step-player-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  body.premium-everywhere .two-step-player-strip span {
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: .68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Current stage */
  body.premium-everywhere .two-step-stage-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 13px !important;
  }

  body.premium-everywhere .two-step-stage-main {
    gap: 9px !important;
  }

  body.premium-everywhere .two-step-stage-icon {
    font-size: 1.9rem !important;
    flex: 0 0 auto !important;
  }

  body.premium-everywhere .two-step-stage-main h3 {
    font-size: 1.02rem !important;
  }

  body.premium-everywhere .two-step-stage-main p {
    font-size: .7rem !important;
    line-height: 1.3 !important;
  }

  body.premium-everywhere .two-step-stage-progress {
    text-align: left !important;
    padding: 8px 9px !important;
    border: 1px solid rgba(124,153,188,.08) !important;
    border-radius: 9px !important;
    background: #0a141e !important;
  }

  body.premium-everywhere .two-step-stage-progress strong {
    font-size: .75rem !important;
  }

  body.premium-everywhere .two-step-stage-progress span {
    margin-top: 2px !important;
    font-size: .65rem !important;
  }

  body.premium-everywhere .two-step-stage-hp {
    width: 100% !important;
  }

  body.premium-everywhere .two-step-stage-hp > div:first-child {
    font-size: .68rem !important;
  }

  /* Smooth independent timers */
  body.premium-everywhere .expedition-attack-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.premium-everywhere .expedition-attack-line {
    padding: 8px 9px !important;
    border: 1px solid rgba(124,153,188,.08) !important;
    border-radius: 9px !important;
    background: #0a141e !important;
  }

  body.premium-everywhere .expedition-attack-line-head {
    margin-bottom: 6px !important;
    font-size: .66rem !important;
  }

  body.premium-everywhere .expedition-attack-line-head em {
    font-size: .58rem !important;
  }

  body.premium-everywhere .expedition-attack-line-track {
    height: 6px !important;
  }

  /* Loot */
  body.premium-everywhere .exp-stage-loot {
    padding-top: 0 !important;
  }

  body.premium-everywhere .exp-stage-loot > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  body.premium-everywhere .exp-stage-loot span {
    width: 100% !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    font-size: .68rem !important;
  }

  /* Actions */
  body.premium-everywhere .two-step-stage-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.premium-everywhere .two-step-stage-actions button,
  body.premium-everywhere .expedition-preview-button,
  body.premium-everywhere .expedition-action {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  body.premium-everywhere .two-step-region-card {
    grid-template-columns: 68px minmax(0,1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  body.premium-everywhere .two-step-region-art {
    width: 68px !important;
    height: 68px !important;
  }

  body.premium-everywhere .two-step-region-key {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  body.premium-everywhere .two-step-region-state {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body.premium-everywhere .two-step-player-strip {
    grid-template-columns: 1fr !important;
  }
}


/* Expedition Loot Info — compact region drop table */
.two-step-expedition-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.expedition-loot-info-button,
.expedition-loot-info-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239,178,39,.30);
  color: #f4efe7;
  background: rgba(239,178,39,.07);
  cursor: pointer;
}

.expedition-loot-info-button {
  min-height: 34px;
  width: auto;
  padding: 6px 10px;
  gap: 5px;
  border-radius: 9px;
  font-size: .75rem;
  font-weight: 850;
}

.expedition-loot-info-button:hover,
.expedition-loot-info-button[aria-expanded="true"] {
  border-color: rgba(239,178,39,.62);
  background: rgba(239,178,39,.14);
}

.expedition-loot-info-button:focus-visible,
.expedition-loot-info-close:focus-visible {
  outline: 2px solid #efb227;
  outline-offset: 2px;
}

.expedition-loot-info-panel {
  max-height: 430px;
  margin: -8px 0 14px;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid rgba(239,178,39,.22);
  border-radius: 13px;
  background: linear-gradient(180deg,rgba(239,178,39,.045),rgba(255,255,255,.008)),#08121b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.expedition-loot-info-head {
  position: sticky;
  top: -14px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: -2px -2px 12px;
  padding: 2px 2px 10px;
  background: #08121b;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.expedition-loot-info-head h3 {
  margin: 2px 0 0;
  font-size: 1rem;
}

.expedition-loot-info-head p {
  margin: 3px 0 0;
  color: rgba(244,239,231,.66);
  font-size: .72rem;
}

.expedition-loot-info-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.15rem;
  line-height: 1;
}

.expedition-loot-info-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}

.expedition-loot-info-encounter {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(157,177,199,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}

.expedition-loot-info-encounter.boss {
  grid-column: 1 / -1;
  border-color: rgba(239,178,39,.26);
}

.expedition-loot-info-encounter > header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.expedition-loot-info-enemy-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.expedition-loot-info-encounter > header small,
.expedition-loot-info-encounter > header strong {
  display: block;
}

.expedition-loot-info-encounter > header small {
  color: #efb227;
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.expedition-loot-info-encounter > header strong {
  margin-top: 1px;
  font-size: .82rem;
}

.expedition-loot-info-drops {
  display: grid;
  gap: 5px;
}

.expedition-loot-info-drop {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(157,177,199,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  font-size: .68rem;
}

.expedition-loot-info-drop > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expedition-loot-info-drop strong {
  color: #efb227;
  font-size: .66rem;
}

.expedition-loot-info-drop em {
  padding: 2px 5px;
  border-radius: 999px;
  color: #08121b;
  background: #efb227;
  font-size: .52rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.expedition-loot-info-drop.unique {
  border-color: rgba(239,178,39,.27);
  background: rgba(239,178,39,.055);
}

/* Expedition uniques — premium orange identity across loot and Bank UI */
.expedition-loot-info-drop.unique .expedition-loot-item-name,
.expedition-loot-chip.unique .expedition-loot-item-name,
.exp-stage-loot .expedition-unique,
.combat-session-summary-row.expedition-unique .combat-session-summary-copy strong,
.combat-last-loot .expedition-unique,
.gain-toast.expedition-unique .gain-toast-copy strong,
.bank-selected-header-rs.expedition-unique h3,
.bank-selected-header-rs.expedition-unique .eyebrow {
  color: #ff9f43;
  text-shadow: 0 0 12px rgba(255,159,67,.18);
}

.expedition-loot-chip.unique {
  color: inherit;
  border-color: rgba(255,159,67,.62);
  background: rgba(255,159,67,.07);
}

.exp-stage-loot .expedition-unique {
  border-color: rgba(255,159,67,.48);
  background: rgba(255,159,67,.075);
}

.gain-toast.expedition-unique,
.combat-session-summary-row.expedition-unique {
  border-color: rgba(255,159,67,.48);
  background: linear-gradient(135deg,rgba(255,159,67,.10),rgba(8,18,27,.96));
}

.bank-slot-rs.expedition-unique {
  border-color: rgba(255,159,67,.72);
  background: radial-gradient(circle at 50% 42%,rgba(255,159,67,.13),rgba(8,18,27,.98) 68%);
  box-shadow: inset 0 0 0 1px rgba(255,159,67,.12),0 0 12px rgba(255,159,67,.08);
}

.bank-slot-rs.expedition-unique:hover,
.bank-slot-rs.expedition-unique.selected {
  border-color: #ff9f43;
  background: radial-gradient(circle at 50% 42%,rgba(255,159,67,.20),rgba(8,18,27,.96) 70%);
  box-shadow: inset 0 0 0 1px rgba(255,159,67,.28),0 0 16px rgba(255,159,67,.16);
}

.bank-slot-rs.expedition-unique .bank-slot-count-rs {
  color: #ffb568;
}

.bank-slot-rs.expedition-unique::after {
  content: '◆';
  position: absolute;
  top: 3px;
  right: 4px;
  color: #ff9f43;
  font-size: 7px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255,159,67,.65);
}

.expedition-loot-info-first {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(239,178,39,.16);
  font-size: .66rem;
}

.expedition-loot-info-first small {
  color: #efb227;
  font-weight: 850;
  text-transform: uppercase;
}

body.premium-everywhere .expedition-loot-info-button,
body.exact-reference-ui .expedition-loot-info-button,
body.premium-ui .expedition-loot-info-button {
  width: auto !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  color: #f4efe7 !important;
  background: rgba(239,178,39,.07) !important;
  border-color: rgba(239,178,39,.30) !important;
}

body.premium-everywhere .expedition-loot-info-button:hover,
body.premium-everywhere .expedition-loot-info-button[aria-expanded="true"] {
  background: rgba(239,178,39,.14) !important;
  border-color: rgba(239,178,39,.62) !important;
}

@media (max-width: 700px) {
  .two-step-expedition-head {
    align-items: flex-start;
  }

  .two-step-expedition-tools {
    flex-direction: column-reverse;
    align-items: flex-end;
  }

  .expedition-loot-info-grid {
    grid-template-columns: 1fr;
  }

  .expedition-loot-info-encounter.boss {
    grid-column: auto;
  }

  .expedition-loot-info-panel {
    max-height: 380px;
    padding: 12px;
  }

  .expedition-loot-info-head {
    top: -12px;
  }
}

/* Premium item artwork — shared rendering for custom JourneyDen icons */
.item-icon-art {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  vertical-align: -.28em;
  pointer-events: none;
  user-select: none;
}

.expedition-loot-item-name {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

.expedition-loot-icon-art {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.32));
}

.exp-stage-loot > div > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.expedition-stage-icon-art {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.32));
}

.bank-slot-icon-rs .bank-slot-icon-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.4));
}

.bank-selected-icon-rs .bank-detail-icon-art {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.42));
}

.equipment-clean-slot-icon .equipment-item-icon-art {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.42));
}

.achievement-icon .collection-item-icon-art {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.42));
}

.gain-toast-icon .gain-toast-icon-art,
.combat-session-summary-icon .combat-loot-icon-art {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.combat-last-loot-icon-art {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.offline-reward-icon .offline-item-icon-art,
.sell-confirm-icon-art {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .expedition-loot-icon-art {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .achievement-icon .collection-item-icon-art {
    width: 42px;
    height: 42px;
  }
}

.large-icon .activity-item-icon-art {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

.skill-unlock-row .skill-activity-item-icon-art {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

.mastery-activity-icon .mastery-item-icon-art {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.combat-food-icon-art,
.expedition-food-icon-art {
  width: 30px;
  height: 30px;
  object-fit: contain;
  vertical-align: middle;
}

/* ===== Premium Skills & Interface Icons ===== */
.interface-icon-art {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  vertical-align: -.28em;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.32));
}

.nav-interface-icon-art,
.mobile-interface-icon-art,
.mobile-more-interface-icon-art {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.mobile-interface-icon-art { width: 25px; height: 25px; }

.stat-chip {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.stat-interface-icon-art {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.progress-status,
.activity-search > span,
.bank-filter-search > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.progress-interface-icon-art { width: 20px; height: 20px; }
.button-interface-icon-art { width: 19px; height: 19px; vertical-align: middle; }
.label-interface-icon-art { width: 18px; height: 18px; vertical-align: middle; }

.activity-filter-toggle,
.bank-filter-toggle,
#cloudSyncButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.skill-tab-icon .skill-tab-icon-art {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.skill-card h3,
#skillDetailTitle,
.shop-heading-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.skill-card-heading-icon,
.skill-detail-title-icon,
.shop-heading-icon {
  display: inline-grid;
  place-items: center;
}

.skill-card-icon-art { width: 34px; height: 34px; }
.skill-detail-icon-art { width: 40px; height: 40px; }
.shop-interface-icon-art { width: 38px; height: 38px; }

.mastery-skill-tabs .mastery-tab-icon-art,
.leaderboard-tabs .leaderboard-tab-icon-art {
  width: 26px;
  height: 26px;
  vertical-align: middle;
}

.mastery-activity-icon .mastery-skill-icon-art,
.skill-overview-icon .combat-skill-icon-art,
.combat-style-icon .combat-style-icon-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: middle;
}

.achievement-icon .collection-interface-icon-art {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.achievement-unlock-icon .achievement-toast-icon-art {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.offline-reward-icon .offline-skill-icon-art,
.offline-reward-icon .offline-interface-icon-art {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.offline-modal-card { text-align: center; }
.offline-modal-card .offline-rewards { text-align: left; }
.offline-header-interface-icon-art {
  width: 76px;
  height: 76px;
  margin: 0 auto 5px;
  vertical-align: middle;
}

.settings-card { position: relative; }
.settings-card > .eyebrow,
.settings-card > h3 { padding-right: 54px; }
.settings-card-interface-icon-art {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 48px;
  height: 48px;
  vertical-align: middle;
}

.leaderboard-avatar .leaderboard-profile-icon-art {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.expedition-lock-icon-art {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

@media (max-width: 700px) {
  .nav-interface-icon-art { width: 20px; height: 20px; }
  .mobile-interface-icon-art { width: 24px; height: 24px; }
  .achievement-icon .collection-interface-icon-art { width: 42px; height: 42px; }
  .settings-card-interface-icon-art { width: 42px; height: 42px; }
}

/* ===== Premium Enemy Portraits ===== */
.enemy-icon-art {
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.42));
}

.combat-enemy-icon {
  overflow:hidden;
}

.combat-enemy-icon-art,
.expedition-loot-enemy-art {
  width:100%;
  height:100%;
}

.combat-fighter-enemy-art {
  width:58px;
  height:58px;
}

.expedition-stage-enemy-art {
  width:64px;
  height:64px;
}

@media (max-width:620px) {
  .combat-fighter-enemy-art {
    width:50px;
    height:50px;
  }

  .expedition-stage-enemy-art {
    width:50px;
    height:50px;
  }
}

/* ===== Farming & Apothecary Phase 2: timed potion effects ===== */
.active-potion-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 24px 0;
  padding: 11px 14px;
  border: 1px solid rgba(229, 169, 76, .42);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(60, 38, 19, .92), rgba(24, 32, 43, .96));
  box-shadow: 0 10px 28px rgba(6, 10, 16, .28), inset 0 1px rgba(255, 224, 164, .08);
}

.active-potion-bar[hidden] { display: none !important; }

.active-potion-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid rgba(241, 185, 86, .48);
  border-radius: 11px;
  background: rgba(255, 190, 82, .09);
  font-size: 28px;
}

.active-potion-icon-art { width: 38px; height: 38px; object-fit: contain; }
.active-potion-copy { min-width: 0; flex: 1; }
.active-potion-copy small,
.active-potion-copy strong,
.active-potion-copy span { display: block; }
.active-potion-copy small { color: #dcae67; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.active-potion-copy strong { color: #fff0d2; margin: 1px 0 2px; }
.active-potion-copy span { color: var(--muted); font-size: 11px; }

.active-potion-timer { width: min(190px, 25vw); text-align: right; }
.active-potion-timer > strong { color: #ffd792; font-variant-numeric: tabular-nums; }
.active-potion-track {
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
}
.active-potion-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d68b35, #ffd47d);
  transition: width .25s linear;
}

.bank-selected-potion-rs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 12px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(219, 151, 55, .35);
  border-radius: 10px;
  background: rgba(205, 132, 39, .07);
}
.bank-selected-potion-rs small,
.bank-selected-potion-rs strong { display: block; }
.bank-selected-potion-rs small { color: var(--muted); }
.bank-selected-potion-rs > button { grid-column: 1 / -1; width: 100%; }
.bank-selected-potion-rs .bank-upgrade-note-rs { grid-column: 1 / -1; }
.bank-potion-active-pill {
  padding: 5px 9px;
  border: 1px solid rgba(244, 188, 90, .46);
  border-radius: 999px;
  color: #ffd996;
  background: rgba(222, 146, 45, .13);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.bank-slot-rs.potion-active {
  outline: 2px solid rgba(240, 174, 68, .78);
  outline-offset: -2px;
  box-shadow: 0 0 18px rgba(225, 145, 46, .24);
}

@media (max-width: 700px) {
  .active-potion-bar { margin: 8px 10px 0; padding: 9px 10px; gap: 9px; }
  .active-potion-icon { width: 40px; height: 40px; flex-basis: 40px; }
  .active-potion-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .active-potion-timer { width: 78px; }
}

/* ===== v2.24 Farming Contracts & Potion Presets ===== */
.farming-contract-card {
  display: grid;
  grid-template-columns: minmax(230px, 1.25fr) minmax(180px, .8fr);
  gap: 14px 18px;
  padding: 16px;
  border: 1px solid rgba(214, 171, 80, .26);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(55, 43, 23, .82), rgba(17, 34, 31, .92));
  box-shadow: inset 0 1px rgba(255, 239, 190, .05);
}
.farming-contract-card.complete { border-color: rgba(112, 201, 102, .62); box-shadow: 0 0 22px rgba(79, 157, 69, .12), inset 0 1px rgba(255,255,255,.06); }
.farming-contract-card.milestone { background: linear-gradient(135deg, rgba(91, 61, 19, .9), rgba(29, 38, 29, .94)); }
.farming-contract-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.farming-contract-icon { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border: 1px solid rgba(232, 188, 93, .35); border-radius: 13px; background: rgba(9, 23, 21, .7); font-size: 28px; }
.farming-contract-crop-icon { width: 38px; height: 38px; object-fit: contain; }
.farming-contract-main h3 { margin: 3px 0 4px; color: #f2dfb4; font: 700 19px Georgia, serif; }
.farming-contract-main p { margin: 0; color: #a8b5ae; font-size: 11px; }
.farming-contract-progress { align-self: center; }
.farming-contract-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: #aebbb3; font-size: 11px; }
.farming-contract-progress strong { color: #f0d47e; font-variant-numeric: tabular-nums; }
.farming-contract-rewards { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid rgba(207, 180, 114, .14); }
.farming-contract-rewards > small { display: block; margin-bottom: 7px; color: #c4a95f; letter-spacing: .08em; text-transform: uppercase; }
.farming-contract-rewards > div { display: flex; flex-wrap: wrap; gap: 7px; }
.farming-contract-rewards span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(177, 192, 181, .13); border-radius: 8px; background: rgba(8, 21, 20, .45); color: #d9e1da; font-size: 10px; }
.farming-contract-reward-icon { width: 19px; height: 19px; object-fit: contain; }
.farming-contract-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.farming-contract-actions button { min-width: 155px; }

.potion-preset-panel { display: grid; gap: 12px; margin: 0 0 14px; }
.potion-preset-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border: 1px solid rgba(178, 132, 226, .22); border-radius: 14px; background: linear-gradient(135deg, rgba(45, 27, 62, .78), rgba(19, 34, 35, .92)); }
.potion-preset-hero h2 { margin: 2px 0 4px; color: #f0e3c7; font: 700 21px Georgia, serif; }
.potion-preset-hero p { max-width: 760px; margin: 0; color: #aab5b1; font-size: 11px; line-height: 1.45; }
.potion-auto-toggle { display: grid; gap: 2px; min-width: 160px; padding: 9px 13px; text-align: left; }
.potion-auto-toggle span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.potion-auto-toggle b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.potion-auto-toggle.enabled { background: linear-gradient(135deg, #4d8f52, #85bd65); }
.potion-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.potion-preset-card { display: grid; gap: 10px; min-width: 0; padding: 13px; border: 1px solid rgba(165, 145, 194, .17); border-radius: 12px; background: rgba(20, 31, 35, .84); }
.potion-preset-card.active { border-color: rgba(176, 128, 226, .58); box-shadow: 0 0 18px rgba(135, 82, 186, .12); }
.potion-preset-heading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.potion-preset-heading > div { min-width: 0; }
.potion-preset-heading small, .potion-preset-heading h3 { display: block; }
.potion-preset-heading small { color: #9ea9a6; font-size: 9px; text-transform: uppercase; }
.potion-preset-heading h3 { margin: 1px 0 0; color: #eadfc7; font: 700 16px Georgia, serif; }
.potion-preset-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: rgba(87, 54, 112, .32); font-size: 21px; }
.potion-preset-icon-art { width: 28px; height: 28px; object-fit: contain; }
.potion-auto-pill { margin-left: auto; padding: 4px 7px; border-radius: 999px; background: rgba(88, 163, 89, .22); color: #9bde91; font-size: 9px; white-space: nowrap; }
.potion-preset-select { display: grid; gap: 5px; color: #a9b4b0; font-size: 10px; }
.potion-preset-select select { width: 100%; min-width: 0; }
.potion-preset-effect { display: grid; gap: 3px; min-height: 46px; }
.potion-preset-effect strong { color: #d9cce4; font-size: 10px; line-height: 1.4; }
.potion-preset-effect span { color: #8fa09a; font-size: 10px; }
.potion-preset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.potion-preset-actions button { min-width: 0; padding-inline: 8px; }

@media (max-width: 900px) {
  .potion-preset-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .farming-contract-card { grid-template-columns: 1fr; padding: 13px; }
  .farming-contract-progress, .farming-contract-rewards, .farming-contract-actions { grid-column: 1; }
  .farming-contract-actions { display: grid; grid-template-columns: 1fr; }
  .farming-contract-actions button { width: 100%; min-width: 0; }
  .potion-preset-hero { display: grid; padding: 13px; }
  .potion-auto-toggle { width: 100%; min-width: 0; }
}

/* ===== v2.28 Balance Phase 2: Expedition entry guidance ===== */
.two-step-region-copy .two-step-region-levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.two-step-region-levels span,
.expedition-entry-levels span {
  display: inline-flex;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid rgba(240, 182, 47, .23);
  border-radius: 999px;
  background: rgba(240, 182, 47, .07);
  color: #e8c66f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.expedition-entry-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0 0;
}

.expedition-entry-warning {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid rgba(240, 153, 58, .46);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(101, 54, 18, .32), rgba(29, 30, 31, .82));
}

.expedition-entry-warning strong { color: #ffc56e; }
.expedition-entry-warning span { color: #c9b99e; font-size: 11px; line-height: 1.45; }

@media (max-width: 850px) {
  .two-step-region-copy .two-step-region-levels { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .expedition-entry-levels span { white-space: normal; }
}


/* v2.31.0 - required Google authentication gate */
.auth-gate {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 24px; background: rgba(10, 13, 18, .96); backdrop-filter: blur(10px);
}
.auth-gate[hidden] { display: none !important; }
.auth-gate-card {
  width: min(460px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; background: #171c24; box-shadow: 0 24px 80px rgba(0,0,0,.45); text-align: center;
}
.auth-gate-logo { width: 86px; height: 86px; object-fit: contain; margin: 0 auto 14px; display: block; }
.auth-gate-card h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 5vw, 2.4rem); }
.auth-gate-card p { margin: 0 auto 22px; max-width: 390px; line-height: 1.55; opacity: .82; }
.auth-gate-signin { width: 100%; min-height: 48px; }
.auth-gate-status { display: block; margin-top: 14px; font-size: .9rem; opacity: .72; }
.auth-locked .app-shell, .auth-locked #mobileTopNavigation { pointer-events: none; user-select: none; }
@media (max-width: 600px) { .auth-gate { padding: 16px; } .auth-gate-card { padding: 26px 20px; } }


/* Offline Mastery foundation */
.offline-mastery-description {
  margin: 0;
  line-height: 1.65;
}

.offline-mastery-coming-soon {
  margin: 12px 0 0;
  opacity: 0.72;
}

/* v2.34.0 Guide */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.guide-index,
.guide-article {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 17, 27, .72);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

.guide-index {
  padding: 16px;
  position: sticky;
  top: 16px;
}

.guide-index-heading h3,
.guide-hero h3,
.guide-section h4 {
  margin: 3px 0 0;
}

.guide-index-item {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  color: inherit;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.guide-index-item.active {
  border-color: rgba(225, 170, 78, .45);
  background: rgba(225, 170, 78, .09);
}

.guide-index-item img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.guide-index-item span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.guide-index-item small {
  opacity: .66;
  line-height: 1.25;
}

.guide-article {
  padding: 22px;
}

.guide-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.guide-hero-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.guide-hero h3 {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.guide-hero p,
.guide-section p,
.guide-note p {
  margin: 7px 0 0;
  line-height: 1.62;
  color: var(--muted, #aeb7c5);
}

.guide-callout {
  margin: 18px 0;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: center;
  border: 1px solid rgba(225, 170, 78, .28);
  border-radius: 14px;
  background: rgba(225, 170, 78, .075);
}

.guide-callout span,
.guide-callout small {
  color: var(--muted, #aeb7c5);
}

.guide-callout strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-size: 1.65rem;
  color: #e8b55f;
}

.guide-callout small {
  grid-column: 1;
}

.guide-section {
  padding: 17px 0;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.guide-section h4 {
  font-size: 1rem;
}

.guide-note {
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}

@media (max-width: 820px) {
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-index {
    position: static;
  }

  .guide-article {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .guide-hero {
    align-items: flex-start;
  }

  .guide-hero-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }

  .guide-callout {
    grid-template-columns: 1fr;
  }

  .guide-callout strong,
  .guide-callout small {
    grid-column: 1;
    grid-row: auto;
  }
}

/* v2.35.0 Offline Mastery rewards */
.offline-mastery-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offline-mastery-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.offline-mastery-reward-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
}

.offline-mastery-reward-card.unlocked {
  border-color: rgba(239, 178, 39, .55);
  background: rgba(239, 178, 39, .07);
}

.offline-mastery-reward-card.locked {
  opacity: .7;
}

.offline-mastery-reward-level {
  min-width: 64px;
  text-align: center;
}

.offline-mastery-reward-level small {
  display: block;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .04em;
}

.offline-mastery-reward-level strong {
  color: var(--gold);
  font-size: 22px;
}

.offline-mastery-reward-copy {
  min-width: 0;
  flex: 1;
}

.offline-mastery-reward-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.offline-mastery-reward-heading h4 {
  margin: 0;
}

.offline-mastery-reward-heading b {
  color: var(--gold);
  white-space: nowrap;
}

.offline-mastery-reward-copy p,
.offline-mastery-reward-copy small {
  color: var(--muted);
}

.offline-mastery-reward-copy p {
  margin: 4px 0 8px;
  font-size: 11px;
  line-height: 1.4;
}

.offline-mastery-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  margin-bottom: 5px;
}

.offline-mastery-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

@media (max-width: 900px) {
  .offline-mastery-summary-grid,
  .offline-mastery-reward-grid {
    grid-template-columns: 1fr;
  }
}


/* v2.37.0 Expedition Offline Mastery rewards */
.offline-mastery-expedition-icon strong {
  font-size: 28px;
  line-height: 1;
}

.offline-mastery-expedition-card.unlocked .offline-mastery-expedition-icon strong {
  filter: saturate(1.1);
}


/* v2.37.1 Sidebar footer visibility fix */
@media (min-width: 769px) {
  .sidebar {
    min-height: 0;
    overflow: hidden;
  }

  .main-navigation {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  .sidebar-footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    width: 100%;
  }

  .sidebar-footer #latestUpdateName {
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .sidebar-footer #latestUpdateVersion {
    white-space: nowrap;
    line-height: 1.25;
  }
}

/* v2.38.0 Expedition guide */
.guide-panel[hidden] { display: none !important; }

.guide-expedition-regions {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.guide-expedition-region {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}

.guide-expedition-region-head {
  padding: 17px 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}

.guide-expedition-region-head > div:first-child {
  display: flex;
  gap: 13px;
  min-width: 0;
}

.guide-expedition-region-icon {
  font-size: 2rem;
  line-height: 1;
  flex: 0 0 auto;
}

.guide-expedition-region-head h4 {
  margin: 2px 0 0;
  font-size: 1.15rem;
}

.guide-expedition-region-head p {
  margin: 5px 0 0;
  color: var(--muted, #aeb7c5);
  line-height: 1.45;
}

.guide-expedition-region-stats {
  flex: 0 0 auto;
  display: grid;
  gap: 7px;
  text-align: right;
  font-size: .78rem;
  color: var(--muted, #aeb7c5);
}

.guide-expedition-region-stats strong { color: var(--text, #f4f6f8); }

.guide-expedition-encounters {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.guide-expedition-encounter {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(7,12,20,.42);
}

.guide-expedition-encounter.boss {
  border-color: rgba(225,170,78,.28);
  background: rgba(225,170,78,.035);
}

.guide-expedition-encounter-head {
  padding: 12px 14px;
  display: flex;
  gap: 11px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.guide-expedition-enemy-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}

.guide-expedition-enemy-art {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.guide-expedition-encounter-head h5 {
  margin: 2px 0 1px;
  font-size: .98rem;
}

.guide-expedition-encounter-head small { color: var(--muted, #aeb7c5); }

.guide-boss-mechanic {
  margin: 10px 12px 0;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  border: 1px solid rgba(225,170,78,.18);
  background: rgba(225,170,78,.055);
  font-size: .79rem;
}

.guide-boss-mechanic span { color: var(--muted, #aeb7c5); line-height: 1.4; }

.guide-expedition-drop-head,
.guide-expedition-drop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 92px;
  gap: 10px;
  align-items: center;
}

.guide-expedition-drop-head {
  padding: 9px 14px 5px;
  color: var(--muted, #aeb7c5);
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.guide-expedition-drop-head span:nth-child(2),
.guide-expedition-drop-head span:nth-child(3) { text-align: right; }

.guide-expedition-drop-list { padding: 0 8px 9px; }

.guide-expedition-drop {
  min-height: 42px;
  padding: 6px 7px;
  border-radius: 8px;
  font-size: .82rem;
}

.guide-expedition-drop:nth-child(odd) { background: rgba(255,255,255,.025); }

.guide-expedition-drop.unique {
  background: rgba(225,132,46,.08);
  border: 1px solid rgba(225,132,46,.18);
}

.guide-expedition-drop-item {
  min-width: 0;
  display: flex;
  gap: 9px;
  align-items: center;
}

.guide-expedition-drop-item > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.guide-expedition-drop-item strong {
  overflow-wrap: anywhere;
}

.guide-expedition-drop-item small {
  color: #e7a154;
  font-size: .67rem;
}

.guide-reward-icon-art,
.guide-reward-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
  display: grid;
  place-items: center;
}

.guide-expedition-drop-amount,
.guide-expedition-drop-chance {
  text-align: right;
  white-space: nowrap;
}

.guide-expedition-drop-chance { color: #e8b55f; }
.guide-expedition-drop.unique .guide-expedition-drop-chance { color: #f1a453; }

.guide-first-victory {
  margin: 2px 12px 12px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border-radius: 9px;
  border: 1px solid rgba(120,205,146,.18);
  background: rgba(120,205,146,.055);
}

.guide-first-victory > div:first-child {
  display: grid;
  gap: 1px;
  white-space: nowrap;
}

.guide-first-victory-items {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 13px;
}

.guide-first-victory-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
}

@media (max-width: 760px) {
  .guide-expedition-region-head { display: grid; }
  .guide-expedition-region-stats { text-align: left; }
  .guide-first-victory { grid-template-columns: 1fr; }
  .guide-first-victory-items { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .guide-expedition-drop-head,
  .guide-expedition-drop { grid-template-columns: minmax(0, 1fr) 48px 70px; gap: 7px; }
  .guide-expedition-drop-head { font-size: .61rem; }
  .guide-expedition-drop { font-size: .74rem; }
}

.guide-expedition-bonus-drops { margin: 18px 0 0; }
.guide-expedition-shared-drops {
  overflow: hidden;
  border: 1px solid rgba(120,205,146,.16);
  border-radius: 14px;
  background: rgba(120,205,146,.035);
}
.guide-expedition-shared-drops > header {
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.guide-expedition-shared-drops h4 { margin: 2px 0 0; }
.guide-expedition-shared-drops > header small { color: var(--muted, #aeb7c5); text-align: right; }
.guide-expedition-shared-grid { display: grid; gap: 1px; background: rgba(255,255,255,.055); }
.guide-expedition-shared-grid > div {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) 44px 78px minmax(220px, 1.4fr);
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(7,12,20,.88);
  font-size: .78rem;
}
.guide-expedition-shared-grid > div > span,
.guide-expedition-shared-grid > div > b { text-align: right; }
.guide-expedition-shared-grid > div > b { color: #e8b55f; }
.guide-expedition-shared-grid > div > small { color: var(--muted, #aeb7c5); line-height: 1.35; }
@media (max-width: 760px) {
  .guide-expedition-shared-drops > header { display: grid; }
  .guide-expedition-shared-drops > header small { text-align: left; }
  .guide-expedition-shared-grid > div { grid-template-columns: minmax(0,1fr) 42px 68px; }
  .guide-expedition-shared-grid > div > small { grid-column: 1 / -1; }
}


/* ===== v2.39.0 Construction Bank-Style Filters ===== */
.activity-browse-controls.construction-bank-filters{
  padding:8px;
  border-color:var(--line);
  border-radius:10px;
  background:#08121b;
  box-shadow:var(--shadow);
}

.construction-bank-filters .activity-quick-nav{
  align-items:center;
  gap:7px;
}

.construction-bank-filters .activity-main-filters{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
}

.construction-bank-filters .activity-availability-nav{
  padding-right:7px;
  border-right:1px solid var(--line);
}

.construction-bank-filters .activity-availability-chips,
.construction-bank-filters .activity-category-chips{
  gap:5px;
  padding:0 0 3px;
}

.construction-bank-filters .activity-filter-chip{
  min-height:34px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  box-shadow:none;
}

.construction-bank-filters .activity-filter-chip:hover{
  border-color:var(--line);
  background:transparent;
  color:var(--text);
}

.construction-bank-filters .activity-filter-chip.active{
  border-color:var(--gold);
  background:rgba(215,173,86,.08);
  color:var(--text);
  box-shadow:none;
}

.construction-bank-filters .activity-filter-chip small{
  background:rgba(255,255,255,.045);
}

.construction-bank-filters .activity-filter-chip.active small{
  background:rgba(215,173,86,.12);
  color:var(--gold);
}

.construction-bank-filters .activity-filter-toggle{
  min-height:34px;
  border-radius:7px;
}

.construction-bank-filters .activity-advanced-filters{
  display:grid;
  grid-template-columns:minmax(200px,1fr) minmax(290px,.9fr);
  align-items:end;
  gap:7px;
  margin-top:7px;
  padding-top:7px;
}

.construction-bank-filters .activity-advanced-filters[hidden]{display:none}

.construction-bank-filters .activity-advanced-filters .activity-search{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin:0;
}

.construction-bank-filters .activity-advanced-filters .activity-search span,
.construction-bank-filters .activity-compact-selects label > span{
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}

.construction-bank-filters .activity-advanced-filters input,
.construction-bank-filters .activity-compact-selects select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#08121b;
  color:var(--text);
  font:inherit;
  font-size:10px;
}

.construction-bank-filters .activity-advanced-filters input:focus,
.construction-bank-filters .activity-compact-selects select:focus{
  outline:none;
  border-color:var(--gold);
}

.activity-compact-selects{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.activity-compact-selects[hidden]{display:none}

.activity-compact-selects label{
  display:grid;
  gap:4px;
}

.construction-bank-filters .activity-filter-actions{
  grid-column:1/-1;
  margin-top:0;
  padding-top:7px;
  border-top:1px solid var(--line);
}

.construction-bank-filters .activity-filter-actions .activity-filter-summary{
  border-top:0;
  padding:0;
  font-size:9px;
}

.construction-bank-filters .activity-clear-filters{
  min-height:34px;
}

@media(max-width:900px){
  .construction-bank-filters .activity-advanced-filters{grid-template-columns:1fr;}
  .construction-bank-filters .activity-filter-actions{grid-column:1;}
}

@media(max-width:700px){
  .construction-bank-filters .activity-main-filters{grid-template-columns:1fr;}
  .construction-bank-filters .activity-availability-nav{
    padding-right:0;
    padding-bottom:5px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .construction-bank-filters .activity-availability-nav{max-width:none;}
  .activity-compact-selects{grid-template-columns:1fr 1fr;}
}

@media(max-width:460px){
  .activity-compact-selects{grid-template-columns:1fr;}
}

/* ===== v2.40.0 Equipment Character Layout + Consumables Sync ===== */
.equipment-slot-overview-clean{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-areas:
    ". . head . ."
    ". cape neck ring ."
    "weapon hands body shield ."
    ". . legs . ."
    ". . feet . .";
  gap:12px;
  align-items:start;
  position:relative;
  min-height:520px;
}

.equipment-character-core{
  grid-column:2 / span 3;
  grid-row:1 / span 5;
  justify-self:center;
  align-self:center;
  width:180px;
  min-height:320px;
  pointer-events:none;
  position:relative;
  opacity:.28;
}
.equipment-character-core-head,
.equipment-character-core-body,
.equipment-character-core-legs{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  background:linear-gradient(180deg,rgba(215,173,86,.25),rgba(110,167,255,.12));
  border:1px solid rgba(215,173,86,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.equipment-character-core-head{
  top:10px;
  width:64px;
  height:64px;
  border-radius:999px;
}
.equipment-character-core-body{
  top:92px;
  width:110px;
  height:128px;
  border-radius:24px;
}
.equipment-character-core-legs{
  top:228px;
  width:92px;
  height:96px;
  border-radius:18px 18px 30px 30px;
}

.equipment-character-slot{position:relative;z-index:1;min-height:132px;}
.equipment-character-slot.slot-head{grid-area:head}
.equipment-character-slot.slot-cape{grid-area:cape}
.equipment-character-slot.slot-neck{grid-area:neck}
.equipment-character-slot.slot-ring{grid-area:ring}
.equipment-character-slot.slot-weapon{grid-area:weapon}
.equipment-character-slot.slot-hands{grid-area:hands}
.equipment-character-slot.slot-body{grid-area:body}
.equipment-character-slot.slot-shield{grid-area:shield}
.equipment-character-slot.slot-legs{grid-area:legs}
.equipment-character-slot.slot-feet{grid-area:feet}

.equipment-consumables-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.equipment-consumable-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.04));
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.equipment-consumable-heading{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.equipment-consumable-icon{
  width:52px;
  height:52px;
  border-radius:12px;
  border:1px solid rgba(215,173,86,.26);
  background:#08121b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  flex:0 0 52px;
}
.equipment-consumable-heading small,
.equipment-consumable-heading strong,
.equipment-consumable-heading span,
.equipment-consumable-field span{
  display:block;
}
.equipment-consumable-heading small,
.equipment-consumable-field span{
  color:var(--muted);
  font-size:11px;
}
.equipment-consumable-heading strong{margin-top:2px}
.equipment-consumable-heading span{margin-top:4px;color:var(--text-soft);font-size:12px;line-height:1.4}
.equipment-consumable-field-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.equipment-consumable-field{display:flex;flex-direction:column;gap:6px}
.equipment-consumable-field select{
  width:100%;
  min-height:40px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#09141e;
  color:var(--text);
  padding:8px 10px;
}
.equipment-consumable-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.equipment-secondary-button.active-toggle{
  border-color:rgba(101,204,141,.5);
  color:#d8ffe3;
}

@media (max-width: 1000px){
  .equipment-slot-overview-clean{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-areas:
      ". head ."
      "cape neck ring"
      "weapon body shield"
      "hands legs ."
      ". feet .";
    min-height:unset;
  }
  .equipment-character-core{grid-column:1 / -1;width:150px;min-height:280px;opacity:.22}
}

@media (max-width: 760px){
  .equipment-consumables-grid,
  .equipment-consumable-field-row{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .equipment-slot-overview-clean{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "head neck"
      "cape ring"
      "weapon shield"
      "hands body"
      "legs feet";
    gap:10px;
  }
  .equipment-character-core{display:none}
  .equipment-character-slot{min-height:unset}
}

/* ===== v2.40.1 Equipment UI Stabilization + Clean Layout ===== */
.equipment-slot-overview-clean{
  width:min(100%,820px);
  margin:0 auto;
  grid-template-columns:repeat(5,minmax(90px,1fr));
  grid-template-areas:
    ". . head . ."
    ". cape neck ring ."
    "weapon hands body shield ."
    ". . legs . ."
    ". . feet . .";
  gap:10px;
  min-height:445px;
  align-items:center;
}

.equipment-character-core{display:none!important}
.equipment-character-silhouette{
  grid-column:2 / 5;
  grid-row:1 / 6;
  position:relative;
  align-self:stretch;
  justify-self:stretch;
  z-index:0;
  pointer-events:none;
  opacity:.2;
}
.equipment-character-silhouette .character-head,
.equipment-character-silhouette .character-torso,
.equipment-character-silhouette .character-legs{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:block;
  border:1px solid rgba(215,173,86,.34);
  background:linear-gradient(180deg,rgba(215,173,86,.24),rgba(91,129,159,.08));
}
.equipment-character-silhouette .character-head{
  top:18px;
  width:68px;
  height:68px;
  border-radius:50%;
}
.equipment-character-silhouette .character-torso{
  top:104px;
  width:132px;
  height:154px;
  border-radius:28px 28px 18px 18px;
}
.equipment-character-silhouette .character-legs{
  top:270px;
  width:96px;
  height:132px;
  border-radius:14px 14px 28px 28px;
}

.equipment-character-slot{
  z-index:2;
  min-width:0;
  min-height:82px;
  margin:0;
  padding:9px 7px;
  display:grid;
  grid-template-rows:34px auto auto;
  justify-items:center;
  align-items:center;
  gap:2px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(8,18,27,.94);
  color:var(--text);
  box-shadow:none;
  overflow:hidden;
}
.equipment-character-slot:hover{
  border-color:rgba(215,173,86,.48);
  background:#0b1823;
}
.equipment-character-slot.selected{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(215,173,86,.2);
}
.equipment-character-slot.filled{background:rgba(13,27,38,.96)}
.equipment-character-slot-icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
}
.equipment-character-slot-icon img{width:32px;height:32px;object-fit:contain}
.equipment-character-slot small{
  color:var(--muted);
  font-size:8px;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1;
}
.equipment-character-slot strong{
  width:100%;
  color:var(--text);
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}

.equipment-slot-detail{
  width:min(100%,820px);
  margin:12px auto 0;
  min-height:92px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#09141e;
}
.equipment-slot-detail-main{display:flex;align-items:center;gap:12px;min-width:0}
.equipment-slot-detail-icon{
  width:52px;height:52px;flex:0 0 52px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(215,173,86,.25);border-radius:10px;background:#071019;font-size:26px;
}
.equipment-slot-detail-icon img{width:46px;height:46px;object-fit:contain}
.equipment-slot-detail-main small,
.equipment-slot-detail-main h3,
.equipment-slot-detail-main p,
.equipment-slot-detail-main span{display:block;margin:0}
.equipment-slot-detail-main small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em}
.equipment-slot-detail-main h3{margin-top:2px;font-size:15px}
.equipment-slot-detail-main p{margin-top:3px;color:var(--text-soft);font-size:10px}
.equipment-slot-detail-main span{margin-top:3px;color:var(--gold);font-size:9px}
.equipment-slot-detail-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

.equipment-consumables-grid{display:grid;grid-template-columns:1fr;gap:8px}
.equipment-supply-row{
  display:grid;
  grid-template-columns:minmax(170px,1.15fr) minmax(150px,1fr) minmax(150px,1fr) auto;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#09141e;
}
.equipment-supply-row:first-child{grid-template-columns:minmax(170px,1.15fr) minmax(180px,1.4fr) auto}
.equipment-supply-identity{display:flex;align-items:center;gap:9px;min-width:0}
.equipment-supply-identity>span{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#071019;border:1px solid var(--line);font-size:20px}
.equipment-supply-identity>span img{width:34px;height:34px;object-fit:contain}
.equipment-supply-identity small,.equipment-supply-identity strong,.equipment-supply-identity b{display:block}
.equipment-supply-identity small{color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.equipment-supply-identity strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equipment-supply-identity b{margin-top:2px;color:var(--gold);font-size:8px;font-weight:700}
.equipment-supply-row select{min-width:0;width:100%;height:35px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#071019;color:var(--text);font:inherit;font-size:10px}
.equipment-supply-row button{min-height:35px;white-space:nowrap}

@media(max-width:900px){
  .equipment-slot-overview-clean{grid-template-columns:repeat(5,minmax(72px,1fr));min-height:420px}
  .equipment-supply-row,
  .equipment-supply-row:first-child{grid-template-columns:1fr 1fr}
  .equipment-supply-identity{grid-column:1/-1}
}
@media(max-width:640px){
  .equipment-slot-overview-clean{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "head neck"
      "cape ring"
      "weapon shield"
      "hands body"
      "legs feet";
    min-height:0;
  }
  .equipment-character-silhouette{display:none}
  .equipment-character-slot{min-height:74px}
  .equipment-slot-detail{align-items:stretch;flex-direction:column}
  .equipment-slot-detail-actions{justify-content:flex-start}
  .equipment-supply-row,
  .equipment-supply-row:first-child{grid-template-columns:1fr}
  .equipment-supply-identity{grid-column:auto}
}

/* ===== v2.41.0 Potion Guide ===== */
.guide-index-emoji,
.guide-hero-emoji{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(215,173,86,.24);
  background:#08121b;
}
.guide-index-emoji{
  width:34px;
  height:34px;
  border-radius:9px;
  font-size:18px;
}
.guide-hero-emoji{
  width:58px;
  height:58px;
  border-radius:14px;
  font-size:31px;
}
.guide-potion-recipes{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
}
.guide-potion-recipe-head,
.guide-potion-recipe{
  display:grid;
  grid-template-columns:44px minmax(150px,.8fr) minmax(180px,1fr) minmax(230px,1.35fr);
  gap:12px;
  align-items:center;
}
.guide-potion-recipe-head{
  padding:9px 12px;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.guide-potion-recipe{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.055);
  font-size:12px;
}
.guide-potion-level{
  color:var(--gold);
  text-align:center;
}
.guide-potion-name{
  display:flex;
  gap:8px;
  align-items:center;
  min-width:0;
}
.guide-potion-name .guide-reward-icon-art,
.guide-potion-name .guide-reward-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
}
.guide-potion-ingredients{
  color:var(--text);
  line-height:1.35;
}
.guide-potion-effect{
  color:var(--muted);
  line-height:1.35;
}
@media(max-width:760px){
  .guide-potion-recipe-head{display:none}
  .guide-potion-recipe{
    grid-template-columns:42px minmax(0,1fr);
    gap:6px 10px;
    align-items:start;
  }
  .guide-potion-level{grid-row:1 / span 3;padding-top:8px}
  .guide-potion-name{grid-column:2}
  .guide-potion-ingredients,
  .guide-potion-effect{grid-column:2}
  .guide-potion-ingredients::before{content:'Ingredients: ';color:var(--muted);font-weight:700}
}

/* ===== v2.43.0 Combat Gold Rewards ===== */
.combat-session-heading-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.combat-session-heading-meta strong:first-child{color:var(--gold)}

/* ===== v2.48.0 The Den Screen ===== */
.den-page{
  padding-bottom: 36px;
}

.den-shell{
  display: grid;
  gap: 18px;
}

.den-hero{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(110px, 150px) 1fr;
  gap: 22px;
  align-items: center;
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(196, 157, 83, .28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 50%, rgba(177, 132, 55, .18), transparent 30%),
    linear-gradient(135deg, rgba(39, 33, 26, .98), rgba(22, 29, 24, .98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

.den-hero::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(121, 154, 78, .06));
}

.den-hero-emblem{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(214, 172, 91, .34);
  background: rgba(8, 12, 9, .34);
  box-shadow: inset 0 0 26px rgba(0,0,0,.28), 0 10px 30px rgba(0,0,0,.24);
}

.den-hero-emblem img{
  width: 94px;
  height: 94px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.34));
}

.den-hero-copy{
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.den-hero-copy h2{
  margin: 4px 0 10px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
}

.den-hero-copy p{
  max-width: 680px;
  margin: 0;
  color: var(--muted-text, #b9c0b8);
  font-size: 1.02rem;
  line-height: 1.65;
}

.den-hero-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.den-hero-badges span,
.den-room-status{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(196, 157, 83, .24);
  border-radius: 999px;
  background: rgba(196, 157, 83, .08);
  color: #ddd0aa;
  font-size: .78rem;
  font-weight: 700;
}

.den-overview-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.den-overview-card{
  padding: 16px 18px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px;
  background: var(--panel, rgba(24, 28, 25, .92));
}

.den-overview-card strong{
  display: block;
  margin-top: 5px;
  font-size: 1.18rem;
}

.den-overview-card small{
  display: block;
  margin-top: 4px;
  color: var(--muted-text, #aeb5ad);
}

.den-storage-bar{
  overflow: hidden;
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
}

.den-storage-bar span{
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8aa85e, #d4ad63);
  transition: width .2s ease;
}

.den-room-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.den-room-card{
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 18px;
  background: var(--panel, rgba(24, 28, 25, .92));
}

.den-room-card > button,
.den-room-card > .den-room-status{
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: auto;
}

.den-room-icon{
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(196, 157, 83, .22);
  background: rgba(196, 157, 83, .08);
  font-size: 1.65rem;
}

.den-room-icon img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

.den-room-card h3{
  margin: 3px 0 7px;
  font-size: 1.08rem;
}

.den-room-card p{
  margin: 0;
  color: var(--muted-text, #aeb5ad);
  line-height: 1.55;
}

.den-room-locked{
  opacity: .72;
  background: linear-gradient(145deg, rgba(24, 28, 25, .72), rgba(18, 20, 19, .86));
}

.den-future-note{
  padding: 20px 22px;
  border: 1px dashed rgba(196, 157, 83, .28);
  border-radius: 18px;
  background: rgba(196, 157, 83, .045);
}

.den-future-note h3{
  margin: 4px 0 7px;
}

.den-future-note p{
  max-width: 780px;
  margin: 0;
  color: var(--muted-text, #aeb5ad);
  line-height: 1.6;
}

.den-nav-item .nav-interface-icon-art,
.den-mobile-nav-item .mobile-interface-icon-art{
  object-fit: contain;
}

@media (max-width: 900px){
  .den-overview-grid{
    grid-template-columns: 1fr;
  }
  .den-room-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .den-hero{
    grid-template-columns: 1fr;
    padding: 22px 18px;
    text-align: center;
  }
  .den-hero-emblem{
    width: 104px;
    height: 104px;
  }
  .den-hero-emblem img{
    width: 76px;
    height: 76px;
  }
  .den-hero-badges{
    justify-content: center;
  }
  .den-room-card{
    grid-template-columns: 44px 1fr;
    padding: 16px;
  }
  .den-room-icon{
    width: 42px;
    height: 42px;
    font-size: 1.35rem;
  }
}

/* ===== v2.49.0 Den Progression Framework ===== */
.den-overview-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.den-tier-overview-card strong{
  color: #e4c983;
}

.den-progression-panel{
  padding: 22px;
  border: 1px solid rgba(196, 157, 83, .2);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(28, 31, 27, .96), rgba(20, 24, 21, .96));
}

.den-progression-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.den-progression-heading h3{
  margin: 4px 0 0;
  font-size: 1.22rem;
}

.den-progression-description{
  max-width: 820px;
  margin: 10px 0 18px;
  color: var(--muted-text, #aeb5ad);
  line-height: 1.6;
}

.den-tier-roadmap{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.den-tier-card{
  min-height: 176px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}

.den-tier-card.is-current{
  border-color: rgba(203, 164, 86, .42);
  background: linear-gradient(150deg, rgba(196, 157, 83, .12), rgba(103, 132, 74, .075));
  box-shadow: inset 0 0 0 1px rgba(196,157,83,.055);
}

.den-tier-card.is-complete{
  border-color: rgba(111, 153, 85, .34);
  background: rgba(111, 153, 85, .075);
}

.den-tier-card.is-future{
  opacity: .68;
}

.den-tier-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d9c58d;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.den-tier-card-top b{
  color: var(--muted-text, #9fa69f);
  font-size: .68rem;
}

.den-tier-card h4{
  margin: 9px 0 7px;
  font-size: 1.02rem;
}

.den-tier-card p{
  margin: 0 0 10px;
  color: var(--muted-text, #aeb5ad);
  font-size: .86rem;
  line-height: 1.5;
}

.den-tier-card small{
  display: block;
  color: #d0bd8e;
  font-size: .74rem;
  line-height: 1.45;
}

.den-framework-note{
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.065);
  color: var(--muted-text, #aeb5ad);
  font-size: .82rem;
  line-height: 1.5;
}

.den-framework-note strong{
  flex: 0 0 auto;
  color: #d7bf80;
}

@media (max-width: 1080px){
  .den-overview-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .den-tier-roadmap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .den-overview-grid,
  .den-tier-roadmap{
    grid-template-columns: 1fr;
  }
  .den-progression-panel{
    padding: 17px;
  }
  .den-progression-heading{
    display: grid;
  }
  .den-framework-note{
    display: grid;
  }
}


/* v2.50.0 First World Unlock */
.den-route-project{
  border:1px solid rgba(176,139,72,.38);
  border-radius:18px;
  padding:20px;
  background:linear-gradient(145deg,rgba(43,54,35,.92),rgba(26,31,27,.96));
  box-shadow:0 18px 38px rgba(0,0,0,.18);
}
.den-route-project-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.den-route-project-heading h3{margin:4px 0 0;font-size:1.22rem;}
.den-route-project > p{max-width:840px;color:var(--muted);line-height:1.6;}
.den-route-target{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  margin:18px 0 10px;
}
.den-route-target > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.den-route-target > div:last-child{text-align:right;}
.den-route-target small{color:var(--muted);}
.den-project-progress{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.06);
}
.den-project-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7d9a4b,#d5af5f);
  transition:width .2s ease;
}
.den-project-requirements{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.den-project-requirement{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.13);
}
.den-project-requirement.is-complete{
  border-color:rgba(112,168,86,.36);
  background:rgba(71,112,56,.15);
}
.den-project-requirement-icon{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  font-size:1.25rem;
}
.den-project-item-art{width:30px;height:30px;object-fit:contain;}
.den-project-requirement-copy{display:flex;flex-direction:column;min-width:0;}
.den-project-requirement-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.den-project-requirement-copy span{font-variant-numeric:tabular-nums;color:#e6d3a6;}
.den-project-requirement-copy small{color:var(--muted);}
.den-project-requirement button{white-space:nowrap;padding:8px 10px;}
.den-project-check{font-size:1.2rem;color:#9fd782;font-weight:800;padding:0 8px;}
.den-project-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.den-project-actions button{min-width:150px;}
.den-project-hint{margin:12px 0 0!important;font-size:.9rem;}
.den-route-project:has(#denForestRouteStatus:not(:empty)) .den-room-status{white-space:nowrap;}
@media(max-width:760px){
  .den-route-project{padding:16px;}
  .den-route-project-heading{align-items:flex-start;}
  .den-project-requirements{grid-template-columns:1fr;}
  .den-project-requirement{grid-template-columns:auto minmax(0,1fr);}
  .den-project-requirement button,.den-project-check{grid-column:1/-1;width:100%;text-align:center;}
  .den-route-target{grid-template-columns:1fr;}
  .den-route-target > div:last-child{text-align:left;}
}


/* ===== V1.01.28 Chapter I Den Progression ===== */
.den-upgrade-project{
  border-color:rgba(203,164,86,.48);
  background:linear-gradient(145deg,rgba(50,43,29,.94),rgba(28,31,27,.98));
}
.den-upgrade-reward{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:16px 0 2px;
}
.den-upgrade-reward>div{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border:1px solid rgba(203,164,86,.2);
  border-radius:12px;
  background:rgba(203,164,86,.06);
}
.den-upgrade-reward small{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;}
.den-upgrade-reward strong{color:#e4c983;font-size:.9rem;}
@media(max-width:760px){.den-upgrade-reward{grid-template-columns:1fr;}}

/* ===== v2.52.0 Proper World Map ===== */
.world-map-page{padding-bottom:36px;}
.world-map-shell{display:grid;gap:16px;}
.world-map-heading{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:22px 24px;border:1px solid rgba(196,157,83,.22);border-radius:20px;
  background:linear-gradient(135deg,rgba(34,40,31,.98),rgba(21,27,23,.98));
}
.world-map-heading h2{margin:4px 0 8px;font-size:clamp(1.8rem,3vw,2.7rem);}
.world-map-heading p{max-width:760px;margin:0;color:var(--muted);line-height:1.6;}
.world-map-heading-stats{display:grid;grid-template-columns:repeat(2,minmax(135px,1fr));gap:10px;min-width:310px;}
.world-map-heading-stats>div{padding:12px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.16);}
.world-map-heading-stats small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;}
.world-map-heading-stats strong{display:block;margin-top:4px;color:#e5cf95;font-size:.93rem;}
.world-map-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:14px;align-items:stretch;}
.world-map-canvas{
  position:relative;overflow:hidden;min-height:650px;border:1px solid rgba(196,157,83,.24);border-radius:22px;
  background:
    radial-gradient(circle at 25% 26%,rgba(116,144,78,.24),transparent 30%),
    radial-gradient(circle at 76% 74%,rgba(193,150,73,.16),transparent 28%),
    linear-gradient(155deg,#1a271f 0%,#263429 43%,#1c2721 100%);
  box-shadow:inset 0 0 70px rgba(0,0,0,.26);
}
.world-map-canvas::before{
  content:'';position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:
    repeating-radial-gradient(ellipse at 10% 20%,transparent 0 18px,rgba(225,208,164,.14) 19px 20px,transparent 21px 36px),
    repeating-radial-gradient(ellipse at 86% 72%,transparent 0 23px,rgba(225,208,164,.09) 24px 25px,transparent 26px 43px);
}
.world-map-terrain{position:absolute;border-radius:50%;filter:blur(1px);opacity:.42;pointer-events:none;}
.world-map-terrain-one{width:330px;height:210px;left:-70px;bottom:70px;background:radial-gradient(circle at 60% 45%,#48633d,transparent 68%);transform:rotate(-14deg);}
.world-map-terrain-two{width:300px;height:190px;right:-80px;top:35px;background:radial-gradient(circle at 35% 55%,#725c35,transparent 68%);transform:rotate(15deg);}
.world-map-route-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.world-map-route-line{fill:none;stroke:rgba(220,188,111,.76);stroke-width:1.15;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:5 5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
.world-map-route-line.is-preview{stroke:rgba(182,190,159,.34);stroke-dasharray:3 8;}
.world-map-nodes{position:absolute;inset:0;}
.world-map-node{
  position:absolute;left:var(--map-x);top:var(--map-y);transform:translate(-50%,-50%);
  display:grid;grid-template-columns:48px minmax(118px,1fr);gap:10px;align-items:center;
  width:min(220px,30vw);padding:10px 12px;text-align:left;border-radius:15px;
  border:1px solid rgba(255,255,255,.12);background:rgba(21,26,22,.91);color:inherit;
  box-shadow:0 10px 24px rgba(0,0,0,.28);backdrop-filter:blur(5px);z-index:2;
}
.world-map-node:hover,.world-map-node.is-selected{transform:translate(-50%,-50%) scale(1.035);border-color:rgba(229,192,104,.58);box-shadow:0 12px 30px rgba(0,0,0,.33),0 0 0 2px rgba(196,157,83,.08);}
.world-map-node-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.065);font-size:1.55rem;}
.world-map-node-copy{display:flex;flex-direction:column;min-width:0;}
.world-map-node-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.94rem;}
.world-map-node-copy small{margin-top:2px;color:var(--muted);font-size:.73rem;line-height:1.3;}
.world-map-node.is-home{border-color:rgba(212,174,92,.42);}
.world-map-node.is-open{border-color:rgba(111,164,83,.44);background:rgba(31,48,30,.92);}
.world-map-node.is-locked{border-color:rgba(169,120,75,.34);background:rgba(42,31,27,.92);}
.world-map-node.is-known{opacity:.82;border-color:rgba(154,165,142,.24);background:rgba(29,32,29,.88);}
.world-map-compass{position:absolute;right:18px;bottom:16px;width:72px;height:72px;opacity:.28;pointer-events:none;}
.world-map-compass img{width:100%;height:100%;object-fit:contain;}
.world-map-details{display:flex;flex-direction:column;min-height:650px;padding:22px;border:1px solid rgba(196,157,83,.18);border-radius:22px;background:linear-gradient(160deg,rgba(29,33,29,.98),rgba(20,23,21,.98));}
.world-map-detail-heading{display:grid;grid-template-columns:58px 1fr;gap:13px;align-items:center;}
.world-map-detail-icon{display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(196,157,83,.25);border-radius:16px;background:rgba(196,157,83,.08);font-size:1.8rem;}
.world-map-detail-heading h3{margin:3px 0 0;font-size:1.35rem;}
.world-map-details>p{margin:18px 0;color:var(--muted);line-height:1.62;}
.world-map-detail-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px;}
.world-map-detail-status span{padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(0,0,0,.14);}
.world-map-detail-status small{display:block;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;}
.world-map-detail-status strong{display:block;margin-top:3px;font-size:.84rem;}
.world-map-detail-project{margin-top:4px;padding:14px;border-radius:14px;border:1px solid rgba(196,157,83,.2);background:rgba(196,157,83,.055);}
.world-map-project-top{display:flex;flex-direction:column;gap:3px;}
.world-map-project-progress{height:8px;margin:12px 0 8px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07);}
.world-map-project-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#76964c,#d4ad62);}
.world-map-project-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;}
.world-map-project-meta small{color:var(--muted);text-align:right;}
.world-map-detail-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:18px;}
.world-map-detail-actions .secondary{background:transparent;border-color:rgba(255,255,255,.12);}
.world-map-action-note{width:100%;margin:3px 0 0!important;color:var(--muted)!important;font-size:.78rem;line-height:1.45!important;}
.world-map-legend{display:flex;flex-wrap:wrap;gap:16px;padding:11px 4px;color:var(--muted);font-size:.78rem;}
.world-map-legend span{display:flex;align-items:center;gap:6px;}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#8b8b82;}
.legend-dot.is-home{background:#d5af5f}.legend-dot.is-open{background:#7da85d}.legend-dot.is-locked{background:#a76f50}.legend-dot.is-known{background:#89948a}
.world-map-nav-item .nav-interface-icon-art,.world-map-mobile-nav-item .mobile-more-interface-icon-art{object-fit:contain;}
@media(max-width:1000px){
  .world-map-heading{display:grid;}
  .world-map-heading-stats{min-width:0;width:100%;}
  .world-map-layout{grid-template-columns:1fr;}
  .world-map-details{min-height:auto;}
}
@media(max-width:700px){
  .world-map-heading{padding:18px;}
  .world-map-heading-stats{grid-template-columns:1fr;}
  .world-map-canvas{min-height:610px;}
  .world-map-node{width:178px;grid-template-columns:40px minmax(0,1fr);padding:8px 9px;}
  .world-map-node-icon{width:38px;height:38px;font-size:1.25rem;}
  .world-map-node-copy strong{font-size:.84rem;}
  .world-map-node-copy small{font-size:.66rem;}
  .world-map-detail-status{grid-template-columns:1fr;}
}
@media(max-width:460px){
  .world-map-canvas{min-height:560px;}
  .world-map-node{width:150px;grid-template-columns:34px minmax(0,1fr);gap:7px;}
  .world-map-node-icon{width:32px;height:32px;border-radius:10px;font-size:1.05rem;}
  .world-map-node-copy strong{font-size:.76rem;}
  .world-map-node-copy small{font-size:.61rem;}
  .world-map-compass{width:54px;height:54px;}
}
.world-map-canvas.forest-route-open .route-den-woods{stroke:rgba(143,190,101,.9);stroke-dasharray:none;stroke-width:1.5;}


/* ===== v2.53.0 Chapter I Progression ===== */
.world-map-canvas.mine-route-open .route-woods-mine,
.world-map-canvas.wastes-route-open .route-mine-wastes{stroke:rgba(143,190,101,.9);stroke-dasharray:none;stroke-width:1.5;}
.skill-tabs button.skill-locked{opacity:.64;filter:saturate(.55);}
.skill-tabs button.skill-locked small{color:#c9bca0;}
.skill-card.skill-locked{opacity:.72;filter:saturate(.65);}
.skill-discovery-lock{max-width:720px;margin:24px auto;padding:30px;border:1px solid rgba(220,188,111,.25);border-radius:18px;background:linear-gradient(180deg,rgba(28,33,29,.96),rgba(19,23,21,.96));text-align:center;box-shadow:0 18px 44px rgba(0,0,0,.26);}
.skill-discovery-lock-icon{font-size:44px;margin-bottom:8px;filter:grayscale(.2);}
.skill-discovery-lock h2{margin:6px 0 10px;}
.skill-discovery-lock p{max-width:620px;margin:0 auto 14px;color:var(--text-muted,#b8b2a7);line-height:1.6;}
.skill-discovery-lock strong{display:block;margin:0 auto 18px;color:#e7c979;}
.skill-discovery-lock button{min-width:180px;}

/* ===== v2.54.0 Chapter I Integration & Stability ===== */
@media (min-width:1081px){
  .den-overview-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
.den-chapter-overview-card strong{color:#e4c983;}
.den-chapter-overview-card.is-complete{border-color:rgba(111,168,91,.45);background:linear-gradient(145deg,rgba(49,73,42,.36),rgba(24,28,25,.94));}
.den-chapter-overview-card.is-complete strong{color:#a9d88d;}
.world-map-shell.chapter-complete .world-map-heading-stats>div:last-child{border-color:rgba(111,168,91,.35);background:rgba(111,168,91,.08);}
.world-map-shell.chapter-complete #worldMapObjective{color:#a9d88d;}


/* ===== v2.54.2 Expedition Access Item Rename ===== */


/* ===== v2.54.3 Function & UI Stability Audit ===== */

/* ===== v2.55.0 Navigation Structure — Phase 1 =====
   Desktop sidebar hierarchy only. Visual styling is intentionally unchanged
   until Navigation Phase 2. */


/* ===== v2.55.1 Navigation Visual Hierarchy — Phase 2 =====
   Desktop/tablet sidebar polish only. Routing and mobile navigation behavior
   remain unchanged for Phase 3. */
@media (min-width:821px){
  body.exact-reference-ui .main-navigation.grouped-navigation{
    gap:6px !important;
    padding:2px 1px 8px !important;
    scrollbar-color:rgba(244,183,45,.24) transparent;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-group{
    position:relative;
    display:grid;
    gap:3px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,.045);
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-group:first-child{
    padding-top:0;
    border-top:0;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-group-label{
    display:flex;
    align-items:center;
    min-height:14px;
    padding:0 9px 1px !important;
    color:#817d75 !important;
    font-size:8px !important;
    font-weight:850 !important;
    line-height:1;
    letter-spacing:.14em !important;
    text-transform:uppercase;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item{
    position:relative;
    min-height:36px !important;
    gap:9px !important;
    padding:0 9px !important;
    margin:0 !important;
    overflow:hidden;
    border-radius:10px !important;
    color:#d8d5cf !important;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    bottom:7px;
    width:2px;
    border-radius:999px;
    background:transparent;
    transition:background .16s ease,box-shadow .16s ease;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item:hover{
    transform:translateX(2px);
    color:#f1ede5 !important;
    background:rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.065) !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item.active{
    color:#f1d58a !important;
    background:linear-gradient(90deg,rgba(244,183,45,.125),rgba(244,183,45,.045)) !important;
    border-color:rgba(244,183,45,.34) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.10) !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item.active::before{
    background:#e7bd59;
    box-shadow:0 0 10px rgba(231,189,89,.38);
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item-icon{
    display:grid !important;
    place-items:center;
    width:27px !important;
    height:27px !important;
    flex:0 0 27px !important;
    border:1px solid rgba(255,255,255,.055);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item.active .nav-item-icon{
    border-color:rgba(244,183,45,.24);
    background:rgba(244,183,45,.075);
    box-shadow:inset 0 0 12px rgba(244,183,45,.025);
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-interface-icon-art{
    width:19px !important;
    height:19px !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item b{
    font-size:11px;
    font-weight:720;
    letter-spacing:.01em;
  }

  /* Journey is the game's location/progression anchor, so it receives a
     distinct but restrained treatment without competing with active state. */
  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group{
    gap:4px;
    padding:8px !important;
    border:1px solid rgba(244,183,45,.13) !important;
    border-radius:13px;
    background:
      radial-gradient(circle at 12% 0%,rgba(244,183,45,.065),transparent 48%),
      rgba(255,255,255,.012);
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group .nav-group-label{
    padding:0 4px 3px !important;
    color:#b99d63 !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group .nav-item{
    min-height:39px !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group .nav-item-icon{
    width:29px !important;
    height:29px !important;
    flex-basis:29px !important;
    border-color:rgba(244,183,45,.11);
    background:rgba(244,183,45,.04);
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group .nav-interface-icon-art{
    width:21px !important;
    height:21px !important;
  }

  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group .nav-item b{
    font-size:11.5px;
    font-weight:780;
  }

  body.exact-reference-ui .sidebar-footer{
    padding-top:11px !important;
    border-top-color:rgba(244,183,45,.10) !important;
  }

  body.exact-reference-ui .sidebar-footer #latestUpdateName{
    color:#8f8a81;
    font-size:10px;
  }

  body.exact-reference-ui .sidebar-footer #latestUpdateVersion{
    color:#c9ad70;
    font-size:10px;
  }
}

@media (min-width:821px) and (max-width:1000px){
  body.exact-reference-ui .main-navigation.grouped-navigation{
    gap:5px !important;
  }
  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item{
    min-height:35px !important;
    padding-inline:7px !important;
  }
  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group{
    padding:6px !important;
  }
  body.exact-reference-ui .main-navigation.grouped-navigation .journey-nav-group .nav-item{
    min-height:38px !important;
  }
  body.exact-reference-ui .main-navigation.grouped-navigation .nav-item b{
    font-size:10.5px;
  }
}

/* ===== v2.55.2 Mobile & Responsive Navigation — Phase 3 =====
   Aligns the mobile navigation with the grouped desktop hierarchy. The game
   layout/content rules remain unchanged; this phase only owns navigation. */
@media (max-width:820px){
  .sidebar{
    display:none !important;
  }

  .mobile-top-navigation{
    position:sticky;
    top:0;
    z-index:1600;
    display:block;
    width:100%;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid rgba(244,183,45,.14);
    background:rgba(8,18,27,.985);
    box-shadow:0 6px 20px rgba(7,16,25,.34);
  }

  .mobile-nav-primary{
    position:relative;
    z-index:1620;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    padding:5px 7px;
    background:rgba(8,18,27,.985);
  }

  .mobile-nav-item{
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    min-width:0;
    min-height:50px !important;
    padding:4px 3px !important;
    border:1px solid transparent !important;
    border-radius:9px !important;
    background:transparent !important;
    color:#9ea7a3 !important;
    box-shadow:none !important;
    touch-action:manipulation;
  }

  .mobile-nav-item>span{
    display:grid;
    place-items:center;
    min-height:24px;
    font-size:19px;
    line-height:1;
  }

  .mobile-nav-item>b{
    width:100%;
    overflow:visible;
    color:inherit;
    font-size:8.5px !important;
    font-weight:760;
    line-height:1.1;
    text-align:center;
    text-overflow:clip;
    white-space:nowrap;
  }

  .mobile-nav-item.active,
  .mobile-nav-item.menu-open{
    border-color:rgba(244,183,45,.38) !important;
    background:linear-gradient(180deg,rgba(244,183,45,.12),rgba(244,183,45,.055)) !important;
    color:#e6c56d !important;
  }

  .den-mobile-nav-item,
  .world-map-mobile-primary{
    background:rgba(244,183,45,.025) !important;
  }

  .den-mobile-nav-item .mobile-interface-icon-art,
  .world-map-mobile-primary .mobile-interface-icon-art{
    filter:drop-shadow(0 0 7px rgba(244,183,45,.12));
  }

  .mobile-more-button>span{
    min-height:24px;
    font-size:17px;
    font-weight:900;
    letter-spacing:2px;
  }

  .mobile-nav-more{
    position:absolute;
    top:100%;
    left:8px;
    right:8px;
    z-index:1630;
    display:block;
    max-height:calc(100dvh - 72px - env(safe-area-inset-top));
    padding:10px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid rgba(244,183,45,.18);
    border-top-color:rgba(244,183,45,.10);
    border-radius:0 0 14px 14px;
    background:rgba(8,18,27,.995);
    box-shadow:0 18px 38px rgba(3,9,14,.62);
    scrollbar-width:thin;
    scrollbar-color:rgba(244,183,45,.26) transparent;
  }

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

  .mobile-nav-more-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    padding:2px 2px 9px;
    border-bottom:1px solid rgba(255,255,255,.055);
  }

  .mobile-nav-more-heading strong{
    color:#e7c979;
    font-size:12px;
    font-weight:820;
  }

  .mobile-nav-more-heading span{
    color:#747d79;
    font-size:8.5px;
  }

  .mobile-nav-more-groups{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding-top:8px;
  }

  .mobile-nav-more-group{
    min-width:0;
    padding:7px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:10px;
    background:rgba(255,255,255,.018);
  }

  .mobile-nav-more-label{
    display:block;
    padding:0 2px 6px;
    color:#9f8c64;
    font-size:8px;
    font-weight:850;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

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

  .mobile-nav-more-item{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-width:0;
    min-height:46px !important;
    padding:7px 8px !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:8px !important;
    background:#0c1821 !important;
    color:#aeb6b2 !important;
    text-align:left;
    box-shadow:none !important;
    touch-action:manipulation;
  }

  .mobile-nav-more-item>span{
    display:grid;
    place-items:center;
    width:30px;
    min-width:30px;
    font-size:18px;
  }

  .mobile-nav-more-item>b{
    min-width:0;
    overflow:visible;
    color:inherit;
    font-size:9.5px !important;
    font-weight:720;
    line-height:1.15;
    text-overflow:clip;
    white-space:normal;
  }

  .mobile-nav-more-item:hover,
  .mobile-nav-more-item:focus-visible{
    border-color:rgba(244,183,45,.22) !important;
    background:#101e28 !important;
    color:#e6dfd2 !important;
  }

  .mobile-nav-more-item.active{
    border-color:rgba(244,183,45,.42) !important;
    background:rgba(244,183,45,.10) !important;
    color:#e6c56d !important;
  }

  .mobile-nav-more-item:only-child,
  .mobile-nav-more-item:last-child:nth-child(odd){
    grid-column:1/-1;
  }

  body{
    scroll-padding-top:66px !important;
  }
}

@media (max-width:560px){
  .mobile-nav-primary{
    gap:3px;
    padding-inline:5px;
  }

  .mobile-nav-item{
    min-height:48px !important;
  }

  .mobile-nav-item>b{
    font-size:8px !important;
  }

  .mobile-nav-more{
    left:5px;
    right:5px;
    padding:8px;
  }

  .mobile-nav-more-heading span{
    display:none;
  }

  .mobile-nav-more-groups{
    grid-template-columns:1fr;
    gap:7px;
  }

  .mobile-nav-more-group{
    padding:6px;
  }

  .mobile-nav-more-grid{
    gap:4px;
  }

  .mobile-nav-more-item{
    min-height:45px !important;
  }
}

@media (max-width:350px){
  .mobile-nav-primary{
    gap:2px;
    padding-inline:3px;
  }

  .mobile-nav-item{
    min-height:47px !important;
    padding-inline:1px !important;
  }

  .mobile-nav-item>b{
    font-size:7.5px !important;
  }

  .mobile-interface-icon-art{
    width:22px;
    height:22px;
  }

  .mobile-nav-more{
    left:3px;
    right:3px;
    padding:7px;
  }
}


/* ============================================================
   v2.55.4 — OFFICIAL JOURNEYDEN LOGO INTEGRATION
   ============================================================ */
body.exact-reference-ui .premium-brand-block {
  display: block;
  padding: 4px 8px 16px;
}

body.exact-reference-ui .premium-brand-block .sidebar-journeyden-logo {
  display: block;
  width: 100% !important;
  max-width: 212px;
  height: auto !important;
  margin: 0 auto;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-gate .auth-gate-logo.official-journeyden-logo {
  width: min(260px, 86vw);
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width:1050px) and (min-width:821px) {
  body.exact-reference-ui .premium-brand-block {
    padding-inline: 7px;
  }

  body.exact-reference-ui .premium-brand-block .sidebar-journeyden-logo {
    max-width: 176px;
  }
}

/* ============================================================
   v2.55.5 — OFFICIAL JOURNEYDEN LOGO PACK INTEGRATION
   Uses artwork sourced from JourneyDen_Logo_Pack.zip.
   ============================================================ */
body.exact-reference-ui .premium-brand-block .sidebar-journeyden-logo {
  width: 100% !important;
  max-width: 220px;
  height: auto !important;
  margin: 0 auto;
  object-fit: contain !important;
}

.auth-gate .auth-gate-logo.official-journeyden-logo {
  width: min(340px, 86vw);
  max-height: 235px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 14px;
}

@media (max-width:1050px) and (min-width:821px) {
  body.exact-reference-ui .premium-brand-block .sidebar-journeyden-logo {
    max-width: 176px;
  }
}

/* v2.56.1 — Chapter I Lore & Tutorial Phase 2: Current Journey + Journey Journal */
.current-journey-tracker {
  margin: 12px 18px 0;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(209, 161, 73, 0.28);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(44, 35, 24, 0.94), rgba(28, 27, 24, 0.96));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.current-journey-tracker.is-complete { border-color: rgba(111, 174, 117, 0.42); }
.current-journey-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
}
.current-journey-icon img { width: 29px; height: 29px; object-fit: contain; }
.current-journey-copy { min-width: 0; }
.current-journey-copy .eyebrow { display: block; margin-bottom: 2px; }
.current-journey-copy > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-journey-progress,
.journey-journal-progress {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.current-journey-progress span,
.journey-journal-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b88435, #e2bd68);
  transition: width 180ms ease;
}
.current-journey-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.current-journey-actions { display: flex; gap: 7px; }
.current-journey-actions button { white-space: nowrap; }

.journey-journal {
  padding: 18px;
  border: 1px solid rgba(209, 161, 73, 0.22);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(33, 31, 27, 0.98), rgba(24, 24, 22, 0.96));
}
.journey-journal-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.journey-journal-heading h3 { margin: 3px 0 5px; }
.journey-journal-heading p { max-width: 820px; margin: 0; color: var(--muted); }
.journey-journal-summary {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 14px;
  margin: 15px 0 12px;
}
.journey-journal-progress { margin-top: 0; height: 6px; }
.journey-journal-entries { display: grid; gap: 10px; }
.journey-journal-entry {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}
.journey-journal-entry.is-active { border-color: rgba(209, 161, 73, 0.34); background: rgba(209, 161, 73, 0.055); }
.journey-journal-entry.is-complete { border-color: rgba(111, 174, 117, 0.2); }
.journey-journal-entry.is-locked { opacity: 0.67; }
.journey-journal-entry-marker span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(209, 161, 73, 0.34);
  color: #e3bd69;
  font-size: 12px;
  font-weight: 800;
}
.journey-journal-entry.is-complete .journey-journal-entry-marker span { border-color: rgba(111, 174, 117, 0.4); color: #8fc695; }
.journey-journal-entry-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.journey-journal-entry-heading h4 { margin: 2px 0 0; }
.journey-journal-entry-heading > strong { color: var(--muted); font-size: 12px; white-space: nowrap; }
.journey-journal-entry-body > p { margin: 7px 0 10px; color: var(--muted); }
.journey-journal-entry-body ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.journey-journal-objective {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.13);
}
.journey-journal-objective.is-current { background: rgba(209, 161, 73, 0.08); }
.journey-journal-objective-icon { text-align: center; color: #d7ad5a; font-weight: 800; }
.journey-journal-objective.is-complete .journey-journal-objective-icon { color: #8fc695; }
.journey-journal-objective-copy { min-width: 0; }
.journey-journal-objective-copy strong,
.journey-journal-objective-copy small { display: block; }
.journey-journal-objective-copy small { margin-top: 2px; color: var(--muted); }
.journey-journal-go { white-space: nowrap; }

@media (max-width: 820px) {
  .current-journey-tracker {
    margin: 8px 10px 0;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 10px;
  }
  .current-journey-icon { width: 34px; height: 34px; }
  .current-journey-icon img { width: 24px; height: 24px; }
  .current-journey-count { display: none; }
  .current-journey-actions { grid-column: 2 / -1; }
  .current-journey-actions button { flex: 1 1 auto; }
  .journey-journal { padding: 14px; }
  .journey-journal-heading { display: grid; gap: 10px; }
  .journey-journal-summary { grid-template-columns: 1fr; gap: 7px; }
  .journey-journal-entry { grid-template-columns: 30px minmax(0, 1fr); padding: 11px 9px; }
  .journey-journal-objective { grid-template-columns: 20px minmax(0, 1fr); }
  .journey-journal-go { grid-column: 2; justify-self: start; }
}

@media (max-width: 420px) {
  .current-journey-copy > strong { font-size: 12px; }
  .current-journey-actions button { padding-inline: 9px; font-size: 11px; }
  .journey-journal-entry-heading { display: grid; gap: 4px; }
}


/* v2.56.2 — Chapter I Lore & Tutorial Phase 3 */
.current-journey-hint {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.current-journey-tracker.is-guided { border-color: rgba(209, 161, 73, 0.36); }
.main-navigation [data-page].journey-nav-cue,
.mobile-top-navigation [data-page].journey-nav-cue {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(209, 161, 73, 0.26);
}
.main-navigation [data-page].journey-nav-cue::after,
.mobile-top-navigation [data-page].journey-nav-cue::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #d1a149;
  box-shadow: 0 0 0 3px rgba(209, 161, 73, 0.14);
  top: 8px;
  right: 8px;
  pointer-events: none;
}
.journey-tutorial-block {
  margin: 10px 0 12px;
  padding: 11px;
  border: 1px solid rgba(209, 161, 73, 0.2);
  border-radius: 11px;
  background: rgba(209, 161, 73, 0.04);
}
.journey-tutorial-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.journey-tutorial-head > strong { color: var(--muted); font-size: 12px; }
.journey-tutorial-lore { margin: 7px 0 10px !important; color: var(--text) !important; font-style: italic; opacity: 0.9; }
.journey-tutorial-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.journey-tutorial-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
}
.journey-tutorial-step.is-current { background: rgba(209, 161, 73, 0.09); }
.journey-tutorial-step.is-ahead { opacity: 0.58; }
.journey-tutorial-step-icon { text-align: center; color: #d7ad5a; font-weight: 800; }
.journey-tutorial-step.is-complete .journey-tutorial-step-icon { color: #8fc695; }
.journey-tutorial-step-copy { min-width: 0; }
.journey-tutorial-step-copy strong,
.journey-tutorial-step-copy span,
.journey-tutorial-step-copy small { display: block; }
.journey-tutorial-step-copy span { margin-top: 1px; font-size: 12px; }
.journey-tutorial-step-copy small { margin-top: 2px; color: var(--muted); line-height: 1.35; }
.journey-existing-progress { margin-top: 10px; }
.journey-existing-progress > .eyebrow { display: block; margin-bottom: 6px; }
@media (max-width: 760px) {
  .current-journey-hint { white-space: normal; max-height: 2.7em; }
  .journey-tutorial-step { grid-template-columns: 20px minmax(0, 1fr); }
  .journey-tutorial-step .journey-journal-go { grid-column: 2; justify-self: start; }
}


/* v2.56.4 — Chapter I Lore & Tutorial Phase 5: finale, reward, Chapter II teaser */
.chapter-milestone-badge {
  border-color: rgba(226, 189, 104, 0.42) !important;
  color: #efd086 !important;
  background: rgba(209, 161, 73, 0.1) !important;
}
.journey-journal-finale {
  margin: 0 0 13px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(180px, .8fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(111, 174, 117, 0.28);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(50, 67, 47, 0.18), rgba(209, 161, 73, 0.07));
}
.journey-journal-finale h4 { margin: 2px 0 5px; font-size: 18px; }
.journey-journal-finale p { margin: 0; color: var(--muted); line-height: 1.45; }
.journey-journal-finale-reward,
.journey-journal-next { display: grid; gap: 3px; min-width: 0; }
.journey-journal-finale-reward strong { color: #efd086; }
.journey-journal-finale-reward small,
.journey-journal-next small { color: var(--muted); line-height: 1.35; }

.chapter-finale-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: 20px;
}
.chapter-finale-modal.open { display: grid; }
.chapter-finale-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(5, 8, 10, 0.78);
  backdrop-filter: blur(5px);
}
.chapter-finale-card {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(226, 189, 104, 0.38);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(37, 34, 28, 0.99), rgba(20, 23, 22, 0.99));
  box-shadow: 0 24px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
  text-align: center;
}
.chapter-finale-emblem {
  width: 78px;
  height: 78px;
  margin: 0 auto 11px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(226,189,104,.34);
  background: rgba(209,161,73,.07);
}
.chapter-finale-emblem img { width: 60px; height: 60px; object-fit: contain; }
.chapter-finale-card h2 { margin: 4px 0 8px; font-size: clamp(28px, 5vw, 42px); }
.chapter-finale-lore { max-width: 590px; margin: 0 auto 20px; color: var(--muted); line-height: 1.6; }
.chapter-finale-rewards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin: 0 0 14px;
  text-align: left;
}
.chapter-finale-rewards article,
.chapter-next-teaser {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.chapter-finale-rewards strong,
.chapter-finale-rewards small { display: block; }
.chapter-finale-rewards strong { margin: 3px 0; color: #efd086; font-size: 16px; }
.chapter-finale-rewards small { color: var(--muted); line-height: 1.4; }
.chapter-next-teaser { margin-bottom: 16px; text-align: left; border-color: rgba(209,161,73,.2); }
.chapter-next-teaser h3 { margin: 3px 0 5px; }
.chapter-next-teaser > strong { color: #d8b568; font-size: 12px; }
.chapter-next-teaser p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.chapter-finale-actions { display: flex; justify-content: center; gap: 9px; }
body.chapter-finale-open { overflow: hidden; }
@media (max-width: 900px) {
  .journey-journal-finale { grid-template-columns: 1fr 1fr; }
  .journey-journal-finale > button { justify-self: start; }
}
@media (max-width: 620px) {
  .journey-journal-finale { grid-template-columns: 1fr; }
  .chapter-finale-card { padding: 20px 15px; }
  .chapter-finale-rewards { grid-template-columns: 1fr; }
  .chapter-finale-actions { display: grid; }
  .chapter-finale-actions button { width: 100%; }
}

/* v2.56.5 — Completed Journey tutorial steps fold into compact rows */
.journey-tutorial-step.is-folded {
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(111, 174, 117, 0.035);
}
.journey-tutorial-step-fold {
  width: 100%;
}
.journey-tutorial-step-fold > summary {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.journey-tutorial-step-fold > summary::-webkit-details-marker { display: none; }
.journey-tutorial-step-fold > summary::marker { content: ''; }
.journey-tutorial-step-fold-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.journey-tutorial-step-fold-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.journey-tutorial-step-fold-title small {
  flex: 0 0 auto;
  color: #8fc695;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.journey-tutorial-step-fold-chevron {
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  transition: transform 160ms ease;
}
.journey-tutorial-step-fold[open] .journey-tutorial-step-fold-chevron { transform: rotate(180deg); }
.journey-tutorial-step-fold-details {
  display: grid;
  gap: 2px;
  padding: 0 10px 8px 38px;
}
.journey-tutorial-step-fold-details > span { font-size: 12px; }
.journey-tutorial-step-fold-details > small { color: var(--muted); line-height: 1.35; }
@media (max-width: 760px) {
  .journey-tutorial-step-fold > summary { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .journey-tutorial-step-fold-title small { display: none; }
  .journey-tutorial-step-fold-details { padding-left: 36px; }
}


/* v2.56.6 — Completed Chapter I compacts into a single Den card */
.journey-completed-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(111, 174, 117, 0.28);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(50, 67, 47, 0.16), rgba(209, 161, 73, 0.055));
}
.journey-completed-card[hidden] { display: none !important; }
.journey-completed-card-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(111, 174, 117, 0.3);
  background: rgba(111, 174, 117, 0.08);
  color: #9dd1a2;
  font-weight: 900;
}
.journey-completed-card-copy { min-width: 0; display: grid; gap: 2px; }
.journey-completed-card-copy strong { font-size: 15px; }
.journey-completed-card-copy small { color: var(--muted); line-height: 1.35; }
.journey-journal-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.journey-journal-collapse { padding: 7px 10px; font-size: 11px; }
@media (max-width: 620px) {
  .journey-completed-card { grid-template-columns: 38px minmax(0, 1fr); }
  .journey-completed-card > button { grid-column: 2; justify-self: start; }
  .journey-journal-heading-actions { justify-content: flex-start; }
}


/* ============================================================
   v2.56.7 — Mobile Combat Stabilization — Phase 1
   Final phone-only guardrail layer for the live Combat v2 markup.
   Gameplay, balance, combat timing and desktop layout are unchanged.
   ============================================================ */
@media (max-width:760px){
  #combatPage{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  #combatPage .combat-skills-inline-panel,
  #combatPage .combat-style-panel,
  #combatPage .combat-layout-v2,
  #combatPage .combat-roster-panel,
  #combatPage .combat-battle-panel,
  #combatPage .combat-side-panel,
  #combatPage .combat-food-panel-v2,
  #combatPage .combat-session-panel{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  #combatPage .combat-layout-v2{
    display:flex !important;
    flex-direction:column;
    gap:7px !important;
  }

  #combatPage .combat-side-panel{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
  }

  #combatPage .combat-style-heading,
  #combatPage .combat-panel-heading,
  #combatPage .combat-style-heading>div,
  #combatPage .combat-panel-heading>div{
    min-width:0;
    max-width:100%;
  }

  #combatPage .combat-style-grid,
  #combatPage .combat-enemy-grid,
  #combatPage .combat-food-grid-v2{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  #combatPage .combat-style-button{
    flex:0 0 160px;
    width:160px;
    min-width:0;
    max-width:160px;
    box-sizing:border-box;
  }

  #combatPage .combat-style-button>div{
    min-width:0;
  }

  #combatPage .combat-enemy-card{
    flex:0 0 172px;
    width:172px;
    min-width:0;
    max-width:172px;
    box-sizing:border-box;
  }

  #combatPage .combat-enemy-copy,
  #combatPage .combat-enemy-copy strong,
  #combatPage .combat-enemy-copy small{
    min-width:0;
  }

  #combatPage .combat-enemy-copy strong,
  #combatPage .combat-enemy-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #combatPage .combat-enemy-xp{
    max-width:58px;
    line-height:1.2;
    text-align:right;
    overflow-wrap:anywhere;
  }

  #combatPage .combat-food-choice{
    flex:0 0 160px;
    width:160px;
    min-width:0;
    max-width:160px;
    min-height:54px;
    box-sizing:border-box;
  }

  #combatPage .combat-food-choice-icon{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    min-width:30px;
    overflow:hidden;
  }

  #combatPage .combat-food-choice>div{
    min-width:0;
  }

  #combatPage .combat-food-choice strong,
  #combatPage .combat-food-choice small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #combatPage .combat-food-choice>b{
    white-space:nowrap;
  }

  #combatPage .combat-selected-food-large,
  #combatPage .combat-selected-food-empty,
  #combatPage .combat-selected-food-large>div,
  #combatPage .combat-selected-food-empty>div{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  #combatPage .combat-selected-food-large strong,
  #combatPage .combat-selected-food-large b,
  #combatPage .combat-selected-food-empty strong,
  #combatPage .combat-selected-food-empty b{
    overflow-wrap:anywhere;
  }

  #combatPage #combatAutoEatControl,
  #combatPage .combat-selected-food-large>button,
  #combatPage .combat-stop-button{
    min-height:40px;
    touch-action:manipulation;
  }

  #combatPage .combat-battle-view,
  #combatPage .combat-idle-panel,
  #combatPage .combat-idle-title,
  #combatPage .combat-selected-food-summary,
  #combatPage .combat-battle-clean,
  #combatPage .combat-fighter-clean,
  #combatPage .combat-fighter-clean-head,
  #combatPage .combat-fighter-clean-head>div,
  #combatPage .combat-bottom-actions,
  #combatPage .combat-session-heading-meta,
  #combatPage .combat-session-xp,
  #combatPage .combat-session-summary-row,
  #combatPage .combat-session-summary-copy,
  #combatPage .combat-session-summary-amount{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  #combatPage .combat-session-summary-amount{
    overflow-wrap:anywhere;
  }
}

@media (max-width:620px){
  #combatPage .combat-battle-clean{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #combatPage .combat-vs-clean{
    justify-self:center;
  }

  #combatPage .combat-bottom-actions{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@media (max-width:390px){
  #combatPage .combat-style-button,
  #combatPage .combat-food-choice{
    flex-basis:150px;
    width:150px;
    max-width:150px;
  }

  #combatPage .combat-enemy-card{
    flex-basis:160px;
    width:160px;
    max-width:160px;
  }
}

/* ============================================================
   v2.56.8 — Mobile Combat Layout — Phase 2
   One authoritative phone presentation for the live Combat v2 UI.
   Desktop layout and combat gameplay remain unchanged.
   ============================================================ */
.combat-mobile-fold{display:none}

@media (max-width:760px){
  #combatPage .section-heading{
    margin-bottom:6px;
  }

  #combatPage .section-heading p{
    display:none;
  }

  #combatPage .combat-skills-inline-panel{
    padding:7px !important;
    margin-bottom:7px;
  }

  #combatPage .combat-skills-inline-heading{
    display:none;
  }

  #combatPage .combat-skill-overview-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
    margin:0 !important;
  }

  #combatPage .combat-skill-overview-card{
    padding:6px !important;
    border-radius:8px;
  }

  #combatPage .combat-skill-overview-card .skill-overview-main{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:4px;
  }

  #combatPage .combat-skill-overview-card .skill-overview-icon{
    width:24px;
    height:24px;
    font-size:14px;
  }

  #combatPage .combat-skill-overview-card .skill-overview-copy strong{
    font-size:9px;
  }

  #combatPage .combat-style-panel{
    padding:7px !important;
    margin-bottom:7px;
    border-radius:8px;
  }

  #combatPage .combat-style-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    margin-bottom:6px;
  }

  #combatPage .combat-style-heading .combat-level-badge{
    min-width:76px;
    padding:5px 8px;
  }

  #combatPage .combat-style-heading .combat-level-badge small{
    display:none;
  }

  #combatPage .combat-style-heading .combat-level-badge::before{
    content:'Combat Lv';
    color:var(--muted);
    font-size:7px;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  #combatPage .combat-style-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    padding:0 !important;
  }

  #combatPage .combat-style-button{
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    align-items:center;
    gap:6px;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:50px;
    padding:6px !important;
  }

  #combatPage .combat-style-button .combat-style-icon{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    font-size:18px;
  }

  #combatPage .combat-style-button small{
    display:none !important;
  }

  #combatPage .combat-style-button strong{
    font-size:9px;
  }

  #combatPage .combat-style-button b{
    margin-top:2px;
    font-size:7px;
    line-height:1.2;
  }

  #combatPage .combat-layout-v2{
    gap:7px !important;
  }

  #combatPage .combat-roster-panel{order:1}
  #combatPage .combat-battle-panel{order:2}
  #combatPage .combat-side-panel{order:3}

  #combatPage.combat-active .combat-battle-panel{order:1}
  #combatPage.combat-active .combat-roster-panel{order:2}
  #combatPage.combat-active .combat-side-panel{order:3}

  #combatPage .combat-roster-panel,
  #combatPage .combat-battle-panel,
  #combatPage .combat-food-panel-v2,
  #combatPage .combat-session-panel{
    padding:7px !important;
    border-radius:8px;
  }

  #combatPage .combat-enemy-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
    padding:0 !important;
  }

  #combatPage .combat-enemy-card{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    grid-template-areas:'icon copy' 'xp xp';
    align-items:center;
    gap:3px 6px;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:64px;
    padding:6px !important;
  }

  #combatPage .combat-enemy-icon{
    grid-area:icon;
    width:32px;
    height:32px;
  }

  #combatPage .combat-enemy-copy{
    grid-area:copy;
  }

  #combatPage .combat-enemy-copy strong{
    font-size:9px;
  }

  #combatPage .combat-enemy-copy small{
    font-size:7px;
  }

  #combatPage .combat-enemy-xp{
    grid-area:xp;
    max-width:none;
    width:100%;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:7px;
  }

  #combatPage .combat-battle-clean{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) !important;
    align-items:stretch;
    gap:5px !important;
  }

  #combatPage .combat-fighter-clean{
    padding:7px !important;
    border-radius:8px;
  }

  #combatPage .combat-fighter-clean-head{
    gap:5px;
  }

  #combatPage .combat-fighter-clean-head>span{
    width:30px;
    height:30px;
    font-size:18px;
  }

  #combatPage .combat-fighter-clean-head small,
  #combatPage .combat-fighter-clean-head b{
    font-size:7px;
  }

  #combatPage .combat-fighter-clean-head strong{
    font-size:10px;
  }

  #combatPage .combat-health-line{
    margin-top:6px;
    font-size:8px;
  }

  #combatPage .combat-health-bar{
    height:6px;
    margin:3px 0 5px;
  }

  #combatPage .combat-attack-timer small{
    font-size:7px;
  }

  #combatPage .combat-clean-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:3px;
  }

  #combatPage .combat-clean-stats span{
    padding:4px 2px;
    font-size:7px;
  }

  #combatPage .combat-vs-clean{
    align-self:center;
    justify-self:center;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    font-size:8px;
  }

  #combatPage .combat-bottom-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:5px !important;
    margin-top:6px;
  }

  #combatPage .combat-repeat-note{
    padding:6px;
    font-size:7px;
    line-height:1.25;
  }

  #combatPage .combat-stop-button{
    min-height:38px;
    padding:6px 9px;
    font-size:9px;
  }

  #combatPage .combat-idle-panel{
    padding:7px !important;
  }

  #combatPage .combat-idle-stats{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  #combatPage .combat-idle-stats>div{
    padding:5px 3px !important;
  }

  #combatPage .combat-idle-stats small{
    font-size:6px;
  }

  #combatPage .combat-idle-stats strong{
    font-size:10px;
  }

  #combatPage .combat-side-panel{
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
  }

  #combatPage .combat-selected-food-large,
  #combatPage .combat-selected-food-empty{
    padding:7px;
    min-height:48px;
  }

  #combatPage .combat-selected-food-large>span,
  #combatPage .combat-selected-food-empty>span{
    font-size:20px;
  }

  #combatPage .combat-mobile-fold{
    display:flex;
    width:100%;
    min-height:38px;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:5px;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--surface-2);
    color:var(--text);
    text-align:left;
    touch-action:manipulation;
  }

  #combatPage .combat-mobile-fold span{
    font-size:9px;
    font-weight:700;
  }

  #combatPage .combat-mobile-fold b{
    color:var(--gold);
    font-size:8px;
  }

  #combatPage .combat-food-grid-v2,
  #combatPage .combat-session-loot{
    display:none !important;
  }

  #combatPage .combat-food-panel-v2.mobile-expanded .combat-food-grid-v2{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    max-height:220px;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin-top:5px;
    padding:0 2px 0 0 !important;
  }

  #combatPage .combat-session-panel.mobile-expanded .combat-session-loot{
    display:grid !important;
    max-height:220px;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin-top:5px;
  }

  #combatPage .combat-food-choice{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:52px;
    padding:6px !important;
  }

  #combatPage .combat-food-choice>b{
    display:none;
  }

  #combatPage .combat-session-heading-meta{
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  #combatPage .combat-session-heading-meta strong{
    padding:4px 6px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--surface-2);
    font-size:8px;
  }

  #combatPage .combat-session-xp{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    margin-top:5px;
  }

  #combatPage .combat-session-summary-row{
    grid-template-columns:28px minmax(0,1fr) auto;
  }

  #combatPage .combat-last-loot{
    max-height:100px;
    overflow:auto;
  }
}

@media (max-width:430px){
  #combatPage .combat-battle-clean{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #combatPage .combat-vs-clean{
    width:auto;
    height:auto;
    padding:0;
  }

  #combatPage .combat-vs-clean::after{
    content:' • ';
  }

  #combatPage .combat-bottom-actions{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #combatPage .combat-stop-button{
    width:100%;
  }
}

@media (max-width:360px){
  #combatPage .combat-food-panel-v2.mobile-expanded .combat-food-grid-v2{
    grid-template-columns:minmax(0,1fr) !important;
  }

  #combatPage .combat-skill-overview-card .skill-overview-icon{
    display:none;
  }

  #combatPage .combat-skill-overview-card .skill-overview-main{
    grid-template-columns:minmax(0,1fr) auto;
  }
}

/* ============================================================
   v2.56.9 — Mobile Combat Polish & Stability — Phase 3
   Final phone readability, touch-target and hierarchy pass.
   Presentation-only: combat gameplay, balance and save data unchanged.
   ============================================================ */
@media (max-width:760px){
  #combatPage .combat-style-panel,
  #combatPage .combat-roster-panel,
  #combatPage .combat-battle-panel,
  #combatPage .combat-food-panel-v2,
  #combatPage .combat-session-panel{
    box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
  }

  #combatPage.combat-active .combat-battle-panel{
    border-color:rgba(215,173,86,.34);
    box-shadow:0 0 0 1px rgba(215,173,86,.05), 0 1px 0 rgba(255,255,255,.025) inset;
  }

  #combatPage .combat-panel-heading h3,
  #combatPage .combat-style-heading h3{
    font-size:12px;
    line-height:1.2;
  }

  #combatPage .combat-style-heading .combat-level-badge::before{
    font-size:8px;
  }

  #combatPage .combat-style-heading .combat-level-badge strong{
    font-size:12px;
  }

  #combatPage .combat-style-button{
    min-height:54px;
    padding:7px !important;
  }

  #combatPage .combat-style-button strong{
    font-size:10px;
    line-height:1.15;
  }

  #combatPage .combat-style-button b{
    font-size:8px;
    line-height:1.25;
  }

  #combatPage .combat-style-button.active{
    box-shadow:0 0 0 1px rgba(215,173,86,.22) inset;
  }

  #combatPage .combat-enemy-card{
    min-height:70px;
    padding:7px !important;
  }

  #combatPage .combat-enemy-copy strong{
    font-size:10px;
    line-height:1.15;
  }

  #combatPage .combat-enemy-copy small,
  #combatPage .combat-enemy-xp{
    font-size:8px;
    line-height:1.25;
  }

  #combatPage .combat-enemy-card.active{
    box-shadow:0 0 0 1px rgba(215,173,86,.2) inset;
  }

  #combatPage .combat-fighter-clean{
    padding:8px !important;
  }

  #combatPage .combat-fighter-clean-head small,
  #combatPage .combat-fighter-clean-head b{
    font-size:8px;
    line-height:1.2;
  }

  #combatPage .combat-fighter-clean-head strong{
    font-size:11px;
    line-height:1.15;
  }

  #combatPage .combat-health-line{
    font-size:9px;
  }

  #combatPage .combat-attack-timer small,
  #combatPage .combat-clean-stats span{
    font-size:8px;
  }

  #combatPage .combat-repeat-note{
    font-size:8px;
    line-height:1.35;
  }

  #combatPage .combat-stop-button,
  #combatPage #combatAutoEatControl,
  #combatPage .combat-selected-food-large>button{
    min-height:44px;
    font-size:10px;
  }

  #combatPage .combat-side-help{
    font-size:8px;
    line-height:1.35;
  }

  #combatPage .combat-selected-food-large small,
  #combatPage .combat-selected-food-empty small,
  #combatPage .combat-selected-food-large b,
  #combatPage .combat-selected-food-empty b{
    font-size:8px;
    line-height:1.25;
  }

  #combatPage .combat-selected-food-large strong,
  #combatPage .combat-selected-food-empty strong{
    font-size:10px;
    line-height:1.2;
  }

  #combatPage .combat-mobile-fold{
    min-height:44px;
    padding:8px 9px;
  }

  #combatPage .combat-mobile-fold span{
    font-size:10px;
  }

  #combatPage .combat-mobile-fold b{
    font-size:9px;
  }

  #combatPage .combat-mobile-fold[aria-expanded="true"]{
    border-color:rgba(215,173,86,.28);
    background:rgba(215,173,86,.055);
  }

  #combatPage .combat-food-panel-v2.mobile-expanded .combat-food-grid-v2,
  #combatPage .combat-session-panel.mobile-expanded .combat-session-loot{
    max-height:min(38vh,260px);
    scrollbar-gutter:stable;
  }

  #combatPage .combat-food-choice{
    min-height:56px;
    padding:7px !important;
  }

  #combatPage .combat-food-choice strong{
    font-size:10px;
    line-height:1.15;
  }

  #combatPage .combat-food-choice small{
    font-size:8px;
    line-height:1.25;
  }

  #combatPage .combat-session-heading-meta strong{
    font-size:8px;
    line-height:1.2;
  }

  #combatPage .combat-session-xp small{
    font-size:8px;
  }

  #combatPage .combat-session-xp strong{
    font-size:10px;
  }

  #combatPage .combat-session-summary-copy strong,
  #combatPage .combat-session-summary-amount strong,
  #combatPage .combat-session-loot-row strong{
    font-size:9px;
  }

  #combatPage .combat-session-summary-copy small,
  #combatPage .combat-session-loot-row small,
  #combatPage .combat-session-empty{
    font-size:8px;
    line-height:1.3;
  }

  #combatPage .combat-style-button:focus-visible,
  #combatPage .combat-enemy-card:focus-visible,
  #combatPage .combat-food-choice:focus-visible,
  #combatPage .combat-mobile-fold:focus-visible,
  #combatPage #combatAutoEatControl:focus-visible,
  #combatPage .combat-selected-food-large>button:focus-visible,
  #combatPage .combat-stop-button:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
}

@media (max-width:430px){
  #combatPage .combat-vs-clean{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    min-height:14px;
    color:var(--muted);
    font-size:8px;
    font-weight:800;
  }

  #combatPage .combat-vs-clean::before,
  #combatPage .combat-vs-clean::after{
    content:'';
    height:1px;
    flex:1 1 auto;
    background:var(--line);
  }

  #combatPage .combat-vs-clean::after{
    content:'';
  }
}

@media (max-width:360px){
  #combatPage .combat-style-button{
    grid-template-columns:24px minmax(0,1fr);
    gap:5px;
  }

  #combatPage .combat-style-button .combat-style-icon{
    width:24px;
    height:24px;
    font-size:16px;
  }

  #combatPage .combat-enemy-card{
    grid-template-columns:28px minmax(0,1fr);
    gap:3px 5px;
  }

  #combatPage .combat-enemy-icon{
    width:28px;
    height:28px;
  }
}

@media (prefers-reduced-motion:reduce){
  #combatPage .combat-style-button,
  #combatPage .combat-enemy-card,
  #combatPage .combat-mobile-fold,
  #combatPage .combat-stop-button{
    transition:none !important;
  }
}


/* ============================================================
   v2.57.0 — MOBILE UI FOUNDATION — PHASE 1
   Phone-only shell/navigation/header/modal polish.
   Desktop/PC presentation remains owned by the existing rules.
   ============================================================ */
.mobile-header-logo{display:none;}

@media (max-width:760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:clip !important;
  }

  body{
    padding-bottom:calc(68px + env(safe-area-inset-bottom)) !important;
    scroll-padding-top:64px !important;
    scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .app-shell,
  .app-main,
  main,
  .page{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:clip !important;
  }

  /* Compact mobile game header: official brand + health + core account stats. */
  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1450 !important;
    display:grid !important;
    grid-template-columns:76px minmax(82px,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
    min-height:54px !important;
    padding:max(7px,env(safe-area-inset-top)) 8px 7px !important;
    border-bottom:1px solid rgba(244,183,45,.12) !important;
    background:rgba(8,18,27,.975) !important;
    box-shadow:0 5px 18px rgba(3,9,14,.24) !important;
  }

  .mobile-header-logo{
    display:block;
    width:76px;
    height:auto;
    max-height:34px;
    object-fit:contain;
    justify-self:start;
  }

  .topbar-title{
    min-width:0;
  }

  .topbar-title > .eyebrow,
  .topbar-title > p{
    display:none !important;
  }

  .health-header-stat{
    width:100%;
    min-width:0 !important;
    padding:0;
  }

  .health-header-stat > span{
    display:block;
    font-size:8px !important;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .health-header-stat > strong{
    display:block;
    margin-top:2px;
    overflow:hidden;
    font-size:11px !important;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .health-header-stat .health-bar{
    height:5px !important;
    margin-top:4px;
  }

  .top-stats{
    display:grid !important;
    grid-template-columns:repeat(2,56px) !important;
    gap:4px !important;
    width:auto !important;
  }

  .top-stats .stat-chip{
    min-width:0 !important;
    width:56px !important;
    min-height:40px;
    display:grid !important;
    grid-template-columns:1fr !important;
    align-content:center;
    gap:2px !important;
    padding:4px 5px !important;
    border-radius:8px;
    text-align:center;
  }

  .top-stats .stat-interface-icon-art{
    display:none !important;
  }

  .top-stats .stat-chip span{
    display:block !important;
    overflow:hidden;
    color:var(--muted);
    font-size:6.5px !important;
    line-height:1;
    letter-spacing:.03em;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .top-stats .stat-chip strong{
    display:block;
    overflow:hidden;
    font-size:10.5px !important;
    line-height:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Phone navigation becomes a fixed thumb bar. Desktop sidebar is untouched. */
  .mobile-top-navigation{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:1700 !important;
    width:100% !important;
    padding:0 0 env(safe-area-inset-bottom) !important;
    border-top:1px solid rgba(244,183,45,.17) !important;
    border-bottom:0 !important;
    background:rgba(7,16,24,.985) !important;
    box-shadow:0 -10px 30px rgba(2,8,13,.42) !important;
  }

  .mobile-nav-primary{
    position:relative;
    z-index:1720;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:5px 6px 6px !important;
    background:transparent !important;
  }

  .mobile-nav-item{
    min-height:54px !important;
    gap:3px !important;
    padding:5px 2px !important;
    border-radius:10px !important;
    touch-action:manipulation;
  }

  .mobile-nav-item > span{
    min-height:24px !important;
    font-size:19px !important;
  }

  .mobile-nav-item > b{
    font-size:9px !important;
    font-weight:780 !important;
    line-height:1.05 !important;
  }

  .mobile-nav-item.active,
  .mobile-nav-item.menu-open{
    border-color:rgba(244,183,45,.42) !important;
    background:linear-gradient(180deg,rgba(244,183,45,.13),rgba(244,183,45,.055)) !important;
  }

  .mobile-nav-item:focus-visible,
  .mobile-nav-more-item:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:-2px;
  }

  /* More becomes a bottom sheet that opens directly above the thumb bar. */
  .mobile-nav-more{
    top:auto !important;
    bottom:100% !important;
    left:6px !important;
    right:6px !important;
    max-height:min(72dvh,620px) !important;
    padding:10px !important;
    border:1px solid rgba(244,183,45,.20) !important;
    border-bottom-color:rgba(244,183,45,.11) !important;
    border-radius:14px 14px 0 0 !important;
    background:rgba(8,18,27,.997) !important;
    box-shadow:0 -18px 42px rgba(2,8,13,.58) !important;
  }

  .mobile-nav-more-heading{
    position:sticky;
    top:-10px;
    z-index:2;
    margin:-10px -10px 7px;
    padding:11px 12px 9px !important;
    background:rgba(8,18,27,.997);
  }

  .mobile-nav-more-heading strong{
    font-size:13px !important;
  }

  .mobile-nav-more-heading span{
    font-size:9px !important;
  }

  .mobile-nav-more-group{
    padding:8px !important;
  }

  .mobile-nav-more-label{
    font-size:8.5px !important;
  }

  .mobile-nav-more-item{
    min-height:46px !important;
    border-radius:9px !important;
  }

  .mobile-nav-more-item > b{
    font-size:10px !important;
  }

  /* Global phone spacing and overflow guardrails. */
  main{
    padding:10px !important;
  }

  .page > *,
  .card,
  .panel,
  section,
  article{
    min-width:0;
    max-width:100%;
  }

  img,
  svg,
  canvas,
  video{
    max-width:100%;
  }

  pre,
  code{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .current-journey-tracker{
    margin:8px 10px 0 !important;
  }

  /* Standard phone tap targets without altering desktop density. */
  button,
  [role="button"],
  input,
  select,
  textarea{
    touch-action:manipulation;
  }

  button,
  [role="button"]{
    min-height:44px;
  }

  input,
  select,
  textarea{
    min-height:44px;
    font-size:16px !important;
  }

  /* Shared dialogs use a predictable phone sheet treatment. */
  .offline-modal,
  .cloud-conflict-modal,
  .expedition-start-modal,
  .sell-confirm-modal,
  .chapter-finale-modal,
  .skill-detail-modal,
  .skill-details-modal,
  .bank-item-modal-v2{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
  }

  .offline-modal-card,
  .cloud-conflict-card,
  .expedition-start-card,
  .sell-confirm-card,
  .chapter-finale-card,
  .skill-detail-panel,
  .skill-details-panel,
  .bank-item-panel-v2{
    width:100% !important;
    max-width:none !important;
    max-height:min(88dvh,760px) !important;
    margin:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    border-radius:16px 16px 0 0 !important;
    padding-bottom:max(16px,env(safe-area-inset-bottom)) !important;
  }

  .offline-modal-card button,
  .cloud-conflict-card button,
  .expedition-start-card button,
  .sell-confirm-card button,
  .chapter-finale-card button,
  .skill-detail-panel button,
  .skill-details-panel button,
  .bank-item-panel-v2 button{
    min-height:44px !important;
  }

  .gain-feed{
    bottom:calc(76px + env(safe-area-inset-bottom)) !important;
  }

  footer{
    margin-bottom:0 !important;
    padding-bottom:12px !important;
  }
}

@media (max-width:390px){
  .topbar{
    grid-template-columns:72px minmax(76px,1fr) auto !important;
    gap:5px !important;
    padding-inline:6px !important;
  }

  .mobile-header-logo{
    width:72px;
  }

  .top-stats{
    grid-template-columns:repeat(2,52px) !important;
  }

  .top-stats .stat-chip{
    width:52px !important;
    padding-inline:4px !important;
  }

  .mobile-nav-primary{
    gap:2px !important;
    padding-inline:4px !important;
  }

  .mobile-nav-item{
    min-height:52px !important;
  }

  .mobile-nav-item > b{
    font-size:8.5px !important;
  }

  main{
    padding:8px !important;
  }

  .current-journey-tracker{
    margin-inline:8px !important;
  }

  .mobile-nav-more{
    left:4px !important;
    right:4px !important;
    padding:8px !important;
  }
}

@media (max-width:340px){
  .topbar{
    grid-template-columns:62px minmax(66px,1fr) auto !important;
  }

  .mobile-header-logo{
    width:62px;
  }

  .top-stats{
    grid-template-columns:repeat(2,48px) !important;
  }

  .top-stats .stat-chip{
    width:48px !important;
  }

  .mobile-nav-item > b{
    font-size:7.5px !important;
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .mobile-nav-item,
  .mobile-nav-more-item,
  .topbar,
  .mobile-top-navigation{
    transition:none !important;
  }
}

/* ============================================================
   v2.57.1 — MOBILE SKILLS UI — PHASE 2
   Phone-only activity + skill progression presentation.
   Desktop/PC layout remains governed by the existing rules.
   ============================================================ */

.mobile-skill-training-summary,
.activity-mobile-mastery{
  display:none;
}

@media (max-width:760px){
  /* ---------- Activities: selected skill + training ---------- */
  #activitiesPage .page-title-row{
    margin-bottom:8px;
  }

  #activitiesPage .page-title-row h2{
    font-size:22px;
  }

  #activitiesPage .activity-layout{
    display:block !important;
  }

  #activitiesPage .activity-sidebar-panel{
    position:static !important;
    margin:0 0 8px !important;
    border-radius:11px !important;
    background:rgba(8,18,27,.90);
  }

  #activitiesPage .activity-sidebar-panel .panel-heading{
    display:none !important;
  }

  #activitiesPage .skill-tabs{
    display:flex !important;
    gap:6px !important;
    width:100%;
    padding:6px !important;
    overflow-x:auto !important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    background:transparent !important;
  }

  #activitiesPage .skill-tabs::-webkit-scrollbar{
    display:none;
  }

  #activitiesPage .skill-tabs button{
    flex:0 0 96px !important;
    width:96px !important;
    min-width:96px !important;
    min-height:54px !important;
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr);
    align-items:center;
    justify-content:start !important;
    gap:7px !important;
    padding:7px 8px !important;
    border:1px solid rgba(142,164,180,.16) !important;
    border-radius:9px !important;
    background:rgba(14,27,37,.88) !important;
    text-align:left !important;
    scroll-snap-align:start;
  }

  #activitiesPage .skill-tabs button.active{
    border-color:rgba(244,183,45,.62) !important;
    background:linear-gradient(180deg,rgba(244,183,45,.13),rgba(244,183,45,.055)) !important;
    box-shadow:inset 0 0 0 1px rgba(244,183,45,.08) !important;
  }

  #activitiesPage .skill-tabs button.skill-locked{
    opacity:.58;
  }

  #activitiesPage .skill-tab-icon{
    display:grid;
    place-items:center;
    width:24px !important;
    min-width:24px;
    font-size:20px !important;
  }

  #activitiesPage .skill-tab-icon-art{
    width:23px;
    height:23px;
    object-fit:contain;
  }

  #activitiesPage .skill-tabs button b{
    overflow:hidden;
    font-size:11px !important;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #activitiesPage .skill-tabs button small{
    margin-top:3px !important;
    font-size:9px !important;
    line-height:1;
  }

  .mobile-skill-training-summary{
    display:grid;
    gap:7px;
    margin:0 0 8px;
    padding:10px 11px;
    border:1px solid rgba(244,183,45,.18);
    border-radius:11px;
    background:linear-gradient(135deg,rgba(244,183,45,.09),rgba(13,26,35,.94));
  }

  .mobile-skill-training-summary.skill-locked{
    border-color:var(--line);
    background:var(--surface);
  }

  .mobile-skill-summary-head{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-width:0;
  }

  .mobile-skill-summary-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid rgba(244,183,45,.18);
    border-radius:9px;
    background:rgba(4,12,18,.38);
    font-size:24px;
  }

  .mobile-skill-summary-icon-art{
    width:30px;
    height:30px;
    object-fit:contain;
  }

  .mobile-skill-summary-copy,
  .mobile-skill-summary-level{
    display:grid;
    min-width:0;
  }

  .mobile-skill-summary-copy small,
  .mobile-skill-summary-level small{
    color:var(--muted);
    font-size:8px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .mobile-skill-summary-copy strong{
    overflow:hidden;
    margin-top:1px;
    font-size:15px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-skill-summary-level{
    min-width:46px;
    text-align:right;
  }

  .mobile-skill-summary-level b{
    color:var(--gold);
    font-size:19px;
    line-height:1;
  }

  .mobile-skill-summary-xp,
  .mobile-skill-summary-meta{
    display:flex;
    justify-content:space-between;
    gap:8px;
    min-width:0;
    font-size:9px;
  }

  .mobile-skill-summary-xp{
    color:var(--text);
  }

  .mobile-skill-summary-meta{
    color:var(--muted);
  }

  .mobile-skill-summary-xp span,
  .mobile-skill-summary-meta span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-skill-summary-progress{
    height:7px;
    overflow:hidden;
    border:1px solid rgba(142,164,180,.14);
    border-radius:999px;
    background:#071119;
  }

  .mobile-skill-summary-progress span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#c89028,#f0c457);
  }

  .mobile-skill-summary-locked{
    padding-top:2px;
    color:var(--muted);
    font-size:10px;
    line-height:1.35;
  }

  /* Idle state becomes unobtrusive; active training remains prominent. */
  #activitiesPage .current-activity-card.is-idle{
    display:none !important;
  }

  #activitiesPage .current-activity-card:not(.is-idle){
    margin:0 0 8px !important;
    overflow:hidden;
    border-color:rgba(244,183,45,.42) !important;
    border-radius:11px !important;
    background:linear-gradient(135deg,rgba(244,183,45,.12),rgba(13,26,35,.96)) !important;
  }

  #activitiesPage .current-activity-card:not(.is-idle) .activity-header{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:9px !important;
    padding:10px 11px !important;
  }

  #activitiesPage .current-activity-card:not(.is-idle) .activity-header h2{
    margin:1px 0 2px !important;
    font-size:15px !important;
  }

  #activitiesPage .current-activity-card:not(.is-idle) .activity-header p{
    margin:0;
    color:var(--muted);
    font-size:10px !important;
    line-height:1.3;
  }

  #activitiesPage #stopActivityButton{
    min-width:70px;
    min-height:44px !important;
    padding:7px 10px !important;
    font-size:10px;
  }

  #activitiesPage .progress-panel{
    padding:8px 11px 10px !important;
  }

  #activitiesPage .progress-meta{
    margin-bottom:5px;
    font-size:10px !important;
  }

  #activitiesPage .progress-track{
    height:9px;
  }

  /* Filters stay usable without becoming a second fixed header. */
  #activitiesPage .activity-browse-controls{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    margin:0 0 8px !important;
    padding:8px !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }

  #activitiesPage .activity-quick-nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:7px !important;
  }

  #activitiesPage .activity-main-filters{
    display:grid !important;
    gap:6px !important;
    overflow:visible !important;
  }

  #activitiesPage .activity-availability-nav,
  #activitiesPage .activity-category-nav{
    max-width:none !important;
    width:100%;
    overflow:hidden;
  }

  #activitiesPage .activity-filter-chips{
    gap:5px !important;
    overflow-x:auto;
    flex-wrap:nowrap !important;
    padding:0 0 2px;
    scrollbar-width:none;
  }

  #activitiesPage .activity-filter-chips::-webkit-scrollbar{
    display:none;
  }

  #activitiesPage .activity-filter-chip{
    flex:0 0 auto;
    min-height:38px !important;
    padding:6px 9px !important;
    border-radius:8px !important;
    font-size:9.5px !important;
  }

  #activitiesPage .activity-filter-toggle{
    min-width:74px;
    min-height:44px !important;
    justify-content:center;
    padding:7px 9px !important;
    font-size:10px !important;
  }

  #activitiesPage .activity-advanced-filters{
    margin-top:8px !important;
    padding-top:8px !important;
  }

  #activitiesPage .activity-advanced-filters .activity-search input,
  #activitiesPage .activity-compact-selects select{
    min-height:44px !important;
  }

  #activitiesPage .activity-clear-filters{
    min-height:44px !important;
    padding:7px 10px !important;
    font-size:10px !important;
  }

  #activitiesPage .activity-filter-summary{
    font-size:9px !important;
    line-height:1.35;
  }

  /* Activities become readable tap rows rather than squeezed desktop cards. */
  #activitiesPage #activityCards:not(.farming-activity-root),
  #activitiesPage .activity-card-grid,
  #activitiesPage .activity-category-grid,
  #activitiesPage .activity-category-grid-selected{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  #activitiesPage .activity-category-section{
    margin:10px 0 0 !important;
  }

  #activitiesPage .activity-category-heading{
    position:static !important;
    top:auto !important;
    z-index:auto !important;
    align-items:center !important;
    margin:0 0 6px !important;
    padding:7px 2px !important;
    background:transparent !important;
  }

  #activitiesPage .activity-category-heading h3{
    font-size:14px !important;
  }

  #activitiesPage .activity-category-heading > span{
    font-size:9px !important;
  }

  #activitiesPage .activity-click-card{
    min-height:0;
    display:grid;
    gap:6px;
    padding:11px 12px !important;
    border-radius:11px !important;
    background:linear-gradient(145deg,rgba(15,29,39,.96),rgba(8,19,27,.98));
  }

  #activitiesPage .activity-click-card.active-card{
    border-color:rgba(244,183,45,.72) !important;
    background:linear-gradient(145deg,rgba(244,183,45,.12),rgba(10,23,31,.98)) !important;
  }

  #activitiesPage .activity-click-card.activity-disabled{
    opacity:.67;
  }

  #activitiesPage .activity-click-card .card-top{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center !important;
    gap:10px !important;
  }

  #activitiesPage .activity-click-card .card-top > div{
    min-width:0;
  }

  #activitiesPage .activity-click-card .eyebrow{
    font-size:8.5px !important;
  }

  #activitiesPage .activity-click-card h3{
    overflow:hidden;
    margin:2px 0 0 !important;
    font-size:15px !important;
    line-height:1.15 !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #activitiesPage .activity-click-card .large-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    justify-self:end;
    border:1px solid rgba(142,164,180,.13);
    border-radius:9px;
    background:rgba(4,12,18,.32);
    font-size:26px !important;
  }

  #activitiesPage .activity-item-icon-art{
    width:34px;
    height:34px;
    object-fit:contain;
  }

  #activitiesPage .activity-click-card .requirements{
    min-height:0 !important;
    margin:0 !important;
    color:#b9c6cf;
    font-size:10.5px !important;
    line-height:1.35 !important;
  }

  #activitiesPage .activity-click-card > p:not(.requirements){
    margin:0 !important;
    color:var(--gold);
    font-size:10.5px !important;
    font-weight:700;
    line-height:1.25;
  }

  .activity-mobile-mastery{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-top:5px;
    border-top:1px solid rgba(142,164,180,.10);
    color:var(--muted);
    font-size:9px;
  }

  .activity-mobile-mastery b{
    color:#c8d2d8;
    font-size:9px;
    font-weight:700;
  }

  #activitiesPage .activity-card-state{
    margin-top:0 !important;
    padding:6px 8px;
    border-radius:7px;
    background:rgba(244,183,45,.09);
    font-size:9px !important;
    line-height:1.1;
  }

  #activitiesPage .activity-card-state.blocked{
    background:rgba(185,91,91,.08);
  }

  #activitiesPage .skill-discovery-lock{
    padding:20px 14px !important;
    border-radius:11px;
  }

  #activitiesPage .skill-discovery-lock button{
    width:100%;
    min-height:44px !important;
  }

  /* ---------- Farming uses the same phone rhythm ---------- */
  #activitiesPage .farming-dashboard{
    gap:9px !important;
  }

  #activitiesPage .farming-dashboard-hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:11px !important;
  }

  #activitiesPage .farming-dashboard-hero h2{
    font-size:18px !important;
  }

  #activitiesPage .farming-dashboard-hero p{
    margin-top:4px !important;
    font-size:10px !important;
    line-height:1.35;
  }

  #activitiesPage .farming-plot-count{
    min-width:72px !important;
    width:auto !important;
    padding:7px 9px !important;
  }

  #activitiesPage .farming-plot-count strong{
    font-size:19px !important;
  }

  #activitiesPage .farming-plot-count span{
    font-size:7.5px !important;
  }

  #activitiesPage .farming-stat-strip{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #activitiesPage .farming-stat-strip > div{
    padding:8px 9px !important;
  }

  #activitiesPage .farming-stat-strip > div:last-child{
    grid-column:1/-1;
  }

  #activitiesPage .farming-stat-strip small{
    font-size:8px !important;
  }

  #activitiesPage .farming-stat-strip strong{
    font-size:11px !important;
  }

  #activitiesPage .farming-plot-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  #activitiesPage .farming-plot-card{
    padding:11px !important;
    border-radius:11px !important;
  }

  #activitiesPage .farming-plot-head{
    gap:9px !important;
    margin-bottom:9px !important;
  }

  #activitiesPage .farming-plot-head h3{
    font-size:15px !important;
  }

  #activitiesPage .farming-plot-number,
  #activitiesPage .farming-crop-icon{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
  }

  #activitiesPage .farming-plot-form{
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  #activitiesPage .farming-plot-form select,
  #activitiesPage .farming-plot-form button,
  #activitiesPage .farming-harvest-button{
    min-height:44px !important;
    height:auto !important;
  }

  #activitiesPage .farming-growth-meta,
  #activitiesPage .farming-harvest-preview{
    font-size:10px !important;
  }

  #activitiesPage .farming-seed-vault{
    grid-template-columns:1fr !important;
    gap:9px !important;
    padding:11px !important;
  }

  #activitiesPage .farming-seed-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #activitiesPage .farming-seed-chip{
    padding:7px !important;
  }

  #activitiesPage .farming-source-note{
    display:grid !important;
    gap:4px !important;
    padding:9px 10px !important;
    font-size:10px;
    line-height:1.35;
  }

  #activitiesPage .farming-contract-card{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:11px !important;
  }

  #activitiesPage .farming-contract-icon{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }

  #activitiesPage .farming-contract-main h3{
    font-size:16px !important;
  }

  #activitiesPage .farming-contract-progress,
  #activitiesPage .farming-contract-rewards,
  #activitiesPage .farming-contract-actions{
    grid-column:1 !important;
  }

  #activitiesPage .farming-contract-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  #activitiesPage .farming-contract-actions button{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  /* ---------- Skills overview ---------- */
  #skillsPage .section-heading{
    margin-bottom:8px !important;
  }

  #skillsPage .section-heading h2{
    font-size:22px !important;
  }

  #skillsPage .section-heading p{
    margin-top:3px;
    font-size:11px !important;
    line-height:1.35;
  }

  #skillCards{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  #skillCards .skill-card{
    min-width:0;
    min-height:118px;
    display:grid;
    align-content:start;
    gap:7px;
    padding:10px !important;
    border-radius:11px !important;
  }

  #skillCards .skill-card .card-top{
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    gap:4px !important;
    align-items:start !important;
  }

  #skillCards .skill-card .eyebrow{
    overflow:hidden;
    font-size:9px !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  #skillCards .skill-card h3{
    margin:3px 0 0 !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }

  #skillCards .skill-card-heading-icon{
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    margin-right:3px;
    vertical-align:middle;
  }

  #skillCards .skill-card-icon-art{
    width:23px;
    height:23px;
    object-fit:contain;
  }

  #skillCards .skill-card [data-skill-card-xp]{
    color:#cbd5dc;
    font-size:9.5px !important;
    font-weight:700;
  }

  #skillCards .skill-card-progress{
    height:7px !important;
    margin:1px 0 0 !important;
    border-radius:999px !important;
  }

  #skillCards .skill-card [data-skill-card-next]{
    display:-webkit-box;
    overflow:hidden;
    min-height:25px;
    color:var(--muted);
    font-size:9.5px !important;
    line-height:1.3;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  #skillCards .skill-card.skill-locked{
    opacity:.62;
  }

  /* Skill detail opens above the fixed phone navigation. */
  #skillsPage .skill-detail-modal{
    z-index:1900 !important;
    align-items:flex-end !important;
    padding:0 !important;
  }

  #skillsPage .skill-detail-panel,
  #skillsPage .skill-detail-modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:88dvh !important;
    border-radius:16px 16px 0 0 !important;
    padding:0 0 max(12px,env(safe-area-inset-bottom)) !important;
  }

  #skillsPage .skill-detail-header{
    position:sticky !important;
    top:0 !important;
    z-index:4 !important;
    min-height:62px;
    align-items:center !important;
    padding:10px 11px !important;
    border-bottom:1px solid var(--line);
    background:rgba(8,18,27,.995) !important;
  }

  #skillsPage .skill-detail-header h3{
    font-size:17px !important;
  }

  #skillsPage .skill-detail-title-icon,
  #skillsPage .skill-detail-icon-art{
    width:27px;
    height:27px;
    object-fit:contain;
    vertical-align:middle;
  }

  #skillsPage .skill-detail-header-actions{
    flex-direction:row !important;
    align-items:center !important;
    gap:7px !important;
  }

  #skillsPage .skill-detail-header-actions strong{
    color:var(--gold);
    font-size:11px !important;
    white-space:nowrap;
  }

  #skillsPage .skill-detail-close{
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    border-radius:9px !important;
  }

  #skillsPage .skill-detail-tabs{
    position:sticky !important;
    top:62px !important;
    z-index:3 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:6px !important;
    margin:0 !important;
    padding:8px 11px !important;
    border-bottom:1px solid var(--line);
    background:rgba(8,18,27,.995) !important;
  }

  #skillsPage .skill-detail-tabs button{
    min-height:44px !important;
    padding:7px 10px !important;
    font-size:10px !important;
  }

  #skillsPage .skill-detail-view{
    padding:10px 11px !important;
  }

  #skillsPage .skill-unlock-list{
    gap:6px !important;
  }

  #skillsPage .skill-unlock-row{
    min-height:46px;
    gap:8px !important;
    padding:8px 9px !important;
    font-size:10.5px;
    line-height:1.25;
  }

  #skillsPage .skill-unlock-row > span{
    min-width:0;
    overflow-wrap:anywhere;
  }

  #skillsPage .skill-unlock-row b{
    flex:0 0 auto;
    font-size:10px;
  }

  #skillsPage .skill-activity-item-icon-art{
    width:25px;
    height:25px;
    object-fit:contain;
    vertical-align:middle;
  }

  #skillsPage .skill-xp-table-wrap{
    width:100%;
    max-width:100%;
    height:min(58dvh,560px) !important;
    overflow:auto;
    border-radius:9px;
  }

  #skillsPage .skill-xp-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
    font-size:9.5px !important;
  }

  #skillsPage .skill-xp-table th,
  #skillsPage .skill-xp-table td{
    padding:8px 6px !important;
    overflow-wrap:anywhere;
  }

  #skillsPage .skill-xp-table th{
    font-size:8.5px;
    line-height:1.2;
    white-space:normal;
  }

  #skillsPage .skill-xp-table th:first-child,
  #skillsPage .skill-xp-table td:first-child{
    width:20%;
  }

  #skillsPage .skill-xp-table th:nth-child(2),
  #skillsPage .skill-xp-table td:nth-child(2),
  #skillsPage .skill-xp-table th:nth-child(3),
  #skillsPage .skill-xp-table td:nth-child(3){
    width:40%;
  }
}

@media (max-width:390px){
  #activitiesPage .skill-tabs button{
    flex-basis:90px !important;
    width:90px !important;
    min-width:90px !important;
  }

  .mobile-skill-summary-xp,
  .mobile-skill-summary-meta{
    font-size:8.5px;
  }

  #activitiesPage .farming-dashboard-hero{
    grid-template-columns:1fr !important;
  }

  #activitiesPage .farming-plot-count{
    width:100% !important;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
  }

  #activitiesPage .farming-plot-form{
    grid-template-columns:1fr !important;
  }

  #activitiesPage .farming-plot-form button{
    grid-column:auto !important;
  }

  #activitiesPage .farming-contract-actions{
    grid-template-columns:1fr !important;
  }

  /* Keep the overview compact and scannable even on 360–390 px phones. */
  #skillCards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  #skillCards .skill-card{
    min-height:116px;
    padding:9px !important;
  }

  #skillCards .skill-card h3{
    font-size:12px !important;
  }

  #skillsPage .skill-detail-header h3{
    max-width:165px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #activitiesPage .activity-click-card,
  #activitiesPage .skill-tabs button,
  #skillCards .skill-card,
  .mobile-skill-summary-progress span{
    transition:none !important;
  }
}

/* ============================================================
   v2.57.2 — MOBILE BANK / EQUIPMENT / SHOP — PHASE 3
   Phone-only presentation. Desktop remains owned by base styles.
   ============================================================ */
@media (max-width:760px){
  /* ---------- Bank ---------- */
  #bankPage .section-heading{margin-bottom:8px!important;}
  #bankPage .section-heading h2{font-size:22px!important;}
  #bankPage #bankSummary{margin-top:3px;font-size:10.5px!important;line-height:1.3;}
  #bankPage .bank-stack-note{font-size:8.5px!important;line-height:1.25;}

  #bankPage .bank-shell-rs{overflow:visible;border-radius:11px;}
  #bankPage .bank-topbar-v2{
    position:sticky;
    top:54px!important;
    z-index:1250;
    padding:8px!important;
    border-bottom:1px solid var(--line);
    background:rgba(8,18,27,.985);
  }
  #bankPage .bank-main-nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:7px!important;align-items:center;}
  #bankPage #bankCategoryTabs{display:flex!important;gap:5px!important;overflow-x:auto;flex-wrap:nowrap!important;padding:0 0 2px;scrollbar-width:none;}
  #bankPage #bankCategoryTabs::-webkit-scrollbar{display:none;}
  #bankPage #bankCategoryTabs button{flex:0 0 auto;min-height:44px!important;padding:7px 10px!important;border-radius:8px;font-size:10px!important;}
  #bankPage .bank-filter-toggle{min-width:76px;min-height:44px!important;justify-content:center;padding:7px 9px!important;font-size:10px!important;}
  #bankPage .bank-filter-badge{min-width:18px;height:18px;font-size:8px;}

  #bankPage .bank-advanced-filters{grid-template-columns:1fr!important;gap:8px!important;margin-top:8px!important;padding-top:8px!important;}
  #bankPage .bank-advanced-filters label>span{font-size:9px!important;}
  #bankPage .bank-advanced-filters input,
  #bankPage .bank-advanced-filters select,
  #bankPage .bank-reset-filters{min-height:44px!important;}
  #bankPage .bank-reset-filters{width:100%;font-size:10px;}

  #bankPage .bank-discovery-rs{padding:8px 9px!important;margin-bottom:7px!important;}
  #bankPage .bank-discovery-rs span,
  #bankPage .bank-discovery-rs strong{font-size:9.5px!important;}
  #bankPage .bank-discovery-bar{height:6px!important;}

  #bankPage .bank-slot-grid-rs{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))!important;gap:6px!important;}
  #bankPage .bank-slot-rs{min-height:62px!important;padding:5px!important;border-radius:8px!important;}
  #bankPage .bank-slot-icon-rs{font-size:28px!important;}
  #bankPage .bank-slot-icon-rs .bank-slot-icon-art{width:38px!important;height:38px!important;}
  #bankPage .bank-slot-count-rs{right:4px;bottom:4px;max-width:84%;padding:2px 4px;border-radius:5px;font-size:9px!important;}

  #bankPage .bank-selected-panel-rs.open{
    left:6px!important;right:6px!important;
    bottom:calc(66px + env(safe-area-inset-bottom))!important;
    z-index:1800!important;
    max-height:min(78dvh,680px)!important;
    padding:12px!important;
    border-radius:16px 16px 12px 12px!important;
    overscroll-behavior:contain;
  }
  #bankPage .bank-selected-mobile-handle{width:46px;height:5px;margin-bottom:8px;}
  #bankPage .bank-selected-close-rs{width:44px!important;height:44px!important;min-height:44px!important;border-radius:9px!important;font-size:21px;}
  #bankPage .bank-selected-header-rs{min-height:62px;align-items:center;padding:10px 52px 10px 10px!important;}
  #bankPage .bank-selected-icon-rs{width:48px;height:48px;flex:0 0 48px;}
  #bankPage .bank-selected-icon-rs .bank-detail-icon-art{width:42px!important;height:42px!important;}
  #bankPage .bank-selected-header-rs .eyebrow{font-size:8.5px!important;}
  #bankPage .bank-selected-header-rs h3{margin-top:2px;font-size:16px!important;line-height:1.15;}
  #bankPage .bank-selected-stats-rs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
  #bankPage .bank-selected-stats-rs>div{padding:8px 6px!important;}
  #bankPage .bank-selected-stats-rs small{font-size:8px!important;}
  #bankPage .bank-selected-stats-rs strong{font-size:10.5px!important;line-height:1.2;}
  #bankPage .bank-selected-equipment-rs,
  #bankPage .bank-selected-potion-rs{gap:8px;padding:9px!important;}
  #bankPage .bank-selected-equipment-rs button,
  #bankPage .bank-selected-potion-rs button{min-height:44px!important;}
  #bankPage .bank-selected-info-rs{gap:7px!important;}
  #bankPage .bank-selected-info-rs>div{max-height:180px!important;padding:9px!important;font-size:10px;line-height:1.4;}
  #bankPage .bank-sell-rs{margin-top:9px!important;}
  #bankPage .bank-sell-buttons-rs{grid-template-columns:repeat(3,1fr)!important;gap:6px!important;}
  #bankPage .bank-sell-buttons-rs button,
  #bankPage .bank-sell-x-rs button,
  #bankPage .bank-sell-x-rs input{min-height:44px!important;font-size:10px!important;}

  /* ---------- Equipment ---------- */
  #equipmentPage .equipment-page-heading{display:grid!important;grid-template-columns:1fr;gap:8px!important;margin-bottom:8px;}
  #equipmentPage .equipment-page-heading h2{font-size:22px!important;}
  #equipmentPage .equipment-page-heading p{margin-top:3px;font-size:10.5px!important;line-height:1.35;}
  #equipmentPage .equipment-best-loadout-button{width:100%;min-height:44px!important;padding:8px 10px!important;font-size:10px;}

  #equipmentPage .equipment-clean-section{margin-bottom:9px!important;padding:11px!important;border-radius:11px!important;}
  #equipmentPage .equipment-clean-summary{grid-template-columns:1fr!important;gap:7px!important;margin-bottom:10px!important;}
  #equipmentPage .equipment-combat-level-card{grid-template-columns:auto auto minmax(0,1fr)!important;gap:8px!important;padding:9px!important;border-radius:9px;}
  #equipmentPage .equipment-combat-level-card small{font-size:8.5px!important;}
  #equipmentPage .equipment-combat-level-card strong{font-size:21px!important;}
  #equipmentPage .equipment-combat-level-card span{font-size:9.5px!important;line-height:1.3;}
  #equipmentPage .equipment-combat-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
  #equipmentPage .equipment-combat-stats>div{min-height:48px;padding:7px 5px!important;display:grid;align-content:center;}
  #equipmentPage .equipment-combat-stats small{font-size:7.5px!important;line-height:1.1;}
  #equipmentPage .equipment-combat-stats strong{font-size:12px!important;margin-top:2px;}
  #equipmentPage .equipment-clean-heading{align-items:flex-start!important;margin-bottom:8px!important;}
  #equipmentPage .equipment-clean-heading h3{font-size:15px!important;}
  #equipmentPage .equipment-clean-heading>small{display:block!important;max-width:50%;font-size:8.5px!important;line-height:1.3;text-align:right;}

  #equipmentPage .equipment-slot-overview-clean{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:"head neck" "cape ring" "weapon shield" "hands body" "legs feet"!important;
    gap:7px!important;min-height:0!important;
  }
  #equipmentPage .equipment-character-silhouette{display:none!important;}
  #equipmentPage .equipment-character-slot{min-height:78px!important;padding:8px 6px!important;border-radius:9px!important;grid-template-rows:32px auto auto!important;}
  #equipmentPage .equipment-character-slot-icon{width:32px!important;height:32px!important;font-size:20px!important;}
  #equipmentPage .equipment-character-slot-icon img{width:30px!important;height:30px!important;}
  #equipmentPage .equipment-character-slot small{font-size:8px!important;}
  #equipmentPage .equipment-character-slot strong{font-size:9.5px!important;}

  #equipmentPage .equipment-slot-detail{width:100%!important;min-height:0!important;margin:8px 0 0!important;padding:10px!important;align-items:stretch!important;flex-direction:column!important;gap:9px!important;border-radius:10px!important;}
  #equipmentPage .equipment-slot-detail-main{gap:10px!important;align-items:center!important;}
  #equipmentPage .equipment-slot-detail-icon{width:46px!important;height:46px!important;flex-basis:46px!important;}
  #equipmentPage .equipment-slot-detail-icon img{width:40px!important;height:40px!important;}
  #equipmentPage .equipment-slot-detail-main small{font-size:8px!important;}
  #equipmentPage .equipment-slot-detail-main h3{font-size:15px!important;}
  #equipmentPage .equipment-slot-detail-main p{font-size:10px!important;line-height:1.3;}
  #equipmentPage .equipment-slot-detail-main span{font-size:9px!important;}
  #equipmentPage .equipment-slot-detail-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px!important;justify-content:stretch!important;}
  #equipmentPage .equipment-slot-detail-actions button{width:100%;min-height:44px!important;font-size:10px;}
  #equipmentPage .equipment-bis-label{grid-column:1/-1;font-size:9px!important;line-height:1.3;}

  #equipmentPage .equipment-supply-row,
  #equipmentPage .equipment-supply-row:first-child{grid-template-columns:1fr!important;gap:8px!important;padding:10px!important;border-radius:10px!important;}
  #equipmentPage .equipment-supply-identity{grid-column:auto!important;}
  #equipmentPage .equipment-supply-identity>span{width:42px!important;height:42px!important;flex-basis:42px!important;}
  #equipmentPage .equipment-supply-identity strong{font-size:11px!important;}
  #equipmentPage .equipment-supply-row select,
  #equipmentPage .equipment-supply-row button{height:auto!important;min-height:44px!important;font-size:10px!important;}

  #equipmentPage .potion-preset-panel{gap:8px!important;margin-bottom:9px!important;}
  #equipmentPage .potion-preset-hero{display:grid!important;gap:9px!important;padding:11px!important;border-radius:11px!important;}
  #equipmentPage .potion-preset-hero h2{font-size:17px!important;}
  #equipmentPage .potion-preset-hero p{font-size:9.5px!important;line-height:1.4;}
  #equipmentPage .potion-auto-toggle{width:100%!important;min-width:0!important;min-height:44px!important;}
  #equipmentPage .potion-preset-grid{grid-template-columns:1fr!important;gap:7px!important;}
  #equipmentPage .potion-preset-card{gap:8px!important;padding:10px!important;border-radius:10px!important;}
  #equipmentPage .potion-preset-heading h3{font-size:14px!important;}
  #equipmentPage .potion-preset-effect{min-height:0!important;}
  #equipmentPage .potion-preset-effect strong,
  #equipmentPage .potion-preset-effect span{font-size:9.5px!important;}
  #equipmentPage .potion-preset-select select{min-height:44px!important;}
  #equipmentPage .potion-preset-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  #equipmentPage .potion-preset-actions button{min-height:44px!important;font-size:9.5px;}

  #equipmentPage .equipment-tools-clean{grid-template-columns:1fr!important;gap:7px!important;}
  #equipmentPage .equipment-tool-clean{grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:9px!important;border-radius:9px!important;}
  #equipmentPage .equipment-tool-clean-main{min-width:0;}
  #equipmentPage .equipment-tool-clean-main strong{font-size:11px!important;}
  #equipmentPage .equipment-tool-clean .equipment-clean-slot-actions{min-width:104px;margin:0!important;}
  #equipmentPage .equipment-tool-clean .equipment-clean-slot-actions button{min-height:44px!important;font-size:9px!important;}

  /* ---------- Shop ---------- */
  #shopPage .section-heading{margin-bottom:8px!important;}
  #shopPage .section-heading h2{font-size:22px!important;}
  #shopPage .section-heading p{margin-top:3px;font-size:10.5px!important;line-height:1.35;}
  #shopPage #shopCards{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  #shopPage #shopCards .card{display:grid;gap:8px;min-width:0;padding:11px!important;border-radius:11px!important;}
  #shopPage #shopCards .card-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center!important;gap:10px!important;}
  #shopPage #shopCards .card h3{margin-top:2px;font-size:15px!important;line-height:1.2;}
  #shopPage #shopCards .shop-heading-icon{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:4px;vertical-align:middle;}
  #shopPage #shopCards .shop-interface-icon-art{width:28px!important;height:28px!important;}
  #shopPage #shopCards .card b{color:var(--gold);font-size:12px!important;white-space:nowrap;}
  #shopPage #shopCards .card>button{grid-row:auto;min-height:44px!important;width:100%;font-size:10px!important;}
  #shopPage #shopCards .unlock-tooltip{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    gap:3px;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:8px 9px!important;
    border:1px solid rgba(142,164,180,.12)!important;
    border-radius:8px!important;
    background:rgba(4,12,18,.34)!important;
    box-shadow:none!important;
    color:var(--muted)!important;
    font-size:9.5px!important;
    line-height:1.35;
  }
  #shopPage #shopCards .unlock-tooltip h4{margin:0 0 2px!important;color:var(--text);font-size:10px!important;}
  #shopPage #shopCards .unlock-tooltip p{margin:0!important;}
}

@media (max-width:390px){
  #bankPage .bank-slot-grid-rs{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;}
  #bankPage .bank-slot-rs{min-height:0!important;aspect-ratio:1/1!important;}
  #bankPage .bank-slot-icon-rs .bank-slot-icon-art{width:34px!important;height:34px!important;}
  #equipmentPage .equipment-slot-overview-clean{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #equipmentPage .equipment-tool-clean{grid-template-columns:1fr!important;}
  #equipmentPage .equipment-tool-clean .equipment-clean-slot-actions{min-width:0!important;}
  #equipmentPage .equipment-slot-detail-actions{grid-template-columns:1fr!important;}
  #equipmentPage .equipment-clean-heading>small{max-width:46%;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #bankPage .bank-slot-rs,
  #equipmentPage .equipment-character-slot,
  #shopPage #shopCards .card{transition:none!important;}
}

/* ============================================================
   v2.57.3 — MOBILE WORLD / REGIONS / EXPEDITIONS — PHASE 4
   Phone-only presentation. Desktop remains owned by base styles.
   ============================================================ */
@media (max-width:760px){
  /* ---------- World Map ---------- */
  #worldMapPage{padding-bottom:10px!important;}
  #worldMapPage .world-map-shell{gap:9px!important;}
  #worldMapPage .world-map-heading{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:13px!important;
  }
  #worldMapPage .world-map-heading h2{margin:2px 0 4px!important;font-size:21px!important;}
  #worldMapPage .world-map-heading p{font-size:10.5px!important;line-height:1.4!important;}
  #worldMapPage .world-map-heading-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  #worldMapPage .world-map-heading-stats>div{min-width:0;padding:8px 9px!important;border-radius:9px!important;}
  #worldMapPage .world-map-heading-stats small{font-size:7.5px!important;}
  #worldMapPage .world-map-heading-stats strong{margin-top:2px!important;font-size:10px!important;line-height:1.2;overflow-wrap:anywhere;}

  #worldMapPage .world-map-layout{grid-template-columns:1fr!important;gap:8px!important;}
  #worldMapPage .world-map-canvas{
    min-height:455px!important;
    max-height:455px;
    border-radius:14px!important;
  }
  #worldMapPage .world-map-node{
    width:126px!important;
    min-height:52px;
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px!important;
    border-radius:10px!important;
    touch-action:manipulation;
  }
  #worldMapPage .world-map-node-icon{width:32px!important;height:32px!important;border-radius:9px!important;font-size:17px!important;}
  #worldMapPage .world-map-node-copy strong{font-size:10px!important;line-height:1.15;}
  #worldMapPage .world-map-node-copy small{margin-top:2px!important;font-size:7.5px!important;line-height:1.2!important;}
  #worldMapPage .world-map-node.is-selected{border-color:rgba(229,192,104,.72)!important;box-shadow:0 8px 20px rgba(0,0,0,.34),0 0 0 2px rgba(196,157,83,.12)!important;}
  #worldMapPage .world-map-compass{right:8px!important;bottom:8px!important;width:44px!important;height:44px!important;}

  #worldMapPage .world-map-details{
    min-height:0!important;
    padding:12px!important;
    border-radius:13px!important;
  }
  #worldMapPage .world-map-detail-heading{grid-template-columns:44px minmax(0,1fr)!important;gap:9px!important;}
  #worldMapPage .world-map-detail-icon{width:44px!important;height:44px!important;border-radius:11px!important;font-size:22px!important;}
  #worldMapPage .world-map-detail-heading .eyebrow{font-size:7.5px!important;}
  #worldMapPage .world-map-detail-heading h3{font-size:17px!important;line-height:1.15;}
  #worldMapPage .world-map-details>p{margin:10px 0!important;font-size:10px!important;line-height:1.4!important;}
  #worldMapPage .world-map-detail-status{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-bottom:8px!important;}
  #worldMapPage .world-map-detail-status span{min-width:0;padding:8px!important;border-radius:8px!important;}
  #worldMapPage .world-map-detail-status small{font-size:7px!important;}
  #worldMapPage .world-map-detail-status strong{font-size:9.5px!important;line-height:1.2;overflow-wrap:anywhere;}
  #worldMapPage .world-map-detail-project{padding:9px!important;border-radius:9px!important;}
  #worldMapPage .world-map-project-top .eyebrow{font-size:7px!important;}
  #worldMapPage .world-map-project-top strong{font-size:11px!important;}
  #worldMapPage .world-map-project-progress{height:6px!important;margin:8px 0 6px!important;}
  #worldMapPage .world-map-project-meta{font-size:9px!important;}
  #worldMapPage .world-map-project-meta small{font-size:8px!important;}
  #worldMapPage .world-map-detail-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;margin-top:0!important;padding-top:10px!important;}
  #worldMapPage .world-map-detail-actions button{width:100%;min-height:44px!important;font-size:10px!important;}
  #worldMapPage .world-map-action-note{font-size:9px!important;line-height:1.35!important;}
  #worldMapPage .world-map-legend{gap:8px 12px!important;padding:4px 2px!important;font-size:8px!important;}

  /* ---------- Expedition shell ---------- */
  #expeditionsPage{padding-bottom:10px!important;}
  #expeditionsPage .expedition-page-heading{display:none!important;}
  #expeditionsPage .expedition-layout{grid-template-columns:1fr!important;gap:7px!important;}
  #expeditionsPage .expedition-regions-panel{
    position:static!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  #expeditionsPage .expedition-regions-panel .two-step-worldmap-return{
    width:100%!important;
    min-height:44px!important;
    padding:7px 10px!important;
    border:1px solid rgba(239,178,39,.20)!important;
    border-radius:9px!important;
    background:rgba(239,178,39,.055)!important;
    text-align:left!important;
  }
  #expeditionsPage .expedition-regions-panel .two-step-worldmap-return .eyebrow{font-size:7px!important;}
  #expeditionsPage .expedition-regions-panel .two-step-worldmap-return strong{font-size:11px!important;}
  #expeditionsPage #expeditionRegionGrid:empty{display:none!important;}
  #expeditionsPage .expedition-detail-panel{width:100%!important;max-width:100%!important;overflow:visible!important;}

  /* Expedition region picker */
  #expeditionsPage .two-step-map{padding:11px!important;border-radius:12px!important;}
  #expeditionsPage .two-step-map-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;margin-bottom:10px!important;}
  #expeditionsPage .two-step-map-head>div:first-child{min-width:0;}
  #expeditionsPage .two-step-map-head h2{margin:1px 0 2px!important;font-size:19px!important;}
  #expeditionsPage .two-step-map-head p{font-size:9.5px!important;line-height:1.3!important;}
  #expeditionsPage .two-step-map-level{width:auto!important;min-width:76px!important;display:grid!important;gap:1px!important;padding:7px 9px!important;text-align:right!important;}
  #expeditionsPage .two-step-map-level small{font-size:7px!important;}
  #expeditionsPage .two-step-map-level strong{font-size:15px!important;}
  #expeditionsPage .two-step-map-track{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;}
  #expeditionsPage .two-step-region-card{
    min-height:84px!important;
    grid-template-columns:62px minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:5px 8px!important;
    padding:8px!important;
    border-radius:10px!important;
  }
  #expeditionsPage .two-step-region-art{grid-column:1!important;grid-row:1/3!important;width:62px!important;height:62px!important;border-radius:9px!important;}
  #expeditionsPage .two-step-region-copy{grid-column:2!important;grid-row:1!important;min-width:0!important;}
  #expeditionsPage .two-step-region-copy strong{font-size:12.5px!important;}
  #expeditionsPage .two-step-region-copy small{margin-top:2px!important;font-size:8.5px!important;}
  #expeditionsPage .two-step-region-levels{gap:4px 7px!important;}
  #expeditionsPage .two-step-region-key{grid-column:3!important;grid-row:1!important;padding:5px 7px!important;font-size:9px!important;}
  #expeditionsPage .two-step-region-state{grid-column:2/4!important;grid-row:2!important;font-size:8px!important;line-height:1.2!important;}
  #expeditionsPage .two-step-map-footer{display:none!important;}

  /* Open expedition */
  #expeditionsPage .two-step-expedition{padding:10px!important;border-radius:12px!important;}
  #expeditionsPage .two-step-expedition-head{grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;margin-bottom:8px!important;}
  #expeditionsPage .two-step-expedition-title{gap:7px!important;}
  #expeditionsPage .two-step-expedition-title>span{font-size:21px!important;}
  #expeditionsPage .two-step-expedition-title .eyebrow{font-size:7px!important;}
  #expeditionsPage .two-step-expedition-title h2{font-size:16px!important;line-height:1.15;}
  #expeditionsPage .expedition-entry-levels{display:flex!important;flex-wrap:wrap;gap:3px 6px!important;margin-top:3px!important;font-size:8px!important;line-height:1.2!important;}
  #expeditionsPage .two-step-expedition-tools{flex-direction:row!important;align-items:center!important;gap:5px!important;}
  #expeditionsPage .expedition-loot-info-button{min-height:44px!important;padding:7px 9px!important;font-size:9px!important;}
  #expeditionsPage .two-step-expedition-key{min-height:44px;display:flex!important;align-items:center;gap:4px;padding:7px 9px!important;font-size:10px!important;}

  #expeditionsPage .expedition-entry-warning{gap:4px!important;margin-bottom:8px!important;padding:8px 9px!important;border-radius:8px!important;}
  #expeditionsPage .expedition-entry-warning strong{font-size:9.5px!important;}
  #expeditionsPage .expedition-entry-warning span{font-size:8.5px!important;line-height:1.3!important;}

  #expeditionsPage .two-step-player-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    margin-bottom:8px!important;
  }
  #expeditionsPage .two-step-player-strip span{min-height:34px;display:flex!important;align-items:center;justify-content:center;padding:5px!important;font-size:8.5px!important;line-height:1.2;text-align:center;white-space:normal!important;}
  #expeditionsPage .two-step-player-strip span:nth-child(2){grid-column:1/-1!important;min-height:38px;justify-content:flex-start;padding-inline:8px!important;}

  #expeditionsPage .two-step-stage-card{gap:8px!important;padding:10px!important;border-radius:11px!important;}
  #expeditionsPage .two-step-stage-main{grid-template-columns:44px minmax(0,1fr)!important;gap:8px!important;}
  #expeditionsPage .two-step-stage-icon{width:44px!important;height:44px!important;display:grid!important;place-items:center;font-size:25px!important;}
  #expeditionsPage .two-step-stage-main .eyebrow{font-size:7px!important;}
  #expeditionsPage .two-step-stage-main h3{font-size:15px!important;line-height:1.15;}
  #expeditionsPage .two-step-stage-main p{font-size:9px!important;line-height:1.25!important;}
  #expeditionsPage .two-step-stage-progress{padding:7px 8px!important;border-radius:8px!important;}
  #expeditionsPage .two-step-stage-progress strong{font-size:10px!important;}
  #expeditionsPage .two-step-stage-progress span{font-size:8.5px!important;}
  #expeditionsPage .two-step-stage-hp>div:first-child{font-size:9px!important;}
  #expeditionsPage .two-step-hp-track{height:7px!important;}
  #expeditionsPage .expedition-attack-strip{gap:6px!important;}
  #expeditionsPage .expedition-attack-line{padding:7px 8px!important;border-radius:8px!important;}
  #expeditionsPage .expedition-attack-line-head{font-size:8.5px!important;}
  #expeditionsPage .expedition-attack-line-head em{font-size:7px!important;}
  #expeditionsPage .exp-stage-loot>small{font-size:7.5px!important;}
  #expeditionsPage .exp-stage-loot>div{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;}
  #expeditionsPage .exp-stage-loot span{min-width:0!important;padding:6px!important;font-size:8px!important;line-height:1.2;overflow-wrap:anywhere;}
  #expeditionsPage .two-step-stage-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  #expeditionsPage .two-step-stage-actions button,
  #expeditionsPage .expedition-preview-button,
  #expeditionsPage .expedition-action{min-height:48px!important;padding:7px 8px!important;font-size:9px!important;}
  #expeditionsPage .expedition-start-main{font-size:10px!important;}
  #expeditionsPage .expedition-start-cost{padding:4px 6px!important;font-size:8.5px!important;}

  /* Loot info becomes a true phone sheet above the fixed bottom nav. */
  #expeditionsPage .expedition-loot-info-panel{
    position:fixed!important;
    left:6px!important;
    right:6px!important;
    bottom:calc(66px + env(safe-area-inset-bottom))!important;
    z-index:1950!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(72dvh,640px)!important;
    margin:0!important;
    padding:11px!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    border-radius:15px!important;
    box-shadow:0 18px 48px rgba(0,0,0,.58)!important;
  }
  #expeditionsPage .expedition-loot-info-head{top:-11px!important;margin:-1px -1px 9px!important;padding:2px 1px 8px!important;}
  #expeditionsPage .expedition-loot-info-head h3{font-size:15px!important;}
  #expeditionsPage .expedition-loot-info-head p{font-size:8.5px!important;line-height:1.3!important;}
  #expeditionsPage .expedition-loot-info-close{width:44px!important;height:44px!important;min-height:44px!important;border-radius:9px!important;}
  #expeditionsPage .expedition-loot-info-grid{grid-template-columns:1fr!important;gap:7px!important;}
  #expeditionsPage .expedition-loot-info-encounter{padding:8px!important;border-radius:9px!important;}
  #expeditionsPage .expedition-loot-info-enemy-icon{width:34px!important;height:34px!important;flex-basis:34px!important;}
  #expeditionsPage .expedition-loot-info-encounter>header small{font-size:7px!important;}
  #expeditionsPage .expedition-loot-info-encounter>header strong{font-size:11px!important;}
  #expeditionsPage .expedition-loot-info-drop{grid-template-columns:minmax(0,1fr) auto auto!important;gap:5px!important;padding:6px!important;font-size:8.5px!important;}
  #expeditionsPage .expedition-loot-info-drop strong{font-size:8.5px!important;}

  /* Entry confirmation is another phone sheet. */
  .expedition-start-modal.open{align-items:flex-end!important;padding:0!important;}
  .expedition-start-card{width:100%!important;max-width:none!important;max-height:88dvh!important;padding:13px!important;border-radius:16px 16px 0 0!important;overflow:auto!important;}
  .expedition-start-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .expedition-start-actions button{min-height:48px!important;font-size:10px!important;}
}

@media (max-width:390px){
  #worldMapPage .world-map-heading-stats{grid-template-columns:1fr 1fr!important;}
  #worldMapPage .world-map-canvas{min-height:430px!important;max-height:430px!important;}
  #worldMapPage .world-map-node{width:112px!important;grid-template-columns:29px minmax(0,1fr)!important;gap:5px!important;padding:6px!important;}
  #worldMapPage .world-map-node-icon{width:29px!important;height:29px!important;font-size:15px!important;}
  #worldMapPage .world-map-node-copy strong{font-size:9px!important;}
  #worldMapPage .world-map-node-copy small{font-size:7px!important;}

  #expeditionsPage .two-step-map-head{grid-template-columns:1fr auto!important;}
  #expeditionsPage .two-step-region-card{grid-template-columns:58px minmax(0,1fr) auto!important;min-height:78px!important;}
  #expeditionsPage .two-step-region-art{width:58px!important;height:58px!important;}
  #expeditionsPage .two-step-player-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #expeditionsPage .exp-stage-loot>div{grid-template-columns:1fr!important;}
  #expeditionsPage .two-step-stage-actions{grid-template-columns:1fr!important;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #worldMapPage .world-map-node,
  #expeditionsPage .two-step-region-card,
  #expeditionsPage .expedition-action{transition:none!important;}
}

/* ============================================================
   v2.57.4 — MOBILE DEN / TUTORIAL — PHASE 5
   Phone-only Den, Journey Journal and tutorial presentation.
   Desktop/PC presentation remains owned by the existing rules.
   ============================================================ */
@media (max-width:760px){
  /* ---------- Current Journey HUD ---------- */
  .current-journey-tracker{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:7px 9px!important;
    padding:8px 9px!important;
    border-radius:11px!important;
  }
  .current-journey-copy>.eyebrow{font-size:7.5px!important;}
  .current-journey-copy>strong{font-size:11.5px!important;line-height:1.15!important;white-space:normal!important;}
  .current-journey-hint{margin-top:2px!important;max-height:2.55em!important;font-size:9px!important;line-height:1.28!important;}
  .current-journey-progress{height:5px!important;margin-top:5px!important;}
  .current-journey-actions{grid-column:2!important;display:grid!important;grid-template-columns:1fr!important;gap:5px!important;}
  .current-journey-actions button{width:100%;min-height:44px!important;padding:6px 9px!important;font-size:9.5px!important;}
  .current-journey-actions .secondary{display:none!important;}

  /* ---------- The Den: home should scan like a mobile dashboard ---------- */
  #denPage{padding-bottom:8px!important;}
  #denPage .den-shell{gap:9px!important;}
  #denPage .den-hero{
    min-height:0!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:10px!important;
    padding:11px!important;
    border-radius:13px!important;
    text-align:left!important;
  }
  #denPage .den-hero-emblem{width:52px!important;height:52px!important;margin:0!important;border-radius:13px!important;}
  #denPage .den-hero-emblem img{width:39px!important;height:39px!important;}
  #denPage .den-hero-copy{min-width:0;}
  #denPage .den-hero-copy>.eyebrow{font-size:7.5px!important;}
  #denPage .den-hero-copy h2{margin:2px 0 3px!important;font-size:20px!important;line-height:1.05!important;}
  #denPage .den-hero-copy p{display:-webkit-box;overflow:hidden;margin:0!important;font-size:9.5px!important;line-height:1.3!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  #denPage .den-hero-badges{justify-content:flex-start!important;gap:4px!important;margin-top:6px!important;}
  #denPage .den-hero-badges span{min-height:24px!important;padding:3px 7px!important;font-size:7.5px!important;}

  #denPage .den-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  #denPage .den-overview-card{min-height:67px;padding:8px 9px!important;border-radius:10px!important;}
  #denPage .den-overview-card .eyebrow{font-size:7px!important;}
  #denPage .den-overview-card strong{margin-top:3px!important;font-size:11px!important;line-height:1.18!important;}
  #denPage .den-overview-card small{margin-top:2px!important;font-size:8px!important;line-height:1.25!important;}
  #denPage .den-storage-bar{height:5px!important;margin-top:6px!important;}
  #denPage .den-chapter-overview-card{grid-column:1/-1!important;min-height:58px;}

  /* ---------- Journey Journal / tutorial ---------- */
  #denPage .journey-completed-card{grid-template-columns:34px minmax(0,1fr)!important;gap:8px!important;padding:8px 9px!important;border-radius:10px!important;}
  #denPage .journey-completed-card-icon{width:34px!important;height:34px!important;}
  #denPage .journey-completed-card-copy strong{font-size:11px!important;}
  #denPage .journey-completed-card-copy small{font-size:8px!important;}
  #denPage .journey-completed-card>button{grid-column:2!important;width:100%;min-height:44px!important;font-size:9px!important;}

  #denPage .journey-journal{padding:10px!important;border-radius:12px!important;}
  #denPage .journey-journal-heading{gap:6px!important;}
  #denPage .journey-journal-heading .eyebrow{font-size:7.5px!important;}
  #denPage .journey-journal-heading h3{margin:2px 0!important;font-size:16px!important;}
  #denPage .journey-journal-heading p{display:none!important;}
  #denPage .journey-journal-heading-actions{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:5px!important;}
  #denPage .journey-journal-heading-actions .den-room-status{min-height:28px!important;justify-content:center;font-size:8px!important;}
  #denPage .journey-journal-collapse{width:100%;min-height:44px!important;font-size:9px!important;}
  #denPage .journey-journal-summary{gap:5px!important;padding:7px 8px!important;border-radius:9px!important;}
  #denPage .journey-journal-summary strong{font-size:9.5px!important;}
  #denPage .journey-journal-progress{height:5px!important;}
  #denPage .journey-journal-entries{gap:6px!important;}
  #denPage .journey-journal-entry{grid-template-columns:26px minmax(0,1fr)!important;gap:7px!important;padding:8px!important;border-radius:10px!important;}
  #denPage .journey-journal-entry-marker span{width:26px!important;height:26px!important;font-size:9px!important;}
  #denPage .journey-journal-entry-heading{gap:5px!important;}
  #denPage .journey-journal-entry-heading .eyebrow{font-size:7px!important;}
  #denPage .journey-journal-entry-heading h4{font-size:12px!important;line-height:1.15!important;}
  #denPage .journey-journal-entry-heading>strong{font-size:8px!important;}
  #denPage .journey-journal-entry-body>p{margin:4px 0 6px!important;font-size:8.5px!important;line-height:1.3!important;}
  #denPage .journey-journal-entry.is-active{border-color:rgba(209,161,73,.42)!important;box-shadow:0 0 0 1px rgba(209,161,73,.05) inset;}
  #denPage .journey-journal-entry.is-locked{opacity:.6!important;}
  #denPage .journey-journal-entry.is-locked .journey-tutorial-block,
  #denPage .journey-journal-entry.is-locked .journey-existing-progress{display:none!important;}
  #denPage .journey-journal-entry.is-locked .journey-journal-entry-body>p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
  #denPage .journey-journal-entry.is-complete .journey-journal-entry-body>p,
  #denPage .journey-journal-entry.is-complete .journey-existing-progress{display:none!important;}

  #denPage .journey-tutorial-block{margin:6px 0!important;padding:7px!important;border-radius:8px!important;}
  #denPage .journey-tutorial-head>span{font-size:7px!important;}
  #denPage .journey-tutorial-head>strong{font-size:8px!important;}
  #denPage .journey-tutorial-lore{display:-webkit-box;overflow:hidden;margin:5px 0 6px!important;font-size:8.5px!important;line-height:1.3!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  #denPage .journey-tutorial-steps{gap:4px!important;}
  #denPage .journey-tutorial-step{grid-template-columns:20px minmax(0,1fr)!important;gap:6px!important;min-height:44px;padding:6px!important;border-radius:7px!important;}
  #denPage .journey-tutorial-step.is-current{border:1px solid rgba(209,161,73,.22);}
  #denPage .journey-tutorial-step-copy strong{font-size:10px!important;line-height:1.2!important;}
  #denPage .journey-tutorial-step-copy span{font-size:8.5px!important;line-height:1.25!important;}
  #denPage .journey-tutorial-step-copy small{font-size:8px!important;line-height:1.25!important;}
  #denPage .journey-tutorial-step .journey-journal-go{grid-column:2!important;width:100%;min-height:44px!important;margin-top:3px;font-size:9px!important;}
  #denPage .journey-tutorial-step-fold>summary{min-height:44px!important;padding:6px!important;}
  #denPage .journey-tutorial-step-fold-title strong{font-size:9.5px!important;}
  #denPage .journey-tutorial-step-fold-details{gap:2px!important;padding:0 6px 7px 32px!important;}
  #denPage .journey-tutorial-step-fold-details>span{font-size:8.5px!important;}
  #denPage .journey-tutorial-step-fold-details>small{font-size:8px!important;line-height:1.25!important;}
  #denPage .journey-existing-progress{margin-top:6px!important;}
  #denPage .journey-existing-progress>.eyebrow{margin-bottom:4px!important;font-size:7px!important;}
  #denPage .journey-journal-objective{grid-template-columns:18px minmax(0,1fr)!important;gap:5px!important;min-height:42px;padding:5px 6px!important;}
  #denPage .journey-journal-objective-copy strong{font-size:9px!important;line-height:1.2!important;}
  #denPage .journey-journal-objective-copy small{font-size:7.5px!important;line-height:1.2!important;}
  #denPage .journey-journal-go{grid-column:2!important;width:100%;min-height:44px!important;font-size:9px!important;}

  /* ---------- Den progression / upgrades ---------- */
  #denPage .den-progression-panel{padding:10px!important;border-radius:12px!important;}
  #denPage .den-progression-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;align-items:start!important;}
  #denPage .den-progression-heading .eyebrow{font-size:7px!important;}
  #denPage .den-progression-heading h3{margin:2px 0 0!important;font-size:13px!important;line-height:1.15!important;}
  #denPage #denCurrentTierBadge{min-height:28px!important;padding:4px 7px!important;font-size:7.5px!important;}
  #denPage .den-progression-description{margin:6px 0 8px!important;font-size:8.5px!important;line-height:1.3!important;}
  #denPage .den-tier-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  #denPage .den-tier-card{min-height:112px!important;padding:8px!important;border-radius:9px!important;}
  #denPage .den-tier-card-top{gap:4px!important;font-size:7px!important;}
  #denPage .den-tier-card-top b{font-size:6.5px!important;}
  #denPage .den-tier-card h4{margin:5px 0 3px!important;font-size:10.5px!important;}
  #denPage .den-tier-card p{display:-webkit-box;overflow:hidden;margin:0 0 4px!important;font-size:7.5px!important;line-height:1.25!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  #denPage .den-tier-card small{display:-webkit-box;overflow:hidden;font-size:7px!important;line-height:1.25!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  #denPage .den-framework-note{display:grid!important;gap:2px!important;margin-top:7px!important;padding-top:7px!important;font-size:7.5px!important;line-height:1.25!important;}

  /* ---------- Live World Project ---------- */
  #denPage .den-route-project{padding:10px!important;border-radius:12px!important;}
  #denPage .den-route-project-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;}
  #denPage .den-route-project-heading .eyebrow{font-size:7px!important;}
  #denPage .den-route-project-heading h3{margin:2px 0 0!important;font-size:14px!important;line-height:1.15!important;}
  #denPage #denForestRouteStatus{min-height:28px!important;padding:4px 7px!important;font-size:7.5px!important;}
  #denPage .den-route-project>p{margin:7px 0!important;font-size:8.5px!important;line-height:1.3!important;}
  #denPage .den-route-target{grid-template-columns:1fr auto!important;gap:8px!important;margin:8px 0 6px!important;}
  #denPage .den-route-target>div:last-child{text-align:right!important;}
  #denPage .den-route-target small{font-size:7.5px!important;}
  #denPage .den-route-target strong{font-size:10px!important;}
  #denPage .den-project-progress{height:6px!important;}
  #denPage .den-project-requirements{gap:5px!important;margin-top:8px!important;}
  #denPage .den-project-requirement{grid-template-columns:34px minmax(0,1fr) minmax(78px,auto)!important;gap:6px!important;padding:6px!important;border-radius:8px!important;}
  #denPage .den-project-requirement-icon{width:34px!important;height:34px!important;border-radius:8px!important;font-size:15px!important;}
  #denPage .den-project-item-art{width:25px!important;height:25px!important;}
  #denPage .den-project-requirement-copy strong{font-size:9px!important;}
  #denPage .den-project-requirement-copy span{font-size:8px!important;}
  #denPage .den-project-requirement-copy small{font-size:7.5px!important;}
  #denPage .den-project-requirement button{grid-column:3!important;width:auto!important;max-width:110px;min-height:44px!important;padding:5px 7px!important;font-size:8px!important;line-height:1.15!important;white-space:normal!important;}
  #denPage .den-project-check{grid-column:3!important;width:auto!important;padding:0 7px!important;}
  #denPage .den-project-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-top:8px!important;}
  #denPage .den-project-actions button{width:100%;min-width:0!important;min-height:44px!important;font-size:9px!important;}
  #denPage .den-project-hint{margin:7px 0 0!important;font-size:7.5px!important;line-height:1.25!important;}

  /* ---------- Den rooms ---------- */
  #denPage .den-room-grid{grid-template-columns:1fr!important;gap:6px!important;}
  #denPage .den-room-card{grid-template-columns:38px minmax(0,1fr)!important;gap:7px!important;min-height:0!important;padding:9px!important;border-radius:10px!important;}
  #denPage .den-room-icon{width:38px!important;height:38px!important;border-radius:9px!important;font-size:18px!important;}
  #denPage .den-room-card .eyebrow{font-size:7px!important;}
  #denPage .den-room-card h3{margin:2px 0 3px!important;font-size:11.5px!important;}
  #denPage .den-room-card p{display:-webkit-box;overflow:hidden;font-size:8px!important;line-height:1.25!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
  #denPage .den-room-card>button{grid-column:2!important;width:100%;min-height:44px!important;margin-top:2px!important;font-size:9px!important;}
  #denPage .den-room-card>.den-room-status{grid-column:2!important;min-height:28px!important;margin-top:2px!important;padding:4px 7px!important;font-size:7.5px!important;}
  #denPage .den-room-card.den-room-locked p{-webkit-line-clamp:1;}
  #denPage .den-future-note{padding:9px 10px!important;border-radius:10px!important;}
  #denPage .den-future-note .eyebrow{font-size:7px!important;}
  #denPage .den-future-note h3{margin:2px 0 3px!important;font-size:11px!important;}
  #denPage .den-future-note p{display:-webkit-box;overflow:hidden;font-size:8px!important;line-height:1.25!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

  /* ---------- Completion/unlock presentation ---------- */
  .chapter-finale-card{padding:16px 12px max(16px,env(safe-area-inset-bottom))!important;}
  .chapter-finale-emblem{width:58px!important;height:58px!important;}
  .chapter-finale-emblem img{width:44px!important;height:44px!important;}
  .chapter-finale-card h2{font-size:24px!important;}
  .chapter-finale-lore{margin-bottom:10px!important;font-size:9.5px!important;line-height:1.35!important;}
  .chapter-finale-rewards{grid-template-columns:1fr!important;gap:6px!important;}
  .chapter-finale-card button{width:100%;min-height:48px!important;}
  .mobile-top-navigation [data-page].journey-nav-cue::after{top:5px!important;right:calc(50% - 18px)!important;}
}

@media (max-width:390px){
  #denPage .den-overview-grid,
  #denPage .den-tier-roadmap{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #denPage .den-project-requirement{grid-template-columns:32px minmax(0,1fr) 88px!important;}
  #denPage .den-project-requirement-icon{width:32px!important;height:32px!important;}
  #denPage .den-project-requirement button{max-width:88px!important;padding-inline:5px!important;font-size:7.5px!important;}
  #denPage .den-project-actions{grid-template-columns:1fr!important;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #denPage .den-room-card,
  #denPage .journey-journal-entry,
  #denPage .den-tier-card,
  #denPage .den-project-requirement,
  .current-journey-tracker{transition:none!important;}
}

/* ============================================================
   v2.57.5 — MOBILE PROGRESS & RANKINGS — PHASE 6
   Phone-only Mastery, Collections/Achievements and Leaderboards.
   Desktop/PC presentation remains owned by the existing rules.
   ============================================================ */
.mobile-mastery-skill-select,
.mobile-leaderboard-select{display:none;}

@media (max-width:760px){
  /* ---------- Shared progression page rhythm ---------- */
  #masteryPage .section-heading,
  #achievementsPage .section-heading,
  #leaderboardsPage .section-heading{margin-bottom:8px!important;}
  #masteryPage .section-heading p,
  #achievementsPage .section-heading p,
  #leaderboardsPage .section-heading p{font-size:9.5px!important;line-height:1.3!important;}

  /* ---------- Mastery ---------- */
  #masteryPage .mastery-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    margin:0 0 8px!important;
  }
  #masteryPage .mastery-summary-card{
    grid-column:auto!important;
    min-height:70px!important;
    padding:9px 10px!important;
    border-radius:10px!important;
  }
  #masteryPage .mastery-summary-card span{font-size:9px!important;line-height:1.15!important;}
  #masteryPage .mastery-summary-card strong{margin:3px 0!important;font-size:18px!important;line-height:1!important;}
  #masteryPage .mastery-summary-card small{display:block!important;font-size:8px!important;line-height:1.2!important;}

  .mobile-mastery-skill-select,
  .mobile-leaderboard-select{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    align-items:center;
    margin:0 0 8px;
    padding:8px 9px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface-2);
  }
  .mobile-mastery-skill-select>span,
  .mobile-leaderboard-select>span{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  .mobile-mastery-skill-select select,
  .mobile-leaderboard-select select{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:8px 34px 8px 10px;
    border:1px solid rgba(215,173,86,.32);
    border-radius:8px;
    background:#08121b;
    color:var(--text);
    font-size:16px;
    font-weight:800;
  }
  #masteryPage #masterySkillTabs{display:none!important;}

  #masteryPage .mastery-section{
    margin-bottom:8px!important;
    padding:9px!important;
    border-radius:11px!important;
  }
  #masteryPage .mastery-section-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    align-items:end!important;
    margin-bottom:7px!important;
  }
  #masteryPage .mastery-section-heading .eyebrow{font-size:7.5px!important;}
  #masteryPage .mastery-section-heading h3{margin:2px 0 0!important;font-size:14px!important;line-height:1.15!important;}
  #masteryPage .mastery-section-heading>span{font-size:8px!important;line-height:1.2!important;text-align:right;}

  #masteryPage #masteryMilestones,
  #masteryPage .mastery-milestone-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #masteryPage .mastery-milestone-card{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
    min-height:76px;
    padding:8px!important;
    border-radius:9px!important;
  }
  #masteryPage .mastery-milestone-card:last-child:nth-child(odd){grid-column:1/-1!important;}
  #masteryPage .mastery-milestone-level{min-width:0!important;}
  #masteryPage .mastery-milestone-level small{font-size:7.5px!important;}
  #masteryPage .mastery-milestone-level strong{font-size:20px!important;line-height:1!important;}
  #masteryPage .mastery-milestone-card h4{margin:0 0 3px!important;font-size:10.5px!important;line-height:1.15!important;}
  #masteryPage .mastery-milestone-card p,
  #masteryPage .mastery-milestone-card span{font-size:8.5px!important;line-height:1.25!important;}

  #masteryPage #masteryActivityRows,
  #masteryPage .mastery-activity-list{gap:6px!important;}
  #masteryPage .mastery-activity-row{
    grid-template-columns:40px minmax(0,1fr) 54px!important;
    gap:7px!important;
    min-height:68px;
    padding:8px!important;
    border-radius:9px!important;
  }
  #masteryPage .mastery-activity-icon{width:40px!important;height:40px!important;border-radius:9px!important;font-size:22px!important;}
  #masteryPage .mastery-activity-title{gap:6px!important;align-items:center!important;}
  #masteryPage .mastery-activity-title strong{min-width:0;font-size:11px!important;line-height:1.15!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #masteryPage .mastery-activity-title span{flex:0 0 auto;padding:2px 5px;border-radius:999px;background:rgba(255,255,255,.05);font-size:8px!important;}
  #masteryPage .mastery-progress{height:6px!important;margin:6px 0 5px!important;}
  #masteryPage .mastery-activity-meta{display:grid!important;grid-template-columns:1fr!important;gap:1px!important;font-size:8.5px!important;line-height:1.2!important;}
  #masteryPage .mastery-activity-meta span:last-child{color:rgba(255,255,255,.58);}
  #masteryPage .mastery-activity-bonus{
    grid-column:3!important;
    align-self:stretch;
    display:grid!important;
    place-content:center!important;
    gap:2px!important;
    padding:5px!important;
    border:1px solid rgba(215,173,86,.16)!important;
    border-radius:8px!important;
    background:rgba(215,173,86,.055);
    text-align:center!important;
  }
  #masteryPage .mastery-activity-bonus small{font-size:7.5px!important;}
  #masteryPage .mastery-activity-bonus strong{font-size:10px!important;}

  /* ---------- Collections / Achievements ---------- */
  #achievementsPage .collections-page-summary{margin:0 0 8px!important;}
  #achievementsPage .collections-page-summary .mastery-summary-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:2px 10px!important;
    align-items:center!important;
    min-height:0!important;
    padding:9px 10px!important;
    border-radius:10px!important;
  }
  #achievementsPage .collections-page-summary .mastery-summary-card span{font-size:9px!important;}
  #achievementsPage .collections-page-summary .mastery-summary-card strong{grid-row:1/3;grid-column:2;margin:0!important;font-size:18px!important;}
  #achievementsPage .collections-page-summary .mastery-summary-card small{display:block!important;font-size:8px!important;}

  #achievementsPage .mastery-section{padding:0!important;border:0!important;background:transparent!important;}
  #achievementsPage .achievement-controls{
    gap:6px!important;
    margin:0 0 6px!important;
    padding:8px!important;
    border-radius:10px!important;
  }
  #achievementsPage .achievement-filter-tabs{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%;
    padding:0!important;
    overflow:visible!important;
    background:transparent!important;
  }
  #achievementsPage .achievement-filter-tabs button{
    min-width:0!important;
    min-height:44px!important;
    padding:6px!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:normal;
  }
  #achievementsPage .achievement-filter-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%;
    margin:0!important;
  }
  #achievementsPage .achievement-filter-tools select,
  #achievementsPage .achievement-filter-tools input{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:7px 9px!important;
    font-size:16px!important;
  }
  #achievementsPage #achievementSearchInput{grid-column:1/-1!important;}
  #achievementsPage .achievement-filter-summary{margin:0 2px 6px!important;font-size:9px!important;line-height:1.2!important;}

  #achievementsPage #achievementCards.achievement-grid,
  #achievementsPage .mastery-collection-grid{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  #achievementsPage #achievementCards .achievement-card{
    padding:9px!important;
    border-radius:10px!important;
  }
  #achievementsPage .achievement-card-main{gap:8px!important;align-items:center!important;}
  #achievementsPage #achievementCards .achievement-icon{
    flex-basis:44px!important;
    width:44px!important;
    height:44px!important;
    border-radius:9px!important;
    font-size:24px!important;
  }
  #achievementsPage .achievement-title-row{gap:6px!important;align-items:flex-start!important;}
  #achievementsPage #achievementCards .achievement-card h3{margin:0!important;font-size:11.5px!important;line-height:1.18!important;}
  #achievementsPage .achievement-status-pill{padding:3px 6px!important;font-size:8px!important;}
  #achievementsPage #achievementCards .achievement-card p{
    display:-webkit-box;
    overflow:hidden;
    margin-top:3px!important;
    font-size:9px!important;
    line-height:1.3!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  #achievementsPage .achievement-progress-bar{height:6px!important;margin:7px 0 6px!important;}
  #achievementsPage .achievement-card-footer{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:3px 8px!important;
    font-size:9px!important;
    line-height:1.2!important;
  }
  #achievementsPage .achievement-reward-inline{
    max-width:65%!important;
    overflow:visible!important;
    text-align:right!important;
    text-overflow:clip!important;
    white-space:normal!important;
  }

  /* ---------- Leaderboards ---------- */
  #leaderboardsPage #leaderboardTabs{display:none!important;}
  #leaderboardsPage .leaderboard-panel{
    min-height:0!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
  }
  #leaderboardsPage .leaderboard-panel-heading{
    padding:8px 9px!important;
    border:1px solid var(--line)!important;
    border-radius:10px 10px 0 0!important;
    background:var(--surface)!important;
  }
  #leaderboardsPage .leaderboard-panel-heading .eyebrow{font-size:7.5px!important;}
  #leaderboardsPage .leaderboard-panel-heading h3{margin:2px 0 0!important;font-size:14px!important;}
  #leaderboardsPage .leaderboard-header-row{display:none!important;}
  #leaderboardsPage .leaderboard-rows{
    display:grid!important;
    gap:5px!important;
    min-height:80px!important;
    padding:6px!important;
    border:1px solid var(--line)!important;
    border-top:0!important;
    border-radius:0 0 10px 10px!important;
    background:var(--surface)!important;
  }
  #leaderboardsPage .leaderboard-row{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:center!important;
    min-height:54px!important;
    padding:7px 8px!important;
    border:1px solid rgba(255,255,255,.055)!important;
    border-radius:9px!important;
    background:var(--surface-2)!important;
  }
  #leaderboardsPage .leaderboard-row.current-player{
    border-color:rgba(215,173,86,.42)!important;
    background:rgba(215,173,86,.08)!important;
  }
  #leaderboardsPage .leaderboard-rank{font-size:11px!important;text-align:center;}
  #leaderboardsPage .leaderboard-player{gap:7px!important;}
  #leaderboardsPage .leaderboard-player img,
  #leaderboardsPage .leaderboard-avatar{width:34px!important;height:34px!important;flex-basis:34px!important;}
  #leaderboardsPage .leaderboard-player strong{font-size:10.5px!important;}
  #leaderboardsPage .leaderboard-score{
    min-width:42px;
    padding:5px 7px;
    border-radius:999px;
    background:rgba(215,173,86,.08);
    color:var(--gold);
    font-size:10.5px!important;
    text-align:center!important;
  }
  #leaderboardsPage .leaderboard-empty{padding:18px 10px!important;font-size:9.5px!important;line-height:1.35!important;}
}

@media (max-width:390px){
  #masteryPage .mastery-milestone-card{grid-template-columns:34px minmax(0,1fr)!important;padding:7px!important;}
  #masteryPage .mastery-milestone-level strong{font-size:18px!important;}
  #masteryPage .mastery-activity-row{grid-template-columns:38px minmax(0,1fr) 50px!important;gap:6px!important;}
  #masteryPage .mastery-activity-icon{width:38px!important;height:38px!important;}
  #achievementsPage .achievement-reward-inline{max-width:60%!important;}
  #leaderboardsPage .leaderboard-row{grid-template-columns:38px minmax(0,1fr) auto!important;padding-inline:6px!important;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #masteryPage .mastery-milestone-card,
  #masteryPage .mastery-activity-row,
  #achievementsPage .achievement-card,
  #leaderboardsPage .leaderboard-row{transition:none!important;}
}


/* ============================================================
   v2.57.6 — MOBILE SETTINGS & SECONDARY SCREENS — PHASE 7
   Phone-only polish. Desktop remains governed by the existing UI.
   ============================================================ */
@media (max-width:760px){
  /* ---------- Settings ---------- */
  #settingsPage .section-heading{margin-bottom:8px!important;}
  #settingsPage .section-heading p{max-width:38ch;font-size:9.5px!important;line-height:1.35!important;}
  #settingsPage .settings-grid{grid-template-columns:1fr!important;gap:8px!important;}
  #settingsPage .settings-card{
    position:relative;
    min-width:0;
    padding:11px!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018))!important;
  }
  #settingsPage .settings-card-interface-icon-art{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    width:34px!important;
    height:34px!important;
    opacity:.9;
  }
  #settingsPage .settings-card>.eyebrow,
  #settingsPage .settings-card>h3{padding-right:44px!important;}
  #settingsPage .settings-card>.eyebrow{font-size:8px!important;letter-spacing:.08em;}
  #settingsPage .settings-card h3{margin:2px 0 5px!important;font-size:15px!important;line-height:1.15!important;}
  #settingsPage .settings-card p,
  #settingsPage .settings-hint,
  #settingsPage .cloud-sync-status{font-size:9.5px!important;line-height:1.35!important;}
  #settingsPage .settings-name-row{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;margin-top:8px!important;}
  #settingsPage .settings-name-row input,
  #settingsPage .settings-name-row button,
  #settingsPage #saveButton,
  #settingsPage .google-signin-button{width:100%!important;min-height:44px!important;}
  #settingsPage .settings-name-row input{font-size:16px!important;padding:9px 10px!important;}
  #settingsPage .settings-action-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.72fr)!important;gap:6px!important;width:100%!important;}
  #settingsPage .settings-action-row button{min-width:0!important;min-height:44px!important;padding:8px!important;font-size:9.5px!important;white-space:normal!important;}
  #settingsPage .cloud-signed-in,
  #settingsPage .cloud-signed-out{gap:7px!important;width:100%!important;}
  #settingsPage .cloud-user-copy{display:grid!important;gap:2px!important;width:100%!important;min-width:0!important;}
  #settingsPage .cloud-user-copy strong{font-size:10.5px!important;}
  #settingsPage .cloud-user-copy span{font-size:9px!important;color:var(--muted)!important;}
  #settingsPage .cloud-user-copy strong,
  #settingsPage .cloud-user-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #settingsPage .cloud-sync-status{
    margin-top:7px!important;
    padding:6px 8px!important;
    border:1px solid rgba(255,255,255,.065)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.025)!important;
  }

  /* ---------- Guide / reference ---------- */
  #guidePage .section-heading{margin-bottom:8px!important;}
  #guidePage .guide-layout{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;}
  #guidePage .guide-index{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px!important;
    border-radius:10px!important;
  }
  #guidePage .guide-index-heading{grid-column:1/-1!important;margin-bottom:0!important;}
  #guidePage .guide-index-heading .eyebrow{font-size:7.5px!important;}
  #guidePage .guide-index-heading h3{font-size:12px!important;}
  #guidePage .guide-index-item{
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    padding:7px!important;
    gap:6px!important;
    border-radius:9px!important;
  }
  #guidePage .guide-index-item img{width:28px!important;height:28px!important;flex-basis:28px!important;}
  #guidePage .guide-index-item span{font-size:9px!important;line-height:1.15!important;}
  #guidePage .guide-index-item small{display:none!important;}
  #guidePage .guide-article{padding:10px!important;border-radius:11px!important;}
  #guidePage .guide-hero{gap:9px!important;padding-bottom:10px!important;}
  #guidePage .guide-hero-icon{width:38px!important;height:38px!important;flex-basis:38px!important;}
  #guidePage .guide-hero h3{font-size:16px!important;line-height:1.15!important;}
  #guidePage .guide-hero p,
  #guidePage .guide-section p,
  #guidePage .guide-note p{font-size:9.5px!important;line-height:1.42!important;}
  #guidePage .guide-callout{margin:10px 0!important;padding:9px 10px!important;border-radius:9px!important;grid-template-columns:minmax(0,1fr) auto!important;gap:2px 8px!important;}
  #guidePage .guide-callout strong{grid-row:1/3!important;grid-column:2!important;font-size:18px!important;}
  #guidePage .guide-callout small{grid-column:1!important;font-size:8.5px!important;}
  #guidePage .guide-section{padding:10px 0!important;}
  #guidePage .guide-section h4{font-size:11px!important;line-height:1.2!important;}
  #guidePage .guide-note{margin-top:10px!important;padding:9px 10px!important;border-radius:9px!important;}
  #guidePage .guide-potion-recipes,
  #guidePage .guide-expedition-regions{grid-template-columns:1fr!important;gap:7px!important;}
  #guidePage .guide-expedition-region,
  #guidePage .guide-expedition-encounter{min-width:0!important;}

  /* ---------- Utility/footer ---------- */
  .diagnostics{margin:10px 0 0!important;padding:8px!important;border-radius:9px!important;font-size:9px!important;}
  .diagnostics summary{min-height:44px;display:flex;align-items:center;cursor:pointer;}
  .diagnostics pre{max-height:32dvh!important;font-size:8.5px!important;line-height:1.3!important;}
  footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    padding:8px 10px calc(78px + env(safe-area-inset-bottom))!important;
    font-size:8.5px!important;
  }
  footer #statusMessage{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  footer #resetButton{min-height:44px!important;padding:8px 4px!important;}

  /* ---------- Secondary modals: consistent phone sheets ---------- */
  .offline-modal,
  .sell-confirm-modal,
  .expedition-start-modal,
  .chapter-finale-modal,
  .skill-detail-modal,
  .bank-item-modal-v2{
    align-items:flex-end!important;
    padding:0!important;
  }
  .offline-modal-card,
  .sell-confirm-card,
  .expedition-start-card,
  .chapter-finale-card,
  .skill-detail-modal-card,
  .bank-item-panel-v2{
    width:100%!important;
    max-width:none!important;
    max-height:88dvh!important;
    margin:0!important;
    padding:13px 12px max(13px,env(safe-area-inset-bottom))!important;
    border-radius:16px 16px 0 0!important;
    overflow:auto!important;
  }
  .offline-modal-card{padding-top:16px!important;text-align:left!important;}
  .offline-modal-card .offline-header-interface-icon-art{width:40px!important;height:40px!important;}
  .offline-modal-card h2{font-size:20px!important;}
  .offline-duration{margin-bottom:10px!important;font-size:9.5px!important;}
  .offline-rewards{gap:5px!important;margin-bottom:10px!important;}
  .offline-reward-row{grid-template-columns:28px minmax(0,1fr) auto!important;gap:7px!important;min-height:44px!important;padding:7px 8px!important;}
  #offlineProgressModal .offline-continue-button{width:100%!important;min-height:48px!important;height:auto!important;}
  .sell-confirm-actions,
  .expedition-start-actions,
  .chapter-finale-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;}
  .sell-confirm-actions button,
  .expedition-start-actions button,
  .chapter-finale-actions button{min-width:0!important;min-height:46px!important;white-space:normal!important;}

  /* Toast/gain surfaces should not collide with bottom navigation. */
  .gain-feed{bottom:calc(76px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 20px)!important;}
}

@media (max-width:390px){
  #settingsPage .settings-action-row{grid-template-columns:1fr!important;}
  #guidePage .guide-index{grid-template-columns:1fr 1fr!important;}
  .sell-confirm-actions,
  .expedition-start-actions,
  .chapter-finale-actions{grid-template-columns:1fr!important;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  #settingsPage .settings-card,
  #guidePage .guide-index-item,
  #guidePage .guide-article,
  .offline-modal-card,
  .sell-confirm-card,
  .expedition-start-card,
  .chapter-finale-card{transition:none!important;animation:none!important;}
}

/* ============================================================
   v2.58.0 — FINAL MOBILE UI POLISH & STABILITY — PHASE 8
   Whole-game phone consistency pass. Desktop remains governed by
   the existing desktop rules; these overrides stop at 760px.
   ============================================================ */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{min-height:100dvh;overscroll-behavior-y:none;}

  /* Final shell readability: keep the compact header/nav, remove the last
     over-compressed labels that survived the earlier phone phases. */
  .health-header-stat>span{font-size:8.5px!important;}
  .top-stats .stat-chip span{font-size:8px!important;letter-spacing:.015em!important;}
  .mobile-nav-item>b{font-size:9.5px!important;}
  .mobile-nav-more-label{font-size:9px!important;}
  .mobile-nav-more-heading span{font-size:9.5px!important;}
  .page .section-heading p{font-size:10px!important;line-height:1.4!important;}
  .page .section-heading .eyebrow{font-size:9px!important;line-height:1.15!important;}

  /* Readability floor for labels that were intentionally squeezed during
     the individual phone passes. Keep larger existing text untouched. */
  #equipmentPage .equipment-combat-stats small,
  #equipmentPage .equipment-character-slot small,
  #equipmentPage .equipment-slot-detail-main small,
  #worldMapPage .world-map-heading-stats small,
  #worldMapPage .world-map-node-copy small,
  #worldMapPage .world-map-detail-heading .eyebrow,
  #worldMapPage .world-map-detail-status small,
  #worldMapPage .world-map-project-top .eyebrow,
  #worldMapPage .world-map-project-meta small,
  #worldMapPage .world-map-legend,
  #expeditionsPage .expedition-regions-panel .two-step-worldmap-return .eyebrow,
  #expeditionsPage .two-step-map-level small,
  #expeditionsPage .two-step-region-state,
  #expeditionsPage .two-step-expedition-title .eyebrow,
  #expeditionsPage .expedition-entry-levels,
  #expeditionsPage .two-step-stage-main .eyebrow,
  #expeditionsPage .expedition-attack-line-head em,
  #expeditionsPage .exp-stage-loot>small,
  #expeditionsPage .exp-stage-loot span,
  #expeditionsPage .expedition-loot-info-encounter>header small,
  #denPage .den-hero-copy>.eyebrow,
  #denPage .den-hero-badges span,
  #denPage .den-overview-card .eyebrow,
  #denPage .den-overview-card small,
  #denPage .journey-completed-card-copy small,
  #denPage .journey-journal-heading .eyebrow,
  #denPage .journey-journal-heading-actions .den-room-status,
  #denPage .journey-journal-entry-heading .eyebrow,
  #denPage .journey-journal-entry-heading>strong,
  #denPage .journey-tutorial-head>span,
  #denPage .journey-tutorial-head>strong,
  #denPage .journey-tutorial-step-copy small,
  #denPage .journey-tutorial-step-fold-details>small,
  #denPage .journey-existing-progress>.eyebrow,
  #denPage .journey-journal-objective-copy small,
  #denPage .den-progression-heading .eyebrow,
  #denPage #denCurrentTierBadge,
  #denPage .den-tier-card-top,
  #denPage .den-tier-card-top b,
  #denPage .den-tier-card p,
  #denPage .den-tier-card small,
  #denPage .den-framework-note,
  #denPage .den-route-project-heading .eyebrow,
  #denPage #denForestRouteStatus,
  #denPage .den-route-target small,
  #denPage .den-project-requirement-copy span,
  #denPage .den-project-requirement-copy small,
  #denPage .den-project-requirement button,
  #denPage .den-project-hint,
  #denPage .den-room-card .eyebrow,
  #denPage .den-room-card p,
  #denPage .den-room-card>.den-room-status,
  #denPage .den-future-note .eyebrow,
  #denPage .den-future-note p,
  #masteryPage .mastery-summary-card small,
  #masteryPage .mastery-section-heading .eyebrow,
  #masteryPage .mastery-section-heading>span,
  #masteryPage .mastery-milestone-level small,
  #masteryPage .mastery-activity-title span,
  #masteryPage .mastery-activity-bonus small,
  #achievementsPage .collections-page-summary .mastery-summary-card small,
  #achievementsPage .achievement-status-pill,
  #leaderboardsPage .leaderboard-panel-heading .eyebrow,
  #settingsPage .settings-card>.eyebrow,
  #guidePage .guide-index-heading .eyebrow{
    font-size:8.5px!important;
    line-height:1.2!important;
  }

  /* The Den has several descriptive rows; give prose a slightly higher floor
     than metadata so it remains readable without making the cards bulky. */
  #denPage .den-tier-card p,
  #denPage .den-room-card p,
  #denPage .den-future-note p,
  #denPage .journey-tutorial-step-copy small,
  #denPage .journey-tutorial-step-fold-details>small{
    font-size:9px!important;
    line-height:1.3!important;
  }

  /* Offline Mastery was the remaining progress screen using the old
     responsive desktop stack. Give it the same compact phone grammar. */
  #offlineMasteryPage .offline-mastery-summary-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #offlineMasteryPage .offline-mastery-summary-grid>.mastery-summary-card{
    min-width:0!important;
    padding:9px!important;
    border-radius:10px!important;
  }
  #offlineMasteryPage .offline-mastery-summary-grid>.mastery-summary-card:first-child{
    grid-column:1/-1!important;
  }
  #offlineMasteryPage .offline-mastery-summary-grid .mastery-summary-card span{
    font-size:8.5px!important;
    line-height:1.15!important;
  }
  #offlineMasteryPage .offline-mastery-summary-grid .mastery-summary-card strong{
    font-size:16px!important;
    line-height:1.15!important;
  }
  #offlineMasteryPage .offline-mastery-summary-grid .mastery-summary-card small{
    font-size:9px!important;
    line-height:1.3!important;
  }
  #offlineMasteryPage .mastery-section{
    margin-top:9px!important;
    padding:10px!important;
    border-radius:11px!important;
  }
  #offlineMasteryPage .mastery-section-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    align-items:end!important;
  }
  #offlineMasteryPage .mastery-section-heading .eyebrow{font-size:8.5px!important;}
  #offlineMasteryPage .mastery-section-heading h3{font-size:13px!important;line-height:1.15!important;}
  #offlineMasteryPage .mastery-section-heading>span{font-size:8.5px!important;line-height:1.2!important;text-align:right;}
  #offlineMasteryPage .offline-mastery-description{
    margin-top:7px!important;
    font-size:9.5px!important;
    line-height:1.42!important;
  }
  #offlineMasteryPage .offline-mastery-reward-grid{
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:9px!important;
  }
  #offlineMasteryPage .offline-mastery-reward-card{
    display:grid!important;
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
    min-width:0!important;
    padding:9px!important;
    border-radius:10px!important;
  }
  #offlineMasteryPage .offline-mastery-reward-level{
    min-width:0!important;
    width:50px!important;
  }
  #offlineMasteryPage .offline-mastery-reward-level small{font-size:8.5px!important;}
  #offlineMasteryPage .offline-mastery-reward-level strong{font-size:18px!important;}
  #offlineMasteryPage .offline-mastery-expedition-icon strong{font-size:24px!important;}
  #offlineMasteryPage .offline-mastery-reward-heading{gap:5px!important;}
  #offlineMasteryPage .offline-mastery-reward-heading h4{font-size:10.5px!important;line-height:1.2!important;}
  #offlineMasteryPage .offline-mastery-reward-heading b{font-size:9px!important;}
  #offlineMasteryPage .offline-mastery-reward-copy p{margin:3px 0 6px!important;font-size:9px!important;line-height:1.35!important;}
  #offlineMasteryPage .offline-mastery-reward-copy small{font-size:8.5px!important;line-height:1.25!important;}

  /* Authentication is the first phone screen a player sees. Keep it centered,
     but make it safe-area aware and remove desktop-sized empty space. */
  .auth-gate{
    padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))!important;
  }
  .auth-gate-card{
    width:min(420px,100%)!important;
    padding:24px 18px!important;
    border-radius:18px!important;
  }
  .auth-gate-logo{width:72px!important;height:72px!important;margin-bottom:10px!important;}
  .auth-gate-card h1{margin:6px 0 8px!important;font-size:25px!important;line-height:1.1!important;}
  .auth-gate-card p{margin-bottom:17px!important;font-size:11px!important;line-height:1.45!important;}
  .auth-gate-status{margin-top:10px!important;font-size:9.5px!important;line-height:1.3!important;}
  .auth-gate-signin{min-height:48px!important;font-size:12px!important;}

  /* Active potion status should read like a transient status strip, not a
     second full card beneath the sticky header. */
  .active-potion-bar{
    gap:7px!important;
    margin:6px 8px 0!important;
    padding:7px 8px!important;
    border-radius:10px!important;
  }
  .active-potion-icon{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:9px!important;}
  .active-potion-icon-art{width:30px!important;height:30px!important;}
  .active-potion-copy small{font-size:8.5px!important;line-height:1.1!important;}
  .active-potion-copy strong{font-size:10.5px!important;line-height:1.2!important;}
  .active-potion-copy span{font-size:9px!important;line-height:1.2!important;}
  .active-potion-timer{width:66px!important;min-width:66px!important;}
  .active-potion-timer>strong{font-size:10px!important;}

  /* Consistent visible keyboard focus for phone/tablet keyboard users. */
  main button:focus-visible,
  main [role="button"]:focus-visible,
  main input:focus-visible,
  main select:focus-visible,
  main textarea:focus-visible,
  .auth-gate button:focus-visible{
    outline:2px solid var(--gold)!important;
    outline-offset:2px!important;
  }
}

@media (max-width:390px){
  .top-stats .stat-chip span{font-size:7.75px!important;}
  .mobile-nav-item>b{font-size:9px!important;}
  #offlineMasteryPage .mastery-section-heading{grid-template-columns:1fr!important;align-items:start!important;}
  #offlineMasteryPage .mastery-section-heading>span{text-align:left!important;}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .active-potion-track>span,
  #offlineMasteryPage .offline-mastery-reward-card,
  .auth-gate-card{transition:none!important;animation:none!important;}
}

/* ===== v2.65.0 World Map Rework — Phase 2: Chapter Map Foundation ===== */
.world-map-chapter-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.world-map-chapter-button{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 13px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(18,22,19,.76);color:var(--muted);text-align:left;}
.world-map-chapter-button strong{color:inherit;font-size:.84rem;}
.world-map-chapter-button small{font-size:.68rem;opacity:.8;}
.world-map-chapter-button.is-active{border-color:rgba(212,174,92,.48);background:rgba(196,157,83,.09);color:#ead49c;}
.world-map-chapter-button.is-locked{opacity:.58;cursor:not-allowed;}
.world-map-chapter-lock{font-size:.78rem;line-height:1;}
.world-map-locked-chapter{grid-column:1/-1;min-height:360px;padding:34px;border:1px dashed rgba(196,157,83,.22);border-radius:22px;background:rgba(17,20,18,.72);place-items:center;text-align:center;}
.world-map-locked-chapter:not([hidden]){display:grid;}
.world-map-locked-chapter-inner{max-width:560px;}
.world-map-locked-chapter-icon{display:block;margin-bottom:12px;font-size:2rem;}
.world-map-locked-chapter h3{margin:5px 0 8px;font-size:1.45rem;}
.world-map-locked-chapter p{margin:0;color:var(--muted);line-height:1.55;}
.world-map-shell.is-map-locked .world-map-canvas,
.world-map-shell.is-map-locked .world-map-details{display:none;}
@media(max-width:760px){
  #worldMapPage .world-map-chapter-nav{gap:6px!important;}
  #worldMapPage .world-map-chapter-button{flex:1 1 135px;min-height:40px;padding:8px 9px!important;border-radius:9px!important;}
  #worldMapPage .world-map-chapter-button strong{font-size:9.5px!important;}
  #worldMapPage .world-map-chapter-button small{font-size:7.5px!important;}
  #worldMapPage .world-map-locked-chapter{min-height:260px;padding:22px 14px!important;border-radius:14px!important;}
}

/* ===== v2.66.0 World Map Rework — Phase 3: Lightweight Visual Map =====
   Intentionally low-file-size placeholder art. The structural SVG/CSS layer is
   replaceable later without changing chapter, region, project, or save logic. */
.world-map-canvas{
  isolation:isolate;
  min-height:660px;
  background:
    radial-gradient(circle at 52% 55%,rgba(229,207,153,.12),transparent 44%),
    linear-gradient(145deg,#252b24 0%,#31382b 48%,#252a22 100%);
  border-color:rgba(202,170,103,.28);
  box-shadow:inset 0 0 90px rgba(0,0,0,.42),0 15px 34px rgba(0,0,0,.18);
}
.world-map-canvas::before{
  inset:8px;
  opacity:.32;
  border:1px solid rgba(224,200,144,.16);
  border-radius:16px;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(230,210,160,.035) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,rgba(230,210,160,.028) 50%,transparent 50.2%);
  background-size:72px 72px;
}
.world-map-canvas::after{
  content:'PLACEHOLDER MAP • ART DIRECTION NOT FINAL';
  position:absolute;left:18px;bottom:14px;z-index:5;
  color:rgba(230,210,160,.32);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  pointer-events:none;
}
.world-map-terrain{display:none;}
.world-map-landscape{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;}
.map-landmass{fill:rgba(113,103,73,.22);stroke:rgba(231,208,155,.22);stroke-width:.45;vector-effect:non-scaling-stroke;}
.map-grain{fill:url(#mapPaperGrain);stroke:none;color:rgba(232,213,168,.55);opacity:.34;}
#mapPaperGrain circle,#mapPaperGrain path{fill:currentColor;stroke:currentColor;stroke-width:.12;}
.map-river{fill:none;stroke:rgba(83,126,127,.48);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.map-river-bank{fill:none;stroke:rgba(185,202,179,.13);stroke-width:4.4;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.map-biome>path:first-child,.map-biome>ellipse:first-child{stroke-width:.35;vector-effect:non-scaling-stroke;}
.map-biome-den ellipse:first-child{fill:rgba(129,97,61,.3);stroke:rgba(224,185,111,.24);}
.map-den-ridge{fill:none;stroke:rgba(225,194,128,.35);stroke-width:.65;vector-effect:non-scaling-stroke;}
.map-den-glow{fill:rgba(228,177,75,.18);stroke:rgba(235,197,121,.5);stroke-width:.35;vector-effect:non-scaling-stroke;}
.map-biome-woods>path:first-child{fill:rgba(49,91,50,.44);stroke:rgba(111,156,82,.28);}
.map-forest-pattern{fill:url(#mapForestMarks);color:rgba(160,188,116,.54);opacity:.48;stroke:none!important;}
#mapForestMarks path{fill:currentColor;}
.map-biome-mine>path:first-child{fill:rgba(84,82,72,.46);stroke:rgba(163,153,125,.24);}
.map-mountain{fill:none;stroke:rgba(198,190,159,.46);stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;}
.map-mountain-small{opacity:.46;stroke-width:.5;}
.map-biome-wastes>path:first-child{fill:rgba(122,82,50,.4);stroke:rgba(189,133,76,.28);}
.map-dune-pattern{fill:url(#mapDuneMarks);color:rgba(214,168,103,.5);opacity:.52;stroke:none!important;}
#mapDuneMarks path{fill:none;stroke:currentColor;stroke-width:.45;}
.map-ruin-mark{fill:none;stroke:rgba(222,184,121,.48);stroke-width:.55;vector-effect:non-scaling-stroke;}
.map-frontier-hints{fill:none;stroke:rgba(216,200,165,.16);stroke-width:.65;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.world-map-route-lines{z-index:1;}
.world-map-route-shadow{fill:none;stroke:rgba(7,10,8,.58);stroke-width:4.2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.48;}
.world-map-route-line{stroke:rgba(214,189,128,.66);stroke-width:2;stroke-dasharray:2.4 3.4;filter:none;}
.world-map-route-line.is-preview{stroke:rgba(184,182,153,.28);stroke-width:1.25;stroke-dasharray:1.5 4.2;}
.world-map-canvas.forest-route-open .route-den-woods.world-map-route-line,
.world-map-canvas.mine-route-open .route-woods-mine.world-map-route-line,
.world-map-canvas.wastes-route-open .route-mine-wastes.world-map-route-line{
  stroke:rgba(153,190,106,.9);stroke-width:2.25;stroke-dasharray:none;
}
.world-map-route-label{
  position:absolute;z-index:2;padding:3px 7px;border:1px solid rgba(218,197,145,.16);border-radius:999px;
  background:rgba(29,31,25,.72);color:rgba(231,213,170,.72);font-size:.61rem;letter-spacing:.04em;
  transform:translate(-50%,-50%) rotate(var(--route-tilt,0deg));pointer-events:none;white-space:nowrap;
}
.route-label-forest{left:59%;top:76%;--route-tilt:-48deg;}
.route-label-mine{left:50%;top:50%;--route-tilt:14deg;}
.route-label-wastes{left:49%;top:25%;--route-tilt:-26deg;}
.world-map-frontier-label{position:absolute;right:8%;top:43%;z-index:1;color:rgba(225,209,168,.22);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;transform:rotate(74deg);pointer-events:none;}
.world-map-nodes{z-index:3;}
.world-map-node{
  width:auto;min-width:0;max-width:190px;grid-template-columns:38px minmax(0,1fr);gap:8px;padding:7px 9px;
  border-radius:12px;border-color:rgba(229,207,153,.2);background:rgba(22,25,21,.82);
  box-shadow:0 7px 18px rgba(0,0,0,.3);backdrop-filter:blur(3px);
}
.world-map-node-icon{width:36px;height:36px;border-radius:50%;border:1px solid rgba(225,203,151,.14);background:rgba(255,255,255,.05);font-size:1.18rem;}
.world-map-node-copy strong{font-size:.83rem;letter-spacing:.01em;}
.world-map-node-copy small{font-size:.66rem;}
.world-map-node.is-locked{opacity:.62;filter:saturate(.58);}
.world-map-node.is-known{opacity:.68;filter:saturate(.62);}
.world-map-node.is-selected{border-color:rgba(229,192,104,.66);box-shadow:0 9px 22px rgba(0,0,0,.38),0 0 0 2px rgba(196,157,83,.09);}
.world-map-compass{z-index:4;width:64px;height:64px;opacity:.2;}
.world-map-details{min-height:660px;}

@media(max-width:760px){
  #worldMapPage .world-map-canvas{min-height:500px!important;max-height:500px!important;}
  #worldMapPage .world-map-node{width:auto!important;max-width:128px!important;grid-template-columns:27px minmax(0,1fr)!important;gap:5px!important;padding:5px 6px!important;}
  #worldMapPage .world-map-node-icon{width:27px!important;height:27px!important;font-size:14px!important;}
  #worldMapPage .world-map-node-copy strong{font-size:8.7px!important;}
  #worldMapPage .world-map-node-copy small{font-size:6.6px!important;}
  #worldMapPage .world-map-route-label{padding:2px 5px;font-size:6.6px;}
  #worldMapPage .world-map-frontier-label{font-size:6px;right:5%;}
  #worldMapPage .world-map-compass{width:42px!important;height:42px!important;}
  #worldMapPage .world-map-canvas::after{left:9px;bottom:7px;font-size:5.8px;letter-spacing:.08em;}
}
@media(max-width:420px){
  #worldMapPage .world-map-canvas{min-height:450px!important;max-height:450px!important;}
  #worldMapPage .world-map-node{max-width:112px!important;grid-template-columns:25px minmax(0,1fr)!important;}
  #worldMapPage .world-map-node-icon{width:25px!important;height:25px!important;font-size:12px!important;}
  #worldMapPage .world-map-node-copy strong{font-size:8px!important;}
  #worldMapPage .world-map-node-copy small{font-size:6.1px!important;}
  #worldMapPage .world-map-route-label{font-size:6px;}
}

/* ===== v2.67.0 World Map Rework — Phase 4: Fog-of-War Progression =====
   Fog state is derived from permanent location unlocks. No bitmap fog assets and
   no new save fields are required; Phase 5 owns the one-time reveal animation. */
.world-map-landscape,.world-map-route-lines,.world-map-route-label,.world-map-nodes{z-index:1;}
.world-map-nodes{z-index:2;}
.world-map-route-label{z-index:2;}
.world-map-frontier-label{z-index:2;}
.world-map-fog{
  position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;overflow:visible;
}
.world-map-fog-fill{opacity:1;}
.fog-reveal-window{opacity:0;}
.fog-reveal-den{opacity:1;}
.world-map-canvas.fog-reveal-woods-open .fog-reveal-woods,
.world-map-canvas.fog-reveal-mine-open .fog-reveal-mine,
.world-map-canvas.fog-reveal-wastes-open .fog-reveal-wastes{opacity:1;}
.world-map-fog-wisp{
  fill:none;stroke:rgba(214,220,205,.12);stroke-width:2.2;vector-effect:non-scaling-stroke;
  stroke-linecap:round;filter:blur(1.2px);opacity:.42;
}
.world-map-fog-wisp-two{opacity:.25;stroke-width:3.4;}
.world-map-node.is-concealed{visibility:hidden;pointer-events:none;}
.world-map-frontier-marker{
  position:absolute;left:var(--map-x,50%);top:var(--map-y,50%);z-index:4;
  transform:translate(-50%,-50%);display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:7px;align-items:center;max-width:180px;padding:7px 9px;border:1px dashed rgba(231,214,174,.34);
  border-radius:12px;background:rgba(18,22,19,.78);color:rgba(236,220,180,.9);box-shadow:0 8px 22px rgba(0,0,0,.32);
  text-align:left;backdrop-filter:blur(4px);
}
.world-map-frontier-marker[hidden]{display:none!important;}
.world-map-frontier-marker>span{
  grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(235,216,172,.26);background:rgba(255,255,255,.05);font-weight:800;
}
.world-map-frontier-marker strong{font-size:.72rem;line-height:1.15;}
.world-map-frontier-marker small{margin-top:2px;color:rgba(222,211,182,.6);font-size:.58rem;line-height:1.2;white-space:normal;}
.world-map-frontier-marker:hover{border-color:rgba(231,192,106,.6);background:rgba(25,29,23,.9);}
.world-map-compass{z-index:5;}
.world-map-canvas[data-known-world-complete="true"] .world-map-frontier-label{display:none;}
.world-map-canvas[data-known-world-complete="true"] .world-map-fog-fill{opacity:.72;}
.world-map-canvas[data-known-world-complete="true"] .world-map-frontier-marker{display:none!important;}

@media(max-width:760px){
  #worldMapPage .world-map-frontier-marker{max-width:128px;grid-template-columns:22px minmax(0,1fr);column-gap:5px;padding:5px 6px;border-radius:9px;}
  #worldMapPage .world-map-frontier-marker>span{width:22px;height:22px;font-size:10px;}
  #worldMapPage .world-map-frontier-marker strong{font-size:7.8px;}
  #worldMapPage .world-map-frontier-marker small{font-size:6.2px;}
}

/* Phase 4 keeps the mobile map compact enough that the frontier and details remain reachable without excessive vertical travel. */
@media(max-width:760px){
  #worldMapPage .world-map-canvas{min-height:450px!important;max-height:450px!important;}
}

/* ===== v2.68.0 World Map Rework — Phase 5: Region Unlock Reveal =====
   A successful final World Project completion returns the player to the map,
   focuses the new frontier, clears its vector fog, reveals the route, and
   presents the discovered region. Runtime-only orchestration prevents reloads
   and existing saves from replaying old discovery cinematics. */
.world-map-reveal-focus{
  position:absolute;left:var(--map-x,50%);top:var(--map-y,50%);z-index:5;width:56px;height:56px;
  transform:translate(-50%,-50%) scale(.5);border:1px solid rgba(235,202,126,.7);border-radius:50%;
  box-shadow:0 0 0 0 rgba(230,190,102,.24);opacity:0;pointer-events:none;
}
.world-map-reveal-focus.is-visible{animation:worldMapDiscoveryPulse 1.75s ease-out forwards;}
.world-map-reveal-banner{
  position:absolute;left:50%;bottom:34px;z-index:7;display:flex;align-items:center;gap:10px;min-width:min(320px,82%);
  padding:10px 14px;border:1px solid rgba(229,194,112,.42);border-radius:14px;background:rgba(15,19,16,.92);
  color:#f1dfad;box-shadow:0 14px 34px rgba(0,0,0,.42);backdrop-filter:blur(8px);
  transform:translate(-50%,12px);opacity:0;pointer-events:none;
}
.world-map-reveal-banner[hidden]{display:none!important;}
.world-map-reveal-banner.is-visible{animation:worldMapDiscoveryBanner .42s ease-out forwards;}
.world-map-reveal-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(229,194,112,.3);border-radius:50%;background:rgba(229,194,112,.08);font-size:1.2rem;}
.world-map-reveal-banner span:last-child{display:flex;flex-direction:column;min-width:0;}
.world-map-reveal-banner small{color:rgba(227,214,178,.66);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;}
.world-map-reveal-banner strong{margin-top:2px;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.world-map-canvas.world-map-reveal-active{
  transform-origin:var(--reveal-x,50%) var(--reveal-y,50%);
  animation:worldMapDiscoveryFocus 3.1s cubic-bezier(.2,.72,.28,1) both;
}
.world-map-canvas.world-map-reveal-active .world-map-frontier-marker{opacity:0;pointer-events:none;}
.world-map-canvas.world-map-reveal-active .world-map-node.is-reveal-target{
  opacity:0;transform:translate(-50%,-50%) scale(.84);pointer-events:none;
}
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling .world-map-node.is-reveal-target{
  animation:worldMapDiscoveryNode .65s 1.05s ease-out forwards;
}
.world-map-canvas.world-map-reveal-active .fog-reveal-window{transition:opacity 1.25s cubic-bezier(.2,.65,.2,1);}
.world-map-canvas.world-map-reveal-active[data-reveal-node-id="whispering_woods"] .fog-reveal-woods,
.world-map-canvas.world-map-reveal-active[data-reveal-node-id="abandoned_mine"] .fog-reveal-mine,
.world-map-canvas.world-map-reveal-active[data-reveal-node-id="scorched_wastes"] .fog-reveal-wastes{opacity:0;}
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling[data-reveal-node-id="whispering_woods"] .fog-reveal-woods,
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling[data-reveal-node-id="abandoned_mine"] .fog-reveal-mine,
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling[data-reveal-node-id="scorched_wastes"] .fog-reveal-wastes{opacity:1;}
.world-map-canvas.world-map-reveal-active .world-map-fog-wisp{animation:worldMapFogDrift 1.7s ease-in-out both;}
.world-map-canvas.world-map-reveal-active[data-reveal-node-id="whispering_woods"] .route-den-woods.world-map-route-line,
.world-map-canvas.world-map-reveal-active[data-reveal-node-id="abandoned_mine"] .route-woods-mine.world-map-route-line,
.world-map-canvas.world-map-reveal-active[data-reveal-node-id="scorched_wastes"] .route-mine-wastes.world-map-route-line{
  opacity:.18;stroke:rgba(214,189,128,.66);stroke-dasharray:2.4 3.4;
}
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling[data-reveal-node-id="whispering_woods"] .route-den-woods.world-map-route-line,
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling[data-reveal-node-id="abandoned_mine"] .route-woods-mine.world-map-route-line,
.world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling[data-reveal-node-id="scorched_wastes"] .route-mine-wastes.world-map-route-line{
  animation:worldMapRouteReveal 1.15s .2s ease-out forwards;
}
@keyframes worldMapDiscoveryFocus{
  0%{filter:brightness(1)}
  20%{filter:brightness(1.07)}
  72%{filter:brightness(1.035)}
  100%{filter:brightness(1)}
}
@keyframes worldMapDiscoveryPulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.45);box-shadow:0 0 0 0 rgba(230,190,102,.3)}
  22%{opacity:1}
  70%{opacity:.62;box-shadow:0 0 0 28px rgba(230,190,102,0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.45);box-shadow:0 0 0 42px rgba(230,190,102,0)}
}
@keyframes worldMapDiscoveryBanner{to{opacity:1;transform:translate(-50%,0)}}
@keyframes worldMapDiscoveryNode{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes worldMapFogDrift{0%{transform:translateX(0);opacity:.42}45%{opacity:.62}100%{transform:translateX(8%);opacity:.16}}
@keyframes worldMapRouteReveal{
  0%{opacity:.18;stroke:rgba(214,189,128,.66);stroke-dasharray:2.4 3.4;stroke-dashoffset:12}
  100%{opacity:1;stroke:rgba(153,190,106,.9);stroke-width:2.25;stroke-dasharray:none;stroke-dashoffset:0}
}
@media(max-width:760px){
  #worldMapPage .world-map-reveal-banner{bottom:22px;min-width:min(260px,78%);padding:8px 10px;gap:8px;border-radius:11px;}
  #worldMapPage .world-map-reveal-icon{width:30px;height:30px;font-size:14px;}
  #worldMapPage .world-map-reveal-banner small{font-size:6.5px;}
  #worldMapPage .world-map-reveal-banner strong{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
  .world-map-canvas.world-map-reveal-active,
  .world-map-canvas.world-map-reveal-active .world-map-fog-wisp,
  .world-map-canvas.world-map-reveal-active .world-map-node.is-reveal-target,
  .world-map-reveal-focus.is-visible,
  .world-map-reveal-banner.is-visible{animation:none!important;}
  .world-map-canvas.world-map-reveal-active.world-map-reveal-unveiling .world-map-node.is-reveal-target{opacity:1;transform:translate(-50%,-50%) scale(1);}
  .world-map-reveal-focus.is-visible{opacity:0;}
  .world-map-reveal-banner.is-visible{opacity:1;transform:translate(-50%,0);}
  .world-map-canvas.world-map-reveal-active .fog-reveal-window{transition:none!important;}
}

/* ===== v2.69.0 World Map Rework — Phase 6: Chapter Transition & Stability =====
   Chapter maps stay bounded. When more than one chapter map is truly unlocked,
   lightweight navigation shortcuts appear automatically without changing saves. */
.world-map-navigation-shortcuts{
  display:grid;gap:4px;margin:4px 0 0 38px;padding-left:8px;border-left:1px solid rgba(225,203,151,.12);
}
.world-map-navigation-shortcuts[hidden],
.world-map-navigation-mobile-group[hidden]{display:none!important;}
.world-map-navigation-shortcut{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon title" "icon subtitle";
  column-gap:6px;align-items:center;width:100%;min-width:0;padding:5px 7px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);text-align:left;
}
.world-map-navigation-shortcut>span{grid-area:icon;opacity:.55;font-size:.72rem;}
.world-map-navigation-shortcut>b{grid-area:title;min-width:0;font-size:.72rem;font-weight:700;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.world-map-navigation-shortcut>small{grid-area:subtitle;min-width:0;font-size:.58rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.world-map-navigation-shortcut:hover,
.world-map-navigation-shortcut.is-active{background:rgba(196,157,83,.08);color:#e3cc92;}
.mobile-nav-more-item.world-map-navigation-shortcut{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"icon title" "icon subtitle";}
.mobile-nav-more-item.world-map-navigation-shortcut>span{display:grid;place-items:center;}
.mobile-nav-more-item.world-map-navigation-shortcut>small{display:block;}

/* ============================================================
   V1.01.16 — OFFICIAL JOURNEYDEN LOGO PACK REPLACEMENT
   Canonical dark/matte pixel-fantasy identity, August 2026.
   ============================================================ */
body.official-logo-pack-v10116 .premium-brand-block {
  display:block;
  padding:4px 8px 16px;
}
body.official-logo-pack-v10116 .premium-brand-block .sidebar-journeyden-logo {
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
  margin:0 auto;
  object-fit:contain;
  border:0;
  background:transparent;
  box-shadow:none;
}
body.official-logo-pack-v10116 .auth-gate-logo.official-journeyden-logo,
body.official-logo-pack-v10116 .mobile-header-logo.official-journeyden-logo {
  object-fit:contain;
  border:0;
  background:transparent;
  box-shadow:none;
}

/* ===== V1.01.22 Expedition Key Requirement UX ===== */
.expedition-key-source-panel{
  grid-column:1/-1;
  display:grid;
  gap:8px;
  padding:11px;
  border:1px solid rgba(239,178,39,.22);
  border-radius:9px;
  background:rgba(239,178,39,.045);
}
.expedition-key-source-heading{display:grid;gap:2px;}
.expedition-key-source-heading small{color:var(--muted);font-size:11px;line-height:1.35;}
.expedition-key-source-list{display:grid;gap:6px;}
.expedition-key-source-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface-2);
}
.expedition-key-source-row > span{display:flex;align-items:center;gap:8px;}
.expedition-key-source-row > span:last-child{display:grid;justify-items:end;gap:1px;}
.expedition-key-source-row small{color:var(--muted);font-size:10px;}
.expedition-key-source-row b{color:var(--gold);}
.expedition-key-source-enemy b{font-size:18px;line-height:1;}
.expedition-key-source-enemy strong{color:var(--text);font-size:12px;}
.expedition-key-source-empty{color:var(--muted);font-size:12px;}
.expedition-key-warning{border-color:rgba(239,178,39,.4)!important;background:rgba(239,178,39,.1)!important;}
.exp-log-enter-button.missing-key{border-color:rgba(239,178,39,.55)!important;color:#e5b858!important;}
.exp-log-enter-button.missing-key small{color:#e5b858!important;}
@media(max-width:520px){
  .expedition-key-source-row{padding:7px 8px;}
  .expedition-key-source-heading small{font-size:10px;}
}

/* V1.01.37 — The First Steps + high-visibility navigation CTA */
.current-journey-tracker.is-guided {
  border-color: rgba(226, 189, 104, 0.72);
  background: linear-gradient(135deg, rgba(67, 48, 22, 0.97), rgba(30, 27, 22, 0.98));
  box-shadow: 0 0 0 1px rgba(226, 189, 104, 0.12), 0 0 28px rgba(209, 161, 73, 0.16), 0 10px 28px rgba(0, 0, 0, 0.22);
}
.current-journey-tracker.is-guided .current-journey-icon {
  border: 1px solid rgba(226, 189, 104, 0.3);
  background: rgba(209, 161, 73, 0.09);
  box-shadow: 0 0 18px rgba(209, 161, 73, 0.12);
}
.current-journey-actions .tutorial-glow {
  position: relative;
  overflow: hidden;
  border-color: rgba(241, 205, 119, 0.86) !important;
  background: linear-gradient(180deg, #d5a64d, #ad792c) !important;
  color: #17120a !important;
  font-weight: 800;
  box-shadow: 0 0 0 1px rgba(243, 211, 132, 0.2), 0 0 20px rgba(226, 177, 73, 0.42), 0 4px 12px rgba(0, 0, 0, 0.24);
  animation: journeyTutorialPulse 1.9s ease-in-out infinite;
}
.current-journey-actions .tutorial-glow::after {
  content: '';
  position: absolute;
  inset: -2px auto -2px -38%;
  width: 28%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
  animation: journeyTutorialSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
.main-navigation [data-page].journey-nav-cue,
.mobile-top-navigation [data-page].journey-nav-cue {
  box-shadow: inset 0 0 0 1px rgba(226, 189, 104, 0.48), 0 0 15px rgba(209, 161, 73, 0.16);
}
.main-navigation [data-page].journey-nav-cue::after,
.mobile-top-navigation [data-page].journey-nav-cue::after {
  box-shadow: 0 0 0 3px rgba(209,161,73,.16), 0 0 12px rgba(226,189,104,.65);
  animation: journeyNavCuePulse 1.8s ease-in-out infinite;
}
@keyframes journeyTutorialPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(243,211,132,.18), 0 0 13px rgba(226,177,73,.28), 0 4px 12px rgba(0,0,0,.24); }
  50% { box-shadow: 0 0 0 2px rgba(243,211,132,.28), 0 0 27px rgba(226,177,73,.58), 0 4px 14px rgba(0,0,0,.3); }
}
@keyframes journeyTutorialSweep {
  0%, 55% { left: -38%; opacity: 0; }
  65% { opacity: .8; }
  86%, 100% { left: 120%; opacity: 0; }
}
@keyframes journeyNavCuePulse {
  0%, 100% { transform: scale(.92); opacity: .82; }
  50% { transform: scale(1.16); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .current-journey-actions .tutorial-glow,
  .current-journey-actions .tutorial-glow::after,
  .main-navigation [data-page].journey-nav-cue::after,
  .mobile-top-navigation [data-page].journey-nav-cue::after { animation: none !important; }
}
@media (max-width: 820px) {
  .current-journey-tracker.is-guided { border-color: rgba(226, 189, 104, 0.76); }
  .current-journey-actions .tutorial-glow { min-height: 44px; }
}


/* ===== V1.01.39 Reset Confirmation Visibility ===== */
/* Reset is destructive and must always sit above phone navigation, bank sheets,
   Expedition sheets, and other normal gameplay overlays. */
#resetConfirmModal{
  z-index:22000 !important;
}

#resetConfirmModal.open{
  display:grid !important;
  place-items:center !important;
  padding:16px !important;
}

#resetConfirmModal .reset-confirm-card{
  max-height:min(86dvh,620px);
  overflow:auto;
}

#resetConfirmModal .reset-confirm-warning{
  margin:10px 0 0;
  padding:10px 11px;
  border:1px solid rgba(209,103,84,.34);
  border-radius:9px;
  background:rgba(143,63,48,.10);
  color:#e7c7bb;
}

#resetConfirmModal .reset-confirm-warning strong{
  color:#ffd3c7;
}

#resetConfirmModal .sell-confirm-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  margin-top:2px;
  padding:10px 0 0;
  background:linear-gradient(180deg,rgba(8,18,27,0),var(--surface) 26%);
}

body.premium-everywhere #resetConfirmModal .reset-confirm-button{
  min-height:46px !important;
  border-color:rgba(235,135,112,.82) !important;
  background:linear-gradient(180deg,#b85b47,#7f342a) !important;
  color:#fff7f3 !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(116,48,38,.32) !important;
}

body.premium-everywhere #resetConfirmModal .reset-confirm-button:focus-visible{
  outline:3px solid rgba(255,211,199,.72) !important;
  outline-offset:2px;
}

.reset-danger-card{
  position:relative;
  border-color:rgba(209,103,84,.32) !important;
}

.reset-danger-icon{
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(209,103,84,.30);
  border-radius:8px;
  color:#efb27a;
  background:rgba(143,63,48,.10);
  font-size:18px;
}

body.premium-everywhere .reset-request-button{
  border-color:rgba(209,103,84,.42) !important;
  color:#f0c4b7 !important;
  background:rgba(116,48,38,.16) !important;
}

body.premium-everywhere .reset-request-button:hover:not(:disabled){
  border-color:rgba(235,135,112,.68) !important;
  background:rgba(132,54,42,.28) !important;
}

@media(max-width:760px){
  #resetConfirmModal.open{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
  }

  #resetConfirmModal .reset-confirm-card{
    width:100% !important;
    max-width:none !important;
    max-height:82dvh !important;
    margin:0 !important;
    padding:14px 12px max(16px,env(safe-area-inset-bottom)) !important;
    border-radius:16px 16px 0 0 !important;
  }

  #resetConfirmModal .sell-confirm-actions{
    grid-template-columns:1fr 1.25fr !important;
    padding-top:12px !important;
  }

  #resetConfirmModal .sell-confirm-actions button{
    min-height:50px !important;
  }
}

@media(max-width:390px){
  #resetConfirmModal .sell-confirm-actions{
    grid-template-columns:1fr !important;
  }
}

/* ===== V1.01.40 All-Device UI Reliability ===== */
/* Central modal layer: every gameplay dialog must cover responsive navigation. */
.offline-modal,
.cloud-conflict-modal,
.expedition-start-modal,
.sell-confirm-modal,
.chapter-finale-modal,
.skill-detail-modal,
.skill-details-modal,
.bank-item-modal-v2{
  z-index:5000 !important;
}
#resetConfirmModal{z-index:22000 !important;}

.bank-category-swipe-hint{display:none;}

/* Tablets are touch devices too: preserve the compact visual language but not tiny controls. */
@media (max-width:820px){
  #activitiesPage .activity-filter-toggle,
  #bankPage .bank-category-tabs button,
  #bankPage .bank-filter-toggle{
    min-height:44px !important;
  }
}

/* Small-phone Bank categories deliberately scroll; make that affordance explicit. */
@media (max-width:520px){
  #bankPage .bank-category-swipe-hint{
    display:flex;
    align-items:center;
    min-height:20px;
    margin:-1px 2px 1px;
    color:var(--muted);
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    opacity:.82;
  }
  #bankPage .bank-category-tabs{
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);
  }
  #bankPage .bank-category-tabs button{scroll-snap-align:start;}
}

/* Low-height landscape phones: keep The First Steps visible without consuming the play area. */
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .current-journey-tracker{
    grid-template-columns:30px minmax(0,1fr) auto !important;
    gap:6px !important;
    margin:4px 8px 0 !important;
    padding:5px 7px !important;
    border-radius:9px !important;
  }
  .current-journey-icon{width:30px !important;height:30px !important;border-radius:8px !important;}
  .current-journey-icon img{width:21px !important;height:21px !important;}
  .current-journey-copy .eyebrow{font-size:8px !important;margin-bottom:1px !important;}
  .current-journey-copy > strong{font-size:11px !important;line-height:1.15 !important;}
  .current-journey-hint,
  .current-journey-progress,
  .current-journey-count{display:none !important;}
  .current-journey-actions{
    grid-column:auto !important;
    display:flex !important;
    gap:4px !important;
  }
  .current-journey-actions button{
    min-height:36px !important;
    padding:5px 8px !important;
    font-size:9px !important;
    line-height:1.1 !important;
  }
  .current-journey-actions .secondary{display:none !important;}
  main{padding-top:6px !important;}
}
@media (max-width:820px){
  #combatPage #combatAutoEatControl{min-height:44px !important;padding-block:7px !important;}
}
@media (max-width:820px){
  .offline-modal-card,
  .cloud-conflict-card,
  .expedition-start-card,
  .sell-confirm-card,
  .chapter-finale-card,
  .skill-detail-panel,
  .skill-details-panel,
  .skill-detail-modal-card,
  .bank-item-panel-v2{
    justify-self:stretch !important;
  }
}
@media (max-width:820px){
  .offline-modal.open,
  .cloud-conflict-modal.open,
  .expedition-start-modal.open,
  .sell-confirm-modal.open,
  .chapter-finale-modal.open,
  .skill-detail-modal.open,
  .skill-details-modal.open,
  .bank-item-modal-v2.open{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .offline-modal-card,
  .cloud-conflict-card,
  .expedition-start-card,
  .sell-confirm-card,
  .chapter-finale-card,
  .skill-detail-panel,
  .skill-details-panel,
  .skill-detail-modal-card,
  .bank-item-panel-v2{
    width:100vw !important;
    max-width:100vw !important;
    box-sizing:border-box !important;
  }
}

/* ===== V1.01.41 Responsive Edge-Case Lock ===== */
/* Collections controls need to wrap before the desktop sidebar leaves them too little room. */
@media (min-width:761px) and (max-width:930px){
  #achievementsPage .achievement-controls{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  #achievementsPage .achievement-filter-tabs,
  #achievementsPage .achievement-filter-tools{
    width:100%!important;
    min-width:0!important;
  }
  #achievementsPage .achievement-filter-tools{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  #achievementsPage .achievement-filter-tools > *{
    min-width:0!important;
    width:100%!important;
  }
  #achievementsPage #achievementSearchInput{
    grid-column:1/-1!important;
    width:100%!important;
  }
}

/* Very short landscape phones: keep the Expedition confirmation fully actionable without
   requiring the player to fight the fixed navigation or a clipped action row. */
@media (max-width:820px) and (max-height:340px) and (orientation:landscape){
  .expedition-start-modal.open{
    align-items:stretch!important;
    padding:0!important;
  }
  .expedition-start-card{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom))!important;
    gap:5px!important;
    border-radius:0!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }
  .expedition-start-icon{width:36px!important;height:36px!important;font-size:20px!important;border-radius:8px!important;}
  .expedition-start-copy h3{margin:0 0 2px!important;font-size:16px!important;line-height:1.1!important;}
  .expedition-start-copy p{font-size:10px!important;line-height:1.2!important;}
  .expedition-start-levels{gap:5px!important;}
  .expedition-start-stat{min-height:36px!important;padding:5px 8px!important;border-radius:7px!important;}
  .expedition-start-stat span{font-size:9px!important;}
  .expedition-start-stat strong{font-size:14px!important;}
  .expedition-start-warning{gap:6px!important;padding:5px 8px!important;font-size:9px!important;line-height:1.2!important;border-radius:7px!important;}
  .expedition-start-cost{min-height:34px!important;padding:5px 8px!important;font-size:9px!important;border-radius:7px!important;}
  .expedition-start-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:3!important;
    gap:6px!important;
    padding:4px 0 0!important;
    background:linear-gradient(180deg,rgba(5,12,14,0),#050c0e 28%)!important;
  }
  .expedition-start-actions button{min-height:40px!important;padding:6px 8px!important;font-size:9px!important;}
}

/* ============================================================
   V1.01.42 — PHONE NAVIGATION REWORK
   Remove sideways-scrolling navigation/filter strips on phones.
   Horizontal scrolling is reserved for genuinely tabular content only.
   ============================================================ */
.mobile-activity-skill-select,
.mobile-bank-category-select{display:none;}

@media (max-width:760px){
  /* Shared native-feeling selectors for high-cardinality phone navigation. */
  #activitiesPage .mobile-activity-skill-select,
  #bankPage .mobile-bank-category-select{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    align-items:center;
    width:100%;
    min-width:0;
    margin:0;
    padding:8px 9px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--surface-2);
  }
  #activitiesPage .mobile-activity-skill-select>span,
  #bankPage .mobile-bank-category-select>span{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  #activitiesPage .mobile-activity-skill-select select,
  #bankPage .mobile-bank-category-select select{
    width:100%;
    min-width:0;
    min-height:44px !important;
    padding:8px 34px 8px 10px;
    border:1px solid rgba(215,173,86,.32);
    border-radius:8px;
    background:#08121b;
    color:var(--text);
    font-size:16px !important;
    font-weight:800;
  }

  /* Activities: a selector is clearer than a hidden sideways skill ribbon. */
  #activitiesPage #activitySkillTabs{display:none !important;}
  #activitiesPage .activity-sidebar-panel{
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }
  #activitiesPage .activity-quick-nav{
    grid-template-columns:1fr !important;
  }
  #activitiesPage .activity-filter-toggle{
    width:100%;
  }
  #activitiesPage .activity-filter-chips{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px !important;
    width:100%;
    overflow:visible !important;
    flex-wrap:wrap !important;
    padding:0 !important;
  }
  #activitiesPage .activity-filter-chip{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:44px !important;
    justify-content:center;
    white-space:normal !important;
    text-align:center;
  }

  /* Bank: category select replaces the swipe-only category ribbon. */
  #bankPage .bank-main-nav{
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:stretch !important;
  }
  #bankPage #bankCategoryTabs,
  #bankPage .bank-category-swipe-hint{display:none !important;}
  #bankPage .mobile-bank-category-select{padding:6px 7px !important;}
  #bankPage .bank-filter-toggle{align-self:stretch;}

  /* Combat selectors: visible grids beat partially hidden card carousels. */
  #combatPage .combat-style-grid,
  #combatPage .combat-enemy-grid,
  #combatPage .combat-food-grid-v2{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px !important;
    width:100%;
    overflow:visible !important;
    padding-bottom:0 !important;
  }
  #combatPage .combat-style-button,
  #combatPage .combat-enemy-card,
  #combatPage .combat-food-choice{
    flex:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
  #combatPage .combat-enemy-copy strong,
  #combatPage .combat-enemy-copy small{
    white-space:normal !important;
    text-overflow:clip !important;
  }

  /* Expedition navigation and loot become vertical/wrapped content. */
  #expeditionsPage .expedition-region-grid,
  #expeditionsPage .expedition-world-map{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100%;
    overflow:visible !important;
    padding-bottom:0 !important;
  }
  #expeditionsPage .expedition-region-card,
  #expeditionsPage .expedition-region-card.map-node{
    flex:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    scroll-snap-align:none !important;
  }
  #expeditionsPage .expedition-loot-list{
    display:flex !important;
    flex-wrap:wrap !important;
    overflow:visible !important;
    gap:5px !important;
    padding-bottom:0 !important;
  }
  #expeditionsPage .expedition-loot-chip{
    flex:0 1 auto !important;
    max-width:100%;
  }

  /* World chapters and skill details should fit the viewport without sideways swiping. */
  #worldMapPage .world-map-chapter-nav{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    width:100%;
    overflow:visible !important;
  }
  #worldMapPage .world-map-chapter-button{
    width:100%;
    min-width:0;
  }
  #skillsPage #skillXpTableView,
  #skillsPage .skill-xp-table-wrap{
    max-width:100%;
    overflow-x:visible !important;
  }
  #skillsPage .skill-xp-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed;
  }
  #skillsPage .skill-xp-table th,
  #skillsPage .skill-xp-table td{
    padding:5px 4px !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
}

@media (max-width:350px){
  #combatPage .combat-style-grid,
  #combatPage .combat-enemy-grid,
  #combatPage .combat-food-grid-v2{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:760px){
  #expeditionsPage .exp-log-detail-tabs,
  #skillsPage .skill-detail-tabs{
    overflow-x:visible !important;
  }
}

/* ============================================================
   V1.01.43 — SUBTLE ACTIVITY GAIN POPUPS
   Recent skill/activity gains are deliberately quiet status hints.
   Phone presentation lives below the sticky account header and never
   competes with the fixed thumb navigation.
   ============================================================ */
#gainFeed.gain-feed{
  z-index:1320 !important;
  width:min(260px,calc(100vw - 28px));
  gap:4px;
}

.gain-toast{
  min-width:0;
  padding:6px 8px;
  gap:6px;
  border-color:rgba(255,255,255,.065);
  border-radius:7px;
  background:rgba(7,16,25,.88);
  box-shadow:0 4px 14px rgba(3,9,14,.20);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transform:translateX(-6px);
  transition:opacity .14s ease,transform .14s ease;
}

.gain-toast.visible{opacity:.94;transform:translateX(0)}
.gain-toast.leaving{opacity:0;transform:translateX(-5px)}
.gain-toast-icon{
  width:24px;
  height:24px;
  border-radius:6px;
  font-size:14px;
  background:rgba(255,255,255,.035);
}
.gain-toast-copy strong{font-size:9px;font-weight:720;line-height:1.15}
.gain-toast-copy small{margin-top:1px;font-size:7.5px;line-height:1.15;opacity:.72}
.gain-toast>b{font-size:9px;font-weight:760;opacity:.9}

@media (max-width:760px){
  #gainFeed.gain-feed{
    top:calc(62px + env(safe-area-inset-top)) !important;
    right:7px !important;
    bottom:auto !important;
    left:auto !important;
    width:min(178px,calc(100vw - 14px)) !important;
    max-height:76px !important;
    gap:3px !important;
    align-items:flex-end !important;
    overflow:hidden !important;
    pointer-events:none;
  }

  #gainFeed .gain-toast{
    width:auto !important;
    min-width:118px !important;
    max-width:178px !important;
    grid-template-columns:18px minmax(0,1fr) auto !important;
    gap:5px !important;
    padding:4px 6px !important;
    border-color:rgba(255,255,255,.055) !important;
    border-radius:999px !important;
    background:rgba(7,16,25,.82) !important;
    box-shadow:0 3px 10px rgba(3,9,14,.18) !important;
    transform:translateY(-4px) !important;
  }

  #gainFeed .gain-toast.visible{
    opacity:.90 !important;
    transform:translateY(0) !important;
  }

  #gainFeed .gain-toast.leaving{
    opacity:0 !important;
    transform:translateY(-3px) !important;
  }

  #gainFeed .gain-toast-icon,
  #gainFeed .gain-toast > span:first-child{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    flex-basis:18px !important;
    border-radius:50% !important;
    background:transparent !important;
    font-size:12px !important;
  }

  #gainFeed .gain-toast-icon-art{
    width:16px !important;
    height:16px !important;
  }

  #gainFeed .gain-toast-copy strong{
    font-size:8px !important;
    font-weight:700 !important;
    line-height:1.05 !important;
  }

  #gainFeed .gain-toast-copy small{
    display:none !important;
  }

  #gainFeed .gain-toast > b{
    font-size:8px !important;
    line-height:1 !important;
  }
}

@media (max-width:360px){
  #gainFeed.gain-feed{
    right:5px !important;
    width:min(162px,calc(100vw - 10px)) !important;
  }
  #gainFeed .gain-toast{max-width:162px !important;}
}

@media (max-width:760px) and (max-height:390px){
  #gainFeed.gain-feed{
    top:calc(58px + env(safe-area-inset-top)) !important;
    max-height:42px !important;
  }
  #gainFeed .gain-toast:nth-last-child(n+2){display:none !important;}
}

@media (prefers-reduced-motion:reduce){
  .gain-toast{transition:none !important;}
}



.expedition-key-source-enemy-art{width:22px;height:22px;vertical-align:middle;object-fit:contain;display:block;}
.expedition-key-source-enemy b{display:grid;place-items:center;min-width:22px;min-height:22px;}


/* ===== V1.01.66 Combat monster integration refinement =====
   Goal: stop clipping, anchor monsters cleanly, and make them feel integrated in the panel. */
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 72%, rgba(182,121,34,.12), transparent 62%),
    #020607 !important;
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateY(1px);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.34));
}
body.combat-reference-v1019 #combatPage .combat-fighter-portrait,
body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
  overflow: visible !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
  background:
    radial-gradient(circle at 50% 78%, rgba(182,121,34,.11), transparent 50%),
    radial-gradient(circle at 50% 42%, rgba(182,121,34,.08), transparent 60%),
    #020607;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  padding: 8px 4px 10px !important;
  box-sizing: border-box !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 84px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.34));
}
#expeditionsPage .expedition-loot-info-enemy-icon,
.expedition-key-source-enemy b {
  overflow: visible !important;
}
#expeditionsPage .expedition-loot-info-enemy-icon .expedition-loot-enemy-art,
.expedition-key-source-enemy-art {
  object-position: center bottom !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
    padding: 6px 2px 8px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 68px !important;
    max-height: 62px !important;
  }
}
@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 62px !important;
    max-height: 56px !important;
  }
}


/* ===== V1.01.67 Remove enemy portrait box ===== */
body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 118px !important;
  margin-bottom: 2px !important;
  overflow: visible !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > small {
  display: none !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  padding: 0 2px 4px !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 50% 88%, rgba(182,121,34,.16), transparent 36%) !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 106px !important;
  max-height: 94px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.36));
}
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
    min-height: 96px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
    padding: 0 1px 2px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 82px !important;
    max-height: 72px !important;
  }
}
@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
    min-height: 88px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 74px !important;
    max-height: 64px !important;
  }
}

/* V1.01.115 Farming plot controls */
@media (max-width: 520px) {
  .farming-plot-actions { grid-template-columns: 1fr; }
  .farming-stop-button { width: 100%; min-width: 0; }
}


/* ============================================================
   V1.01.138 — MOBILE GAME SHELL — PHASE 1
   Phone/tablet presentation only. Gameplay and desktop layout are unchanged.
   Establishes one authoritative mobile shell above the older responsive layers.
   ============================================================ */
@media (max-width:820px){
  html{
    min-height:100%;
    background:#020608;
    overscroll-behavior:none;
  }

  body.mobile-game-shell-v101138{
    min-width:0 !important;
    min-height:100dvh;
    margin:0 !important;
    padding:0 !important;
    overflow-x:clip !important;
    color:#e8e1d3;
    background:
      radial-gradient(circle at 50% -15%,rgba(154,108,37,.10),transparent 34%),
      linear-gradient(180deg,#061015 0%,#03090d 48%,#02070a 100%) !important;
    overscroll-behavior-y:contain;
    -webkit-tap-highlight-color:transparent;
    scroll-padding-top:72px !important;
    scroll-padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  }

  body.mobile-game-shell-v101138 .app-shell{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  body.mobile-game-shell-v101138 .reference-sidebar,
  body.mobile-game-shell-v101138 .sidebar{
    display:none !important;
  }

  body.mobile-game-shell-v101138 .app-main{
    position:relative;
    width:100% !important;
    min-width:0 !important;
    min-height:100dvh !important;
    margin:0 !important;
    padding:0 0 calc(76px + env(safe-area-inset-bottom)) !important;
    border:0 !important;
    background:transparent !important;
    overflow-x:clip !important;
  }

  /* Compact RPG HUD: brand, health, gold and total level stay visible. */
  body.mobile-game-shell-v101138 .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1650 !important;
    display:grid !important;
    grid-template-columns:68px minmax(82px,1fr) auto !important;
    align-items:center !important;
    gap:6px !important;
    min-height:62px !important;
    margin:0 !important;
    padding-top:max(7px,env(safe-area-inset-top)) !important;
    padding-right:max(8px,env(safe-area-inset-right)) !important;
    padding-bottom:7px !important;
    padding-left:max(8px,env(safe-area-inset-left)) !important;
    border:0 !important;
    border-bottom:1px solid rgba(218,167,73,.38) !important;
    border-radius:0 !important;
    background:
      linear-gradient(180deg,rgba(16,26,30,.995),rgba(5,12,16,.995)) !important;
    box-shadow:
      inset 0 -1px rgba(255,217,132,.06),
      0 6px 18px rgba(0,0,0,.42) !important;
    backdrop-filter:blur(10px);
  }

  body.mobile-game-shell-v101138 .mobile-header-logo{
    display:block !important;
    width:66px !important;
    height:36px !important;
    max-height:36px !important;
    object-fit:contain !important;
    object-position:left center;
  }

  body.mobile-game-shell-v101138 .topbar-title{
    min-width:0 !important;
  }

  body.mobile-game-shell-v101138 .topbar-title > .eyebrow,
  body.mobile-game-shell-v101138 .topbar-title > p{
    display:none !important;
  }

  body.mobile-game-shell-v101138 .health-header-stat{
    display:grid !important;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:2px 5px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    margin:0 !important;
    padding:6px 7px !important;
    border:1px solid rgba(164,118,53,.36) !important;
    border-radius:6px !important;
    background:linear-gradient(180deg,rgba(24,34,36,.94),rgba(9,17,20,.94)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.018) !important;
  }

  body.mobile-game-shell-v101138 .health-header-stat > span{
    color:#a79b84 !important;
    font-size:7.5px !important;
    font-weight:800 !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase;
  }

  body.mobile-game-shell-v101138 .health-header-stat > strong{
    margin:0 !important;
    color:#e9dfcf !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-align:right;
    white-space:nowrap;
  }

  body.mobile-game-shell-v101138 .health-header-stat .health-bar{
    grid-column:1/-1;
    width:100%;
    height:6px !important;
    margin:2px 0 0 !important;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.58);
    border-radius:2px !important;
    background:#020607 !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.65);
  }

  body.mobile-game-shell-v101138 .top-stats{
    display:grid !important;
    grid-template-columns:repeat(2,58px) !important;
    gap:4px !important;
    width:auto !important;
    min-width:0 !important;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-chip{
    display:grid !important;
    grid-template-columns:16px minmax(0,1fr) !important;
    align-items:center !important;
    gap:4px !important;
    width:58px !important;
    min-width:0 !important;
    min-height:42px !important;
    margin:0 !important;
    padding:5px !important;
    border:1px solid rgba(164,118,53,.34) !important;
    border-radius:6px !important;
    background:linear-gradient(180deg,rgba(23,32,34,.94),rgba(8,15,18,.94)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.015) !important;
    text-align:left !important;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-interface-icon-art{
    display:block !important;
    width:16px !important;
    height:16px !important;
    object-fit:contain !important;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-chip > div{
    min-width:0;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-chip span{
    display:block !important;
    overflow:hidden;
    color:#918875 !important;
    font-size:6.5px !important;
    font-weight:780 !important;
    line-height:1 !important;
    letter-spacing:.02em !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-chip strong{
    display:block !important;
    margin-top:2px;
    overflow:hidden;
    color:#e8c66e !important;
    font-size:10.5px !important;
    font-weight:850 !important;
    line-height:1.05 !important;
    text-align:left !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* The content is the game viewport, not a bordered desktop webpage card. */
  body.mobile-game-shell-v101138 main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:7px 6px 10px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow-x:clip !important;
  }

  body.mobile-game-shell-v101138 .page{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Compact quest strip directly beneath the HUD. */
  body.mobile-game-shell-v101138 .current-journey-tracker{
    width:auto !important;
    min-width:0 !important;
    margin:6px 6px 0 !important;
    padding:7px 8px !important;
    border:1px solid rgba(178,130,55,.30) !important;
    border-left:3px solid rgba(218,167,73,.76) !important;
    border-radius:7px !important;
    background:linear-gradient(90deg,rgba(40,29,13,.42),rgba(8,16,19,.94) 28%,rgba(6,13,16,.94)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.014) !important;
  }

  body.mobile-game-shell-v101138 .current-journey-icon{
    width:30px !important;
    height:30px !important;
  }

  body.mobile-game-shell-v101138 .current-journey-copy strong{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  body.mobile-game-shell-v101138 .current-journey-count{
    color:#d7b45e !important;
    font-weight:850 !important;
  }

  /* Permanent thumb bar: heavier game-frame treatment and clear selected tab. */
  body.mobile-game-shell-v101138 .mobile-top-navigation{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:1900 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding-right:env(safe-area-inset-right) !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
    padding-left:env(safe-area-inset-left) !important;
    border:0 !important;
    border-top:1px solid rgba(218,167,73,.42) !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,rgba(10,18,21,.995),rgba(3,9,12,.998)) !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.55),inset 0 1px rgba(255,222,151,.05) !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-primary{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:3px !important;
    min-height:66px;
    padding:5px 6px 6px !important;
    background:transparent !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-item{
    position:relative;
    display:grid !important;
    place-items:center;
    align-content:center;
    gap:3px !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:5px 2px 4px !important;
    border:1px solid rgba(255,255,255,.035) !important;
    border-radius:6px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(0,0,0,.08)) !important;
    color:#a9aaa2 !important;
    box-shadow:none !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-item > span{
    display:grid !important;
    place-items:center;
    min-height:26px !important;
    line-height:1 !important;
  }

  body.mobile-game-shell-v101138 .mobile-interface-icon-art{
    width:25px !important;
    height:25px !important;
    object-fit:contain !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-item > b{
    width:100%;
    color:inherit !important;
    font-size:9px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-align:center;
    white-space:nowrap;
  }

  body.mobile-game-shell-v101138 .mobile-nav-item.active,
  body.mobile-game-shell-v101138 .mobile-nav-item.menu-open{
    border-color:rgba(218,167,73,.55) !important;
    background:linear-gradient(180deg,rgba(181,126,42,.22),rgba(62,43,18,.18)) !important;
    color:#f0ce76 !important;
    box-shadow:inset 0 3px 0 rgba(228,181,84,.82),inset 0 0 14px rgba(181,126,42,.08) !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-more{
    position:absolute !important;
    top:auto !important;
    right:6px !important;
    bottom:100% !important;
    left:6px !important;
    max-height:min(74dvh,640px) !important;
    margin:0 !important;
    padding:10px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    border:1px solid rgba(218,167,73,.42) !important;
    border-bottom-color:rgba(218,167,73,.18) !important;
    border-radius:14px 14px 0 0 !important;
    background:linear-gradient(180deg,rgba(13,22,25,.998),rgba(4,10,13,.998)) !important;
    box-shadow:0 -18px 46px rgba(0,0,0,.66),inset 0 1px rgba(255,224,156,.05) !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-more-heading{
    background:linear-gradient(180deg,rgba(13,22,25,.998),rgba(10,18,21,.998)) !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-more-group{
    border-color:rgba(178,130,55,.16) !important;
    background:rgba(255,255,255,.014) !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-more-item{
    border-color:rgba(178,130,55,.18) !important;
    background:rgba(8,16,19,.88) !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-more-item.active{
    border-color:rgba(218,167,73,.52) !important;
    background:rgba(126,88,32,.18) !important;
    color:#f0ce76 !important;
  }

  body.mobile-game-shell-v101138 .gain-feed{
    bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width:560px){
  body.mobile-game-shell-v101138 .current-journey-hint{
    display:none !important;
  }

  body.mobile-game-shell-v101138 .current-journey-tracker{
    gap:6px !important;
  }

  body.mobile-game-shell-v101138 .current-journey-actions button{
    min-height:38px !important;
    padding:5px 7px !important;
    font-size:9px !important;
  }
}

@media (max-width:370px){
  body.mobile-game-shell-v101138 .topbar{
    grid-template-columns:58px minmax(72px,1fr) auto !important;
    gap:4px !important;
    padding-right:max(5px,env(safe-area-inset-right)) !important;
    padding-left:max(5px,env(safe-area-inset-left)) !important;
  }

  body.mobile-game-shell-v101138 .mobile-header-logo{
    width:56px !important;
  }

  body.mobile-game-shell-v101138 .top-stats{
    grid-template-columns:repeat(2,52px) !important;
    gap:3px !important;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-chip{
    grid-template-columns:14px minmax(0,1fr) !important;
    width:52px !important;
    padding:4px !important;
  }

  body.mobile-game-shell-v101138 .top-stats .stat-interface-icon-art{
    width:14px !important;
    height:14px !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-primary{
    gap:2px !important;
    padding-inline:4px !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-item > b{
    font-size:8px !important;
  }
}

@media (max-width:820px) and (max-height:520px){
  body.mobile-game-shell-v101138 .topbar{
    min-height:50px !important;
    padding-top:max(4px,env(safe-area-inset-top)) !important;
    padding-bottom:4px !important;
  }

  body.mobile-game-shell-v101138 .mobile-header-logo{
    height:30px !important;
    max-height:30px !important;
  }

  body.mobile-game-shell-v101138 .health-header-stat,
  body.mobile-game-shell-v101138 .top-stats .stat-chip{
    min-height:36px !important;
    padding-block:4px !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-primary{
    min-height:56px;
    padding-block:3px 4px !important;
  }

  body.mobile-game-shell-v101138 .mobile-nav-item{
    min-height:48px !important;
  }

  body.mobile-game-shell-v101138 .mobile-interface-icon-art{
    width:22px !important;
    height:22px !important;
  }
}

@media (max-width:820px) and (prefers-reduced-motion:reduce){
  body.mobile-game-shell-v101138 .topbar,
  body.mobile-game-shell-v101138 .mobile-top-navigation,
  body.mobile-game-shell-v101138 .mobile-nav-item,
  body.mobile-game-shell-v101138 .mobile-nav-more{
    transition:none !important;
  }
}

/* ============================================================
   V1.01.139 — MOBILE ACTIVITIES — PHASE 2
   Game-first phone/tablet Activities presentation. These rules are
   presentation-only and never apply to desktop/web at 821px+.
   ============================================================ */
.activity-mobile-action{display:none;}

@media (max-width:820px){
  body.mobile-activities-v101139 #activitiesPage{
    --jd-mobile-activity-gold:#d5a84c;
    --jd-mobile-activity-line:rgba(181,130,53,.34);
    --jd-mobile-activity-panel:rgba(6,14,17,.96);
    padding-bottom:8px!important;
  }

  /* The global HUD already names the game. Activities opens directly into play. */
  body.mobile-activities-v101139 #activitiesPage > .page-title-row{
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-layout{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-content{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    min-width:0!important;
  }

  /* Skill switcher behaves like a game mode selector rather than a web form. */
  body.mobile-activities-v101139 #activitiesPage .activity-sidebar-panel{
    position:static!important;
    width:100%!important;
    margin:0 0 7px!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.mobile-activities-v101139 #activitiesPage #activitySkillTabs{
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-select{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) minmax(118px,42%)!important;
    align-items:center!important;
    gap:8px!important;
    min-height:62px!important;
    margin:0!important;
    padding:7px 8px!important;
    border:1px solid var(--jd-mobile-activity-line)!important;
    border-radius:7px!important;
    background:
      linear-gradient(180deg,rgba(29,31,25,.34),rgba(6,14,17,.97)),
      var(--jd-mobile-activity-panel)!important;
    box-shadow:inset 0 0 0 1px rgba(255,222,154,.025)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-icon{
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    border:1px solid rgba(181,130,53,.30)!important;
    border-radius:6px!important;
    background:#03090b!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-icon-art{
    width:38px!important;
    height:38px!important;
    object-fit:contain!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-copy{
    display:grid!important;
    gap:2px!important;
    min-width:0!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-copy small{
    color:#81765f!important;
    font-size:8px!important;
    font-weight:850!important;
    letter-spacing:.09em!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-copy strong{
    overflow:hidden!important;
    color:#d9c392!important;
    font-family:var(--jd-serif,Georgia,serif)!important;
    font-size:15px!important;
    font-weight:600!important;
    line-height:1.1!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-field{
    display:block!important;
    min-width:0!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-picker-button{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:6px!important;
    padding:7px 9px!important;
    border:1px solid rgba(213,168,76,.48)!important;
    border-radius:5px!important;
    background:linear-gradient(180deg,rgba(117,80,25,.20),rgba(33,23,11,.22))!important;
    color:#e8c96f!important;
    font-size:11px!important;
    font-weight:800!important;
    text-align:left!important;
    box-shadow:inset 0 1px rgba(255,228,159,.04)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-picker-chevron{
    color:#b98b3f!important;
    font-size:15px!important;
  }

  /* Skill picker becomes a proper inventory-like game sheet. */
  body.mobile-activities-v101139 .mobile-activity-skill-picker{
    z-index:2100!important;
    align-items:flex-end!important;
    padding:0!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-picker-panel{
    width:100%!important;
    max-width:none!important;
    max-height:min(82dvh,700px)!important;
    margin:0!important;
    border:1px solid rgba(213,168,76,.44)!important;
    border-bottom:0!important;
    border-radius:14px 14px 0 0!important;
    background:linear-gradient(180deg,#0b1518,#040a0d)!important;
    box-shadow:0 -18px 48px rgba(0,0,0,.68)!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-picker-heading{
    padding:11px 12px 9px!important;
    border-bottom:1px solid rgba(181,130,53,.22)!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-picker-heading h3{
    color:#dfc27f!important;
    font-size:18px!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-picker-list{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice{
    min-height:88px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    align-content:center!important;
    gap:4px!important;
    padding:7px 4px!important;
    border:1px solid rgba(118,88,45,.34)!important;
    border-radius:6px!important;
    background:#050c0f!important;
    text-align:center!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice.active{
    border-color:rgba(213,168,76,.68)!important;
    background:linear-gradient(180deg,rgba(147,99,30,.20),#061014)!important;
    box-shadow:inset 0 -2px 0 rgba(213,168,76,.62)!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice-icon{
    width:38px!important;
    height:38px!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice-icon-art{
    width:36px!important;
    height:36px!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice-copy b{
    font-size:10px!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice-copy small{
    font-size:8px!important;
  }

  body.mobile-activities-v101139 .mobile-activity-skill-choice-state{
    display:none!important;
  }

  /* Compact skill HUD attached to the selected training mode. */
  body.mobile-activities-v101139 #activitiesPage .mobile-skill-training-summary{
    order:0!important;
    display:grid!important;
    gap:5px!important;
    margin:0!important;
    padding:8px 9px!important;
    border:1px solid rgba(181,130,53,.28)!important;
    border-radius:6px!important;
    background:linear-gradient(90deg,rgba(65,45,17,.22),rgba(5,12,15,.95) 45%)!important;
    box-shadow:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-head{
    grid-template-columns:32px minmax(0,1fr) auto!important;
    gap:7px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-icon{
    width:32px!important;
    height:32px!important;
    border:0!important;
    background:transparent!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-icon-art{
    width:30px!important;
    height:30px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-copy strong{
    font-size:13px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-level{
    display:flex!important;
    align-items:baseline!important;
    gap:4px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-level b{
    font-size:18px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-xp,
  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-meta{
    font-size:8.5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-progress{
    height:6px!important;
    border-radius:2px!important;
    background:#020607!important;
  }

  body.mobile-activities-v101139 #activitiesPage .mobile-skill-summary-progress span{
    border-radius:1px!important;
    background:linear-gradient(90deg,#9a6827,#e0b75e)!important;
  }

  /* Active training is a persistent in-screen status panel with a large Stop control. */
  body.mobile-activities-v101139 #activitiesPage .current-activity-card.is-idle{
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card:not(.is-idle){
    order:1!important;
    margin:0!important;
    border:1px solid rgba(213,168,76,.60)!important;
    border-radius:7px!important;
    background:linear-gradient(135deg,rgba(91,61,19,.28),rgba(5,13,16,.98) 42%)!important;
    box-shadow:inset 0 0 18px rgba(187,130,37,.045)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card:not(.is-idle) .activity-header{
    grid-template-columns:minmax(0,1fr) 92px!important;
    gap:8px!important;
    padding:9px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card .activity-header .eyebrow{
    color:#a87d35!important;
    font-size:8px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card .activity-header h2{
    color:#e2c685!important;
    font-size:16px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card .activity-header p{
    font-size:9px!important;
  }

  body.mobile-activities-v101139 #activitiesPage #stopActivityButton{
    width:92px!important;
    min-width:92px!important;
    min-height:48px!important;
    border-radius:5px!important;
    font-size:10px!important;
    font-weight:850!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card .progress-panel{
    padding:7px 9px 9px!important;
    border-top:1px solid rgba(213,168,76,.13)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card .progress-track{
    height:10px!important;
    border-radius:2px!important;
    background:#020607!important;
  }

  body.mobile-activities-v101139 #activitiesPage .current-activity-card .progress-fill{
    border-radius:1px!important;
  }

  /* Training method controls read as an in-game selection tray. */
  body.mobile-activities-v101139 #activitiesPage .activity-browse-controls{
    order:2!important;
    margin:0!important;
    padding:7px!important;
    border:1px solid rgba(118,88,45,.26)!important;
    border-radius:6px!important;
    background:#050c0f!important;
    box-shadow:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-quick-nav{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-main-filters{
    gap:5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-filter-chips{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    padding:0!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-filter-chip{
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    padding:5px 7px!important;
    border-radius:4px!important;
    background:#071014!important;
    font-size:9px!important;
    line-height:1.15!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-filter-chip.active{
    border-color:rgba(213,168,76,.54)!important;
    background:linear-gradient(180deg,rgba(113,77,25,.22),rgba(12,18,17,.9))!important;
    color:#e4c271!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-filter-toggle{
    width:70px!important;
    min-width:70px!important;
    min-height:40px!important;
    padding:5px!important;
    border-radius:4px!important;
    font-size:9px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-advanced-filters{
    margin-top:7px!important;
    padding-top:7px!important;
    border-top:1px solid rgba(118,88,45,.22)!important;
  }

  body.mobile-activities-v101139 #activitiesPage #activityCards{
    order:3!important;
    min-width:0!important;
  }

  /* Gathering skills use chunky two-column training tiles: art first, stats second. */
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering #activityCards,
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-click-card{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:
      "icon icon"
      "main main"
      "time xp"
      "state state"
      "action action"!important;
    align-content:start!important;
    gap:0!important;
    min-width:0!important;
    min-height:214px!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid rgba(111,80,39,.42)!important;
    border-radius:6px!important;
    background:linear-gradient(180deg,#071014,#03090b)!important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-click-card.active-card{
    border-color:rgba(218,170,77,.78)!important;
    background:linear-gradient(180deg,rgba(86,57,18,.28),#071014 35%,#03090b)!important;
    box-shadow:inset 0 3px 0 rgba(218,170,77,.72)!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-icon{
    grid-area:icon!important;
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    min-height:82px!important;
    border:0!important;
    border-bottom:1px solid rgba(111,80,39,.25)!important;
    background:
      radial-gradient(circle at 50% 62%,rgba(145,99,32,.15),transparent 46%),
      #03090b!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-icon .jd-item-icon,
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-item-icon-art{
    width:68px!important;
    height:68px!important;
    max-width:68px!important;
    max-height:68px!important;
    object-fit:contain!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-main{
    grid-area:main!important;
    min-width:0!important;
    padding:7px 8px 6px!important;
    text-align:center!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-title .eyebrow{
    font-size:7.5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-title h3{
    margin:2px 0 3px!important;
    color:#ddc188!important;
    font-size:14px!important;
    text-align:center!important;
    white-space:normal!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-output{
    display:block!important;
    color:#9b896c!important;
    font-size:8px!important;
    line-height:1.25!important;
    text-align:center!important;
    white-space:normal!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-material-requirements:has(.activity-materials-empty){
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-stat{
    display:grid!important;
    align-content:center!important;
    justify-items:center!important;
    min-height:38px!important;
    padding:4px!important;
    border-top:1px solid rgba(111,80,39,.20)!important;
    border-left:0!important;
    background:rgba(0,0,0,.10)!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-stat:nth-of-type(3){
    grid-area:time!important;
    border-right:1px solid rgba(111,80,39,.20)!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-stat:nth-of-type(4){
    grid-area:xp!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-stat small{
    font-size:7px!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-stat strong{
    margin:1px 0 0!important;
    font-size:11px!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-mastery{
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-state{
    grid-area:state!important;
    min-width:0!important;
    min-height:24px!important;
    padding:4px 6px!important;
    border:0!important;
    border-top:1px solid rgba(111,80,39,.18)!important;
    background:#03090b!important;
    font-size:8px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action{
    grid-area:action!important;
    display:grid!important;
    grid-template-columns:auto auto!important;
    justify-content:center!important;
    align-items:baseline!important;
    gap:4px!important;
    min-height:42px!important;
    padding:8px 6px!important;
    border-top:1px solid rgba(111,80,39,.22)!important;
    background:linear-gradient(180deg,rgba(118,82,29,.14),rgba(32,23,12,.08))!important;
    color:#cdb16f!important;
    text-align:center!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action small{
    color:#8b7b60!important;
    font-size:7px!important;
    font-weight:750!important;
    text-transform:uppercase!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action strong{
    color:#e1c16f!important;
    font-size:11px!important;
    font-weight:850!important;
    text-transform:uppercase!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action.active{
    background:rgba(103,116,48,.16)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action.active strong{
    color:#b7ce7b!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action.blocked{
    background:rgba(88,43,35,.12)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .activity-mobile-action.blocked strong{
    color:#aa7567!important;
  }

  /* Production skills use an equipment-grid feel. Empty instruction panels are removed. */
  body.mobile-activities-v101139 #activitiesPage.activity-mode-production .activity-browse-controls{
    padding:5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-production .activity-main-filters{
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage.activity-mode-production .activity-filter-toggle{
    width:100%!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-forge-navigation{
    margin:0!important;
    padding:7px!important;
    border:1px solid rgba(118,88,45,.30)!important;
    border-radius:6px!important;
    background:#050c0f!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-forge-head{
    gap:7px!important;
    margin-bottom:6px!important;
    padding-bottom:6px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-forge-identity{
    min-width:0!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-forge-icon{
    width:40px!important;
    height:40px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-category-nav,
  body.mobile-activities-v101139 #activitiesPage .cooking-category-nav,
  body.mobile-activities-v101139 #activitiesPage .construction-category-nav,
  body.mobile-activities-v101139 #activitiesPage .apothecary-category-nav{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-tier-nav,
  body.mobile-activities-v101139 #activitiesPage .cooking-tier-nav,
  body.mobile-activities-v101139 #activitiesPage .construction-tier-nav,
  body.mobile-activities-v101139 #activitiesPage .apothecary-tier-nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-nav-tab,
  body.mobile-activities-v101139 #activitiesPage .smithing-tier-tab{
    min-width:0!important;
    min-height:42px!important;
    padding:5px 4px!important;
    border-radius:4px!important;
    font-size:8.5px!important;
    white-space:normal!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-forge-workspace{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-board{
    order:1!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-panel.empty{
    display:none!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-panel.running{
    order:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:9px!important;
    border:1px solid rgba(213,168,76,.58)!important;
    border-radius:6px!important;
    background:linear-gradient(135deg,rgba(86,57,18,.24),#050c0f 40%)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-heading{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:8px!important;
    padding-bottom:7px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-item-icon{
    width:50px!important;
    height:50px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-item-icon .jd-item-icon,
  body.mobile-activities-v101139 #activitiesPage .smithing-active-item-icon img,
  body.mobile-activities-v101139 #activitiesPage .smithing-active-item-art{
    width:48px!important;
    height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-loop-note{
    padding:6px 7px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-stats{
    gap:5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-stats > div{
    min-height:46px!important;
    padding:6px 7px!important;
    border-radius:4px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-material{
    border-radius:4px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-active-stop{
    min-height:48px!important;
    border-radius:5px!important;
    font-weight:850!important;
    text-transform:uppercase!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-tile{
    min-height:116px!important;
    padding:7px 4px 6px!important;
    border-radius:5px!important;
    background:linear-gradient(180deg,#071014,#03090b)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-tile-icon{
    width:50px!important;
    height:50px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-tile-icon .jd-item-icon,
  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-tile-icon img,
  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-icon-art{
    width:46px!important;
    height:46px!important;
    max-width:46px!important;
    max-height:46px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-tile.active{
    border-color:#d5a84c!important;
    background:linear-gradient(180deg,rgba(117,77,24,.28),#061014)!important;
    box-shadow:inset 0 -3px 0 rgba(213,168,76,.72)!important;
  }

  /* Farming keeps its unique plot loop but adopts the same game-panel language. */
  body.mobile-activities-v101139 #activitiesPage.activity-mode-farming .mobile-skill-training-summary{
    margin-bottom:0!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-dashboard{
    gap:7px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-dashboard-hero,
  body.mobile-activities-v101139 #activitiesPage .farming-plot-card,
  body.mobile-activities-v101139 #activitiesPage .farming-seed-vault,
  body.mobile-activities-v101139 #activitiesPage .farming-contract-card{
    border-radius:6px!important;
    background:#050c0f!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-dashboard-hero{
    padding:10px!important;
    border-color:rgba(181,130,53,.30)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-stat-strip{
    gap:5px!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-stat-strip > div{
    min-height:44px!important;
    border-radius:4px!important;
    background:#03090b!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-plot-card{
    border-color:rgba(118,88,45,.30)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-plot-card.growing,
  body.mobile-activities-v101139 #activitiesPage .farming-plot-card.ready{
    border-color:rgba(213,168,76,.54)!important;
  }

  body.mobile-activities-v101139 #activitiesPage .farming-plot-form button,
  body.mobile-activities-v101139 #activitiesPage .farming-harvest-button,
  body.mobile-activities-v101139 #activitiesPage .farming-contract-actions button{
    min-height:46px!important;
    border-radius:5px!important;
    font-weight:800!important;
  }
}

@media (max-width:390px){
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-select{
    grid-template-columns:42px minmax(0,1fr) minmax(108px,40%)!important;
    gap:6px!important;
    padding:6px!important;
  }
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-icon{
    width:42px!important;
    height:42px!important;
  }
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-icon-art{
    width:34px!important;
    height:34px!important;
  }
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-copy strong{
    font-size:13px!important;
  }
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-picker-button{
    padding-inline:7px!important;
    font-size:10px!important;
  }
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-click-card{
    min-height:204px!important;
  }
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-icon{
    min-height:74px!important;
  }
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-ref-icon .jd-item-icon,
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-item-icon-art{
    width:60px!important;
    height:60px!important;
  }
  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-grid{
    gap:4px!important;
  }
  body.mobile-activities-v101139 #activitiesPage .smithing-recipe-tile{
    min-height:110px!important;
  }
}

@media (max-width:340px){
  body.mobile-activities-v101139 .mobile-activity-skill-picker-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering #activityCards,
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-card-grid{
    grid-template-columns:1fr!important;
  }
  body.mobile-activities-v101139 #activitiesPage.activity-mode-gathering .activity-click-card{
    min-height:190px!important;
  }
}

@media (min-width:821px){
  /* Explicit desktop guard: Phase 2 is not allowed to alter web presentation. */
  body.mobile-activities-v101139 #activitiesPage[data-activity-skill]{
    --mobile-activities-phase2-desktop-guard:1;
  }
}

/* Phase 2 selector de-duplication: icon + selected skill is enough on phone. */
@media (max-width:820px){
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-select{
    grid-template-columns:46px minmax(0,1fr)!important;
  }
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-copy{
    display:none!important;
  }
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-field{
    grid-column:2!important;
  }
}
@media (max-width:390px){
  body.mobile-activities-v101139 #activitiesPage .mobile-activity-skill-select{
    grid-template-columns:42px minmax(0,1fr)!important;
  }
}

/* V1.01.198 Security Phase 1 */
.leaderboard-security-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(215,173,86,.35);
  border-radius: 9px;
  background: rgba(215,173,86,.07);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

/* JourneyDen UI source: styles/reference-ui-final.css | sha256:5cc7d7caa0f531c4656398ca7fac137027e8719c7a412a596bdd6a45e25a69ac */
/* JourneyDen V1.01.13 — canonical consolidated Reference UI stylesheet.
   Generated from the locked V1.01 phase cascade in original load order.
   Keep historical phase files in the source archive; production loads this file only. */

/* ===== SOURCE: reference-ui.css ===== */
/*
 * JourneyDen V1.01.1 — Reference UI Rework / Foundation Restart
 * Canonical visual direction: the supplied Expedition Log reference.
 * This file intentionally overrides legacy styling without changing gameplay.
 */

:root {
  --jd-ink-0: #030708;
  --jd-ink-1: #050b0d;
  --jd-ink-2: #081013;
  --jd-ink-3: #0b1518;
  --jd-ink-4: #101b1e;
  --jd-gold-0: #6e4617;
  --jd-gold-1: #8d5b1d;
  --jd-gold-2: #b67922;
  --jd-gold-3: #d3a14d;
  --jd-gold-4: #f0c56d;
  --jd-parchment: #d8c6a0;
  --jd-text: #d9c9aa;
  --jd-muted: #9e8e72;
  --jd-faint: #756b5a;
  --jd-green: #8fbe42;
  --jd-red: #d75b42;
  --jd-blue: #8daac2;
  --jd-line: rgba(180, 116, 32, .55);
  --jd-line-soft: rgba(180, 116, 32, .23);
  --jd-panel-shadow: inset 0 0 0 1px rgba(0,0,0,.84), inset 0 0 0 3px rgba(180,116,32,.06), 0 10px 30px rgba(0,0,0,.28);
  --jd-serif: Georgia, Cambria, "Times New Roman", serif;

  /* Override old application tokens so legacy components inherit the new grammar. */
  --bg: var(--jd-ink-0);
  --surface: var(--jd-ink-2);
  --surface-2: var(--jd-ink-3);
  --surface-3: var(--jd-ink-4);
  --line: var(--jd-line-soft);
  --text: var(--jd-text);
  --muted: var(--jd-muted);
  --gold: var(--jd-gold-3);
  --red: var(--jd-red);
  --shadow: var(--jd-panel-shadow);
  --sidebar-width: 222px;
}

html { background: var(--jd-ink-0); }

body.reference-ui-v1011 {
  background:
    radial-gradient(circle at 48% -10%, rgba(45, 69, 63, .14), transparent 34rem),
    radial-gradient(circle at 82% 92%, rgba(92, 54, 17, .08), transparent 28rem),
    linear-gradient(180deg, #050a0c 0%, #020607 100%);
  color: var(--jd-text);
  font-family: var(--jd-serif);
  font-size: 15px;
  letter-spacing: .005em;
}

body.reference-ui-v1011 ::selection {
  background: rgba(211, 161, 77, .28);
  color: #fff1cf;
}

/* ---------- Whole game frame ---------- */
body.reference-ui-v1011 .app-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  background: var(--jd-ink-0);
}

body.reference-ui-v1011 .app-main {
  min-width: 0;
  background:
    linear-gradient(rgba(211,161,77,.018), rgba(211,161,77,.006)),
    var(--jd-ink-0);
}

body.reference-ui-v1011 main {
  position: relative;
  flex: 1;
  margin: 7px 7px 7px 0;
  padding: 20px 22px 26px;
  border: 1px solid var(--jd-gold-1);
  background:
    linear-gradient(90deg, rgba(211,161,77,.028), transparent 10rem),
    radial-gradient(circle at 50% -20%, rgba(39,60,56,.12), transparent 38rem),
    var(--jd-ink-1);
  box-shadow:
    inset 0 0 0 3px #050a0b,
    inset 0 0 0 4px rgba(182,121,34,.28),
    0 0 0 1px #020405,
    0 12px 42px rgba(0,0,0,.34);
}

/* Small corner strokes echo the reference frame without bitmap panel art. */
body.reference-ui-v1011 main::before,
body.reference-ui-v1011 main::after,
body.reference-ui-v1011 .reference-sidebar::before,
body.reference-ui-v1011 .reference-sidebar::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
body.reference-ui-v1011 main::before {
  top: 4px; left: 4px;
  border-top: 2px solid var(--jd-gold-3);
  border-left: 2px solid var(--jd-gold-3);
}
body.reference-ui-v1011 main::after {
  right: 4px; bottom: 4px;
  border-right: 2px solid var(--jd-gold-3);
  border-bottom: 2px solid var(--jd-gold-3);
}

/* The reference has no modern dashboard header on desktop. Keep the existing
   DOM for compatibility, but move the important data into the sidebar. */
@media (min-width: 821px) {
  body.reference-ui-v1011 .topbar { display: none !important; }
}

/* ---------- Sidebar / wordmark / player block ---------- */
body.reference-ui-v1011 .reference-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  border: 1px solid var(--jd-gold-1);
  border-left-color: var(--jd-gold-2);
  background:
    linear-gradient(180deg, rgba(24,42,43,.15), transparent 17rem),
    var(--jd-ink-1);
  box-shadow:
    inset 0 0 0 3px #05090a,
    inset 0 0 0 4px rgba(182,121,34,.25),
    9px 0 24px rgba(0,0,0,.2);
}
body.reference-ui-v1011 .reference-sidebar::before {
  top: 5px; left: 5px;
  border-top: 2px solid var(--jd-gold-3);
  border-left: 2px solid var(--jd-gold-3);
}
body.reference-ui-v1011 .reference-sidebar::after {
  right: 5px; bottom: 5px;
  border-right: 2px solid var(--jd-gold-3);
  border-bottom: 2px solid var(--jd-gold-3);
}

body.reference-ui-v1011 .reference-wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 70px;
  padding: 15px 20px 11px;
  border: 0;
  background: transparent;
}
body.reference-ui-v1011 .reference-wordmark-mark {
  width: 29px;
  height: 29px;
  object-fit: contain;
  image-rendering: auto;
}
body.reference-ui-v1011 .reference-wordmark-text {
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: 21px;
  font-variant: small-caps;
  letter-spacing: .06em;
  text-shadow: 0 1px 8px rgba(211,161,77,.12);
}

body.reference-ui-v1011 .sidebar-player-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  margin: 0 12px 9px;
  padding: 10px 8px 12px;
  border-top: 1px solid var(--jd-line-soft);
  border-bottom: 1px solid var(--jd-line-soft);
}
body.reference-ui-v1011 .sidebar-player-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--jd-gold-1);
  border-radius: 50%;
  background: #071013;
  box-shadow: inset 0 0 0 3px #050a0c, 0 0 0 1px rgba(211,161,77,.09);
}
body.reference-ui-v1011 .sidebar-player-avatar img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}
body.reference-ui-v1011 .sidebar-player-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}
body.reference-ui-v1011 .sidebar-player-rank {
  color: var(--jd-gold-3);
  font-size: 12px;
  font-weight: 700;
}
body.reference-ui-v1011 .sidebar-player-copy > strong {
  overflow: hidden;
  color: #ead8b2;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.reference-ui-v1011 .sidebar-player-copy small {
  color: var(--jd-muted);
  font-size: 11px;
}
body.reference-ui-v1011 .sidebar-player-copy small b { color: var(--jd-parchment); }
body.reference-ui-v1011 .sidebar-player-health {
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.34);
  background: #020505;
}
body.reference-ui-v1011 .sidebar-player-health span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #77531d, #d39d42);
}
body.reference-ui-v1011 .sidebar-player-gold {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: -2px;
  color: var(--jd-gold-4);
  font-size: 11px;
}
body.reference-ui-v1011 .sidebar-player-gold img { width: 15px; height: 15px; object-fit: contain; }

/* Reference uses a simple, uninterrupted vertical menu rather than dashboard groups. */
body.reference-ui-v1011 .main-navigation {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 3px 8px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(182,121,34,.35) transparent;
}
body.reference-ui-v1011 .main-navigation .nav-group { display: contents; }
body.reference-ui-v1011 .main-navigation .nav-group-label { display: none !important; }
body.reference-ui-v1011 .main-navigation button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 1px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #bda77f;
  font-family: var(--jd-serif);
  font-weight: 400;
  text-align: left;
  box-shadow: none;
}
body.reference-ui-v1011 .main-navigation button:hover:not(:disabled) {
  filter: none;
  color: #e7c985;
  background: linear-gradient(90deg, rgba(182,121,34,.07), transparent 85%);
}
body.reference-ui-v1011 .main-navigation button.active {
  border-color: rgba(182,121,34,.46);
  color: var(--jd-gold-4);
  background:
    linear-gradient(90deg, rgba(182,121,34,.15), rgba(182,121,34,.025));
  box-shadow:
    inset 0 0 0 2px #050a0c,
    inset 0 0 0 3px rgba(182,121,34,.15);
}
body.reference-ui-v1011 .main-navigation button.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--jd-gold-3);
}
body.reference-ui-v1011 .main-navigation button span,
body.reference-ui-v1011 .main-navigation .nav-item-icon {
  display: grid;
  place-items: center;
  width: 25px;
  min-width: 25px;
  height: 25px;
  border: 0;
  background: transparent;
  font-size: 16px;
}
body.reference-ui-v1011 .main-navigation .nav-interface-icon-art {
  width: 21px !important;
  height: 21px !important;
  opacity: .78;
  filter: sepia(1) saturate(2.2) hue-rotate(348deg) brightness(.92) contrast(1.08);
}
body.reference-ui-v1011 .main-navigation button.active .nav-interface-icon-art,
body.reference-ui-v1011 .main-navigation button:hover .nav-interface-icon-art { opacity: 1; }
body.reference-ui-v1011 .main-navigation button b {
  font-family: var(--jd-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
}
body.reference-ui-v1011 .world-map-navigation-shortcuts { margin-left: 27px; }

body.reference-ui-v1011 .sidebar-footer {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 8px;
  margin-top: auto;
  padding: 11px 14px 15px;
  border-top: 1px solid var(--jd-line-soft);
  color: var(--jd-faint);
  background: rgba(0,0,0,.12);
  font-size: 10px;
}
body.reference-ui-v1011 .sidebar-footer #latestUpdateName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.reference-ui-v1011 .sidebar-footer #latestUpdateVersion { color: var(--jd-gold-3); }

/* ---------- Typography / page headings ---------- */
body.reference-ui-v1011 h1,
body.reference-ui-v1011 h2,
body.reference-ui-v1011 h3,
body.reference-ui-v1011 h4,
body.reference-ui-v1011 strong,
body.reference-ui-v1011 button { font-family: var(--jd-serif); }

body.reference-ui-v1011 .eyebrow {
  color: var(--jd-gold-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
}

body.reference-ui-v1011 .page-heading,
body.reference-ui-v1011 .page-title-row,
body.reference-ui-v1011 .section-heading,
body.reference-ui-v1011 .activity-header {
  position: relative;
  margin: 0 0 14px;
  padding: 4px 0 12px;
  border-bottom: 1px solid rgba(182,121,34,.34);
}
body.reference-ui-v1011 .page-heading::after,
body.reference-ui-v1011 .page-title-row::after,
body.reference-ui-v1011 .section-heading::after,
body.reference-ui-v1011 .activity-header::after {
  content: "◆";
  position: absolute;
  right: 0;
  bottom: -7px;
  padding-left: 7px;
  color: var(--jd-gold-2);
  background: var(--jd-ink-1);
  font-size: 9px;
}
body.reference-ui-v1011 .page-heading h2,
body.reference-ui-v1011 .page-title-row h2,
body.reference-ui-v1011 .section-heading h2,
body.reference-ui-v1011 .activity-header h2 {
  margin: 0 0 2px;
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(211,161,77,.1);
}
body.reference-ui-v1011 .page-heading p,
body.reference-ui-v1011 .page-title-row p,
body.reference-ui-v1011 .section-heading p,
body.reference-ui-v1011 .activity-header p {
  color: #a99470;
  font-size: 13px;
}

/* ---------- Panels / cards ---------- */
body.reference-ui-v1011 .card,
body.reference-ui-v1011 .item-card,
body.reference-ui-v1011 .bank-row,
body.reference-ui-v1011 .activity-sidebar-panel,
body.reference-ui-v1011 .current-activity-card,
body.reference-ui-v1011 .den-hero,
body.reference-ui-v1011 .den-overview-card,
body.reference-ui-v1011 .journey-journal,
body.reference-ui-v1011 .den-progression-panel,
body.reference-ui-v1011 .world-project-card,
body.reference-ui-v1011 .leaderboard-panel,
body.reference-ui-v1011 .settings-card,
body.reference-ui-v1011 .combat-style-panel,
body.reference-ui-v1011 .combat-roster-panel,
body.reference-ui-v1011 .combat-battle-panel,
body.reference-ui-v1011 .combat-food-panel-v2,
body.reference-ui-v1011 .combat-session-panel,
body.reference-ui-v1011 .expedition-regions-panel,
body.reference-ui-v1011 .expedition-detail-panel,
body.reference-ui-v1011 .equipment-layout > *,
body.reference-ui-v1011 .mastery-panel,
body.reference-ui-v1011 .offline-mastery-panel {
  border: 1px solid rgba(182,121,34,.48) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.009), rgba(0,0,0,.035)),
    var(--jd-ink-2) !important;
  box-shadow:
    inset 0 0 0 2px #060b0d,
    inset 0 0 0 3px rgba(182,121,34,.08),
    0 8px 24px rgba(0,0,0,.18) !important;
}

body.reference-ui-v1011 .card:hover,
body.reference-ui-v1011 .item-card:hover,
body.reference-ui-v1011 .bank-row:hover {
  border-color: rgba(211,161,77,.68) !important;
  background: linear-gradient(180deg, rgba(182,121,34,.045), rgba(0,0,0,.02)), var(--jd-ink-2) !important;
  transform: none !important;
}

body.reference-ui-v1011 .panel-heading,
body.reference-ui-v1011 .combat-panel-heading,
body.reference-ui-v1011 .leaderboard-panel-heading,
body.reference-ui-v1011 .den-progression-heading {
  border-bottom-color: rgba(182,121,34,.28) !important;
}
body.reference-ui-v1011 .panel-heading h3,
body.reference-ui-v1011 .combat-panel-heading h3,
body.reference-ui-v1011 .leaderboard-panel-heading h3,
body.reference-ui-v1011 .den-progression-heading h3 {
  color: var(--jd-gold-4);
}

/* ---------- Buttons / tabs ---------- */
body.reference-ui-v1011 button {
  border: 1px solid rgba(182,121,34,.58);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(211,161,77,.12), rgba(182,121,34,.045)),
    #091012;
  color: #d8b56f;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(3,7,8,.72);
}
body.reference-ui-v1011 button:hover:not(:disabled) {
  filter: none;
  border-color: rgba(240,197,109,.78);
  color: #f0c56d;
  background: linear-gradient(180deg, rgba(211,161,77,.18), rgba(182,121,34,.07)), #091012;
}
body.reference-ui-v1011 button.secondary {
  background: #070d0f;
  color: #bba680;
}
body.reference-ui-v1011 button.active,
body.reference-ui-v1011 .active-card {
  border-color: var(--jd-gold-3) !important;
  color: var(--jd-gold-4) !important;
}

/* Inputs should feel inset, not like modern white form controls. */
body.reference-ui-v1011 input,
body.reference-ui-v1011 select,
body.reference-ui-v1011 textarea {
  border: 1px solid rgba(182,121,34,.38) !important;
  border-radius: 0 !important;
  background: #050a0c !important;
  color: var(--jd-text) !important;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.35);
}
body.reference-ui-v1011 input:focus,
body.reference-ui-v1011 select:focus,
body.reference-ui-v1011 textarea:focus {
  outline: 1px solid rgba(211,161,77,.55);
  outline-offset: 1px;
}

/* ---------- Progress / statuses ---------- */
body.reference-ui-v1011 .progress-track,
body.reference-ui-v1011 .health-bar,
body.reference-ui-v1011 .current-journey-progress,
body.reference-ui-v1011 .den-storage-bar,
body.reference-ui-v1011 .journey-journal-progress,
body.reference-ui-v1011 .active-potion-track {
  border: 1px solid rgba(182,121,34,.26);
  border-radius: 0 !important;
  background: #020505 !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.6);
}
body.reference-ui-v1011 .progress-fill,
body.reference-ui-v1011 .current-journey-progress > span,
body.reference-ui-v1011 .den-storage-bar > span,
body.reference-ui-v1011 .journey-journal-progress > span,
body.reference-ui-v1011 .active-potion-track > span {
  border-radius: 0 !important;
  background: linear-gradient(90deg, #8b5a1b, #daa84e) !important;
}

body.reference-ui-v1011 .completed,
body.reference-ui-v1011 .is-completed,
body.reference-ui-v1011 .unlocked { --status-accent: var(--jd-green); }
body.reference-ui-v1011 .locked,
body.reference-ui-v1011 .is-locked { --status-accent: var(--jd-faint); }

/* ---------- Current Journey banner ---------- */
body.reference-ui-v1011 .current-journey-tracker {
  margin: 7px 7px 0 0;
  border: 1px solid rgba(182,121,34,.38);
  border-radius: 0;
  background: #070e10;
  box-shadow: inset 0 0 0 2px #040809;
}
body.reference-ui-v1011 .current-journey-icon {
  border-color: rgba(182,121,34,.35);
  border-radius: 0;
  background: #04090a;
}
body.reference-ui-v1011 .current-journey-icon img { filter: sepia(1) saturate(1.5); }
body.reference-ui-v1011 .current-journey-copy strong { color: #e0c794; }
body.reference-ui-v1011 .current-journey-copy small { color: var(--jd-muted); }

/* ---------- Expedition page: already structurally closest to reference ---------- */
body.reference-ui-v1011 #expeditionsPage .expedition-layout {
  gap: 10px;
}
body.reference-ui-v1011 #expeditionsPage .expedition-regions-panel {
  background: #071013 !important;
}
body.reference-ui-v1011 #expeditionsPage .expedition-detail-panel {
  background: #060d0f !important;
}
body.reference-ui-v1011 #expeditionsPage .expedition-region-card,
body.reference-ui-v1011 #expeditionsPage [class*="expedition-region"] button,
body.reference-ui-v1011 #expeditionsPage .expedition-card {
  border-radius: 0 !important;
  border-color: rgba(182,121,34,.42) !important;
  background: #081013 !important;
}
body.reference-ui-v1011 #expeditionsPage img {
  image-rendering: auto;
}

/* ---------- Pixel art / item presentation foundation ---------- */
body.reference-ui-v1011 .item-icon-art,
body.reference-ui-v1011 .bank-item-icon-art,
body.reference-ui-v1011 .equipment-item-icon-art,
body.reference-ui-v1011 .loot-item-icon-art {
  image-rendering: pixelated;
}
body.reference-ui-v1011 .item-slot,
body.reference-ui-v1011 [class*="bank-slot"],
body.reference-ui-v1011 [class*="equipment-slot"] {
  border-radius: 0 !important;
}

/* ---------- Mobile keeps its proven layout but receives the same palette ---------- */
@media (max-width: 820px) {
  body.reference-ui-v1011 .app-shell { display: block; }
  body.reference-ui-v1011 .reference-sidebar { display: none !important; }
  body.reference-ui-v1011 main {
    margin: 5px;
    padding: 12px;
    border-color: rgba(182,121,34,.42);
  }
  body.reference-ui-v1011 .topbar {
    border-bottom: 1px solid rgba(182,121,34,.35);
    background: #050b0d;
  }
  body.reference-ui-v1011 .mobile-top-navigation,
  body.reference-ui-v1011 .mobile-nav-more {
    background: #050b0d !important;
    border-color: rgba(182,121,34,.34) !important;
  }
  body.reference-ui-v1011 .mobile-nav-item,
  body.reference-ui-v1011 .mobile-nav-more-item {
    border-radius: 0 !important;
    color: #bda77f !important;
  }
  body.reference-ui-v1011 .mobile-nav-item.active,
  body.reference-ui-v1011 .mobile-nav-more-item.active {
    color: var(--jd-gold-4) !important;
    border-color: rgba(182,121,34,.52) !important;
    background: rgba(182,121,34,.09) !important;
  }
  body.reference-ui-v1011 .current-journey-tracker { margin: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.reference-ui-v1011 *,
  body.reference-ui-v1011 *::before,
  body.reference-ui-v1011 *::after { scroll-behavior: auto !important; transition: none !important; }
}


/* ===== SOURCE: reference-ui-phase2.css ===== */
/*
 * JourneyDen V1.01.2 — Reference UI Rework / Main Shell & Navigation
 * Phase 2 tightens the permanent shell to closely follow the supplied
 * Expedition Log reference while preserving all existing game navigation.
 */

body.reference-ui-v1012 {
  --sidebar-width: 216px;
}

/* ---------- Desktop frame geometry ---------- */
@media (min-width: 821px) {
  body.reference-ui-v1012 .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: 8px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5px;
    background:
      radial-gradient(circle at 43% -15%, rgba(49, 74, 67, .09), transparent 34rem),
      #020506;
  }

  body.reference-ui-v1012 .reference-sidebar {
    top: 5px;
    height: calc(100vh - 10px);
    height: calc(100dvh - 10px);
  }

  body.reference-ui-v1012 .app-main {
    min-height: calc(100vh - 10px);
    min-height: calc(100dvh - 10px);
  }

  body.reference-ui-v1012 main {
    min-height: calc(100vh - 10px);
    min-height: calc(100dvh - 10px);
    margin: 0;
    padding: 20px 22px 26px;
  }
}

/* Extra inset line and antique edge treatment. */
body.reference-ui-v1012 .reference-sidebar,
body.reference-ui-v1012 main {
  border-color: #8d5b1d;
  box-shadow:
    inset 0 0 0 2px #020506,
    inset 0 0 0 3px rgba(211,161,77,.24),
    inset 0 0 26px rgba(0,0,0,.18),
    0 0 0 1px rgba(0,0,0,.8);
}

body.reference-ui-v1012 .reference-sidebar {
  background:
    linear-gradient(180deg, rgba(30, 49, 49, .16) 0, transparent 185px),
    linear-gradient(90deg, rgba(211,161,77,.015), transparent 42%),
    #040a0c;
}

body.reference-ui-v1012 main {
  background:
    radial-gradient(circle at 52% -18%, rgba(37, 62, 57, .15), transparent 36rem),
    linear-gradient(90deg, rgba(211,161,77,.018), transparent 10rem),
    #04090b;
}

/* Reference-like square corner ornaments without bitmap frame assets. */
body.reference-ui-v1012 .reference-sidebar::before,
body.reference-ui-v1012 main::before {
  width: 27px;
  height: 27px;
  top: 5px;
  left: 5px;
  border-top: 2px solid #d3a14d;
  border-left: 2px solid #d3a14d;
  box-shadow: -2px -2px 0 rgba(110,70,23,.45);
}

body.reference-ui-v1012 .reference-sidebar::after,
body.reference-ui-v1012 main::after {
  width: 27px;
  height: 27px;
  right: 5px;
  bottom: 5px;
  border-right: 2px solid #d3a14d;
  border-bottom: 2px solid #d3a14d;
  box-shadow: 2px 2px 0 rgba(110,70,23,.45);
}

/* ---------- Brand treatment ---------- */
body.reference-ui-v1012 .reference-wordmark {
  min-height: 76px;
  gap: 7px;
  padding: 15px 17px 10px 20px;
  border-bottom: 0;
}

body.reference-ui-v1012 .reference-wordmark-emblem {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  overflow: hidden;
  flex: 0 0 34px;
}

body.reference-ui-v1012 .reference-wordmark-mark {
  width: 31px;
  height: 35px;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) brightness(1.12);
}

body.reference-ui-v1012 .reference-wordmark-text {
  font-size: 20px;
  font-variant: small-caps;
  letter-spacing: .055em;
  color: #e6bd68;
}

/* ---------- Player plaque ---------- */
body.reference-ui-v1012 .sidebar-player-card {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 9px;
  min-height: 91px;
  margin: 0 10px 7px;
  padding: 9px 7px 10px;
  border-top: 1px solid rgba(182,121,34,.22);
  border-bottom: 1px solid rgba(182,121,34,.34);
  background: linear-gradient(90deg, rgba(211,161,77,.025), transparent 84%);
}

body.reference-ui-v1012 .sidebar-player-avatar {
  width: 55px;
  height: 55px;
  border-color: rgba(211,161,77,.7);
  background: #03080a;
  box-shadow:
    inset 0 0 0 2px #020506,
    0 0 0 1px rgba(110,70,23,.5);
}

body.reference-ui-v1012 .sidebar-player-avatar img {
  width: 50px;
  height: 61px;
  margin-top: 8px;
  object-fit: cover;
  object-position: top center;
}

body.reference-ui-v1012 .sidebar-player-rank {
  color: #e4bc70;
  font-size: 13px;
  line-height: 1.15;
}

body.reference-ui-v1012 .sidebar-player-copy > strong {
  margin-top: 1px;
  color: #ead7ad;
  font-size: 14px;
}

body.reference-ui-v1012 .sidebar-player-copy small {
  margin-top: 1px;
  color: #9f8b68;
  font-size: 10px;
}

body.reference-ui-v1012 .sidebar-player-health {
  height: 5px;
  margin-top: 5px;
  border-color: rgba(182,121,34,.42);
  background: #010304;
}

body.reference-ui-v1012 .sidebar-player-health span {
  background: linear-gradient(90deg, #875714, #d9a244 72%, #e9c36e);
}

body.reference-ui-v1012 .sidebar-player-gold {
  grid-column: 2;
  justify-content: flex-start;
  min-height: 15px;
  margin: -2px 0 0;
  color: #bda16e;
  font-size: 10px;
}

body.reference-ui-v1012 .sidebar-player-gold img {
  width: 13px;
  height: 13px;
  opacity: .84;
  filter: sepia(1) saturate(1.5);
}

/* ---------- Reference-style navigation rail ---------- */
body.reference-ui-v1012 .main-navigation {
  padding: 4px 7px 9px;
  scrollbar-width: thin;
  scrollbar-color: rgba(182,121,34,.27) transparent;
}

body.reference-ui-v1012 .main-navigation::-webkit-scrollbar { width: 4px; }
body.reference-ui-v1012 .main-navigation::-webkit-scrollbar-thumb { background: rgba(182,121,34,.25); }
body.reference-ui-v1012 .main-navigation::-webkit-scrollbar-track { background: transparent; }

body.reference-ui-v1012 .main-navigation .nav-group {
  position: relative;
}

body.reference-ui-v1012 .main-navigation .nav-group + .nav-group::before {
  content: "";
  display: block;
  height: 1px;
  margin: 5px 8px 4px;
  background: linear-gradient(90deg, transparent, rgba(182,121,34,.19) 18%, rgba(182,121,34,.19) 82%, transparent);
}

body.reference-ui-v1012 .main-navigation button {
  min-height: 43px;
  gap: 9px;
  margin: 0;
  padding: 8px 9px;
  border-color: transparent;
  color: #b7a17a;
  line-height: 1.1;
}

body.reference-ui-v1012 .main-navigation button::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 0;
  height: 1px;
  background: #b67922;
  opacity: 0;
  transform: translateY(-50%);
  transition: width .12s ease, opacity .12s ease;
}

body.reference-ui-v1012 .main-navigation button:hover:not(:disabled) {
  border-color: rgba(182,121,34,.13);
  color: #dec18a;
  background: linear-gradient(90deg, rgba(182,121,34,.065), transparent 88%);
}

body.reference-ui-v1012 .main-navigation button:hover::after {
  width: 8px;
  opacity: .7;
}

body.reference-ui-v1012 .main-navigation button.active {
  border: 1px solid rgba(182,121,34,.64);
  color: #efc86e;
  background:
    linear-gradient(90deg, rgba(182,121,34,.17), rgba(182,121,34,.035) 58%, transparent),
    #071012;
  box-shadow:
    inset 0 0 0 2px #030709,
    inset 0 0 0 3px rgba(182,121,34,.12);
}

body.reference-ui-v1012 .main-navigation button.active::before {
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #d3a14d;
  box-shadow: 0 0 6px rgba(211,161,77,.2);
}

body.reference-ui-v1012 .main-navigation button.active::after {
  width: 10px;
  opacity: 1;
}

body.reference-ui-v1012 .main-navigation button span,
body.reference-ui-v1012 .main-navigation .nav-item-icon {
  width: 27px;
  min-width: 27px;
  height: 27px;
}

body.reference-ui-v1012 .main-navigation .nav-interface-icon-art {
  width: 22px !important;
  height: 22px !important;
  opacity: .82;
  filter: sepia(1) saturate(2.25) hue-rotate(346deg) brightness(.91) contrast(1.08);
}

body.reference-ui-v1012 .main-navigation button.active .nav-interface-icon-art {
  opacity: 1;
  filter: sepia(1) saturate(2.45) hue-rotate(344deg) brightness(1.05) contrast(1.06);
}

body.reference-ui-v1012 .main-navigation button b {
  font-size: 14px;
  font-weight: 400;
  color: inherit;
}

/* The Den/World Map compass was an intentional placeholder. Make it read as a
   small gold icon in the same visual family as the other navigation art. */
body.reference-ui-v1012 .main-navigation .den-nav-item .nav-interface-icon-art,
body.reference-ui-v1012 .main-navigation .world-map-nav-item .nav-interface-icon-art {
  width: 23px !important;
  height: 25px !important;
  object-fit: cover;
}

/* ---------- Bottom action like the supplied reference ---------- */
body.reference-ui-v1012 .reference-sidebar-footer {
  display: block;
  margin-top: auto;
  padding: 8px 8px 13px;
  border-top: 1px solid rgba(182,121,34,.21);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.16));
}

body.reference-ui-v1012 .sidebar-signout-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border-color: transparent;
  background: transparent;
  color: #b7a17a;
  box-shadow: none;
  text-align: left;
}

body.reference-ui-v1012 .sidebar-signout-button:hover:not(:disabled) {
  border-color: rgba(182,121,34,.18);
  background: rgba(182,121,34,.05);
  color: #e1c181;
}

body.reference-ui-v1012 .sidebar-signout-icon {
  display: grid;
  place-items: center;
  width: 27px;
  min-width: 27px;
  color: #d3a14d;
  font-size: 21px;
  line-height: 1;
}

body.reference-ui-v1012 .sidebar-signout-button b {
  font-size: 14px;
  font-weight: 400;
}

/* Build metadata remains in the DOM for existing runtime/update wiring but is
   not part of the permanent navigation presentation. */
body.reference-ui-v1012 .sidebar-build-meta {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ---------- Content header rhythm ---------- */
body.reference-ui-v1012 .page-heading,
body.reference-ui-v1012 .page-title-row,
body.reference-ui-v1012 .section-heading,
body.reference-ui-v1012 .activity-header {
  min-height: 70px;
  margin-bottom: 13px;
  padding: 5px 0 12px 18px;
  border-bottom-color: rgba(182,121,34,.38);
}

body.reference-ui-v1012 .page-heading::before,
body.reference-ui-v1012 .page-title-row::before,
body.reference-ui-v1012 .section-heading::before,
body.reference-ui-v1012 .activity-header::before {
  content: "◆";
  position: absolute;
  left: 1px;
  top: 12px;
  color: #b67922;
  font-size: 9px;
}

body.reference-ui-v1012 .page-heading h2,
body.reference-ui-v1012 .page-title-row h2,
body.reference-ui-v1012 .section-heading h2,
body.reference-ui-v1012 .activity-header h2 {
  color: #efc56d;
  letter-spacing: .03em;
}

body.reference-ui-v1012 .page-heading p,
body.reference-ui-v1012 .page-title-row p,
body.reference-ui-v1012 .section-heading p,
body.reference-ui-v1012 .activity-header p {
  color: #ad9872;
}

/* Main cards now read as inset records rather than floating web cards. */
body.reference-ui-v1012 .card,
body.reference-ui-v1012 .item-card,
body.reference-ui-v1012 .bank-row,
body.reference-ui-v1012 .activity-sidebar-panel,
body.reference-ui-v1012 .current-activity-card,
body.reference-ui-v1012 .den-hero,
body.reference-ui-v1012 .den-overview-card,
body.reference-ui-v1012 .journey-journal,
body.reference-ui-v1012 .den-progression-panel,
body.reference-ui-v1012 .world-project-card,
body.reference-ui-v1012 .leaderboard-panel,
body.reference-ui-v1012 .settings-card,
body.reference-ui-v1012 .combat-style-panel,
body.reference-ui-v1012 .combat-roster-panel,
body.reference-ui-v1012 .combat-battle-panel,
body.reference-ui-v1012 .combat-food-panel-v2,
body.reference-ui-v1012 .combat-session-panel,
body.reference-ui-v1012 .expedition-regions-panel,
body.reference-ui-v1012 .expedition-detail-panel,
body.reference-ui-v1012 .equipment-layout > *,
body.reference-ui-v1012 .mastery-panel,
body.reference-ui-v1012 .offline-mastery-panel {
  border-color: rgba(182,121,34,.52) !important;
  background:
    linear-gradient(180deg, rgba(211,161,77,.018), transparent 38%),
    #071012 !important;
  box-shadow:
    inset 0 0 0 2px #030709,
    inset 0 0 0 3px rgba(182,121,34,.065),
    0 7px 19px rgba(0,0,0,.14) !important;
}

/* Current journey is useful, but should read like a narrow quest strip rather
   than a modern dashboard banner. */
@media (min-width: 821px) {
  body.reference-ui-v1012 .current-journey-tracker {
    margin: 0 0 8px;
    min-height: 48px;
    border-color: rgba(182,121,34,.34);
    background: #050b0d;
  }
}

/* ---------- Mobile inherits identity, keeps proven interaction geometry ---------- */
@media (max-width: 820px) {
  body.reference-ui-v1012 .app-shell {
    padding: 0;
    gap: 0;
  }

  body.reference-ui-v1012 main {
    min-height: auto;
    margin: 5px;
  }

  body.reference-ui-v1012 .mobile-top-navigation {
    box-shadow: 0 4px 18px rgba(0,0,0,.32);
  }
}


/* ===== SOURCE: reference-ui-phase4.css ===== */
/* JourneyDen V1.01.4 — Item Frames, Rarity & Discovery
   Presentation-only layer. Rarity never changes item stats, drop rates or value. */

body.item-presentation-v1014 {
  --jd-rarity-common: #75684f;
  --jd-rarity-common-soft: rgba(117,104,79,.18);
  --jd-rarity-uncommon: #a9874d;
  --jd-rarity-uncommon-soft: rgba(169,135,77,.18);
  --jd-rarity-rare: #cfaa5d;
  --jd-rarity-rare-soft: rgba(207,170,93,.20);
  --jd-rarity-epic: #e3b45b;
  --jd-rarity-epic-soft: rgba(227,180,91,.24);
  --jd-rarity-unique: #e98a32;
  --jd-rarity-unique-soft: rgba(233,138,50,.26);
}

/* Shared item-art cell. The actual art remains independent from the frame. */
body.item-presentation-v1014 .jd-item-icon {
  --jd-item-rarity: var(--jd-rarity-common);
  --jd-item-rarity-soft: var(--jd-rarity-common-soft);
  position: relative;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 1.55em;
  min-height: 1.55em;
  padding: .08em;
  border: 1px solid color-mix(in srgb, var(--jd-item-rarity) 68%, #2d2518 32%);
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.018), transparent 52%),
    radial-gradient(circle at 34% 28%, var(--jd-item-rarity-soft), transparent 58%),
    #050a0c;
  box-shadow:
    inset 0 0 0 1px #020506,
    inset 0 0 0 2px color-mix(in srgb, var(--jd-item-rarity) 12%, transparent);
  color: #f3e6c7;
  line-height: 1;
  vertical-align: middle;
  isolation: isolate;
}

body.item-presentation-v1014 .jd-item-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.48));
}

body.item-presentation-v1014 .jd-item-rarity-common { --jd-item-rarity: var(--jd-rarity-common); --jd-item-rarity-soft: var(--jd-rarity-common-soft); }
body.item-presentation-v1014 .jd-item-rarity-uncommon { --jd-item-rarity: var(--jd-rarity-uncommon); --jd-item-rarity-soft: var(--jd-rarity-uncommon-soft); }
body.item-presentation-v1014 .jd-item-rarity-rare { --jd-item-rarity: var(--jd-rarity-rare); --jd-item-rarity-soft: var(--jd-rarity-rare-soft); }
body.item-presentation-v1014 .jd-item-rarity-epic { --jd-item-rarity: var(--jd-rarity-epic); --jd-item-rarity-soft: var(--jd-rarity-epic-soft); }
body.item-presentation-v1014 .jd-item-rarity-unique { --jd-item-rarity: var(--jd-rarity-unique); --jd-item-rarity-soft: var(--jd-rarity-unique-soft); }

/* Undiscovered art remains reusable for future logs. Existing gameplay screens do not
   automatically hide normal outputs; only explicit discovery views request silhouette mode. */
body.item-presentation-v1014 .jd-item-icon.jd-item-silhouette {
  color: #635a49;
  border-color: #514733;
  background: #04090a;
  box-shadow: inset 0 0 0 1px #020506;
}
body.item-presentation-v1014 .jd-item-icon.jd-item-silhouette .jd-item-glyph {
  opacity: .62;
  filter: grayscale(1) brightness(.58);
}

/* Bank slot = outer frame; icon art remains an independent inner cell. */
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-frame {
  --jd-item-rarity: var(--jd-rarity-common);
  --jd-item-rarity-soft: var(--jd-rarity-common-soft);
  border-color: color-mix(in srgb, var(--jd-item-rarity) 72%, #211b12 28%) !important;
  background:
    radial-gradient(circle at 50% 38%, var(--jd-item-rarity-soft), transparent 62%),
    #050a0c !important;
  box-shadow:
    inset 0 0 0 1px #020506,
    inset 0 0 0 2px color-mix(in srgb, var(--jd-item-rarity) 10%, transparent) !important;
}
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-frame:hover,
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-frame.selected {
  border-color: var(--jd-item-rarity) !important;
  box-shadow:
    inset 0 0 0 1px #020506,
    inset 0 0 0 2px color-mix(in srgb, var(--jd-item-rarity) 20%, transparent),
    0 0 11px color-mix(in srgb, var(--jd-item-rarity) 16%, transparent) !important;
}
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-rarity-common { --jd-item-rarity: var(--jd-rarity-common); --jd-item-rarity-soft: var(--jd-rarity-common-soft); }
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-rarity-uncommon { --jd-item-rarity: var(--jd-rarity-uncommon); --jd-item-rarity-soft: var(--jd-rarity-uncommon-soft); }
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-rarity-rare { --jd-item-rarity: var(--jd-rarity-rare); --jd-item-rarity-soft: var(--jd-rarity-rare-soft); }
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-rarity-epic { --jd-item-rarity: var(--jd-rarity-epic); --jd-item-rarity-soft: var(--jd-rarity-epic-soft); }
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-rarity-unique { --jd-item-rarity: var(--jd-rarity-unique); --jd-item-rarity-soft: var(--jd-rarity-unique-soft); }

body.item-presentation-v1014 #bankPage .bank-slot-rs .jd-item-icon {
  width: 88%;
  height: 88%;
  min-width: 0;
  min-height: 0;
  font-size: 26px;
}
body.item-presentation-v1014 #bankPage .bank-slot-rs .bank-slot-count-rs {
  z-index: 3;
  border: 1px solid rgba(179,135,65,.26);
  border-radius: 0;
  background: rgba(2,6,7,.90);
}
body.item-presentation-v1014 #bankPage .bank-slot-rs.jd-item-rarity-unique::after {
  content: '◆';
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 5px;
  color: var(--jd-rarity-unique);
  font-size: 7px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(233,138,50,.55);
}

/* Discovery summary: deliberately restrained; rarity is hierarchy, not rainbow decoration. */
body.item-presentation-v1014 #bankPage .bank-discovery-rs {
  grid-template-columns: auto auto minmax(100px,1fr);
  padding: 8px 9px;
  border: 1px solid rgba(182,121,34,.30);
  background: #050b0d;
}
body.item-presentation-v1014 #bankPage .bank-rarity-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(182,121,34,.18);
}
body.item-presentation-v1014 #bankPage .bank-rarity-chip {
  --jd-item-rarity: var(--jd-rarity-common);
  display: grid;
  grid-template-columns: 7px minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--jd-item-rarity) 42%, #2c2417 58%);
  background: rgba(3,8,9,.72);
  color: #a99570;
}
body.item-presentation-v1014 #bankPage .bank-rarity-chip i {
  width: 5px;
  height: 5px;
  background: var(--jd-item-rarity);
  box-shadow: 0 0 5px color-mix(in srgb, var(--jd-item-rarity) 45%, transparent);
}
body.item-presentation-v1014 #bankPage .bank-rarity-chip b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--jd-item-rarity) 82%, #eadfc7 18%);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.item-presentation-v1014 #bankPage .bank-rarity-chip small {
  color: #8e7c5e;
  font-size: 8px;
}
body.item-presentation-v1014 #bankPage .bank-rarity-chip.jd-item-rarity-uncommon { --jd-item-rarity: var(--jd-rarity-uncommon); }
body.item-presentation-v1014 #bankPage .bank-rarity-chip.jd-item-rarity-rare { --jd-item-rarity: var(--jd-rarity-rare); }
body.item-presentation-v1014 #bankPage .bank-rarity-chip.jd-item-rarity-epic { --jd-item-rarity: var(--jd-rarity-epic); }
body.item-presentation-v1014 #bankPage .bank-rarity-chip.jd-item-rarity-unique { --jd-item-rarity: var(--jd-rarity-unique); }

/* Selected item inherits the same rarity language. */
body.item-presentation-v1014 #bankPage .bank-selected-header-rs.jd-item-frame {
  --jd-item-rarity: var(--jd-rarity-common);
  position: relative;
  margin: -2px -2px 10px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--jd-item-rarity) 52%, #2d2518 48%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--jd-item-rarity) 8%, transparent), transparent 72%);
}
body.item-presentation-v1014 #bankPage .bank-selected-header-rs.jd-item-rarity-uncommon { --jd-item-rarity: var(--jd-rarity-uncommon); }
body.item-presentation-v1014 #bankPage .bank-selected-header-rs.jd-item-rarity-rare { --jd-item-rarity: var(--jd-rarity-rare); }
body.item-presentation-v1014 #bankPage .bank-selected-header-rs.jd-item-rarity-epic { --jd-item-rarity: var(--jd-rarity-epic); }
body.item-presentation-v1014 #bankPage .bank-selected-header-rs.jd-item-rarity-unique { --jd-item-rarity: var(--jd-rarity-unique); }
body.item-presentation-v1014 #bankPage .bank-selected-rarity-label {
  --jd-item-rarity: var(--jd-rarity-common);
  color: var(--jd-item-rarity) !important;
}
body.item-presentation-v1014 #bankPage .bank-selected-rarity-label.jd-item-rarity-uncommon { --jd-item-rarity: var(--jd-rarity-uncommon); }
body.item-presentation-v1014 #bankPage .bank-selected-rarity-label.jd-item-rarity-rare { --jd-item-rarity: var(--jd-rarity-rare); }
body.item-presentation-v1014 #bankPage .bank-selected-rarity-label.jd-item-rarity-epic { --jd-item-rarity: var(--jd-rarity-epic); }
body.item-presentation-v1014 #bankPage .bank-selected-rarity-label.jd-item-rarity-unique { --jd-item-rarity: var(--jd-rarity-unique); }
body.item-presentation-v1014 #bankPage .bank-selected-icon-rs {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--jd-item-rarity, var(--jd-rarity-common)) 56%, #2d2518 44%);
}
body.item-presentation-v1014 #bankPage .bank-selected-icon-rs .jd-item-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font-size: 25px;
}

/* Existing orange expedition-unique identity remains the strongest state. */
body.item-presentation-v1014 .expedition-unique,
body.item-presentation-v1014 .jd-item-rarity-unique {
  --jd-item-rarity: var(--jd-rarity-unique);
  --jd-item-rarity-soft: var(--jd-rarity-unique-soft);
}

/* When the later art batches switch to <img>, these cells are already pixel-ready. */
body.item-presentation-v1014 .jd-item-icon img,
body.item-presentation-v1014 .jd-item-icon .item-icon-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

@media (max-width: 700px) {
  body.item-presentation-v1014 #bankPage .bank-rarity-summary {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  body.item-presentation-v1014 #bankPage .bank-rarity-chip:nth-child(4),
  body.item-presentation-v1014 #bankPage .bank-rarity-chip:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 430px) {
  body.item-presentation-v1014 #bankPage .bank-rarity-summary {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  body.item-presentation-v1014 #bankPage .bank-rarity-chip:last-child {
    grid-column: 1 / -1;
  }
}


/* ===== SOURCE: reference-ui-phase5.css ===== */
/* JourneyDen V1.01.5 — Core Item Artwork: Resources & Construction
   Approved 64x64 pixel art is runtime-only content; premium frames remain CSS. */

body.item-art-rollout-v1015 .jd-item-icon.jd-item-pixel-art {
  overflow: hidden;
}

body.item-art-rollout-v1015 .jd-item-icon.jd-item-pixel-art .item-icon-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.42));
}

/* Discovery views can conceal the actual pixels without needing a second asset. */
body.item-art-rollout-v1015 .jd-item-icon.jd-item-silhouette .item-icon-art {
  opacity: .72;
  filter: grayscale(1) brightness(.16) contrast(1.3) drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

/* Resource pixels should remain the visual focus; rarity/frame decoration stays restrained. */
body.item-art-rollout-v1015 #bankPage .bank-slot-rs .jd-item-icon.jd-item-pixel-art {
  padding: 0;
  background: radial-gradient(circle at 42% 36%, var(--jd-item-rarity-soft), transparent 64%), #050a0c;
}

body.item-art-rollout-v1015 #bankPage .bank-selected-icon-rs .jd-item-icon.jd-item-pixel-art {
  padding: 1px;
}

body.item-art-rollout-v1015 .collection-item-icon-art.jd-item-pixel-art,
body.item-art-rollout-v1015 .guide-reward-icon-art.jd-item-pixel-art,
body.item-art-rollout-v1015 .offline-item-icon-art.jd-item-pixel-art,
body.item-art-rollout-v1015 .den-project-item-art.jd-item-pixel-art {
  min-width: 2em;
  min-height: 2em;
}


/* ===== SOURCE: reference-ui-phase6.css ===== */
/* JourneyDen V1.01.6 — Equipment, Combat & Unique Item Artwork
   Completes runtime item art while keeping all frames/state decoration in CSS. */

body.item-art-rollout-v1016 .jd-item-icon.jd-item-pixel-art .item-icon-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Equipment gets slightly more breathing room so silhouettes read like the reference UI. */
body.item-art-rollout-v1016 #equipmentPage .equipment-item-icon-art.jd-item-pixel-art,
body.item-art-rollout-v1016 #equipmentPage .equipment-item-icon-art.jd-item-pixel-art .item-icon-art,
body.item-art-rollout-v1016 #combatPage .combat-equipment-card-icon .jd-item-pixel-art,
body.item-art-rollout-v1016 #combatPage .combat-equipment-card-icon .jd-item-pixel-art .item-icon-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.item-art-rollout-v1016 #equipmentPage .equipment-character-slot-icon .jd-item-pixel-art {
  width: 34px;
  height: 34px;
}

body.item-art-rollout-v1016 #equipmentPage .equipment-slot-detail-icon .jd-item-pixel-art {
  width: 48px;
  height: 48px;
}

/* Combat/Expedition loot uses the same dark inset slot language as the reference log. */
body.item-art-rollout-v1016 #combatPage .combat-session-summary-icon .jd-item-pixel-art,
body.item-art-rollout-v1016 #combatPage .combat-last-loot .jd-item-pixel-art,
body.item-art-rollout-v1016 #expeditionsPage .jd-item-pixel-art {
  background: radial-gradient(circle at 40% 34%, var(--jd-item-rarity-soft), transparent 65%), #050a0c;
}

/* Unique objects are more ornate in their sprite, but the UI still owns rarity emphasis. */
body.item-art-rollout-v1016 .jd-item-rarity-unique.jd-item-pixel-art {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.55));
}

body.item-art-rollout-v1016 .jd-item-rarity-unique.jd-item-pixel-art .item-icon-art {
  filter: drop-shadow(0 1px 2px rgba(190,126,36,.18));
}

/* Never turn runtime art smooth on mobile. */
@media (max-width: 760px) {
  body.item-art-rollout-v1016 .jd-item-icon.jd-item-pixel-art .item-icon-art {
    image-rendering: pixelated;
  }
}


/* ===== SOURCE: reference-ui-phase7.css ===== */
/* JourneyDen V1.01.7 — Bank & Equipment UI Rework
   Visual target: supplied Expedition Log reference. UI-only pass; no gameplay/state changes. */

body.bank-equipment-reference-v1017 {
  --jd-panel-deep: #04090b;
  --jd-panel-mid: #071013;
  --jd-panel-high: #0a1417;
  --jd-bronze-line: rgba(182,121,34,.46);
  --jd-bronze-soft: rgba(182,121,34,.20);
  --jd-bronze-faint: rgba(182,121,34,.10);
}

/* =========================================================
   Shared Bank / Equipment title language
   ========================================================= */
body.bank-equipment-reference-v1017 #bankPage > .section-heading,
body.bank-equipment-reference-v1017 #equipmentPage > .section-heading {
  position: relative;
  min-height: 72px;
  margin: 0 0 10px;
  padding: 8px 12px 11px;
  border-bottom: 1px solid var(--jd-bronze-line);
  background: linear-gradient(90deg, rgba(182,121,34,.055), transparent 42%);
}

body.bank-equipment-reference-v1017 #bankPage > .section-heading::after,
body.bank-equipment-reference-v1017 #equipmentPage > .section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, var(--jd-gold-1) 4%, rgba(182,121,34,.18) 68%, transparent 100%);
}

body.bank-equipment-reference-v1017 #bankPage > .section-heading h2,
body.bank-equipment-reference-v1017 #equipmentPage > .section-heading h2 {
  margin: 0;
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: clamp(24px,2.2vw,31px);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .045em;
  text-shadow: 0 1px 10px rgba(211,161,77,.09);
}

body.bank-equipment-reference-v1017 #bankPage > .section-heading p,
body.bank-equipment-reference-v1017 #equipmentPage > .section-heading p {
  color: #b9a786;
  font-size: 12px;
}

body.bank-equipment-reference-v1017 .reference-page-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.bank-equipment-reference-v1017 .reference-page-heading-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid var(--jd-gold-1);
  background: #050b0d;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.18);
}
body.bank-equipment-reference-v1017 .reference-page-heading-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: sepia(1) saturate(.9) brightness(1.12);
}

body.bank-equipment-reference-v1017 .reference-subheading {
  position: relative;
  align-items: flex-end;
  margin: 0 0 10px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--jd-bronze-soft);
}
body.bank-equipment-reference-v1017 .reference-subheading::after {
  content: "◆";
  position: absolute;
  right: 0;
  bottom: -5px;
  color: var(--jd-gold-1);
  font-size: 8px;
  background: var(--jd-panel-deep);
  padding-left: 6px;
}
body.bank-equipment-reference-v1017 .reference-subheading.compact { margin-bottom: 8px; }
body.bank-equipment-reference-v1017 .reference-subheading h3 {
  margin: 1px 0 0;
  color: #e4c88f;
  font-family: var(--jd-serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
}
body.bank-equipment-reference-v1017 .reference-subheading small { color: #8f8068; font-size: 10px; }

/* =========================================================
   BANK — reference-style inventory ledger
   ========================================================= */
body.bank-equipment-reference-v1017 #bankPage .bank-shell-rs {
  position: relative;
  overflow: visible;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: var(--jd-panel-deep);
  box-shadow:
    inset 0 0 0 3px #020607,
    inset 0 0 0 4px rgba(182,121,34,.20),
    0 10px 28px rgba(0,0,0,.22);
}
body.bank-equipment-reference-v1017 #bankPage .bank-shell-rs::before,
body.bank-equipment-reference-v1017 #bankPage .bank-shell-rs::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
body.bank-equipment-reference-v1017 #bankPage .bank-shell-rs::before {
  top: 4px; left: 4px;
  border-top: 2px solid var(--jd-gold-3);
  border-left: 2px solid var(--jd-gold-3);
}
body.bank-equipment-reference-v1017 #bankPage .bank-shell-rs::after {
  right: 4px; bottom: 4px;
  border-right: 2px solid var(--jd-gold-3);
  border-bottom: 2px solid var(--jd-gold-3);
}

body.bank-equipment-reference-v1017 #bankPage .bank-topbar-rs {
  padding: 12px 13px 9px;
  border-bottom: 1px solid var(--jd-bronze-line);
  background:
    linear-gradient(180deg, rgba(182,121,34,.035), transparent 100%),
    #050b0d;
}
body.bank-equipment-reference-v1017 #bankPage .bank-main-nav {
  align-items: stretch;
  gap: 8px;
}
body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  padding: 0;
}
body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs button,
body.bank-equipment-reference-v1017 #bankPage .bank-filter-toggle {
  position: relative;
  min-height: 38px;
  border: 1px solid rgba(137,91,29,.55);
  border-radius: 0;
  background: #050b0d;
  color: #a99572;
  font-family: var(--jd-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px #020607;
}
body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs button:hover,
body.bank-equipment-reference-v1017 #bankPage .bank-filter-toggle:hover {
  border-color: var(--jd-gold-2);
  color: #d8bd87;
  background: #081013;
}
body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs button.active {
  border-color: var(--jd-gold-2);
  color: var(--jd-gold-4);
  background: linear-gradient(180deg, rgba(182,121,34,.10), rgba(182,121,34,.025));
}
body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs button.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2px;
  background: var(--jd-gold-3);
  box-shadow: 0 0 7px rgba(211,161,77,.18);
}
body.bank-equipment-reference-v1017 #bankPage .bank-filter-toggle.active {
  border-color: var(--jd-gold-2);
  color: var(--jd-gold-4);
}
body.bank-equipment-reference-v1017 #bankPage .bank-filter-badge {
  border-radius: 0;
  background: #291e0f;
  color: var(--jd-gold-4);
}

body.bank-equipment-reference-v1017 #bankPage .bank-advanced-filters {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--jd-bronze-soft);
  border-radius: 0;
  background: #030809;
}
body.bank-equipment-reference-v1017 #bankPage .bank-advanced-filters input,
body.bank-equipment-reference-v1017 #bankPage .bank-advanced-filters select,
body.bank-equipment-reference-v1017 #bankPage .bank-reset-filters {
  border-radius: 0;
  border-color: var(--jd-bronze-soft);
  background: #050b0d;
  color: var(--jd-text);
}

body.bank-equipment-reference-v1017 #bankPage .bank-content-rs {
  grid-template-columns: minmax(0, 1.72fr) minmax(290px, .76fr);
  min-height: 540px;
  background: #030809;
}
body.bank-equipment-reference-v1017 #bankPage .bank-grid-panel-rs {
  padding: 12px 13px 14px;
  background:
    radial-gradient(circle at 45% 12%, rgba(34,57,52,.08), transparent 28rem),
    #04090b;
}

body.bank-equipment-reference-v1017 #bankPage .bank-discovery-rs {
  position: relative;
  grid-template-columns: auto auto minmax(130px,1fr);
  gap: 9px;
  margin: 0 0 11px;
  padding: 8px 9px 9px;
  border: 1px solid var(--jd-bronze-soft);
  border-radius: 0;
  background: #050b0d;
  color: #99886c;
}
body.bank-equipment-reference-v1017 #bankPage .bank-discovery-rs > span:first-child {
  color: #cfaa67;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.bank-equipment-reference-v1017 #bankPage .bank-discovery-rs > strong {
  color: #e2c78f;
  font-family: var(--jd-serif);
  font-size: 11px;
}
body.bank-equipment-reference-v1017 #bankPage .bank-discovery-bar {
  height: 7px;
  border: 1px solid #3a2a17;
  border-radius: 0;
  background: #020607;
  box-shadow: inset 0 0 0 1px #000;
}
body.bank-equipment-reference-v1017 #bankPage .bank-discovery-bar span {
  background: linear-gradient(90deg,#8d5b1d,#d3a14d,#f0c56d);
}
body.bank-equipment-reference-v1017 #bankPage .bank-rarity-summary {
  gap: 4px;
  padding-top: 7px;
}
body.bank-equipment-reference-v1017 #bankPage .bank-rarity-chip {
  padding: 4px 6px;
  border-radius: 0;
  background: #030809;
}

body.bank-equipment-reference-v1017 #bankPage .bank-slot-grid-rs {
  grid-template-columns: repeat(auto-fill,minmax(64px,1fr));
  gap: 6px;
  align-content: start;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-rs {
  min-height: 64px;
  padding: 5px;
  border-radius: 0 !important;
  background: #04090b !important;
  transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-rs::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.018);
  pointer-events: none;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-rs:hover {
  transform: translateY(-1px);
  background: #071013 !important;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-rs.selected {
  outline: 1px solid rgba(240,197,109,.22);
  outline-offset: 2px;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-icon-rs {
  position: relative;
  z-index: 1;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-icon-rs .jd-item-icon {
  width: 94%;
  height: 94%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #bankPage .bank-slot-count-rs {
  right: 4px;
  bottom: 3px;
  padding: 1px 3px;
  border: 0;
  border-radius: 0;
  background: rgba(1,4,5,.88);
  color: #e7ce99;
  font-size: 8px;
  text-shadow: 0 1px 2px #000;
}

body.bank-equipment-reference-v1017 #bankPage .bank-selected-panel-rs {
  position: relative;
  padding: 43px 13px 15px;
  border-left: 1px solid var(--jd-bronze-line);
  background:
    linear-gradient(180deg, rgba(182,121,34,.028), transparent 13rem),
    #050b0d;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-panel-rs::after {
  content: "ITEM DETAILS";
  position: absolute;
  top: 13px;
  left: 13px;
  right: 48px;
  height: 20px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--jd-bronze-soft);
  color: #b68a43;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 20px;
  pointer-events: none;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-panel-rs:not(.open) > .bank-selected-empty-rs {
  min-height: 330px;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-empty-rs {
  border: 1px solid rgba(182,121,34,.12);
  background: rgba(0,0,0,.08);
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-empty-icon { filter: grayscale(1) sepia(.4); opacity: .38; }

body.bank-equipment-reference-v1017 #bankPage .bank-selected-header-rs,
body.bank-equipment-reference-v1017 #bankPage .bank-selected-stats-rs > div,
body.bank-equipment-reference-v1017 #bankPage .bank-selected-info-rs > div,
body.bank-equipment-reference-v1017 #bankPage .bank-selected-equipment-rs {
  border-radius: 0 !important;
  background: #04090b !important;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-header-rs {
  padding: 9px;
  border-color: var(--jd-bronze-soft);
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-header-rs h3 {
  color: #e7cf9b;
  font-family: var(--jd-serif);
  font-size: 17px;
  font-weight: 500;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-icon-rs {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 0;
  background: #020607;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-icon-rs .jd-item-icon {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-stats-rs { gap: 4px; }
body.bank-equipment-reference-v1017 #bankPage .bank-selected-stats-rs > div {
  border-color: var(--jd-bronze-soft);
  padding: 7px 8px;
}
body.bank-equipment-reference-v1017 #bankPage .bank-selected-stats-rs strong { color: #e1c48b; }
body.bank-equipment-reference-v1017 #bankPage .bank-selected-info-rs { gap: 5px; }
body.bank-equipment-reference-v1017 #bankPage .bank-selected-info-rs > div { border-color: rgba(182,121,34,.16); }
body.bank-equipment-reference-v1017 #bankPage .bank-selected-equipment-rs {
  border-color: rgba(182,121,34,.25);
  background: rgba(182,121,34,.035) !important;
}
body.bank-equipment-reference-v1017 #bankPage .bank-equipped-pill-rs {
  border: 1px solid rgba(143,190,66,.35);
  border-radius: 0;
  background: rgba(143,190,66,.08);
  color: #9dc859;
}
body.bank-equipment-reference-v1017 #bankPage .bank-sell-rs {
  border-top-color: var(--jd-bronze-soft);
}
body.bank-equipment-reference-v1017 #bankPage .bank-sell-rs button,
body.bank-equipment-reference-v1017 #bankPage .bank-selected-panel-rs button,
body.bank-equipment-reference-v1017 #bankPage .bank-sell-x-rs input {
  border-radius: 0;
}

/* =========================================================
   EQUIPMENT — split loadout/detail view based on reference
   ========================================================= */
body.bank-equipment-reference-v1017 #equipmentPage .equipment-best-loadout-button {
  min-height: 42px;
  border: 1px solid var(--jd-gold-2);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(182,121,34,.12), rgba(182,121,34,.035));
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  box-shadow: inset 0 0 0 1px #020607, inset 0 0 0 3px rgba(182,121,34,.055);
}

body.bank-equipment-reference-v1017 #equipmentPage .equipment-reference-layout {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(310px,.78fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-reference-side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  min-width: 0;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-section,
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-panel {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(182,121,34,.028), transparent 11rem),
    var(--jd-panel-deep);
  box-shadow:
    inset 0 0 0 3px #020607,
    inset 0 0 0 4px rgba(182,121,34,.16);
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-section::before,
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-panel::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--jd-gold-3);
  border-left: 1px solid var(--jd-gold-3);
  pointer-events: none;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-section::after,
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-panel::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-right: 1px solid var(--jd-gold-3);
  border-bottom: 1px solid var(--jd-gold-3);
  pointer-events: none;
}

body.bank-equipment-reference-v1017 #equipmentPage .equipment-loadout-frame {
  min-height: 562px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-summary-frame,
body.bank-equipment-reference-v1017 #equipmentPage .equipment-detail-frame {
  min-width: 0;
}

body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-overview-clean {
  width: min(100%,760px);
  min-height: 455px;
  gap: 7px;
  margin: 0 auto;
  padding: 6px 8px 2px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-silhouette {
  opacity: .12;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-silhouette .character-head,
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-silhouette .character-torso,
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-silhouette .character-legs {
  border-color: rgba(182,121,34,.42);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(182,121,34,.12), rgba(31,52,48,.04));
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-silhouette .character-head { border-radius: 50%; }

body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot {
  min-height: 78px;
  padding: 8px 6px;
  border-radius: 0;
  border-color: rgba(126,91,44,.36);
  background: #050b0d;
  box-shadow: inset 0 0 0 1px #020607;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot:hover {
  border-color: var(--jd-gold-2);
  background: #081013;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot.filled {
  border-color: rgba(182,121,34,.52);
  background: radial-gradient(circle at 50% 30%, rgba(182,121,34,.07), transparent 62%), #050b0d;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot.selected {
  border-color: var(--jd-gold-3);
  outline: 1px solid rgba(240,197,109,.16);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px #020607, 0 0 10px rgba(182,121,34,.08);
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot-icon {
  width: 38px;
  height: 38px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot-icon .jd-item-icon {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot small {
  color: #8f8068;
  font-size: 8px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot strong {
  color: #d9c7a3;
  font-family: var(--jd-serif);
  font-size: 9px;
}

body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-level-card {
  display: grid;
  grid-template-columns: auto 62px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--jd-bronze-soft);
  border-radius: 0;
  background: #030809;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-level-card small {
  color: #b78a45;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-level-card strong {
  grid-row: 1 / 3;
  grid-column: 2;
  justify-self: center;
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: 32px;
  font-weight: 500;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-level-card span {
  color: #8f8068;
  font-size: 9px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 4px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-stats > div {
  padding: 7px 5px;
  border: 1px solid rgba(182,121,34,.17);
  border-radius: 0;
  background: #030809;
  text-align: center;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-stats small {
  display: block;
  color: #80735f;
  font-size: 7.5px;
  letter-spacing: .03em;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-combat-stats strong {
  display: block;
  margin-top: 2px;
  color: #d9bd84;
  font-family: var(--jd-serif);
  font-size: 15px;
}

body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-main {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--jd-bronze-soft);
  background: #030809;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-icon {
  width: 62px;
  height: 62px;
  border-radius: 0;
  border-color: rgba(182,121,34,.33);
  background: #020607;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-icon .jd-item-icon {
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-main h3 {
  color: #e4ca96;
  font-family: var(--jd-serif);
  font-size: 16px;
  font-weight: 500;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-main p {
  color: #9b8c73;
  line-height: 1.45;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
  justify-content: stretch;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-actions button,
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-actions .equipment-bis-label {
  min-height: 34px;
  border-radius: 0;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-actions .equipment-bis-label {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(143,190,66,.22);
  background: rgba(143,190,66,.05);
  color: #94b95e;
  font-size: 9px;
}

/* Supplies mimic the reference's lower ledger modules. */
body.bank-equipment-reference-v1017 #equipmentPage .equipment-supplies-reference-grid {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-food-frame,
body.bank-equipment-reference-v1017 #equipmentPage .equipment-potion-frame {
  min-width: 0;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-supply-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--jd-bronze-soft);
  border-radius: 0;
  background: #030809;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-supply-identity > span {
  border-radius: 0;
  border-color: rgba(182,121,34,.24);
  background: #020607;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-supply-identity > span .jd-item-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-supply-row select,
body.bank-equipment-reference-v1017 #equipmentPage .equipment-supply-row button {
  min-height: 35px;
  border-radius: 0;
}

body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-panel {
  display: grid;
  align-content: start;
  gap: 9px;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--jd-bronze-soft);
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-hero h2 {
  margin: 1px 0 2px;
  color: #e4c88f;
  font-family: var(--jd-serif);
  font-size: 17px;
  font-weight: 500;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-hero p {
  max-width: 520px;
  color: #8e8068;
  font-size: 9px;
  line-height: 1.4;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-auto-toggle {
  border-radius: 0;
  border-color: var(--jd-bronze-soft);
  background: #030809;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(182,121,34,.17);
  border-radius: 0;
  background: #030809;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-card.active {
  border-color: rgba(143,190,66,.42);
  background: linear-gradient(180deg,rgba(143,190,66,.05),#030809);
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-heading {
  gap: 6px;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-heading h3 {
  font-family: var(--jd-serif);
  font-size: 12px;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-icon {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: #020607;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-icon .jd-item-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-select select,
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-actions button {
  border-radius: 0;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-effect {
  min-height: 50px;
  padding: 6px;
  border-radius: 0;
  border: 1px solid rgba(182,121,34,.12);
  background: #020607;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-effect strong { color: #cbb48b; font-size: 9px; }
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-effect span { color: #7f735f; font-size: 8px; }

body.bank-equipment-reference-v1017 #equipmentPage .equipment-tools-frame { margin-bottom: 0; }
body.bank-equipment-reference-v1017 #equipmentPage .equipment-tools-clean {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-tool-clean {
  padding: 8px;
  border: 1px solid var(--jd-bronze-soft);
  border-radius: 0;
  background: #030809;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-slot-icon {
  border-radius: 0;
  border-color: rgba(182,121,34,.22);
  background: #020607;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-slot-icon .jd-item-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-slot-actions button { border-radius: 0; }

/* Shared buttons inside these two pages: squared, engraved, reference-aligned. */
body.bank-equipment-reference-v1017 #bankPage button:not(.bank-slot-rs),
body.bank-equipment-reference-v1017 #equipmentPage button {
  font-family: var(--jd-serif);
}
body.bank-equipment-reference-v1017 #bankPage button:not(.bank-slot-rs):not(:disabled),
body.bank-equipment-reference-v1017 #equipmentPage button:not(:disabled) {
  border-color: rgba(182,121,34,.42);
}

/* =========================================================
   Responsive preservation
   ========================================================= */
@media (max-width: 1120px) {
  body.bank-equipment-reference-v1017 #bankPage .bank-content-rs {
    grid-template-columns: minmax(0,1fr) 280px;
  }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-reference-layout {
    grid-template-columns: minmax(0,1.35fr) minmax(285px,.8fr);
  }
  body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  body.bank-equipment-reference-v1017 #bankPage .bank-content-rs { grid-template-columns: 1fr; }
  body.bank-equipment-reference-v1017 #bankPage .bank-selected-panel-rs { border-left: 0; border-top: 1px solid var(--jd-bronze-line); }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-reference-layout { grid-template-columns: 1fr; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-reference-side { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-loadout-frame { min-height: 0; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-supplies-reference-grid { grid-template-columns: 1fr; }
  body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  body.bank-equipment-reference-v1017 #bankPage > .section-heading,
  body.bank-equipment-reference-v1017 #equipmentPage > .section-heading {
    min-height: 0;
    padding: 7px 3px 9px;
  }
  body.bank-equipment-reference-v1017 #bankPage .bank-shell-rs,
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-clean-section,
  body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-panel {
    box-shadow: inset 0 0 0 2px #020607, inset 0 0 0 3px rgba(182,121,34,.14);
  }
  body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs { overflow-x: auto; scrollbar-width: none; }
  body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs::-webkit-scrollbar { display: none; }
  body.bank-equipment-reference-v1017 #bankPage .bank-category-tabs button { flex: 0 0 auto; }
  body.bank-equipment-reference-v1017 #bankPage .bank-slot-grid-rs { grid-template-columns: repeat(auto-fill,minmax(58px,1fr)); gap: 5px; }
  body.bank-equipment-reference-v1017 #bankPage .bank-slot-rs { min-height: 58px; }
  body.bank-equipment-reference-v1017 #bankPage .bank-selected-panel-rs {
    border: 1px solid var(--jd-gold-1);
    border-radius: 0;
    background: #050b0d;
    box-shadow: inset 0 0 0 3px #020607, 0 18px 60px rgba(0,0,0,.65);
  }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-reference-side { grid-template-columns: 1fr; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-overview-clean { min-height: 0; padding: 3px; }
  body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-grid { grid-template-columns: 1fr; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-tools-clean { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body.bank-equipment-reference-v1017 .reference-page-heading-title { align-items: flex-start; }
  body.bank-equipment-reference-v1017 .reference-page-heading-icon { width: 40px; height: 40px; flex-basis: 40px; }
  body.bank-equipment-reference-v1017 .reference-page-heading-icon img { width: 25px; height: 25px; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-page-heading { align-items: stretch; flex-direction: column; gap: 8px; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-best-loadout-button { width: 100%; }
  body.bank-equipment-reference-v1017 #bankPage .bank-main-nav { align-items: stretch; flex-direction: column; }
  body.bank-equipment-reference-v1017 #bankPage .bank-filter-toggle { width: 100%; }
  body.bank-equipment-reference-v1017 #bankPage .bank-rarity-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.bank-equipment-reference-v1017 #bankPage .bank-slot-grid-rs { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
  body.bank-equipment-reference-v1017 #bankPage .bank-slot-rs { min-height: 0; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-character-slot { min-height: 72px; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-main { grid-template-columns: 56px minmax(0,1fr); }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-icon { width: 54px; height: 54px; }
  body.bank-equipment-reference-v1017 #equipmentPage .equipment-slot-detail-icon .jd-item-icon { width: 48px; height: 48px; }
}

body.bank-equipment-reference-v1017 #bankPage .bank-selected-potion-rs {
  border-radius: 0;
  border-color: rgba(182,121,34,.25);
  background: rgba(182,121,34,.035);
}
body.bank-equipment-reference-v1017 #bankPage .bank-potion-active-pill {
  border-radius: 0;
  border: 1px solid rgba(143,190,66,.34);
  background: rgba(143,190,66,.08);
  color: #9dc859;
}

/* Neutralize legacy potion gradient so supplies stay inside the canonical reference palette. */
body.bank-equipment-reference-v1017 #equipmentPage .potion-preset-hero {
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
body.bank-equipment-reference-v1017 #equipmentPage .potion-auto-toggle,
body.bank-equipment-reference-v1017 #equipmentPage .potion-auto-toggle.enabled {
  border-radius: 0;
  background: #030809 !important;
  box-shadow: none !important;
}


/* ===== SOURCE: reference-ui-phase8.css ===== */
/* JourneyDen V1.01.8 — Skills & Activities UI Rework
   Visual target: supplied Expedition Log reference.
   UI-only phase: training, skill progression and detail presentation. */

body.skills-activities-reference-v1018 {
  --jd-training-deep: #030809;
  --jd-training-panel: #050b0d;
  --jd-training-raised: #081114;
  --jd-training-line: rgba(182,121,34,.44);
  --jd-training-line-soft: rgba(182,121,34,.20);
  --jd-training-line-faint: rgba(182,121,34,.10);
}

/* =========================================================
   Shared page headings — same grammar as the reference log
   ========================================================= */
body.skills-activities-reference-v1018 #activitiesPage > .reference-training-heading,
body.skills-activities-reference-v1018 #skillsPage > .reference-training-heading {
  position: relative;
  min-height: 72px;
  margin: 0 0 10px;
  padding: 8px 12px 11px;
  border-bottom: 1px solid var(--jd-training-line);
  background: linear-gradient(90deg, rgba(182,121,34,.055), transparent 42%);
}
body.skills-activities-reference-v1018 #activitiesPage > .reference-training-heading::after,
body.skills-activities-reference-v1018 #skillsPage > .reference-training-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0, var(--jd-gold-1) 4%, rgba(182,121,34,.18) 68%, transparent 100%);
}
body.skills-activities-reference-v1018 .reference-training-heading .reference-page-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.skills-activities-reference-v1018 .reference-training-heading .reference-page-heading-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid var(--jd-gold-1);
  background: #050b0d;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.18);
}
body.skills-activities-reference-v1018 .reference-training-heading .reference-page-heading-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: sepia(1) saturate(.9) brightness(1.13);
}
body.skills-activities-reference-v1018 .reference-training-heading h2 {
  margin: 0;
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: clamp(24px,2.2vw,31px);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .045em;
}
body.skills-activities-reference-v1018 .reference-training-heading p {
  margin: 2px 0 0;
  color: #b9a786;
  font-size: 12px;
}
body.skills-activities-reference-v1018 .reference-training-heading .eyebrow {
  color: #9b7440;
  font-size: 9px;
  letter-spacing: .12em;
}

/* =========================================================
   ACTIVITIES — skill rail + training ledger
   ========================================================= */
body.skills-activities-reference-v1018 #activitiesPage .activity-layout {
  grid-template-columns: 222px minmax(0,1fr);
  gap: 9px;
  align-items: start;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-sidebar-panel,
body.skills-activities-reference-v1018 #activitiesPage .activity-content {
  min-width: 0;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-sidebar-panel {
  position: sticky;
  top: 9px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: var(--jd-training-panel);
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.15);
}
body.skills-activities-reference-v1018 #activitiesPage .activity-sidebar-panel .panel-heading {
  display: grid;
  gap: 1px;
  padding: 11px 12px 10px;
  border-bottom: 1px solid var(--jd-training-line);
  background: linear-gradient(180deg, rgba(182,121,34,.045), transparent);
}
body.skills-activities-reference-v1018 #activitiesPage .activity-sidebar-panel .panel-heading strong {
  color: #e0c18a;
  font-family: var(--jd-serif);
  font-size: 15px;
  font-weight: 500;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 5px;
  border: 0;
  background: transparent;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 33px minmax(0,1fr);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
  width: 100%;
  min-height: 47px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-bottom-color: rgba(182,121,34,.11);
  border-radius: 0;
  background: transparent;
  color: #aa9674;
  font-family: var(--jd-serif);
  text-align: left;
  box-shadow: none;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button:hover {
  border-color: rgba(182,121,34,.28);
  background: #071013;
  color: #d8bd87;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button.active {
  border-color: var(--jd-gold-1);
  background: linear-gradient(90deg, rgba(182,121,34,.13), rgba(182,121,34,.025));
  color: var(--jd-gold-4);
  box-shadow: inset 3px 0 0 rgba(211,161,77,.70);
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button.active::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--jd-gold-3);
  border-right: 1px solid var(--jd-gold-3);
  transform: translateY(-50%) rotate(45deg);
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tab-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(182,121,34,.20);
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tab-icon-art {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button b {
  display: block;
  color: inherit;
  font-family: var(--jd-serif);
  font-size: 12px;
  font-weight: 600;
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button small {
  display: block;
  margin-top: 2px;
  color: #7f725e;
  font-size: 9px;
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button.active small { color: #b89760; }
body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button.skill-locked { opacity: .54; }

/* Selected-skill summary now doubles as the desktop skill dossier. */
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-training-summary {
  display: grid;
  gap: 8px;
  margin: 0 0 9px;
  padding: 10px 12px;
  border: 1px solid var(--jd-training-line);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(182,121,34,.055), transparent 45%),
    var(--jd-training-panel);
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.10);
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-head {
  display: grid;
  grid-template-columns: 45px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: #030809;
  box-shadow: inset 0 0 0 2px #010405;
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-icon-art { width: 34px; height: 34px; object-fit: contain; }
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-copy small,
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-level small {
  color: #8a775d;
  font-family: var(--jd-serif);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-copy strong {
  color: #e3c995;
  font-family: var(--jd-serif);
  font-size: 18px;
  font-weight: 500;
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-level {
  min-width: 58px;
  padding-left: 12px;
  border-left: 1px solid var(--jd-training-line-soft);
  text-align: right;
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-level b { color: var(--jd-gold-4); font-family: var(--jd-serif); font-size: 23px; }
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-xp,
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #9b8b70;
  font-size: 9px;
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-xp { color: #c4ad82; }
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-progress {
  height: 7px;
  overflow: hidden;
  border: 1px solid #3a2a17;
  border-radius: 0;
  background: #020607;
  box-shadow: inset 0 0 0 1px #000;
}
body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-progress span {
  display: block;
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg,#8d5b1d,#d3a14d,#f0c56d);
}

/* Current activity reads like the selected expedition record. */
body.skills-activities-reference-v1018 #activitiesPage .current-activity-card {
  margin: 0 0 9px;
  overflow: hidden;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: #050b0d;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.11);
}
body.skills-activities-reference-v1018 #activitiesPage .current-activity-card.is-idle { opacity: .78; }
body.skills-activities-reference-v1018 #activitiesPage .activity-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid var(--jd-training-line-soft);
  background: linear-gradient(90deg, rgba(182,121,34,.05), transparent 46%);
}
body.skills-activities-reference-v1018 #activitiesPage .activity-header h2 {
  margin: 1px 0 2px;
  color: #e6ca93;
  font-family: var(--jd-serif);
  font-size: 18px;
  font-weight: 500;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-header p { color: #93836a; font-size: 10px; }
body.skills-activities-reference-v1018 #activitiesPage .activity-header .danger {
  min-width: 88px;
  border: 1px solid rgba(151,71,48,.62);
  border-radius: 0;
  background: #130a08;
  color: #d88a72;
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #activitiesPage .progress-panel { padding: 9px 13px 11px; background: #030809; }
body.skills-activities-reference-v1018 #activitiesPage .progress-meta { color: #a69373; font-size: 10px; }
body.skills-activities-reference-v1018 #activitiesPage .progress-track {
  height: 8px;
  border: 1px solid #3a2a17;
  border-radius: 0;
  background: #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .progress-fill { border-radius: 0; background: linear-gradient(90deg,#815116,#c98b2f,#edc46d); }

/* Reference-style tab/filter strip. */
body.skills-activities-reference-v1018 #activitiesPage .activity-browse-controls {
  display: grid;
  gap: 7px;
  margin: 0 0 9px;
  padding: 8px;
  border: 1px solid var(--jd-training-line);
  border-radius: 0;
  background: #04090b;
  box-shadow: inset 0 0 0 2px #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-quick-nav { gap: 7px; }
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chips { gap: 3px; }
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip,
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-toggle,
body.skills-activities-reference-v1018 #activitiesPage .activity-clear-filters {
  min-height: 32px;
  border: 1px solid rgba(137,91,29,.52);
  border-radius: 0;
  background: #050b0d;
  color: #9f8c6b;
  font-family: var(--jd-serif);
  font-size: 10px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip:hover,
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-toggle:hover,
body.skills-activities-reference-v1018 #activitiesPage .activity-clear-filters:hover {
  border-color: var(--jd-gold-2);
  color: #dbc08a;
  background: #081013;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip.active,
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-toggle.active {
  border-color: var(--jd-gold-2);
  color: var(--jd-gold-4);
  background: linear-gradient(180deg, rgba(182,121,34,.11), rgba(182,121,34,.025));
}
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip.active { box-shadow: inset 0 -2px 0 rgba(211,161,77,.70); }
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip small { color: #77684f; }
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip.active small { color: #b89760; }
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-badge { border-radius: 0; background: #2a1d0d; color: var(--jd-gold-4); }
body.skills-activities-reference-v1018 #activitiesPage .activity-advanced-filters {
  padding: 8px;
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-search input,
body.skills-activities-reference-v1018 #activitiesPage .activity-compact-selects select {
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #050b0d;
  color: var(--jd-text);
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #activitiesPage .activity-filter-summary { color: #81725c; font-family: var(--jd-serif); }

/* Activity rows replace modern cards. */
body.skills-activities-reference-v1018 #activitiesPage #activityCards,
body.skills-activities-reference-v1018 #activitiesPage .activity-category-grid,
body.skills-activities-reference-v1018 #activitiesPage .activity-category-grid-selected {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-click-card {
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(175px,1fr) 70px 64px 92px minmax(72px,auto);
  align-items: center;
  gap: 0;
  min-height: 78px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #050b0d;
  color: var(--jd-text);
  box-shadow: inset 0 0 0 1px #020607;
  transition: border-color .12s ease, background-color .12s ease;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-click-card:hover {
  transform: none;
  border-color: rgba(182,121,34,.48);
  background: #071013;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-click-card.active-card {
  border-color: var(--jd-gold-2);
  background: linear-gradient(90deg,rgba(182,121,34,.09),#071013 22%,#050b0d 100%);
  box-shadow: inset 3px 0 0 var(--jd-gold-3), inset 0 0 0 1px #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-click-card.activity-disabled { opacity: .60; filter: saturate(.68); }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-icon {
  display: grid;
  place-items: center;
  width: 60px;
  align-self: stretch;
  border-right: 1px solid var(--jd-training-line-soft);
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-icon .jd-item-icon,
body.skills-activities-reference-v1018 #activitiesPage .activity-item-icon-art {
  width: 49px;
  height: 49px;
  object-fit: contain;
  image-rendering: pixelated;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-main {
  min-width: 0;
  padding: 8px 11px;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-title { min-width: 0; }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-title .eyebrow { color: #846c4a; font-size: 8px; }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-title h3 {
  overflow: hidden;
  margin: 1px 0 2px;
  color: #dfc28e;
  font-family: var(--jd-serif);
  font-size: 15px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-output,
body.skills-activities-reference-v1018 #activitiesPage .activity-click-card .requirements {
  overflow: hidden;
  margin: 0;
  color: #8d7d65;
  font-family: var(--jd-serif);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-output { color: #b49b70; }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat,
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-mastery {
  display: grid;
  align-content: center;
  min-height: 48px;
  padding: 5px 8px;
  border-left: 1px solid var(--jd-training-line-faint);
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat small,
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-mastery small {
  color: #716551;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat strong,
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-mastery strong {
  margin-top: 2px;
  color: #dbc18e;
  font-family: var(--jd-serif);
  font-size: 12px;
  font-weight: 500;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-mastery span { color: #806f58; font-size: 8px; }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-state {
  position: static;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 72px;
  margin: 0;
  padding: 7px;
  border: 0;
  border-left: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #030809;
  color: #8a7b63;
  font-family: var(--jd-serif);
  font-size: 9px;
  text-align: center;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-card-state.ready { color: #a58f68; }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-state.active { color: var(--jd-green); background: rgba(62,88,30,.13); }
body.skills-activities-reference-v1018 #activitiesPage .activity-card-state.blocked { color: #a87767; background: rgba(94,42,31,.10); }
body.skills-activities-reference-v1018 #activitiesPage .activity-mobile-mastery { display: none !important; }

body.skills-activities-reference-v1018 #activitiesPage .activity-category-section { margin: 0 0 12px; }
body.skills-activities-reference-v1018 #activitiesPage .activity-category-heading {
  position: relative;
  min-height: 39px;
  margin: 0 0 5px;
  padding: 5px 7px 7px;
  border: 0;
  border-bottom: 1px solid var(--jd-training-line-soft);
  background: transparent;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-category-heading::before {
  content: "◆";
  position: absolute;
  left: -1px;
  bottom: -5px;
  padding-right: 6px;
  background: var(--jd-ink-1);
  color: var(--jd-gold-1);
  font-size: 7px;
}
body.skills-activities-reference-v1018 #activitiesPage .activity-category-heading h3 { color: #cba667; font-family: var(--jd-serif); font-size: 15px; font-weight: 500; }
body.skills-activities-reference-v1018 #activitiesPage .activity-category-heading > span { color: #776a55; font-size: 9px; }

/* =========================================================
   SKILLS — progression ledger
   ========================================================= */
body.skills-activities-reference-v1018 #skillsPage #skillCards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 64px 112px;
  align-items: center;
  gap: 0;
  min-height: 78px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #050b0d;
  box-shadow: inset 0 0 0 1px #020607;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card:hover {
  transform: none;
  border-color: rgba(182,121,34,.50);
  background: #071013;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card.selected {
  border-color: var(--jd-gold-2);
  background: linear-gradient(90deg,rgba(182,121,34,.08),#050b0d 38%);
  box-shadow: inset 3px 0 0 var(--jd-gold-3), inset 0 0 0 1px #020607;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card.skill-locked { opacity: .54; filter: saturate(.6); }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-icon {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px solid var(--jd-training-line-soft);
  background: #030809;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card-icon-art { width: 43px; height: 43px; object-fit: contain; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-main { min-width: 0; padding: 7px 10px; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-main .eyebrow { color: #7f6b4c; font-size: 8px; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-main h3 {
  margin: 1px 0 6px;
  color: #dfc28e;
  font-family: var(--jd-serif);
  font-size: 15px;
  font-weight: 500;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card-progress {
  height: 6px;
  margin: 0 0 4px;
  overflow: hidden;
  border: 1px solid #3a2a17;
  border-radius: 0;
  background: #020607;
}
body.skills-activities-reference-v1018 #skillsPage .skill-card-progress span { height: 100%; background: linear-gradient(90deg,#86551a,#d29b43,#efc46a); }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-main > small { display: block; overflow: hidden; color: #786b57; font-family: var(--jd-serif); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-level,
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-xp {
  display: grid;
  align-content: center;
  align-self: stretch;
  min-width: 0;
  padding: 7px 8px;
  border-left: 1px solid var(--jd-training-line-faint);
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-level { text-align: center; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-level small,
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-xp small { color: #716551; font-size: 7px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-level strong { color: var(--jd-gold-4); font-size: 21px; font-weight: 500; }
body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-xp b { overflow: hidden; margin-top: 2px; color: #bba47c; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* Skill modal becomes a framed reference detail window. */
body.skills-activities-reference-v1018 #skillsPage .skill-detail-backdrop {
  background: rgba(1,4,5,.82);
  backdrop-filter: blur(2px);
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-modal-card {
  width: min(800px,calc(100vw - 28px));
  max-height: min(86vh,780px);
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: #04090b;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.18), 0 24px 70px rgba(0,0,0,.55);
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-header {
  padding: 13px 15px 10px;
  border-bottom: 1px solid var(--jd-training-line);
  background: linear-gradient(90deg,rgba(182,121,34,.06),transparent 48%);
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-header h3 { color: var(--jd-gold-4); font-family: var(--jd-serif); font-size: 22px; font-weight: 500; }
body.skills-activities-reference-v1018 #skillsPage #skillDetailLevel { color: #d1b178; font-family: var(--jd-serif); font-size: 13px; }
body.skills-activities-reference-v1018 #skillsPage .skill-detail-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--jd-gold-3);
  font-family: var(--jd-serif);
  font-size: 27px;
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-close:hover { color: var(--jd-gold-4); background: rgba(182,121,34,.05); }
body.skills-activities-reference-v1018 #skillsPage .skill-detail-tabs {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 3px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--jd-training-line-soft);
  background: #030809;
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-tabs button {
  min-height: 34px;
  border: 1px solid rgba(137,91,29,.52);
  border-radius: 0;
  background: #050b0d;
  color: #a08c69;
  font-family: var(--jd-serif);
  font-weight: 500;
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-tabs button.active {
  border-color: var(--jd-gold-2);
  color: var(--jd-gold-4);
  background: linear-gradient(180deg,rgba(182,121,34,.11),rgba(182,121,34,.025));
  box-shadow: inset 0 -2px 0 var(--jd-gold-3);
}
body.skills-activities-reference-v1018 #skillsPage .skill-detail-view { padding: 10px; background: #04090b; }
body.skills-activities-reference-v1018 #skillsPage .skill-unlock-list { display: grid; gap: 3px; }
body.skills-activities-reference-v1018 #skillsPage .skill-unlock-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  min-height: 43px;
  padding: 5px 9px;
  border: 1px solid var(--jd-training-line-faint);
  border-radius: 0;
  background: #050b0d;
  color: #a99573;
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #skillsPage .skill-unlock-row.unlocked { border-color: rgba(133,166,65,.23); color: #c3b18d; }
body.skills-activities-reference-v1018 #skillsPage .skill-unlock-row.locked { opacity: .58; }
body.skills-activities-reference-v1018 #skillsPage .skill-unlock-row b { color: #c79b55; font-weight: 500; }
body.skills-activities-reference-v1018 #skillsPage .skill-activity-item-icon-art { width: 30px; height: 30px; vertical-align: middle; image-rendering: pixelated; }
body.skills-activities-reference-v1018 #skillsPage .skill-xp-table { border-collapse: collapse; color: #b5a17d; font-family: var(--jd-serif); }
body.skills-activities-reference-v1018 #skillsPage .skill-xp-table th { border-bottom: 1px solid var(--jd-training-line); background: #050b0d; color: #c49b5b; font-weight: 500; }
body.skills-activities-reference-v1018 #skillsPage .skill-xp-table td { border-bottom: 1px solid rgba(182,121,34,.09); }
body.skills-activities-reference-v1018 #skillsPage .skill-xp-table tr.reached td { color: #b9c38b; background: rgba(91,113,43,.055); }

/* =========================================================
   Responsive retention
   ========================================================= */
@media (max-width: 1100px) {
  body.skills-activities-reference-v1018 #activitiesPage .activity-click-card {
    grid-template-columns: 58px minmax(160px,1fr) 62px 58px minmax(82px,auto);
  }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-mastery { display: none; }
  body.skills-activities-reference-v1018 #skillsPage #skillCards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.skills-activities-reference-v1018 #activitiesPage > .reference-training-heading,
  body.skills-activities-reference-v1018 #skillsPage > .reference-training-heading {
    min-height: 60px;
    margin-bottom: 7px;
    padding: 6px 7px 8px;
  }
  body.skills-activities-reference-v1018 .reference-training-heading .reference-page-heading-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  body.skills-activities-reference-v1018 .reference-training-heading .reference-page-heading-icon img { width: 25px; height: 25px; }
  body.skills-activities-reference-v1018 .reference-training-heading h2 { font-size: 22px !important; }
  body.skills-activities-reference-v1018 .reference-training-heading p { display: none; }

  body.skills-activities-reference-v1018 #activitiesPage .activity-layout { display: block !important; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-sidebar-panel {
    position: static !important;
    margin: 0 0 7px !important;
    border-radius: 0 !important;
    background: #04090b !important;
  }
  body.skills-activities-reference-v1018 #activitiesPage .activity-sidebar-panel .panel-heading { display: none !important; }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tabs {
    display: flex !important;
    gap: 3px !important;
    width: 100%;
    padding: 5px !important;
    overflow-x: auto !important;
    background: #030809 !important;
    scrollbar-width: none;
  }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button {
    flex: 0 0 94px !important;
    width: 94px !important;
    min-width: 94px !important;
    min-height: 50px !important;
    grid-template-columns: 25px minmax(0,1fr) !important;
    gap: 5px !important;
    padding: 5px 6px !important;
    border: 1px solid rgba(182,121,34,.18) !important;
    border-radius: 0 !important;
    background: #050b0d !important;
  }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button.active {
    border-color: var(--jd-gold-2) !important;
    background: linear-gradient(180deg,rgba(182,121,34,.11),rgba(182,121,34,.02)) !important;
    box-shadow: inset 0 -2px 0 var(--jd-gold-3) !important;
  }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button.active::after { display: none; }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tab-icon { width: 24px !important; height: 24px; border: 0; }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tab-icon-art { width: 23px; height: 23px; }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button b { font-size: 10px !important; }
  body.skills-activities-reference-v1018 #activitiesPage .skill-tabs button small { font-size: 8px !important; color: #8a7452 !important; }

  body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-training-summary {
    display: grid !important;
    margin: 0 0 7px;
    padding: 8px 9px;
    border-radius: 0 !important;
    background: #050b0d !important;
  }
  body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-head { grid-template-columns: 36px minmax(0,1fr) auto; gap: 7px; }
  body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-icon { width: 34px; height: 34px; border-radius: 0 !important; }
  body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-icon-art { width: 28px; height: 28px; }
  body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-copy strong { font-size: 14px; }
  body.skills-activities-reference-v1018 #activitiesPage .mobile-skill-summary-level b { font-size: 19px; }

  body.skills-activities-reference-v1018 #activitiesPage .current-activity-card.is-idle { display: none !important; }
  body.skills-activities-reference-v1018 #activitiesPage .current-activity-card:not(.is-idle) {
    margin: 0 0 7px !important;
    border-radius: 0 !important;
    background: #050b0d !important;
  }
  body.skills-activities-reference-v1018 #activitiesPage .current-activity-card:not(.is-idle) .activity-header { padding: 8px 9px !important; }

  body.skills-activities-reference-v1018 #activitiesPage .activity-browse-controls {
    margin-bottom: 7px;
    padding: 5px;
    border-radius: 0 !important;
  }
  body.skills-activities-reference-v1018 #activitiesPage .activity-filter-chip,
  body.skills-activities-reference-v1018 #activitiesPage .activity-filter-toggle { min-height: 30px; font-size: 9px; }

  body.skills-activities-reference-v1018 #activitiesPage .activity-click-card {
    grid-template-columns: 51px minmax(0,1fr) 54px;
    grid-template-areas:
      "icon main state"
      "icon stats stats";
    min-height: 78px;
  }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-icon { grid-area: icon; width: 51px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-icon .jd-item-icon,
  body.skills-activities-reference-v1018 #activitiesPage .activity-item-icon-art { width: 42px; height: 42px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-main { grid-area: main; padding: 6px 8px 4px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-title h3 { font-size: 13px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-output,
  body.skills-activities-reference-v1018 #activitiesPage .activity-click-card .requirements { font-size: 8px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat {
    grid-area: stats;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 25px;
    padding: 3px 7px;
    border-top: 1px solid var(--jd-training-line-faint);
    border-left: 0;
  }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat:nth-of-type(3) { justify-content: flex-start; padding-left: 8px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat:nth-of-type(4) { justify-content: flex-end; padding-right: 8px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat small,
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat strong { font-size: 8px; margin: 0; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-mastery { display: none; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-state {
    grid-area: state;
    min-width: 54px;
    padding: 4px;
    font-size: 8px;
  }

  body.skills-activities-reference-v1018 #skillsPage #skillCards { grid-template-columns: 1fr; gap: 4px; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card {
    grid-template-columns: 50px minmax(0,1fr) 54px;
    grid-template-areas: "icon main level" "icon xp xp";
    min-height: 74px;
  }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-icon { grid-area: icon; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-icon-art { width: 38px; height: 38px; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-main { grid-area: main; padding: 6px 8px; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-main h3 { font-size: 13px; margin-bottom: 5px; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-level { grid-area: level; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-level strong { font-size: 19px; }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-xp {
    grid-area: xp;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    padding: 3px 8px;
    border-top: 1px solid var(--jd-training-line-faint);
    border-left: 0;
  }
  body.skills-activities-reference-v1018 #skillsPage .skill-card-ref-xp b { margin: 0; font-size: 8px; }
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-modal-card { width: calc(100vw - 12px); max-height: 91vh; border-radius: 0; }
}

/* Farming is a special activity renderer; keep it in the same visual family. */
body.skills-activities-reference-v1018 #activitiesPage .farming-dashboard { gap: 8px; }
body.skills-activities-reference-v1018 #activitiesPage .farming-dashboard-hero,
body.skills-activities-reference-v1018 #activitiesPage .farming-offline-cultivation,
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-card,
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-card,
body.skills-activities-reference-v1018 #activitiesPage .farming-seed-vault,
body.skills-activities-reference-v1018 #activitiesPage .farming-source-note {
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #050b0d;
  box-shadow: inset 0 0 0 1px #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-dashboard-hero {
  padding: 12px 13px;
  border-color: var(--jd-training-line);
  background: linear-gradient(90deg,rgba(182,121,34,.055),transparent 45%),#050b0d;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-dashboard-hero h2 { color: #e2c58e; font-family: var(--jd-serif); font-size: 20px; font-weight: 500; }
body.skills-activities-reference-v1018 #activitiesPage .farming-dashboard-hero p { color: #8f8069; font-family: var(--jd-serif); font-size: 10px; }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-count {
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-count strong { color: var(--jd-gold-4); font-family: var(--jd-serif); font-weight: 500; }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-count span { color: #7b6c56; font-family: var(--jd-serif); }
body.skills-activities-reference-v1018 #activitiesPage .farming-stat-strip { gap: 4px; }
body.skills-activities-reference-v1018 #activitiesPage .farming-stat-strip > div {
  padding: 7px 9px;
  border: 1px solid var(--jd-training-line-faint);
  border-radius: 0;
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-stat-strip small { color: #716451; font-family: var(--jd-serif); }
body.skills-activities-reference-v1018 #activitiesPage .farming-stat-strip strong { color: #c9b180; font-family: var(--jd-serif); font-weight: 500; }
body.skills-activities-reference-v1018 #activitiesPage .farming-offline-cultivation { border-color: var(--jd-training-line-faint); }
body.skills-activities-reference-v1018 #activitiesPage .farming-offline-cultivation h3 { color: #c9b180; font-family: var(--jd-serif); font-weight: 500; }
body.skills-activities-reference-v1018 #activitiesPage .farming-offline-cultivation p,
body.skills-activities-reference-v1018 #activitiesPage .farming-offline-cultivation > small { color: #857762; }
body.skills-activities-reference-v1018 #activitiesPage .farming-offline-plot-hint { border-left-color: var(--jd-gold-2); background: #030809; }
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-card { border-color: var(--jd-training-line); }
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-card.complete { border-color: rgba(119,157,55,.55); box-shadow: inset 3px 0 0 rgba(143,190,66,.55); }
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-card.milestone { background: linear-gradient(90deg,rgba(182,121,34,.09),#050b0d 48%); }
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-icon {
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-main h3,
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-head h3,
body.skills-activities-reference-v1018 #activitiesPage .farming-seed-vault h3 { color: #ddc18d; font-family: var(--jd-serif); font-weight: 500; }
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-main p,
body.skills-activities-reference-v1018 #activitiesPage .farming-growth-meta,
body.skills-activities-reference-v1018 #activitiesPage .farming-harvest-preview { color: #857762; font-family: var(--jd-serif); }
body.skills-activities-reference-v1018 #activitiesPage .farming-growth-track {
  border: 1px solid #3a2a17;
  border-radius: 0;
  background: #020607;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-growth-track > span { border-radius: 0; background: linear-gradient(90deg,#76511c,#a78632,#c4b85f); }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-grid { gap: 5px; }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-card { padding: 9px; }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-card.ready { border-color: rgba(119,157,55,.46); background: linear-gradient(90deg,rgba(74,99,31,.07),#050b0d 44%); }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-number,
body.skills-activities-reference-v1018 #activitiesPage .farming-crop-icon {
  border: 1px solid var(--jd-training-line-soft);
  border-radius: 0;
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-form select,
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-form button,
body.skills-activities-reference-v1018 #activitiesPage .farming-harvest-button,
body.skills-activities-reference-v1018 #activitiesPage .farming-stop-button,
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-actions button {
  border-radius: 0;
  font-family: var(--jd-serif);
}
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-form select { border-color: var(--jd-training-line-soft); background: #030809; color: var(--jd-text); }
body.skills-activities-reference-v1018 #activitiesPage .farming-plot-form button,
body.skills-activities-reference-v1018 #activitiesPage .farming-harvest-button:not(:disabled),
body.skills-activities-reference-v1018 #activitiesPage .farming-contract-actions button:not(:disabled) {
  border: 1px solid var(--jd-gold-1);
  background: linear-gradient(180deg,rgba(182,121,34,.13),rgba(182,121,34,.035));
  color: #e1c38a;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-seed-grid { gap: 4px; }
body.skills-activities-reference-v1018 #activitiesPage .farming-seed-chip {
  border: 1px solid var(--jd-training-line-faint);
  border-radius: 0;
  background: #030809;
}
body.skills-activities-reference-v1018 #activitiesPage .farming-seed-chip.rare { border-color: rgba(182,121,34,.37); background: rgba(76,51,17,.09); }
body.skills-activities-reference-v1018 #activitiesPage .farming-source-note { border-left: 2px solid var(--jd-gold-2); }

@media (max-width:760px) {
  body.skills-activities-reference-v1018 #activitiesPage .activity-click-card {
    grid-template-columns: 51px minmax(0,1fr) 54px;
    grid-template-areas:
      "icon main state"
      "icon time xp";
  }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat:nth-of-type(3) { grid-area: time; justify-content: flex-start; padding-left: 8px; }
  body.skills-activities-reference-v1018 #activitiesPage .activity-card-ref-stat:nth-of-type(4) { grid-area: xp; justify-content: flex-end; padding-right: 8px; }
  body.skills-activities-reference-v1018 #activitiesPage .farming-dashboard-hero,
  body.skills-activities-reference-v1018 #activitiesPage .farming-contract-card,
  body.skills-activities-reference-v1018 #activitiesPage .farming-plot-card,
  body.skills-activities-reference-v1018 #activitiesPage .farming-seed-vault { border-radius: 0 !important; }
}

/* Final phone specificity pass: phase 8 intentionally supersedes the older
   phone-only skill-card treatment while preserving touch sizing. */
@media (max-width:760px) {
  body.skills-activities-reference-v1018 #skillsPage #skillCards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card {
    display: grid !important;
    grid-template-columns: 50px minmax(0,1fr) 54px !important;
    grid-template-areas: "icon main level" "icon xp xp" !important;
    align-content: stretch !important;
    gap: 0 !important;
    min-height: 74px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card-ref-icon { grid-area: icon !important; }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card-ref-main { grid-area: main !important; padding: 6px 8px !important; }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card-ref-level { grid-area: level !important; }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card-ref-xp { grid-area: xp !important; }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card-progress {
    height: 6px !important;
    margin: 0 0 4px !important;
    border-radius: 0 !important;
  }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card [data-skill-card-next] {
    display: block !important;
    min-height: 0 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  body.skills-activities-reference-v1018 #skillsPage #skillCards .skill-card [data-skill-card-xp] { font-size: 8px !important; }
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-panel,
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-modal-card {
    width: calc(100vw - 12px) !important;
    max-width: none !important;
    max-height: 91vh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #04090b !important;
  }
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-header {
    padding: 9px 10px !important;
    border-bottom-color: var(--jd-training-line) !important;
    background: linear-gradient(90deg,rgba(182,121,34,.06),transparent 48%),#04090b !important;
  }
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-close { border-radius: 0 !important; background: transparent !important; }
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-tabs {
    gap: 3px !important;
    padding: 6px 8px !important;
    border-bottom-color: var(--jd-training-line-soft) !important;
    background: #030809 !important;
  }
  body.skills-activities-reference-v1018 #skillsPage .skill-detail-tabs button { min-height: 40px !important; border-radius: 0 !important; }
  body.skills-activities-reference-v1018 #skillsPage .skill-unlock-row { border-radius: 0 !important; }
  body.skills-activities-reference-v1018 #skillsPage .skill-xp-table-wrap { border-radius: 0 !important; }
}

@media (max-width:390px) {
  body.skills-activities-reference-v1018 #skillsPage #skillCards { grid-template-columns: 1fr !important; gap: 4px !important; }
}


/* ===== SOURCE: reference-ui-phase9.css ===== */
/* JourneyDen V1.01.9 — Combat UI Rework
   Visual target: supplied Expedition Log reference.
   Presentation-only: no combat timing, balance, XP, loot, food or save changes. */

body.combat-reference-v1019 {
  --jd-combat-deep: #030708;
  --jd-combat-panel: #050b0d;
  --jd-combat-raised: #071013;
  --jd-combat-line: rgba(182,121,34,.45);
  --jd-combat-line-soft: rgba(182,121,34,.22);
  --jd-combat-line-faint: rgba(182,121,34,.10);
}

/* =========================================================
   Combat page title — same grammar as the Expedition Log
   ========================================================= */
body.combat-reference-v1019 #combatPage > .reference-combat-heading {
  position: relative;
  min-height: 74px;
  margin: 0 0 10px;
  padding: 8px 12px 11px;
  border-bottom: 1px solid var(--jd-combat-line);
  background: linear-gradient(90deg, rgba(182,121,34,.055), transparent 43%);
}
body.combat-reference-v1019 #combatPage > .reference-combat-heading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jd-gold-1) 4%, rgba(182,121,34,.18) 70%, transparent);
}
body.combat-reference-v1019 .reference-combat-heading .reference-page-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.combat-reference-v1019 .reference-combat-heading .reference-page-heading-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid var(--jd-gold-1);
  background: #050b0d;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.18);
}
body.combat-reference-v1019 .reference-combat-heading .reference-page-heading-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: sepia(1) saturate(.9) brightness(1.12);
}
body.combat-reference-v1019 .reference-combat-heading h2 {
  margin: 0;
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: clamp(24px,2.2vw,31px);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .045em;
}
body.combat-reference-v1019 .reference-combat-heading p {
  margin: 2px 0 0;
  color: #b9a786;
  font-size: 12px;
}
body.combat-reference-v1019 .reference-combat-heading .eyebrow {
  color: #9b7440;
  font-size: 9px;
  letter-spacing: .12em;
}

/* =========================================================
   Command deck — skills + stance
   ========================================================= */
body.combat-reference-v1019 #combatPage .combat-command-deck {
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(420px,.98fr);
  gap: 9px;
  margin-bottom: 9px;
}
body.combat-reference-v1019 #combatPage .combat-skills-inline-panel,
body.combat-reference-v1019 #combatPage .combat-style-panel {
  min-width: 0;
  margin: 0;
  padding: 9px 10px 10px;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: var(--jd-combat-panel);
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.10);
}
body.combat-reference-v1019 #combatPage .combat-skills-inline-heading,
body.combat-reference-v1019 #combatPage .combat-style-heading {
  min-height: 34px;
  margin: -2px -1px 7px;
  padding: 0 3px 7px;
  border-bottom: 1px solid var(--jd-combat-line-soft);
}
body.combat-reference-v1019 #combatPage .combat-skills-inline-heading h3,
body.combat-reference-v1019 #combatPage .combat-style-heading h3,
body.combat-reference-v1019 #combatPage .combat-panel-heading h3 {
  margin: 1px 0 0;
  color: #dec08a;
  font-family: var(--jd-serif);
  font-size: 15px;
  font-weight: 500;
}
body.combat-reference-v1019 #combatPage .combat-skills-inline-heading .eyebrow,
body.combat-reference-v1019 #combatPage .combat-style-heading .eyebrow,
body.combat-reference-v1019 #combatPage .combat-panel-heading .eyebrow,
body.combat-reference-v1019 #combatPage .combat-battle-panel-heading .eyebrow {
  color: #8e734c;
  font-size: 8px;
  letter-spacing: .11em;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
  margin: 0;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #030809;
  box-shadow: none;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-main {
  grid-template-columns: 31px minmax(0,1fr) auto;
  gap: 7px;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-icon {
  width: 29px;
  height: 29px;
  border: 1px solid rgba(182,121,34,.22);
  border-radius: 0;
  background: #020607;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-copy strong {
  color: #d9be89;
  font-family: var(--jd-serif);
  font-size: 11px;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-copy span,
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-meta {
  color: #81745e;
  font-family: var(--jd-serif);
  font-size: 7px;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-level small { color: #79674c; }
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-level b { color: var(--jd-gold-4); font-family: var(--jd-serif); }
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-progress {
  height: 4px;
  margin: 6px 0 4px;
  border: 1px solid rgba(182,121,34,.16);
  border-radius: 0;
  background: #010405;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-progress span {
  background: linear-gradient(90deg,#8e5d1f,#d19b42);
}
body.combat-reference-v1019 #combatPage .combat-level-badge {
  min-width: 86px;
  min-height: 52px;
  padding: 6px 10px;
  border: 1px solid var(--jd-combat-line);
  border-radius: 0;
  background: #030809;
  text-align: center;
  display: grid;
  align-content: center;
}
body.combat-reference-v1019 #combatPage .combat-level-badge small {
  color: #7f7058;
  font-family: var(--jd-serif);
  font-size: 7px;
  letter-spacing: .08em;
}
body.combat-reference-v1019 #combatPage .combat-level-badge strong {
  color: var(--jd-gold-4);
  font-family: var(--jd-serif);
  font-size: 18px;
  font-weight: 500;
}
body.combat-reference-v1019 #combatPage .combat-style-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 5px;
}
body.combat-reference-v1019 #combatPage .combat-skill-overview-card,
body.combat-reference-v1019 #combatPage .combat-style-button {
  min-height: 74px;
}
body.combat-reference-v1019 #combatPage .combat-style-button {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #030809;
  color: #a99573;
  text-align: left;
  box-shadow: none;
}
body.combat-reference-v1019 #combatPage .combat-style-button:hover {
  border-color: rgba(182,121,34,.42);
  background: #071013;
}
body.combat-reference-v1019 #combatPage .combat-style-button.active {
  border-color: var(--jd-gold-1);
  background: linear-gradient(90deg,rgba(182,121,34,.13),rgba(182,121,34,.025));
  box-shadow: inset 3px 0 0 rgba(211,161,77,.62);
}
body.combat-reference-v1019 #combatPage .combat-style-button.active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: var(--jd-gold-3);
}
body.combat-reference-v1019 #combatPage .combat-style-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(182,121,34,.22);
  border-radius: 0;
  background: #020607;
}
body.combat-reference-v1019 #combatPage .combat-style-icon-art { width: 23px; height: 23px; object-fit: contain; }
body.combat-reference-v1019 #combatPage .combat-style-copy {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
}
body.combat-reference-v1019 #combatPage .combat-style-button strong {
  color: #d9be89;
  font-family: var(--jd-serif);
  font-size: 11px;
  font-weight: 500;
}
body.combat-reference-v1019 #combatPage .combat-style-button small {
  color: #81745e;
  font-family: var(--jd-serif);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.combat-reference-v1019 #combatPage .combat-style-button span {
  color: #b68f53;
  font-family: var(--jd-serif);
  font-size: 8px;
}
body.combat-reference-v1019 #combatPage .combat-style-button b {
  margin-top: 1px;
  color: #81745e;
  font-family: var(--jd-serif);
  font-size: 7px;
  font-weight: 500;
}

/* =========================================================
   Primary Combat layout — roster / encounter / supplies
   ========================================================= */
body.combat-reference-v1019 #combatPage .combat-layout-v2 {
  display: grid;
  grid-template-columns: 252px minmax(360px,1fr) 294px;
  gap: 9px;
  align-items: start;
}
body.combat-reference-v1019 #combatPage .combat-roster-panel,
body.combat-reference-v1019 #combatPage .combat-battle-panel,
body.combat-reference-v1019 #combatPage .combat-food-panel-v2,
body.combat-reference-v1019 #combatPage .combat-session-panel {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--jd-gold-1);
  border-radius: 0;
  background: var(--jd-combat-panel);
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182,121,34,.10);
}
body.combat-reference-v1019 #combatPage .combat-panel-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  margin: -1px 0 7px;
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--jd-combat-line-soft);
}
body.combat-reference-v1019 #combatPage .combat-panel-kicker {
  color: #786a55;
  font-family: var(--jd-serif);
  font-size: 8px;
  white-space: nowrap;
}

/* Enemy roster */
body.combat-reference-v1019 #combatPage .combat-enemy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 610px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #76501f #020607;
}
body.combat-reference-v1019 #combatPage .combat-enemy-card {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 62px;
  padding: 5px 7px 5px 5px;
  border: 1px solid rgba(182,121,34,.17);
  border-radius: 0;
  background: #030809;
  color: #bba783;
  text-align: left;
  box-shadow: none;
}
body.combat-reference-v1019 #combatPage .combat-enemy-card:hover:not(:disabled) {
  border-color: rgba(182,121,34,.42);
  background: #071013;
}
body.combat-reference-v1019 #combatPage .combat-enemy-card.active {
  border-color: var(--jd-gold-1);
  background: linear-gradient(90deg,rgba(182,121,34,.13),rgba(182,121,34,.02));
  box-shadow: inset 3px 0 0 rgba(211,161,77,.66);
}
body.combat-reference-v1019 #combatPage .combat-enemy-card.locked {
  opacity: .48;
  filter: saturate(.45);
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.24);
  border-radius: 0;
  background: #020607;
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
body.combat-reference-v1019 #combatPage .combat-enemy-copy strong {
  color: #d8bd87;
  font-family: var(--jd-serif);
  font-size: 11px;
  font-weight: 500;
}
body.combat-reference-v1019 #combatPage .combat-enemy-copy small {
  margin-top: 2px;
  color: #80725d;
  font-family: var(--jd-serif);
  font-size: 7px;
}
body.combat-reference-v1019 #combatPage .combat-enemy-state {
  display: inline-block;
  margin-top: 4px;
  color: #9b7a48;
  font-family: var(--jd-serif);
  font-size: 7px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
body.combat-reference-v1019 #combatPage .combat-enemy-card.active .combat-enemy-state { color: #9fca59; }
body.combat-reference-v1019 #combatPage .combat-enemy-card.locked .combat-enemy-state { color: #8a695e; }
body.combat-reference-v1019 #combatPage .combat-enemy-xp {
  display: grid;
  gap: 2px;
  min-width: 48px;
  color: #b89153;
  font-family: var(--jd-serif);
  text-align: right;
}
body.combat-reference-v1019 #combatPage .combat-enemy-xp b { color: #cfa762; font-size: 8px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-enemy-xp small { color: #7e6b4e; font-size: 7px; }

/* Encounter panel */
body.combat-reference-v1019 #combatPage .combat-battle-panel {
  min-height: 555px;
}
body.combat-reference-v1019 #combatPage .combat-battle-panel-heading {
  display: grid;
  gap: 1px;
  min-height: 42px;
  margin: -1px 0 8px;
  padding: 0 2px 7px;
  border-bottom: 1px solid var(--jd-combat-line-soft);
}
body.combat-reference-v1019 #combatPage .combat-battle-panel-heading strong {
  color: #dec18c;
  font-family: var(--jd-serif);
  font-size: 15px;
  font-weight: 500;
}
body.combat-reference-v1019 #combatPage .combat-battle-view {
  min-height: 488px;
  justify-content: stretch;
}
body.combat-reference-v1019 #combatPage .combat-idle-panel {
  display: grid;
  align-content: center;
  gap: 9px;
  min-height: 480px;
  padding: 18px 14px;
  border: 1px solid rgba(182,121,34,.13);
  background:
    radial-gradient(circle at 50% 32%,rgba(84,105,85,.08),transparent 16rem),
    #030809;
}
body.combat-reference-v1019 #combatPage .combat-idle-title {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: rgba(182,121,34,.025);
}
body.combat-reference-v1019 #combatPage .combat-idle-crest {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid var(--jd-gold-1);
  background: #020607;
  box-shadow: inset 0 0 0 3px #050b0d, inset 0 0 0 4px rgba(182,121,34,.14);
}
body.combat-reference-v1019 #combatPage .combat-player-crest-art { width: 40px; height: 40px; object-fit: contain; }
body.combat-reference-v1019 #combatPage .combat-idle-title small,
body.combat-reference-v1019 #combatPage .combat-idle-title strong,
body.combat-reference-v1019 #combatPage .combat-idle-title b { display: block; font-family: var(--jd-serif); }
body.combat-reference-v1019 #combatPage .combat-idle-title small { color: #846e4e; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
body.combat-reference-v1019 #combatPage .combat-idle-title strong { color: #dfc28d; font-size: 18px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-idle-title b { margin-top: 3px; color: #81745f; font-size: 9px; font-weight: 400; }
body.combat-reference-v1019 #combatPage .combat-idle-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 4px;
}
body.combat-reference-v1019 #combatPage .combat-idle-stats > div {
  padding: 8px 5px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #020607;
  text-align: center;
}
body.combat-reference-v1019 #combatPage .combat-idle-stats small,
body.combat-reference-v1019 #combatPage .combat-idle-stats strong,
body.combat-reference-v1019 #combatPage .combat-idle-stats span { display: block; font-family: var(--jd-serif); }
body.combat-reference-v1019 #combatPage .combat-idle-stats small { color: #756750; font-size: 7px; text-transform: uppercase; }
body.combat-reference-v1019 #combatPage .combat-idle-stats strong { color: #ddc18d; font-size: 17px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-idle-stats span { margin-top: 2px; color: #665d4e; font-size: 7px; }
body.combat-reference-v1019 #combatPage .combat-selected-food-summary {
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #030809;
}
body.combat-reference-v1019 #combatPage .combat-selected-food-summary > span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(182,121,34,.20);
  background: #020607;
}
body.combat-reference-v1019 #combatPage .combat-empty-supply { color: #806a49; font-size: 22px; }
body.combat-reference-v1019 #combatPage .combat-selected-food-summary small { color: #766750; font-family: var(--jd-serif); }
body.combat-reference-v1019 #combatPage .combat-selected-food-summary strong { color: #d8bb84; font-family: var(--jd-serif); font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-selected-food-summary b { color: #a98450; font-family: var(--jd-serif); font-weight: 500; }

body.combat-reference-v1019 #combatPage .combat-encounter-record {
  display: grid;
  gap: 8px;
  min-height: 480px;
}
body.combat-reference-v1019 #combatPage .combat-battle-clean {
  display: grid;
  grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr);
  gap: 7px;
  align-items: stretch;
}
body.combat-reference-v1019 #combatPage .combat-fighter-clean {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #030809;
}
body.combat-reference-v1019 #combatPage .combat-fighter-clean.enemy { background: #020607; }
body.combat-reference-v1019 #combatPage .combat-fighter-portrait {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 150px;
  margin-bottom: 7px;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.27);
  background:
    radial-gradient(circle at 50% 42%,rgba(182,121,34,.10),transparent 56%),
    #020607;
}
body.combat-reference-v1019 #combatPage .combat-fighter-portrait > small {
  position: absolute;
  left: 7px;
  bottom: 5px;
  color: #77684e;
  font-family: var(--jd-serif);
  font-size: 7px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
body.combat-reference-v1019 #combatPage .combat-player-portrait > span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid var(--jd-gold-1);
  background: rgba(3,8,9,.82);
  box-shadow: inset 0 0 0 4px #020607, 0 0 28px rgba(182,121,34,.08);
}
body.combat-reference-v1019 #combatPage .combat-player-portrait .combat-player-crest-art { width: 42px; height: 42px; }
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span { width: 100%; height: 100%; display: block; }
body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
  width: 100%;
  height: 100%;
  max-height: 194px;
  object-fit: cover;
  object-position: center;
}
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--jd-combat-line-faint);
}
body.combat-reference-v1019 #combatPage .combat-fighter-seal { color: #9f7538; font-size: 10px; text-align: center; }
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head small,
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head strong,
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head b { display: block; font-family: var(--jd-serif); }
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head small { color: #756953; font-size: 7px; }
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head strong { color: #dfc18a; font-size: 13px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-fighter-clean-head b { margin-top: 1px; color: #a27f49; font-size: 7px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-health-line { color: #8e8069; font-family: var(--jd-serif); font-size: 8px; }
body.combat-reference-v1019 #combatPage .combat-health-line strong { color: #ccb382; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-health-bar {
  height: 7px;
  margin: 4px 0 7px;
  border: 1px solid rgba(182,121,34,.14);
  border-radius: 0;
  background: #010405;
}
body.combat-reference-v1019 #combatPage .combat-health-bar span { background: linear-gradient(90deg,#713126,#ad5039); }
body.combat-reference-v1019 #combatPage .combat-health-bar.enemy span { background: linear-gradient(90deg,#70291f,#a94634); }
body.combat-reference-v1019 #combatPage .combat-attack-timer { margin: 0 0 7px; }
body.combat-reference-v1019 #combatPage .combat-attack-timer small { color: #71634f; font-family: var(--jd-serif); font-size: 7px; }
body.combat-reference-v1019 #combatPage .combat-progress-track {
  height: 5px;
  margin-top: 3px;
  border: 1px solid rgba(182,121,34,.14);
  border-radius: 0;
  background: #010405;
}
body.combat-reference-v1019 #combatPage .combat-progress-fill { background: linear-gradient(90deg,#72501f,#c08d3d); }
body.combat-reference-v1019 #combatPage .combat-progress-fill.enemy { background: linear-gradient(90deg,#68382b,#b66a43); }
body.combat-reference-v1019 #combatPage .combat-clean-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 3px;
}
body.combat-reference-v1019 #combatPage .combat-clean-stats span {
  display: grid;
  gap: 1px;
  padding: 5px 3px;
  border: 1px solid rgba(182,121,34,.12);
  border-radius: 0;
  background: #020607;
  color: #716551;
  font-family: var(--jd-serif);
  text-align: center;
}
body.combat-reference-v1019 #combatPage .combat-clean-stats small { color: #6c604e; font-size: 6px; text-transform: uppercase; }
body.combat-reference-v1019 #combatPage .combat-clean-stats b { color: #ceb382; font-size: 11px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-vs-clean {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--jd-gold-1);
  background: #030809;
  color: var(--jd-gold-3);
  font-family: var(--jd-serif);
  font-size: 9px;
  transform: rotate(45deg);
}
body.combat-reference-v1019 #combatPage .combat-vs-clean > span { transform: rotate(-45deg); }
body.combat-reference-v1019 #combatPage .combat-encounter-footer {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 6px 10px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--jd-combat-line-soft);
  background: #020607;
  font-family: var(--jd-serif);
}
body.combat-reference-v1019 #combatPage .combat-encounter-footer span { color: #756750; font-size: 7px; text-transform: uppercase; }
body.combat-reference-v1019 #combatPage .combat-encounter-footer strong { color: #c7a263; font-size: 9px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-bottom-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 7px;
  margin-top: 0;
}
body.combat-reference-v1019 #combatPage .combat-repeat-note {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: rgba(182,121,34,.025);
}
body.combat-reference-v1019 #combatPage .combat-repeat-note > span { color: #b68a44; font-size: 16px; }
body.combat-reference-v1019 #combatPage .combat-repeat-note strong,
body.combat-reference-v1019 #combatPage .combat-repeat-note small { display: block; font-family: var(--jd-serif); }
body.combat-reference-v1019 #combatPage .combat-repeat-note strong { color: #bda273; font-size: 8px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-repeat-note small { color: #716653; font-size: 7px; }
body.combat-reference-v1019 #combatPage .combat-stop-button {
  align-self: stretch;
  min-width: 108px;
  margin: 0;
  border: 1px solid #8f5e20;
  border-radius: 0;
  background: linear-gradient(180deg,rgba(143,94,32,.18),rgba(143,94,32,.05)),#050b0d;
  color: #e0bb75;
  font-family: var(--jd-serif);
  font-weight: 600;
}

/* =========================================================
   Supplies + session ledger
   ========================================================= */
body.combat-reference-v1019 #combatPage .combat-side-panel { display: grid; gap: 9px; min-width: 0; }
body.combat-reference-v1019 #combatPage .combat-side-help {
  margin: -1px 1px 7px;
  color: #746954;
  font-family: var(--jd-serif);
  font-size: 8px;
  line-height: 1.35;
}
body.combat-reference-v1019 #combatPage #combatAutoEatControl,
body.combat-reference-v1019 #combatPage .combat-selected-food-large > button {
  min-height: 29px;
  padding: 4px 7px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #020607;
  color: #a98a55;
  font-family: var(--jd-serif);
  font-size: 8px;
}
body.combat-reference-v1019 #combatPage #combatAutoEatControl.active {
  border-color: #708d36;
  color: #9fc75b;
  background: rgba(93,122,43,.08);
}
body.combat-reference-v1019 #combatPage .combat-selected-food-large,
body.combat-reference-v1019 #combatPage .combat-selected-food-empty {
  min-height: 58px;
  padding: 7px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #030809;
}
body.combat-reference-v1019 #combatPage .combat-selected-food-large > span,
body.combat-reference-v1019 #combatPage .combat-selected-food-empty > span,
body.combat-reference-v1019 #combatPage .combat-food-choice-icon,
body.combat-reference-v1019 #combatPage .combat-session-summary-icon {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.16);
  background: #020607;
}
body.combat-reference-v1019 #combatPage .combat-selected-food-large > span,
body.combat-reference-v1019 #combatPage .combat-selected-food-empty > span { width: 40px; height: 40px; }
body.combat-reference-v1019 #combatPage .combat-food-grid-v2 {
  display: grid;
  gap: 3px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 2px;
}
body.combat-reference-v1019 #combatPage .combat-food-choice {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 7px;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid rgba(182,121,34,.13);
  border-radius: 0;
  background: #030809;
  color: #ad9a7a;
}
body.combat-reference-v1019 #combatPage .combat-food-choice.selected {
  border-color: var(--jd-gold-1);
  background: rgba(182,121,34,.08);
  box-shadow: inset 2px 0 0 rgba(211,161,77,.55);
}
body.combat-reference-v1019 #combatPage .combat-food-choice-icon { width: 32px; height: 32px; }
body.combat-reference-v1019 #combatPage .combat-food-choice strong { color: #cbb083; font-family: var(--jd-serif); font-size: 9px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-food-choice small { color: #746954; font-family: var(--jd-serif); font-size: 7px; }
body.combat-reference-v1019 #combatPage .combat-food-choice > b { color: #a98249; font-family: var(--jd-serif); font-size: 7px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-session-heading-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}
body.combat-reference-v1019 #combatPage .combat-session-heading-meta strong {
  padding: 3px 5px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #020607;
  color: #bf995b;
  font-family: var(--jd-serif);
  font-size: 7px;
  font-weight: 500;
}
body.combat-reference-v1019 #combatPage .combat-session-xp {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 3px;
  margin: 0 0 6px;
}
body.combat-reference-v1019 #combatPage .combat-session-xp > div {
  padding: 5px 3px;
  border: 1px solid rgba(182,121,34,.13);
  border-radius: 0;
  background: #020607;
  text-align: center;
}
body.combat-reference-v1019 #combatPage .combat-session-xp small { color: #6e6250; font-family: var(--jd-serif); font-size: 6px; }
body.combat-reference-v1019 #combatPage .combat-session-xp strong { color: #c89e59; font-family: var(--jd-serif); font-size: 9px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-session-loot {
  display: grid;
  gap: 3px;
  max-height: 250px;
  margin-top: 4px;
  overflow-y: auto;
}
body.combat-reference-v1019 #combatPage .combat-session-summary-row {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 4px 6px;
  border: 1px solid rgba(182,121,34,.13);
  border-radius: 0;
  background: #030809;
}
body.combat-reference-v1019 #combatPage .combat-session-summary-icon { width: 32px; height: 32px; }
body.combat-reference-v1019 #combatPage .combat-session-summary-copy strong,
body.combat-reference-v1019 #combatPage .combat-session-summary-amount strong { color: #c9ae7f; font-family: var(--jd-serif); font-size: 8px; font-weight: 500; }
body.combat-reference-v1019 #combatPage .combat-session-summary-copy small,
body.combat-reference-v1019 #combatPage .combat-session-summary-amount small { color: #6f6452; font-family: var(--jd-serif); font-size: 7px; }
body.combat-reference-v1019 #combatPage .combat-session-empty {
  padding: 10px;
  border: 1px dashed rgba(182,121,34,.18);
  border-radius: 0;
  color: #736957;
  background: #020607;
  font-family: var(--jd-serif);
  font-size: 8px;
}
body.combat-reference-v1019 #combatPage .combat-last-loot {
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #020607;
}

/* =========================================================
   Responsive: keep the established phone interaction behavior
   ========================================================= */
@media (max-width: 1260px) {
  body.combat-reference-v1019 #combatPage .combat-command-deck { grid-template-columns: 1fr; }
  body.combat-reference-v1019 #combatPage .combat-layout-v2 { grid-template-columns: 238px minmax(0,1fr); }
  body.combat-reference-v1019 #combatPage .combat-side-panel {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage > .reference-combat-heading {
    min-height: 54px;
    margin-bottom: 7px;
    padding: 5px 6px 7px;
  }
  body.combat-reference-v1019 #combatPage .reference-combat-heading .reference-page-heading-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  body.combat-reference-v1019 #combatPage .reference-combat-heading .reference-page-heading-icon img { width: 24px; height: 24px; }
  body.combat-reference-v1019 #combatPage .reference-combat-heading h2 { font-size: 20px; }
  body.combat-reference-v1019 #combatPage .reference-combat-heading p { display: none; }

  body.combat-reference-v1019 #combatPage .combat-command-deck { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 6px; }
  body.combat-reference-v1019 #combatPage .combat-skills-inline-panel,
  body.combat-reference-v1019 #combatPage .combat-style-panel,
  body.combat-reference-v1019 #combatPage .combat-roster-panel,
  body.combat-reference-v1019 #combatPage .combat-battle-panel,
  body.combat-reference-v1019 #combatPage .combat-food-panel-v2,
  body.combat-reference-v1019 #combatPage .combat-session-panel {
    padding: 6px !important;
    border-radius: 0 !important;
  }
  body.combat-reference-v1019 #combatPage .combat-skills-inline-heading { display: none; }
  body.combat-reference-v1019 #combatPage .combat-skill-overview-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 4px !important; }
  body.combat-reference-v1019 #combatPage .combat-skill-overview-card { padding: 5px !important; }
  body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-copy span,
  body.combat-reference-v1019 #combatPage .combat-skill-overview-card .skill-overview-meta { display: none; }

  body.combat-reference-v1019 #combatPage .combat-style-heading { margin-bottom: 5px; padding-bottom: 5px; }
  body.combat-reference-v1019 #combatPage .combat-style-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 4px !important; }
  body.combat-reference-v1019 #combatPage .combat-style-button {
    grid-template-columns: 27px minmax(0,1fr) !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 49px !important;
    padding: 5px !important;
    border-radius: 0 !important;
  }
  body.combat-reference-v1019 #combatPage .combat-style-button small { display: none !important; }

  body.combat-reference-v1019 #combatPage .combat-layout-v2 {
    display: flex !important;
    flex-direction: column;
    gap: 6px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-battle-panel { order: 1; min-height: 0; }
  body.combat-reference-v1019 #combatPage .combat-roster-panel { order: 2; }
  body.combat-reference-v1019 #combatPage .combat-side-panel { order: 3; grid-column: auto; grid-template-columns: 1fr !important; gap: 6px !important; }
  body.combat-reference-v1019 #combatPage .combat-battle-panel-heading { min-height: 34px; margin-bottom: 5px; padding-bottom: 5px; }
  body.combat-reference-v1019 #combatPage .combat-battle-view { min-height: 0; }
  body.combat-reference-v1019 #combatPage .combat-idle-panel { min-height: 250px; padding: 8px; }
  body.combat-reference-v1019 #combatPage .combat-idle-title { grid-template-columns: 50px minmax(0,1fr); padding: 7px; }
  body.combat-reference-v1019 #combatPage .combat-idle-crest { width: 48px; height: 48px; }
  body.combat-reference-v1019 #combatPage .combat-idle-crest .combat-player-crest-art { width: 29px; height: 29px; }
  body.combat-reference-v1019 #combatPage .combat-idle-title strong { font-size: 13px; }
  body.combat-reference-v1019 #combatPage .combat-idle-title b { font-size: 7px; }
  body.combat-reference-v1019 #combatPage .combat-idle-stats { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 3px !important; }
  body.combat-reference-v1019 #combatPage .combat-idle-stats > div { padding: 5px 2px !important; }
  body.combat-reference-v1019 #combatPage .combat-idle-stats span { display: none; }

  body.combat-reference-v1019 #combatPage .combat-enemy-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 4px !important;
    max-height: none;
    overflow: visible !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-card {
    grid-template-columns: 40px minmax(0,1fr) !important;
    grid-template-areas: "icon copy" "xp xp" !important;
    gap: 3px 6px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 68px !important;
    padding: 4px !important;
    border-radius: 0 !important;
  }
  body.combat-reference-v1019 #combatPage .combat-roster-portrait { grid-area: icon; width: 39px; height: 39px; }
  body.combat-reference-v1019 #combatPage .combat-enemy-copy { grid-area: copy; }
  body.combat-reference-v1019 #combatPage .combat-enemy-copy small { white-space: normal; }
  body.combat-reference-v1019 #combatPage .combat-enemy-state { font-size: 6px; }
  body.combat-reference-v1019 #combatPage .combat-enemy-xp {
    grid-area: xp;
    display: flex;
    justify-content: space-between;
    max-width: none;
    width: 100%;
    padding-top: 3px;
    border-top: 1px solid rgba(182,121,34,.08);
    text-align: left;
  }

  body.combat-reference-v1019 #combatPage .combat-encounter-record { min-height: 0; }
  body.combat-reference-v1019 #combatPage .combat-battle-clean { grid-template-columns: minmax(0,1fr) 25px minmax(0,1fr) !important; gap: 4px; }
  body.combat-reference-v1019 #combatPage .combat-fighter-clean { padding: 5px !important; border-radius: 0 !important; }
  body.combat-reference-v1019 #combatPage .combat-fighter-portrait { min-height: 88px; margin-bottom: 5px; }
  body.combat-reference-v1019 #combatPage .combat-player-portrait > span { width: 48px; height: 48px; }
  body.combat-reference-v1019 #combatPage .combat-player-portrait .combat-player-crest-art { width: 29px; height: 29px; }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art { max-height: 120px; }
  body.combat-reference-v1019 #combatPage .combat-fighter-clean-head { grid-template-columns: 13px minmax(0,1fr); gap: 4px; padding-bottom: 4px; margin-bottom: 5px; }
  body.combat-reference-v1019 #combatPage .combat-fighter-clean-head strong { font-size: 10px; }
  body.combat-reference-v1019 #combatPage .combat-fighter-clean-head b { font-size: 6px; }
  body.combat-reference-v1019 #combatPage .combat-clean-stats span { padding: 3px 1px; }
  body.combat-reference-v1019 #combatPage .combat-clean-stats small { display: none; }
  body.combat-reference-v1019 #combatPage .combat-clean-stats b { font-size: 9px; }
  body.combat-reference-v1019 #combatPage .combat-vs-clean { width: 23px; height: 23px; font-size: 7px; }
  body.combat-reference-v1019 #combatPage .combat-encounter-footer { grid-template-columns: auto 1fr auto 1fr; padding: 5px 6px; }
  body.combat-reference-v1019 #combatPage .combat-bottom-actions { grid-template-columns: minmax(0,1fr) auto !important; gap: 4px !important; }
  body.combat-reference-v1019 #combatPage .combat-repeat-note { padding: 5px; }
  body.combat-reference-v1019 #combatPage .combat-repeat-note small { display: none; }
  body.combat-reference-v1019 #combatPage .combat-stop-button { min-width: 92px; min-height: 42px; border-radius: 0; }

  body.combat-reference-v1019 #combatPage .combat-mobile-fold { border-radius: 0; background: #020607; }
  body.combat-reference-v1019 #combatPage .combat-food-choice,
  body.combat-reference-v1019 #combatPage .combat-selected-food-large,
  body.combat-reference-v1019 #combatPage .combat-selected-food-empty,
  body.combat-reference-v1019 #combatPage .combat-session-summary-row,
  body.combat-reference-v1019 #combatPage .combat-session-heading-meta strong { border-radius: 0; }
}

@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-battle-clean { grid-template-columns: minmax(0,1fr) !important; }
  body.combat-reference-v1019 #combatPage .combat-vs-clean {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 14px;
    border: 0;
    background: transparent;
    transform: none;
  }
  body.combat-reference-v1019 #combatPage .combat-vs-clean > span { transform: none; }
  body.combat-reference-v1019 #combatPage .combat-vs-clean::before,
  body.combat-reference-v1019 #combatPage .combat-vs-clean::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: var(--jd-combat-line-soft);
  }
  body.combat-reference-v1019 #combatPage .combat-fighter-portrait { min-height: 104px; }
  body.combat-reference-v1019 #combatPage .combat-bottom-actions { grid-template-columns: 1fr !important; }
  body.combat-reference-v1019 #combatPage .combat-stop-button { width: 100%; }
}


/* ===== SOURCE: reference-ui-phase10.css ===== */
/* JourneyDen V1.01.10 — Expedition Log & Collections
   Reference target: dense dark-gold RPG journal, two-panel expedition dossier,
   discovery silhouettes, boss records, and shared expedition collections. */

body.expedition-collections-reference-v10110 {
  --exp10-bg: #071015;
  --exp10-bg-2: #0a1419;
  --exp10-panel: rgba(8, 17, 21, .96);
  --exp10-panel-2: rgba(11, 22, 27, .94);
  --exp10-gold: #b57b28;
  --exp10-gold-bright: #d6a34d;
  --exp10-gold-soft: #8c6128;
  --exp10-line: rgba(181, 123, 40, .55);
  --exp10-line-soft: rgba(181, 123, 40, .24);
  --exp10-text: #ead7ac;
  --exp10-muted: #a99570;
  --exp10-green: #8bbd39;
  --exp10-red: #b35f4f;
}

body.expedition-collections-reference-v10110 #expeditionsPage,
body.expedition-collections-reference-v10110 #achievementsPage {
  color: var(--exp10-text);
}

body.expedition-collections-reference-v10110 .expedition-log-page-heading {
  margin: 0 0 12px;
  padding: 10px 14px 12px;
  border: 1px solid var(--exp10-line);
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(17, 31, 35, .98), rgba(6, 15, 19, .98)),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(214,163,77,.02) 24px 25px);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), inset 0 -1px 0 rgba(214,163,77,.12);
  position: relative;
}

body.expedition-collections-reference-v10110 .expedition-log-page-heading::before,
body.expedition-collections-reference-v10110 .expedition-log-page-heading::after,
body.expedition-collections-reference-v10110 .expedition-log-list-panel::before,
body.expedition-collections-reference-v10110 .exp-log-detail-shell::before,
body.expedition-collections-reference-v10110 .collection-expedition-ledger-section::before {
  content: "✦";
  position: absolute;
  color: var(--exp10-gold-bright);
  font-size: 10px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(181,123,40,.45);
  z-index: 2;
}
body.expedition-collections-reference-v10110 .expedition-log-page-heading::before { left: 5px; top: 5px; }
body.expedition-collections-reference-v10110 .expedition-log-page-heading::after { right: 5px; bottom: 5px; transform: rotate(180deg); }

body.expedition-collections-reference-v10110 .expedition-log-page-heading .reference-page-heading-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--exp10-gold-soft);
  border-radius: 0;
  background: #0a1519;
  box-shadow: inset 0 0 0 2px rgba(181,123,40,.08);
}
body.expedition-collections-reference-v10110 .expedition-log-page-heading .reference-page-heading-icon img {
  width: 27px;
  height: 27px;
  filter: sepia(1) saturate(.8) hue-rotate(355deg) brightness(1.18);
}
body.expedition-collections-reference-v10110 .expedition-log-page-heading h2 {
  color: var(--exp10-gold-bright);
  letter-spacing: .045em;
  font-size: clamp(22px, 2vw, 30px);
}
body.expedition-collections-reference-v10110 .expedition-log-page-heading p { color: var(--exp10-muted); }
body.expedition-collections-reference-v10110 .expedition-log-page-heading .combat-level-badge {
  border-radius: 0;
  border: 1px solid var(--exp10-line);
  background: #081217;
  min-width: 108px;
}

body.expedition-collections-reference-v10110 .expedition-log-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, .92fr) minmax(520px, 1.08fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body.expedition-collections-reference-v10110 .expedition-log-list-panel,
body.expedition-collections-reference-v10110 .expedition-log-detail-panel {
  min-width: 0;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.expedition-collections-reference-v10110 .expedition-log-list-panel {
  position: relative;
  border: 1px solid var(--exp10-line) !important;
  background: linear-gradient(180deg, #0a1519, #071015) !important;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.27);
  padding: 10px !important;
}
body.expedition-collections-reference-v10110 .expedition-log-list-panel::before { left: 4px; top: 4px; }

body.expedition-collections-reference-v10110 .expedition-log-region-grid {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.expedition-collections-reference-v10110 .exp-log-list-head,
body.expedition-collections-reference-v10110 .collection-expedition-ledger-heading,
body.expedition-collections-reference-v10110 .exp-log-subsection-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
body.expedition-collections-reference-v10110 .exp-log-list-head {
  padding: 5px 6px 9px;
  border-bottom: 1px solid var(--exp10-line-soft);
}
body.expedition-collections-reference-v10110 .exp-log-list-head h3,
body.expedition-collections-reference-v10110 .exp-log-subsection-title h3,
body.expedition-collections-reference-v10110 .collection-expedition-ledger-heading h3 {
  margin: 2px 0 0;
  color: var(--exp10-gold-bright);
  font-size: 16px;
  letter-spacing: .04em;
}
body.expedition-collections-reference-v10110 .exp-log-list-head > span,
body.expedition-collections-reference-v10110 .exp-log-subsection-title > span,
body.expedition-collections-reference-v10110 .collection-expedition-ledger-heading > span {
  color: var(--exp10-muted);
  font-size: 10px;
  text-align: right;
}

body.expedition-collections-reference-v10110 .exp-log-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 9px 0 10px;
}
body.expedition-collections-reference-v10110 .exp-log-filter-tabs button,
body.expedition-collections-reference-v10110 .exp-log-detail-tabs button {
  min-height: 34px;
  border: 1px solid rgba(181,123,40,.28);
  border-radius: 0 !important;
  background: #091419;
  color: #bba77d;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: .065em;
  font-size: 10px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);
}
body.expedition-collections-reference-v10110 .exp-log-filter-tabs button:hover,
body.expedition-collections-reference-v10110 .exp-log-detail-tabs button:hover {
  border-color: var(--exp10-gold-soft);
  color: var(--exp10-gold-bright);
}
body.expedition-collections-reference-v10110 .exp-log-filter-tabs button.active,
body.expedition-collections-reference-v10110 .exp-log-detail-tabs button.active {
  color: #f0cc82;
  border-color: var(--exp10-gold-bright);
  background: linear-gradient(180deg, rgba(92,61,24,.42), rgba(25,24,18,.82));
  box-shadow: inset 0 -2px 0 var(--exp10-gold-bright), 0 0 10px rgba(181,123,40,.08);
}

body.expedition-collections-reference-v10110 .exp-log-region-list {
  display: grid;
  gap: 8px;
}
body.expedition-collections-reference-v10110 .exp-log-region-card {
  width: 100%;
  min-height: 142px;
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  border: 1px solid rgba(181,123,40,.34) !important;
  border-radius: 0 !important;
  overflow: hidden;
  background: linear-gradient(180deg, #0d191d, #081216) !important;
  color: var(--exp10-text);
  text-align: left;
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.28);
}
body.expedition-collections-reference-v10110 .exp-log-region-card:hover {
  border-color: var(--exp10-gold-soft) !important;
  transform: none !important;
  background: linear-gradient(180deg, #101e22, #091519) !important;
}
body.expedition-collections-reference-v10110 .exp-log-region-card.selected {
  border-color: var(--exp10-gold-bright) !important;
  box-shadow: inset 0 0 0 2px rgba(214,163,77,.12), 0 0 12px rgba(181,123,40,.07);
}
body.expedition-collections-reference-v10110 .exp-log-region-card.completed .exp-log-card-title em { color: var(--exp10-green); border-color: rgba(139,189,57,.45); }
body.expedition-collections-reference-v10110 .exp-log-region-card.locked { opacity: .68; }
body.expedition-collections-reference-v10110 .exp-log-region-art {
  display: block;
  min-height: 140px;
  background-position: center;
  background-size: cover;
  image-rendering: auto;
  border-right: 1px solid var(--exp10-line-soft);
  position: relative;
}
body.expedition-collections-reference-v10110 .exp-log-region-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 45%, rgba(5,13,16,.72)), linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28));
}
body.expedition-collections-reference-v10110 .exp-log-region-main {
  padding: 13px 14px 11px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body.expedition-collections-reference-v10110 .exp-log-card-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}
body.expedition-collections-reference-v10110 .exp-log-card-title strong {
  color: #e5c47c;
  font-size: 17px;
  line-height: 1.1;
}
body.expedition-collections-reference-v10110 .exp-log-card-title em {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: #8fa1ad;
  border: 1px solid rgba(128,154,170,.36);
  background: rgba(11,19,23,.65);
  font-style: normal;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body.expedition-collections-reference-v10110 .exp-log-region-main > small {
  margin-top: 4px;
  color: var(--exp10-muted);
  font-size: 11px;
}
body.expedition-collections-reference-v10110 .exp-log-card-stats {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  font-size: 9px;
  color: #a99268;
}
body.expedition-collections-reference-v10110 .exp-log-card-stats span { display: flex; flex-direction: column; gap: 2px; }
body.expedition-collections-reference-v10110 .exp-log-card-stats b { color: #ddc28d; font-size: 11px; }
body.expedition-collections-reference-v10110 .exp-log-card-progress,
body.expedition-collections-reference-v10110 .collection-expedition-progress {
  display: block;
  height: 6px;
  margin-top: 7px;
  background: #03090c;
  border: 1px solid rgba(181,123,40,.26);
  overflow: hidden;
}
body.expedition-collections-reference-v10110 .exp-log-card-progress i,
body.expedition-collections-reference-v10110 .collection-expedition-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #81581e, #d19b42);
}
body.expedition-collections-reference-v10110 .exp-log-lock-note {
  position: absolute;
  left: 9px;
  bottom: 8px;
  padding: 3px 6px;
  background: rgba(3,8,10,.84);
  border: 1px solid rgba(181,123,40,.3);
  color: #c0aa7d;
  font-size: 8px;
}
body.expedition-collections-reference-v10110 .exp-log-empty-filter {
  padding: 22px;
  color: var(--exp10-muted);
  text-align: center;
  border: 1px dashed var(--exp10-line-soft);
}
body.expedition-collections-reference-v10110 .exp-log-next-chapter {
  margin-top: 10px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(181,123,40,.22);
  background: rgba(5,12,15,.68);
  color: #82775f;
}
body.expedition-collections-reference-v10110 .exp-log-next-chapter > span { font-size: 24px; filter: grayscale(1); opacity: .7; }
body.expedition-collections-reference-v10110 .exp-log-next-chapter strong { display: block; color: #a4926d; font-size: 12px; }
body.expedition-collections-reference-v10110 .exp-log-next-chapter small { display: block; margin-top: 3px; font-size: 9px; }

/* Detail dossier */
body.expedition-collections-reference-v10110 .exp-log-detail-shell {
  min-height: 100%;
  position: relative;
  border: 1px solid var(--exp10-line);
  border-radius: 0 !important;
  background: linear-gradient(180deg, #091419, #061014);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.28);
  padding: 10px;
}
body.expedition-collections-reference-v10110 .exp-log-detail-shell::before { left: 4px; top: 4px; }
body.expedition-collections-reference-v10110 .exp-log-detail-head {
  display: grid;
  grid-template-columns: 165px minmax(0,1fr);
  gap: 17px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--exp10-line-soft);
}
body.expedition-collections-reference-v10110 .exp-log-detail-art {
  min-height: 155px;
  border: 1px solid var(--exp10-gold-soft);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35);
}
body.expedition-collections-reference-v10110 .exp-log-detail-copy h2 {
  margin: 2px 0 10px;
  color: var(--exp10-gold-bright);
  font-size: 25px;
  letter-spacing: .04em;
}
body.expedition-collections-reference-v10110 .exp-log-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 15px;
}
body.expedition-collections-reference-v10110 .exp-log-meta-grid > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 6px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(181,123,40,.09);
}
body.expedition-collections-reference-v10110 .exp-log-meta-grid small { color: #9e8a65; font-size: 9px; }
body.expedition-collections-reference-v10110 .exp-log-meta-grid b { color: #dfc795; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.expedition-collections-reference-v10110 .exp-log-meta-grid .status-completed { color: var(--exp10-green); }
body.expedition-collections-reference-v10110 .exp-log-meta-grid .status-progress { color: #caa15e; }
body.expedition-collections-reference-v10110 .exp-log-meta-grid .status-locked { color: #8b8380; }

body.expedition-collections-reference-v10110 .exp-log-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 9px 0 8px;
  border-bottom: 1px solid var(--exp10-line-soft);
}
body.expedition-collections-reference-v10110 .exp-log-detail-tabs button { position: relative; }
body.expedition-collections-reference-v10110 .exp-log-detail-tabs button span { color: var(--exp10-muted); font-size: 8px; margin-left: 4px; }
body.expedition-collections-reference-v10110 .exp-log-detail-body { padding: 8px 0 0; }

body.expedition-collections-reference-v10110 .exp-log-player-strip {
  display: grid;
  grid-template-columns: 1fr minmax(180px,2fr) repeat(4, .7fr);
  gap: 1px;
  margin-bottom: 8px;
  border: 1px solid var(--exp10-line-soft);
  background: var(--exp10-line-soft);
}
body.expedition-collections-reference-v10110 .exp-log-player-strip > span {
  min-width: 0;
  padding: 7px 8px;
  background: #081317;
  color: #9f8b66;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.expedition-collections-reference-v10110 .exp-log-player-strip b { display: block; color: #d9c08d; font-size: 9px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
body.expedition-collections-reference-v10110 .exp-log-player-strip .jd-item-icon { width: 18px; height: 18px; vertical-align: middle; }

body.expedition-collections-reference-v10110 .exp-log-active-stage {
  border: 1px solid var(--exp10-line-soft);
  background: linear-gradient(180deg, #0d191d, #081216);
  padding: 10px;
}
body.expedition-collections-reference-v10110 .exp-log-active-stage.boss { border-color: rgba(214,163,77,.58); }
body.expedition-collections-reference-v10110 .exp-log-active-stage-main {
  display: grid;
  grid-template-columns: 74px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
}
body.expedition-collections-reference-v10110 .exp-log-stage-portrait {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--exp10-gold-soft);
  background: #071115;
}
body.expedition-collections-reference-v10110 .exp-log-stage-portrait img { width: 67px; height: 67px; object-fit: contain; image-rendering: pixelated; }
body.expedition-collections-reference-v10110 .exp-log-active-stage h3 { margin: 2px 0 3px; color: #e2c683; font-size: 18px; }
body.expedition-collections-reference-v10110 .exp-log-active-stage p { margin: 0; color: #9f8c68; font-size: 10px; }
body.expedition-collections-reference-v10110 .exp-log-stage-index { min-width: 64px; text-align: right; }
body.expedition-collections-reference-v10110 .exp-log-stage-index small { display: block; color: #8f7e60; font-size: 8px; }
body.expedition-collections-reference-v10110 .exp-log-stage-index b { color: #ddba73; font-size: 16px; }
body.expedition-collections-reference-v10110 .exp-log-stage-status {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 0;
  color: #9e8c68;
  font-size: 9px;
  border-top: 1px solid rgba(181,123,40,.12);
}
body.expedition-collections-reference-v10110 .exp-log-stage-actions {
  display: grid;
  grid-template-columns: minmax(120px,.7fr) minmax(210px,1.3fr);
  gap: 8px;
  margin-top: 10px;
}
body.expedition-collections-reference-v10110 .exp-log-enter-button,
body.expedition-collections-reference-v10110 .exp-log-stage-actions .expedition-preview-button {
  min-height: 40px !important;
  border-radius: 0 !important;
  border: 1px solid var(--exp10-gold-soft) !important;
  background: linear-gradient(180deg, #151a16, #0a1212) !important;
  color: #e0bd73 !important;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 10px !important;
}
body.expedition-collections-reference-v10110 .exp-log-enter-button.start {
  border-color: var(--exp10-gold-bright) !important;
  background: linear-gradient(180deg, #3b2b14, #15150e) !important;
  color: #f0ca79 !important;
}
body.expedition-collections-reference-v10110 .exp-log-enter-button.stop { color: #d98d7c !important; border-color: rgba(179,95,79,.6) !important; }
body.expedition-collections-reference-v10110 .exp-log-enter-button small { margin-left: 8px; color: #a99061; }
body.expedition-collections-reference-v10110 .exp-log-enter-button:disabled { opacity: .45; }

body.expedition-collections-reference-v10110 .exp-log-route-preview { margin-top: 9px; border: 1px solid var(--exp10-line-soft); padding: 9px; }
body.expedition-collections-reference-v10110 .exp-log-route-row {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 5px 7px;
  border-top: 1px solid rgba(181,123,40,.1);
}
body.expedition-collections-reference-v10110 .exp-log-route-row:first-of-type { border-top: 0; }
body.expedition-collections-reference-v10110 .exp-log-route-row.boss { background: rgba(116,74,25,.1); }
body.expedition-collections-reference-v10110 .exp-log-route-row > span { width: 38px; height: 38px; display:grid; place-items:center; border:1px solid var(--exp10-line-soft); background:#071115; }
body.expedition-collections-reference-v10110 .exp-log-route-row img { max-width: 35px; max-height: 35px; image-rendering: pixelated; }
body.expedition-collections-reference-v10110 .exp-log-route-row small { display:block; color:#88795e; font-size:8px; }
body.expedition-collections-reference-v10110 .exp-log-route-row strong { color:#d8bd84; font-size:11px; }
body.expedition-collections-reference-v10110 .exp-log-route-row > b { color:#a99670; font-size:9px; }

/* Discoveries / uniques */
body.expedition-collections-reference-v10110 .exp-log-subsection-title { padding: 7px 7px 9px; border-bottom: 1px solid var(--exp10-line-soft); }
body.expedition-collections-reference-v10110 .exp-log-subsection-title.secondary { margin-top: 12px; border-top: 1px solid var(--exp10-line-soft); }
body.expedition-collections-reference-v10110 .exp-log-discovery-list { border: 1px solid rgba(181,123,40,.22); border-top: 0; }
body.expedition-collections-reference-v10110 .exp-log-discovery-row {
  min-height: 68px;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) minmax(130px,.7fr);
  gap: 10px;
  align-items: center;
  padding: 7px 9px;
  border-top: 1px solid rgba(181,123,40,.13);
  background: rgba(8,18,22,.75);
}
body.expedition-collections-reference-v10110 .exp-log-discovery-row:first-child { border-top: 0; }
body.expedition-collections-reference-v10110 .exp-log-discovery-row.discovered.unique,
body.expedition-collections-reference-v10110 .exp-log-discovery-list.unique-list .exp-log-discovery-row.discovered { background: linear-gradient(90deg, rgba(95,57,18,.14), rgba(8,18,22,.75)); }
body.expedition-collections-reference-v10110 .exp-log-discovery-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(181,123,40,.35);
  background: #050d10;
}
body.expedition-collections-reference-v10110 .exp-log-discovery-icon .jd-item-icon { width: 48px; height: 48px; }
body.expedition-collections-reference-v10110 .exp-log-discovery-icon img { width: 48px; height: 48px; image-rendering: pixelated; }
body.expedition-collections-reference-v10110 .exp-log-discovery-row.undiscovered .exp-log-discovery-icon { border-color: rgba(113,119,117,.28); }
body.expedition-collections-reference-v10110 .exp-log-discovery-copy strong { display:block; color:#d8b96f; font-size:12px; }
body.expedition-collections-reference-v10110 .exp-log-discovery-row.undiscovered .exp-log-discovery-copy strong { color:#8c816d; }
body.expedition-collections-reference-v10110 .exp-log-discovery-copy small { color:#8e8065; font-size:9px; }
body.expedition-collections-reference-v10110 .exp-log-discovery-meta { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; text-align:right; color:#8d7f66; font-size:8px; }
body.expedition-collections-reference-v10110 .exp-log-discovery-meta b { color:#c9b17d; font-size:9px; }
body.expedition-collections-reference-v10110 .exp-log-drop-chance { grid-column:1/-1; color:#aa9367; }

/* Boss dossier */
body.expedition-collections-reference-v10110 .exp-log-boss-card {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  gap: 14px;
  border: 1px solid var(--exp10-line-soft);
  padding: 9px;
  background: linear-gradient(135deg, rgba(51,35,18,.18), rgba(7,16,20,.9));
}
body.expedition-collections-reference-v10110 .exp-log-boss-portrait {
  min-height: 160px;
  display:grid;
  place-items:center;
  border:1px solid var(--exp10-gold-soft);
  background:#050d10;
}
body.expedition-collections-reference-v10110 .exp-log-boss-portrait img { max-width:158px; max-height:158px; image-rendering:pixelated; }
body.expedition-collections-reference-v10110 .exp-log-boss-copy h3 { margin:3px 0 4px; color:#e0bd71; font-size:21px; }
body.expedition-collections-reference-v10110 .exp-log-boss-copy > strong { display:inline-block; color:#b78967; font-size:11px; margin:3px 0 12px; }
body.expedition-collections-reference-v10110 .exp-log-boss-copy > strong.defeated { color:var(--exp10-green); }
body.expedition-collections-reference-v10110 .exp-log-boss-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
body.expedition-collections-reference-v10110 .exp-log-boss-stats span { padding:7px; border:1px solid rgba(181,123,40,.18); color:#8e7e62; font-size:8px; }
body.expedition-collections-reference-v10110 .exp-log-boss-stats b { display:block; margin-top:2px; color:#d8bd85; font-size:11px; }
body.expedition-collections-reference-v10110 .exp-log-boss-tab .expedition-boss-mechanic,
body.expedition-collections-reference-v10110 .exp-log-boss-tab .expedition-first-kill { border-radius:0!important; margin-top:8px; }

/* Loot table */
body.expedition-collections-reference-v10110 .exp-log-loot-ledger { display:grid; gap:8px; }
body.expedition-collections-reference-v10110 .exp-log-loot-encounter { border:1px solid var(--exp10-line-soft); background:#081317; }
body.expedition-collections-reference-v10110 .exp-log-loot-encounter.boss { border-color:rgba(214,163,77,.52); }
body.expedition-collections-reference-v10110 .exp-log-loot-encounter > header { min-height:56px; display:flex; align-items:center; gap:10px; padding:6px 9px; border-bottom:1px solid rgba(181,123,40,.16); background:rgba(16,28,31,.72); }
body.expedition-collections-reference-v10110 .exp-log-loot-enemy { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--exp10-line-soft); background:#050d10; }
body.expedition-collections-reference-v10110 .exp-log-loot-enemy img { max-width:41px; max-height:41px; image-rendering:pixelated; }
body.expedition-collections-reference-v10110 .exp-log-loot-encounter header small { display:block; color:#85775e; font-size:8px; text-transform:uppercase; letter-spacing:.07em; }
body.expedition-collections-reference-v10110 .exp-log-loot-encounter header strong { color:#dfc17b; font-size:12px; }
body.expedition-collections-reference-v10110 .exp-log-loot-rows { display:grid; }
body.expedition-collections-reference-v10110 .exp-log-loot-row { min-height:42px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:8px; align-items:center; padding:4px 9px; border-top:1px solid rgba(181,123,40,.08); }
body.expedition-collections-reference-v10110 .exp-log-loot-row:first-child { border-top:0; }
body.expedition-collections-reference-v10110 .exp-log-loot-row.unique { background:rgba(105,65,18,.12); }
body.expedition-collections-reference-v10110 .exp-log-loot-row > span { width:34px;height:34px;display:grid;place-items:center; }
body.expedition-collections-reference-v10110 .exp-log-loot-row .jd-item-icon { width:32px;height:32px; }
body.expedition-collections-reference-v10110 .exp-log-loot-row img { width:32px;height:32px;image-rendering:pixelated; }
body.expedition-collections-reference-v10110 .exp-log-loot-row strong { color:#cfb47f;font-size:10px; }
body.expedition-collections-reference-v10110 .exp-log-loot-row small { margin-left:6px;color:#806f55;font-size:8px; }
body.expedition-collections-reference-v10110 .exp-log-loot-row > b { color:#d29b49;font-size:9px; }
body.expedition-collections-reference-v10110 .exp-log-loot-row.undiscovered strong { color:#827967; }

/* Shared Collections presentation */
body.expedition-collections-reference-v10110 .collection-expedition-ledger-section {
  position: relative;
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid var(--exp10-line);
  border-radius: 0 !important;
  background: linear-gradient(180deg, #091419, #061014);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}
body.expedition-collections-reference-v10110 .collection-expedition-ledger-section::before { left:4px;top:4px; }
body.expedition-collections-reference-v10110 .collection-expedition-ledger-heading { padding:4px 6px 9px; border-bottom:1px solid var(--exp10-line-soft); }
body.expedition-collections-reference-v10110 .collection-expedition-ledger { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding-top:9px; }
body.expedition-collections-reference-v10110 .collection-expedition-card {
  min-width:0;
  display:grid!important;
  grid-template-rows:100px minmax(0,1fr);
  padding:0!important;
  border:1px solid rgba(181,123,40,.3)!important;
  border-radius:0!important;
  overflow:hidden;
  background:#081317!important;
  color:var(--exp10-text);
  text-align:left;
}
body.expedition-collections-reference-v10110 .collection-expedition-card:hover { transform:none!important; border-color:var(--exp10-gold-soft)!important; }
body.expedition-collections-reference-v10110 .collection-expedition-card.completed { border-color:rgba(139,189,57,.42)!important; }
body.expedition-collections-reference-v10110 .collection-expedition-art { display:block;background-size:cover;background-position:center;position:relative; }
body.expedition-collections-reference-v10110 .collection-expedition-art::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(4,11,14,.58)); }
body.expedition-collections-reference-v10110 .collection-expedition-body { min-width:0;padding:9px;display:flex;flex-direction:column; }
body.expedition-collections-reference-v10110 .collection-expedition-body > strong { color:#dec17d;font-size:13px;margin-top:2px; }
body.expedition-collections-reference-v10110 .collection-expedition-body > small { color:#918166;font-size:9px;margin-top:2px; }
body.expedition-collections-reference-v10110 .collection-expedition-stats { display:grid;grid-template-columns:1fr 1.2fr;gap:5px;margin-top:8px; }
body.expedition-collections-reference-v10110 .collection-expedition-stats span { padding:5px;border:1px solid rgba(181,123,40,.13);color:#8d7d62;font-size:8px; }
body.expedition-collections-reference-v10110 .collection-expedition-stats b { display:block;color:#cdb37d;font-size:9px;margin-top:2px; }
body.expedition-collections-reference-v10110 .collection-expedition-items { display:grid;grid-template-columns:repeat(6,1fr);gap:3px;margin-top:8px; }
body.expedition-collections-reference-v10110 .collection-expedition-discovery { aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(181,123,40,.17);background:#050d10;overflow:hidden; }
body.expedition-collections-reference-v10110 .collection-expedition-discovery .jd-item-icon { width:100%;height:100%;max-width:38px;max-height:38px; }
body.expedition-collections-reference-v10110 .collection-expedition-discovery img { width:100%;height:100%;object-fit:contain;image-rendering:pixelated; }

body.expedition-collections-reference-v10110 #achievementsPage > .section-heading,
body.expedition-collections-reference-v10110 #achievementsPage .mastery-section,
body.expedition-collections-reference-v10110 #achievementsPage .mastery-summary-card,
body.expedition-collections-reference-v10110 #achievementsPage .achievement-card {
  border-radius:0!important;
}
body.expedition-collections-reference-v10110 #achievementsPage .mastery-section { border-color:rgba(181,123,40,.32)!important; background:#081317!important; }
body.expedition-collections-reference-v10110 #achievementsPage .achievement-card { border-color:rgba(181,123,40,.2)!important; background:#091419!important; }
body.expedition-collections-reference-v10110 #achievementsPage .achievement-card.collected { border-color:rgba(139,189,57,.35)!important; }

/* Moderate widths */
@media (max-width: 1260px) {
  body.expedition-collections-reference-v10110 .expedition-log-layout {
    grid-template-columns: minmax(310px,.82fr) minmax(470px,1.18fr) !important;
  }
  body.expedition-collections-reference-v10110 .exp-log-region-card { grid-template-columns:108px minmax(0,1fr); min-height:126px; }
  body.expedition-collections-reference-v10110 .exp-log-region-art { min-height:124px; }
  body.expedition-collections-reference-v10110 .exp-log-card-title strong { font-size:15px; }
  body.expedition-collections-reference-v10110 .exp-log-detail-head { grid-template-columns:135px minmax(0,1fr); }
  body.expedition-collections-reference-v10110 .exp-log-detail-art { min-height:135px; }
  body.expedition-collections-reference-v10110 .exp-log-meta-grid > span { grid-template-columns:78px minmax(0,1fr); }
  body.expedition-collections-reference-v10110 .exp-log-player-strip { grid-template-columns:repeat(3,1fr); }
  body.expedition-collections-reference-v10110 .collection-expedition-ledger { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Tablet and mobile: detail first when a region is selected, list stays accessible below. */
@media (max-width: 860px) {
  body.expedition-collections-reference-v10110 .expedition-log-layout {
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body.expedition-collections-reference-v10110 .expedition-log-detail-panel { order:1; }
  body.expedition-collections-reference-v10110 .expedition-log-list-panel { order:2; }
  body.expedition-collections-reference-v10110 .exp-log-region-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.expedition-collections-reference-v10110 .exp-log-region-card { display:flex!important; flex-direction:column; min-height:0; }
  body.expedition-collections-reference-v10110 .exp-log-region-art { min-height:86px; border-right:0;border-bottom:1px solid var(--exp10-line-soft); }
  body.expedition-collections-reference-v10110 .exp-log-region-main { padding:8px; }
  body.expedition-collections-reference-v10110 .exp-log-card-title { display:block; }
  body.expedition-collections-reference-v10110 .exp-log-card-title strong { display:block;font-size:12px; }
  body.expedition-collections-reference-v10110 .exp-log-card-title em { display:inline-block;margin-top:4px;font-size:7px; }
  body.expedition-collections-reference-v10110 .exp-log-card-stats { grid-template-columns:1fr; gap:2px; padding-top:7px; }
  body.expedition-collections-reference-v10110 .exp-log-card-stats span { flex-direction:row; justify-content:space-between; }
  body.expedition-collections-reference-v10110 .exp-log-lock-note { display:none; }
  body.expedition-collections-reference-v10110 .exp-log-detail-head { grid-template-columns:120px minmax(0,1fr); }
  body.expedition-collections-reference-v10110 .exp-log-detail-art { min-height:120px; }
  body.expedition-collections-reference-v10110 .exp-log-meta-grid { grid-template-columns:1fr 1fr; }
  body.expedition-collections-reference-v10110 .exp-log-detail-tabs { position:sticky; top:0;z-index:4;background:#071115; }
  body.expedition-collections-reference-v10110 .collection-expedition-ledger { grid-template-columns:1fr; }
  body.expedition-collections-reference-v10110 .collection-expedition-card { grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto; }
  body.expedition-collections-reference-v10110 .collection-expedition-art { min-height:130px; }
}

@media (max-width: 520px) {
  body.expedition-collections-reference-v10110 .expedition-log-page-heading { padding:8px; }
  body.expedition-collections-reference-v10110 .expedition-log-page-heading .reference-page-heading-icon { width:36px;height:36px; }
  body.expedition-collections-reference-v10110 .expedition-log-page-heading h2 { font-size:18px; }
  body.expedition-collections-reference-v10110 .expedition-log-page-heading p { font-size:9px; }
  body.expedition-collections-reference-v10110 .expedition-log-page-heading .combat-level-badge { min-width:74px;padding:5px 7px; }
  body.expedition-collections-reference-v10110 .expedition-log-list-panel,
  body.expedition-collections-reference-v10110 .exp-log-detail-shell { padding:7px!important; }
  body.expedition-collections-reference-v10110 .exp-log-list-head { align-items:start; }
  body.expedition-collections-reference-v10110 .exp-log-list-head h3 { font-size:12px; }
  body.expedition-collections-reference-v10110 .exp-log-region-list { grid-template-columns:1fr; }
  body.expedition-collections-reference-v10110 .exp-log-region-card { display:grid!important; grid-template-columns:92px minmax(0,1fr); min-height:104px; }
  body.expedition-collections-reference-v10110 .exp-log-region-art { min-height:102px;border-right:1px solid var(--exp10-line-soft);border-bottom:0; }
  body.expedition-collections-reference-v10110 .exp-log-card-title { display:flex; }
  body.expedition-collections-reference-v10110 .exp-log-card-title strong { font-size:12px; }
  body.expedition-collections-reference-v10110 .exp-log-card-title em { margin-top:0; }
  body.expedition-collections-reference-v10110 .exp-log-card-stats { grid-template-columns:repeat(3,1fr);gap:4px; }
  body.expedition-collections-reference-v10110 .exp-log-card-stats span { display:flex;flex-direction:column;justify-content:start; }
  body.expedition-collections-reference-v10110 .exp-log-card-stats { font-size:7px; }
  body.expedition-collections-reference-v10110 .exp-log-card-stats b { font-size:8px; }
  body.expedition-collections-reference-v10110 .exp-log-next-chapter { min-height:56px;padding:8px; }
  body.expedition-collections-reference-v10110 .exp-log-detail-head { grid-template-columns:90px minmax(0,1fr);gap:9px;padding:6px 4px 8px; }
  body.expedition-collections-reference-v10110 .exp-log-detail-art { min-height:92px; }
  body.expedition-collections-reference-v10110 .exp-log-detail-copy h2 { font-size:17px;margin-bottom:6px; }
  body.expedition-collections-reference-v10110 .exp-log-meta-grid { gap:3px 8px; }
  body.expedition-collections-reference-v10110 .exp-log-meta-grid > span { display:block;padding-bottom:2px; }
  body.expedition-collections-reference-v10110 .exp-log-meta-grid small { display:block;font-size:7px; }
  body.expedition-collections-reference-v10110 .exp-log-meta-grid b { display:block;font-size:8px;margin-top:1px; }
  body.expedition-collections-reference-v10110 .exp-log-detail-tabs { gap:2px;padding:6px 0; }
  body.expedition-collections-reference-v10110 .exp-log-detail-tabs button { min-height:32px;padding:3px;font-size:8px; }
  body.expedition-collections-reference-v10110 .exp-log-detail-tabs button span { display:none; }
  body.expedition-collections-reference-v10110 .exp-log-player-strip { grid-template-columns:repeat(3,1fr); }
  body.expedition-collections-reference-v10110 .exp-log-player-strip > span { padding:5px;font-size:7px; }
  body.expedition-collections-reference-v10110 .exp-log-active-stage-main { grid-template-columns:54px minmax(0,1fr) auto;gap:7px; }
  body.expedition-collections-reference-v10110 .exp-log-stage-portrait { width:52px;height:52px; }
  body.expedition-collections-reference-v10110 .exp-log-stage-portrait img { width:48px;height:48px; }
  body.expedition-collections-reference-v10110 .exp-log-active-stage h3 { font-size:14px; }
  body.expedition-collections-reference-v10110 .exp-log-stage-index { min-width:44px; }
  body.expedition-collections-reference-v10110 .exp-log-stage-status { font-size:7px; }
  body.expedition-collections-reference-v10110 .exp-log-stage-actions { grid-template-columns:1fr; }
  body.expedition-collections-reference-v10110 .exp-log-discovery-row { grid-template-columns:50px minmax(0,1fr) auto;gap:7px;padding:5px; }
  body.expedition-collections-reference-v10110 .exp-log-discovery-icon { width:44px;height:44px; }
  body.expedition-collections-reference-v10110 .exp-log-discovery-icon .jd-item-icon,
  body.expedition-collections-reference-v10110 .exp-log-discovery-icon img { width:40px;height:40px; }
  body.expedition-collections-reference-v10110 .exp-log-discovery-meta { min-width:72px;display:block;font-size:7px; }
  body.expedition-collections-reference-v10110 .exp-log-discovery-meta span,
  body.expedition-collections-reference-v10110 .exp-log-discovery-meta b { display:block;margin-top:2px; }
  body.expedition-collections-reference-v10110 .exp-log-drop-chance { display:none!important; }
  body.expedition-collections-reference-v10110 .exp-log-boss-card { grid-template-columns:100px minmax(0,1fr);gap:8px; }
  body.expedition-collections-reference-v10110 .exp-log-boss-portrait { min-height:100px; }
  body.expedition-collections-reference-v10110 .exp-log-boss-portrait img { max-width:96px;max-height:96px; }
  body.expedition-collections-reference-v10110 .exp-log-boss-copy h3 { font-size:16px; }
  body.expedition-collections-reference-v10110 .exp-log-boss-stats { grid-template-columns:1fr;gap:3px; }
  body.expedition-collections-reference-v10110 .exp-log-boss-stats span { padding:4px; }
  body.expedition-collections-reference-v10110 .collection-expedition-card { grid-template-columns:92px minmax(0,1fr); }
  body.expedition-collections-reference-v10110 .collection-expedition-art { min-height:118px; }
  body.expedition-collections-reference-v10110 .collection-expedition-items { gap:2px; }
}


/* ===== SOURCE: reference-ui-phase11.css ===== */
/* JourneyDen V1.01.11 — The Den, Regions & World Presentation
   UI-only pass. Reuses existing world/region/project data and existing region art.
   Visual target: supplied dark-gold Expedition Log reference. */

body.den-world-reference-v10111 {
  --dw11-bg: #061014;
  --dw11-bg-deep: #03090c;
  --dw11-panel: #081318;
  --dw11-panel-high: #0b191e;
  --dw11-line: rgba(181, 123, 40, .52);
  --dw11-line-soft: rgba(181, 123, 40, .24);
  --dw11-line-faint: rgba(181, 123, 40, .11);
  --dw11-gold: #d4a04b;
  --dw11-gold-soft: #a66f28;
  --dw11-text: #ead7ac;
  --dw11-muted: #a7926b;
  --dw11-green: #89b844;
  --dw11-red: #b16050;
}

/* =========================================================
   Shared Den / World headings
   ========================================================= */
body.den-world-reference-v10111 .den-reference-heading,
body.den-world-reference-v10111 #worldMapPage .world-map-heading {
  position: relative;
  border: 1px solid var(--dw11-line);
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(15,29,34,.98), rgba(5,14,18,.98)),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(212,160,75,.018) 28px 29px);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.28), inset 0 0 0 4px rgba(181,123,40,.07);
}
body.den-world-reference-v10111 .den-reference-heading::before,
body.den-world-reference-v10111 .den-reference-heading::after,
body.den-world-reference-v10111 #worldMapPage .world-map-heading::before,
body.den-world-reference-v10111 #worldMapPage .world-map-heading::after,
body.den-world-reference-v10111 .den-project-ledger-panel::before,
body.den-world-reference-v10111 .den-route-project::before,
body.den-world-reference-v10111 #worldMapPage .world-map-canvas::before,
body.den-world-reference-v10111 #worldMapPage .world-map-details::before {
  content: "✦";
  position: absolute;
  z-index: 8;
  color: var(--dw11-gold);
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(181,123,40,.36);
}
body.den-world-reference-v10111 .den-reference-heading::before,
body.den-world-reference-v10111 #worldMapPage .world-map-heading::before,
body.den-world-reference-v10111 .den-project-ledger-panel::before,
body.den-world-reference-v10111 .den-route-project::before,
body.den-world-reference-v10111 #worldMapPage .world-map-canvas::before,
body.den-world-reference-v10111 #worldMapPage .world-map-details::before { left: 5px; top: 5px; }
body.den-world-reference-v10111 .den-reference-heading::after,
body.den-world-reference-v10111 #worldMapPage .world-map-heading::after { right: 5px; bottom: 5px; transform: rotate(180deg); }

body.den-world-reference-v10111 .den-reference-heading {
  min-height: 72px;
  padding: 10px 14px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body.den-world-reference-v10111 .den-reference-heading .reference-page-heading-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 0;
  border: 1px solid var(--dw11-gold-soft);
  background: #050c0f;
  box-shadow: inset 0 0 0 2px #020607, inset 0 0 0 3px rgba(181,123,40,.12);
}
body.den-world-reference-v10111 .den-reference-heading .reference-page-heading-icon img { width: 29px; height: 29px; object-fit: contain; filter: sepia(1) saturate(.85) brightness(1.14); }
body.den-world-reference-v10111 .den-reference-heading h2,
body.den-world-reference-v10111 #worldMapPage .world-map-heading h2 {
  margin: 0;
  color: var(--dw11-gold);
  font-family: var(--jd-serif, Georgia, serif);
  font-size: clamp(24px,2.25vw,31px);
  font-weight: 600;
  font-variant: small-caps;
  letter-spacing: .045em;
}
body.den-world-reference-v10111 .den-reference-heading p,
body.den-world-reference-v10111 #worldMapPage .world-map-heading p { color: var(--dw11-muted); font-size: 11px; line-height: 1.45; }
body.den-world-reference-v10111 .den-heading-seal {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--dw11-line);
  background: #071115;
  color: var(--dw11-gold);
  font-family: var(--jd-serif, Georgia, serif);
  font-size: 18px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35);
}

/* =========================================================
   THE DEN — home dossier
   ========================================================= */
body.den-world-reference-v10111 #denPage .den-shell { display: grid; gap: 10px; }
body.den-world-reference-v10111 #denPage .den-reference-top-grid {
  display: grid;
  grid-template-columns: minmax(300px,.78fr) minmax(430px,1.22fr);
  gap: 10px;
  align-items: stretch;
}
body.den-world-reference-v10111 #denPage .den-hero {
  position: relative;
  min-height: 196px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--dw11-line) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 21% 48%, rgba(210,151,58,.18), transparent 24%),
    radial-gradient(circle at 23% 86%, rgba(126,78,35,.18), transparent 26%),
    linear-gradient(120deg, rgba(7,16,20,.82), rgba(3,9,12,.97)),
    repeating-linear-gradient(157deg, transparent 0 18px, rgba(211,158,68,.025) 18px 19px);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.32), inset 0 0 0 4px rgba(181,123,40,.06);
  display: grid;
  grid-template-columns: 102px minmax(0,1fr);
  gap: 16px;
  align-items: center;
}
body.den-world-reference-v10111 #denPage .den-hero::before {
  content: "";
  position: absolute;
  left: -5%;
  right: 36%;
  bottom: -38px;
  height: 92px;
  border-radius: 50% 50% 0 0;
  border-top: 1px solid rgba(191,132,47,.20);
  box-shadow: 0 -18px 55px rgba(119,73,29,.09);
  transform: rotate(-3deg);
}
body.den-world-reference-v10111 #denPage .den-hero::after {
  content: "HOME • SAFE";
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: rgba(212,160,75,.34);
  font-size: 8px;
  letter-spacing: .16em;
}
body.den-world-reference-v10111 #denPage .den-hero-emblem {
  width: 92px;
  height: 92px;
  border: 1px solid var(--dw11-line);
  border-radius: 0;
  background: radial-gradient(circle, rgba(173,111,34,.17), #050c0f 68%);
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(181,123,40,.10);
}
body.den-world-reference-v10111 #denPage .den-hero-emblem img { width: 56px; height: 56px; opacity: .92; filter: sepia(.85) saturate(.85) brightness(1.12); }
body.den-world-reference-v10111 #denPage .den-hero-copy h2 { color: #e7bf70; font-size: 30px; letter-spacing: .035em; }
body.den-world-reference-v10111 #denPage .den-hero-copy p { color: var(--dw11-muted); font-size: 11px; }
body.den-world-reference-v10111 #denPage .den-hero-badges { gap: 5px; }
body.den-world-reference-v10111 #denPage .den-hero-badges span,
body.den-world-reference-v10111 #denPage .den-room-status {
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid var(--dw11-line-soft);
  border-radius: 0 !important;
  background: #071115;
  color: #c5ae7f;
  font-size: 9px;
}
body.den-world-reference-v10111 #denPage .den-overview-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  margin: 0;
}
body.den-world-reference-v10111 #denPage .den-overview-card {
  min-height: 88px;
  padding: 11px 12px;
  border: 1px solid var(--dw11-line-soft);
  border-radius: 0 !important;
  background: linear-gradient(180deg,#091419,#061014);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.24);
}
body.den-world-reference-v10111 #denPage .den-overview-card strong { color: #e0c48c; font-family: var(--jd-serif, Georgia, serif); font-size: 15px; font-weight: 500; }
body.den-world-reference-v10111 #denPage .den-overview-card small { color: var(--dw11-muted); font-size: 9px; }
body.den-world-reference-v10111 #denPage .den-chapter-overview-card { grid-column: 1/-1; min-height: 74px; }
body.den-world-reference-v10111 #denPage .den-chapter-overview-card.is-complete { border-color: rgba(137,184,68,.46); }
body.den-world-reference-v10111 #denPage .den-storage-bar,
body.den-world-reference-v10111 #denPage .journey-journal-progress,
body.den-world-reference-v10111 #denPage .den-project-progress,
body.den-world-reference-v10111 #denPage .den-project-ledger-progress {
  overflow: hidden;
  border: 1px solid rgba(181,123,40,.22);
  border-radius: 0 !important;
  background: #020709;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.65);
}
body.den-world-reference-v10111 #denPage .den-storage-bar span,
body.den-world-reference-v10111 #denPage .journey-journal-progress span,
body.den-world-reference-v10111 #denPage .den-project-progress span,
body.den-world-reference-v10111 #denPage .den-project-ledger-progress i { background: linear-gradient(90deg,#70491d,#d1a04d); border-radius: 0 !important; }

/* Chapter journal / tiers adopt the same record-window language. */
body.den-world-reference-v10111 #denPage .journey-journal,
body.den-world-reference-v10111 #denPage .den-progression-panel,
body.den-world-reference-v10111 #denPage .den-project-ledger-panel,
body.den-world-reference-v10111 #denPage .den-route-project,
body.den-world-reference-v10111 #denPage .den-future-note,
body.den-world-reference-v10111 #denPage .journey-completed-card {
  position: relative;
  border: 1px solid var(--dw11-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg,#081318,#050d11) !important;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}
body.den-world-reference-v10111 #denPage .journey-journal,
body.den-world-reference-v10111 #denPage .den-progression-panel,
body.den-world-reference-v10111 #denPage .den-project-ledger-panel,
body.den-world-reference-v10111 #denPage .den-route-project { padding: 12px !important; }
body.den-world-reference-v10111 #denPage .journey-journal-heading,
body.den-world-reference-v10111 #denPage .den-progression-heading,
body.den-world-reference-v10111 #denPage .den-route-project-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--dw11-line-soft);
}
body.den-world-reference-v10111 #denPage .journey-journal-heading h3,
body.den-world-reference-v10111 #denPage .den-progression-heading h3,
body.den-world-reference-v10111 #denPage .den-route-project-heading h3,
body.den-world-reference-v10111 #denPage .reference-subheading h3 { color: #e2c27f; font-family: var(--jd-serif, Georgia, serif); font-weight: 500; }
body.den-world-reference-v10111 #denPage .journey-journal-heading p,
body.den-world-reference-v10111 #denPage .den-progression-description,
body.den-world-reference-v10111 #denPage .den-route-project > p,
body.den-world-reference-v10111 #denPage .den-future-note p { color: var(--dw11-muted); }

body.den-world-reference-v10111 #denPage .den-tier-roadmap { gap: 6px; }
body.den-world-reference-v10111 #denPage .den-tier-card {
  min-height: 118px;
  padding: 10px;
  border: 1px solid var(--dw11-line-soft);
  border-radius: 0 !important;
  background: #071115;
}
body.den-world-reference-v10111 #denPage .den-tier-card.is-current { border-color: var(--dw11-gold-soft); background: linear-gradient(180deg,rgba(111,74,26,.18),#071115); }
body.den-world-reference-v10111 #denPage .den-tier-card.is-complete { border-color: rgba(137,184,68,.38); }
body.den-world-reference-v10111 #denPage .den-tier-card h4 { color: #dec184; font-family: var(--jd-serif, Georgia, serif); }
body.den-world-reference-v10111 #denPage .den-tier-card p,
body.den-world-reference-v10111 #denPage .den-tier-card small,
body.den-world-reference-v10111 #denPage .den-framework-note { color: var(--dw11-muted); }

/* =========================================================
   THE DEN — Frontier Project ledger
   ========================================================= */
body.den-world-reference-v10111 #denPage .den-project-ledger-panel { overflow: hidden; }
body.den-world-reference-v10111 #denPage .den-project-ledger-heading { margin-bottom: 9px; }
body.den-world-reference-v10111 #denPage .den-project-ledger-heading > small { color: var(--dw11-muted); font-size: 9px; }
body.den-world-reference-v10111 #denPage .den-project-ledger {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
}
body.den-world-reference-v10111 #denPage .den-project-ledger-card {
  display: grid;
  grid-template-rows: 96px minmax(0,1fr);
  min-width: 0;
  min-height: 198px;
  padding: 0;
  border: 1px solid var(--dw11-line-soft);
  border-radius: 0 !important;
  overflow: hidden;
  background: #071115;
  color: var(--dw11-text);
  text-align: left;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.24);
}
body.den-world-reference-v10111 #denPage .den-project-ledger-card:hover { transform: none; border-color: var(--dw11-gold-soft); background: #09161a; }
body.den-world-reference-v10111 #denPage .den-project-ledger-card.is-selected { border-color: var(--dw11-gold); box-shadow: inset 0 0 0 2px rgba(212,160,75,.08),0 0 10px rgba(181,123,40,.06); }
body.den-world-reference-v10111 #denPage .den-project-ledger-card.is-complete { border-color: rgba(137,184,68,.36); }
body.den-world-reference-v10111 #denPage .den-project-ledger-card.is-locked { filter: saturate(.6); opacity: .72; }
body.den-world-reference-v10111 #denPage .den-project-ledger-art {
  position: relative;
  display: block;
  min-height: 96px;
  background: linear-gradient(135deg,#152026,#071015);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--dw11-line-soft);
}
body.den-world-reference-v10111 #denPage .den-project-ledger-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(3,9,12,.64)); }
body.den-world-reference-v10111 #denPage .den-project-ledger-status {
  position: absolute;
  z-index: 2;
  right: 6px;
  top: 6px;
  padding: 3px 5px;
  border: 1px solid rgba(181,123,40,.40);
  background: rgba(4,10,13,.82);
  color: #d3b574;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body.den-world-reference-v10111 #denPage .is-complete .den-project-ledger-status { color: #a9ce69; border-color: rgba(137,184,68,.44); }
body.den-world-reference-v10111 #denPage .den-project-ledger-copy { display: flex; flex-direction: column; min-width: 0; padding: 9px 10px; }
body.den-world-reference-v10111 #denPage .den-project-ledger-copy strong { margin-top: 2px; color: #e1c27f; font-family: var(--jd-serif, Georgia, serif); font-size: 15px; font-weight: 500; }
body.den-world-reference-v10111 #denPage .den-project-ledger-copy > small { margin-top: 2px; color: var(--dw11-muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.den-world-reference-v10111 #denPage .den-project-ledger-progress { display:block; height: 6px; margin-top: auto; }
body.den-world-reference-v10111 #denPage .den-project-ledger-progress i { display:block; height:100%; }
body.den-world-reference-v10111 #denPage .den-project-ledger-meta { display:flex; justify-content:space-between; gap:7px; margin-top:5px; align-items:center; }
body.den-world-reference-v10111 #denPage .den-project-ledger-meta b { color:#d9ba7a; font-size:9px; }
body.den-world-reference-v10111 #denPage .den-project-ledger-meta em { min-width:0; color:var(--dw11-muted); font-size:8px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

body.den-world-reference-v10111 #denPage .den-project-region-art {
  position: relative;
  min-height: 150px;
  margin: 9px 0 10px;
  overflow: hidden;
  border: 1px solid var(--dw11-line-soft);
  background: linear-gradient(135deg,#152026,#071015);
  background-size: cover;
  background-position: center;
}
body.den-world-reference-v10111 #denPage .den-project-region-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,9,12,.08),rgba(3,9,12,.64)),linear-gradient(180deg,transparent 45%,rgba(3,9,12,.74)); }
body.den-world-reference-v10111 #denPage .den-project-region-art span { position:absolute; z-index:2; left:10px; bottom:8px; color:#e5c47f; font-family:var(--jd-serif,Georgia,serif); font-size:18px; letter-spacing:.02em; }
body.den-world-reference-v10111 #denPage .den-route-target { border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#061014; padding:8px 10px; }
body.den-world-reference-v10111 #denPage .den-project-requirements { gap:5px; }
body.den-world-reference-v10111 #denPage .den-project-requirement {
  border: 1px solid var(--dw11-line-faint);
  border-radius: 0 !important;
  background: #071115;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}
body.den-world-reference-v10111 #denPage .den-project-requirement.is-complete { border-color: rgba(137,184,68,.28); }
body.den-world-reference-v10111 #denPage .den-project-requirement-icon { border-radius:0 !important; border:1px solid var(--dw11-line-soft); background:#040b0e; }
body.den-world-reference-v10111 #denPage .den-project-requirement button,
body.den-world-reference-v10111 #denPage .den-project-actions button,
body.den-world-reference-v10111 #denPage .den-room-card > button { border-radius:0 !important; font-family:var(--jd-serif,Georgia,serif); }

body.den-world-reference-v10111 #denPage .den-room-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap:7px; }
body.den-world-reference-v10111 #denPage .den-room-card {
  min-height: 166px;
  padding: 11px;
  border: 1px solid var(--dw11-line-soft);
  border-radius: 0 !important;
  background: linear-gradient(180deg,#091419,#061014);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22);
}
body.den-world-reference-v10111 #denPage .den-room-card.den-room-locked { opacity:.64; filter:saturate(.65); }
body.den-world-reference-v10111 #denPage .den-room-icon { width:42px; height:42px; border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#050c0f; }
body.den-world-reference-v10111 #denPage .den-room-card h3 { color:#dec082; font-family:var(--jd-serif,Georgia,serif); font-weight:500; }
body.den-world-reference-v10111 #denPage .den-room-card p { color:var(--dw11-muted); }

/* =========================================================
   WORLD MAP — chapter atlas + region dossier
   ========================================================= */
body.den-world-reference-v10111 #worldMapPage .world-map-shell { gap:10px; }
body.den-world-reference-v10111 #worldMapPage .world-map-chapter-nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:4px; }
body.den-world-reference-v10111 #worldMapPage .world-map-chapter-button {
  min-height: 42px;
  padding: 8px 10px;
  border:1px solid var(--dw11-line-soft);
  border-radius:0 !important;
  background:#071115;
  color:#a99570;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22);
}
body.den-world-reference-v10111 #worldMapPage .world-map-chapter-button.is-active { border-color:var(--dw11-gold-soft); background:linear-gradient(180deg,rgba(111,74,26,.18),#071115); color:#e0bd78; }
body.den-world-reference-v10111 #worldMapPage .world-map-chapter-button.is-locked { opacity:.58; }
body.den-world-reference-v10111 #worldMapPage .world-map-heading { padding:10px 13px 11px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; }
body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); gap:5px; min-width:300px; }
body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats > div { padding:8px 10px; border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#071115; }
body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats small { color:var(--dw11-muted); font-size:8px; }
body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats strong { color:#ddbd7c; font-family:var(--jd-serif,Georgia,serif); font-size:11px; }
body.den-world-reference-v10111 #worldMapPage .world-map-layout { grid-template-columns:minmax(0,1.58fr) minmax(320px,.72fr); gap:10px; align-items:stretch; }

body.den-world-reference-v10111 #worldMapPage .world-map-canvas {
  position:relative;
  min-height:650px;
  border:1px solid var(--dw11-line) !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 52% 56%,rgba(177,143,80,.13),transparent 43%),
    linear-gradient(145deg,#19211d 0%,#253027 47%,#17201c 100%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.28),inset 0 0 0 4px rgba(181,123,40,.07),inset 0 0 95px rgba(0,0,0,.38);
}
body.den-world-reference-v10111 #worldMapPage .world-map-canvas::before {
  content:"✦";
  inset:auto;
  width:auto;
  height:auto;
  border:0;
  background:none;
  opacity:1;
}
body.den-world-reference-v10111 #worldMapPage .world-map-canvas::after {
  content:"CHAPTER I • KNOWN WORLD";
  left:10px;
  bottom:8px;
  color:rgba(218,184,116,.34);
  font-size:7px;
  letter-spacing:.15em;
}
body.den-world-reference-v10111 #worldMapPage .world-map-route-label {
  padding:3px 6px;
  border:1px solid rgba(181,123,40,.22);
  border-radius:0 !important;
  background:rgba(5,12,15,.78);
  color:rgba(231,210,163,.72);
}
body.den-world-reference-v10111 #worldMapPage .world-map-node {
  max-width:190px;
  grid-template-columns:46px minmax(0,1fr);
  gap:7px;
  padding:5px 7px 5px 5px;
  border:1px solid rgba(181,123,40,.34);
  border-radius:0 !important;
  background:rgba(5,13,16,.90);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 7px 17px rgba(0,0,0,.30);
  backdrop-filter:blur(2px);
}
body.den-world-reference-v10111 #worldMapPage .world-map-node:hover,
body.den-world-reference-v10111 #worldMapPage .world-map-node.is-selected { transform:translate(-50%,-50%); border-color:var(--dw11-gold); box-shadow:inset 0 0 0 2px rgba(212,160,75,.09),0 7px 18px rgba(0,0,0,.34); }
body.den-world-reference-v10111 #worldMapPage .world-map-node-icon {
  width:44px;
  height:44px;
  border:1px solid var(--dw11-line-soft);
  border-radius:0 !important;
  background:#071115;
  overflow:hidden;
}
body.den-world-reference-v10111 #worldMapPage .world-map-node-icon.has-region-art img { width:100%; height:100%; object-fit:cover; display:block; image-rendering:auto; }
body.den-world-reference-v10111 #worldMapPage .world-map-node-copy strong { color:#e1c17f; font-family:var(--jd-serif,Georgia,serif); font-size:12px; font-weight:500; }
body.den-world-reference-v10111 #worldMapPage .world-map-node-copy small { color:var(--dw11-muted); font-size:8px; }
body.den-world-reference-v10111 #worldMapPage .world-map-node.is-open { background:rgba(8,20,17,.92); border-color:rgba(137,184,68,.38); }
body.den-world-reference-v10111 #worldMapPage .world-map-node.is-locked { background:rgba(20,15,13,.90); border-color:rgba(171,103,57,.30); }
body.den-world-reference-v10111 #worldMapPage .world-map-frontier-marker { border-radius:0 !important; border-color:var(--dw11-line-soft); background:rgba(5,13,16,.92); }

body.den-world-reference-v10111 #worldMapPage .world-map-details {
  position:relative;
  min-height:650px;
  padding:10px;
  overflow:hidden;
  border:1px solid var(--dw11-line) !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,#081318,#050d11);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.28),inset 0 0 0 4px rgba(181,123,40,.06);
}
body.den-world-reference-v10111 #worldMapPage .world-map-detail-art {
  position:relative;
  min-height:190px;
  margin:0 0 10px;
  overflow:hidden;
  border:1px solid var(--dw11-line-soft);
  background:
    radial-gradient(circle at 50% 48%,rgba(190,129,40,.16),transparent 30%),
    url('../assets/icons/interface/navigation/world_map.webp') center/86px 86px no-repeat,
    linear-gradient(145deg,#132027,#050c0f);
  background-size:cover;
  background-position:center;
}
body.den-world-reference-v10111 #worldMapPage .world-map-detail-art.has-region-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(3,9,12,.77)); }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-art.is-home-art { background-size:86px 86px,cover; background-repeat:no-repeat; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-art span { position:absolute; z-index:2; left:9px; bottom:7px; color:#e6c57e; font-family:var(--jd-serif,Georgia,serif); font-size:17px; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-heading { grid-template-columns:48px 1fr; gap:9px; padding-bottom:8px; border-bottom:1px solid var(--dw11-line-soft); }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-icon { width:46px; height:46px; overflow:hidden; border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#050c0f; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-icon.has-region-art img { width:100%; height:100%; object-fit:cover; display:block; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-heading h3 { color:#e3c17b; font-family:var(--jd-serif,Georgia,serif); font-size:18px; font-weight:500; }
body.den-world-reference-v10111 #worldMapPage .world-map-details > p { margin:10px 0; color:var(--dw11-muted); font-size:10px; line-height:1.5; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-status { gap:5px; margin-bottom:8px; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-status span { padding:8px 9px; border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#061014; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-status small { color:var(--dw11-muted); font-size:7px; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-status strong { color:#ddbd7c; font-size:10px; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-project { padding:10px; border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#071115; }
body.den-world-reference-v10111 #worldMapPage .world-map-project-progress { border:1px solid var(--dw11-line-soft); border-radius:0 !important; background:#020709; }
body.den-world-reference-v10111 #worldMapPage .world-map-project-progress span { border-radius:0 !important; background:linear-gradient(90deg,#714a1d,#d1a04d); }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-actions { gap:6px; padding-top:10px; }
body.den-world-reference-v10111 #worldMapPage .world-map-detail-actions button { min-height:38px; border-radius:0 !important; font-family:var(--jd-serif,Georgia,serif); }
body.den-world-reference-v10111 #worldMapPage .world-map-legend { padding:7px 2px; color:var(--dw11-muted); font-size:8px; border-top:1px solid var(--dw11-line-faint); }
body.den-world-reference-v10111 #worldMapPage .world-map-locked-chapter { min-height:340px; border:1px solid var(--dw11-line); border-radius:0 !important; background:#061014; }

/* =========================================================
   Responsive rules
   ========================================================= */
@media (max-width: 1120px) {
  body.den-world-reference-v10111 #denPage .den-reference-top-grid { grid-template-columns:1fr; }
  body.den-world-reference-v10111 #denPage .den-overview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.den-world-reference-v10111 #denPage .den-chapter-overview-card { grid-column:auto; }
  body.den-world-reference-v10111 #worldMapPage .world-map-layout { grid-template-columns:1fr; }
  body.den-world-reference-v10111 #worldMapPage .world-map-details { min-height:auto; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-art { min-height:160px; }
}

@media (max-width: 860px) {
  body.den-world-reference-v10111 #denPage .den-project-ledger { grid-template-columns:1fr; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-card { grid-template-columns:126px minmax(0,1fr); grid-template-rows:1fr; min-height:116px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-art { min-height:114px; border-bottom:0; border-right:1px solid var(--dw11-line-soft); }
  body.den-world-reference-v10111 #denPage .den-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading { grid-template-columns:1fr; }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats { min-width:0; width:100%; }
}

@media (max-width: 760px) {
  body.den-world-reference-v10111 .den-reference-heading { min-height:0; padding:8px 9px; }
  body.den-world-reference-v10111 .den-reference-heading .reference-page-heading-icon { width:38px; height:38px; flex-basis:38px; }
  body.den-world-reference-v10111 .den-reference-heading .reference-page-heading-icon img { width:24px; height:24px; }
  body.den-world-reference-v10111 .den-reference-heading h2 { font-size:20px; }
  body.den-world-reference-v10111 .den-reference-heading p { font-size:8px; }
  body.den-world-reference-v10111 .den-heading-seal { width:34px; height:34px; flex-basis:34px; font-size:14px; }
  body.den-world-reference-v10111 #denPage .den-hero { min-height:150px; grid-template-columns:68px minmax(0,1fr); padding:10px !important; gap:9px; }
  body.den-world-reference-v10111 #denPage .den-hero-emblem { width:64px !important; height:64px !important; }
  body.den-world-reference-v10111 #denPage .den-hero-emblem img { width:39px !important; height:39px !important; }
  body.den-world-reference-v10111 #denPage .den-hero-copy h2 { font-size:19px !important; }
  body.den-world-reference-v10111 #denPage .den-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:5px !important; }
  body.den-world-reference-v10111 #denPage .den-chapter-overview-card { grid-column:1/-1 !important; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-panel,
  body.den-world-reference-v10111 #denPage .den-route-project,
  body.den-world-reference-v10111 #denPage .den-progression-panel,
  body.den-world-reference-v10111 #denPage .journey-journal { padding:9px !important; }
  body.den-world-reference-v10111 #denPage .den-project-region-art { min-height:112px; margin:7px 0; }
  body.den-world-reference-v10111 #denPage .den-project-region-art span { font-size:13px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-card { grid-template-columns:104px minmax(0,1fr); min-height:106px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-art { min-height:104px; }
  body.den-world-reference-v10111 #denPage .den-room-grid { grid-template-columns:1fr !important; }
  body.den-world-reference-v10111 #denPage .den-room-card { min-height:0 !important; }

  body.den-world-reference-v10111 #worldMapPage .world-map-chapter-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-chapter-button { min-height:38px; padding:6px 7px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading { padding:8px 9px !important; gap:7px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading h2 { font-size:20px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading p { font-size:8px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:4px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-heading-stats > div { padding:6px 7px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-canvas { min-height:470px !important; max-height:470px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-node { max-width:132px !important; grid-template-columns:31px minmax(0,1fr) !important; gap:4px !important; padding:4px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-node-icon { width:30px !important; height:30px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-node-copy strong { font-size:8.5px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-node-copy small { font-size:6.5px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-details { padding:8px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-art { min-height:126px; margin-bottom:7px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-art span { font-size:13px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-heading { grid-template-columns:38px 1fr; gap:7px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-icon { width:36px; height:36px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-heading h3 { font-size:13px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-status { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.den-world-reference-v10111 #worldMapPage .world-map-legend { gap:8px; font-size:6.8px; }
}

@media (max-width: 430px) {
  body.den-world-reference-v10111 #denPage .den-reference-top-grid { gap:6px; }
  body.den-world-reference-v10111 #denPage .den-overview-grid { grid-template-columns:1fr 1fr !important; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-card { grid-template-columns:88px minmax(0,1fr); min-height:100px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-art { min-height:98px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-copy { padding:7px 8px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-copy strong { font-size:12px; }
  body.den-world-reference-v10111 #denPage .den-project-ledger-copy > small { font-size:7.5px; }
  body.den-world-reference-v10111 #worldMapPage .world-map-canvas { min-height:440px !important; max-height:440px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-node { max-width:114px !important; grid-template-columns:27px minmax(0,1fr) !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-node-icon { width:26px !important; height:26px !important; }
  body.den-world-reference-v10111 #worldMapPage .world-map-detail-status { grid-template-columns:1fr 1fr; }
}

/* Journey journal internals are records, not rounded cards. */
body.den-world-reference-v10111 #denPage .journey-journal-summary,
body.den-world-reference-v10111 #denPage .journey-journal-entry,
body.den-world-reference-v10111 #denPage .journey-journal-objective,
body.den-world-reference-v10111 #denPage .journey-tutorial-step,
body.den-world-reference-v10111 #denPage .journey-existing-progress,
body.den-world-reference-v10111 #denPage .journey-journal-finale {
  border-radius: 0 !important;
  border-color: var(--dw11-line-soft) !important;
  background: #071115 !important;
}
body.den-world-reference-v10111 #denPage .journey-journal-entry.is-active { border-color: var(--dw11-gold-soft) !important; background: linear-gradient(180deg,rgba(111,74,26,.14),#071115) !important; }
body.den-world-reference-v10111 #denPage .journey-journal-entry.is-complete { border-color: rgba(137,184,68,.30) !important; }
body.den-world-reference-v10111 #denPage .journey-journal-entry-marker span { border-radius: 0 !important; border-color: var(--dw11-line-soft); background:#040b0e; }
body.den-world-reference-v10111 #denPage .journey-journal-entry-heading h4,
body.den-world-reference-v10111 #denPage .journey-journal-objective-copy strong { color:#ddbf82; font-family:var(--jd-serif,Georgia,serif); }
body.den-world-reference-v10111 #denPage .journey-journal-entry-body > p,
body.den-world-reference-v10111 #denPage .journey-journal-objective-copy small { color:var(--dw11-muted); }

/* Restore the corner ornament after replacing the old map-grid ::before layer. */
body.den-world-reference-v10111 #worldMapPage .world-map-canvas::before { left:5px; top:5px; right:auto; bottom:auto; }


/* ===== SOURCE: reference-ui-phase12.css ===== */
/* JourneyDen V1.01.12 — Mobile, Optimization & Stability
   Final responsive pass of the V1.01 UI rework.
   Keeps the reference Dark & Gold identity while standardizing phone/tablet
   behavior across every reworked page. */

body.mobile-stability-v10112 {
  --jd12-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jd12-safe-top: env(safe-area-inset-top, 0px);
  --jd12-touch: 44px;
  --jd12-phone-gutter: 8px;
  --jd12-line: rgba(181,123,40,.42);
  --jd12-line-soft: rgba(181,123,40,.22);
  --jd12-gold: #d4a04b;
  --jd12-panel: #061014;
  --jd12-panel-high: #091419;
}

/* Stable keyboard focus across desktop and touch-keyboard navigation. */
body.mobile-stability-v10112 :where(button,a,input,select,textarea,[role="button"]):focus-visible {
  outline: 2px solid var(--jd12-gold) !important;
  outline-offset: 2px;
}

/* Pixel item art should remain crisp at every density. */
body.mobile-stability-v10112 :where(.jd-item-icon,img[src*="/items/runtime/"]) {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Prevent long generated names, requirements or values from forcing page width. */
body.mobile-stability-v10112 :where(.page,.panel,.card,section,article,aside,header,footer,div,span) {
  min-width: 0;
}
body.mobile-stability-v10112 :where(.page h1,.page h2,.page h3,.page h4,.page p,.page small,.page strong,.page b,.page em,.page label) {
  overflow-wrap: anywhere;
}

/* Keep click behavior deterministic on touch devices. */
body.mobile-stability-v10112 :where(button,[role="button"],a,input,select,textarea) {
  touch-action: manipulation;
}

@media (hover: none) {
  body.mobile-stability-v10112 :where(button,.nav-item,.mobile-nav-item,.mobile-nav-more-item,.activity-click-card,.skill-card,.bank-slot-rs,.enemy-card-v2):hover {
    transform: none !important;
  }
}

/* =========================================================
   Unified tablet / phone shell
   ========================================================= */
@media (max-width: 820px) {
  html { overflow-x: hidden; }
  body.mobile-stability-v10112 {
    overflow-x: hidden;
    background: #020709;
  }
  body.mobile-stability-v10112 .app-shell {
    display: block !important;
    width: 100%;
    min-height: 100dvh;
    padding: 0 !important;
  }
  body.mobile-stability-v10112 .reference-sidebar { display: none !important; }
  body.mobile-stability-v10112 .app-main {
    width: 100%;
    min-width: 0;
    padding-bottom: calc(66px + var(--jd12-safe-bottom)) !important;
  }

  /* Compact header: useful state only; no desktop-style dashboard chrome. */
  body.mobile-stability-v10112 .topbar {
    position: sticky;
    top: 0;
    z-index: 1200;
    min-height: 54px !important;
    padding-top: max(6px,var(--jd12-safe-top)) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--jd12-line) !important;
    background: rgba(3,9,12,.97) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(8px);
  }
  body.mobile-stability-v10112 .topbar :where(.stat-chip,.header-stat) {
    border-radius: 0 !important;
  }
  body.mobile-stability-v10112 .mobile-header-logo {
    max-height: 34px;
    object-fit: contain;
  }

  body.mobile-stability-v10112 main {
    width: auto !important;
    max-width: none !important;
    margin: var(--jd12-phone-gutter) !important;
    padding: var(--jd12-phone-gutter) !important;
    border-radius: 0 !important;
    border: 1px solid rgba(181,123,40,.30) !important;
    background: #03090c;
    overflow: clip;
  }
  body.mobile-stability-v10112 .current-journey-tracker {
    margin: var(--jd12-phone-gutter) var(--jd12-phone-gutter) 0 !important;
    border-radius: 0 !important;
  }

  /* Reference-style thumb bar: square, readable, safe-area aware. */
  body.mobile-stability-v10112 .mobile-top-navigation {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 1700 !important;
    padding: 0 0 var(--jd12-safe-bottom) !important;
    border: 0 !important;
    border-top: 1px solid var(--jd12-line) !important;
    border-radius: 0 !important;
    background: rgba(3,9,12,.985) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.48) !important;
  }
  body.mobile-stability-v10112 .mobile-nav-primary {
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
    gap: 2px !important;
    padding: 4px 5px 5px !important;
    background: transparent !important;
  }
  body.mobile-stability-v10112 .mobile-nav-item {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 5px 2px !important;
    gap: 3px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #aa9671 !important;
  }
  body.mobile-stability-v10112 .mobile-nav-item > span {
    min-height: 23px !important;
    display: grid;
    place-items: center;
  }
  body.mobile-stability-v10112 .mobile-nav-item > b {
    max-width: 100%;
    font-family: var(--jd-serif,Georgia,serif) !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.mobile-stability-v10112 .mobile-nav-item:is(.active,.menu-open) {
    border-color: rgba(181,123,40,.46) !important;
    background: linear-gradient(180deg,rgba(181,123,40,.10),rgba(181,123,40,.025)) !important;
    color: #e3bf79 !important;
    box-shadow: inset 0 -2px 0 rgba(212,160,75,.46) !important;
  }

  /* More menu is a bounded journal sheet, not a rounded modern drawer. */
  body.mobile-stability-v10112 .mobile-nav-more {
    left: 5px !important;
    right: 5px !important;
    bottom: 100% !important;
    top: auto !important;
    max-height: min(72dvh,620px) !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid var(--jd12-line) !important;
    border-bottom-color: rgba(181,123,40,.18) !important;
    border-radius: 0 !important;
    background: rgba(4,11,14,.995) !important;
    box-shadow: 0 -18px 42px rgba(0,0,0,.62) !important;
  }
  body.mobile-stability-v10112 .mobile-nav-more-heading {
    position: sticky;
    top: -8px;
    z-index: 2;
    margin: -8px -8px 7px;
    padding: 9px 10px 8px !important;
    border-bottom: 1px solid var(--jd12-line-soft);
    background: #050d11 !important;
  }
  body.mobile-stability-v10112 .mobile-nav-more-group,
  body.mobile-stability-v10112 .mobile-nav-more-item {
    border-radius: 0 !important;
  }
  body.mobile-stability-v10112 .mobile-nav-more-item {
    min-height: var(--jd12-touch) !important;
    border-color: rgba(181,123,40,.16) !important;
    background: #061014 !important;
  }
  body.mobile-stability-v10112 .mobile-nav-more-item.active {
    border-color: rgba(181,123,40,.46) !important;
    background: rgba(181,123,40,.075) !important;
  }

  /* Global touch and form stability. */
  body.mobile-stability-v10112 :where(button,[role="button"]):not(.bank-slot-rs):not(.world-map-node) {
    min-height: var(--jd12-touch);
  }
  body.mobile-stability-v10112 :where(input,select,textarea) {
    min-height: var(--jd12-touch);
    max-width: 100%;
    font-size: 16px !important; /* prevents iOS focus zoom */
    border-radius: 0 !important;
  }
  body.mobile-stability-v10112 :where(.tabs,.bank-category-tabs,.activity-filter-bar,.activity-subfilters,.exp-log-detail-tabs,.skill-detail-tabs,.world-map-chapter-nav) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.mobile-stability-v10112 :where(.tabs,.bank-category-tabs,.activity-filter-bar,.activity-subfilters,.exp-log-detail-tabs,.skill-detail-tabs,.world-map-chapter-nav)::-webkit-scrollbar { display: none; }
  body.mobile-stability-v10112 :where(.tabs,.bank-category-tabs,.activity-filter-bar,.activity-subfilters,.exp-log-detail-tabs,.skill-detail-tabs,.world-map-chapter-nav) > button {
    flex: 0 0 auto;
  }

  /* Dense detail layouts collapse before they become unreadable. */
  body.mobile-stability-v10112 :where(
    #bankPage .bank-content-rs,
    #equipmentPage .equipment-reference-layout,
    #combatPage .combat-layout-v2,
    .expedition-log-layout,
    #worldMapPage .world-map-layout,
    #denPage .den-reference-top-grid
  ) {
    min-width: 0 !important;
  }

  /* Modal/sheet consistency: square reference frame + safe area. */
  body.mobile-stability-v10112 :where(
    .offline-modal,.cloud-conflict-modal,.expedition-start-modal,.sell-confirm-modal,
    .chapter-finale-modal,.skill-detail-modal,.skill-details-modal,.bank-item-modal-v2
  ) {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  body.mobile-stability-v10112 :where(
    .offline-modal-card,.cloud-conflict-card,.expedition-start-card,.sell-confirm-card,
    .chapter-finale-card,.skill-detail-panel,.skill-details-panel,.bank-item-panel-v2,
    .skill-detail-modal-card
  ) {
    width: 100% !important;
    max-width: none !important;
    max-height: min(90dvh,780px) !important;
    margin: 0 !important;
    padding-bottom: max(14px,var(--jd12-safe-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 0 !important;
    border-color: var(--jd12-line) !important;
    background: #040b0e !important;
    box-shadow: 0 -18px 60px rgba(0,0,0,.68) !important;
  }

  /* Tables keep their data rather than stretching the whole viewport. */
  body.mobile-stability-v10112 :where(.table-wrap,.skill-xp-table-wrap,.leaderboard-table-wrap,.bank-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-stability-v10112 .gain-feed {
    bottom: calc(68px + var(--jd12-safe-bottom)) !important;
    max-width: calc(100vw - 16px);
  }
}

/* =========================================================
   Small phone density pass
   ========================================================= */
@media (max-width: 430px) {
  body.mobile-stability-v10112 { --jd12-phone-gutter: 6px; }
  body.mobile-stability-v10112 .topbar { min-height: 50px !important; }
  body.mobile-stability-v10112 .mobile-nav-primary { padding-inline: 3px !important; gap: 1px !important; }
  body.mobile-stability-v10112 .mobile-nav-item { min-height: 52px !important; }
  body.mobile-stability-v10112 .mobile-nav-item > b { font-size: 8px !important; }
  body.mobile-stability-v10112 .mobile-nav-more { left: 3px !important; right: 3px !important; }

  /* Avoid cramped two-column stat groups on narrow phones. */
  body.mobile-stability-v10112 :where(
    #equipmentPage .equipment-reference-side,
    #combatPage .combat-side-panel,
    #denPage .den-overview-grid,
    #worldMapPage .world-map-heading-stats
  ) {
    grid-template-columns: 1fr !important;
  }

  body.mobile-stability-v10112 .reference-page-heading-title,
  body.mobile-stability-v10112 .world-map-heading,
  body.mobile-stability-v10112 .den-reference-heading {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  body.mobile-stability-v10112 { --jd12-phone-gutter: 4px; }
  body.mobile-stability-v10112 .mobile-nav-item > b { font-size: 7.5px !important; letter-spacing: -.01em; }
  body.mobile-stability-v10112 .mobile-nav-item > span { min-height: 21px !important; }
  body.mobile-stability-v10112 .mobile-interface-icon-art { width: 20px !important; height: 20px !important; }
}

/* Short landscape phones: keep navigation useful without consuming the screen. */
@media (max-width: 820px) and (max-height: 520px) and (orientation: landscape) {
  body.mobile-stability-v10112 .mobile-nav-item { min-height: 44px !important; grid-template-rows: 18px auto; }
  body.mobile-stability-v10112 .mobile-nav-item > span { min-height: 18px !important; }
  body.mobile-stability-v10112 .mobile-interface-icon-art { width: 18px !important; height: 18px !important; }
  body.mobile-stability-v10112 .mobile-nav-more { max-height: 66dvh !important; }
  body.mobile-stability-v10112 .app-main { padding-bottom: calc(56px + var(--jd12-safe-bottom)) !important; }
  body.mobile-stability-v10112 .gain-feed { bottom: calc(58px + var(--jd12-safe-bottom)) !important; }
}

/* Accessibility/performance: do not animate decoration when the user requests less motion. */
@media (prefers-reduced-motion: reduce) {
  body.mobile-stability-v10112 *,
  body.mobile-stability-v10112 *::before,
  body.mobile-stability-v10112 *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}



/* ===== V1.01.14 Enemy emoji placeholder reset ===== */
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  font-size: 28px;
  line-height: 1;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
  display: grid;
  place-items: center;
  font-size: 76px;
  line-height: 1;
}
body.expedition-collections-reference-v10110 .exp-log-stage-portrait {
  font-size: 38px;
  line-height: 1;
}
body.expedition-collections-reference-v10110 .exp-log-route-row > span {
  font-size: 23px;
  line-height: 1;
}
body.expedition-collections-reference-v10110 .exp-log-loot-enemy {
  font-size: 27px;
  line-height: 1;
}
body.expedition-collections-reference-v10110 .exp-log-boss-portrait {
  font-size: 78px;
  line-height: 1;
}
#expeditionsPage .expedition-loot-info-enemy-icon {
  font-size: 22px;
  line-height: 1;
}
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span { font-size: 58px; }
  body.expedition-collections-reference-v10110 .exp-log-boss-portrait { font-size: 60px; }
  body.expedition-collections-reference-v10110 .exp-log-stage-portrait { font-size: 31px; }
}


/* ============================================================
   V1.01.15 — Browser UI Stability Fix
   Retires layout assumptions from the pre-reference modern theme and adds
   desktop guardrails for the final Dark & Gold shell.
   ============================================================ */
@media (min-width: 821px) {
  body.browser-ui-stability-v10115 .reference-sidebar {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.browser-ui-stability-v10115 .app-main,
  body.browser-ui-stability-v10115 main,
  body.browser-ui-stability-v10115 .page,
  body.browser-ui-stability-v10115 .page > * {
    min-width: 0;
  }

  body.browser-ui-stability-v10115 .app-main {
    overflow-x: clip;
  }
}

/* Give narrower browser windows more room without changing the phone layout. */
@media (min-width: 821px) and (max-width: 1180px) {
  body.browser-ui-stability-v10115 { --sidebar-width: 194px; }
  body.browser-ui-stability-v10115 main { padding: 16px 15px 22px; }
  body.browser-ui-stability-v10115 .reference-wordmark { padding-inline: 14px; }
  body.browser-ui-stability-v10115 .sidebar-player-card { margin-inline: 9px; }
  body.browser-ui-stability-v10115 .reference-sidebar .nav-item { padding-inline: 10px; }
}

/* Keep the sign-in screen visually aligned after retiring the legacy theme layer. */
body.browser-ui-stability-v10115 .auth-gate {
  background: rgba(2, 6, 7, .975);
  backdrop-filter: blur(7px);
}
body.browser-ui-stability-v10115 .auth-gate-card {
  border: 1px solid #8d5b1d;
  border-radius: 4px;
  background: #050b0d;
  color: #e5d0a3;
  box-shadow: inset 0 0 0 2px #020506, inset 0 0 0 3px rgba(211,161,77,.18), 0 22px 70px rgba(0,0,0,.48);
  font-family: var(--jd-serif, Georgia, serif);
}
body.browser-ui-stability-v10115 .auth-gate-signin {
  border-radius: 0 !important;
  border-color: rgba(211,161,77,.55) !important;
  background: #071014 !important;
  color: #e7c47c !important;
}

/* ===== V1.01.22 Expedition Key Requirement UX ===== */
body.expedition-collections-reference-v10110 .exp-log-enter-button.missing-key{
  border-color:rgba(213,163,71,.62)!important;
  color:#d9b06a!important;
  background:linear-gradient(180deg,rgba(213,163,71,.09),rgba(213,163,71,.035))!important;
}
body.expedition-collections-reference-v10110 .exp-log-enter-button.missing-key small{color:#c9a158!important;}

/* ===== V1.01.40 All-Device UI Reliability ===== */
.offline-modal,
.cloud-conflict-modal,
.expedition-start-modal,
.sell-confirm-modal,
.chapter-finale-modal,
.skill-detail-modal,
.skill-details-modal,
.bank-item-modal-v2{z-index:5000 !important;}
#resetConfirmModal{z-index:22000 !important;}
.bank-category-swipe-hint{display:none;}
@media (max-width:820px){
  #activitiesPage .activity-filter-toggle,
  #bankPage .bank-category-tabs button,
  #bankPage .bank-filter-toggle{min-height:44px !important;}
}
@media (max-width:520px){
  #bankPage .bank-category-swipe-hint{display:flex;align-items:center;min-height:20px;margin:-1px 2px 1px;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.04em;opacity:.82;}
  #bankPage .bank-category-tabs{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 24px),transparent 100%);}
  #bankPage .bank-category-tabs button{scroll-snap-align:start;}
}
@media (max-width:900px) and (max-height:500px) and (orientation:landscape){
  .current-journey-tracker{grid-template-columns:30px minmax(0,1fr) auto !important;gap:6px !important;margin:4px 8px 0 !important;padding:5px 7px !important;border-radius:9px !important;}
  .current-journey-icon{width:30px !important;height:30px !important;border-radius:8px !important;}
  .current-journey-icon img{width:21px !important;height:21px !important;}
  .current-journey-copy .eyebrow{font-size:8px !important;margin-bottom:1px !important;}
  .current-journey-copy > strong{font-size:11px !important;line-height:1.15 !important;}
  .current-journey-hint,.current-journey-progress,.current-journey-count{display:none !important;}
  .current-journey-actions{grid-column:auto !important;display:flex !important;gap:4px !important;}
  .current-journey-actions button{min-height:36px !important;padding:5px 8px !important;font-size:9px !important;line-height:1.1 !important;}
  .current-journey-actions .secondary{display:none !important;}
  main{padding-top:6px !important;}
}
@media (max-width:820px){
  #combatPage #combatAutoEatControl{min-height:44px !important;padding-block:7px !important;}
}
@media (max-width:820px){
  .offline-modal-card,
  .cloud-conflict-card,
  .expedition-start-card,
  .sell-confirm-card,
  .chapter-finale-card,
  .skill-detail-panel,
  .skill-details-panel,
  .skill-detail-modal-card,
  .bank-item-panel-v2{justify-self:stretch !important;}
}
@media (max-width:820px){
  .offline-modal.open,.cloud-conflict-modal.open,.expedition-start-modal.open,.sell-confirm-modal.open,.chapter-finale-modal.open,.skill-detail-modal.open,.skill-details-modal.open,.bank-item-modal-v2.open{grid-template-columns:minmax(0,1fr) !important;}
  .offline-modal-card,.cloud-conflict-card,.expedition-start-card,.sell-confirm-card,.chapter-finale-card,.skill-detail-panel,.skill-details-panel,.skill-detail-modal-card,.bank-item-panel-v2{width:100vw !important;max-width:100vw !important;box-sizing:border-box !important;}
}

/* ===== V1.01.41 Responsive Edge-Case Lock ===== */
/* The Expedition dossier needs a single-column/tablet layout slightly earlier than the
   historical 860px breakpoint because the desktop sidebar reduces usable content width. */
@media (min-width:521px) and (max-width:1012px){
  body.expedition-collections-reference-v10110 .expedition-log-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }
  body.expedition-collections-reference-v10110 .expedition-log-detail-panel{order:1;}
  body.expedition-collections-reference-v10110 .expedition-log-list-panel{order:2;}
  body.expedition-collections-reference-v10110 .exp-log-region-list{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.expedition-collections-reference-v10110 .exp-log-region-card{display:flex!important;flex-direction:column;min-height:0;}
  body.expedition-collections-reference-v10110 .exp-log-region-art{min-height:86px;border-right:0;border-bottom:1px solid var(--exp10-line-soft);}
  body.expedition-collections-reference-v10110 .exp-log-region-main{padding:8px;}
  body.expedition-collections-reference-v10110 .exp-log-card-title{display:block;}
  body.expedition-collections-reference-v10110 .exp-log-card-title strong{display:block;font-size:12px;}
  body.expedition-collections-reference-v10110 .exp-log-card-title em{display:inline-block;margin-top:4px;font-size:7px;}
  body.expedition-collections-reference-v10110 .exp-log-card-stats{grid-template-columns:1fr;gap:2px;padding-top:7px;}
  body.expedition-collections-reference-v10110 .exp-log-card-stats span{flex-direction:row;justify-content:space-between;}
  body.expedition-collections-reference-v10110 .exp-log-lock-note{display:none;}
  body.expedition-collections-reference-v10110 .exp-log-detail-head{grid-template-columns:120px minmax(0,1fr);}
  body.expedition-collections-reference-v10110 .exp-log-detail-art{min-height:120px;}
  body.expedition-collections-reference-v10110 .exp-log-meta-grid{grid-template-columns:1fr 1fr;}
  body.expedition-collections-reference-v10110 .exp-log-detail-tabs{position:sticky;top:0;z-index:4;background:#071115;}
  body.expedition-collections-reference-v10110 .collection-expedition-ledger{grid-template-columns:1fr;}
  body.expedition-collections-reference-v10110 .collection-expedition-card{grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto;}
  body.expedition-collections-reference-v10110 .collection-expedition-art{min-height:130px;}
}


/* =========================================================
   V1.01.44 — JOURNEYDEN PHONE NAVIGATION ART PASS
   Keeps the V1.01.42 thumb-friendly navigation contract while
   bringing the visual language back to JourneyDen's dark matte,
   antique-gold framed interface.
   ========================================================= */
@media (max-width: 820px) {
  body.phone-nav-style-v10144 .mobile-top-navigation {
    border-top: 1px solid rgba(211,166,76,.64) !important;
    background:
      linear-gradient(180deg,rgba(32,29,21,.97) 0,rgba(12,15,12,.99) 10%,rgba(4,8,7,.995) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,226,154,.08),
      inset 0 7px 18px rgba(181,123,40,.025),
      0 -10px 30px rgba(0,0,0,.56) !important;
    isolation:isolate;
  }
  body.phone-nav-style-v10144 .mobile-top-navigation::before {
    content:"";
    position:absolute;
    z-index:0;
    left:12px;
    right:12px;
    top:2px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(224,181,93,.42) 18%,rgba(224,181,93,.22) 50%,rgba(224,181,93,.42) 82%,transparent);
  }
  body.phone-nav-style-v10144 .mobile-nav-primary {
    z-index:2 !important;
    gap:2px !important;
    padding:6px 5px 6px !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-item {
    position:relative;
    min-height:54px !important;
    padding:4px 2px 5px !important;
    gap:3px !important;
    border:1px solid transparent !important;
    border-radius:3px !important;
    background:transparent !important;
    color:#a99570 !important;
    box-shadow:none !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-item::before {
    content:"";
    position:absolute;
    inset:5px 2px 4px;
    z-index:-1;
    border-left:1px solid rgba(196,151,66,.08);
    border-right:1px solid rgba(196,151,66,.08);
    pointer-events:none;
  }
  body.phone-nav-style-v10144 .mobile-nav-item > span {
    width:28px !important;
    height:27px !important;
    min-height:27px !important;
    margin:0 auto;
    display:grid !important;
    place-items:center;
    border:1px solid rgba(191,145,63,.22);
    border-radius:4px;
    background:linear-gradient(180deg,rgba(22,24,19,.96),rgba(7,10,8,.96));
    box-shadow:inset 0 1px 0 rgba(255,229,167,.035),0 1px 3px rgba(0,0,0,.34);
  }
  body.phone-nav-style-v10144 .mobile-nav-item > span .mobile-interface-icon-art,
  body.phone-nav-style-v10144 .mobile-nav-item > span > img {
    width:20px !important;
    height:20px !important;
    object-fit:contain;
  }
  body.phone-nav-style-v10144 .mobile-nav-item.mobile-more-button > span {
    color:#b99a60;
    font-size:16px !important;
    font-family:Georgia,serif;
    letter-spacing:.08em;
  }
  body.phone-nav-style-v10144 .mobile-nav-item > b {
    color:inherit !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    font-size:8.5px !important;
    font-weight:650 !important;
    letter-spacing:.015em;
    text-shadow:0 1px 0 #000;
  }
  body.phone-nav-style-v10144 .mobile-nav-item:is(.active,.menu-open) {
    border-color:rgba(207,160,72,.42) !important;
    background:
      linear-gradient(180deg,rgba(181,123,40,.12),rgba(88,59,22,.055) 52%,rgba(12,14,10,.18)) !important;
    color:#e7c77f !important;
    box-shadow:
      inset 0 1px 0 rgba(255,225,145,.08),
      inset 0 -2px 0 rgba(192,139,52,.46),
      0 0 0 1px rgba(0,0,0,.20) !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-item:is(.active,.menu-open)::after {
    content:"";
    position:absolute;
    top:-4px;
    left:50%;
    width:7px;
    height:7px;
    transform:translateX(-50%) rotate(45deg);
    border-top:1px solid rgba(238,196,105,.74);
    border-left:1px solid rgba(238,196,105,.74);
    background:#17140d;
    box-shadow:-1px -1px 3px rgba(218,166,70,.12);
  }
  body.phone-nav-style-v10144 .mobile-nav-item:is(.active,.menu-open) > span {
    border-color:rgba(222,176,83,.52);
    background:linear-gradient(180deg,rgba(51,40,22,.98),rgba(13,13,9,.98));
    box-shadow:inset 0 0 0 1px rgba(244,205,118,.055),0 0 8px rgba(181,123,40,.08);
  }

  body.phone-nav-style-v10144 .mobile-nav-more {
    border:1px solid rgba(202,154,65,.48) !important;
    border-bottom-color:rgba(202,154,65,.22) !important;
    border-radius:8px 8px 0 0 !important;
    background:
      linear-gradient(180deg,rgba(20,21,16,.998),rgba(5,9,8,.998) 26%,rgba(3,7,7,.998)) !important;
    box-shadow:inset 0 1px 0 rgba(255,224,144,.06),0 -18px 44px rgba(0,0,0,.66) !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-heading {
    border-bottom:1px solid rgba(195,145,58,.25) !important;
    background:linear-gradient(180deg,#15150f,#090d0b) !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-heading strong {
    color:#e1c079 !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    letter-spacing:.025em;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-heading span {
    color:#8f8064 !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-group {
    border:1px solid rgba(181,123,40,.13) !important;
    background:rgba(7,11,9,.62) !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-label,
  body.phone-nav-style-v10144 .mobile-nav-more-group-label {
    color:#b89554 !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    letter-spacing:.09em !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-item {
    border-color:rgba(181,123,40,.18) !important;
    border-radius:4px !important;
    background:linear-gradient(180deg,rgba(17,20,16,.95),rgba(6,10,8,.95)) !important;
    color:#b5a17c !important;
    box-shadow:inset 0 1px 0 rgba(255,227,164,.025) !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-item > span {
    border-color:rgba(181,123,40,.18) !important;
    background:rgba(2,6,5,.62) !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-more-item.active {
    border-color:rgba(210,163,74,.48) !important;
    background:linear-gradient(180deg,rgba(95,67,27,.24),rgba(24,20,12,.86)) !important;
    color:#e3c47c !important;
    box-shadow:inset 2px 0 0 rgba(207,157,64,.58) !important;
  }
}

@media (max-width: 360px) {
  body.phone-nav-style-v10144 .mobile-nav-primary { gap:1px !important; padding-inline:3px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item { min-height:52px !important; padding-inline:1px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item > span { width:25px !important; height:25px !important; min-height:25px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item > span .mobile-interface-icon-art,
  body.phone-nav-style-v10144 .mobile-nav-item > span > img { width:18px !important; height:18px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item > b { font-size:7.6px !important; }
}

@media (max-width: 820px) and (max-height: 520px) and (orientation: landscape) {
  body.phone-nav-style-v10144 .mobile-nav-primary { padding-top:4px !important; padding-bottom:4px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item { min-height:44px !important; padding-top:3px !important; padding-bottom:3px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item > span { width:22px !important; height:20px !important; min-height:20px !important; border-radius:3px; }
  body.phone-nav-style-v10144 .mobile-nav-item > span .mobile-interface-icon-art,
  body.phone-nav-style-v10144 .mobile-nav-item > span > img { width:16px !important; height:16px !important; }
  body.phone-nav-style-v10144 .mobile-nav-item:is(.active,.menu-open)::after { top:-3px; width:6px; height:6px; }
}


/* =========================================================
   V1.01.45 — JOURNEYDEN ACTIVITY SKILL NAVIGATION
   Keeps the no-horizontal-scroll phone selector from V1.01.42,
   but presents it as an in-world JourneyDen training plaque.
   ========================================================= */
@media (max-width:760px){
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select{
    position:relative;
    display:grid !important;
    grid-template-columns:38px minmax(78px,.7fr) minmax(0,1.3fr) !important;
    gap:8px !important;
    align-items:center !important;
    min-height:60px;
    padding:7px 8px !important;
    overflow:hidden;
    border:1px solid rgba(205,157,69,.48) !important;
    border-radius:5px !important;
    background:
      linear-gradient(180deg,rgba(31,29,21,.97),rgba(11,15,12,.985) 24%,rgba(5,10,8,.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,226,154,.07),
      inset 0 -1px 0 rgba(127,88,29,.16),
      0 5px 16px rgba(0,0,0,.26) !important;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select::before{
    content:"";
    position:absolute;
    left:9px;
    right:9px;
    top:2px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(230,187,98,.36) 25%,rgba(230,187,98,.16) 70%,transparent);
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select::after{
    content:"◆";
    position:absolute;
    left:50%;
    bottom:-5px;
    transform:translateX(-50%);
    color:rgba(214,164,74,.42);
    font-size:8px;
    line-height:1;
    text-shadow:0 1px 0 #000;
    pointer-events:none;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(204,156,69,.36);
    border-radius:4px;
    background:linear-gradient(180deg,rgba(27,28,21,.98),rgba(6,10,8,.98));
    box-shadow:inset 0 1px 0 rgba(255,230,171,.035),0 2px 5px rgba(0,0,0,.32);
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon-art,
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon img{
    width:27px !important;
    height:27px !important;
    object-fit:contain;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    padding-right:4px;
    border-right:1px solid rgba(190,143,57,.16);
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy small{
    color:#a78952 !important;
    font-family:var(--jd-serif,Georgia,serif);
    font-size:7px !important;
    font-weight:700;
    line-height:1.05;
    letter-spacing:.11em;
    text-transform:uppercase;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy strong{
    color:#e1c078;
    font-family:var(--jd-serif,Georgia,serif);
    font-size:10px;
    font-weight:650;
    line-height:1.08;
    letter-spacing:.01em;
    text-shadow:0 1px 0 #000;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-field{
    position:relative;
    display:block;
    min-width:0;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-field::after{
    content:"⌄";
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-54%);
    color:#c7a15b;
    font-family:Georgia,serif;
    font-size:17px;
    line-height:1;
    pointer-events:none;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select select{
    width:100%;
    min-width:0;
    min-height:44px !important;
    padding:8px 30px 8px 10px !important;
    appearance:none;
    -webkit-appearance:none;
    border:1px solid rgba(207,160,72,.42) !important;
    border-radius:4px !important;
    outline:none;
    background:linear-gradient(180deg,rgba(35,32,22,.98),rgba(9,13,10,.98)) !important;
    color:#e6c982 !important;
    font-family:var(--jd-serif,Georgia,serif);
    font-size:13px !important;
    font-weight:650 !important;
    line-height:1.15;
    box-shadow:inset 0 1px 0 rgba(255,227,157,.055),0 1px 3px rgba(0,0,0,.24);
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select select:focus-visible{
    border-color:rgba(235,190,92,.76) !important;
    box-shadow:inset 0 1px 0 rgba(255,235,185,.08),0 0 0 2px rgba(207,160,72,.16) !important;
  }
}

@media (max-width:360px){
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select{
    grid-template-columns:34px minmax(0,1fr) !important;
    grid-template-areas:"icon copy" "field field";
    gap:5px 7px !important;
    padding:6px 7px 7px !important;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon{grid-area:icon;width:32px;height:32px;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon-art,
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon img{width:24px !important;height:24px !important;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy{grid-area:copy;border-right:0;padding-right:0;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy strong{font-size:9.5px;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-field{grid-area:field;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select select{font-size:12px !important;}
}

@media (max-width:760px) and (max-height:520px) and (orientation:landscape){
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select{
    grid-template-columns:30px minmax(70px,.55fr) minmax(0,1.45fr) !important;
    min-height:48px;
    padding:4px 6px !important;
    gap:6px !important;
  }
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon{width:28px;height:28px;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon-art,
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-icon img{width:21px !important;height:21px !important;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy small{font-size:6px !important;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-copy strong{font-size:8.5px;}
  body.activity-nav-style-v10145 #activitiesPage .mobile-activity-skill-select select{min-height:38px !important;padding-block:6px !important;font-size:11px !important;}
}

/* =========================================================
   V1.01.46 — IN-GAME ACTIVITY SKILL PICKER
   Replaces the platform-native mobile select popup with a
   JourneyDen-styled skill sheet while retaining the hidden
   select as an internal compatibility mirror only.
   ========================================================= */
body.activity-skill-picker-v10146 #activitiesPage .mobile-activity-skill-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  pointer-events:none !important;
  opacity:0 !important;
}
body.activity-skill-picker-v10146 #activitiesPage .mobile-activity-skill-field::after{display:none !important;}
body.activity-skill-picker-v10146 #activitiesPage .mobile-activity-skill-picker-button{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(207,160,72,.46);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(35,32,22,.98),rgba(9,13,10,.98));
  color:#e6c982;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:13px;
  font-weight:650;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,227,157,.055),0 1px 3px rgba(0,0,0,.24);
  cursor:pointer;
}
body.activity-skill-picker-v10146 #activitiesPage .mobile-activity-skill-picker-button:focus-visible{
  outline:none;
  border-color:rgba(235,190,92,.8);
  box-shadow:inset 0 1px 0 rgba(255,235,185,.08),0 0 0 2px rgba(207,160,72,.17);
}
body.activity-skill-picker-v10146 #activitiesPage .mobile-activity-skill-picker-chevron{
  flex:0 0 auto;
  color:#c7a15b;
  font-family:Georgia,serif;
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker[hidden]{display:none !important;}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker{
  position:fixed;
  inset:0;
  z-index:6200;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:12px max(10px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(0,5,4,.74);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-panel{
  position:relative;
  width:min(100%,520px);
  max-height:min(82dvh,700px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(211,165,78,.58);
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(40,34,22,.98),rgba(12,17,13,.995) 88px,rgba(5,10,8,.998));
  box-shadow:
    inset 0 1px 0 rgba(255,231,171,.08),
    inset 0 -1px 0 rgba(126,85,27,.2),
    0 18px 54px rgba(0,0,0,.64),
    0 0 0 1px rgba(0,0,0,.45);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-panel::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:3px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(235,191,99,.46),transparent);
  pointer-events:none;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading{
  flex:0 0 auto;
  min-height:76px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:15px 14px 11px;
  border-bottom:1px solid rgba(190,143,57,.22);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading .eyebrow{
  color:#a78952;
  font-size:7px;
  letter-spacing:.14em;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading h3{
  margin:2px 0 2px;
  color:#e5c57d;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:20px;
  line-height:1.08;
  font-weight:650;
  text-shadow:0 1px 0 #000;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading p{
  margin:0;
  color:#a59d8a;
  font-size:11px;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-x{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(194,146,61,.3);
  border-radius:4px;
  background:rgba(4,9,7,.66);
  color:#bfa263;
  font-family:Georgia,serif;
  font-size:22px;
  line-height:1;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-list{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  padding:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(194,148,65,.46) rgba(0,0,0,.18);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice{
  position:relative;
  min-width:0;
  min-height:58px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 12px;
  align-items:center;
  gap:7px;
  padding:7px 7px;
  border:1px solid rgba(145,117,63,.25);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(23,25,19,.96),rgba(7,12,9,.97));
  color:#c9c0aa;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice.active{
  border-color:rgba(222,174,79,.68);
  background:linear-gradient(180deg,rgba(51,41,23,.98),rgba(14,17,11,.99));
  box-shadow:inset 0 1px 0 rgba(255,231,171,.07),0 0 0 1px rgba(193,142,54,.08);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice.skill-locked{opacity:.56;}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(194,149,66,.27);
  border-radius:4px;
  background:rgba(3,8,6,.64);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-icon-art,
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-icon img{
  width:24px !important;
  height:24px !important;
  object-fit:contain;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-copy b{
  overflow:hidden;
  color:#d8c08b;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:11px;
  font-weight:650;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice.active .mobile-activity-skill-choice-copy b{color:#f0d28d;}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-copy small{
  color:#827b6d;
  font-size:8px;
  line-height:1.1;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-choice-state{
  color:#b58d43;
  font-size:9px;
  text-align:center;
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-footer{
  flex:0 0 auto;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(190,143,57,.18);
  background:rgba(4,9,7,.78);
}
body.activity-skill-picker-v10146 .mobile-activity-skill-picker-footer button{
  width:100%;
  min-height:42px;
  border-color:rgba(185,143,63,.35);
  color:#cbb77e;
}
body.activity-skill-picker-open{overflow:hidden !important;}

@media (max-width:760px){
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker{display:flex;}
}
@media (min-width:761px){
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker{display:none !important;}
}
@media (max-width:340px){
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-list{grid-template-columns:1fr;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-choice{min-height:52px;}
}
@media (max-width:760px) and (max-height:420px) and (orientation:landscape){
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker{padding:5px 8px calc(5px + env(safe-area-inset-bottom));}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-panel{max-height:calc(100dvh - 10px);}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading{min-height:52px;padding:8px 10px 7px;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading h3{font-size:16px;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-heading p{display:none;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-x{width:34px;height:34px;flex-basis:34px;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-list{gap:5px;padding:6px 8px;grid-template-columns:repeat(3,minmax(0,1fr));}
  body.activity-skill-picker-v10146 .mobile-activity-skill-choice{min-height:46px;grid-template-columns:28px minmax(0,1fr) 10px;padding:5px;gap:5px;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-choice-icon{width:26px;height:26px;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-choice-icon-art,
  body.activity-skill-picker-v10146 .mobile-activity-skill-choice-icon img{width:19px !important;height:19px !important;}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-footer{padding:5px 8px calc(5px + env(safe-area-inset-bottom));}
  body.activity-skill-picker-v10146 .mobile-activity-skill-picker-footer button{min-height:36px;}
}

/* =========================================================
   V1.01.48 — Direct Crafting Phase 3 / Forge Progression
   ========================================================= */
body.forge-progression-v10148 #activitiesPage .activity-card-ref-main{
  padding-top:7px;
  padding-bottom:7px;
}
body.forge-progression-v10148 #activitiesPage .activity-card-output{
  margin-bottom:4px;
  white-space:normal;
}
body.forge-progression-v10148 #activitiesPage .activity-card-output span{color:#746a59;}
body.forge-progression-v10148 #activitiesPage .activity-click-card .requirements.activity-material-requirements{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:5px;
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
}
body.forge-progression-v10148 #activitiesPage .activity-material-label{
  color:#756b5a;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.forge-progression-v10148 #activitiesPage .activity-material-list{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  min-width:0;
}
body.forge-progression-v10148 #activitiesPage .activity-material-chip{
  display:grid;
  grid-template-columns:18px minmax(0,auto);
  align-items:center;
  gap:4px;
  min-width:0;
  padding:2px 5px 2px 3px;
  border:1px solid rgba(180,116,32,.14);
  background:#030809;
}
body.forge-progression-v10148 #activitiesPage .activity-material-chip.ready{border-color:rgba(143,190,66,.23);}
body.forge-progression-v10148 #activitiesPage .activity-material-chip.missing{border-color:rgba(215,91,66,.28);background:rgba(94,42,31,.09);}
body.forge-progression-v10148 #activitiesPage .activity-material-icon-art,
body.forge-progression-v10148 #activitiesPage .activity-material-icon-art img{
  width:17px!important;
  height:17px!important;
  object-fit:contain;
  image-rendering:pixelated;
}
body.forge-progression-v10148 #activitiesPage .activity-material-copy{
  display:grid;
  min-width:0;
  line-height:1.05;
}
body.forge-progression-v10148 #activitiesPage .activity-material-copy strong{
  overflow:hidden;
  color:#bfa77b;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:8px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.forge-progression-v10148 #activitiesPage .activity-material-copy small{
  margin-top:1px;
  color:#706756;
  font-size:7px;
}
body.forge-progression-v10148 #activitiesPage .activity-material-chip.missing .activity-material-copy strong,
body.forge-progression-v10148 #activitiesPage .activity-material-chip.missing .activity-material-copy small{color:#a87767;}

@media (max-width:760px){
  body.forge-progression-v10148 #activitiesPage .activity-card-ref-main{padding:6px 7px;}
  body.forge-progression-v10148 #activitiesPage .activity-card-output{font-size:8px!important;line-height:1.25;}
  body.forge-progression-v10148 #activitiesPage .activity-click-card .requirements.activity-material-requirements{grid-template-columns:1fr;gap:2px;font-size:8px!important;}
  body.forge-progression-v10148 #activitiesPage .activity-material-list{gap:3px;}
  body.forge-progression-v10148 #activitiesPage .activity-material-chip{grid-template-columns:15px minmax(0,auto);padding:2px 4px 2px 2px;}
  body.forge-progression-v10148 #activitiesPage .activity-material-icon-art,
  body.forge-progression-v10148 #activitiesPage .activity-material-icon-art img{width:14px!important;height:14px!important;}
  body.forge-progression-v10148 #activitiesPage .activity-material-copy strong{font-size:7.5px;}
  body.forge-progression-v10148 #activitiesPage .activity-material-copy small{font-size:6.8px;}
}

/* ========================================================================== 
   V1.01.49 — Direct Crafting Phase 4 / Material Navigation
   ========================================================================== */
.activity-material-list {
  gap: 10px;
}
.activity-material-chip {
  align-items: stretch;
  gap: 10px;
  padding: 9px;
}
.activity-material-need {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 180px;
}
.activity-material-source {
  min-width: 150px;
  max-width: 210px;
  padding: 7px 9px;
  border: 1px solid rgba(212, 174, 91, .28);
  border-radius: 8px;
  background: rgba(17, 15, 13, .62);
  color: inherit;
  text-align: left;
  display: grid;
  gap: 1px;
  cursor: pointer;
}
.activity-material-source:hover,
.activity-material-source:focus-visible {
  border-color: rgba(239, 178, 39, .74);
  background: rgba(239, 178, 39, .09);
  outline: none;
}
.activity-material-source small {
  color: var(--muted, #9c9485);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.activity-material-source strong {
  color: #e9d9b8;
  font-size: 12px;
}
.activity-material-source span {
  color: var(--muted, #9c9485);
  font-size: 10px;
  line-height: 1.25;
}
.activity-material-source.locked {
  border-color: rgba(176, 94, 72, .38);
}
.activity-material-source.locked strong,
.activity-material-source.level-locked strong {
  color: #d7b08b;
}
.activity-material-source.unavailable {
  cursor: default;
  opacity: .72;
}
.activity-card.material-source-target {
  box-shadow: 0 0 0 2px rgba(239, 178, 39, .72), 0 0 24px rgba(239, 178, 39, .16);
}
@media (max-width: 760px) {
  .activity-material-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .activity-material-source {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* Phase 4 specificity bridge over the Phase 3 compact material-chip rules. */
body.forge-progression-v10148 #activitiesPage .activity-material-list{
  gap:6px;
}
body.forge-progression-v10148 #activitiesPage .activity-material-chip{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(150px,210px);
  align-items:stretch;
  gap:8px;
  flex:1 1 360px;
  padding:6px;
}
body.forge-progression-v10148 #activitiesPage .activity-material-need{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
body.forge-progression-v10148 #activitiesPage .activity-material-copy strong{
  white-space:normal;
  text-overflow:clip;
}
body.forge-progression-v10148 #activitiesPage .activity-material-source{
  min-width:0;
  max-width:none;
  width:100%;
}
@media (max-width:760px){
  body.forge-progression-v10148 #activitiesPage .activity-material-list{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }
  body.forge-progression-v10148 #activitiesPage .activity-material-chip{
    grid-template-columns:1fr;
    width:100%;
    min-width:0;
    padding:6px;
  }
  body.forge-progression-v10148 #activitiesPage .activity-material-source{
    min-height:44px;
  }
}


/* V1.01.55 Navigation Icons Phase 2 — production nav lock */
body .main-navigation .nav-interface-icon-art{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.34)) !important;
  opacity:1 !important;
}
body .main-navigation .journey-nav-group .nav-interface-icon-art{
  width:24px !important;
  height:24px !important;
}
body .mobile-interface-icon-art{
  width:25px !important;
  height:25px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.34)) !important;
}
body .mobile-more-interface-icon-art{
  width:22px !important;
  height:22px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.32)) !important;
}
body .reference-page-heading .reference-page-heading-icon img,
body .reference-page-heading-icon img{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.38)) !important;
  opacity:1 !important;
}
body .reference-page-heading .reference-page-heading-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
}
@media (max-width:700px){
  body .mobile-interface-icon-art{width:24px !important;height:24px !important;}
  body .mobile-more-interface-icon-art{width:21px !important;height:21px !important;}
  body .reference-page-heading .reference-page-heading-icon img,
  body .reference-page-heading-icon img{width:26px !important;height:26px !important;}
}


/* V1.01.56 Utility Icons Phase 3 — production utility lock */
body .stat-interface-icon-art,
body .button-interface-icon-art,
body .label-interface-icon-art,
body .settings-card-interface-icon-art,
body .leaderboard-profile-icon-art,
body .offline-interface-icon-art,
body .den-project-interface-icon,
body .den-project-type-interface-icon,
body .farming-contract-interface-icon,
body .sidebar-player-gold img {
  object-fit: contain !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.34)) !important;
  opacity: 1 !important;
}
body .sidebar-player-avatar img {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.38)) !important;
}
body .sidebar-player-gold img { width: 17px !important; height: 17px !important; }
body .button-interface-icon-art { width: 19px !important; height: 19px !important; }
body .label-interface-icon-art { width: 18px !important; height: 18px !important; }
body .stat-interface-icon-art { width: 28px !important; height: 28px !important; }
body .leaderboard-profile-icon-art { width: 30px !important; height: 30px !important; }
body .den-project-interface-icon { width: 29px !important; height: 29px !important; vertical-align: middle; }
body .den-project-type-interface-icon { width: 16px !important; height: 16px !important; vertical-align: -4px; margin-right: 2px; }
body .farming-contract-interface-icon { width: 19px !important; height: 19px !important; vertical-align: middle; }
body .gain-toast .gain-toast-icon-art[src$="/gold.webp"] { object-fit: contain !important; }
@media (max-width:700px){
  body .stat-interface-icon-art { width: 25px !important; height: 25px !important; }
  body .sidebar-player-avatar img { width: 43px !important; height: 43px !important; }
}


/* V1.01.57 ART UI FINAL INTEGRATION
   Canonical production lock for the approved navigation + utility art.
   Keeps full color, protects transparent padding, and gives the detailed
   pixel artwork enough physical size to remain legible in the real UI. */
body .nav-interface-icon-art,
body .mobile-interface-icon-art,
body .mobile-more-interface-icon-art,
body img[src$="/utilities/collections.webp"],
body img[src$="/utilities/settings.webp"],
body img[src$="/utilities/search.webp"],
body img[src$="/utilities/filter.webp"],
body img[src$="/utilities/gold.webp"],
body img[src$="/utilities/inventory_bag.webp"],
body img[src$="/utilities/profile.webp"],
body img[src$="/status/offline.webp"],
body img[src$="/status/notifications.webp"] {
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: saturate(1.12) contrast(1.04) brightness(1.08) drop-shadow(0 1px 3px rgba(0,0,0,.38)) !important;
}

/* Desktop sidebar: let the artwork read as icons, not tiny thumbnails. */
body .main-navigation .nav-item-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  overflow: visible !important;
}
body .main-navigation .journey-nav-group .nav-item-icon {
  width: 35px !important;
  height: 35px !important;
  flex-basis: 35px !important;
}
body.reference-ui-v1011 .main-navigation .nav-interface-icon-art,
body.reference-ui-v1012 .main-navigation .nav-interface-icon-art,
body .main-navigation .nav-interface-icon-art {
  width: 29px !important;
  height: 29px !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: saturate(1.12) contrast(1.04) brightness(1.08) drop-shadow(0 1px 3px rgba(0,0,0,.38)) !important;
}
body.reference-ui-v1012 .main-navigation .den-nav-item .nav-interface-icon-art,
body.reference-ui-v1012 .main-navigation .world-map-nav-item .nav-interface-icon-art,
body .main-navigation .journey-nav-group .nav-interface-icon-art {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

/* Page identity art. */
body .reference-page-heading .reference-page-heading-icon img,
body .reference-page-heading-icon img {
  width: 32px !important;
  height: 32px !important;
}
body .current-journey-icon img {
  object-fit: contain !important;
  filter: saturate(1.12) contrast(1.04) brightness(1.08) drop-shadow(0 1px 3px rgba(0,0,0,.38)) !important;
}
body.den-world-reference-v10111 #denPage .den-hero-emblem img,
body.den-world-reference-v10111 .den-reference-heading .reference-page-heading-icon img,
body .chapter-finale-emblem img,
body .world-map-compass img,
body .world-map-detail-icon img,
body .den-room-icon img {
  filter: saturate(1.12) contrast(1.04) brightness(1.08) drop-shadow(0 1px 3px rgba(0,0,0,.38)) !important;
}

/* Keep the World Map fallback art from being stretched/cropped. */
body.den-world-reference-v10111 #worldMapPage .world-map-detail-art {
  background-size: auto, 86px 86px, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
body.den-world-reference-v10111 #worldMapPage .world-map-detail-art.has-region-art {
  background-size: cover;
  background-position: center;
}

/* Mobile primary bar: preserve compact layout while making artwork readable. */
@media (max-width: 760px) {
  body.phone-nav-style-v10144 .mobile-nav-item > span {
    width: 32px !important;
    height: 31px !important;
    min-height: 31px !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-item > span .mobile-interface-icon-art,
  body.phone-nav-style-v10144 .mobile-nav-item > span > img {
    width: 27px !important;
    height: 27px !important;
  }
  body .mobile-more-interface-icon-art {
    width: 25px !important;
    height: 25px !important;
  }
  body .reference-page-heading .reference-page-heading-icon img,
  body .reference-page-heading-icon img {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Very narrow and landscape phones retain the established compact geometry. */
@media (max-width: 360px) {
  body.phone-nav-style-v10144 .mobile-nav-item > span {
    width: 28px !important;
    height: 27px !important;
    min-height: 27px !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-item > span .mobile-interface-icon-art,
  body.phone-nav-style-v10144 .mobile-nav-item > span > img {
    width: 23px !important;
    height: 23px !important;
  }
}
@media (max-width: 820px) and (max-height: 520px) and (orientation: landscape) {
  body.phone-nav-style-v10144 .mobile-nav-item > span {
    width: 23px !important;
    height: 22px !important;
    min-height: 22px !important;
  }
  body.phone-nav-style-v10144 .mobile-nav-item > span .mobile-interface-icon-art,
  body.phone-nav-style-v10144 .mobile-nav-item > span > img {
    width: 18px !important;
    height: 18px !important;
  }
}
/* END V1.01.57 ART UI FINAL INTEGRATION */

/* ===== V1.01.65 Combat Monster UI Scale Fix =====
   P1B monster artwork is transparent character art, not full-bleed scene art.
   Keep the production source large, but render it with breathing room in the UI. */
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  place-items: center !important;
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: contain !important;
  object-position: center !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
  width: auto !important;
  height: auto !important;
  max-width: 88px !important;
  max-height: 88px !important;
  object-fit: contain !important;
  object-position: center !important;
}
#expeditionsPage .expedition-loot-info-enemy-icon .expedition-loot-enemy-art {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
}
.expedition-key-source-enemy-art {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 64px !important;
    max-height: 64px !important;
  }
  #expeditionsPage .expedition-loot-info-enemy-icon .expedition-loot-enemy-art {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
}
@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 72px !important;
    max-height: 72px !important;
  }
}


/* ===== V1.01.66 Combat monster integration refinement =====
   Goal: stop clipping, anchor monsters cleanly, and make them feel integrated in the panel. */
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 72%, rgba(182,121,34,.12), transparent 62%),
    #020607 !important;
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: translateY(1px);
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.34));
}
body.combat-reference-v1019 #combatPage .combat-fighter-portrait,
body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
  overflow: visible !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
  background:
    radial-gradient(circle at 50% 78%, rgba(182,121,34,.11), transparent 50%),
    radial-gradient(circle at 50% 42%, rgba(182,121,34,.08), transparent 60%),
    #020607;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  padding: 8px 4px 10px !important;
  box-sizing: border-box !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 84px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 7px 10px rgba(0,0,0,.34));
}
#expeditionsPage .expedition-loot-info-enemy-icon,
.expedition-key-source-enemy b {
  overflow: visible !important;
}
#expeditionsPage .expedition-loot-info-enemy-icon .expedition-loot-enemy-art,
.expedition-key-source-enemy-art {
  object-position: center bottom !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-roster-portrait .combat-enemy-icon-art {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
    padding: 6px 2px 8px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 68px !important;
    max-height: 62px !important;
  }
}
@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 62px !important;
    max-height: 56px !important;
  }
}


/* ===== V1.01.67 Remove enemy portrait box ===== */
body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 118px !important;
  margin-bottom: 2px !important;
  overflow: visible !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > small {
  display: none !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  padding: 0 2px 4px !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 50% 88%, rgba(182,121,34,.16), transparent 36%) !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 106px !important;
  max-height: 94px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.36));
}
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
    min-height: 96px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait > span {
    padding: 0 1px 2px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 82px !important;
    max-height: 72px !important;
  }
}
@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait {
    min-height: 88px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-portrait .combat-fighter-enemy-art {
    max-width: 74px !important;
    max-height: 64px !important;
  }
}


/* JourneyDen art reset: neutral world-map placeholder */
.world-map-art-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #3f3f3f;
  border: 1px dashed #777;
  opacity: .42;
  pointer-events: none;
}
.world-map-art-placeholder span {
  font: 700 12px/1 sans-serif;
  letter-spacing: .12em;
  color: #d0d0d0;
}


/* ========================================================================== 
   V1.01.86 — RuneScape-style Smithing navigation / Phase 1
   Primary path: skill status -> category -> material tier -> recipes.
   ========================================================================== */
#activitiesPage .smithing-forge-navigation[hidden] { display: none !important; }
#activitiesPage .smithing-forge-navigation {
  display: grid;
  gap: 10px;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--jd-training-line-soft, rgba(180,116,32,.23));
  background: #04090b;
  box-shadow: inset 0 0 0 1px #020607;
}
#activitiesPage .smithing-forge-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
}
#activitiesPage .smithing-forge-identity {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#activitiesPage .smithing-forge-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(182,121,34,.28);
  background: #020607;
}
#activitiesPage .smithing-forge-icon img,
#activitiesPage .smithing-forge-icon-art { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
#activitiesPage .smithing-forge-identity h3 {
  margin: 1px 0 2px;
  color: #e2c68e;
  font-family: var(--jd-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
}
#activitiesPage .smithing-forge-identity p {
  margin: 0;
  color: #96866d;
  font-size: 12px;
  line-height: 1.35;
}
#activitiesPage .smithing-forge-level {
  display: grid;
  min-width: 82px;
  padding: 7px 10px;
  border: 1px solid rgba(182,121,34,.30);
  background: #020607;
  text-align: right;
}
#activitiesPage .smithing-forge-level small { color: #84755e; font-size: 11px; }
#activitiesPage .smithing-forge-level strong { color: #e1bc70; font-size: 16px; }
#activitiesPage .smithing-forge-xp { display: grid; gap: 5px; }
#activitiesPage .smithing-forge-xp-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #95846a;
  font-size: 11px;
}
#activitiesPage .smithing-forge-xp-track {
  height: 8px;
  overflow: hidden;
  border: 1px solid #3a2a17;
  background: #020607;
}
#activitiesPage .smithing-forge-xp-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#815116,#c98b2f,#edc46d);
}
#activitiesPage .smithing-category-nav {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 4px;
}
#activitiesPage .smithing-nav-tab,
#activitiesPage .smithing-tier-tab {
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(137,91,29,.48);
  border-radius: 0;
  background: #050b0d;
  color: #a99778;
  box-shadow: inset 0 0 0 1px #020607;
}
#activitiesPage .smithing-nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 650;
}
#activitiesPage .smithing-nav-tab small { color: #6f6555; font-size: 10px; }
#activitiesPage .smithing-nav-tab:hover,
#activitiesPage .smithing-tier-tab:hover { border-color: rgba(211,161,77,.65); color: #ddc087; background: #071013; }
#activitiesPage .smithing-nav-tab.active,
#activitiesPage .smithing-tier-tab.active {
  border-color: var(--jd-gold-2,#b67922);
  background: linear-gradient(180deg,rgba(182,121,34,.13),rgba(182,121,34,.035));
  color: #edcf93;
  box-shadow: inset 0 -2px 0 rgba(211,161,77,.72);
}
#activitiesPage .smithing-nav-tab.active small { color: #c7a761; }
#activitiesPage .smithing-tier-navigation {
  display: grid;
  grid-template-columns: 104px minmax(0,1fr);
  align-items: start;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(180,116,32,.14);
}
#activitiesPage .smithing-tier-heading { display: grid; gap: 1px; padding-top: 4px; }
#activitiesPage .smithing-tier-heading > span {
  color: #b9a47e;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#activitiesPage .smithing-tier-heading small { color: #716756; font-size: 10px; }
#activitiesPage .smithing-tier-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
#activitiesPage .smithing-tier-tab {
  display: grid;
  place-items: center;
  gap: 1px;
  min-width: 70px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 650;
}
#activitiesPage .smithing-tier-tab small { color: #776d5c; font-size: 9px; }
#activitiesPage .smithing-tier-tab.locked:not(.active) { opacity: .55; }
#activitiesPage .smithing-tier-tab.active small { color: #c8a965; }
#activitiesPage .activity-browse-controls.smithing-browse-utilities {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#activitiesPage .activity-browse-controls.smithing-browse-utilities .activity-quick-nav { justify-content: flex-end; }
#activitiesPage .activity-browse-controls.smithing-browse-utilities .activity-filter-toggle { min-width: 92px; }

@media (max-width: 980px) {
  #activitiesPage .smithing-category-nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #activitiesPage .smithing-forge-navigation { gap: 9px; margin-bottom: 8px; padding: 9px; }
  #activitiesPage .smithing-forge-head { gap: 8px; }
  #activitiesPage .smithing-forge-identity { grid-template-columns: 42px minmax(0,1fr); gap: 8px; }
  #activitiesPage .smithing-forge-icon { width: 42px; height: 42px; }
  #activitiesPage .smithing-forge-icon img,
  #activitiesPage .smithing-forge-icon-art { width: 30px; height: 30px; }
  #activitiesPage .smithing-forge-identity h3 { font-size: 16px; }
  #activitiesPage .smithing-forge-identity p { display: none; }
  #activitiesPage .smithing-forge-level { min-width: 72px; padding: 6px 8px; }
  #activitiesPage .smithing-forge-level small { font-size: 10px; }
  #activitiesPage .smithing-forge-level strong { font-size: 14px; }
  #activitiesPage .smithing-forge-xp-meta { font-size: 12px; }
  #activitiesPage .smithing-category-nav,
  #activitiesPage .smithing-tier-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #activitiesPage .smithing-category-nav::-webkit-scrollbar,
  #activitiesPage .smithing-tier-nav::-webkit-scrollbar { display: none; }
  #activitiesPage .smithing-nav-tab { flex: 0 0 auto; min-width: 92px; min-height: 44px; font-size: 12px; }
  #activitiesPage .smithing-nav-tab small { font-size: 11px; }
  #activitiesPage .smithing-tier-navigation { grid-template-columns: 1fr; gap: 5px; padding-top: 8px; }
  #activitiesPage .smithing-tier-heading { display: flex; justify-content: space-between; align-items: center; padding: 0; }
  #activitiesPage .smithing-tier-heading > span { font-size: 11px; }
  #activitiesPage .smithing-tier-heading small { font-size: 11px; }
  #activitiesPage .smithing-tier-tab { flex: 0 0 auto; min-width: 76px; min-height: 44px; font-size: 12px; }
  #activitiesPage .smithing-tier-tab small { font-size: 10px; }
  #activitiesPage .activity-browse-controls.smithing-browse-utilities .activity-filter-toggle { min-height: 44px !important; }
}
@media (max-width: 380px) {
  #activitiesPage .smithing-forge-xp-meta { display: grid; gap: 1px; }
  #activitiesPage .smithing-nav-tab { min-width: 88px; }
}


/* ==========================================================================
   V1.01.87 — RuneScape-style Smithing recipe grid / Phase 2
   Compact item tiles replace information-heavy recipe cards. Recipe details
   intentionally move to the Phase 3 selected-recipe panel.
   ========================================================================== */
#activitiesPage #activityCards.smithing-recipe-grid-root {
  display: block;
  min-width: 0;
}
#activitiesPage .smithing-recipe-section {
  margin: 0 0 13px;
  padding: 0;
  border: 0;
  background: transparent;
}
#activitiesPage .smithing-recipe-section:last-child { margin-bottom: 0; }
#activitiesPage .smithing-recipe-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0 2px 5px;
  border-bottom: 1px solid rgba(180,116,32,.16);
}
#activitiesPage .smithing-recipe-section-heading h3 {
  margin: 0;
  color: #c8ae7a;
  font-family: var(--jd-serif, Georgia, serif);
  font-size: 14px;
  font-weight: 600;
}
#activitiesPage .smithing-recipe-section-heading span {
  color: #786d5d;
  font-size: 11px;
}
#activitiesPage .smithing-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 6px;
  min-width: 0;
}
#activitiesPage .smithing-recipe-tile {
  position: relative;
  display: grid;
  grid-template-rows: 54px minmax(30px, auto) auto;
  align-content: start;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 112px;
  padding: 8px 6px 7px;
  overflow: hidden;
  border: 1px solid rgba(116,82,37,.50);
  border-radius: 0;
  background: #04090b;
  color: #b9a781;
  box-shadow: inset 0 0 0 1px #020607;
  cursor: pointer;
  user-select: none;
}
#activitiesPage .smithing-recipe-tile:hover,
#activitiesPage .smithing-recipe-tile:focus-visible {
  border-color: rgba(211,161,77,.72);
  background: #071013;
}
#activitiesPage .smithing-recipe-tile.ready {
  border-color: rgba(165,117,45,.68);
}
#activitiesPage .smithing-recipe-tile.active {
  border-color: #d4a54e;
  background: linear-gradient(180deg,rgba(182,121,34,.16),#050b0d);
  box-shadow: inset 0 -2px 0 rgba(222,177,87,.78), inset 0 0 0 1px #020607;
}
#activitiesPage .smithing-recipe-tile.level-locked {
  opacity: .44;
  filter: saturate(.55);
}
#activitiesPage .smithing-recipe-tile.materials-missing:not(.level-locked) {
  opacity: .72;
}
#activitiesPage .smithing-recipe-tile-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  min-width: 0;
}
#activitiesPage .smithing-recipe-tile-icon .jd-item-icon,
#activitiesPage .smithing-recipe-tile-icon img,
#activitiesPage .smithing-recipe-icon-art {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
#activitiesPage .smithing-recipe-tile-name {
  display: -webkit-box;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #c9b58e;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
}
#activitiesPage .smithing-recipe-tile-level {
  align-self: end;
  color: #897960;
  font-size: 11px;
  font-weight: 650;
}
#activitiesPage .smithing-recipe-tile.ready .smithing-recipe-tile-level,
#activitiesPage .smithing-recipe-tile.active .smithing-recipe-tile-level {
  color: #c6a565;
}
#activitiesPage .smithing-recipe-tile-state {
  position: absolute;
  inset: 4px 4px auto auto;
  width: 7px;
  height: 7px;
  overflow: hidden;
  border: 1px solid #3b2a18;
  background: #5a4d3c;
  color: transparent;
  font-size: 0;
}
#activitiesPage .smithing-recipe-tile.ready .smithing-recipe-tile-state {
  border-color: #8e6b2f;
  background: #b98b3f;
}
#activitiesPage .smithing-recipe-tile.active .smithing-recipe-tile-state {
  border-color: #ddb65f;
  background: #e3bd68;
}
#activitiesPage .smithing-recipe-tile.level-locked .smithing-recipe-tile-state {
  border-color: #4a4440;
  background: #5b5650;
}

@media (min-width: 1180px) {
  #activitiesPage .smithing-recipe-grid {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  }
}
@media (max-width: 760px) {
  #activitiesPage .smithing-recipe-section { margin-bottom: 11px; }
  #activitiesPage .smithing-recipe-section-heading { margin-bottom: 5px; }
  #activitiesPage .smithing-recipe-section-heading h3 { font-size: 14px; }
  #activitiesPage .smithing-recipe-section-heading span { font-size: 11px; }
  #activitiesPage .smithing-recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  #activitiesPage .smithing-recipe-tile {
    grid-template-rows: 46px minmax(29px, auto) auto;
    min-height: 104px;
    padding: 7px 4px 6px;
  }
  #activitiesPage .smithing-recipe-tile-icon { width: 46px; height: 46px; }
  #activitiesPage .smithing-recipe-tile-icon .jd-item-icon,
  #activitiesPage .smithing-recipe-tile-icon img,
  #activitiesPage .smithing-recipe-icon-art {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  #activitiesPage .smithing-recipe-tile-name { font-size: 12px; }
  #activitiesPage .smithing-recipe-tile-level { font-size: 11px; }
}
@media (max-width: 350px) {
  #activitiesPage .smithing-recipe-grid { gap: 4px; }
  #activitiesPage .smithing-recipe-tile { padding-left: 3px; padding-right: 3px; }
  #activitiesPage .smithing-recipe-tile-name { font-size: 11px; }
}


/* ==========================================================================
   V1.01.88 — RuneScape-style idle Smithing panel / Phase 3
   Smithing keeps JourneyDen's normal continuous activity loop: one click starts
   a recipe and the forge repeats it automatically. No batch/quantity controls.
   ========================================================================== */
#activitiesPage .smithing-forge-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 12px;
  align-items: start;
  min-width: 0;
}
#activitiesPage .smithing-recipe-board { min-width: 0; }
#activitiesPage .smithing-active-panel {
  position: sticky;
  top: 10px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(130,91,38,.62);
  border-radius: 0;
  background: #050a0c;
  box-shadow: inset 0 0 0 1px #020607;
}
#activitiesPage .smithing-active-heading {
  display: grid;
  grid-template-columns: 60px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(180,116,32,.18);
}
#activitiesPage .smithing-active-item-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
}
#activitiesPage .smithing-active-item-icon .jd-item-icon,
#activitiesPage .smithing-active-item-icon img,
#activitiesPage .smithing-active-item-art {
  width: 54px;
  height: 54px;
  max-width: 54px;
  max-height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
}
#activitiesPage .smithing-active-heading h3,
#activitiesPage .smithing-active-empty h3 {
  margin: 2px 0 3px;
  color: #d0b67e;
  font-family: var(--jd-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}
#activitiesPage .smithing-active-heading small,
#activitiesPage .smithing-active-empty p,
#activitiesPage .smithing-active-other span {
  color: #8e816c;
  font-size: 12px;
  line-height: 1.45;
}
#activitiesPage .smithing-active-loop-note {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-left: 2px solid #9f7435;
  background: rgba(159,116,53,.08);
}
#activitiesPage .smithing-active-loop-note strong { color: #c9aa6a; font-size: 12px; }
#activitiesPage .smithing-active-loop-note span { color: #877b68; font-size: 11px; line-height: 1.35; }
#activitiesPage .smithing-active-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}
#activitiesPage .smithing-active-stats > div {
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(109,78,37,.42);
  background: #030709;
}
#activitiesPage .smithing-active-stats small { color: #766c5c; font-size: 11px; }
#activitiesPage .smithing-active-stats strong { color: #c8ac71; font-size: 14px; }
#activitiesPage .smithing-active-materials { display: grid; gap: 6px; }
#activitiesPage .smithing-active-subheading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
#activitiesPage .smithing-active-subheading span { color: #b9a57c; font-size: 12px; font-weight: 650; }
#activitiesPage .smithing-active-subheading small { color: #776d5e; font-size: 10px; text-align: right; }
#activitiesPage .smithing-active-material {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto;
  grid-template-areas: "icon name need" "icon owned owned";
  column-gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(88,68,42,.42);
  background: #030709;
}
#activitiesPage .smithing-active-material.missing { border-color: rgba(133,67,47,.64); }
#activitiesPage .smithing-active-material-icon { grid-area: icon; display:grid; place-items:center; width:26px; height:26px; }
#activitiesPage .smithing-active-material-icon .jd-item-icon,
#activitiesPage .smithing-active-material-icon img,
#activitiesPage .smithing-active-material-art { width:24px; height:24px; max-width:24px; max-height:24px; object-fit:contain; image-rendering:pixelated; }
#activitiesPage .smithing-active-material-name { grid-area:name; min-width:0; overflow:hidden; color:#a99879; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
#activitiesPage .smithing-active-material strong { grid-area:need; color:#cbb179; font-size:11px; }
#activitiesPage .smithing-active-material small { grid-area:owned; color:#736958; font-size:10px; text-align:right; }
#activitiesPage .smithing-active-material.missing strong,
#activitiesPage .smithing-active-material.missing small { color:#a86d5c; }
#activitiesPage .smithing-active-progress { display:grid; gap:5px; }
#activitiesPage .smithing-active-progress .progress-meta { font-size:11px; }
#activitiesPage .smithing-active-progress .progress-track { height:9px; }
#activitiesPage .smithing-active-stop { width:100%; min-height:40px; }
#activitiesPage .smithing-active-empty { display:grid; gap:7px; }
#activitiesPage .smithing-active-empty p { margin:0; }
#activitiesPage .smithing-active-other {
  display:grid;
  gap:2px;
  margin-top:4px;
  padding-top:9px;
  border-top:1px solid rgba(180,116,32,.15);
}
#activitiesPage .smithing-active-other small { color:#746a5c; font-size:10px; }
#activitiesPage .smithing-active-other strong { color:#ae9b76; font-size:11px; }

@media (max-width: 980px) {
  #activitiesPage .smithing-forge-workspace { grid-template-columns: 1fr; }
  #activitiesPage .smithing-recipe-board { order: 1; }
  #activitiesPage .smithing-active-panel { position: static; order: 2; }
}
@media (max-width: 760px) {
  #activitiesPage .smithing-active-panel { gap: 10px; padding: 10px; }
  #activitiesPage .smithing-active-heading { grid-template-columns: 50px minmax(0,1fr); gap:8px; }
  #activitiesPage .smithing-active-item-icon { width:50px; height:50px; }
  #activitiesPage .smithing-active-item-icon .jd-item-icon,
  #activitiesPage .smithing-active-item-icon img,
  #activitiesPage .smithing-active-item-art { width:46px; height:46px; max-width:46px; max-height:46px; }
  #activitiesPage .smithing-active-heading h3,
  #activitiesPage .smithing-active-empty h3 { font-size:16px; }
  #activitiesPage .smithing-active-stop { min-height:44px; }
}

/* ========================================================================== 
   V1.01.89 — Smithing responsive polish / Phase 4
   Keeps the RuneScape-style forge dense on desktop and touch-first on mobile.
   Phase 5 will consolidate the versioned Smithing CSS into reusable components.
   ========================================================================== */

/* The app sidebar + activity skill picker reduce the usable forge width long
   before the viewport itself looks "mobile". Collapse the detail rail early
   enough that the recipe board never gets squeezed into a narrow desktop strip. */
@media (max-width: 1180px) {
  #activitiesPage .smithing-forge-workspace { grid-template-columns: 1fr; }
  #activitiesPage .smithing-recipe-board { order: 1; }
  #activitiesPage .smithing-active-panel {
    position: static;
    order: 2;
    width: 100%;
  }

  #activitiesPage .smithing-category-nav,
  #activitiesPage .smithing-tier-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #activitiesPage .smithing-category-nav::-webkit-scrollbar,
  #activitiesPage .smithing-tier-nav::-webkit-scrollbar { display: none; }
  #activitiesPage .smithing-nav-tab,
  #activitiesPage .smithing-tier-tab { flex: 0 0 auto; scroll-snap-align: start; }
  #activitiesPage .smithing-nav-tab { min-width: 96px; }
  #activitiesPage .smithing-tier-tab { min-width: 78px; }

  /* Once the Active Forge moves below the board, use the wider tablet space
     instead of leaving a tall narrow desktop-card layout. */
  #activitiesPage .smithing-active-panel.running {
    grid-template-columns: minmax(0, 1.15fr) minmax(180px, .85fr);
    column-gap: 12px;
  }
  #activitiesPage .smithing-active-panel.running .smithing-active-heading,
  #activitiesPage .smithing-active-panel.running .smithing-active-loop-note,
  #activitiesPage .smithing-active-panel.running .smithing-active-progress,
  #activitiesPage .smithing-active-panel.running .smithing-active-stop {
    grid-column: 1 / -1;
  }
  #activitiesPage .smithing-active-panel.running .smithing-active-stats { align-self: start; }
  #activitiesPage .smithing-active-panel.running .smithing-active-materials { align-self: start; }
}

@media (min-width: 1181px) {
  #activitiesPage .smithing-forge-workspace {
    grid-template-columns: minmax(0, 1fr) clamp(270px, 22vw, 304px);
    gap: 14px;
  }
}

/* Phone forge: preserve the three-column RuneScape-style board, but make every
   interaction comfortably tappable and keep names aligned even when long. */
@media (max-width: 760px) {
  #activitiesPage .smithing-forge-navigation { padding: 8px; }
  #activitiesPage .smithing-forge-head { align-items: stretch; }
  #activitiesPage .smithing-forge-level {
    display: flex;
    min-width: 70px;
    flex-direction: column;
    justify-content: center;
  }
  #activitiesPage .smithing-nav-tab,
  #activitiesPage .smithing-tier-tab { min-height: 46px; }

  #activitiesPage .smithing-recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  #activitiesPage .smithing-recipe-tile {
    min-height: 106px;
    padding-top: 7px;
    touch-action: manipulation;
  }
  #activitiesPage .smithing-recipe-tile-name {
    min-height: 2.4em;
    -webkit-line-clamp: 2;
  }

  /* Empty state stays after the recipes. Once Smithing is running, surface the
     live forge first so progress/Stop are immediately visible after a tap. */
  #activitiesPage .smithing-recipe-board { order: 1; }
  #activitiesPage .smithing-active-panel.empty { order: 2; }
  #activitiesPage .smithing-active-panel.running { order: 0; }
  #activitiesPage .smithing-active-panel.running {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  #activitiesPage .smithing-active-panel.running .smithing-active-heading,
  #activitiesPage .smithing-active-panel.running .smithing-active-loop-note,
  #activitiesPage .smithing-active-panel.running .smithing-active-stats,
  #activitiesPage .smithing-active-panel.running .smithing-active-materials,
  #activitiesPage .smithing-active-panel.running .smithing-active-progress,
  #activitiesPage .smithing-active-panel.running .smithing-active-stop {
    grid-column: auto;
  }
  #activitiesPage .smithing-active-heading { padding-bottom: 8px; }
  #activitiesPage .smithing-active-loop-note { padding: 7px 8px; }
  #activitiesPage .smithing-active-stop { min-height: 48px; }
}

@media (max-width: 380px) {
  #activitiesPage .smithing-forge-identity { grid-template-columns: 38px minmax(0,1fr); }
  #activitiesPage .smithing-forge-icon { width: 38px; height: 38px; }
  #activitiesPage .smithing-forge-icon img,
  #activitiesPage .smithing-forge-icon-art { width: 28px; height: 28px; }
  #activitiesPage .smithing-forge-level { min-width: 66px; padding-inline: 6px; }
  #activitiesPage .smithing-nav-tab { min-width: 90px; }
  #activitiesPage .smithing-tier-tab { min-width: 74px; }
  #activitiesPage .smithing-recipe-tile {
    min-height: 102px;
    padding-inline: 3px;
  }
  #activitiesPage .smithing-recipe-tile-icon { width: 42px; height: 42px; }
  #activitiesPage .smithing-recipe-tile-icon .jd-item-icon,
  #activitiesPage .smithing-recipe-tile-icon img,
  #activitiesPage .smithing-recipe-icon-art {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
  }
  #activitiesPage .smithing-recipe-tile-name { font-size: 11px; }
}

/* Laptop/tablet category navigation keeps the merged furnace + forge choices
   visible as a compact two-row board; phones keep the one-row swipe strip. */
@media (min-width: 761px) and (max-width: 1180px) {
  #activitiesPage .smithing-category-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    scroll-snap-type: none;
  }
  #activitiesPage .smithing-nav-tab {
    width: auto;
    min-width: 0;
  }
}

/* ========================================================================== 
   V1.01.92 — Cooking hearth UI parity
   Cooking uses the established production-skill shell with two category tabs
   and level-band navigation instead of metal material tiers.
   ========================================================================== */
@media (min-width: 981px) {
  #activitiesPage .cooking-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#activitiesPage .cooking-tier-tab { min-width: 92px; }

/* ========================================================================== 
   V1.01.93 — Construction workshop UI parity
   Construction uses the established production-skill shell and keeps its
   current live content focused on reusable Den/world-building components.
   ========================================================================== */
@media (min-width: 981px) {
  #activitiesPage .construction-category-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#activitiesPage .construction-tier-tab { min-width: 82px; }


/* ========================================================================== 
   V1.01.94 — Apothecary alchemy UI parity
   Apothecary joins the shared compact idle production shell while preserving
   formula families, potion tiers, effects, and secondary-save mechanics.
   ========================================================================== */
@media (min-width: 1181px) {
  #activitiesPage .apothecary-category-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
#activitiesPage .apothecary-tier-tab { min-width: 88px; }
#activitiesPage .apothecary-recipe-tile.rare-formula {
  box-shadow: inset 0 0 0 1px rgba(209,177,104,.16), inset 0 -2px 0 rgba(211,161,77,.34);
}

/* V1.01.115 Farming stop control */
body.skills-activities-reference-v1018 #activitiesPage .farming-stop-button {
  border: 1px solid rgba(150,72,58,.72);
  border-radius: 0;
  background: linear-gradient(180deg,rgba(116,42,32,.28),rgba(69,24,20,.18));
  color: #d9a097;
  font-family: var(--jd-serif);
}

/* =========================================================
   V1.01.122 — Combat roster XP simplification
   Keep only XP in the Enemy Roster and place it beside the mob name.
   Recommended Combat Level and gold stay out of the roster card.
   ========================================================= */
body.combat-reference-v1019 #combatPage .combat-enemy-card {
  grid-template-columns: 52px minmax(0,1fr);
  grid-template-areas: "portrait copy";
  column-gap: 8px;
  row-gap: 0;
  min-height: 62px;
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  grid-area: portrait;
}
body.combat-reference-v1019 #combatPage .combat-enemy-copy {
  grid-area: copy;
  min-width: 0;
}
body.combat-reference-v1019 #combatPage .combat-enemy-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
body.combat-reference-v1019 #combatPage .combat-enemy-name-row strong {
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
body.combat-reference-v1019 #combatPage .combat-enemy-xp {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: #cfa762;
  font-family: var(--jd-serif);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}
body.combat-reference-v1019 #combatPage .combat-enemy-copy small {
  display: block;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 1260px) and (min-width: 761px) {
  body.combat-reference-v1019 #combatPage .combat-enemy-card {
    grid-template-columns: 46px minmax(0,1fr);
    min-height: 62px;
    column-gap: 7px;
  }
  body.combat-reference-v1019 #combatPage .combat-roster-portrait {
    width: 44px;
    height: 44px;
  }
}

/* JourneyDen UI source: styles/ui-foundation-locked-phase5.css | sha256:0133c34f6af52dd5024b224d851f0fd2de79442859f623e0fb7a8f52c0c53f35 */
/* JourneyDen V1.01.72 — Final UI Cleanup & Lock Phase 5
   Canonical production UI-foundation layer.

   This stylesheet consolidates the approved UI-only cleanup layers from
   V1.01.68–V1.01.71 in their original cascade order. The source phase files
   remain in /styles only as regression/history references and are no longer
   loaded by index.html.

   Scope remains UI-only: structure, spacing, controls, states, responsiveness,
   and consistency. No artwork, sprite, icon, pixel-art, or asset styling is
   introduced here.
*/

/* =========================================================
   Phase 1 — Modern styling cleanup
   Source: ui-fantasy-cleanup-phase1.css
   ========================================================= */
/* JourneyDen V1.01.68 — UI Preparation Phase 1
   Remove residual modern web-app styling while preserving layout and gameplay.
   Art remains placeholders-only. This layer intentionally loads after the
   consolidated reference UI so the cleanup is isolated and reversible. */

body.ui-fantasy-cleanup-p1 {
  /* Keep the established dark/antique-gold palette, but stop panels from
     reading as soft floating cards. */
  --jd-panel-shadow:
    inset 0 0 0 2px #030709,
    inset 0 0 0 3px rgba(182,121,34,.07);
  --shadow: var(--jd-panel-shadow);
  background: linear-gradient(180deg, #050a0c 0%, #020607 100%) !important;
}

/* Remove ambient/glass-like glow from the game frame. */
body.ui-fantasy-cleanup-p1 .app-main,
body.ui-fantasy-cleanup-p1 main {
  background-image: none !important;
}

/* Panels should feel inset into a game frame, not elevated off a webpage. */
body.ui-fantasy-cleanup-p1 :where(
  .card,
  .item-card,
  .bank-row,
  .activity-sidebar-panel,
  .current-activity-card,
  .den-hero,
  .den-overview-card,
  .journey-journal,
  .den-progression-panel,
  .world-project-card,
  .leaderboard-panel,
  .settings-card,
  .combat-style-panel,
  .combat-roster-panel,
  .combat-battle-panel,
  .combat-food-panel-v2,
  .combat-session-panel,
  .expedition-regions-panel,
  .expedition-detail-panel,
  .mastery-panel,
  .offline-mastery-panel,
  .achievement-overview-card,
  .achievement-card,
  .collection-card,
  .farming-contract-card,
  .farming-plot-card,
  .potion-preset-card,
  .den-tier-card,
  .den-room-card,
  .equipment-card,
  .equipment-consumable-card,
  .equipment-item-preview-card,
  .combat-equipment-card,
  .expedition-encounter-card,
  .expedition-region-card,
  .expedition-region-hero,
  .expedition-progress-overview,
  .expedition-now-running,
  .expedition-player-power
) {
  border-radius: 0 !important;
  box-shadow:
    inset 0 0 0 2px #030709,
    inset 0 0 0 3px rgba(182,121,34,.06) !important;
}

/* Neutral dark surfaces replace glossy/soft card gradients. */
body.ui-fantasy-cleanup-p1 :where(
  .card,
  .activity-sidebar-panel,
  .current-activity-card,
  .den-hero,
  .den-overview-card,
  .journey-journal,
  .den-progression-panel,
  .world-project-card,
  .leaderboard-panel,
  .settings-card,
  .combat-style-panel,
  .combat-roster-panel,
  .combat-battle-panel,
  .combat-food-panel-v2,
  .combat-session-panel,
  .expedition-regions-panel,
  .expedition-detail-panel,
  .mastery-panel,
  .offline-mastery-panel,
  .achievement-overview-card,
  .farming-contract-card,
  .farming-plot-card,
  .potion-preset-card,
  .expedition-region-hero,
  .expedition-progress-overview,
  .expedition-player-power
) {
  background: #071012 !important;
}

/* Buttons stay clean and readable, but lose glossy web-button treatment. */
body.ui-fantasy-cleanup-p1 button:not(.world-map-node) {
  border-radius: 0 !important;
  background: #091012 !important;
  box-shadow: inset 0 0 0 1px rgba(3,7,8,.82) !important;
  transform: none;
}
body.ui-fantasy-cleanup-p1 button:not(.world-map-node):hover:not(:disabled) {
  background: #0d1517 !important;
  box-shadow: inset 0 0 0 1px rgba(182,121,34,.14) !important;
  transform: none !important;
}
body.ui-fantasy-cleanup-p1 button:not(.world-map-node):active:not(:disabled) {
  transform: none !important;
}

/* Pills are useful as information, but their silhouette should match the
   angular UI. Progress bars are handled separately below. */
body.ui-fantasy-cleanup-p1 :where(
  .activity-card-state,
  .bank-equipped-pill-rs,
  .combat-food-state,
  .expedition-region-state,
  .expedition-state-badge,
  .expedition-phase-active,
  .expedition-start-cost,
  .expedition-region-tags > span,
  .expedition-player-power-stats > span,
  .expedition-loot-chip,
  .status-chip,
  .stat-chip,
  .tag,
  .badge,
  .chip,
  .pill
) {
  border-radius: 2px !important;
}

/* Progress/health bars become crisp interface rails instead of capsules. */
body.ui-fantasy-cleanup-p1 :where(
  .progress-track,
  .health-bar,
  .skill-card-progress,
  .bank-discovery-bar,
  .combat-health-bar,
  .expedition-health-track,
  .expedition-progress-track,
  .expedition-kill-bar,
  .farming-growth-track,
  .current-journey-progress,
  .den-storage-bar,
  .journey-journal-progress,
  .active-potion-track
),
body.ui-fantasy-cleanup-p1 :where(
  .progress-track,
  .health-bar,
  .skill-card-progress,
  .bank-discovery-bar,
  .combat-health-bar,
  .expedition-health-track,
  .expedition-progress-track,
  .expedition-kill-bar,
  .farming-growth-track,
  .current-journey-progress,
  .den-storage-bar,
  .journey-journal-progress,
  .active-potion-track
) > span {
  border-radius: 0 !important;
}

/* Modals become framed game windows. No frosted glass and no giant soft
   elevation shadows. */
body.ui-fantasy-cleanup-p1 :where(
  .skill-detail-backdrop,
  .skill-details-backdrop,
  .bank-item-backdrop-v2,
  .expedition-start-backdrop,
  .sell-confirm-backdrop,
  .chapter-finale-backdrop,
  .mobile-activity-skill-picker-backdrop
) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(1,5,7,.78) !important;
}
body.ui-fantasy-cleanup-p1 :where(
  .modal,
  .offline-modal-card,
  .cloud-conflict-card,
  .expedition-start-card,
  .sell-confirm-card,
  .chapter-finale-card,
  .skill-detail-panel,
  .skill-details-panel,
  .skill-detail-modal-card,
  .bank-item-panel-v2,
  .reset-confirm-card,
  .auth-gate-card,
  .mobile-activity-skill-picker-panel
) {
  border-radius: 0 !important;
  border-color: rgba(182,121,34,.48) !important;
  background: #061014 !important;
  box-shadow:
    inset 0 0 0 2px #020607,
    inset 0 0 0 3px rgba(182,121,34,.07) !important;
}

/* Header/navigation should feel attached to the frame, not like translucent
   floating browser chrome. */
body.ui-fantasy-cleanup-p1 .topbar,
body.ui-fantasy-cleanup-p1 .mobile-top-navigation,
body.ui-fantasy-cleanup-p1 .mobile-nav-more {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ui-fantasy-cleanup-p1 .topbar {
  box-shadow: inset 0 -1px rgba(182,121,34,.18) !important;
}
body.ui-fantasy-cleanup-p1 .mobile-top-navigation {
  box-shadow: inset 0 1px rgba(182,121,34,.18) !important;
}
body.ui-fantasy-cleanup-p1 .mobile-nav-more {
  box-shadow:
    inset 0 0 0 2px #020607,
    inset 0 0 0 3px rgba(182,121,34,.06) !important;
}

/* Remove lingering hover-lift behavior from card-like controls. */
body.ui-fantasy-cleanup-p1 :where(
  .activity-click-card,
  .skill-card,
  .bank-card-v2,
  .bank-slot-rs,
  .enemy-card-v2,
  .expedition-region-card,
  .expedition-encounter-card,
  .achievement-card,
  .collection-card
):hover {
  transform: none !important;
}

/* Keep circles only where the shape communicates the object itself. */
body.ui-fantasy-cleanup-p1 :where(
  .character-head,
  .avatar,
  .status-dot,
  .notification-dot
) {
  border-radius: 50% !important;
}

/* Phone keeps the proven layout; Phase 1 only removes modern surface effects. */
@media (max-width: 820px) {
  body.ui-fantasy-cleanup-p1 .topbar,
  body.ui-fantasy-cleanup-p1 .mobile-top-navigation,
  body.ui-fantasy-cleanup-p1 .mobile-nav-more {
    background: #03090c !important;
  }
  body.ui-fantasy-cleanup-p1 :where(
    .offline-modal-card,
    .cloud-conflict-card,
    .expedition-start-card,
    .sell-confirm-card,
    .chapter-finale-card,
    .skill-detail-panel,
    .skill-details-panel,
    .bank-item-panel-v2,
    .skill-detail-modal-card,
    .mobile-activity-skill-picker-panel
  ) {
    border-radius: 0 !important;
    box-shadow: inset 0 1px rgba(182,121,34,.18) !important;
  }
}

/* =========================================================
   Phase 2 — Shared UI standardization
   Source: ui-standardization-phase2.css
   ========================================================= */
/* JourneyDen V1.01.69 — UI Standardization Phase 2
   Purpose: unify UI structure and interaction sizing across screens.
   This phase is intentionally art-neutral: no sprite, icon, image, palette,
   typography-art, or asset-direction rules are introduced here. */

body.ui-standardization-p2 {
  --jd-ui-space-1: 4px;
  --jd-ui-space-2: 8px;
  --jd-ui-space-3: 12px;
  --jd-ui-space-4: 16px;
  --jd-ui-space-5: 20px;
  --jd-ui-space-6: 24px;
  --jd-ui-panel-pad: 16px;
  --jd-ui-panel-gap: 12px;
  --jd-ui-control-h: 38px;
  --jd-ui-control-h-compact: 34px;
  --jd-ui-control-pad-x: 12px;
  --jd-ui-tab-gap: 6px;
  --jd-ui-progress-h: 8px;
  --jd-ui-border: rgba(182,121,34,.28);
  --jd-ui-border-strong: rgba(182,121,34,.48);
  --jd-ui-focus: rgba(211,161,77,.78);
  --jd-ui-disabled-opacity: .48;
}

/* ---------- Shared section rhythm ---------- */
body.ui-standardization-p2 :where(
  .page-header,
  .section-header,
  .panel-heading,
  .leaderboard-panel-heading,
  .combat-panel-heading,
  .combat-battle-panel-heading,
  .den-progression-heading,
  .equipment-progression-header,
  .card-header
) {
  margin-bottom: var(--jd-ui-space-3) !important;
}

body.ui-standardization-p2 :where(
  .card,
  .activity-sidebar-panel,
  .current-activity-card,
  .den-hero,
  .den-overview-card,
  .journey-journal,
  .den-progression-panel,
  .world-project-card,
  .leaderboard-panel,
  .settings-card,
  .combat-style-panel,
  .combat-roster-panel,
  .combat-battle-panel,
  .combat-food-panel-v2,
  .combat-session-panel,
  .expedition-regions-panel,
  .expedition-detail-panel,
  .mastery-panel,
  .offline-mastery-panel,
  .achievement-overview-card,
  .achievement-card,
  .collection-card,
  .farming-contract-card,
  .farming-plot-card,
  .potion-preset-card,
  .den-tier-card,
  .den-room-card,
  .equipment-card,
  .equipment-consumable-card,
  .equipment-item-preview-card,
  .combat-equipment-card,
  .expedition-encounter-card,
  .expedition-region-card,
  .expedition-region-hero,
  .expedition-progress-overview,
  .expedition-now-running,
  .expedition-player-power,
  .guide-panel,
  .mastery-summary-card
) {
  box-sizing: border-box;
}

/* Main framed panels use the same internal breathing room unless a screen
   deliberately manages its own grid/slot padding. */
body.ui-standardization-p2 :where(
  .activity-sidebar-panel,
  .current-activity-card,
  .den-hero,
  .den-progression-panel,
  .leaderboard-panel,
  .settings-card,
  .combat-style-panel,
  .combat-roster-panel,
  .combat-battle-panel,
  .combat-food-panel-v2,
  .combat-session-panel,
  .expedition-regions-panel,
  .expedition-detail-panel,
  .mastery-panel,
  .offline-mastery-panel,
  .achievement-overview-card,
  .equipment-card,
  .expedition-region-hero,
  .expedition-progress-overview,
  .expedition-player-power,
  .guide-panel
) {
  padding: var(--jd-ui-panel-pad) !important;
}

/* ---------- Buttons / interactive controls ---------- */
body.ui-standardization-p2 :where(
  button:not(.world-map-node),
  .btn,
  .button,
  .primary-button,
  .secondary-button,
  .text-button,
  .google-signin-button,
  .reset-request-button,
  .equipment-best-loadout-button,
  .equipment-secondary-button,
  .combat-stop-button,
  .exp-log-enter-button,
  .expedition-preview-button,
  .expedition-loot-info-button,
  .craft-button,
  .equip-button,
  .buy-button
) {
  box-sizing: border-box;
  min-height: var(--jd-ui-control-h);
  padding: 7px var(--jd-ui-control-pad-x) !important;
  line-height: 1.15;
  gap: var(--jd-ui-space-2);
}

/* Tiny icon/close controls keep compact footprints without inheriting a wide
   button shape. */
body.ui-standardization-p2 :where(
  .bank-selected-close-rs,
  .modal-close,
  .close-button,
  .icon-button
) {
  min-width: var(--jd-ui-control-h-compact);
  min-height: var(--jd-ui-control-h-compact);
  padding: 5px !important;
}

body.ui-standardization-p2 :where(
  button,
  .btn,
  .button,
  [role="button"],
  a,
  input,
  select,
  textarea
):focus-visible {
  outline: 2px solid var(--jd-ui-focus) !important;
  outline-offset: 2px !important;
}

body.ui-standardization-p2 :where(
  button,
  .btn,
  .button,
  [role="button"],
  input,
  select,
  textarea
):disabled,
body.ui-standardization-p2 :where(
  button,
  .btn,
  .button,
  [role="button"]
)[aria-disabled="true"] {
  opacity: var(--jd-ui-disabled-opacity) !important;
  cursor: not-allowed !important;
  filter: none !important;
  transform: none !important;
}

/* ---------- Inputs / selects ---------- */
body.ui-standardization-p2 :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select
) {
  box-sizing: border-box;
  min-height: var(--jd-ui-control-h);
  padding: 7px 10px !important;
  line-height: 1.2;
}

body.ui-standardization-p2 textarea {
  box-sizing: border-box;
  min-height: 84px;
  padding: 9px 10px !important;
  line-height: 1.35;
  resize: vertical;
}

body.ui-standardization-p2 :where(input, select, textarea) {
  border-width: 1px !important;
  border-color: var(--jd-ui-border) !important;
}

body.ui-standardization-p2 :where(input, select, textarea):focus {
  border-color: var(--jd-ui-border-strong) !important;
}

/* ---------- Tabs and segmented navigation ---------- */
body.ui-standardization-p2 :where(
  .tabs,
  .skill-tabs,
  .mastery-skill-tabs,
  .bank-category-tabs,
  .leaderboard-tabs,
  .achievement-filter-tabs,
  .exp-log-filter-tabs,
  .exp-log-detail-tabs,
  .skill-detail-tabs,
  .activity-filter-bar,
  .activity-subfilters,
  .world-map-chapter-nav
) {
  gap: var(--jd-ui-tab-gap) !important;
  align-items: stretch;
}

body.ui-standardization-p2 :where(
  .tabs,
  .skill-tabs,
  .mastery-skill-tabs,
  .bank-category-tabs,
  .leaderboard-tabs,
  .achievement-filter-tabs,
  .exp-log-filter-tabs,
  .exp-log-detail-tabs,
  .skill-detail-tabs,
  .activity-filter-bar,
  .activity-subfilters,
  .world-map-chapter-nav
) > :where(button, [role="tab"]) {
  min-height: var(--jd-ui-control-h-compact);
  padding: 6px 10px !important;
  box-sizing: border-box;
}

body.ui-standardization-p2 :where(
  .tabs,
  .skill-tabs,
  .mastery-skill-tabs,
  .bank-category-tabs,
  .leaderboard-tabs,
  .achievement-filter-tabs,
  .exp-log-filter-tabs,
  .exp-log-detail-tabs,
  .skill-detail-tabs,
  .activity-filter-bar,
  .activity-subfilters,
  .world-map-chapter-nav
) > :where(button, [role="tab"]).active,
body.ui-standardization-p2 :where(
  .tabs,
  .skill-tabs,
  .mastery-skill-tabs,
  .bank-category-tabs,
  .leaderboard-tabs,
  .achievement-filter-tabs,
  .exp-log-filter-tabs,
  .exp-log-detail-tabs,
  .skill-detail-tabs,
  .activity-filter-bar,
  .activity-subfilters,
  .world-map-chapter-nav
) > :where(button, [role="tab"])[aria-selected="true"] {
  border-color: var(--jd-ui-border-strong) !important;
}

/* ---------- Progress / HP / XP rails ---------- */
body.ui-standardization-p2 :where(
  .progress-track,
  .health-bar,
  .skill-card-progress,
  .bank-discovery-bar,
  .combat-health-bar,
  .combat-progress-track,
  .expedition-health-track,
  .expedition-progress-track,
  .expedition-kill-bar,
  .farming-growth-track,
  .current-journey-progress,
  .journey-journal-progress,
  .den-storage-bar,
  .den-project-progress,
  .den-project-ledger-progress,
  .active-potion-track,
  .achievement-progress,
  .collection-progress,
  .activity-progress,
  .activity-mastery-progress
) {
  min-height: var(--jd-ui-progress-h);
  box-sizing: border-box;
}

/* ---------- Dense form/control groups ---------- */
body.ui-standardization-p2 :where(
  .activity-compact-selects,
  .farming-plot-form,
  .bank-advanced-filters,
  .bank-sell-buttons-rs,
  .bank-sell-buttons-v2,
  .equipment-supply-row,
  .potion-preset-select,
  .combat-selected-food-summary,
  .expedition-progress-metrics
) {
  gap: var(--jd-ui-space-2) !important;
}

/* ---------- Modal/window consistency ---------- */
body.ui-standardization-p2 :where(
  .modal,
  .offline-modal-card,
  .cloud-conflict-card,
  .expedition-start-card,
  .sell-confirm-card,
  .chapter-finale-card,
  .skill-detail-panel,
  .skill-details-panel,
  .skill-detail-modal-card,
  .bank-item-panel-v2,
  .reset-confirm-card,
  .auth-gate-card,
  .mobile-activity-skill-picker-panel
) {
  box-sizing: border-box;
  padding: var(--jd-ui-panel-pad) !important;
}

body.ui-standardization-p2 :where(
  .modal-actions,
  .offline-modal-actions,
  .cloud-conflict-actions,
  .expedition-start-actions,
  .sell-confirm-actions,
  .chapter-finale-actions,
  .reset-confirm-actions
) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jd-ui-space-2) !important;
  align-items: center;
}

/* ---------- Reusable grid rhythm ---------- */
body.ui-standardization-p2 :where(
  .card-grid,
  .activity-card-grid,
  .achievement-grid,
  .collection-grid,
  .settings-grid,
  .den-overview-grid,
  .den-room-grid
) {
  gap: var(--jd-ui-panel-gap) !important;
}

/* Avoid layout jumps when labels are short/long. */
body.ui-standardization-p2 :where(button, .btn, .button, [role="button"], select) {
  white-space: normal;
}

/* ---------- Mobile / touch consistency ---------- */
@media (max-width: 820px) {
  body.ui-standardization-p2 {
    --jd-ui-panel-pad: 12px;
    --jd-ui-panel-gap: 10px;
    --jd-ui-control-h: 42px;
    --jd-ui-control-h-compact: 40px;
    --jd-ui-control-pad-x: 11px;
  }

  body.ui-standardization-p2 :where(
    button:not(.world-map-node),
    .btn,
    .button,
    .primary-button,
    .secondary-button,
    .google-signin-button,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select
  ) {
    min-height: var(--jd-ui-control-h);
  }

  body.ui-standardization-p2 :where(
    .tabs,
    .skill-tabs,
    .mastery-skill-tabs,
    .bank-category-tabs,
    .leaderboard-tabs,
    .achievement-filter-tabs,
    .exp-log-filter-tabs,
    .exp-log-detail-tabs,
    .skill-detail-tabs,
    .activity-filter-bar,
    .activity-subfilters,
    .world-map-chapter-nav
  ) > :where(button, [role="tab"]) {
    min-height: var(--jd-ui-control-h-compact);
  }

  body.ui-standardization-p2 :where(
    .modal-actions,
    .offline-modal-actions,
    .cloud-conflict-actions,
    .expedition-start-actions,
    .sell-confirm-actions,
    .chapter-finale-actions,
    .reset-confirm-actions
  ) > :where(button, .btn, .button) {
    flex: 1 1 140px;
  }
}

@media (max-width: 430px) {
  body.ui-standardization-p2 {
    --jd-ui-panel-pad: 10px;
    --jd-ui-panel-gap: 8px;
  }

  body.ui-standardization-p2 :where(
    .activity-compact-selects,
    .farming-plot-form,
    .bank-advanced-filters
  ) {
    gap: 6px !important;
  }
}

/* =========================================================
   Phase 3 — Screen consistency
   Source: ui-screen-consistency-phase3.css
   ========================================================= */
/* JourneyDen V1.01.70 — Screen-by-Screen UI Consistency Phase 3
   Scope: page hierarchy, spacing, alignment, layout rhythm, empty/action areas.
   Art-neutral by design: no image, sprite, icon, asset, palette, or art-direction
   rules are introduced in this phase. */

body.ui-screen-consistency-p3 {
  --jd-ui-screen-gap: 12px;
  --jd-ui-screen-gap-lg: 14px;
  --jd-ui-screen-gap-sm: 10px;
  --jd-ui-readable-line: 72ch;
  --jd-ui-panel-min: 0;
}

/* =========================================================
   Shared page hierarchy
   ========================================================= */
body.ui-screen-consistency-p3 .page {
  min-width: 0;
  width: 100%;
}

/* Page headings from different historical UI phases now land on the same
   vertical rhythm without changing their existing visual treatment. */
body.ui-screen-consistency-p3 :where(
  #activitiesPage > .reference-training-heading,
  #skillsPage > .reference-training-heading,
  #masteryPage > .reference-page-heading,
  #offlineMasteryPage > .reference-page-heading,
  #guidePage > .reference-page-heading,
  #achievementsPage > .reference-page-heading,
  #expeditionsPage > .expedition-log-page-heading,
  #combatPage > .reference-combat-heading,
  #bankPage > .reference-page-heading,
  #equipmentPage > .reference-page-heading,
  #leaderboardsPage > .reference-page-heading,
  #settingsPage > .reference-page-heading,
  #shopPage > .reference-page-heading
) {
  margin-bottom: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 :where(
  .reference-page-heading-title,
  .reference-page-heading-title > div,
  .reference-subheading > div,
  .panel-heading > div,
  .combat-panel-heading > div,
  .combat-style-heading > div,
  .mastery-section-heading > div,
  .den-progression-heading > div,
  .den-route-project-heading > div
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 :where(
  .reference-page-heading-title p,
  .reference-training-heading p,
  .reference-combat-heading p,
  .expedition-log-page-heading p,
  .den-reference-heading p,
  #worldMapPage .world-map-heading p
) {
  max-width: var(--jd-ui-readable-line);
}

/* Consistent major-screen spacing. */
body.ui-screen-consistency-p3 :where(
  #denPage .den-shell,
  #worldMapPage .world-map-shell
) {
  gap: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 :where(
  #activitiesPage .activity-layout,
  #combatPage .combat-command-deck,
  #combatPage .combat-layout-v2,
  #expeditionsPage .expedition-log-layout,
  #equipmentPage .equipment-reference-layout,
  #equipmentPage .equipment-supplies-reference-grid,
  #guidePage .guide-layout,
  #worldMapPage .world-map-layout,
  #denPage .den-reference-top-grid
) {
  gap: var(--jd-ui-screen-gap) !important;
}

/* Shared subsection headings: content on the left, state/action on the right,
   with wrapping available before labels collide. */
body.ui-screen-consistency-p3 :where(
  .reference-subheading,
  .equipment-clean-heading,
  .activity-header,
  .combat-panel-heading,
  .combat-style-heading,
  .combat-skills-inline-heading,
  .mastery-section-heading,
  .den-progression-heading,
  .den-route-project-heading,
  .journey-journal-heading,
  .leaderboard-panel-heading
) {
  column-gap: var(--jd-ui-screen-gap-sm) !important;
  row-gap: 6px !important;
}

/* =========================================================
   Activities
   ========================================================= */
body.ui-screen-consistency-p3 #activitiesPage .activity-layout {
  align-items: start;
}

body.ui-screen-consistency-p3 #activitiesPage .activity-content {
  min-width: 0;
  display: grid;
  gap: var(--jd-ui-screen-gap);
  align-content: start;
}

body.ui-screen-consistency-p3 #activitiesPage :where(
  .current-activity-card,
  .smithing-forge-progression,
  .activity-browse-controls,
  .activity-card-grid,
  .mobile-skill-training-summary
) {
  margin-block: 0 !important;
}

body.ui-screen-consistency-p3 #activitiesPage .activity-quick-nav {
  gap: var(--jd-ui-screen-gap-sm) !important;
  align-items: stretch;
}

body.ui-screen-consistency-p3 #activitiesPage .activity-main-filters {
  min-width: 0;
}

body.ui-screen-consistency-p3 #activitiesPage .activity-advanced-filters {
  margin-top: var(--jd-ui-screen-gap-sm) !important;
}

body.ui-screen-consistency-p3 #activitiesPage .activity-filter-actions {
  min-width: 0;
  gap: var(--jd-ui-screen-gap-sm) !important;
}

/* =========================================================
   Skills / Mastery / Offline / Collections / Guide
   ========================================================= */
body.ui-screen-consistency-p3 :where(
  #skillsPage .card-grid,
  #shopPage .card-grid,
  #masteryPage .mastery-summary-grid,
  #offlineMasteryPage .mastery-summary-grid,
  #achievementsPage .collections-page-summary,
  #achievementsPage .achievement-grid
) {
  gap: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 :where(
  #masteryPage .mastery-summary-grid,
  #offlineMasteryPage .mastery-summary-grid
) {
  margin-top: 0 !important;
  margin-bottom: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 #masteryPage .mastery-skill-tabs {
  margin-bottom: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 :where(
  #masteryPage .mastery-section,
  #offlineMasteryPage .mastery-section
) {
  margin-bottom: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 :where(
  #masteryPage .mastery-section:last-child,
  #offlineMasteryPage .mastery-section:last-child
) {
  margin-bottom: 0 !important;
}

body.ui-screen-consistency-p3 #achievementsPage :where(
  .collections-page-summary,
  .collection-expedition-ledger-section
) {
  margin-bottom: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 #guidePage .guide-layout {
  align-items: start;
}

body.ui-screen-consistency-p3 #guidePage :where(.guide-sidebar, .guide-panel) {
  min-width: 0;
}

/* =========================================================
   Expeditions
   ========================================================= */
body.ui-screen-consistency-p3 #expeditionsPage .expedition-log-layout {
  align-items: start;
}

body.ui-screen-consistency-p3 #expeditionsPage :where(
  .expedition-log-list-panel,
  .expedition-log-detail-panel
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #expeditionsPage .expedition-log-page-heading {
  align-items: center;
}

/* =========================================================
   Combat
   ========================================================= */
body.ui-screen-consistency-p3 #combatPage .combat-command-deck {
  margin-bottom: var(--jd-ui-screen-gap) !important;
  align-items: stretch;
}

body.ui-screen-consistency-p3 #combatPage .combat-layout-v2 {
  align-items: start;
}

body.ui-screen-consistency-p3 #combatPage :where(
  .combat-skills-inline-panel,
  .combat-style-panel,
  .combat-roster-panel,
  .combat-battle-panel,
  .combat-side-panel,
  .combat-food-panel-v2,
  .combat-session-panel
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #combatPage .combat-side-panel {
  display: grid;
  gap: var(--jd-ui-screen-gap);
  align-content: start;
}

body.ui-screen-consistency-p3 #combatPage :where(
  .combat-food-panel-v2,
  .combat-session-panel
) {
  margin: 0 !important;
}

body.ui-screen-consistency-p3 #combatPage .combat-panel-heading {
  min-height: 0 !important;
  align-items: center;
}

/* =========================================================
   Bank
   ========================================================= */
body.ui-screen-consistency-p3 #bankPage .bank-shell-rs {
  min-width: 0;
}

body.ui-screen-consistency-p3 #bankPage .bank-main-nav {
  min-width: 0;
  gap: var(--jd-ui-screen-gap-sm) !important;
}

body.ui-screen-consistency-p3 #bankPage .bank-category-tabs {
  min-width: 0;
}

body.ui-screen-consistency-p3 #bankPage .bank-advanced-filters {
  align-items: end;
  gap: var(--jd-ui-screen-gap-sm) !important;
}

body.ui-screen-consistency-p3 #bankPage .bank-content-rs {
  gap: var(--jd-ui-screen-gap) !important;
  align-items: stretch;
}

body.ui-screen-consistency-p3 #bankPage :where(
  .bank-grid-panel-rs,
  .bank-selected-panel-rs
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #bankPage .bank-discovery-rs {
  gap: 6px !important;
}

/* =========================================================
   Equipment
   ========================================================= */
body.ui-screen-consistency-p3 #equipmentPage .equipment-reference-layout,
body.ui-screen-consistency-p3 #equipmentPage .equipment-supplies-reference-grid {
  margin-bottom: var(--jd-ui-screen-gap) !important;
  align-items: stretch;
}

body.ui-screen-consistency-p3 #equipmentPage :where(
  .equipment-clean-section,
  .equipment-reference-side,
  .equipment-potion-frame,
  .equipment-food-frame,
  .equipment-summary-frame,
  .equipment-detail-frame
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #equipmentPage .equipment-reference-side {
  gap: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 #equipmentPage .equipment-clean-heading {
  margin-bottom: var(--jd-ui-screen-gap-sm) !important;
}

/* =========================================================
   Den / World Map
   ========================================================= */
body.ui-screen-consistency-p3 #denPage :where(
  .den-reference-top-grid,
  .den-overview-grid,
  .den-project-ledger,
  .den-project-requirements,
  .den-tier-roadmap
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #denPage .den-overview-grid {
  gap: var(--jd-ui-screen-gap-sm) !important;
}

body.ui-screen-consistency-p3 #denPage :where(
  .journey-journal,
  .den-progression-panel,
  .den-route-project,
  .den-project-ledger-panel
) {
  margin-block: 0 !important;
}

body.ui-screen-consistency-p3 #worldMapPage :where(
  .world-map-heading,
  .world-map-layout,
  .world-map-canvas,
  .world-map-details,
  .world-map-heading-stats
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #worldMapPage .world-map-heading {
  gap: var(--jd-ui-screen-gap) !important;
}

/* =========================================================
   Leaderboards / Settings / Shop
   ========================================================= */
body.ui-screen-consistency-p3 #leaderboardsPage .leaderboard-tabs {
  margin-bottom: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 #leaderboardsPage :where(
  .leaderboard-tabs,
  .leaderboard-panel,
  .leaderboard-rows
) {
  min-width: 0;
}

body.ui-screen-consistency-p3 #settingsPage .settings-grid {
  align-items: stretch;
  gap: var(--jd-ui-screen-gap) !important;
}

body.ui-screen-consistency-p3 #settingsPage .settings-card {
  min-width: 0;
  align-content: start;
}

body.ui-screen-consistency-p3 #settingsPage :where(
  .settings-name-row,
  .settings-action-row
) {
  gap: var(--jd-ui-screen-gap-sm) !important;
}

body.ui-screen-consistency-p3 #shopPage .card-grid {
  align-items: stretch;
}

/* =========================================================
   Medium layouts — consistency only; Phase 4 owns the deeper mobile pass.
   ========================================================= */
@media (max-width: 1120px) {
  body.ui-screen-consistency-p3 {
    --jd-ui-screen-gap: 10px;
    --jd-ui-screen-gap-lg: 12px;
  }

  body.ui-screen-consistency-p3 :where(
    #activitiesPage .activity-layout,
    #combatPage .combat-command-deck,
    #combatPage .combat-layout-v2,
    #expeditionsPage .expedition-log-layout,
    #equipmentPage .equipment-reference-layout,
    #equipmentPage .equipment-supplies-reference-grid,
    #guidePage .guide-layout,
    #worldMapPage .world-map-layout,
    #denPage .den-reference-top-grid
  ) {
    gap: var(--jd-ui-screen-gap) !important;
  }
}

@media (max-width: 820px) {
  body.ui-screen-consistency-p3 {
    --jd-ui-screen-gap: 10px;
    --jd-ui-screen-gap-sm: 8px;
  }

  body.ui-screen-consistency-p3 :where(
    #activitiesPage > .reference-training-heading,
    #skillsPage > .reference-training-heading,
    #masteryPage > .reference-page-heading,
    #offlineMasteryPage > .reference-page-heading,
    #guidePage > .reference-page-heading,
    #achievementsPage > .reference-page-heading,
    #expeditionsPage > .expedition-log-page-heading,
    #combatPage > .reference-combat-heading,
    #bankPage > .reference-page-heading,
    #equipmentPage > .reference-page-heading,
    #leaderboardsPage > .reference-page-heading,
    #settingsPage > .reference-page-heading,
    #shopPage > .reference-page-heading
  ) {
    margin-bottom: var(--jd-ui-screen-gap) !important;
  }

  body.ui-screen-consistency-p3 :where(
    .reference-subheading,
    .equipment-clean-heading,
    .activity-header,
    .combat-panel-heading,
    .combat-style-heading,
    .mastery-section-heading,
    .den-progression-heading,
    .den-route-project-heading,
    .journey-journal-heading
  ) {
    min-width: 0;
  }
}

/* =========================================================
   Phase 4 — Mobile & responsive pass
   Source: ui-responsive-phase4.css
   ========================================================= */
/* JourneyDen V1.01.71 — Mobile & Responsive UI Pass Phase 4
   Scope: responsiveness, touch sizing, stacking, overflow, safe areas, modal fit,
   and low-height landscape usability. UI-only by design: no artwork, sprite,
   icon, palette, or asset-presentation rules are introduced here. */

body.ui-responsive-p4 {
  --jd4-touch: 44px;
  --jd4-phone-gutter: 8px;
  --jd4-safe-top: env(safe-area-inset-top, 0px);
  --jd4-safe-right: env(safe-area-inset-right, 0px);
  --jd4-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jd4-safe-left: env(safe-area-inset-left, 0px);
  --jd4-nav-clearance: 74px;
}

/* Prevent responsive grids and long generated labels from forcing viewport width. */
body.ui-responsive-p4 :where(
  .page,
  .page > *,
  .reference-page-heading,
  .reference-page-heading-title,
  .reference-training-heading,
  .reference-combat-heading,
  .activity-layout,
  .combat-command-deck,
  .combat-layout-v2,
  .expedition-log-layout,
  .equipment-reference-layout,
  .guide-layout,
  .world-map-layout,
  .den-reference-top-grid,
  .settings-grid
) {
  min-width: 0;
}

@media (max-width: 820px) {
  body.ui-responsive-p4 {
    --jd4-phone-gutter: 8px;
  }

  /* Fixed bottom navigation always receives enough document clearance. */
  body.ui-responsive-p4 .app-main {
    min-width: 0 !important;
    padding-bottom: calc(var(--jd4-nav-clearance) + var(--jd4-safe-bottom)) !important;
  }

  body.ui-responsive-p4 main {
    min-width: 0 !important;
    max-width: none !important;
    margin-left: max(var(--jd4-phone-gutter), var(--jd4-safe-left)) !important;
    margin-right: max(var(--jd4-phone-gutter), var(--jd4-safe-right)) !important;
  }

  /* Reliable tablet/phone touch targets. Hidden compatibility controls are exempt. */
  body.ui-responsive-p4 :where(
    .page button,
    .page [role="button"],
    .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .page select,
    .page textarea,
    .mobile-nav-more-item
  ):not(.bank-slot-rs):not(.world-map-node):not(.mobile-activity-skill-native-select) {
    min-height: var(--jd4-touch) !important;
  }

  body.ui-responsive-p4 :where(.page input, .page select, .page textarea) {
    max-width: 100%;
    min-width: 0;
  }

  /* Native text fields stay zoom-safe on touch browsers. */
  body.ui-responsive-p4 :where(
    .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    .page select,
    .page textarea
  ):not(.mobile-activity-skill-native-select) {
    font-size: 16px !important;
  }

  /* Shared page headings can wrap actions/stats instead of squeezing copy. */
  body.ui-responsive-p4 :where(
    .reference-page-heading,
    .reference-training-heading,
    .reference-combat-heading,
    .expedition-log-page-heading,
    #worldMapPage .world-map-heading,
    #denPage .den-reference-heading
  ) {
    min-width: 0 !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }

  body.ui-responsive-p4 :where(
    .reference-page-heading-title,
    .reference-page-heading-title > div,
    .reference-training-heading > div,
    .reference-combat-heading > div,
    .expedition-log-page-heading > div,
    #worldMapPage .world-map-heading > div,
    #denPage .den-reference-heading > div
  ) {
    min-width: 0 !important;
  }

  /* High-cardinality phone selectors must be genuinely touch-sized. */
  body.ui-responsive-p4 :where(
    .mobile-mastery-skill-select select,
    .mobile-leaderboard-select select,
    .mobile-bank-category-select select,
    .mobile-activity-skill-picker-button
  ) {
    min-height: var(--jd4-touch) !important;
  }

  /* Collections controls already wrap; normalize them at the tablet boundary too. */
  body.ui-responsive-p4 #achievementsPage :where(
    .achievement-filter-tools select,
    .achievement-filter-tools input,
    .achievement-filter-tabs button
  ) {
    min-height: var(--jd4-touch) !important;
  }

  body.ui-responsive-p4 #equipmentPage .equipment-best-loadout-button,
  body.ui-responsive-p4 #settingsPage :where(input, select, button) {
    min-height: var(--jd4-touch) !important;
  }

  /* Bottom sheets/dialogs remain fully scrollable inside the dynamic viewport. */
  body.ui-responsive-p4 :where(
    .offline-modal-card,
    .cloud-conflict-card,
    .expedition-start-card,
    .sell-confirm-card,
    .chapter-finale-card,
    .skill-detail-panel,
    .skill-details-panel,
    .skill-detail-modal-card,
    .bank-item-panel-v2,
    #resetConfirmModal .reset-confirm-card
  ) {
    max-height: calc(100dvh - max(12px, var(--jd4-safe-top))) !important;
    overscroll-behavior: contain;
  }

  /* More menu respects notch/landscape insets and never extends offscreen. */
  body.ui-responsive-p4 .mobile-nav-more {
    left: max(5px, var(--jd4-safe-left)) !important;
    right: max(5px, var(--jd4-safe-right)) !important;
    max-height: min(72dvh, 620px) !important;
    overscroll-behavior: contain;
  }

  body.ui-responsive-p4 .mobile-nav-primary {
    padding-left: max(5px, var(--jd4-safe-left)) !important;
    padding-right: max(5px, var(--jd4-safe-right)) !important;
  }

  /* Responsive data regions scroll internally rather than widening the page. */
  body.ui-responsive-p4 :where(
    .table-wrap,
    .skill-xp-table-wrap,
    .leaderboard-table-wrap,
    .bank-table-wrap
  ) {
    width: 100%;
    max-width: 100%;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 760px) {
  body.ui-responsive-p4 {
    --jd4-phone-gutter: 7px;
  }

  /* Screen-level two-column shells become dependable single-column flows. */
  body.ui-responsive-p4 :where(
    #activitiesPage .activity-layout,
    #combatPage .combat-layout-v2,
    #expeditionsPage .expedition-log-layout,
    #equipmentPage .equipment-reference-layout,
    #guidePage .guide-layout,
    #worldMapPage .world-map-layout,
    #denPage .den-reference-top-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Keep heading-side actions readable instead of compressing them into slivers. */
  body.ui-responsive-p4 :where(
    #settingsPage .settings-action-row,
    #settingsPage .settings-name-row,
    #equipmentPage .equipment-slot-detail-actions,
    #expeditionsPage .expedition-log-page-heading,
    #worldMapPage .world-map-heading
  ) {
    min-width: 0;
  }

  /* Modal action rows get full touch targets even on older short-layout rules. */
  body.ui-responsive-p4 :where(
    .offline-modal-card,
    .cloud-conflict-card,
    .expedition-start-card,
    .sell-confirm-card,
    .chapter-finale-card,
    .skill-detail-panel,
    .skill-details-panel,
    .skill-detail-modal-card,
    .bank-item-panel-v2,
    #resetConfirmModal .reset-confirm-card
  ) :where(button, [role="button"]) {
    min-height: var(--jd4-touch) !important;
  }
}

@media (max-width: 430px) {
  body.ui-responsive-p4 {
    --jd4-phone-gutter: 6px;
    --jd4-nav-clearance: 72px;
  }

  /* Narrow-phone forms stack cleanly instead of shrinking action buttons. */
  body.ui-responsive-p4 #settingsPage :where(
    .settings-name-row,
    .settings-action-row
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ui-responsive-p4 #settingsPage :where(
    .settings-name-row > *,
    .settings-action-row > *
  ) {
    width: 100%;
    min-width: 0;
  }

  body.ui-responsive-p4 #achievementsPage .achievement-filter-tools {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ui-responsive-p4 #achievementsPage #achievementSearchInput {
    grid-column: auto !important;
  }

  /* Long heading-side state moves beneath copy on narrow devices. */
  body.ui-responsive-p4 :where(
    .mastery-section-heading,
    .equipment-clean-heading,
    .den-progression-heading,
    .den-route-project-heading,
    .leaderboard-panel-heading
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ui-responsive-p4 :where(
    .mastery-section-heading > span,
    .equipment-clean-heading > small,
    .den-progression-heading > span,
    .den-route-project-heading > span,
    .leaderboard-panel-heading > span
  ) {
    max-width: none !important;
    text-align: left !important;
  }
}

@media (max-width: 340px) {
  body.ui-responsive-p4 {
    --jd4-phone-gutter: 4px;
  }

  /* Extremely narrow screens trade density for reliable readability. */
  body.ui-responsive-p4 :where(
    #masteryPage .mastery-summary-grid,
    #offlineMasteryPage .mastery-summary-grid,
    #equipmentPage .equipment-combat-stats,
    #worldMapPage .world-map-heading-stats
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Short landscape phones need touch targets without losing the entire play area. */
@media (max-width: 820px) and (max-height: 520px) and (orientation: landscape) {
  body.ui-responsive-p4 {
    --jd4-phone-gutter: 5px;
    --jd4-nav-clearance: 60px;
  }

  body.ui-responsive-p4 .mobile-nav-more {
    max-height: calc(100dvh - 54px - var(--jd4-safe-top) - var(--jd4-safe-bottom)) !important;
  }

  body.ui-responsive-p4 .current-journey-actions button,
  body.ui-responsive-p4 .expedition-start-actions button {
    min-height: var(--jd4-touch) !important;
  }

  body.ui-responsive-p4 main {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }
}

@media (max-width: 820px) and (max-height: 340px) and (orientation: landscape) {
  body.ui-responsive-p4 :where(
    .offline-modal-card,
    .cloud-conflict-card,
    .expedition-start-card,
    .sell-confirm-card,
    .chapter-finale-card,
    .skill-detail-panel,
    .skill-details-panel,
    .skill-detail-modal-card,
    .bank-item-panel-v2,
    #resetConfirmModal .reset-confirm-card
  ) {
    max-height: 100dvh !important;
  }
}

/* =========================================================
   Phase 5 — UI foundation lock guardrails
   ========================================================= */
body.ui-foundation-locked-p5 {
  --jd-ui-lock-min-touch: 44px;
}

/* New UI containers should be shrink-safe by default. */
body.ui-foundation-locked-p5 :where(
  .page,
  .panel,
  .card,
  .modal,
  .modal-card,
  .content,
  .section,
  .grid,
  .row,
  .col
) {
  min-width: 0;
}

/* Keep long generated/user-facing labels from creating page-level overflow. */
body.ui-foundation-locked-p5 :where(
  .page,
  .panel,
  .card,
  .modal,
  .modal-card
) :where(p, li, label, .muted, .sub, .hint, .meta) {
  overflow-wrap: anywhere;
}

/* Accessibility/interaction lock: keyboard focus must remain visible. */
body.ui-foundation-locked-p5 :where(
  button,
  .btn,
  .button,
  [role="button"],
  input,
  select,
  textarea,
  a
):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* On touch-sized viewports, interactive form controls keep a reliable target. */
@media (max-width: 820px) {
  body.ui-foundation-locked-p5 :where(
    button,
    .btn,
    .button,
    [role="button"],
    select,
    input:not([type="checkbox"]):not([type="radio"]),
    textarea
  ) {
    min-height: var(--jd-ui-lock-min-touch);
  }
}


/* =========================================================
   V1.01.73 — Sidebar player summary spacing polish
   UI-only patch: make Total Level and Gold compact aligned rows.
   ========================================================= */
body.ui-foundation-locked-p5 .sidebar-player-card {
  align-items: center;
}

body.ui-foundation-locked-p5 .sidebar-player-copy {
  align-content: center;
  gap: 2px;
}

body.ui-foundation-locked-p5 .sidebar-player-stats {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-top: 3px;
}

body.ui-foundation-locked-p5 .sidebar-player-stat,
body.ui-foundation-locked-p5 .sidebar-player-gold {
  grid-column: auto !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  line-height: 1.25;
  white-space: nowrap;
}

body.ui-foundation-locked-p5 .sidebar-player-stat > span {
  overflow: hidden;
  color: #9f8b68;
  font-size: 10px;
  text-overflow: ellipsis;
}

body.ui-foundation-locked-p5 .sidebar-player-stat > :is(b, strong) {
  flex: 0 0 auto;
  color: #d9bd84;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.ui-foundation-locked-p5 .sidebar-player-gold {
  color: inherit !important;
  font-size: inherit !important;
}

body.ui-foundation-locked-p5 .sidebar-player-health {
  margin-top: 5px !important;
}


/* =========================================================
   V1.01.75 — Sidebar health display polish
   Keep HP in the player summary, but make it unmistakably health.
   ========================================================= */
body.ui-foundation-locked-p5 .sidebar-player-health-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-top: 5px;
  line-height: 1.2;
  white-space: nowrap;
}

body.ui-foundation-locked-p5 .sidebar-player-health-meta > span {
  color: #a88c84;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

body.ui-foundation-locked-p5 .sidebar-player-health-meta > strong {
  color: #e08a80;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.ui-foundation-locked-p5 .sidebar-player-health {
  height: 7px !important;
  margin-top: 3px !important;
  overflow: hidden;
  border: 1px solid rgba(125, 48, 48, .58) !important;
  border-radius: 2px !important;
  background: #110b0b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}

body.ui-foundation-locked-p5 .sidebar-player-health > span {
  display: block;
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, #9f3131 0%, #cf4d46 62%, #df675d 100%) !important;
  box-shadow: none !important;
  transition: width .18s ease-out;
}

/* =========================================================
   V1.01.76 — Sidebar player summary spacing correction
   Keep Total Level, Gold and HP as one compact stat group.
   ========================================================= */
body.ui-foundation-locked-p5 .sidebar-player-card {
  align-items: start;
  padding-top: 10px;
  padding-bottom: 10px;
}

body.ui-foundation-locked-p5 .sidebar-player-avatar {
  align-self: start;
  margin-top: 2px;
}

body.ui-foundation-locked-p5 .sidebar-player-copy {
  align-content: start;
  gap: 0;
}

body.ui-foundation-locked-p5 .sidebar-player-copy > strong {
  margin-top: 1px;
}

body.ui-foundation-locked-p5 .sidebar-player-stats {
  gap: 2px;
  margin-top: 5px;
}

body.ui-foundation-locked-p5 .sidebar-player-stat,
body.ui-foundation-locked-p5 .sidebar-player-gold,
body.ui-foundation-locked-p5 .sidebar-player-health-meta {
  line-height: 1.2;
}

body.ui-foundation-locked-p5 .sidebar-player-health-meta {
  margin-top: 2px;
}

body.ui-foundation-locked-p5 .sidebar-player-health {
  margin-top: 3px !important;
}

/* Player plaque must grow with the added HP row instead of shrinking and
   letting the health bar bleed into navigation space. */
body.ui-foundation-locked-p5 .sidebar-player-card {
  flex: 0 0 auto;
}

/* =========================================================
   V1.01.77 — Den Home Hub Phase 1
   UI/information hierarchy only. No art-direction changes.
   ========================================================= */
body.den-home-hub-v10177.den-page-active #currentJourneyTracker {
  display: none !important;
}

body.den-home-hub-v10177 #denPage .den-home-section,
body.den-home-hub-v10177 #denPage .den-guidance-card {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(181,123,40,.42);
  border-radius: 0;
  background: linear-gradient(180deg,#081318,#050d11);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}

body.den-home-hub-v10177 #denPage .den-home-section-heading {
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(181,123,40,.22);
}

body.den-home-hub-v10177 #denPage .den-home-section-heading h3,
body.den-home-hub-v10177 #denPage .den-guidance-card h3 {
  margin: 0;
  color: #e2c27f;
  font-family: var(--jd-serif,Georgia,serif);
  font-weight: 500;
}

body.den-home-hub-v10177 #denPage .den-home-section-heading > small {
  color: #9c917c;
  font-size: 9px;
}

body.den-home-hub-v10177 #denPage .den-home-section .den-room-grid {
  margin: 0 !important;
}

body.den-home-hub-v10177 #denPage .den-guidance-card {
  display: grid;
  gap: 10px;
}

body.den-home-hub-v10177 #denPage .den-guidance-main {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(150px,220px);
  gap: 16px;
  align-items: end;
}

body.den-home-hub-v10177 #denPage .den-guidance-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.den-home-hub-v10177 #denPage .den-guidance-copy strong {
  color: #dec184;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 14px;
  font-weight: 500;
}

body.den-home-hub-v10177 #denPage .den-guidance-copy small {
  color: #9c917c;
  font-size: 9px;
  line-height: 1.45;
}

body.den-home-hub-v10177 #denPage .den-guidance-progress {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #c8b78f;
  font-size: 9px;
  text-align: right;
}

body.den-home-hub-v10177 #denPage .den-guidance-progress .journey-journal-progress {
  width: 100%;
  height: 8px;
}

body.den-home-hub-v10177 #denPage .den-guidance-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.den-home-hub-v10177 #denPage .den-guidance-actions button {
  min-width: 120px;
}

body.den-home-hub-v10177 #denPage .journey-journal[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  body.den-home-hub-v10177 #denPage .den-home-section,
  body.den-home-hub-v10177 #denPage .den-guidance-card {
    padding: 9px;
  }

  body.den-home-hub-v10177 #denPage .den-guidance-main {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body.den-home-hub-v10177 #denPage .den-guidance-progress {
    text-align: left;
  }
}

@media (max-width: 430px) {
  body.den-home-hub-v10177 #denPage .den-guidance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.den-home-hub-v10177 #denPage .den-guidance-actions button {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   V1.01.78 — Den Upgrades Phase 2
   Home progression presentation only. No art-direction changes.
   ========================================================= */
body.den-upgrades-v10178 #denPage .den-upgrade-hub {
  display: grid;
  gap: 12px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-hub > .den-progression-description {
  margin: -2px 0 0;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-path {
  display: grid;
  grid-template-columns: minmax(0, .82fr) 34px minmax(0, 1.18fr);
  gap: 8px;
  align-items: stretch;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(181,123,40,.32);
  background: #061014;
  display: grid;
  align-content: start;
  gap: 4px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card.is-current {
  border-color: rgba(152,139,111,.28);
  background: #071115;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card.is-next {
  border-color: rgba(181,123,40,.52);
  background: linear-gradient(180deg,rgba(181,123,40,.075),rgba(5,13,17,.35)),#061014;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card.is-locked,
body.den-upgrades-v10178 #denPage .den-upgrade-tier-card.is-planned {
  border-color: rgba(134,124,105,.26);
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card.is-ready {
  border-color: rgba(136,174,93,.48);
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card > strong {
  color: #b8a477;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card h4 {
  margin: 0;
  color: #e2c27f;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card > small {
  color: #9c917c;
  font-size: 9px;
  line-height: 1.45;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card-top b {
  color: #cdb274;
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-arrow {
  display: grid;
  place-items: center;
  color: #9f7b3d;
  font-size: 18px;
  opacity: .8;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-progress {
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid rgba(181,123,40,.23);
  background: #02080b;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: #9c6d2e;
  transition: width .2s ease;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-card.is-ready .den-upgrade-tier-progress > span {
  background: #728d49;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #8f8879;
  font-size: 8px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-tier-meta b {
  color: #d1ba85;
  font-variant-numeric: tabular-nums;
}

body.den-upgrades-v10178 #denPage #denNextTierAction {
  justify-self: start;
  min-width: 156px;
  margin-top: 3px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-board-section,
body.den-upgrades-v10178 #denPage .den-future-roadmap {
  padding-top: 10px;
  border-top: 1px solid rgba(181,123,40,.18);
}

body.den-upgrades-v10178 #denPage .den-upgrade-board-heading,
body.den-upgrades-v10178 #denPage .den-future-roadmap-heading {
  margin-bottom: 8px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-board-heading h4,
body.den-upgrades-v10178 #denPage .den-future-roadmap-heading h4 {
  margin: 0;
  color: #d9bd81;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 13px;
  font-weight: 500;
}

body.den-upgrades-v10178 #denPage .den-upgrade-board-heading > small,
body.den-upgrades-v10178 #denPage .den-future-roadmap-heading > small {
  color: #8f8879;
  font-size: 8px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-board {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(137,126,104,.24);
  background: rgba(3,10,13,.72);
  display: grid;
  align-content: start;
  gap: 4px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card.is-built {
  border-color: rgba(120,153,82,.38);
  background: rgba(86,112,58,.055);
}

body.den-upgrades-v10178 #denPage .den-upgrade-card.is-included {
  border-color: rgba(181,123,40,.32);
}

body.den-upgrades-v10178 #denPage .den-upgrade-card.is-planned {
  opacity: .72;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 7px;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card-top b {
  color: #ab9a77;
  font-size: 7.5px;
  font-weight: 600;
  white-space: nowrap;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card.is-built .den-upgrade-card-top b {
  color: #91ad69;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card h5 {
  margin: 1px 0 0;
  color: #d9bd81;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 12px;
  font-weight: 500;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card p {
  margin: 0;
  color: #9d9586;
  font-size: 8.5px;
  line-height: 1.4;
}

body.den-upgrades-v10178 #denPage .den-upgrade-card > small {
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid rgba(181,123,40,.12);
  color: #b2a17f;
  font-size: 8px;
  line-height: 1.35;
}

body.den-upgrades-v10178 #denPage .den-future-roadmap .den-tier-roadmap {
  margin: 0;
}

body.den-upgrades-v10178 #denPage .den-upgrade-stage {
  display: block;
  margin-top: 3px;
  color: #9c917c;
  font-size: 8px;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  body.den-upgrades-v10178 #denPage .den-upgrade-board {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  body.den-upgrades-v10178 #denPage .den-upgrade-tier-path {
    grid-template-columns: 1fr;
  }

  body.den-upgrades-v10178 #denPage .den-upgrade-tier-arrow {
    min-height: 18px;
    transform: rotate(90deg);
  }

  body.den-upgrades-v10178 #denPage #denNextTierAction {
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 430px) {
  body.den-upgrades-v10178 #denPage .den-upgrade-board {
    grid-template-columns: 1fr;
  }

  body.den-upgrades-v10178 #denPage .den-upgrade-tier-card,
  body.den-upgrades-v10178 #denPage .den-upgrade-card {
    padding: 8px;
  }
}

/* =========================================================
   V1.01.79 — Den World Project Hub Phase 3
   Home-hub integration and layout only. No art-direction changes.
   ========================================================= */
body.den-world-project-hub-v10179 #denPage .den-world-project-glance,
body.den-world-project-hub-v10179 #denPage .den-world-project-hub {
  position: relative;
  border: 1px solid rgba(181,123,40,.42);
  border-radius: 0;
  background: linear-gradient(180deg,#081318,#050d11);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(180px,.75fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 12px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-copy h3 {
  margin: 0;
  color: #e2c27f;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-copy > strong {
  margin-top: 2px;
  color: #d8bc81;
  font-size: 11px;
  font-weight: 600;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-copy > small {
  color: #948b7b;
  font-size: 8.5px;
  line-height: 1.3;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-progress {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #9c917c;
  font-size: 8.5px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-meta b {
  color: #d6b97d;
  font-variant-numeric: tabular-nums;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-progress .den-project-progress {
  margin: 0 !important;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-glance-actions button {
  min-width: 112px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-hub {
  display: grid;
  gap: 10px;
  padding: 12px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-hub-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(181,123,40,.22);
}

body.den-world-project-hub-v10179 #denPage .den-world-project-hub-heading > div {
  min-width: 0;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-hub-heading h3 {
  margin: 1px 0 2px;
  color: #e2c27f;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-hub-heading p {
  margin: 0;
  max-width: 760px;
  color: #9c917c;
  font-size: 9px;
  line-height: 1.4;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout {
  display: grid;
  grid-template-columns: minmax(220px,270px) minmax(0,1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout > .den-project-ledger-panel,
body.den-world-project-hub-v10179 #denPage .den-world-project-layout > .den-route-project {
  min-width: 0;
  margin: 0 !important;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout > .den-project-ledger-panel {
  padding: 9px !important;
}

body.den-world-project-hub-v10179 #denPage .den-project-ledger-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-bottom: 7px;
}

body.den-world-project-hub-v10179 #denPage .den-project-ledger-heading > small {
  text-align: left;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger {
  grid-template-columns: 1fr;
  gap: 6px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-card {
  grid-template-columns: 72px minmax(0,1fr);
  grid-template-rows: 1fr;
  min-height: 82px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-art {
  min-height: 80px;
  border-right: 1px solid rgba(181,123,40,.18);
  border-bottom: 0;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-copy {
  padding: 7px 8px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-copy strong {
  font-size: 11px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-copy > small,
body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-meta em {
  font-size: 7.5px;
}

body.den-world-project-hub-v10179 #denPage .den-project-supply-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin: 8px 0 6px;
  padding-top: 7px;
  border-top: 1px solid rgba(181,123,40,.16);
}

body.den-world-project-hub-v10179 #denPage .den-project-supply-heading strong {
  color: #d8bc81;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 11px;
  font-weight: 500;
}

body.den-world-project-hub-v10179 #denPage .den-project-supply-heading small {
  color: #8f8879;
  font-size: 8px;
}

body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-region-art {
  min-height: 116px;
  margin: 7px 0 8px;
}

@media (max-width: 1024px) {
  body.den-world-project-hub-v10179 #denPage .den-world-project-glance {
    grid-template-columns: minmax(0,1fr) minmax(180px,.72fr);
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-glance-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout {
    grid-template-columns: 1fr;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-card {
    grid-template-columns: 1fr;
    grid-template-rows: 68px minmax(0,1fr);
    min-height: 142px;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-art {
    min-height: 68px;
    border-right: 0;
    border-bottom: 1px solid rgba(181,123,40,.18);
  }
}

@media (max-width: 760px) {
  body.den-world-project-hub-v10179 #denPage .den-world-project-glance {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-glance-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-glance-actions button {
    width: 100%;
    min-width: 0;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-hub {
    padding: 9px;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-hub-heading {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 7px;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-hub-heading button {
    width: 100%;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger {
    grid-template-columns: 1fr;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-card {
    grid-template-columns: 70px minmax(0,1fr);
    grid-template-rows: 1fr;
    min-height: 78px;
  }

  body.den-world-project-hub-v10179 #denPage .den-world-project-layout .den-project-ledger-art {
    min-height: 76px;
    border-right: 1px solid rgba(181,123,40,.18);
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  body.den-world-project-hub-v10179 #denPage .den-world-project-glance-actions {
    grid-template-columns: 1fr;
  }

  body.den-world-project-hub-v10179 #denPage .den-project-supply-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* JourneyDen UI source: styles/typography-cleanup-v10180.css | sha256:1111da21eda799dfc1fb9f088d376b96665441965cd81cf8725d75d50d4c8db5 */
/* JourneyDen V1.01.80 — Typography Readability Cleanup
   UI-only typography layer. No artwork, sprite, balance, or gameplay changes.

   Rules:
   - Functional UI copy uses a clean system sans stack.
   - Large display/page headings keep the fantasy serif identity.
   - Old 6–10px microcopy receives a readable floor.
*/

:root {
  --jd-font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --jd-font-display: Georgia, Cambria, "Times New Roman", serif;

  /* Historical reference CSS used --jd-serif everywhere. Keep the token for
     compatibility, but route normal UI text through the readable face. */
  --jd-serif: var(--jd-font-ui);

  --jd-muted: #aa9a7d;
  --jd-faint: #887b67;
}

body.typography-cleanup-v10180.reference-ui-v1011 {
  font-family: var(--jd-font-ui) !important;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display identity: use the fantasy face only where it has enough size. */
body.typography-cleanup-v10180 :where(
  h1,
  h2,
  .reference-brand-name,
  .reference-page-heading-title > div > h2,
  .den-hero h2,
  .expedition-region-hero h2,
  .chapter-finale-card h2
) {
  font-family: var(--jd-font-display) !important;
  letter-spacing: .01em;
}

/* Smaller headings are functional information. */
body.typography-cleanup-v10180 :where(h3, h4, h5, h6) {
  font-family: var(--jd-font-ui) !important;
  letter-spacing: 0;
}

/* Controls, navigation and tabular information stay crisp. */
body.typography-cleanup-v10180 :where(
  button,
  input,
  select,
  textarea,
  option,
  label,
  table,
  th,
  td,
  .nav-item,
  .mobile-nav-item,
  .sidebar-build-meta,
  .status-chip,
  .stat-chip,
  .tag,
  .badge,
  .chip,
  .pill
) {
  font-family: var(--jd-font-ui) !important;
}

/* Normal descriptive text was frequently 8–10px in the reference cascade. */
body.typography-cleanup-v10180.reference-ui-v1011 .page.page p {
  font-family: var(--jd-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}

/* Functional buttons need to be readable without becoming oversized. */
body.typography-cleanup-v10180.reference-ui-v1011 .page.page button {
  font-family: var(--jd-font-ui) !important;
  font-size: 12px !important;
}

/* Strong page-local floor beats old phase rules that used !important 6–10px. */
body.typography-cleanup-v10180.reference-ui-v1011 :is(
  #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
  #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
  #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
).page.page small {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  letter-spacing: .005em;
}

body.typography-cleanup-v10180.reference-ui-v1011 :is(
  #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
  #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
  #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
).page.page .eyebrow {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  letter-spacing: .055em !important;
  font-weight: 600 !important;
}

/* Compact labels that were often 6–10px and are not always <small>. */
body.typography-cleanup-v10180 :where(
  .nav-group-label,
  .progress-meta,
  .requirements,
  .activity-filter-summary,
  .activity-card-ref-title .eyebrow,
  .skill-card-ref-main .eyebrow,
  .skill-card-ref-xp,
  .combat-enemy-state,
  .combat-health-line,
  .combat-attack-timer,
  .combat-panel-kicker,
  .combat-encounter-footer,
  .combat-repeat-note,
  .combat-session-xp,
  .combat-session-summary-amount,
  .combat-selected-food-summary,
  .exp-log-route-row,
  .exp-log-meta-grid,
  .exp-log-player-strip,
  .exp-log-stage-index,
  .den-project-ledger-status,
  .den-project-ledger-meta,
  .den-world-project-glance-meta,
  .sidebar-player-stat-label,
  .sidebar-player-health-label
) {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Common compact state/badge copy. */
body.typography-cleanup-v10180 :where(
  .status-chip,.stat-chip,.tag,.badge,.chip,.pill,
  #denPage .den-hero-badges > span,
  #worldMapPage .world-map-legend span
) {
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* World-map route labels were only 6px and were effectively decorative noise. */
body.typography-cleanup-v10180.reference-ui-v1011 #worldMapPage.page.page :where(
  .world-map-route-label,
  .world-map-frontier-label
) {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 600;
}

/* Specific non-small legacy microcopy. */
body.typography-cleanup-v10180 :where(
  #activitiesPage .activity-card-ref-stat strong,
  #activitiesPage .activity-card-ref-mastery span,
  #activitiesPage .activity-category-heading > span,
  #skillsPage .skill-card-ref-xp b,
  #combatPage .combat-enemy-xp b,
  #combatPage .combat-idle-title b,
  #combatPage .combat-idle-stats span,
  #combatPage .combat-fighter-clean-head b,
  #combatPage .combat-clean-stats b,
  #combatPage .combat-encounter-footer strong,
  #combatPage .combat-food-choice strong,
  #combatPage .combat-food-choice > b,
  #combatPage .combat-session-xp strong,
  #combatPage .combat-session-summary-amount strong,
  .exp-log-card-stats b,
  .exp-log-meta-grid b,
  .exp-log-player-strip b
) {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

body.typography-cleanup-v10180.reference-ui-v1011 #combatPage.page.page .combat-side-help {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #92846d !important;
}

/* Keep muted functional text visible on the dark shell. */
body.typography-cleanup-v10180 :where(.muted, .subtle, .helper-text, .hint) {
  color: var(--jd-muted) !important;
}

@media (max-width: 820px) {
  body.typography-cleanup-v10180.reference-ui-v1011 .page.page button {
    font-size: 13px !important;
  }

  body.typography-cleanup-v10180.reference-ui-v1011 :is(
    #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
    #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
    #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
  ).page.page small {
    font-size: 12px !important;
  }

  body.typography-cleanup-v10180.reference-ui-v1011 :is(
    #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
    #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
    #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
  ).page.page .eyebrow {
    font-size: 12px !important;
  }

  body.typography-cleanup-v10180 :where(
    .nav-group-label,.progress-meta,.requirements,.activity-filter-summary,
    .combat-enemy-state,.combat-health-line,.combat-attack-timer,.combat-panel-kicker,
    .combat-encounter-footer,.exp-log-route-row,.den-project-ledger-status,
    .den-project-ledger-meta,.den-world-project-glance-meta
  ) {
    font-size: 12px !important;
  }

  body.typography-cleanup-v10180.reference-ui-v1011 #combatPage.page.page .combat-side-help {
    font-size: 12px !important;
  }
}

/* High-specificity body/control normalization for older page-specific rules. */
body.typography-cleanup-v10180.reference-ui-v1011 :is(
  #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
  #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
  #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
).page.page p {
  font-family: var(--jd-font-ui) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
}
body.typography-cleanup-v10180.reference-ui-v1011 :is(
  #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
  #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
  #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
).page.page button {
  font-family: var(--jd-font-ui) !important;
  font-size: 12px !important;
}

/* Page-specific compact information that is not represented by <small>. */
body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page :where(
  .den-hero-badges > span,.den-room-status
),
body.typography-cleanup-v10180.reference-ui-v1011 :is(#masteryPage,#offlineMasteryPage).page.page :where(
  .mastery-summary-card > span,.mobile-mastery-skill-select > span,.mastery-section-heading > span,
  .offline-mastery-description strong
),
body.typography-cleanup-v10180.reference-ui-v1011 #guidePage.page.page .guide-index-item strong,
body.typography-cleanup-v10180.reference-ui-v1011 #combatPage.page.page :where(
  .combat-selected-food-large button b,.combat-selected-food-empty button b,
  #combatSessionGold,#combatSessionKills,.combat-session-footer b
),
body.typography-cleanup-v10180.reference-ui-v1011 #bankPage.page.page :where(
  .bank-stack-note,.bank-mobile-category-copy span,.bank-discovery-rs > span,#bankDiscoveryValue
),
body.typography-cleanup-v10180.reference-ui-v1011 #equipmentPage.page.page .equipment-combat-level-card > span,
body.typography-cleanup-v10180.reference-ui-v1011 #leaderboardsPage.page.page .mobile-leaderboard-select > span,
body.typography-cleanup-v10180.reference-ui-v1011 #settingsPage.page.page :where(
  .settings-hint,.cloud-sync-status,.cloud-user-copy > span
) {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

@media (max-width: 820px) {
  body.typography-cleanup-v10180.reference-ui-v1011 :is(
    #denPage,#worldMapPage,#activitiesPage,#skillsPage,#masteryPage,#offlineMasteryPage,
    #guidePage,#achievementsPage,#expeditionsPage,#combatPage,#bankPage,#equipmentPage,
    #leaderboardsPage,#settingsPage,#shopPage,#collectionsPage
  ).page.page button {
    font-size: 13px !important;
  }

  body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page :where(
    .den-hero-badges > span,.den-room-status
  ),
  body.typography-cleanup-v10180.reference-ui-v1011 :is(#masteryPage,#offlineMasteryPage).page.page :where(
    .mastery-summary-card > span,.mobile-mastery-skill-select > span,.mastery-section-heading > span,
    .offline-mastery-description strong
  ),
  body.typography-cleanup-v10180.reference-ui-v1011 #guidePage.page.page .guide-index-item strong,
  body.typography-cleanup-v10180.reference-ui-v1011 #combatPage.page.page :where(
    .combat-selected-food-large button b,.combat-selected-food-empty button b,
    #combatSessionGold,#combatSessionKills,.combat-session-footer b
  ),
  body.typography-cleanup-v10180.reference-ui-v1011 #bankPage.page.page :where(
    .bank-stack-note,.bank-mobile-category-copy span,.bank-discovery-rs > span,#bankDiscoveryValue
  ),
  body.typography-cleanup-v10180.reference-ui-v1011 #equipmentPage.page.page .equipment-combat-level-card > span,
  body.typography-cleanup-v10180.reference-ui-v1011 #leaderboardsPage.page.page .mobile-leaderboard-select > span,
  body.typography-cleanup-v10180.reference-ui-v1011 #settingsPage.page.page :where(
    .settings-hint,.cloud-sync-status,.cloud-user-copy > span
  ) {
    font-size: 12px !important;
  }
}

/* Final static microcopy outliers found by the 390px readability audit. */
body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page :where(
  #denCurrentTierBadge,#denCurrentHomeTier,#denNextHomeStatus,#denNextHomeTier,
  .den-upgrade-tier-meta > span,#denNextHomeProgress,#denProgressionNoteTitle,
  #denProgressionNoteCopy,#denForestRouteStatus,#denGuidanceProgress
),
body.typography-cleanup-v10180.reference-ui-v1011 #achievementsPage.page.page .achievement-overview-card span,
body.typography-cleanup-v10180.reference-ui-v1011 #combatPage.page.page .combat-mobile-fold b,
body.typography-cleanup-v10180.reference-ui-v1011 #bankPage.page.page .mobile-bank-category-select > span {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

@media (max-width: 820px) {
  body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page :where(
    #denCurrentTierBadge,#denCurrentHomeTier,#denNextHomeStatus,#denNextHomeTier,
    .den-upgrade-tier-meta > span,#denNextHomeProgress,#denProgressionNoteTitle,
    #denProgressionNoteCopy,#denForestRouteStatus,#denGuidanceProgress
  ),
  body.typography-cleanup-v10180.reference-ui-v1011 #achievementsPage.page.page .achievement-overview-card span,
  body.typography-cleanup-v10180.reference-ui-v1011 #combatPage.page.page .combat-mobile-fold b,
  body.typography-cleanup-v10180.reference-ui-v1011 #bankPage.page.page .mobile-bank-category-select > span {
    font-size: 12px !important;
  }
}

body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page #denCurrentTierBadge,
body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page #denForestRouteStatus,
body.typography-cleanup-v10180.reference-ui-v1011 #achievementsPage.page.page .collections-page-summary .mastery-summary-card > span {
  font-family: var(--jd-font-ui) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
@media (max-width: 820px) {
  body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page #denCurrentTierBadge,
  body.typography-cleanup-v10180.reference-ui-v1011 #denPage.page.page #denForestRouteStatus,
  body.typography-cleanup-v10180.reference-ui-v1011 #achievementsPage.page.page .collections-page-summary .mastery-summary-card > span {
    font-size: 12px !important;
  }
}

/* Keep guide index pictograms from inheriting legacy micro-sizing. */
body.typography-cleanup-v10180 .guide-index-emoji {
  font-size: 12px !important;
  line-height: 1.2;
}

/* JourneyDen UI source: styles/farming-loadout-phase3.css | sha256:bf445188a7a3a016c039bc54d4e8545f263532d561c3634dea46b11f61e9dd48 */
/* JourneyDen V1.01.102 — Farming Loadout UI Phase 3
   Scoped extension of the locked Equipment foundation. */

#equipmentPage .equipment-loadout-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 10px;
  padding:4px;
  border:1px solid rgba(126,91,44,.34);
  background:#04090b;
  box-shadow:inset 0 0 0 1px #020607;
}

#equipmentPage .equipment-loadout-tabs button{
  min-height:52px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:8px;
  padding:8px 11px;
  text-align:left;
  border:1px solid rgba(126,91,44,.28);
  border-radius:0;
  background:#071013;
  color:var(--text);
}

#equipmentPage .equipment-loadout-tabs button>span{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  font-size:19px;
  border:1px solid rgba(182,121,34,.22);
  background:#050b0d;
}

#equipmentPage .equipment-loadout-tabs button strong{
  align-self:end;
  color:#dcc89d;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:13px;
  line-height:1.15;
}

#equipmentPage .equipment-loadout-tabs button small{
  align-self:start;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.25;
}

#equipmentPage .equipment-loadout-tabs button.active{
  border-color:var(--jd-gold-3,#d7ad56);
  background:linear-gradient(180deg,rgba(182,121,34,.12),rgba(182,121,34,.035)),#071013;
  box-shadow:inset 0 0 0 1px #020607,0 0 12px rgba(182,121,34,.08);
}

#equipmentPage .equipment-loadout-tabs button.active>span{
  border-color:rgba(240,197,109,.5);
  background:rgba(182,121,34,.08);
}

#equipmentPage .equipment-loadout-panel[hidden]{display:none!important;}

#equipmentPage .farming-loadout-frame{
  min-height:470px;
}

#equipmentPage .farming-equipment-slot-overview{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(112px,1fr));
  grid-template-rows:repeat(3,minmax(92px,auto));
  gap:8px;
  width:min(100%,680px);
  min-height:330px;
  margin:24px auto 0;
  padding:10px;
  align-items:stretch;
}

#equipmentPage .farming-loadout-emblem{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  gap:3px;
  width:110px;
  height:110px;
  border:1px solid rgba(143,190,66,.16);
  background:radial-gradient(circle,rgba(143,190,66,.08),transparent 68%);
  color:rgba(157,200,89,.32);
  pointer-events:none;
}

#equipmentPage .farming-loadout-emblem span{font-size:38px;opacity:.42;}
#equipmentPage .farming-loadout-emblem small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;}

#equipmentPage .farming-equipment-slot{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:42px auto auto;
  place-items:center;
  gap:3px;
  min-width:0;
  min-height:88px;
  padding:8px 6px;
  border:1px solid rgba(126,91,44,.34);
  border-radius:0;
  background:#050b0d;
  color:var(--text);
  box-shadow:inset 0 0 0 1px #020607;
  text-align:center;
}

#equipmentPage .farming-equipment-slot[data-farming-equipment-slot-select="head"]{grid-column:2;grid-row:1;}
#equipmentPage .farming-equipment-slot[data-farming-equipment-slot-select="cape"]{grid-column:3;grid-row:1;}
#equipmentPage .farming-equipment-slot[data-farming-equipment-slot-select="hands"]{grid-column:1;grid-row:2;}
#equipmentPage .farming-equipment-slot[data-farming-equipment-slot-select="body"]{grid-column:2;grid-row:2;}
#equipmentPage .farming-equipment-slot[data-farming-equipment-slot-select="tool"]{grid-column:3;grid-row:2;}
#equipmentPage .farming-equipment-slot[data-farming-equipment-slot-select="feet"]{grid-column:2;grid-row:3;}

#equipmentPage .farming-equipment-slot:hover{
  border-color:rgba(143,190,66,.55);
  background:#08110f;
}

#equipmentPage .farming-equipment-slot.filled{
  border-color:rgba(143,190,66,.46);
  background:radial-gradient(circle at 50% 30%,rgba(143,190,66,.08),transparent 62%),#050b0d;
}

#equipmentPage .farming-equipment-slot.selected{
  border-color:#9dc859;
  outline:1px solid rgba(157,200,89,.14);
  outline-offset:2px;
  box-shadow:inset 0 0 0 1px #020607,0 0 12px rgba(143,190,66,.08);
}

#equipmentPage .farming-equipment-slot-icon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  font-size:24px;
}

#equipmentPage .farming-equipment-slot-icon .jd-item-icon{
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  box-shadow:none;
}

#equipmentPage .farming-equipment-slot small{
  color:#8f8068;
  font-size:11px;
  line-height:1.15;
}

#equipmentPage .farming-equipment-slot strong{
  max-width:100%;
  overflow:hidden;
  color:#d9c7a3;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:11px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#equipmentPage .farming-equipment-bonus-summary{
  display:grid;
  gap:7px;
}

#equipmentPage .farming-bonus-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 10px;
  padding:10px;
  border:1px solid rgba(143,190,66,.24);
  background:rgba(143,190,66,.045);
}

#equipmentPage .farming-bonus-card small{
  color:var(--muted);
  font-size:11px;
}

#equipmentPage .farming-bonus-card strong{
  grid-row:1/3;
  grid-column:2;
  align-self:center;
  color:#9dc859;
  font-size:18px;
}

#equipmentPage .farming-bonus-card span{
  color:#a99b82;
  font-size:11px;
  line-height:1.3;
}

#equipmentPage .farming-bonus-card.muted{
  border-color:rgba(126,91,44,.28);
  background:#050b0d;
}

#equipmentPage .farming-bonus-card.muted strong{color:#d9c7a3;}

#equipmentPage .farming-equipment-available{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

#equipmentPage .farming-gear-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
  align-items:center;
  min-width:0;
  padding:10px;
  border:1px solid rgba(126,91,44,.30);
  background:#050b0d;
}

#equipmentPage .farming-gear-card.equipped{
  border-color:rgba(143,190,66,.48);
  background:linear-gradient(180deg,rgba(143,190,66,.055),transparent),#050b0d;
}

#equipmentPage .farming-gear-card-main{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

#equipmentPage .farming-gear-card-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  flex:0 0 46px;
}

#equipmentPage .farming-gear-card-icon .jd-item-icon{
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  box-shadow:none;
}

#equipmentPage .farming-gear-card-main div{min-width:0;}
#equipmentPage .farming-gear-card-main small{display:block;color:#8f8068;font-size:11px;}
#equipmentPage .farming-gear-card-main strong{display:block;margin-top:2px;color:#d9c7a3;font-family:var(--jd-serif,Georgia,serif);font-size:12px;}
#equipmentPage .farming-gear-card-main p{margin:4px 0 0;color:#aaa08d;font-size:11px;line-height:1.35;}

#equipmentPage .farming-gear-card-meta{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
  gap:6px;
}

#equipmentPage .farming-gear-card-meta>span{
  color:#9dc859;
  font-size:11px;
}

#equipmentPage .farming-gear-card-meta button{min-height:38px;min-width:92px;}

#equipmentPage .farming-gear-source{
  grid-column:1/-1;
  padding-top:7px;
  border-top:1px solid rgba(126,91,44,.20);
  color:#8f8068;
  font-size:11px;
  line-height:1.35;
}

@media(max-width:900px){
  #equipmentPage .farming-loadout-frame{min-height:0;}
  #equipmentPage .farming-equipment-slot-overview{margin-top:8px;}
  #equipmentPage .farming-equipment-available{grid-template-columns:1fr;}
}

@media(max-width:600px){
  #equipmentPage .equipment-loadout-tabs{gap:5px;padding:3px;}
  #equipmentPage .equipment-loadout-tabs button{
    min-height:58px;
    grid-template-columns:26px minmax(0,1fr);
    column-gap:6px;
    padding:7px 8px;
  }
  #equipmentPage .equipment-loadout-tabs button>span{width:26px;height:26px;font-size:16px;}
  #equipmentPage .equipment-loadout-tabs button strong{font-size:12px;}
  #equipmentPage .equipment-loadout-tabs button small{font-size:10px;}

  #equipmentPage .farming-equipment-slot-overview{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    min-height:0;
    gap:6px;
    margin-top:4px;
    padding:3px;
  }
  #equipmentPage .farming-loadout-emblem{display:none;}
  #equipmentPage .farming-equipment-slot{
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:84px;
    padding:7px 5px;
  }
  #equipmentPage .farming-equipment-slot strong{
    font-size:10px;
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  #equipmentPage .farming-gear-card{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  #equipmentPage .farming-gear-card-meta{
    align-items:stretch;
  }
  #equipmentPage .farming-gear-card-meta button{min-height:44px;width:100%;}
}

@media(max-width:390px){
  #equipmentPage .equipment-loadout-tabs button small{display:none;}
  #equipmentPage .equipment-loadout-tabs button{
    min-height:52px;
    grid-template-rows:1fr;
  }
  #equipmentPage .equipment-loadout-tabs button>span{grid-row:auto;}
}

/* Phase 3 touch floor for the loadout-specific actions. */
#equipmentPage .equipment-best-loadout-button,
#equipmentPage .farming-gear-card-meta button{
  min-height:44px;
}
body.bank-equipment-reference-v1017 #equipmentPage .equipment-best-loadout-button{min-height:44px;}


/* V1.01.104 Phase 5 — final Farming Loadout interaction polish. */
#equipmentPage .equipment-loadout-tabs button:focus-visible,
#equipmentPage .farming-equipment-slot:focus-visible,
#equipmentPage .farming-gear-card-meta button:focus-visible,
#equipmentPage .equipment-best-loadout-button:focus-visible{
  outline:2px solid #d7ad56;
  outline-offset:2px;
}

#equipmentPage .equipment-best-loadout-button:disabled,
#equipmentPage .farming-gear-card-meta button:disabled{
  opacity:.48;
  cursor:not-allowed;
  box-shadow:none;
}

#equipmentPage .farming-equipment-slot[aria-pressed="true"] small{
  color:#a9c977;
}

/* JourneyDen UI source: styles/combat-ui-final-polish-v101123.css | sha256:c6b812628221602fd881b37477124d106a6d6a88b978a0e6256090c17c117d98 */
/* JourneyDen V1.01.123 — Combat UI Final Polish
   Presentation-only pass. Combat mechanics, rewards, balance, timings, and
   progression remain owned by existing runtime/data sources. */

body.combat-reference-v1019 #combatPage .combat-skill-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.combat-reference-v1019 #combatPage .combat-skill-overview-card,
body.combat-reference-v1019 #combatPage .combat-style-button,
body.combat-reference-v1019 #combatPage .combat-enemy-card,
body.combat-reference-v1019 #combatPage .combat-food-choice,
body.combat-reference-v1019 #combatPage .combat-session-summary-row {
  min-width: 0;
}

body.combat-reference-v1019 #combatPage .combat-style-button {
  align-items: center;
}
body.combat-reference-v1019 #combatPage .combat-style-button > div,
body.combat-reference-v1019 #combatPage .combat-food-choice > div,
body.combat-reference-v1019 #combatPage .combat-session-summary-copy {
  min-width: 0;
}
body.combat-reference-v1019 #combatPage .combat-style-button.active strong {
  color: #efd39b;
}
body.combat-reference-v1019 #combatPage .combat-style-button.active .combat-style-icon {
  border-color: rgba(211, 161, 77, .58);
  background: rgba(182, 121, 34, .08);
}

/* Give the frequently-used roster enough room without stealing the battlefield. */
body.combat-reference-v1019 #combatPage .combat-layout-v2 {
  grid-template-columns: minmax(280px, 300px) minmax(420px, 1fr) minmax(280px, 300px) !important;
}
body.combat-reference-v1019 #combatPage .combat-enemy-grid {
  gap: 5px;
}
body.combat-reference-v1019 #combatPage .combat-enemy-card {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-areas: "portrait copy" !important;
  min-height: 62px;
  gap: 8px;
  padding: 6px;
}
body.combat-reference-v1019 #combatPage .combat-roster-portrait {
  grid-area: portrait !important;
  width: 44px;
  height: 44px;
}
body.combat-reference-v1019 #combatPage .combat-enemy-copy {
  grid-area: copy !important;
  min-width: 0;
}
body.combat-reference-v1019 #combatPage .combat-enemy-name-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
body.combat-reference-v1019 #combatPage .combat-enemy-name-row strong {
  min-width: 0;
  max-width: 100%;
}
body.combat-reference-v1019 #combatPage .combat-enemy-xp {
  flex: 0 0 auto;
  padding: 1px 4px;
  border: 1px solid rgba(182, 121, 34, .18);
  background: rgba(182, 121, 34, .045);
  line-height: 1.2;
  white-space: nowrap;
}
body.combat-reference-v1019 #combatPage .combat-enemy-state {
  margin-top: 3px;
}
body.combat-reference-v1019 #combatPage .combat-enemy-card.active {
  border-color: rgba(211, 161, 77, .84);
  background: linear-gradient(90deg, rgba(182, 121, 34, .16), rgba(182, 121, 34, .035));
  box-shadow: inset 3px 0 0 rgba(211, 161, 77, .82);
}
body.combat-reference-v1019 #combatPage .combat-enemy-card.active .combat-enemy-state {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid rgba(126, 159, 67, .36);
  background: rgba(93, 122, 43, .10);
  color: #a8d16a;
}

/* Four tracked combat XP pools should read as one complete row on desktop. */
body.combat-reference-v1019 #combatPage .combat-session-xp {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.combat-reference-v1019 #combatPage .combat-selected-food-large,
body.combat-reference-v1019 #combatPage .combat-selected-food-empty {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
body.combat-reference-v1019 #combatPage .combat-selected-food-empty {
  grid-template-columns: 40px minmax(0, 1fr);
}
body.combat-reference-v1019 #combatPage .combat-selected-food-large > div,
body.combat-reference-v1019 #combatPage .combat-selected-food-empty > div {
  min-width: 0;
}
body.combat-reference-v1019 #combatPage .combat-food-choice strong,
body.combat-reference-v1019 #combatPage .combat-food-choice small,
body.combat-reference-v1019 #combatPage .combat-selected-food-large strong,
body.combat-reference-v1019 #combatPage .combat-selected-food-large b,
body.combat-reference-v1019 #combatPage .combat-session-summary-copy strong,
body.combat-reference-v1019 #combatPage .combat-session-summary-copy small {
  overflow-wrap: anywhere;
}

/* Idle overview has five values; keep them on one balanced row when there is room. */
body.combat-reference-v1019 #combatPage .combat-idle-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Laptop/tablet: keep roster readable and let the right-side ledgers use a full row. */
@media (max-width: 1260px) and (min-width: 981px) {
  body.combat-reference-v1019 #combatPage .combat-layout-v2 {
    grid-template-columns: minmax(280px, 310px) minmax(0, 1fr) !important;
  }
  body.combat-reference-v1019 #combatPage .combat-side-panel {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Narrow tablet/small desktop: stack encounter before roster instead of crushing either. */
@media (max-width: 980px) and (min-width: 761px) {
  body.combat-reference-v1019 #combatPage .combat-command-deck {
    grid-template-columns: 1fr !important;
  }
  body.combat-reference-v1019 #combatPage .combat-skill-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  body.combat-reference-v1019 #combatPage .combat-layout-v2 {
    display: flex !important;
    flex-direction: column;
    gap: 8px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-battle-panel { order: 1; width: 100%; }
  body.combat-reference-v1019 #combatPage .combat-roster-panel { order: 2; width: 100%; }
  body.combat-reference-v1019 #combatPage .combat-side-panel {
    order: 3;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    overflow: visible;
  }
}

/* Phone: readability beats density. Avoid two tiny enemy cards side-by-side. */
@media (max-width: 760px) {
  body.combat-reference-v1019 #combatPage .combat-skill-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-grid {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-areas: "portrait copy" !important;
    min-height: 58px !important;
    gap: 7px !important;
    padding: 5px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-roster-portrait {
    width: 42px !important;
    height: 42px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-name-row {
    flex-wrap: wrap;
    gap: 5px;
  }
  body.combat-reference-v1019 #combatPage .combat-enemy-xp {
    grid-area: auto !important;
    width: auto !important;
    padding: 1px 4px !important;
    border-top: 1px solid rgba(182, 121, 34, .18) !important;
    justify-content: initial !important;
    text-align: left !important;
  }
  body.combat-reference-v1019 #combatPage .combat-session-xp {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.combat-reference-v1019 #combatPage .combat-idle-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.combat-reference-v1019 #combatPage .combat-idle-stats > div:first-child {
    grid-column: 1 / -1;
  }
  body.combat-reference-v1019 #combatPage .combat-selected-food-large {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
  body.combat-reference-v1019 #combatPage .combat-food-choice {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }
}

@media (max-width: 430px) {
  body.combat-reference-v1019 #combatPage .combat-style-grid {
    grid-template-columns: 1fr !important;
  }
  body.combat-reference-v1019 #combatPage .combat-style-button {
    min-height: 52px !important;
  }
  body.combat-reference-v1019 #combatPage .combat-selected-food-large {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  body.combat-reference-v1019 #combatPage .combat-selected-food-large > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* JourneyDen UI source: styles/den-navigation-v101126.css | sha256:7b16a014e6a486a352b3c24795bd93156337384df70beae7dea76b6aa4d507b3 */
/* JourneyDen V1.01.126 — Den Navigation Rework Phase 1
   Structure only: internal Den tabs and content grouping. */
body.den-tabs-v101126 #denPage .den-shell {
  gap: 8px;
}

body.den-tabs-v101126 #denPage .den-section-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(182, 121, 34, .28);
  background: #030809;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182, 121, 34, .08);
}

body.den-tabs-v101126 #denPage .den-section-tab {
  min-width: 0;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(182, 121, 34, .16);
  border-radius: 0;
  background: #050b0d;
  color: #9d8d72;
  font: inherit;
  font-weight: 700;
  letter-spacing: .02em;
}

body.den-tabs-v101126 #denPage .den-section-tab:hover {
  border-color: rgba(182, 121, 34, .42);
  background: #081114;
  color: #d8bd87;
}

body.den-tabs-v101126 #denPage .den-section-tab[aria-selected="true"] {
  border-color: #a9742d;
  background: linear-gradient(180deg, rgba(182, 121, 34, .14), rgba(182, 121, 34, .035));
  color: #e0c38e;
  box-shadow: inset 0 -2px 0 rgba(211, 161, 77, .65);
}

body.den-tabs-v101126 #denPage .den-tab-panels,
body.den-tabs-v101126 #denPage .den-tab-panel {
  min-width: 0;
}

body.den-tabs-v101126 #denPage .den-tab-panel {
  display: grid;
  gap: 8px;
}

body.den-tabs-v101126 #denPage .den-tab-panel[hidden] {
  display: none !important;
}

/* The old second Den hero duplicated the page heading. Keep the live ids in DOM
   for renderer compatibility, but remove the duplicate presentation. */
body.den-tabs-v101126 #denPage .den-hero {
  display: none !important;
}

body.den-tabs-v101126 #denPage .den-reference-top-grid {
  display: block;
}

body.den-tabs-v101126 #denPage .den-overview-grid {
  width: 100%;
}

body.den-tabs-v101126 #denPage .den-overview-quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(182, 121, 34, .22);
  background: #030809;
}

body.den-tabs-v101126 #denPage .den-overview-quick-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.den-tabs-v101126 #denPage .den-overview-quick-copy strong {
  color: #d8bd87;
}

body.den-tabs-v101126 #denPage .den-overview-quick-copy small {
  color: #9f927e;
}

body.den-tabs-v101126 #denPage .den-overview-quick-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

body.den-tabs-v101126 #denPage .den-overview-quick-buttons button {
  min-height: 36px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body.den-tabs-v101126 #denPage .den-section-tabs {
    gap: 3px;
    padding: 4px;
  }

  body.den-tabs-v101126 #denPage .den-section-tab {
    min-height: 40px;
    padding: 6px 4px;
    font-size: 12px;
  }

  body.den-tabs-v101126 #denPage .den-overview-quick-actions {
    grid-template-columns: 1fr;
    padding: 8px;
  }

  body.den-tabs-v101126 #denPage .den-overview-quick-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }

  body.den-tabs-v101126 #denPage .den-overview-quick-buttons button {
    min-width: 0;
    padding-inline: 6px;
  }
}

@media (max-width: 390px) {
  body.den-tabs-v101126 #denPage .den-section-tab {
    font-size: 11px;
  }
}

/* JourneyDen UI source: styles/den-interaction-v101127.css | sha256:ca2ff91b0fe4b10061f9f39129baf21f70d1fe6ef07e7efc74151bc999cc41fb */
/* JourneyDen V1.01.127 — Den Navigation Rework Phase 2
   Interaction cleanup only: Rooms + Projects. No progression/balance changes. */

body.den-interaction-v101127 #denPage .den-home-section {
  padding-bottom: 10px;
}

/* Rooms: compact selectable overview + one focused detail surface. */
body.den-interaction-v101127 #denPage .den-room-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body.den-interaction-v101127 #denPage .den-room-card {
  min-height: 168px;
  padding: 10px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-color: rgba(182, 121, 34, .18);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

body.den-interaction-v101127 #denPage .den-room-card.is-selected-room {
  border-color: rgba(211, 161, 77, .72) !important;
  background: linear-gradient(180deg, rgba(182, 121, 34, .095), rgba(3, 8, 9, .98));
  box-shadow: inset 3px 0 0 rgba(211, 161, 77, .66);
}

body.den-interaction-v101127 #denPage .den-room-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

body.den-interaction-v101127 #denPage .den-room-card > button {
  width: 100%;
  min-height: 34px;
}

body.den-interaction-v101127 #denPage .den-room-card > .den-room-status {
  margin-bottom: 5px;
}

body.den-interaction-v101127 #denPage .den-room-detail-panel {
  display: grid;
  gap: 10px;
  margin-top: 9px;
  padding: 12px;
  border: 1px solid rgba(182, 121, 34, .34);
  background: #030809;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182, 121, 34, .07);
}

body.den-interaction-v101127 #denPage .den-room-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(182, 121, 34, .16);
}

body.den-interaction-v101127 #denPage .den-room-detail-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.den-interaction-v101127 #denPage .den-room-detail-heading h3 {
  margin: 0;
  color: #dec082;
  font-family: var(--jd-serif, Georgia, serif);
  font-weight: 500;
}

body.den-interaction-v101127 #denPage .den-room-detail-heading small,
body.den-interaction-v101127 #denPage .den-room-detail-description,
body.den-interaction-v101127 #denPage .den-room-detail-grid span,
body.den-interaction-v101127 #denPage .den-room-detail-future {
  color: #a79a85;
}

body.den-interaction-v101127 #denPage .den-room-detail-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(182, 121, 34, .26);
  background: #061013;
  color: #c7a96f;
  font-size: 12px;
  font-weight: 700;
}

body.den-interaction-v101127 #denPage .den-room-detail-description {
  margin: 0;
}

body.den-interaction-v101127 #denPage .den-room-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.den-interaction-v101127 #denPage .den-room-detail-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(182, 121, 34, .14);
  background: #040b0e;
}

body.den-interaction-v101127 #denPage .den-room-detail-grid small,
body.den-interaction-v101127 #denPage .den-project-resource-stats small {
  color: #8f826d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.den-interaction-v101127 #denPage .den-room-detail-grid strong {
  color: #d8bd87;
  overflow-wrap: anywhere;
}

body.den-interaction-v101127 #denPage .den-room-detail-progress {
  display: grid;
  gap: 5px;
}

body.den-interaction-v101127 #denPage .den-room-detail-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #a79a85;
}

body.den-interaction-v101127 #denPage .den-room-detail-progress b {
  color: #d8bd87;
}

body.den-interaction-v101127 #denPage .den-room-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body.den-interaction-v101127 #denPage .den-room-detail-actions button {
  min-height: 36px;
}

body.den-interaction-v101127 #denPage .den-room-detail-future {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid rgba(182, 121, 34, .12);
  background: #04090b;
}

/* The old all-room roadmap is retained in the DOM for renderer compatibility,
   but Phase 2 replaces it with the selected-room detail surface above. */
body.den-interaction-v101127 #denPage .den-progression-panel {
  display: none !important;
}

/* Projects: explicit Den Projects / World Projects workspaces. */
body.den-interaction-v101127 #denPage .den-project-group {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.den-interaction-v101127 #denPage .den-project-group-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(182, 121, 34, .24);
}

body.den-interaction-v101127 #denPage .den-project-group-heading h3 {
  margin: 1px 0 0;
  color: #dec082;
  font-family: var(--jd-serif, Georgia, serif);
  font-weight: 500;
}

body.den-interaction-v101127 #denPage .den-project-group-heading > small {
  max-width: 42ch;
  color: #9f927e;
  text-align: right;
}

body.den-interaction-v101127 #denPage #denWorldProjectsGroup .den-world-project-hub-heading > div {
  display: none;
}

body.den-interaction-v101127 #denPage #denWorldProjectsGroup .den-world-project-hub-heading {
  min-height: 0;
  justify-content: flex-end;
  padding: 0;
  border: 0;
}

body.den-interaction-v101127 #denPage .den-project-ledger {
  display: block !important;
}

body.den-interaction-v101127 #denPage .den-project-ledger-active,
body.den-interaction-v101127 #denPage .den-completed-project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.den-interaction-v101127 #denPage .den-completed-projects {
  margin-top: 7px;
  border: 1px solid rgba(182, 121, 34, .14);
  background: #030809;
}

body.den-interaction-v101127 #denPage .den-completed-projects > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  color: #aa9b83;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

body.den-interaction-v101127 #denPage .den-completed-projects > summary::-webkit-details-marker {
  display: none;
}

body.den-interaction-v101127 #denPage .den-completed-projects > summary span {
  min-width: 26px;
  padding: 2px 6px;
  border: 1px solid rgba(137, 184, 68, .28);
  color: #a9ce69;
  text-align: center;
}

body.den-interaction-v101127 #denPage .den-completed-project-list {
  padding: 0 7px 7px;
}

body.den-interaction-v101127 #denPage .den-project-empty-state {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(182, 121, 34, .12);
  color: #9f927e;
}

/* Resource rows prioritize the decision the player has to make. */
body.den-interaction-v101127 #denPage .den-project-requirement {
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 8px;
  align-items: center;
  padding: 7px;
}

body.den-interaction-v101127 #denPage .den-project-requirement-copy {
  display: grid;
  gap: 5px;
}

body.den-interaction-v101127 #denPage .den-project-resource-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

body.den-interaction-v101127 #denPage .den-project-resource-stats > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid rgba(182, 121, 34, .1);
  background: #020607;
}

body.den-interaction-v101127 #denPage .den-project-resource-stats b {
  color: #d9ba7a;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

body.den-interaction-v101127 #denPage .den-project-requirement > button {
  min-width: 118px;
}

/* Completed room construction should stop dominating the workspace. */
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project {
  padding-bottom: 9px;
}

body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project #denHideawayDescription,
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project .den-upgrade-reward,
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project .den-route-target,
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project > .den-project-progress,
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project #denHideawayRequirements,
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project .den-project-actions,
body.den-interaction-v101127 #denPage #denHideawayProject.is-complete-project #denHideawayHint {
  display: none !important;
}

@media (max-width: 980px) {
  body.den-interaction-v101127 #denPage .den-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.den-interaction-v101127 #denPage .den-project-ledger-active,
  body.den-interaction-v101127 #denPage .den-completed-project-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.den-interaction-v101127 #denPage .den-room-grid {
    grid-template-columns: 1fr !important;
  }

  body.den-interaction-v101127 #denPage .den-room-card {
    min-height: 0;
  }

  body.den-interaction-v101127 #denPage .den-room-detail-panel {
    padding: 9px;
  }

  body.den-interaction-v101127 #denPage .den-room-detail-heading,
  body.den-interaction-v101127 #denPage .den-project-group-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body.den-interaction-v101127 #denPage .den-project-group-heading > small {
    max-width: none;
    text-align: left;
  }

  body.den-interaction-v101127 #denPage .den-room-detail-grid {
    grid-template-columns: 1fr;
  }

  body.den-interaction-v101127 #denPage .den-room-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.den-interaction-v101127 #denPage .den-project-requirement {
    grid-template-columns: 38px minmax(0, 1fr) !important;
  }

  body.den-interaction-v101127 #denPage .den-project-requirement > button,
  body.den-interaction-v101127 #denPage .den-project-requirement > .den-project-check {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  body.den-interaction-v101127 #denPage .den-project-resource-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  body.den-interaction-v101127 #denPage .den-project-resource-stats {
    grid-template-columns: 1fr;
  }
}

body.den-interaction-v101127 #denPage .den-room-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
body.den-interaction-v101127 #denPage .den-room-card-actions button {
  min-width: 0;
  min-height: 34px;
  padding-inline: 7px;
}
@media (max-width: 390px) {
  body.den-interaction-v101127 #denPage .den-room-card-actions { grid-template-columns: 1fr; }
}
body.den-interaction-v101127 #denPage .den-room-card-actions {
  grid-column: 1 / -1;
  margin-top: auto;
}

/* JourneyDen UI source: styles/den-overview-journey-v101128.css | sha256:95db7cebddf8edcd487900d86aab1d7e5221035fd52ff35f2bd30f87cd100262 */
/* JourneyDen V1.01.128 — Den Navigation Rework Phase 3
   Overview + Journey polish only. No Den/world progression changes. */

/* =========================================================
   Overview — answer "what should I do now?" first
   ========================================================= */
body.den-overview-journey-v101128 #denPage .den-overview-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 8px;
  min-width: 0;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(182, 121, 34, .26);
  background: #030809;
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182, 121, 34, .06);
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-main {
  display: grid;
  align-content: start;
  gap: 9px;
  border-color: rgba(211, 161, 77, .42);
  background: linear-gradient(180deg, rgba(182, 121, 34, .075), #030809 44%);
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority h3 {
  margin: 0;
  color: #dec082;
  font-family: var(--jd-serif, Georgia, serif);
  font-weight: 500;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-main > p {
  margin: 0;
  color: #aea18d;
  line-height: 1.45;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-state {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 5px 8px;
  border: 1px solid rgba(182, 121, 34, .28);
  background: #020607;
  color: #d8bd87;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-progress {
  display: grid;
  gap: 4px;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-progress small,
body.den-overview-journey-v101128 #denPage .den-overview-priority-compact small {
  color: #9f927e;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-stack {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-compact {
  display: grid;
  align-content: start;
  gap: 5px;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-compact > strong {
  color: #d8bd87;
  font-size: 15px;
  overflow-wrap: anywhere;
}

body.den-overview-journey-v101128 #denPage .den-overview-mini-progress {
  height: 6px;
  overflow: hidden;
  border: 1px solid rgba(182, 121, 34, .15);
  background: #010405;
}

body.den-overview-journey-v101128 #denPage .den-overview-mini-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #8e5d1f, #d19b42);
  transition: width .2s ease;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

body.den-overview-journey-v101128 #denPage .den-overview-priority-actions button {
  min-height: 36px;
}

/* Keep the supporting home stats compact and avoid repeating Chapter progress. */
body.den-overview-journey-v101128 #denPage .den-chapter-overview-card,
body.den-overview-journey-v101128 #denPage #denWorldProjectGlance {
  display: none !important;
}

body.den-overview-journey-v101128 #denPage .den-overview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body.den-overview-journey-v101128 #denPage .den-overview-card {
  min-height: 86px;
}

/* =========================================================
   Journey — chapter state first, detailed journal on demand
   ========================================================= */
body.den-overview-journey-v101128 #denPage .den-tab-panel-journey {
  gap: 8px;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, .42fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(211, 161, 77, .38);
  background: linear-gradient(180deg, rgba(182, 121, 34, .07), #030809 55%);
  box-shadow: inset 0 0 0 3px #020607, inset 0 0 0 4px rgba(182, 121, 34, .06);
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-copy h3 {
  margin: 0;
  color: #dec082;
  font-family: var(--jd-serif, Georgia, serif);
  font-weight: 500;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-copy p {
  margin: 2px 0 0;
  color: #a99c87;
  line-height: 1.4;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-progress {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(182, 121, 34, .16);
  background: #020607;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #a69881;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-progress-top strong {
  color: #d8bd87;
  font-variant-numeric: tabular-nums;
}

body.den-overview-journey-v101128 #denPage .den-journey-chapter-progress > small {
  color: #8f826d;
  text-align: right;
}

/* The former optional guidance block is now the clear current-objective card. */
body.den-overview-journey-v101128 #denPage .den-guidance-card {
  border-color: rgba(182, 121, 34, .30);
  background: #030809;
}

body.den-overview-journey-v101128 #denPage .den-guidance-copy > strong {
  color: #d8bd87;
}

body.den-overview-journey-v101128 #denPage .den-journey-path-summary {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(182, 121, 34, .20);
  background: #030809;
}

body.den-overview-journey-v101128 #denPage .den-journey-path-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(182, 121, 34, .16);
}

body.den-overview-journey-v101128 #denPage .den-journey-path-heading h3 {
  margin: 1px 0 0;
  color: #dec082;
  font-family: var(--jd-serif, Georgia, serif);
  font-weight: 500;
}

body.den-overview-journey-v101128 #denPage .den-journey-path-heading > small {
  max-width: 52ch;
  color: #9f927e;
  text-align: right;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(182, 121, 34, .13);
  background: #020607;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card.is-active {
  border-color: rgba(211, 161, 77, .58);
  background: linear-gradient(180deg, rgba(182, 121, 34, .09), #020607 72%);
  box-shadow: inset 3px 0 0 rgba(211, 161, 77, .62);
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card.is-complete {
  border-color: rgba(137, 184, 68, .20);
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card.is-locked {
  opacity: .62;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #8f826d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card-top b {
  color: #bca06d;
  font-variant-numeric: tabular-nums;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card > strong {
  color: #d6b980;
  overflow-wrap: anywhere;
}

body.den-overview-journey-v101128 #denPage .den-journey-section-card > small {
  color: #948873;
  line-height: 1.35;
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives {
  border: 1px solid rgba(137, 184, 68, .16);
  background: #020607;
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  color: #a89a83;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives > summary::-webkit-details-marker {
  display: none;
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives > summary span {
  min-width: 28px;
  padding: 2px 6px;
  border: 1px solid rgba(137, 184, 68, .28);
  color: #a9ce69;
  text-align: center;
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0 8px 8px;
  list-style: none;
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(137, 184, 68, .10);
  color: #99bf68;
  background: rgba(137, 184, 68, .025);
}

body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives li strong {
  color: #a8a08f;
  overflow-wrap: anywhere;
}

body.den-overview-journey-v101128 #denPage .den-journey-no-completed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(182, 121, 34, .10);
  color: #8f826d;
}

body.den-overview-journey-v101128 #denPage .journey-journal {
  margin-top: 0;
}

@media (max-width: 980px) {
  body.den-overview-journey-v101128 #denPage .den-overview-focus,
  body.den-overview-journey-v101128 #denPage .den-journey-chapter-summary {
    grid-template-columns: 1fr;
  }

  body.den-overview-journey-v101128 #denPage .den-overview-priority-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  body.den-overview-journey-v101128 #denPage .den-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.den-overview-journey-v101128 #denPage .den-journey-section-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.den-overview-journey-v101128 #denPage .den-overview-priority,
  body.den-overview-journey-v101128 #denPage .den-journey-chapter-summary,
  body.den-overview-journey-v101128 #denPage .den-journey-path-summary {
    padding: 9px;
  }

  body.den-overview-journey-v101128 #denPage .den-overview-priority-stack,
  body.den-overview-journey-v101128 #denPage .den-overview-grid,
  body.den-overview-journey-v101128 #denPage .den-journey-section-cards,
  body.den-overview-journey-v101128 #denPage .den-journey-completed-objectives ul {
    grid-template-columns: 1fr;
  }

  body.den-overview-journey-v101128 #denPage .den-overview-priority-heading,
  body.den-overview-journey-v101128 #denPage .den-journey-path-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body.den-overview-journey-v101128 #denPage .den-journey-path-heading > small {
    max-width: none;
    text-align: left;
  }

  body.den-overview-journey-v101128 #denPage .den-overview-priority-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.den-overview-journey-v101128 #denPage .den-overview-priority-compact .den-overview-priority-actions {
    grid-template-columns: 1fr;
  }

  body.den-overview-journey-v101128 #denPage .den-overview-priority-actions button {
    width: 100%;
    min-width: 0;
  }
}

/* JourneyDen UI source: styles/den-project-tabs-v101130.css | sha256:0e8f3f8c1480bad567e70c282ed9eccb1c83b3eb36031190ddeddd3de5703d50 */
/* JourneyDen V1.01.130 — Den Project Navigation Split
   Den construction projects and World Projects are separate Den destinations. */
body.den-project-tabs-v101130 #denPage .den-section-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.den-project-tabs-v101130 #denPage .den-tab-panel-den-projects,
body.den-project-tabs-v101130 #denPage .den-tab-panel-world-projects {
  align-content: start;
}

/* Phase 2 grouped both project families beneath one Projects tab. The split tabs
   no longer need a second duplicate group heading inside either workspace. */
body.den-project-tabs-v101130 #denPage .den-tab-panel-den-projects > .den-project-group,
body.den-project-tabs-v101130 #denPage .den-tab-panel-world-projects > .den-project-group {
  display: contents;
}

@media (max-width: 760px) {
  body.den-project-tabs-v101130 #denPage .den-section-tab {
    min-height: 48px;
    padding-inline: 3px;
    font-size: 11px;
    line-height: 1.12;
    white-space: normal;
  }
}

@media (max-width: 390px) {
  body.den-project-tabs-v101130 #denPage .den-section-tab {
    min-height: 50px;
    font-size: 10px;
  }
}

/* JourneyDen UI source: styles/den-world-projects-v101131.css | sha256:1cfda85121b7ccb158e4643ad345de89583fb69de7e2843a635c16cdf0ffc436 */
/* JourneyDen V1.01.131 — World Projects visual rework
   Clear route selection, focused project progress, compact contribution cards. */

body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub {
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  min-height: 0;
  padding: 8px 2px 10px;
  border-bottom: 1px solid rgba(182,121,34,.24);
}

body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading > div {
  display: block !important;
  min-width: 0;
}

body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading h3 {
  margin: 1px 0 2px;
  color: #e0c07f;
  font-family: var(--jd-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 500;
}

body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading p {
  margin: 0;
  max-width: 760px;
  color: #978b76;
  font-size: 9px;
  line-height: 1.45;
}

body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading button {
  flex: 0 0 auto;
  min-width: 128px;
}

/* The route selector belongs above the selected project instead of being a cramped sidebar. */
body.den-world-projects-v101131 #denPage .den-world-project-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  min-width: 0;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-panel,
body.den-world-projects-v101131 #denPage #denFirstRouteProject {
  min-width: 0;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(182,121,34,.32) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg,#071216,#040b0e) !important;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.24) !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-heading {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px !important;
  padding: 0 1px 7px;
  border-bottom: 1px solid rgba(182,121,34,.15);
}

body.den-world-projects-v101131 #denPage .den-project-ledger-heading > small {
  color: #807563;
  font-size: 8px;
  text-align: right;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-active,
body.den-world-projects-v101131 #denPage .den-completed-project-list {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 6px !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-card {
  position: relative;
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: stretch;
  min-width: 0;
  min-height: 94px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.17) !important;
  border-radius: 0 !important;
  background: #03090b !important;
  color: #bca982;
  text-align: left;
  box-shadow: none !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-card:hover:not(.is-locked) {
  border-color: rgba(182,121,34,.42) !important;
  background: #061014 !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-card.is-selected {
  border-color: #b67922 !important;
  background: linear-gradient(90deg,rgba(182,121,34,.12),#040b0e 36%) !important;
  box-shadow: inset 3px 0 0 rgba(211,161,77,.74) !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-card.is-complete {
  border-color: rgba(137,184,68,.30) !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-card.is-locked {
  opacity: .58;
  filter: saturate(.55);
}

body.den-world-projects-v101131 #denPage .den-project-ledger-index {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(182,121,34,.13);
  background: #020607;
  color: #6e604b;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

body.den-world-projects-v101131 #denPage .is-selected .den-project-ledger-index {
  color: #d2a451;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-copy {
  display: grid !important;
  grid-template-rows: auto auto auto 4px auto;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-top .eyebrow {
  min-width: 0;
  color: #7d6b50;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-status {
  position: static !important;
  flex: 0 0 auto;
  padding: 2px 4px !important;
  border: 1px solid rgba(182,121,34,.26) !important;
  background: #03090b !important;
  color: #b99860 !important;
  font-size: 7px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.den-world-projects-v101131 #denPage .is-complete .den-project-ledger-status {
  border-color: rgba(137,184,68,.32) !important;
  color: #9fc665 !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-copy strong {
  margin: 0 !important;
  color: #dec084 !important;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-copy > small {
  margin: 0 !important;
  color: #8e816d !important;
  font-size: 8px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-progress {
  display: block;
  height: 4px !important;
  margin: 2px 0 0 !important;
  border: 1px solid rgba(182,121,34,.11);
  background: #010405;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#7d501e,#d1a04d) !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-meta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  margin: 0 !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-meta b {
  color: #cda45d !important;
  font-size: 8px !important;
}

body.den-world-projects-v101131 #denPage .den-project-ledger-meta em {
  min-width: 0;
  color: #766d60 !important;
  font-size: 7px !important;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected project: keep focus on useful data; placeholder region banners are intentionally hidden. */
body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-region-art {
  display: none !important;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-project-heading {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0 1px 8px;
  border-bottom: 1px solid rgba(182,121,34,.17);
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-project-heading h3 {
  margin: 2px 0 0 !important;
  color: #e1c17e;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 19px !important;
  font-weight: 500;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-room-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(182,121,34,.28);
  background: #03090b;
  color: #c2a269;
  font-size: 8px;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject > p#denForestRouteDescription {
  max-width: 920px;
  margin: 0 0 8px !important;
  color: #948875;
  font-size: 9px !important;
  line-height: 1.5 !important;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 150px;
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.17) !important;
  background: #020708 !important;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target > div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target > div + div {
  border-left: 1px solid rgba(182,121,34,.13);
  text-align: right;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target small,
body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target strong {
  font-family: var(--jd-serif,Georgia,serif);
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target small {
  color: #786d5c;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target strong {
  color: #d5bb82;
  font-size: 11px;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject > .den-project-progress {
  height: 7px !important;
  margin: 6px 0 9px !important;
  border: 1px solid rgba(182,121,34,.15);
  background: #010405;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject > .den-project-progress span {
  background: linear-gradient(90deg,#86541d,#d2a24e) !important;
}

body.den-world-projects-v101131 #denPage .den-project-supply-heading {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px !important;
  padding: 7px 1px 0 !important;
  border-top: 1px solid rgba(182,121,34,.12) !important;
}

body.den-world-projects-v101131 #denPage .den-project-supply-heading strong {
  color: #d8bc81;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 11px;
  font-weight: 500;
}

body.den-world-projects-v101131 #denPage .den-project-supply-heading small {
  color: #7b7265;
  font-size: 8px;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 6px !important;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) auto !important;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 76px;
  padding: 7px !important;
  border: 1px solid rgba(182,121,34,.14) !important;
  background: #03090b !important;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement.is-complete {
  border-color: rgba(137,184,68,.25) !important;
  background: linear-gradient(90deg,rgba(95,128,47,.055),#03090b 45%) !important;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.22) !important;
  background: #020607 !important;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-item-art,
body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-interface-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement-copy > strong {
  color: #d9bf88;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.den-world-projects-v101131 #denPage .den-project-resource-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
}

body.den-world-projects-v101131 #denPage .den-project-resource-summary span,
body.den-world-projects-v101131 #denPage .den-project-resource-summary small {
  min-width: 0;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.den-world-projects-v101131 #denPage .den-project-resource-summary span {
  color: #a88956;
}

body.den-world-projects-v101131 #denPage .den-project-resource-summary small {
  color: #766e62;
  text-align: right;
}

body.den-world-projects-v101131 #denPage .den-project-requirement-progress {
  display: block;
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(182,121,34,.10);
  background: #010405;
}

body.den-world-projects-v101131 #denPage .den-project-requirement-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,#74491c,#c99a47);
}

body.den-world-projects-v101131 #denPage .den-project-requirement.is-complete .den-project-requirement-progress i {
  background: #6f913d;
}

body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement > button {
  min-width: 92px !important;
  padding: 6px 7px;
  font-size: 8px;
  white-space: nowrap;
}

body.den-world-projects-v101131 #denPage .den-project-check {
  display: flex !important;
  align-items: center;
  gap: 5px;
  min-width: 74px;
  color: #91b85b;
  font-family: var(--jd-serif,Georgia,serif);
  font-size: 8px;
  justify-content: flex-end;
}

body.den-world-projects-v101131 #denPage .den-project-check b {
  font-weight: 500;
}

body.den-world-projects-v101131 #denPage .den-project-check span {
  font-size: 14px;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-actions {
  display: flex !important;
  justify-content: flex-end;
  gap: 6px;
  margin: 9px 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid rgba(182,121,34,.13);
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-actions button {
  min-width: 160px;
}

body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-hint {
  margin: 6px 0 0 !important;
  color: #817668;
  font-size: 8px;
  line-height: 1.4;
  text-align: right;
}

body.den-world-projects-v101131 #denPage .den-completed-projects {
  margin-top: 6px;
}

@media (max-width: 1120px) {
  body.den-world-projects-v101131 #denPage .den-project-ledger-active,
  body.den-world-projects-v101131 #denPage .den-completed-project-list,
  body.den-world-projects-v101131 #denPage #denForestRouteRequirements {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 7px;
  }

  body.den-world-projects-v101131 #denPage #denWorldProjectsGroup .den-world-project-hub-heading button {
    width: 100%;
  }

  body.den-world-projects-v101131 #denPage .den-project-ledger-heading {
    display: grid !important;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2px;
  }

  body.den-world-projects-v101131 #denPage .den-project-ledger-heading > small {
    text-align: left;
  }

  body.den-world-projects-v101131 #denPage .den-project-ledger-active,
  body.den-world-projects-v101131 #denPage .den-completed-project-list,
  body.den-world-projects-v101131 #denPage #denForestRouteRequirements {
    grid-template-columns: 1fr !important;
  }

  body.den-world-projects-v101131 #denPage .den-project-ledger-card {
    min-height: 86px !important;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-project-heading {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-project-heading h3 {
    font-size: 16px !important;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target {
    grid-template-columns: 1fr 96px;
  }

  body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement {
    grid-template-columns: 36px minmax(0,1fr) auto !important;
  }

  body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement > button {
    min-width: 84px !important;
  }
}

@media (max-width: 480px) {
  body.den-world-projects-v101131 #denPage .den-project-ledger-card {
    grid-template-columns: 32px minmax(0,1fr) !important;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target {
    grid-template-columns: 1fr;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-route-target > div + div {
    border-top: 1px solid rgba(182,121,34,.13);
    border-left: 0;
    text-align: left;
  }

  body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement {
    grid-template-columns: 34px minmax(0,1fr) !important;
  }

  body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement > button,
  body.den-world-projects-v101131 #denPage #denForestRouteRequirements .den-project-requirement > .den-project-check {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0 !important;
    justify-content: center;
  }

  body.den-world-projects-v101131 #denPage .den-project-resource-summary {
    display: grid;
    gap: 1px;
  }

  body.den-world-projects-v101131 #denPage .den-project-resource-summary small {
    text-align: left;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-actions {
    display: grid !important;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-actions button {
    width: 100%;
    min-width: 0;
  }

  body.den-world-projects-v101131 #denPage #denFirstRouteProject .den-project-hint {
    text-align: left;
  }
}

/* JourneyDen UI source: styles/den-world-projects-crop-fix-v101132.css | sha256:b0aa40903d93df6409c05c8e1d9757a7e96653381a839fe21a226c603d01eed3 */
/* JourneyDen V1.01.132 — World Projects crop + spacing correction
   Preserve the V1.01.131 structure while allowing dynamic route/project text
   to size naturally instead of being clipped into fixed-height cards. */

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-active,
body.den-world-projects-crop-fix-v101132 #denPage .den-completed-project-list {
  grid-template-columns: repeat(auto-fit,minmax(420px,1fr)) !important;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-card {
  height: auto !important;
  min-height: 112px !important;
  box-sizing: border-box;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-copy {
  grid-template-rows: auto auto auto 5px minmax(14px,auto) !important;
  align-content: stretch !important;
  gap: 4px !important;
  padding: 9px 10px 10px !important;
  box-sizing: border-box;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-copy strong,
body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-copy > small {
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-progress {
  height: 5px !important;
  margin: 3px 0 0 !important;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-meta {
  align-items: flex-start !important;
  gap: 10px !important;
  min-height: 14px;
  margin: 1px 0 0 !important;
  overflow: visible !important;
  line-height: 1.25 !important;
  box-sizing: border-box;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-meta b {
  flex: 0 0 auto;
  line-height: 1.25 !important;
}

body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-meta em {
  line-height: 1.25 !important;
  text-align: right;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Give resource rows a little more vertical breathing room. */
body.den-world-projects-crop-fix-v101132 #denPage #denForestRouteRequirements .den-project-requirement {
  min-height: 82px !important;
  padding: 8px !important;
}

body.den-world-projects-crop-fix-v101132 #denPage #denForestRouteRequirements .den-project-requirement-copy,
body.den-world-projects-crop-fix-v101132 #denPage .den-project-resource-summary {
  line-height: 1.25;
}

/* At tablet widths a single full-width route card is cleaner than two squeezed cards. */
@media (max-width: 900px) {
  body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-active,
  body.den-world-projects-crop-fix-v101132 #denPage .den-completed-project-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.den-world-projects-crop-fix-v101132 #denPage .den-project-ledger-card {
    min-height: 108px !important;
  }
}

/* JourneyDen UI source: styles/den-construction-polish-v101137.css | sha256:aa1383a85ba9be936b033dbe9e2f1ea4518731bb8177fe824478f8b88908d1bf */
/* JourneyDen V1.01.137 — Den timed-construction final polish.
   Presentation only: the world system remains the source of truth for costs,
   timestamps, completion and rewards. */

body.den-construction-polish-v101137 #denPage #denHideawayProject {
  position: relative;
  overflow: hidden;
}

body.den-construction-polish-v101137 #denPage #denHideawayProject[data-construction-state="ready"] {
  border-color: rgba(203, 164, 86, .62);
}

body.den-construction-polish-v101137 #denPage #denHideawayProject[data-construction-state="building"] {
  border-color: rgba(203, 164, 86, .7);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(203, 164, 86, .06);
}

body.den-construction-polish-v101137 #denPage #denHideawayProject[data-construction-state="building"] .den-room-status,
body.den-construction-polish-v101137 #denPage #denHideawayProject[data-construction-state="ready"] .den-room-status {
  white-space: nowrap;
}

body.den-construction-polish-v101137 #denPage #denHideawayProject .den-route-target {
  align-items: end;
}

body.den-construction-polish-v101137 #denPage #denHideawayProgressLabel,
body.den-construction-polish-v101137 #denPage #denHideawayPercent {
  font-variant-numeric: tabular-nums;
}

body.den-construction-polish-v101137 #denPage #denHideawayProgressTrack {
  min-height: 9px;
}

body.den-construction-polish-v101137 #denPage #denHideawayProject[data-construction-state="building"] #denHideawayProgressFill {
  transition: width .35s linear;
}

body.den-construction-polish-v101137 #denPage #denHideawayRequirements .den-project-requirement.is-committed {
  opacity: .84;
}

body.den-construction-polish-v101137 #denPage #denHideawayRequirements .den-project-requirement.is-committed .den-project-check b {
  letter-spacing: .03em;
}

body.den-construction-polish-v101137 #denPage #denHideawayProject[data-construction-state="building"] .den-project-actions:empty {
  display: none;
}

body.den-construction-polish-v101137 #denPage #denCompleteHideaway:not([hidden]) {
  min-height: 42px;
}

@media (max-width: 760px) {
  body.den-construction-polish-v101137 #denPage #denHideawayProject .den-route-project-heading {
    gap: 10px;
  }

  body.den-construction-polish-v101137 #denPage #denHideawayProject .den-room-status {
    flex: 0 0 auto;
  }

  body.den-construction-polish-v101137 #denPage #denHideawayProject .den-route-target {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.den-construction-polish-v101137 #denPage #denHideawayProject .den-route-target > div:last-child {
    text-align: right !important;
  }

  body.den-construction-polish-v101137 #denPage #denCompleteHideaway:not([hidden]) {
    width: 100%;
  }
}

@media (max-width: 460px) {
  body.den-construction-polish-v101137 #denPage #denHideawayProject .den-route-target {
    grid-template-columns: 1fr !important;
  }

  body.den-construction-polish-v101137 #denPage #denHideawayProject .den-route-target > div:last-child {
    text-align: left !important;
  }
}

/* JourneyDen UI source: styles/mobile-combat-expeditions-v101140.css | sha256:183ed83b4686c63b3b0cc97d5e84196a067e8ecea0c79a8186b63c2e30992f30 */
/* JourneyDen V1.01.140 — Mobile Combat & Expeditions — Phase 3
   Mobile/tablet presentation only (<=820px). Gameplay, saves, balance,
   combat timing, expedition sequencing and desktop/web layout are unchanged. */

@media (max-width:820px){
  /* ---------- Shared page framing ---------- */
  body.mobile-combat-expeditions-v101140 #combatPage,
  body.mobile-combat-expeditions-v101140 #expeditionsPage{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  body.mobile-combat-expeditions-v101140 #combatPage > .section-heading,
  body.mobile-combat-expeditions-v101140 #expeditionsPage > .section-heading{
    display:none!important;
  }

  /* ---------- Combat: compact RPG command HUD ---------- */
  body.mobile-combat-expeditions-v101140 #combatPage .combat-command-deck{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin:0 0 7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skills-inline-panel,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-panel,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-panel,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-panel,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-food-panel-v2,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-session-panel{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border-color:rgba(181,130,53,.28)!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skills-inline-panel{
    padding:6px!important;
    margin:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skills-inline-heading{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    margin:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card{
    min-height:54px!important;
    padding:5px 4px!important;
    border-radius:4px!important;
    background:#03090b!important;
    border:1px solid rgba(181,130,53,.18)!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-main{
    display:grid!important;
    grid-template-columns:24px minmax(0,1fr) auto!important;
    gap:3px!important;
    align-items:center!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-copy strong{
    font-size:8.5px!important;
    line-height:1.1!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-copy span,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-meta{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-level small{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-level b{
    font-size:12px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-progress{
    height:3px!important;
    margin-top:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-panel{
    padding:6px!important;
    margin:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:6px!important;
    margin:0 0 5px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading .eyebrow,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading h3{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading::before{
    content:'Combat stance';
    color:#bca273;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading .combat-level-badge{
    min-width:0!important;
    min-height:30px!important;
    padding:4px 7px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading .combat-level-badge::before{
    content:'Combat Lv ';
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-heading .combat-level-badge strong{
    display:inline!important;
    font-size:12px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:4px!important;
    overflow:visible!important;
    padding:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    align-content:center!important;
    gap:3px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:58px!important;
    padding:5px 3px!important;
    border-radius:4px!important;
    text-align:center!important;
    background:#03090b!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button .combat-style-icon{
    width:28px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button .combat-style-copy{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button small,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button span:not(.combat-style-icon),
  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button b{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button strong{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8.5px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button.active{
    border-color:#d5a84c!important;
    background:linear-gradient(180deg,rgba(115,76,24,.30),#050c0f)!important;
    box-shadow:inset 0 -3px 0 rgba(213,168,76,.72)!important;
  }

  /* ---------- Combat: game-screen ordering ---------- */
  body.mobile-combat-expeditions-v101140 #combatPage .combat-layout-v2{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage:not(.combat-active) .combat-roster-panel{order:1!important;}
  body.mobile-combat-expeditions-v101140 #combatPage:not(.combat-active) .combat-battle-panel{order:2!important;}
  body.mobile-combat-expeditions-v101140 #combatPage:not(.combat-active) .combat-side-panel{order:3!important;}

  body.mobile-combat-expeditions-v101140 #combatPage.combat-active .combat-battle-panel{order:1!important;}
  body.mobile-combat-expeditions-v101140 #combatPage.combat-active .combat-side-panel{order:2!important;}
  body.mobile-combat-expeditions-v101140 #combatPage.combat-active .combat-roster-panel{order:3!important;}

  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-panel,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-panel,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-food-panel-v2,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-session-panel{
    padding:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-panel-heading{
    min-height:30px!important;
    margin-bottom:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-panel-heading .eyebrow,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-panel-heading .eyebrow{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-panel-heading h3,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-panel-heading strong{
    font-size:12px!important;
    line-height:1.15!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-panel-kicker{
    font-size:8px!important;
  }

  /* Roster is now a tappable enemy gallery instead of compressed list rows. */
  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:5px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:148px!important;
    padding:6px!important;
    border-radius:5px!important;
    background:linear-gradient(180deg,#071014,#03090b)!important;
    text-align:left!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:86px!important;
    min-height:86px!important;
    border:1px solid rgba(181,130,53,.18)!important;
    background:radial-gradient(circle at 50% 45%,rgba(181,130,53,.09),transparent 60%),#020708!important;
    overflow:hidden!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait .combat-enemy-icon-art,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait img{
    width:82px!important;
    height:82px!important;
    max-width:82px!important;
    max-height:82px!important;
    object-fit:contain!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-copy{
    display:grid!important;
    gap:2px!important;
    width:100%!important;
    min-width:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-name-row{
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:5px!important;
    min-width:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-name-row strong{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-xp{
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
    border:0!important;
    white-space:nowrap!important;
    font-size:8px!important;
    color:#d4aa62!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-copy small{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-state{
    display:block!important;
    margin-top:2px!important;
    padding-top:3px!important;
    border-top:1px solid rgba(181,130,53,.12)!important;
    font-size:8px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-card.active{
    border-color:#d5a84c!important;
    background:linear-gradient(180deg,rgba(111,72,22,.30),#050c0f)!important;
    box-shadow:inset 0 -3px 0 rgba(213,168,76,.72)!important;
  }

  /* ---------- Combat: enemy-first battlefield ---------- */
  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-panel-heading{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-view,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-encounter-record{
    min-height:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-battle-clean{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean.enemy{
    order:1!important;
    padding:7px!important;
    border-radius:5px!important;
    border-color:rgba(197,137,56,.38)!important;
    background:linear-gradient(180deg,#061014,#020607)!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-vs-clean{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean.player{
    order:2!important;
    padding:7px!important;
    border-radius:5px!important;
    background:#03090b!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean.enemy .combat-fighter-portrait{
    min-height:176px!important;
    max-height:210px!important;
    margin-bottom:7px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean.enemy .combat-enemy-portrait .combat-fighter-enemy-art{
    width:100%!important;
    height:100%!important;
    max-height:210px!important;
    object-fit:contain!important;
  }

  /* The global mobile HUD already carries player identity/health. Keep the local player card compact. */
  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean.player .combat-fighter-portrait{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean-head{
    grid-template-columns:18px minmax(0,1fr)!important;
    gap:6px!important;
    margin-bottom:6px!important;
    padding-bottom:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean-head strong{
    font-size:13px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean-head small,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean-head b{
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-health-line{
    font-size:9px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-health-bar{
    height:9px!important;
    margin:4px 0 7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-progress-track{
    height:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-attack-timer small{
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-clean-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-clean-stats span{
    min-height:38px!important;
    padding:5px 3px!important;
    border-radius:3px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-clean-stats small{
    display:block!important;
    font-size:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-clean-stats b{
    font-size:10px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-encounter-footer{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    padding:6px!important;
    border-radius:4px!important;
    background:#03090b!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-encounter-footer > span{
    font-size:7px!important;
    text-transform:uppercase!important;
    letter-spacing:.05em!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-encounter-footer > strong{
    text-align:right!important;
    font-size:9px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-bottom-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin-top:0!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-repeat-note{
    min-height:38px!important;
    padding:6px 7px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-repeat-note small{
    display:block!important;
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-stop-button{
    width:100%!important;
    min-height:48px!important;
    border-radius:5px!important;
    font-size:11px!important;
    font-weight:850!important;
    text-transform:uppercase!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-panel{
    padding:8px!important;
    border-radius:5px!important;
    background:#03090b!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-title{
    min-height:54px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-stats{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-stats > div{
    min-width:0!important;
    min-height:42px!important;
    padding:5px 2px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-stats span{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-stats small{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:6.5px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-idle-stats strong{
    font-size:11px!important;
  }

  /* ---------- Combat supplies / session as secondary HUD ---------- */
  body.mobile-combat-expeditions-v101140 #combatPage .combat-side-panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage #combatAutoEatControl,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-selected-food-large > button{
    min-height:42px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-side-help{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-selected-food-large,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-selected-food-empty{
    min-height:54px!important;
    padding:6px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-mobile-fold{
    min-height:42px!important;
    border-radius:4px!important;
    background:#03090b!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-session-xp{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-session-xp > div{
    min-height:42px!important;
    padding:5px 2px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-session-xp small{
    font-size:6.5px!important;
  }

  body.mobile-combat-expeditions-v101140 #combatPage .combat-session-xp strong{
    font-size:9px!important;
  }

  /* ---------- Expedition Log: region picker becomes game carousel ---------- */
  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-log-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-log-list-panel{
    order:1!important;
    width:100%!important;
    min-width:0!important;
    padding:7px!important;
    border-radius:6px!important;
    background:#050c0f!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-log-detail-panel{
    order:2!important;
    width:100%!important;
    min-width:0!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-list-head{
    min-height:30px!important;
    margin-bottom:5px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-list-head .eyebrow{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-list-head h3{
    font-size:12px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-list-head > span{
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-filter-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;
    margin-bottom:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-filter-tabs button{
    min-width:0!important;
    min-height:40px!important;
    padding:5px!important;
    border-radius:4px!important;
    font-size:8.5px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-list{
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    padding:0 1px 3px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-list::-webkit-scrollbar{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-card{
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr)!important;
    flex:0 0 min(78vw,280px)!important;
    width:min(78vw,280px)!important;
    min-width:220px!important;
    min-height:94px!important;
    padding:0!important;
    border-radius:5px!important;
    scroll-snap-align:start!important;
    overflow:hidden!important;
    background:#03090b!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-card.selected{
    border-color:#d5a84c!important;
    box-shadow:inset 0 -3px 0 rgba(213,168,76,.72)!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-art{
    width:72px!important;
    min-height:92px!important;
    border-right:1px solid rgba(181,130,53,.20)!important;
    border-bottom:0!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-main{
    min-width:0!important;
    padding:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-card-title{
    display:flex!important;
    gap:5px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-card-title strong{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-card-title em{
    flex:0 0 auto!important;
    font-size:6.5px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-main > small{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-card-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:3px!important;
    padding-top:5px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-card-stats span{
    display:block!important;
    min-width:0!important;
    font-size:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-card-stats b{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-lock-note{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-next-chapter{
    display:none!important;
  }

  /* ---------- Expedition selected region = mission screen ---------- */
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-shell{
    padding:7px!important;
    border-radius:6px!important;
    background:#050c0f!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-head{
    display:grid!important;
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:8px!important;
    padding:0 0 7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-art{
    min-height:100px!important;
    height:100px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-copy .eyebrow{
    font-size:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-copy h2{
    margin:1px 0 5px!important;
    font-size:17px!important;
    line-height:1.1!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:3px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid > span{
    display:block!important;
    min-width:0!important;
    padding:3px 4px!important;
    border:1px solid rgba(181,130,53,.12)!important;
    background:#03090b!important;
  }

  /* Keep only the mission-critical metadata visible on a small screen. */
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid > span:nth-child(2),
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid > span:nth-child(3),
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid > span:nth-child(4),
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid > span:nth-child(5){
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid small{
    display:block!important;
    font-size:6.5px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-meta-grid b{
    display:block!important;
    margin-top:1px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-tabs{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    padding:5px 0!important;
    background:#050c0f!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-tabs button{
    min-width:0!important;
    min-height:42px!important;
    padding:4px 2px!important;
    border-radius:4px!important;
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-tabs button span{
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-player-strip{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:3px!important;
    margin-bottom:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-player-strip > span{
    min-width:0!important;
    padding:5px 3px!important;
    border-radius:3px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:6.5px!important;
  }

  /* Food and Style are useful but too wide for the combat-stat strip. */
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-player-strip > span:nth-child(2),
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-player-strip > span:nth-child(7){
    display:none!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-player-strip b{
    font-size:8px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-entry-warning{
    display:grid!important;
    gap:2px!important;
    padding:7px!important;
    margin-bottom:6px!important;
    border-radius:4px!important;
    font-size:8px!important;
    line-height:1.3!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-entry-warning strong{
    font-size:10px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-active-stage{
    padding:7px!important;
    border-radius:5px!important;
    background:linear-gradient(180deg,#061014,#03090b)!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-active-stage-main{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:center!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-portrait{
    width:82px!important;
    height:82px!important;
    min-width:82px!important;
    border-radius:4px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-portrait img,
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-enemy-art{
    width:78px!important;
    height:78px!important;
    max-width:78px!important;
    max-height:78px!important;
    object-fit:contain!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-active-stage h3{
    font-size:15px!important;
    line-height:1.1!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-active-stage p{
    font-size:8px!important;
    line-height:1.25!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-index{
    min-width:42px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-index b{
    font-size:14px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-status{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:3px!important;
    margin-top:6px!important;
    font-size:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .two-step-stage-hp{
    margin-top:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .two-step-hp-track{
    height:9px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-attack-strip{
    gap:5px!important;
    margin-top:6px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-attack-line-track{
    height:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
    margin-top:7px!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-enter-button,
  body.mobile-combat-expeditions-v101140 #expeditionsPage .expedition-preview-button{
    width:100%!important;
    min-height:48px!important;
    border-radius:5px!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-enter-button.start{
    box-shadow:inset 0 -3px 0 rgba(213,168,76,.56)!important;
  }

  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-route-preview,
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-boss-card,
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-loot-encounter,
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-discovery-row{
    border-radius:4px!important;
  }

  /* Expedition confirmation dialogs should feel like full mobile game prompts. */
  body.mobile-combat-expeditions-v101140 .expedition-start-card{
    width:min(calc(100vw - 20px),460px)!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;
    border-radius:7px!important;
  }

  body.mobile-combat-expeditions-v101140 .expedition-start-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
  }

  body.mobile-combat-expeditions-v101140 .expedition-start-actions button{
    width:100%!important;
    min-height:48px!important;
    border-radius:5px!important;
  }
}

@media (max-width:390px){
  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-icon{
    display:none!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-skill-overview-card .skill-overview-main{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-button{
    min-height:54px!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait{
    height:78px!important;
    min-height:78px!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait .combat-enemy-icon-art,
  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait img{
    width:74px!important;
    height:74px!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-fighter-clean.enemy .combat-fighter-portrait{
    min-height:160px!important;
  }
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-region-card{
    flex-basis:82vw!important;
    width:82vw!important;
    min-width:210px!important;
  }
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-active-stage-main{
    grid-template-columns:72px minmax(0,1fr) auto!important;
  }
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-portrait{
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
  }
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-portrait img,
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-stage-enemy-art{
    width:68px!important;
    height:68px!important;
  }
}

@media (max-width:340px){
  body.mobile-combat-expeditions-v101140 #combatPage .combat-style-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-grid{
    grid-template-columns:1fr!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-card{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    min-height:94px!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-roster-portrait{
    width:82px!important;
    height:82px!important;
    min-height:82px!important;
  }
  body.mobile-combat-expeditions-v101140 #combatPage .combat-enemy-copy{
    align-self:center!important;
  }
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-head{
    grid-template-columns:74px minmax(0,1fr)!important;
  }
  body.mobile-combat-expeditions-v101140 #expeditionsPage .exp-log-detail-art{
    height:88px!important;
    min-height:88px!important;
  }
}

/* JourneyDen UI source: styles/mobile-den-storage-equipment-world-v101141.css | sha256:1c2315b26e8b191b53f9ac00ecdf6becfb743f92d4dac59577bc255f01d277e6 */
/* JourneyDen V1.01.141 — Mobile Den, Storage, Equipment & World — Phase 4
   Mobile/tablet presentation only (<=820px). Gameplay, saves, balance,
   room/project logic, inventory data, equipment state and desktop/web layout are unchanged. */

@media (max-width:820px){
  body.mobile-den-storage-equipment-world-v101141 #denPage,
  body.mobile-den-storage-equipment-world-v101141 #bankPage,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage,
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage{
    min-width:0;
    max-width:100%;
    overflow-x:hidden;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage > .section-heading,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage > .section-heading{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage button,
  body.mobile-den-storage-equipment-world-v101141 #bankPage button,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage button,
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage button,
  body.mobile-den-storage-equipment-world-v101141 #bankPage select,
  body.mobile-den-storage-equipment-world-v101141 #bankPage input{
    min-height:44px;
  }

  /* ======================================================================
     THE DEN — home/base screen, rooms first
     ====================================================================== */
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-shell{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    padding:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-reference-heading{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-reference-top-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr)!important;
    gap:9px!important;
    min-height:84px!important;
    padding:9px!important;
    border-radius:6px!important;
    background:linear-gradient(180deg,rgba(74,48,20,.25),#050c0f)!important;
    border:1px solid rgba(181,130,53,.34)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-emblem{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    align-self:center!important;
    border-radius:5px!important;
    background:#020708!important;
    border:1px solid rgba(181,130,53,.26)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-emblem img{
    width:46px!important;
    height:46px!important;
    object-fit:contain!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-copy{
    min-width:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-copy > .eyebrow{
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-copy h2{
    margin:1px 0 2px!important;
    font-size:18px!important;
    line-height:1.1!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-copy p{
    margin:0!important;
    max-height:34px!important;
    overflow:hidden!important;
    font-size:11px!important;
    line-height:1.45!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-badges{
    display:flex!important;
    gap:4px!important;
    margin-top:5px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-badges::-webkit-scrollbar{display:none!important;}

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-hero-badges span{
    flex:0 0 auto!important;
    padding:3px 6px!important;
    font-size:10px!important;
  }

  /* Turn the large overview wall into a compact home HUD. */
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-card{
    min-width:0!important;
    min-height:61px!important;
    padding:6px!important;
    border-radius:5px!important;
    background:#03090b!important;
    border:1px solid rgba(181,130,53,.20)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-card:nth-child(1){display:none!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-card:nth-child(2),
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-chapter-overview-card{grid-column:auto!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-tier-overview-card{grid-column:1 / -1!important;min-height:54px!important;}

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-card .eyebrow{
    font-size:9px!important;
    line-height:1.15!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-card strong{
    display:block!important;
    margin-top:2px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-overview-card small{
    display:block!important;
    margin-top:2px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-storage-bar{
    height:4px!important;
    margin-top:5px!important;
  }

  /* Rooms become a horizontally swipable home deck instead of a long webpage stack. */
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-home-section{
    order:2!important;
    padding:7px 0!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border:1px solid rgba(181,130,53,.22)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-home-section-heading{
    padding:0 7px 5px!important;
    margin:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-home-section-heading small{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-home-section-heading h3{
    font-size:13px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:6px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    padding:0 7px 4px!important;
    scrollbar-width:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-grid::-webkit-scrollbar{display:none!important;}

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card{
    flex:0 0 min(76vw,290px)!important;
    min-width:min(76vw,290px)!important;
    min-height:154px!important;
    scroll-snap-align:start!important;
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    grid-template-rows:auto 1fr auto!important;
    gap:6px!important;
    padding:8px!important;
    border-radius:6px!important;
    background:linear-gradient(180deg,#071014,#03090b)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card.den-room-locked{
    opacity:.72!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-icon{
    grid-column:1!important;
    grid-row:1 / span 2!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:5px!important;
    background:#020708!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-icon img{
    width:36px!important;
    height:36px!important;
    object-fit:contain!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card > div:nth-child(2){
    grid-column:2!important;
    min-width:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card h3{
    margin:1px 0 3px!important;
    font-size:13px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card p{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1.4!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card-actions{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card > button,
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-card-actions button{
    min-height:42px!important;
    padding:6px!important;
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-status{
    grid-column:1 / -1!important;
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-room-detail-panel{
    margin:4px 7px 0!important;
    padding:7px!important;
    border-radius:5px!important;
  }

  /* Current Den upgrade/project becomes the next major game objective block. */
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-progression-panel{
    order:3!important;
    padding:8px!important;
    border-radius:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-progression-description,
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-upgrade-board-heading p,
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-tier-roadmap,
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-progression-note{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-progression-heading{
    margin-bottom:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-progression-heading h3{
    font-size:13px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-upgrade-tier-path{
    display:grid!important;
    grid-template-columns:1fr 22px 1fr!important;
    gap:4px!important;
    align-items:stretch!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-upgrade-tier-card{
    min-width:0!important;
    padding:7px!important;
    border-radius:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-upgrade-tier-card h4{
    font-size:12px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-upgrade-tier-card small{
    font-size:9px!important;
    line-height:1.35!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-upgrade-tier-arrow{
    display:grid!important;
    place-items:center!important;
    font-size:18px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage #denNextTierAction{
    width:100%!important;
    margin-top:6px!important;
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-glance,
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-project-shell,
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-hub{
    border-radius:6px!important;
  }

  /* Hide duplicate world-project ledger from the initial home view; its compact glance remains. */
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-hub{
    order:6!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-glance{
    order:1!important;
    padding:8px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-glance h3{
    font-size:13px!important;
  }

  /* ======================================================================
     STORAGE — mobile inventory board + item action sheet
     ====================================================================== */
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-shell-rs{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    min-width:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-topbar-rs{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    padding:6px!important;
    margin:0!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border:1px solid rgba(181,130,53,.30)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-main-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px!important;
    align-items:end!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-category-tabs,
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-category-swipe-hint{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .mobile-bank-category-select{
    display:grid!important;
    min-width:0!important;
    gap:2px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .mobile-bank-category-select > span{
    font-size:9px!important;
    text-transform:uppercase!important;
    letter-spacing:.07em!important;
    color:#bca273!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .mobile-bank-category-select select,
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-filter-toggle{
    height:44px!important;
    min-height:44px!important;
    border-radius:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-filter-toggle{
    min-width:92px!important;
    padding:6px 9px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-advanced-filters{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    margin-top:5px!important;
    padding-top:6px!important;
    border-top:1px solid rgba(181,130,53,.18)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-advanced-filters[hidden]{display:none!important;}

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-filter-search{
    grid-column:1 / -1!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-advanced-filters label{
    min-width:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-advanced-filters input,
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-advanced-filters select,
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-reset-filters{
    width:100%!important;
    min-width:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-content-rs{
    display:block!important;
    min-width:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-grid-panel-rs{
    min-width:0!important;
    padding:6px!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border:1px solid rgba(181,130,53,.24)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-discovery-rs{
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    gap:5px!important;
    align-items:center!important;
    min-height:34px!important;
    padding:4px 5px!important;
    margin-bottom:6px!important;
    background:#020708!important;
    border-radius:4px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-discovery-rs > span{
    font-size:9px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-discovery-rs > strong{
    justify-self:end!important;
    font-size:11px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-discovery-bar{
    grid-column:1 / -1!important;
    grid-row:2!important;
    height:3px!important;
    margin:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-rarity-summary{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-grid-rs{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    padding:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-rs{
    position:relative!important;
    min-width:0!important;
    min-height:62px!important;
    aspect-ratio:1 / 1!important;
    padding:3px!important;
    border-radius:4px!important;
    background:linear-gradient(180deg,#071014,#020708)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-rs.selected{
    border-color:#d5a84c!important;
    box-shadow:inset 0 -3px 0 rgba(213,168,76,.76)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-icon-rs{
    display:grid!important;
    place-items:center!important;
    width:100%!important;
    height:100%!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-icon-art{
    width:44px!important;
    height:44px!important;
    max-width:90%!important;
    max-height:90%!important;
    object-fit:contain!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-count-rs{
    position:absolute!important;
    right:3px!important;
    bottom:2px!important;
    min-width:18px!important;
    padding:1px 3px!important;
    border-radius:3px!important;
    background:rgba(1,5,6,.88)!important;
    font-size:10px!important;
    line-height:1.25!important;
    text-align:right!important;
  }

  /* Existing selected-item panel already opens from item selection; present it as a game inventory sheet. */
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-selected-panel-rs{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-selected-panel-rs.open{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
    z-index:45!important;
    display:block!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(60vh,480px)!important;
    overflow:auto!important;
    padding:10px 10px 14px!important;
    border:1px solid rgba(213,168,76,.52)!important;
    border-width:1px 0 0!important;
    border-radius:12px 12px 0 0!important;
    background:linear-gradient(180deg,#0a1518,#03090b)!important;
    box-shadow:0 -18px 40px rgba(0,0,0,.58)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-selected-panel-rs.open::before{
    content:''!important;
    display:block!important;
    width:42px!important;
    height:4px!important;
    margin:0 auto 9px!important;
    border-radius:999px!important;
    background:rgba(213,168,76,.48)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-selected-panel-rs.open button{
    min-height:44px!important;
  }

  /* ======================================================================
     EQUIPMENT — character/loadout screen
     ====================================================================== */
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-loadout-tabs{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    padding:6px!important;
    margin:0 0 6px!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border:1px solid rgba(181,130,53,.30)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-loadout-tabs button{
    min-width:0!important;
    min-height:52px!important;
    padding:5px!important;
    border-radius:4px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-loadout-tabs button strong{
    display:block!important;
    font-size:11px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-loadout-tabs button small{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-reference-layout,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .farming-equipment-reference-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-section,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .potion-preset-panel{
    min-width:0!important;
    padding:7px!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border-color:rgba(181,130,53,.25)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-heading{
    margin-bottom:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-heading .eyebrow,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-heading > small{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-heading h3{
    font-size:12px!important;
  }

  /* Character equipment occupies the first viewport like a loadout screen. */
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-loadout-frame{
    order:1!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-slot-overview-clean,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .farming-equipment-slot-overview{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    min-height:0!important;
    padding:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-slot-card,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-slot-clean,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage [data-equipment-slot],
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .farming-equipment-slot-card{
    min-width:0!important;
    min-height:82px!important;
    border-radius:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-reference-side{
    order:2!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-summary-frame{
    order:1!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-detail-frame{
    order:2!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-summary{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-combat-level-card{
    min-width:0!important;
    min-height:80px!important;
    padding:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-combat-level-card strong{
    font-size:22px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-combat-level-card span{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-combat-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-supplies-reference-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    margin-top:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-consumables-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-tools-frame{
    margin-top:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-tools-clean{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-tool-clean{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px!important;
    align-items:center!important;
    min-height:64px!important;
    padding:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-slot-actions{
    display:flex!important;
    gap:4px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-clean-slot-actions button{
    min-height:40px!important;
    padding:5px 7px!important;
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .farming-equipment-available{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }

  /* ======================================================================
     WORLD MAP — map first, region card second
     ====================================================================== */
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-shell{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
    padding:0!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-chapter-nav{
    order:1!important;
    display:flex!important;
    gap:4px!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity!important;
    padding:5px!important;
    border-radius:6px!important;
    background:#050c0f!important;
    scrollbar-width:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-chapter-nav::-webkit-scrollbar{display:none!important;}

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-chapter-nav button{
    flex:0 0 auto!important;
    min-height:40px!important;
    scroll-snap-align:start!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading{
    order:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:7px!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border:1px solid rgba(181,130,53,.24)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading h2{
    margin:1px 0!important;
    font-size:15px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading p{
    display:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading .eyebrow{
    font-size:9px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
    min-width:118px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading-stats > div{
    min-width:0!important;
    padding:3px 5px!important;
    border-radius:4px!important;
    background:#020708!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading-stats small{
    display:block!important;
    font-size:8px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-heading-stats strong{
    display:block!important;
    max-width:118px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:10px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-layout{
    order:3!important;
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-canvas{
    order:1!important;
    width:100%!important;
    min-height:420px!important;
    height:min(62vh,560px)!important;
    max-height:560px!important;
    border-radius:7px!important;
    overflow:hidden!important;
    border:1px solid rgba(181,130,53,.34)!important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-nodes button,
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-node{
    min-width:48px!important;
    min-height:48px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-route-label{
    font-size:9px!important;
    padding:2px 4px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-details{
    order:2!important;
    display:grid!important;
    grid-template-columns:66px minmax(0,1fr)!important;
    gap:7px!important;
    padding:8px!important;
    border-radius:6px!important;
    background:#050c0f!important;
    border:1px solid rgba(181,130,53,.28)!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-art{
    grid-column:1!important;
    grid-row:1 / span 3!important;
    width:66px!important;
    min-width:66px!important;
    height:66px!important;
    min-height:66px!important;
    border-radius:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-art span{
    font-size:8px!important;
    text-align:center!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-heading{
    grid-column:2!important;
    align-self:start!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-icon{
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-heading h3{
    font-size:13px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage #worldMapDetailDescription{
    grid-column:2!important;
    margin:0!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    font-size:10px!important;
    line-height:1.4!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-status,
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-project,
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-actions{
    grid-column:1 / -1!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-detail-actions button:only-child{
    grid-column:1 / -1!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-legend{
    order:4!important;
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:5px 2px!important;
    scrollbar-width:none!important;
  }

  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-legend::-webkit-scrollbar{display:none!important;}
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-legend span{flex:0 0 auto!important;font-size:9px!important;}
}

@media (max-width:370px){
  body.mobile-den-storage-equipment-world-v101141 #bankPage .bank-slot-grid-rs{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .equipment-slot-overview-clean,
  body.mobile-den-storage-equipment-world-v101141 #equipmentPage .farming-equipment-slot-overview{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.mobile-den-storage-equipment-world-v101141 #worldMapPage .world-map-canvas{
    min-height:380px!important;
    height:56vh!important;
  }
}

/* Phase 4 mobile Den order: home rooms before upgrade/project workspaces. */
@media (max-width:820px){
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-reference-top-grid{order:0!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-home-section{order:1!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage #denHideawayProject{order:2!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-progression-panel{order:3!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-glance{order:4!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-world-project-hub{order:5!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-guidance-card{order:6!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .journey-completed-card,
  body.mobile-den-storage-equipment-world-v101141 #denPage .journey-journal{order:7!important;}
  body.mobile-den-storage-equipment-world-v101141 #denPage .den-future-note{order:8!important;}
}

/* JourneyDen UI source: styles/mobile-game-feel-v101142.css | sha256:10107eaa1af1dd0bccaefe0b993b9efcd83ffefac7e8624723e6a8ef57b5cb83 */
/* JourneyDen V1.01.142 — Mobile Game Feel & Final Polish — Phase 5
   Presentation-only at <=820px. Adds tactile feedback, page/sheet motion,
   small-phone + landscape polish, and accessibility/reduced-motion handling.
   Desktop/web at 821px+ remains unchanged. */

@media (max-width:820px){
  body.mobile-game-feel-v101142{
    --jd-mobile-press-time:90ms;
    --jd-mobile-enter-time:180ms;
    --jd-mobile-sheet-time:220ms;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* ------------------------------
     Tactile controls / game feel
     ------------------------------ */
  body.mobile-game-feel-v101142 button,
  body.mobile-game-feel-v101142 select,
  body.mobile-game-feel-v101142 input,
  body.mobile-game-feel-v101142 [data-page],
  body.mobile-game-feel-v101142 [data-activity-card="true"],
  body.mobile-game-feel-v101142 .bank-slot-rs,
  body.mobile-game-feel-v101142 .den-room-card,
  body.mobile-game-feel-v101142 .combat-enemy-card,
  body.mobile-game-feel-v101142 .exp-log-region-card{
    touch-action:manipulation;
    -webkit-touch-callout:none;
  }

  body.mobile-game-feel-v101142 button,
  body.mobile-game-feel-v101142 [data-page],
  body.mobile-game-feel-v101142 [data-activity-card="true"],
  body.mobile-game-feel-v101142 .bank-slot-rs,
  body.mobile-game-feel-v101142 .combat-enemy-card,
  body.mobile-game-feel-v101142 .exp-log-region-card{
    transition:
      transform var(--jd-mobile-press-time) ease,
      filter var(--jd-mobile-press-time) ease,
      border-color 140ms ease,
      background-color 140ms ease,
      box-shadow 140ms ease!important;
    transform-origin:center;
  }

  body.mobile-game-feel-v101142 button:active:not(:disabled),
  body.mobile-game-feel-v101142 [data-page]:active,
  body.mobile-game-feel-v101142 [data-activity-card="true"]:active,
  body.mobile-game-feel-v101142 .bank-slot-rs:active,
  body.mobile-game-feel-v101142 .combat-enemy-card:active,
  body.mobile-game-feel-v101142 .exp-log-region-card:active{
    transform:translateY(1px) scale(.985)!important;
    filter:brightness(1.12)!important;
  }

  body.mobile-game-feel-v101142 button:focus-visible,
  body.mobile-game-feel-v101142 select:focus-visible,
  body.mobile-game-feel-v101142 input:focus-visible,
  body.mobile-game-feel-v101142 [tabindex]:focus-visible,
  body.mobile-game-feel-v101142 [data-activity-card="true"]:focus-visible{
    outline:2px solid rgba(232,190,94,.88)!important;
    outline-offset:2px!important;
  }

  body.mobile-game-feel-v101142 button:disabled{
    transform:none!important;
    filter:none!important;
  }

  /* Primary bottom navigation feels like a physical game command bar. */
  body.mobile-game-feel-v101142 .mobile-nav-item{
    overflow:hidden;
  }

  body.mobile-game-feel-v101142 .mobile-nav-item::after{
    content:'';
    position:absolute;
    left:22%;
    right:22%;
    bottom:2px;
    height:2px;
    border-radius:999px;
    background:transparent;
    transform:scaleX(.4);
    transition:background 150ms ease,transform 150ms ease;
  }

  body.mobile-game-feel-v101142 .mobile-nav-item.active::after,
  body.mobile-game-feel-v101142 .mobile-nav-item.menu-open::after{
    background:#e2b85a;
    transform:scaleX(1);
  }

  body.mobile-game-feel-v101142 .mobile-nav-item.active .mobile-interface-icon-art,
  body.mobile-game-feel-v101142 .mobile-nav-item.menu-open .mobile-interface-icon-art{
    transform:translateY(-1px) scale(1.06);
    filter:brightness(1.12);
  }

  body.mobile-game-feel-v101142 .mobile-interface-icon-art{
    transition:transform 150ms ease,filter 150ms ease;
  }

  /* ------------------------------
     Page transitions
     ------------------------------ */
  body.mobile-game-feel-v101142 .page.active.mobile-page-enter{
    animation:jdMobilePageEnter var(--jd-mobile-enter-time) cubic-bezier(.2,.72,.28,1) both;
  }

  @keyframes jdMobilePageEnter{
    from{opacity:.35;transform:translateY(5px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* Progress/state motion stays subtle and never drives gameplay timing. */
  body.mobile-game-feel-v101142 .progress > span,
  body.mobile-game-feel-v101142 .health-bar > span,
  body.mobile-game-feel-v101142 .bank-discovery-bar > span,
  body.mobile-game-feel-v101142 .journey-journal-progress > span,
  body.mobile-game-feel-v101142 .den-storage-bar > span,
  body.mobile-game-feel-v101142 [role="progressbar"] > span{
    transition:width 180ms linear!important;
  }

  /* ------------------------------
     Bottom sheets / overlays
     ------------------------------ */
  body.mobile-game-feel-v101142 .mobile-nav-more:not([hidden]){
    z-index:4!important;
    animation:jdMobileSheetUp var(--jd-mobile-sheet-time) cubic-bezier(.18,.78,.28,1) both;
  }

  body.mobile-game-feel-v101142 .mobile-nav-more-backdrop{
    display:none;
    position:fixed;
    top:0;
    right:0;
    bottom:calc(66px + env(safe-area-inset-bottom,0px));
    left:0;
    z-index:2;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(0,0,0,.54)!important;
    backdrop-filter:blur(2px);
  }

  body.mobile-game-feel-v101142 .mobile-nav-more:not([hidden]) + .mobile-nav-more-backdrop{
    display:block;
    animation:jdMobileBackdropIn 160ms ease both;
  }

  body.mobile-game-feel-v101142 .mobile-nav-primary{
    position:relative;
    z-index:5;
  }

  body.mobile-game-feel-v101142 .mobile-activity-skill-picker:not([hidden]) .mobile-activity-skill-picker-panel{
    animation:jdMobileSheetUp var(--jd-mobile-sheet-time) cubic-bezier(.18,.78,.28,1) both;
  }

  body.mobile-game-feel-v101142 .mobile-activity-skill-picker:not([hidden]) .mobile-activity-skill-picker-backdrop{
    animation:jdMobileBackdropIn 160ms ease both;
  }

  body.mobile-game-feel-v101142 #bankPage .bank-selected-panel-rs.open{
    z-index:47!important;
    animation:jdMobileSheetUp var(--jd-mobile-sheet-time) cubic-bezier(.18,.78,.28,1) both;
  }

  body.mobile-game-feel-v101142 #bankPage .bank-selected-mobile-backdrop{
    display:none;
    position:fixed;
    inset:0 0 calc(64px + env(safe-area-inset-bottom,0px)) 0;
    z-index:46;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:rgba(0,0,0,.50)!important;
    backdrop-filter:blur(2px);
  }

  body.mobile-game-feel-v101142 #bankPage .bank-selected-panel-rs.open + .bank-selected-mobile-backdrop{
    display:block;
    animation:jdMobileBackdropIn 160ms ease both;
  }

  body.mobile-game-feel-v101142.mobile-bank-sheet-open #bankPage .bank-topbar-rs{
    z-index:3!important;
  }

  /* Existing confirmation/dialog screens get one consistent mobile entrance. */
  body.mobile-game-feel-v101142 .offline-modal.open .offline-modal-card,
  body.mobile-game-feel-v101142 .chapter-finale-modal.open .chapter-finale-card,
  body.mobile-game-feel-v101142 .expedition-start-modal.open .expedition-start-card,
  body.mobile-game-feel-v101142 .sell-confirm-modal.open .sell-confirm-card,
  body.mobile-game-feel-v101142 .skill-detail-modal.open .skill-detail-modal-card{
    animation:jdMobileDialogIn 190ms cubic-bezier(.18,.78,.28,1) both;
  }

  @keyframes jdMobileSheetUp{
    from{opacity:.55;transform:translateY(18px)}
    to{opacity:1;transform:translateY(0)}
  }

  @keyframes jdMobileDialogIn{
    from{opacity:.55;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }

  @keyframes jdMobileBackdropIn{
    from{opacity:0}
    to{opacity:1}
  }

  /* ------------------------------
     Consistent game-panel hierarchy
     ------------------------------ */
  body.mobile-game-feel-v101142 .panel,
  body.mobile-game-feel-v101142 .card,
  body.mobile-game-feel-v101142 .combat-battle-panel,
  body.mobile-game-feel-v101142 .combat-roster-panel,
  body.mobile-game-feel-v101142 .expedition-log-detail-panel,
  body.mobile-game-feel-v101142 .bank-grid-panel-rs,
  body.mobile-game-feel-v101142 .equipment-panel-clean,
  body.mobile-game-feel-v101142 .den-home-section{
    box-shadow:inset 0 1px rgba(255,236,181,.025),0 2px 8px rgba(0,0,0,.18)!important;
  }

  body.mobile-game-feel-v101142 .eyebrow{
    letter-spacing:.075em;
  }

  body.mobile-game-feel-v101142 button,
  body.mobile-game-feel-v101142 select{
    font-weight:780;
  }

  /* Horizontal game rows should stop cleanly on cards rather than rubber-band the page. */
  body.mobile-game-feel-v101142 .den-room-grid,
  body.mobile-game-feel-v101142 .expedition-log-list,
  body.mobile-game-feel-v101142 .world-map-chapter-nav,
  body.mobile-game-feel-v101142 .activity-filter-bar,
  body.mobile-game-feel-v101142 .activity-subfilters{
    overscroll-behavior-x:contain;
    scroll-behavior:smooth;
    scrollbar-width:none;
  }

  body.mobile-game-feel-v101142 .den-room-grid::-webkit-scrollbar,
  body.mobile-game-feel-v101142 .expedition-log-list::-webkit-scrollbar,
  body.mobile-game-feel-v101142 .world-map-chapter-nav::-webkit-scrollbar,
  body.mobile-game-feel-v101142 .activity-filter-bar::-webkit-scrollbar,
  body.mobile-game-feel-v101142 .activity-subfilters::-webkit-scrollbar{
    display:none;
  }

  /* Short status/reward messages float above the thumb bar like game toasts. */
  body.mobile-game-feel-v101142 .gain-feed{
    max-width:min(92vw,420px)!important;
    pointer-events:none;
  }
}

/* Very small phones: preserve game readability rather than squeezing five tiny inventory cells. */
@media (max-width:340px){
  body.mobile-game-feel-v101142 #bankPage .bank-slot-grid-rs{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  body.mobile-game-feel-v101142 #bankPage .bank-slot-rs{
    min-height:64px!important;
  }

  body.mobile-game-feel-v101142 .current-journey-tracker{
    margin-inline:4px!important;
  }

  body.mobile-game-feel-v101142 main{
    padding-inline:4px!important;
  }
}

/* Landscape phones: keep the HUD/nav compact and prioritize actual play space. */
@media (max-width:820px) and (max-height:520px){
  body.mobile-game-feel-v101142 .current-journey-tracker{
    display:none!important;
  }

  body.mobile-game-feel-v101142 main{
    padding-top:4px!important;
  }

  body.mobile-game-feel-v101142 .mobile-nav-more{
    max-height:calc(100dvh - 56px - env(safe-area-inset-top,0px))!important;
  }

  body.mobile-game-feel-v101142 #bankPage .bank-selected-panel-rs.open{
    max-height:calc(100dvh - 112px)!important;
  }
}

/* Motion is polish, never required feedback. */
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  body.mobile-game-feel-v101142 *,
  body.mobile-game-feel-v101142 *::before,
  body.mobile-game-feel-v101142 *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }

  body.mobile-game-feel-v101142 button:active:not(:disabled),
  body.mobile-game-feel-v101142 [data-page]:active,
  body.mobile-game-feel-v101142 [data-activity-card="true"]:active,
  body.mobile-game-feel-v101142 .bank-slot-rs:active,
  body.mobile-game-feel-v101142 .combat-enemy-card:active,
  body.mobile-game-feel-v101142 .exp-log-region-card:active{
    transform:none!important;
  }
}

/* JourneyDen UI source: styles/structure-ownership-v101143.css | sha256:51342b20bed1dc1f9928b9c127c994fff876a80832956a3a2a6faf59f9b96910 */
/* V1.01.143 — Structure & Section Ownership Phase 2
   Player-facing structure only. Gameplay systems and saves remain shared. */
body.structure-ownership-v101143 {
  --structure-owner-border: rgba(180, 135, 64, .34);
  --structure-owner-fill: rgba(11, 18, 20, .92);
  --structure-owner-active: rgba(123, 83, 31, .26);
}

body.structure-ownership-v101143 .section-owner-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0 16px;
  padding: 6px;
  border: 1px solid var(--structure-owner-border);
  background: linear-gradient(180deg, rgba(24, 31, 31, .94), rgba(7, 13, 15, .96));
  border-radius: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
body.structure-ownership-v101143 .section-owner-tabs::-webkit-scrollbar { display: none; }
body.structure-ownership-v101143 .section-owner-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #aeb4ad;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
body.structure-ownership-v101143 .section-owner-tab:hover,
body.structure-ownership-v101143 .section-owner-tab:focus-visible {
  color: #e4c98d;
  border-color: rgba(190, 145, 73, .28);
}
body.structure-ownership-v101143 .section-owner-tab.active,
body.structure-ownership-v101143 .section-owner-tab[aria-current="page"] {
  color: #f0d79a;
  border-color: rgba(208, 158, 75, .52);
  background: linear-gradient(180deg, rgba(116, 77, 28, .32), rgba(64, 41, 18, .32));
  box-shadow: inset 0 0 0 1px rgba(255, 214, 131, .05);
}

body.structure-ownership-v101143 .world-projects-page,
body.structure-ownership-v101143 .progress-page { max-width: 1500px; margin: 0 auto; }
body.structure-ownership-v101143 .world-projects-owner-shell,
body.structure-ownership-v101143 .progress-journey-content { display: grid; gap: 14px; }

/* Moved World Project surfaces no longer depend on living under #denPage. */
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-glance,
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-hub,
body.structure-ownership-v101143 #worldProjectsPage .den-route-project,
body.structure-ownership-v101143 #worldProjectsPage .den-project-ledger-panel {
  border: 1px solid rgba(178, 133, 65, .28);
  background: linear-gradient(180deg, rgba(12, 20, 21, .98), rgba(5, 11, 13, .98));
  border-radius: 10px;
}
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-glance { padding: 14px; }
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-hub { padding: 14px; }
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-hub-heading,
body.structure-ownership-v101143 #worldProjectsPage .den-route-project-heading,
body.structure-ownership-v101143 #worldProjectsPage .den-project-ledger-heading,
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-glance-copy {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
body.structure-ownership-v101143 #worldProjectsPage .den-world-project-layout {
  display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.6fr); gap: 14px; margin-top: 14px;
}
body.structure-ownership-v101143 #worldProjectsPage .den-project-ledger-panel,
body.structure-ownership-v101143 #worldProjectsPage .den-route-project { padding: 13px; }
body.structure-ownership-v101143 #worldProjectsPage .den-project-progress,
body.structure-ownership-v101143 #progressPage .journey-journal-progress {
  height: 8px; overflow: hidden; border: 1px solid rgba(171, 126, 58, .24); background: #03090b; border-radius: 999px;
}
body.structure-ownership-v101143 #worldProjectsPage .den-project-progress > span,
body.structure-ownership-v101143 #progressPage .journey-journal-progress > span {
  display: block; height: 100%; background: linear-gradient(90deg, #7e5a28, #c49a50);
}

/* Journey chapter records now belong to Progress. */
body.structure-ownership-v101143 #progressPage .den-guidance-card,
body.structure-ownership-v101143 #progressPage .journey-completed-card,
body.structure-ownership-v101143 #progressPage .journey-journal,
body.structure-ownership-v101143 #progressPage .den-journey-chapter-summary,
body.structure-ownership-v101143 #progressPage .den-journey-path-summary {
  border: 1px solid rgba(178, 133, 65, .28);
  background: linear-gradient(180deg, rgba(12, 20, 21, .98), rgba(5, 11, 13, .98));
  border-radius: 10px;
}
body.structure-ownership-v101143 #progressPage .den-guidance-card,
body.structure-ownership-v101143 #progressPage .journey-completed-card,
body.structure-ownership-v101143 #progressPage .journey-journal,
body.structure-ownership-v101143 #progressPage .den-journey-chapter-summary,
body.structure-ownership-v101143 #progressPage .den-journey-path-summary { padding: 14px; }
body.structure-ownership-v101143 #progressPage .den-guidance-main,
body.structure-ownership-v101143 #progressPage .journey-journal-heading,
body.structure-ownership-v101143 #progressPage .den-journey-chapter-summary,
body.structure-ownership-v101143 #progressPage .den-journey-path-heading {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
body.structure-ownership-v101143 #progressPage .den-guidance-actions,
body.structure-ownership-v101143 #progressPage .journey-journal-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.structure-ownership-v101143 #progressPage .den-journey-section-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
body.structure-ownership-v101143 #progressPage .den-journey-section-card,
body.structure-ownership-v101143 #progressPage .journey-journal-entry { border: 1px solid rgba(177, 134, 69, .22); background: rgba(4, 10, 12, .72); padding: 11px; border-radius: 8px; }

/* Den ownership is now home utilities only. */
body.structure-ownership-v101143 #denPage .den-overview-home-focus { margin-top: 0; }
body.structure-ownership-v101143 #denPage .den-overview-home-focus .den-overview-priority-main { min-height: 0; }

@media (max-width: 820px) {
  body.structure-ownership-v101143 .mobile-nav-primary {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  body.structure-ownership-v101143 #mobileMoreNavButton.mobile-utility-menu-button {
    position: fixed !important;
    z-index: 1205;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: 8px;
    width: 48px;
    min-width: 48px;
    min-height: 42px;
    padding: 4px 3px;
    display: grid;
    place-items: center;
    gap: 0;
    border: 1px solid rgba(195, 147, 73, .38);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(29, 35, 33, .97), rgba(7, 13, 15, .98));
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  body.structure-ownership-v101143 #mobileMoreNavButton span { display: grid; place-items: center; }
  body.structure-ownership-v101143 #mobileMoreNavButton img { width: 20px; height: 20px; }
  body.structure-ownership-v101143 #mobileMoreNavButton b { font-size: 9px; line-height: 1; }
  body.structure-ownership-v101143 #mobileMoreNavButton.active,
  body.structure-ownership-v101143 #mobileMoreNavButton.menu-open { border-color: rgba(231, 180, 90, .76); color: #f0d79a; }

  body.structure-ownership-v101143 .section-owner-tabs {
    margin: 6px 0 10px;
    padding: 4px;
    gap: 4px;
    border-radius: 8px;
  }
  body.structure-ownership-v101143 .section-owner-tab {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 12px;
  }
  body.structure-ownership-v101143 #worldProjectsPage .den-world-project-layout { grid-template-columns: 1fr; }
  body.structure-ownership-v101143 #worldProjectsPage .den-world-project-hub,
  body.structure-ownership-v101143 #worldProjectsPage .den-world-project-glance,
  body.structure-ownership-v101143 #progressPage .den-guidance-card,
  body.structure-ownership-v101143 #progressPage .journey-journal,
  body.structure-ownership-v101143 #progressPage .den-journey-chapter-summary,
  body.structure-ownership-v101143 #progressPage .den-journey-path-summary { padding: 10px; border-radius: 8px; }
  body.structure-ownership-v101143 #progressPage .den-guidance-main,
  body.structure-ownership-v101143 #progressPage .journey-journal-heading,
  body.structure-ownership-v101143 #progressPage .den-journey-chapter-summary,
  body.structure-ownership-v101143 #progressPage .den-journey-path-heading { display: grid; grid-template-columns: 1fr; }
  body.structure-ownership-v101143 #progressPage .den-journey-section-cards { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body.structure-ownership-v101143 #progressPage .section-owner-tabs,
  body.structure-ownership-v101143 #masteryPage .section-owner-tabs,
  body.structure-ownership-v101143 #achievementsPage .section-owner-tabs,
  body.structure-ownership-v101143 #offlineMasteryPage .section-owner-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  body.structure-ownership-v101143 #progressPage .section-owner-tab,
  body.structure-ownership-v101143 #masteryPage .section-owner-tab,
  body.structure-ownership-v101143 #achievementsPage .section-owner-tab,
  body.structure-ownership-v101143 #offlineMasteryPage .section-owner-tab {
    width: 100%;
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
  }
}

/* JourneyDen UI source: styles/den-simplification-v101144.css | sha256:2b43960e1a4d6a4440d3db5adc05dc58a73222c36d1883519f8e9761d0e791b1 */
/* V1.01.144 — Structure Overhaul Phase 3: Simplified Den
   The Den exposes only four real utility areas. Future upgrade placeholders are intentionally absent. */

body.den-simplification-v101144 #denPage .den-core-utilities .den-room-card{
  opacity:1;
}

body.den-simplification-v101144 #denPage .den-core-utilities .den-room-card .eyebrow{
  color:var(--muted,#a99b82);
}

body.den-simplification-v101144 #denPage .den-room-detail-future{
  display:none!important;
}

@media (min-width:821px){
  body.den-simplification-v101144 #denPage .den-core-utilities .den-room-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:820px){
  body.den-simplification-v101144 #denPage .den-core-utilities .den-room-card{
    min-height:150px!important;
  }
  body.den-simplification-v101144 #denPage .den-core-utilities .den-room-card h3{
    font-size:14px!important;
  }
}

/* JourneyDen UI source: styles/progress-consolidation-v101146.css | sha256:d341de7a3f549bf23f819195de09faf12e553b1fcfec031209c9bb9b3790f7b6 */
/* JourneyDen V1.01.146 — Progress Consolidation Phase 5
   One Progress screen: Journey / Mastery / Collections / Offline Progress. */

body.progress-consolidation-v101146 #progressPage {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.progress-consolidation-v101146 #progressPage > .structure-page-heading {
  margin-bottom: 0;
}

body.progress-consolidation-v101146 .progress-role-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  padding: 7px 10px;
  border: 1px solid rgba(177, 134, 69, .18);
  border-radius: 7px;
  background: rgba(5, 12, 15, .5);
  color: rgba(235, 229, 215, .66);
  font-size: 11px;
  line-height: 1.3;
}

body.progress-consolidation-v101146 .progress-role-legend b {
  color: #e7d1a5;
  font-weight: 700;
}

body.progress-consolidation-v101146 .progress-role-legend i {
  color: rgba(177, 134, 69, .5);
  font-style: normal;
}

body.progress-consolidation-v101146 #progressPage .progress-tabs {
  margin: 0;
}

body.progress-consolidation-v101146 #progressPage .progress-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.progress-consolidation-v101146 #progressPage .progress-panel[hidden] {
  display: none !important;
}

body.progress-consolidation-v101146 #progressPage .progress-panel-heading {
  display: grid;
  gap: 3px;
  padding: 0 2px;
}

body.progress-consolidation-v101146 #progressPage .progress-panel-heading h3,
body.progress-consolidation-v101146 #progressPage .progress-panel-heading p {
  margin: 0;
}

body.progress-consolidation-v101146 #progressPage .progress-panel-heading h3 {
  color: #f0dfbc;
  font-size: 18px;
  line-height: 1.2;
}

body.progress-consolidation-v101146 #progressPage .progress-panel-heading p {
  max-width: 760px;
  color: rgba(235, 229, 215, .72);
  font-size: 12px;
  line-height: 1.45;
}

/* These are panels now, not independent pages. Remove legacy page-level spacing. */
body.progress-consolidation-v101146 #progressPage #masteryPage,
body.progress-consolidation-v101146 #progressPage #achievementsPage,
body.progress-consolidation-v101146 #progressPage #offlineMasteryPage {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.progress-consolidation-v101146 #progressPage #masteryPage > .mastery-summary-grid,
body.progress-consolidation-v101146 #progressPage #achievementsPage > .collections-page-summary,
body.progress-consolidation-v101146 #progressPage #offlineMasteryPage > .mastery-summary-grid {
  margin-top: 0;
}

@media (max-width: 820px) {
  body.progress-consolidation-v101146 #progressPage {
    gap: 9px;
  }

  body.progress-consolidation-v101146 .progress-role-legend {
    gap: 3px 7px;
    padding: 6px 8px;
    font-size: 10.5px;
  }

  body.progress-consolidation-v101146 #progressPage .progress-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  body.progress-consolidation-v101146 #progressPage .progress-tabs .section-owner-tab {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body.progress-consolidation-v101146 #progressPage .progress-panel {
    gap: 9px;
  }

  body.progress-consolidation-v101146 #progressPage .progress-panel-heading h3 {
    font-size: 16px;
  }

  body.progress-consolidation-v101146 #progressPage .progress-panel-heading p {
    font-size: 12px;
  }
}

/* JourneyDen UI source: styles/navigation-button-clarity-v101148.css | sha256:3a5b4131890733f3c1893be864d7c30fd7e296b432c8c9b51d213bfb17b6675d */
/* JourneyDen V1.01.148 — Navigation Button Clarity
   Presentation-only hierarchy pass: navigation should read as controls, not labels. */
body.navigation-button-clarity-v101148 {
  --nav-btn-edge: rgba(190, 143, 69, .42);
  --nav-btn-edge-strong: rgba(225, 176, 87, .72);
  --nav-btn-top: rgba(27, 35, 34, .98);
  --nav-btn-bottom: rgba(7, 13, 15, .98);
  --nav-btn-active-top: rgba(117, 78, 29, .48);
  --nav-btn-active-bottom: rgba(55, 35, 16, .66);
  --nav-btn-text: #d2c5aa;
  --nav-btn-text-active: #f4d995;
}

/* Desktop primary navigation: every destination is a distinct physical button. */
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-group {
  gap: 7px;
}
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item {
  position: relative;
  min-height: 46px;
  border: 1px solid rgba(174, 130, 63, .30) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, var(--nav-btn-top), var(--nav-btn-bottom)) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 230, 173, .045),
    inset 0 -1px 0 rgba(0, 0, 0, .45) !important;
  color: var(--nav-btn-text) !important;
  transform: translateY(0);
  transition: transform .09s ease, border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item:hover,
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item:focus-visible {
  border-color: rgba(211, 160, 79, .58) !important;
  background: linear-gradient(180deg, rgba(35, 43, 40, .99), rgba(10, 17, 18, .99)) !important;
  color: #ead09a !important;
}
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item:active {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .55),
    inset 0 1px 4px rgba(0, 0, 0, .35) !important;
}
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item.active,
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item[aria-current="page"] {
  border-color: var(--nav-btn-edge-strong) !important;
  background: linear-gradient(180deg, var(--nav-btn-active-top), var(--nav-btn-active-bottom)) !important;
  color: var(--nav-btn-text-active) !important;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 223, 151, .12),
    inset 0 0 0 1px rgba(255, 204, 111, .08),
    0 0 12px rgba(178, 119, 38, .08) !important;
}
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item.active::after,
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-item[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 5px;
  height: 18px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: #d7a955;
  box-shadow: 0 0 8px rgba(215, 169, 85, .42);
}
body.navigation-button-clarity-v101148 .main-navigation.grouped-navigation .nav-group-label {
  margin-top: 7px;
  margin-bottom: 1px;
}

/* Section-owner navigation: remove the segmented-control look and make each choice a button. */
body.navigation-button-clarity-v101148 .section-owner-tabs {
  gap: 8px !important;
  padding: 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.navigation-button-clarity-v101148 .section-owner-tab {
  position: relative;
  min-height: 42px !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(182, 136, 67, .38) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(25, 33, 32, .98), rgba(6, 12, 14, .98)) !important;
  color: #c7baa0 !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 232, 184, .04) !important;
  transform: translateY(0);
  transition: transform .09s ease, border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
body.navigation-button-clarity-v101148 .section-owner-tab:hover,
body.navigation-button-clarity-v101148 .section-owner-tab:focus-visible {
  border-color: rgba(211, 160, 79, .62) !important;
  color: #ead09a !important;
}
body.navigation-button-clarity-v101148 .section-owner-tab:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), inset 0 1px 4px rgba(0, 0, 0, .3) !important;
}
body.navigation-button-clarity-v101148 .section-owner-tab.active,
body.navigation-button-clarity-v101148 .section-owner-tab[aria-current="page"],
body.navigation-button-clarity-v101148 .section-owner-tab[aria-selected="true"] {
  border-color: rgba(222, 170, 82, .78) !important;
  background: linear-gradient(180deg, rgba(120, 80, 29, .48), rgba(53, 34, 15, .68)) !important;
  color: #f4d995 !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 157, .11), 0 0 10px rgba(177, 118, 38, .08) !important;
}

/* Den's internal navigation is a major switch too, so it gets the same physical language. */
body.navigation-button-clarity-v101148 #denPage .den-section-tabs {
  gap: 8px !important;
  padding: 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.navigation-button-clarity-v101148 #denPage .den-section-tab {
  min-height: 44px !important;
  border: 1px solid rgba(182, 136, 67, .36) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(24, 32, 31, .98), rgba(6, 12, 14, .98)) !important;
  color: #c1b398 !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 230, 178, .04) !important;
  transform: translateY(0);
  transition: transform .09s ease, border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
body.navigation-button-clarity-v101148 #denPage .den-section-tab:hover,
body.navigation-button-clarity-v101148 #denPage .den-section-tab:focus-visible {
  border-color: rgba(208, 156, 75, .6) !important;
  color: #ead09a !important;
}
body.navigation-button-clarity-v101148 #denPage .den-section-tab:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), inset 0 1px 4px rgba(0, 0, 0, .32) !important;
}
body.navigation-button-clarity-v101148 #denPage .den-section-tab[aria-selected="true"] {
  border-color: rgba(222, 170, 82, .78) !important;
  background: linear-gradient(180deg, rgba(120, 80, 29, .46), rgba(53, 34, 15, .66)) !important;
  color: #f4d995 !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 157, .1) !important;
}

/* Secondary view tabs: still buttons, but visually one tier quieter. */
body.navigation-button-clarity-v101148 :where(
  .skill-detail-tabs,
  .equipment-loadout-tabs,
  .exp-log-detail-tabs,
  .exp-log-filter-tabs,
  .bank-category-tabs
) {
  gap: 6px !important;
}
body.navigation-button-clarity-v101148 :where(
  .skill-detail-tabs,
  .equipment-loadout-tabs,
  .exp-log-detail-tabs,
  .exp-log-filter-tabs,
  .bank-category-tabs
) > button {
  border: 1px solid rgba(172, 129, 64, .30) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(18, 26, 26, .96), rgba(5, 11, 13, .97)) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 179, .025) !important;
  color: #b9ad96 !important;
  transform: translateY(0);
  transition: transform .08s ease, border-color .1s ease, background .1s ease, color .1s ease;
}
body.navigation-button-clarity-v101148 :where(
  .skill-detail-tabs,
  .equipment-loadout-tabs,
  .exp-log-detail-tabs,
  .exp-log-filter-tabs,
  .bank-category-tabs
) > button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .42), inset 0 1px 3px rgba(0, 0, 0, .3) !important;
}
body.navigation-button-clarity-v101148 :where(
  .skill-detail-tabs,
  .equipment-loadout-tabs,
  .exp-log-detail-tabs,
  .exp-log-filter-tabs,
  .bank-category-tabs
) > button:is(.active,[aria-selected="true"],[aria-current="page"]) {
  border-color: rgba(205, 154, 74, .62) !important;
  background: linear-gradient(180deg, rgba(91, 61, 25, .40), rgba(39, 27, 15, .56)) !important;
  color: #efd496 !important;
}

@media (max-width: 820px) {
  /* Bottom navigation already works like a game bar; increase tile separation and selected depth. */
  body.navigation-button-clarity-v101148 .mobile-nav-primary {
    gap: 5px !important;
    padding-inline: 5px !important;
  }
  body.navigation-button-clarity-v101148 .mobile-nav-item {
    border: 1px solid rgba(172, 128, 61, .30) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(20, 28, 28, .98), rgba(5, 11, 13, .99)) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 232, 183, .025) !important;
  }
  body.navigation-button-clarity-v101148 .mobile-nav-item.active,
  body.navigation-button-clarity-v101148 .mobile-nav-item[aria-current="page"] {
    border-color: rgba(221, 169, 80, .70) !important;
    background: linear-gradient(180deg, rgba(105, 70, 27, .50), rgba(43, 29, 15, .72)) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 225, 153, .09), 0 0 9px rgba(178, 118, 38, .08) !important;
  }
  body.navigation-button-clarity-v101148 .mobile-nav-item:active,
  body.navigation-button-clarity-v101148 .mobile-nav-more-item:active,
  body.navigation-button-clarity-v101148 .section-owner-tab:active,
  body.navigation-button-clarity-v101148 #denPage .den-section-tab:active {
    transform: translateY(1px) scale(.985);
  }

  body.navigation-button-clarity-v101148 .section-owner-tabs,
  body.navigation-button-clarity-v101148 #denPage .den-section-tabs {
    gap: 6px !important;
    padding: 0 !important;
  }
  body.navigation-button-clarity-v101148 .section-owner-tab,
  body.navigation-button-clarity-v101148 #denPage .den-section-tab {
    min-height: 42px !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 230, 178, .035) !important;
  }

  body.navigation-button-clarity-v101148 .mobile-nav-more-item {
    border-color: rgba(181, 136, 67, .34) !important;
    background: linear-gradient(180deg, rgba(25, 33, 32, .99), rgba(6, 12, 14, .99)) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 230, 178, .035) !important;
  }
  body.navigation-button-clarity-v101148 .mobile-nav-more-item.active {
    border-color: rgba(220, 168, 81, .7) !important;
    background: linear-gradient(180deg, rgba(105, 70, 27, .48), rgba(43, 29, 15, .7)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.navigation-button-clarity-v101148 .main-navigation .nav-item,
  body.navigation-button-clarity-v101148 .section-owner-tab,
  body.navigation-button-clarity-v101148 #denPage .den-section-tab,
  body.navigation-button-clarity-v101148 .mobile-nav-item,
  body.navigation-button-clarity-v101148 .mobile-nav-more-item {
    transition: none !important;
  }
}

/* JourneyDen UI source: styles/den-progress-home-v101149.css | sha256:a8b7cd12269d7473288f96ee4ff9c154eb0e939736ed72cfb437d64ead0d06db */
/* JourneyDen V1.01.149 — Progress Moved to The Den
   Activities stays training-only. Skill overview and the existing progress
   ledger now live behind The Den > Progress. */
body.den-progress-home-v101149 #denPage .den-tab-panel-progress {
  min-width: 0;
}
body.den-progress-home-v101149 #denPage #progressPage {
  display: grid;
  gap: 14px;
  min-width: 0;
}
body.den-progress-home-v101149 #denPage #progressPage > .section-heading {
  margin: 0;
}
body.den-progress-home-v101149 #denPage #skillsPage {
  margin: 0;
  min-width: 0;
}
body.den-progress-home-v101149 #denPage #skillsPage > .section-heading {
  margin-top: 0;
}
body.den-progress-home-v101149 #activitiesPage > .reference-training-heading,
body.den-progress-home-v101149 #activitiesPage > .page-title-row.reference-training-heading {
  margin-top: 0;
}
@media (max-width: 820px) {
  body.den-progress-home-v101149 #denPage .progress-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.den-progress-home-v101149 #denPage .progress-role-legend {
    grid-template-columns: 1fr;
  }
  body.den-progress-home-v101149 #denPage #progressPage {
    gap: 10px;
  }
}

/* JourneyDen UI source: styles/den-skill-levels-v101150.css | sha256:13393d8cf8d940613a107c69756e6b3d7f9c735d871a289a1fccdeb0376bf559 */
/* JourneyDen V1.01.150 — Skill Levels Den Tab
   Skill Levels is a first-class Den destination, separate from the broader
   Progress ledger. Activities remains training-only. */
body.den-skill-levels-v101150 #denPage .den-section-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
body.den-skill-levels-v101150 #denPage .den-tab-panel-skill-levels {
  min-width: 0;
}
body.den-skill-levels-v101150 #denPage #skillsPage {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
}
body.den-skill-levels-v101150 #denPage #skillsPage > .section-heading {
  margin: 0;
}
body.den-skill-levels-v101150 #denPage .progress-role-legend {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 820px) {
  body.den-skill-levels-v101150 #denPage .den-section-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  body.den-skill-levels-v101150 #denPage .den-section-tab:nth-child(-n+3) {
    grid-column: span 2;
  }
  body.den-skill-levels-v101150 #denPage .den-section-tab:nth-child(n+4) {
    grid-column: span 3;
  }
  body.den-skill-levels-v101150 #denPage .progress-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.den-skill-levels-v101150 #denPage .progress-role-legend {
    grid-template-columns: 1fr;
  }
}

/* JourneyDen UI source: styles/combat-food-select-v101151.css | sha256:4fb68f0b2ec43244aac8c215a9fddb72cbc9e8b220e5120fa5a75fe7d9025e24 */
/* JourneyDen V1.01.151 — Fixed Combat Food Selector
   Combat food uses one permanent-height native select instead of an expanding list. */

body.combat-food-select-v101151 #combatPage .combat-food-select-row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.combat-food-select-v101151 #combatPage .combat-food-select-row label {
  color: #9b8868;
  font-size: 11px;
  font-weight: 600;
}

body.combat-food-select-v101151 #combatPage #combatFoodSelect {
  display: block;
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--jd-combat-line-soft);
  border-radius: 0;
  background: #020607;
  color: #cbb083;
  font: inherit;
  cursor: pointer;
}

body.combat-food-select-v101151 #combatPage #combatFoodSelect:disabled {
  cursor: default;
  color: #746954;
  opacity: .8;
}

body.combat-food-select-v101151 #combatPage .combat-food-grid-v2,
body.combat-food-select-v101151 #combatPage .combat-mobile-fold {
  display: none !important;
}

@media (max-width: 820px) {
  body.combat-food-select-v101151 #combatPage #combatFoodSelect {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    border-radius: 4px;
    font-size: 12px;
  }

  body.combat-food-select-v101151 #combatPage .combat-food-select-row label {
    font-size: 12px;
  }
}

/* JourneyDen UI source: styles/smithing-current-activity-v101152.css | sha256:b4e3117e28642b743c13a0d5e021eade3d445980feadf8efaaeab67645ede813 */
/* ========================================================================== 
   V1.01.152 — Smithing Phase 1: clear current activity
   Presentation-only pass. Smithing gameplay, recipes, timings and costs are
   unchanged. The running recipe is now the first and strongest information.
   ========================================================================== */
body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running {
  gap: 10px;
  border-color: rgba(177, 121, 45, .76);
  box-shadow: inset 0 0 0 1px #020607, 0 0 0 1px rgba(177, 121, 45, .08);
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(159, 116, 53, .42);
  background: rgba(159, 116, 53, .055);
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(181, 127, 53, .58);
  background: rgba(181, 127, 53, .12);
  color: #d4b477;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-heading {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 9px;
  padding: 0;
  border: 0;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-icon {
  width: 52px;
  height: 52px;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-icon .jd-item-icon,
body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-icon img,
body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-art {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-copy h3 {
  margin: 0;
  color: #ddc286;
  font-size: 18px;
  line-height: 1.15;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #90836d;
  font-size: 11px;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-owned {
  flex: 0 0 auto;
  color: #988a73;
  white-space: nowrap;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-owned strong {
  color: #d8bb7d;
  font-size: 14px;
}

body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-copy > small {
  color: #766c5d;
  font-size: 10px;
}

/* Phase 1 deliberately removes the old extra idle explanation/stat cards from
   the running Smithing panel. Their useful values are condensed into the
   current-activity summary above. Materials per cycle remains intact. */
body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-loop-note,
body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-stats {
  display: none;
}

body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-materials {
  padding-top: 1px;
}

body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-progress {
  gap: 6px;
}

body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-progress .progress-meta {
  color: #a79574;
}

body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-progress .progress-track {
  height: 10px;
}

@media (max-width: 1180px) {
  body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running {
    grid-template-columns: 1fr;
  }
  body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-current-activity,
  body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-materials,
  body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-progress,
  body.smithing-current-activity-v101152 #activitiesPage [data-smithing-active-panel="true"].smithing-active-panel.running .smithing-active-stop {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity {
    padding: 8px;
  }
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-heading {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-icon {
    width: 46px;
    height: 46px;
  }
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-icon .jd-item-icon,
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-icon img,
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity .smithing-active-item-art {
    width: 42px;
    height: 42px;
    max-width: 42px;
    max-height: 42px;
  }
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-copy h3 {
    font-size: 16px;
  }
  body.smithing-current-activity-v101152 #activitiesPage .smithing-current-activity-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }
}

/* JourneyDen UI source: styles/smithing-materials-compact-v101153.css | sha256:f706c1b6a9f1531e106969151ca68cac0c52f86dae172347a8b188d8a854bdca */
/* ==========================================================================
   V1.01.153 — Smithing Phase 2: compact materials per cycle
   Presentation-only. The Phase 1 Current activity block stays intact while
   Smithing ingredient rows become one-line, denser, and easier to scan.
   ========================================================================== */
body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-materials-compact {
  gap: 4px;
  padding-top: 0;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-materials-compact .smithing-active-subheading {
  min-height: 24px;
  align-items: center;
  gap: 8px;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-materials-status {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(112, 91, 57, .48);
  background: rgba(112, 91, 57, .08);
  color: #96866d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-materials-status.ready {
  border-color: rgba(126, 124, 67, .46);
  color: #aaa16c;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-materials-status.missing {
  border-color: rgba(133, 67, 47, .64);
  color: #b87864;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact {
  grid-template-columns: 22px minmax(0, 1fr) auto minmax(68px, auto);
  grid-template-areas: "icon name need owned";
  column-gap: 6px;
  min-height: 32px;
  padding: 3px 6px;
  border-color: rgba(88, 68, 42, .34);
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact.missing {
  border-color: rgba(133, 67, 47, .58);
  background: rgba(91, 39, 29, .07);
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-icon {
  width: 22px;
  height: 22px;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-icon .jd-item-icon,
body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-icon img,
body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-art {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-name {
  font-size: 11px;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact strong {
  color: #cbb179;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact small {
  color: #827765;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact.missing strong,
body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact.missing small {
  color: #ae705e;
}

@media (max-width: 760px) {
  body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact {
    grid-template-columns: 20px minmax(0, 1fr) auto minmax(64px, auto);
    column-gap: 5px;
    min-height: 30px;
    padding: 3px 5px;
  }

  body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-icon {
    width: 20px;
    height: 20px;
  }

  body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-icon .jd-item-icon,
  body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-icon img,
  body.smithing-materials-compact-v101153 #activitiesPage [data-smithing-active-panel="true"].running .smithing-active-material.compact .smithing-active-material-art {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
  }
}

/* JourneyDen UI source: styles/smithing-recipe-selection-v101154.css | sha256:dd851fe746a5dec14f5b26c1bd5eeb6c800f9871969ef4cf125a5dfed06ae4a6 */
/* ========================================================================== 
   V1.01.154 — Smithing Phase 3: compact activity selection
   Presentation-only. Recipe selection is now a calm list of one-line choices
   showing the finished-item owned count and a clear Active/Ready/blocked state.
   The Phase 1 Current activity and Phase 2 Materials per cycle panels stay intact.
   ========================================================================== */
body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-board {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-board-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 0 1px 3px;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-board-heading > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-board-heading strong {
  color: #d5b878;
  font-size: 14px;
  font-weight: 700;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-board-heading > small {
  flex: 0 0 auto;
  color: #81745f;
  font-size: 10px;
  white-space: nowrap;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-section {
  margin-bottom: 8px;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-section-heading {
  margin-bottom: 4px;
  padding: 0 1px;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-section-heading h3 {
  font-size: 12px;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  min-width: 0;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 8px !important;
  min-width: 0;
  min-height: 44px !important;
  padding: 5px 7px !important;
  overflow: hidden;
  border: 1px solid rgba(102, 75, 40, .46) !important;
  border-radius: 0 !important;
  background: #04090b !important;
  box-shadow: inset 0 0 0 1px #020607 !important;
  touch-action: manipulation;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row:hover,
body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row:focus-visible {
  border-color: rgba(190, 139, 62, .72) !important;
  background: #071013 !important;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.ready {
  border-color: rgba(126, 91, 42, .58) !important;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.active {
  border-color: #d4a54e !important;
  background: rgba(159, 116, 53, .12) !important;
  box-shadow: inset 3px 0 0 #d4a54e, inset 0 0 0 1px #020607 !important;
  opacity: 1 !important;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.level-locked {
  opacity: .48 !important;
  filter: saturate(.58);
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.materials-missing:not(.level-locked) {
  opacity: .72 !important;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-icon {
  display: grid;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-icon .jd-item-icon,
body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-icon img,
body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-icon-art {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: contain;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-name {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0 !important;
  overflow: hidden;
  color: #c9b58e;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-owned {
  min-width: 0;
  color: #7f7462;
  font-size: 10px;
  line-height: 1.15;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-owned strong {
  color: #aa956e;
  font-size: 10px;
  font-weight: 700;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-level {
  display: none;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 54px;
  height: auto;
  min-height: 22px;
  padding: 3px 6px;
  overflow: visible;
  border: 1px solid rgba(102, 82, 51, .46);
  background: rgba(102, 82, 51, .08);
  color: #94846a;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row.ready .smithing-recipe-tile-state {
  border-color: rgba(126, 124, 67, .48);
  background: rgba(126, 124, 67, .08);
  color: #aaa16c;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row.active .smithing-recipe-tile-state {
  border-color: rgba(212, 165, 78, .72);
  background: rgba(212, 165, 78, .14);
  color: #dec17d;
}

body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row.level-locked .smithing-recipe-tile-state,
body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row.materials-missing .smithing-recipe-tile-state {
  color: #987463;
}

@media (min-width: 760px) {
  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-board {
    gap: 6px;
  }

  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 46px !important;
    padding: 5px 6px !important;
    border-radius: 4px !important;
  }

  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-icon {
    width: 32px !important;
    height: 32px !important;
  }

  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-icon .jd-item-icon,
  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-icon img,
  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-icon-art {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
  }

  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
    min-width: 50px;
    padding: 3px 5px;
    font-size: 9px;
  }
}

@media (max-width: 360px) {
  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
    min-width: 44px;
    font-size: 8px;
  }
}

/* JourneyDen UI source: styles/activities-simplification-v101155.css | sha256:565fcce5c16fcbc6d99e484e7097035c2cbaff7ad4c34904400761c8d35de0ef */
/* ========================================================================== 
   V1.01.155 — Activities simplification Phase 4
   Rolls the approved Smithing hierarchy across gathering and production skills.
   Presentation only: activity balance, timers, XP, costs, outputs and saves stay
   unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Gathering — one strong Current activity, then calm selectable rows.
   -------------------------------------------------------------------------- */
body.activities-simplification-v101155 #activitiesPage .current-activity-card {
  margin-bottom: 9px;
  border-color: rgba(177, 121, 45, .72);
  background: #050b0d;
  box-shadow: inset 0 0 0 1px #020607, inset 3px 0 0 rgba(212, 165, 78, .56);
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card.is-idle {
  border-color: rgba(105, 78, 42, .46);
  box-shadow: inset 0 0 0 1px #020607;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 0;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(181, 127, 53, .58);
  background: rgba(181, 127, 53, .12);
  color: #d4b477;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card.is-idle .activity-current-status {
  border-color: rgba(103, 85, 58, .42);
  background: rgba(103, 85, 58, .06);
  color: #80735f;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 9px !important;
  background: transparent;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1px solid rgba(115, 83, 43, .34);
  background: #030809;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-icon .jd-item-icon,
body.activities-simplification-v101155 #activitiesPage .activity-current-icon .jd-skill-icon,
body.activities-simplification-v101155 #activitiesPage .activity-current-icon img,
body.activities-simplification-v101155 #activitiesPage .activity-current-icon-art {
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header h2 {
  margin: 0 !important;
  overflow: hidden;
  color: #dec286;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #8e826e;
  font-size: 11px;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-meta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-owned {
  flex: 0 0 auto;
  color: #998a70;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .activity-current-owned strong {
  color: #d8bb7d;
  font-size: 14px;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header p {
  margin: 0;
  color: #776e60;
  font-size: 10px;
  line-height: 1.3;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header .danger {
  min-width: 84px;
  min-height: 38px;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card .progress-panel {
  padding: 7px 10px 9px;
}

body.activities-simplification-v101155 #activitiesPage .current-activity-card .progress-track {
  height: 10px;
}

body.activities-simplification-v101155 #activitiesPage #activityCards.activity-compact-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  overflow: hidden;
  border: 1px solid rgba(102, 75, 40, .46) !important;
  border-radius: 0 !important;
  background: #04090b !important;
  box-shadow: inset 0 0 0 1px #020607 !important;
  touch-action: manipulation;
}

body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row:hover,
body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row:focus-visible {
  border-color: rgba(190, 139, 62, .72) !important;
  background: #071013 !important;
}

body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row.active-card {
  border-color: #d4a54e !important;
  background: rgba(159, 116, 53, .12) !important;
  box-shadow: inset 3px 0 0 #d4a54e, inset 0 0 0 1px #020607 !important;
  opacity: 1 !important;
}

body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row.activity-disabled {
  opacity: .52 !important;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-icon {
  display: grid !important;
  place-items: center;
  width: 38px !important;
  height: 38px !important;
  align-self: center !important;
  border: 0 !important;
  background: transparent !important;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-icon .jd-item-icon,
body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-icon img,
body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-item-icon-art {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-title h3 {
  margin: 0 !important;
  overflow: hidden;
  color: #c9b58e;
  font-size: 11px !important;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #7f7462;
  font-size: 10px;
  line-height: 1.15;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-meta strong {
  color: #aa956e;
  font-size: 10px;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-state {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: center !important;
  width: auto !important;
  min-width: 54px !important;
  min-height: 22px !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(102, 82, 51, .46) !important;
  border-radius: 0 !important;
  background: rgba(102, 82, 51, .08) !important;
  color: #94846a;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-state.ready {
  border-color: rgba(126, 124, 67, .48) !important;
  color: #aaa16c;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-state.active {
  border-color: rgba(212, 165, 78, .72) !important;
  background: rgba(212, 165, 78, .14) !important;
  color: #dec17d;
}

body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-state.blocked {
  border-color: rgba(133, 67, 47, .50) !important;
  color: #987463;
}

/* --------------------------------------------------------------------------
   Production — extend the approved Smithing Current activity + materials +
   compact selection language to Cooking, Construction and Apothecary.
   -------------------------------------------------------------------------- */
body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running {
  gap: 10px;
  border-color: rgba(177, 121, 45, .76);
  box-shadow: inset 0 0 0 1px #020607, 0 0 0 1px rgba(177, 121, 45, .08);
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-materials-compact {
  gap: 4px;
  padding-top: 0;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-materials-compact .smithing-active-subheading {
  min-height: 24px;
  align-items: center;
  gap: 8px;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-materials-status {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(112, 91, 57, .48);
  background: rgba(112, 91, 57, .08);
  color: #96866d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-materials-status.ready {
  border-color: rgba(126, 124, 67, .46);
  color: #aaa16c;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-materials-status.missing {
  border-color: rgba(133, 67, 47, .64);
  color: #b87864;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
  grid-template-columns: 22px minmax(0, 1fr) auto minmax(68px, auto);
  grid-template-areas: "icon name need owned";
  column-gap: 6px;
  min-height: 32px;
  padding: 3px 6px;
  border-color: rgba(88, 68, 42, .34);
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact.missing {
  border-color: rgba(133, 67, 47, .58);
  background: rgba(91, 39, 29, .07);
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact .smithing-active-material-icon {
  width: 22px;
  height: 22px;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact .smithing-active-material-icon .jd-item-icon,
body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact .smithing-active-material-icon img,
body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact .smithing-active-material-art {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact .smithing-active-material-name,
body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact strong {
  font-size: 11px;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact small {
  color: #827765;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-progress .progress-track {
  height: 10px;
}

/* Farming is intentionally multi-plot. Keep that identity but make owned output
   visible wherever cultivation is currently running. */
body.activities-simplification-v101155 #activitiesPage .farming-harvest-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

body.activities-simplification-v101155 #activitiesPage .farming-harvest-preview > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(88, 68, 42, .30);
  background: #030709;
  text-align: center;
}

@media (max-width: 760px) {
  body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 8px;
    padding: 6px 8px 8px !important;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-current-topline {
    padding: 6px 8px 0;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-current-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-current-icon .jd-item-icon,
  body.activities-simplification-v101155 #activitiesPage .activity-current-icon .jd-skill-icon,
  body.activities-simplification-v101155 #activitiesPage .activity-current-icon img,
  body.activities-simplification-v101155 #activitiesPage .activity-current-icon-art {
    width: 40px;
    height: 40px;
    max-width: 40px;
    max-height: 40px;
  }

  body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header h2 {
    font-size: 16px;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-current-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }

  body.activities-simplification-v101155 #activitiesPage .current-activity-card .activity-header .danger {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
  }

  body.activities-simplification-v101155 #activitiesPage #activityCards.activity-compact-grid {
    grid-template-columns: 1fr !important;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    min-height: 46px !important;
    padding: 5px 6px !important;
    border-radius: 4px !important;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-icon {
    width: 34px !important;
    height: 34px !important;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-icon .jd-item-icon,
  body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-ref-icon img,
  body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-item-icon-art {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-state {
    min-width: 50px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }

  body.activities-simplification-v101155 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
    grid-template-columns: 20px minmax(0, 1fr) auto minmax(64px, auto);
    column-gap: 5px;
    min-height: 30px;
    padding: 3px 5px;
  }

  body.activities-simplification-v101155 #activitiesPage .farming-harvest-preview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  body.activities-simplification-v101155 #activitiesPage .activity-click-card.activity-compact-row {
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-compact-row .activity-card-state {
    min-width: 44px !important;
    font-size: 8px !important;
  }
}

/* Phase 4 final phone polish: keep idle/current activity metadata inside the
   activity column even when its text is longer than the available width. */
@media (max-width: 760px) {
  body.activities-simplification-v101155 #activitiesPage .activity-current-copy,
  body.activities-simplification-v101155 #activitiesPage .activity-current-meta {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.activities-simplification-v101155 #activitiesPage .activity-current-meta > span:first-child {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* V1.01.189 — compact secondary Foraging find line. */
.activity-bonus-find {
  display: block;
  margin-top: 0.18rem;
  color: var(--muted, #a9a49a);
  font-size: 0.72rem;
  line-height: 1.25;
}
@media (max-width: 600px) {
  .activity-bonus-find {
    font-size: 0.75rem;
  }
}

/* JourneyDen UI source: styles/production-activity-layout-fix-v101156.css | sha256:6a6b95eb22d533489884a5f26b324854825b131b9aca15a39e61e92dd07da9ff */
/* ========================================================================== 
   V1.01.156 — Production activity breathing-room / crop fix
   Cooking, Smithing and Construction keep the V1.01.155 information hierarchy,
   but the live activity and recipe selection no longer share a narrow desktop
   rail. Presentation only; gameplay and activity data are unchanged.
   ========================================================================== */

/* The Phase 4 compact content became visually cramped when the legacy forge
   split view kept the running panel in a ~300px rail. Give the three affected
   production skills the full activity width and keep Current Activity first. */
body.production-activity-layout-fix-v101156 #activitiesPage .smithing-forge-workspace,
body.production-activity-layout-fix-v101156 #activitiesPage .cooking-hearth-workspace,
body.production-activity-layout-fix-v101156 #activitiesPage .construction-workshop-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start;
  min-width: 0;
  overflow: visible;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-forge-workspace > *,
body.production-activity-layout-fix-v101156 #activitiesPage .cooking-hearth-workspace > *,
body.production-activity-layout-fix-v101156 #activitiesPage .construction-workshop-workspace > * {
  min-width: 0;
  max-width: 100%;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-board,
body.production-activity-layout-fix-v101156 #activitiesPage .cooking-recipe-board,
body.production-activity-layout-fix-v101156 #activitiesPage .construction-recipe-board {
  order: 1 !important;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel,
body.production-activity-layout-fix-v101156 #activitiesPage .cooking-active-panel,
body.production-activity-layout-fix-v101156 #activitiesPage .construction-active-panel {
  position: static !important;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running,
body.production-activity-layout-fix-v101156 #activitiesPage .cooking-active-panel.running,
body.production-activity-layout-fix-v101156 #activitiesPage .construction-active-panel.running {
  order: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 13px !important;
  padding: 14px !important;
  overflow: visible;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.empty,
body.production-activity-layout-fix-v101156 #activitiesPage .cooking-active-panel.empty,
body.production-activity-layout-fix-v101156 #activitiesPage .construction-active-panel.empty {
  order: 2 !important;
}

/* Give the live summary enough room for long recipe/component names. */
body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity {
  gap: 9px;
  padding: 12px;
  overflow: visible;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-heading {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 11px;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-icon {
  width: 56px;
  height: 56px;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-icon .jd-item-icon,
body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-icon img,
body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-art {
  width: 50px;
  height: 50px;
  max-width: 50px;
  max-height: 50px;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity-copy h3 {
  overflow-wrap: anywhere;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity-meta {
  flex-wrap: wrap;
  row-gap: 3px;
}

/* Materials stay compact, but no longer look squeezed into a narrow strip. */
body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running .smithing-active-materials-compact {
  gap: 6px;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
  grid-template-columns: 24px minmax(0, 1fr) auto minmax(78px, auto);
  grid-template-areas: "icon name need owned";
  column-gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
  overflow: visible;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact .smithing-active-material-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.2;
}

/* Recipe rows get a little more breathing room and long names can use two lines.
   Keep two columns only when the activity content itself is genuinely wide. */
body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
  min-height: 52px !important;
  padding: 7px 9px !important;
  gap: 9px !important;
  overflow: visible !important;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-name {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-row-copy {
  min-width: 0;
  overflow: visible;
}

body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
  max-width: 112px;
  white-space: normal;
  line-height: 1.15;
}

@media (min-width: 760px) and (max-width: 1099px) {
  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-grid,
  body.production-activity-layout-fix-v101156 #activitiesPage .cooking-recipe-grid,
  body.production-activity-layout-fix-v101156 #activitiesPage .construction-recipe-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-forge-workspace,
  body.production-activity-layout-fix-v101156 #activitiesPage .cooking-hearth-workspace,
  body.production-activity-layout-fix-v101156 #activitiesPage .construction-workshop-workspace {
    gap: 10px !important;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running,
  body.production-activity-layout-fix-v101156 #activitiesPage .cooking-active-panel.running,
  body.production-activity-layout-fix-v101156 #activitiesPage .construction-active-panel.running {
    gap: 10px !important;
    padding: 11px !important;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity {
    padding: 10px;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-heading {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-icon {
    width: 48px;
    height: 48px;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-icon .jd-item-icon,
  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-icon img,
  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-current-activity .smithing-active-item-art {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon name need"
      "icon owned owned";
    row-gap: 2px;
    column-gap: 7px;
    min-height: 42px;
    padding: 6px 7px;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact small {
    text-align: left;
    white-space: normal;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(48px, auto) !important;
    min-height: 54px !important;
    padding: 7px !important;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
    min-width: 48px;
    max-width: 78px;
    padding: 4px 5px;
  }
}

@media (max-width: 360px) {
  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 32px minmax(0, 1fr) minmax(44px, auto) !important;
    gap: 6px !important;
    padding-inline: 6px !important;
  }

  body.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
    min-width: 44px;
    max-width: 66px;
    font-size: 8px;
  }
}

/* JourneyDen UI source: styles/farming-desktop-layout-fix-v101160.css | sha256:1ff8ae9e42590f0406a149d0188ad347a86893ce027263e54787c4ea01ba3901 */
/* V1.01.160 — Farming desktop layout correction
   Farming remains a multi-plot activity, but its dashboard now responds to the
   actual Activities workspace width instead of only the browser viewport. */

body.farming-desktop-layout-fix-v101160 #activitiesPage #activityCards.farming-activity-root,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-dashboard,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-dashboard > * {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage #activityCards.farming-activity-root {
  container-name: farming-workspace;
  container-type: inline-size;
  overflow: visible;
}

/* Let the available activity column decide how many cards fit. This avoids the
   old forced two-column layout squeezing cards inside the desktop side shell. */
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-stat-strip {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-stat-strip > div,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-card > *,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-card > *,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-head > div,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-seed-vault > *,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-seed-chip > div {
  min-width: 0;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-head h3,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-growth-meta > span,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-main h3,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-main p {
  overflow-wrap: anywhere;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-growth-meta {
  flex-wrap: wrap;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-growth-meta > span {
  flex: 1 1 220px;
  min-width: 0;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-growth-meta > strong {
  flex: 0 0 auto;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-actions > *,
body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-actions > * {
  min-width: 0;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-harvest-button {
  white-space: normal;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-actions {
  flex-wrap: wrap;
}

body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-actions button {
  flex: 1 1 155px;
}

/* Container breakpoints use the real Farming workspace width, including when
   the desktop sidebar reduces the page's usable content area. */
@container farming-workspace (max-width: 820px) {
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-dashboard-hero {
    align-items: flex-start;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-grid,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-card,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-seed-vault {
    grid-template-columns: 1fr;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-progress,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-rewards,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-actions {
    grid-column: 1;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-seed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container farming-workspace (max-width: 520px) {
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-dashboard-hero {
    display: grid;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-count {
    width: 100%;
    min-width: 0;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-form,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-seed-grid,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-harvest-preview,
  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-actions {
    grid-template-columns: 1fr;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-form button {
    grid-column: 1;
  }

  body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-stop-button {
    width: 100%;
    min-width: 0;
  }
}

/* Fallback for engines without container queries: collapse sooner on laptop
   widths because the desktop navigation reduces the activity column. */
@supports not (container-type: inline-size) {
  @media (max-width: 1180px) {
    body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-plot-grid,
    body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-contract-card,
    body.farming-desktop-layout-fix-v101160 #activitiesPage .farming-seed-vault {
      grid-template-columns: 1fr;
    }
  }
}

/* JourneyDen UI source: styles/welcome-back-simple-v101158.css | sha256:04669151d8cbd37124a764cb6c3149dfa97240859410fabf00829f20bb1abc62 */
/* V1.01.158 — simple, text-only Welcome Back summary */
body.welcome-back-simple-v101158 #offlineProgressModal .offline-modal-card {
  width: min(500px, 100%) !important;
  max-height: min(720px, 88vh) !important;
  padding: 20px !important;
  text-align: left !important;
}

body.welcome-back-simple-v101158 #offlineProgressModal .offline-modal-card img,
body.welcome-back-simple-v101158 #offlineProgressModal .offline-reward-icon {
  display: none !important;
}

body.welcome-back-simple-v101158 #offlineProgressModal .eyebrow {
  display: block;
  margin-bottom: 4px;
}

body.welcome-back-simple-v101158 #offlineProgressModal h2 {
  margin: 0 0 4px !important;
}

body.welcome-back-simple-v101158 #offlineProgressModal .offline-duration {
  margin: 0 0 14px !important;
  color: var(--muted);
  font-size: 13px !important;
  line-height: 1.45;
}

body.welcome-back-simple-v101158 .offline-time-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

body.welcome-back-simple-v101158 .offline-time-stat {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

body.welcome-back-simple-v101158 .offline-time-stat span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
}

body.welcome-back-simple-v101158 .offline-time-stat strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

body.welcome-back-simple-v101158 .offline-limit-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body.welcome-back-simple-v101158 .offline-limit-note[hidden] {
  display: none !important;
}

body.welcome-back-simple-v101158 #offlineProgressModal .offline-rewards {
  display: grid !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}

body.welcome-back-simple-v101158 .offline-summary-section {
  min-width: 0;
}

body.welcome-back-simple-v101158 .offline-summary-section h3 {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.welcome-back-simple-v101158 .offline-summary-list {
  border-top: 1px solid var(--line);
}

body.welcome-back-simple-v101158 .offline-summary-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.welcome-back-simple-v101158 .offline-summary-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body.welcome-back-simple-v101158 .offline-summary-copy b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

body.welcome-back-simple-v101158 .offline-summary-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

body.welcome-back-simple-v101158 .offline-summary-row > strong {
  align-self: start;
  color: var(--gold);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.welcome-back-simple-v101158 #offlineProgressModal .offline-continue-button {
  width: 100% !important;
  min-height: 46px !important;
}

@media (max-width: 560px) {
  body.welcome-back-simple-v101158 #offlineProgressModal .offline-modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: 88dvh !important;
    padding: 16px 14px max(16px, env(safe-area-inset-bottom)) !important;
  }

  body.welcome-back-simple-v101158 #offlineProgressModal .offline-duration {
    font-size: 12px !important;
  }

  body.welcome-back-simple-v101158 .offline-time-stat {
    padding: 9px 10px;
  }

  body.welcome-back-simple-v101158 .offline-summary-row {
    gap: 10px !important;
    padding: 9px 0 !important;
  }
}

/* JourneyDen UI source: styles/combat-session-loot-clean-v101159.css | sha256:957969ed7d40eec44c5e0e9ac5cbd9c7689f62142712026b6af483dab0bc84d1 */
/* V1.01.159 — cleaner Session Spoils loot rows
   Loot rows intentionally show only item identity and quantity. */
body.combat-session-loot-clean-v101159 #combatPage .combat-session-summary-row {
  min-height: 38px;
  padding: 3px 6px;
}
body.combat-session-loot-clean-v101159 #combatPage .combat-session-summary-copy,
body.combat-session-loot-clean-v101159 #combatPage .combat-session-summary-amount {
  display: flex;
  align-items: center;
  min-width: 0;
}
body.combat-session-loot-clean-v101159 #combatPage .combat-session-summary-copy strong,
body.combat-session-loot-clean-v101159 #combatPage .combat-session-summary-amount strong {
  margin: 0;
  line-height: 1.25;
}

/* JourneyDen UI source: styles/fresh-premium-v101163.css | sha256:bf06f269b9652ba38383c7b4d8e7f749fa7b2c499717c94e4ba268b11a01e6dd */
/* JourneyDen V1.01.163 — Fresh Premium UI
   Canonical UI direction approved from the 2026-08-21 concept mockup.
   Goal: match the concept's colors, shell, card language, spacing and Farming
   workspace while preserving JourneyDen gameplay/navigation ownership. */

body.fresh-premium-v101163 {
  --fresh-bg: #0d1518;
  --fresh-bg-deep: #0a1114;
  --fresh-sidebar: #101a1e;
  --fresh-surface: #131d20;
  --fresh-surface-2: #162226;
  --fresh-surface-3: #1a272b;
  --fresh-surface-soft: rgba(20, 31, 35, .82);
  --fresh-line: #514a32;
  --fresh-line-soft: rgba(167, 150, 79, .28);
  --fresh-line-faint: rgba(167, 150, 79, .14);
  --fresh-gold: #c8a053;
  --fresh-gold-soft: #a9873c;
  --fresh-gold-muted: #926c30;
  --fresh-text: #e8e2d4;
  --fresh-text-strong: #f0eadc;
  --fresh-muted: #979692;
  --fresh-muted-2: #768785;
  --fresh-green: #718939;
  --fresh-green-strong: #77904d;
  --fresh-red: #b3363a;
  --fresh-shadow: 0 16px 38px rgba(0, 0, 0, .24);
  --fresh-shadow-soft: 0 8px 22px rgba(0, 0, 0, .17);
  --fresh-radius: 7px;
  --fresh-sidebar-width: 242px;

  --bg: var(--fresh-bg);
  --surface: var(--fresh-surface);
  --surface-2: var(--fresh-surface-2);
  --surface-3: var(--fresh-surface-3);
  --line: var(--fresh-line-soft);
  --text: var(--fresh-text);
  --muted: var(--fresh-muted);
  --gold: var(--fresh-gold);
  --red: var(--fresh-red);
  --shadow: var(--fresh-shadow-soft);

  margin: 0;
  background:
    radial-gradient(circle at 78% -8%, rgba(74, 92, 88, .13), transparent 34%),
    radial-gradient(circle at 24% 22%, rgba(200, 160, 83, .035), transparent 30%),
    linear-gradient(180deg, #10191c 0%, #0b1316 68%, #091013 100%);
  color: var(--fresh-text);
}

body.fresh-premium-v101163::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
  z-index: 0;
}

body.fresh-premium-v101163 .app-shell {
  position: relative;
  z-index: 1;
  grid-template-columns: var(--fresh-sidebar-width) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* -------------------------------------------------------------------------
   Desktop shell / sidebar — mirrors the concept screenshot.
   ------------------------------------------------------------------------- */
@media (min-width: 901px) {
  body.fresh-premium-v101163 .reference-sidebar,
  body.fresh-premium-v101163 .sidebar {
    position: sticky !important;
    top: 0;
    display: flex !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 12px 12px !important;
    border: 1px solid rgba(167, 150, 79, .38) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    background:
      linear-gradient(180deg, rgba(20, 31, 35, .98), rgba(13, 22, 25, .985)),
      var(--fresh-sidebar) !important;
    box-shadow: 16px 0 40px rgba(0, 0, 0, .16) !important;
    overflow: hidden !important;
  }

  body.fresh-premium-v101163 .premium-brand-block {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    min-height: 80px;
    margin: 0 -2px 8px;
    padding: 18px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fresh-line-soft) !important;
    background: transparent !important;
  }

  /* Runtime art is still placeholder-only. Render the approved UI wordmark as
     typography instead of introducing a new production image asset. */
  body.fresh-premium-v101163 .premium-brand-block .sidebar-journeyden-logo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none;
  }

  body.fresh-premium-v101163 .premium-brand-block::before {
    content: "✦";
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: 9px;
    color: var(--fresh-gold);
    font-size: 21px;
    line-height: 1;
    text-shadow: 0 0 14px rgba(200, 160, 83, .16);
  }

  body.fresh-premium-v101163 .premium-brand-block::after {
    content: "JOURNEYDEN";
    color: #d4bd84;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .035em;
  }

  body.fresh-premium-v101163 .sidebar-player-card {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding: 14px 12px !important;
    border: 1px solid rgba(167, 150, 79, .36) !important;
    border-radius: var(--fresh-radius) !important;
    background: linear-gradient(145deg, rgba(26, 39, 43, .86), rgba(15, 25, 28, .88)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .018), var(--fresh-shadow-soft) !important;
  }

  body.fresh-premium-v101163 .sidebar-player-avatar {
    width: 54px !important;
    height: 54px !important;
    border: 1px solid rgba(200, 160, 83, .48) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(81,74,50,.5), rgba(12,20,23,.88) 68%) !important;
    box-shadow: inset 0 0 0 4px rgba(8, 14, 16, .5) !important;
  }

  body.fresh-premium-v101163 .sidebar-player-avatar img {
    border-radius: 50%;
    opacity: .84;
  }

  body.fresh-premium-v101163 .sidebar-player-rank,
  body.fresh-premium-v101163 .sidebar-player-copy > strong {
    color: #d8c58f !important;
  }

  body.fresh-premium-v101163 .sidebar-player-copy > strong {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  body.fresh-premium-v101163 .sidebar-player-rank {
    font-size: 11px !important;
    letter-spacing: .04em;
  }

  body.fresh-premium-v101163 .sidebar-player-stats,
  body.fresh-premium-v101163 .sidebar-player-health-meta {
    color: var(--fresh-muted) !important;
    font-size: 10px !important;
  }

  body.fresh-premium-v101163 .sidebar-player-stat > :is(b,strong),
  body.fresh-premium-v101163 .sidebar-player-health-meta strong {
    color: #ded6c5 !important;
  }

  body.fresh-premium-v101163 .sidebar-player-health {
    height: 4px !important;
    border-radius: 99px !important;
    background: rgba(0,0,0,.42) !important;
  }

  body.fresh-premium-v101163 .sidebar-player-health > span {
    background: linear-gradient(90deg, #9d3034, #c54b50) !important;
    box-shadow: 0 0 9px rgba(179,54,58,.18) !important;
  }

  body.fresh-premium-v101163 .main-navigation {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px !important;
    padding: 0 !important;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(167,150,79,.22) transparent;
  }

  body.fresh-premium-v101163 .main-navigation .nav-group {
    display: contents !important;
  }

  body.fresh-premium-v101163 .main-navigation .nav-group-label {
    display: none !important;
  }

  body.fresh-premium-v101163 .main-navigation .nav-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(167, 150, 79, .24) !important;
    border-radius: 5px !important;
    background: linear-gradient(180deg, rgba(26, 39, 43, .72), rgba(18, 29, 33, .78)) !important;
    color: #c9c5bb !important;
    box-shadow: inset 0 1px rgba(255,255,255,.018), 0 3px 8px rgba(0,0,0,.08) !important;
    transform: none !important;
  }

  body.fresh-premium-v101163 .main-navigation .nav-item:hover:not(:disabled) {
    border-color: rgba(200, 160, 83, .44) !important;
    background: linear-gradient(180deg, rgba(34, 47, 49, .86), rgba(20, 31, 35, .88)) !important;
    filter: none !important;
  }

  body.fresh-premium-v101163 .main-navigation .nav-item.active,
  body.fresh-premium-v101163 .main-navigation .nav-item[aria-current="page"] {
    border-color: rgba(200, 160, 83, .72) !important;
    background:
      linear-gradient(90deg, rgba(146,108,48,.48), rgba(71,57,34,.54) 55%, rgba(26,39,43,.8)) !important;
    color: #eadbb7 !important;
    box-shadow:
      inset 3px 0 0 var(--fresh-gold),
      inset 0 0 18px rgba(200,160,83,.06),
      0 4px 12px rgba(0,0,0,.13) !important;
  }

  body.fresh-premium-v101163 .main-navigation .nav-item-icon {
    display: grid !important;
    place-items: center;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
    opacity: .82;
  }

  body.fresh-premium-v101163 .main-navigation .nav-item.active .nav-item-icon {
    opacity: 1;
  }

  body.fresh-premium-v101163 .sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.fresh-premium-v101163 .sidebar-signout-button {
    min-height: 42px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(167,150,79,.24) !important;
    border-radius: 5px !important;
    background: rgba(16,26,30,.78) !important;
    color: #b7b2a8 !important;
    box-shadow: none !important;
  }

  body.fresh-premium-v101163 .sidebar-build-meta {
    display: none !important;
  }

  body.fresh-premium-v101163 .topbar,
  body.fresh-premium-v101163 #currentJourneyTracker {
    display: none !important;
  }

  body.fresh-premium-v101163 .app-main {
    min-width: 0;
    background:
      radial-gradient(circle at 85% 0%, rgba(63, 80, 77, .08), transparent 30%),
      linear-gradient(180deg, rgba(13,21,24,.76), rgba(9,16,19,.84));
  }

  body.fresh-premium-v101163 main {
    width: 100%;
    max-width: none;
    padding: 24px 28px 30px !important;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  body.fresh-premium-v101163 { --fresh-sidebar-width: 214px; }
  body.fresh-premium-v101163 main { padding-inline: 20px !important; }
}

/* -------------------------------------------------------------------------
   Global type, panels and controls.
   ------------------------------------------------------------------------- */
body.fresh-premium-v101163 :where(h1,h2,h3,h4) {
  color: var(--fresh-text-strong);
}

body.fresh-premium-v101163 :where(.page-title-row h2, .section-heading h2, .reference-page-heading h2, .reference-training-heading h2, .den-reference-heading h2) {
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: .035em !important;
}

body.fresh-premium-v101163 .eyebrow {
  color: var(--fresh-gold-soft) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .115em !important;
}

body.fresh-premium-v101163 :where(p, small, .muted, .subtitle) {
  color: var(--fresh-muted) !important;
}

body.fresh-premium-v101163 :where(
  .page-title-row,
  .section-heading.reference-page-heading,
  .section-heading.reference-training-heading,
  .den-reference-heading,
  .world-map-heading,
  .expedition-log-page-heading,
  .equipment-clean-heading
) {
  position: relative;
  min-height: 66px;
  margin: 0 0 14px !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(167,150,79,.28) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.fresh-premium-v101163 :where(
  .page-title-row,
  .section-heading.reference-page-heading,
  .section-heading.reference-training-heading,
  .den-reference-heading,
  .world-map-heading,
  .expedition-log-page-heading,
  .equipment-clean-heading
)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 88px;
  height: 1px;
  background: linear-gradient(90deg, var(--fresh-gold), transparent);
}

body.fresh-premium-v101163 .reference-page-heading-icon {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(167,150,79,.28) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(81,74,50,.42), rgba(18,29,32,.74) 70%) !important;
  box-shadow: inset 0 0 0 5px rgba(9,16,19,.28) !important;
}

body.fresh-premium-v101163 .reference-page-heading-icon img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}

body.fresh-premium-v101163 :where(
  .card,
  .item-card,
  .settings-card,
  .guide-panel,
  .guide-sidebar,
  .bank-shell-rs,
  .bank-content-rs,
  .bank-selected-panel-rs,
  .equipment-reference-layout,
  .equipment-reference-side,
  .equipment-panel,
  .equipment-slot,
  .den-home-section,
  .den-guidance-card,
  .den-overview-card,
  .den-room-card,
  .den-upgrade-card,
  .den-upgrade-tier-card,
  .den-project-card,
  .world-map-panel,
  .world-map-detail,
  .combat-panel,
  .combat-command-deck,
  .combat-side-panel,
  .expedition-log-layout,
  .expedition-log-panel,
  .mastery-summary-card,
  .collection-summary-card,
  .progress-panel,
  .current-activity-card,
  .smithing-active-forge,
  .production-current-activity,
  .activity-selection-row,
  .activity-recipe-row,
  .skill-card
) {
  border-color: rgba(167, 150, 79, .25) !important;
  border-radius: var(--fresh-radius) !important;
  background: linear-gradient(180deg, rgba(20,31,35,.91), rgba(16,26,29,.92)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.014), var(--fresh-shadow-soft) !important;
}

body.fresh-premium-v101163 :where(button, .btn, .button, [role="button"]) {
  border-radius: 4px !important;
  border: 1px solid rgba(169,135,60,.62) !important;
  background: linear-gradient(180deg, rgba(83,65,31,.86), rgba(54,43,25,.92)) !important;
  color: #e9d59f !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 3px 9px rgba(0,0,0,.15) !important;
  font-weight: 650 !important;
  filter: none !important;
}

body.fresh-premium-v101163 :where(button, .btn, .button, [role="button"]):hover:not(:disabled) {
  border-color: rgba(200,160,83,.86) !important;
  background: linear-gradient(180deg, rgba(102,79,34,.92), rgba(63,48,25,.95)) !important;
  color: #f2dfaa !important;
  filter: none !important;
}

body.fresh-premium-v101163 :where(button.secondary, .secondary-button, .equipment-secondary-button, .section-owner-tab, .skill-detail-tabs button) {
  border-color: rgba(167,150,79,.3) !important;
  background: rgba(15,25,28,.72) !important;
  color: #c0b8a6 !important;
}

body.fresh-premium-v101163 :where(button.active, .section-owner-tab.active, .skill-detail-tabs button.active, [aria-selected="true"]) {
  border-color: rgba(200,160,83,.72) !important;
  background: linear-gradient(180deg, rgba(104,78,31,.82), rgba(57,44,25,.92)) !important;
  color: #ead8aa !important;
}

body.fresh-premium-v101163 button.danger,
body.fresh-premium-v101163 .danger {
  border-color: rgba(182,61,66,.52) !important;
  background: rgba(63,28,31,.56) !important;
  color: #d8a5a7 !important;
}

body.fresh-premium-v101163 :where(input, select, textarea) {
  border: 1px solid rgba(167,150,79,.25) !important;
  border-radius: 4px !important;
  background: #101a1d !important;
  color: var(--fresh-text) !important;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.2) !important;
}

body.fresh-premium-v101163 :where(input, select, textarea):focus {
  border-color: rgba(200,160,83,.65) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(200,160,83,.08), inset 0 1px 5px rgba(0,0,0,.18) !important;
}

body.fresh-premium-v101163 :where(.progress-track, .farming-growth-track, .journey-journal-progress, .den-project-progress, .den-storage-bar, .mobile-skill-summary-progress) {
  overflow: hidden;
  border: 1px solid rgba(167,150,79,.22) !important;
  border-radius: 2px !important;
  background: rgba(5,10,12,.72) !important;
}

body.fresh-premium-v101163 :where(.progress-fill, .farming-growth-track > span, .journey-journal-progress > span, .den-project-progress > span, .den-storage-bar > span, .mobile-skill-summary-progress > span) {
  background: linear-gradient(90deg, #926c30, #c8a053, #d5bb6f) !important;
  box-shadow: 0 0 8px rgba(200,160,83,.13) !important;
}

/* -------------------------------------------------------------------------
   Activities / Farming — exact concept structure adapted to live gameplay.
   ------------------------------------------------------------------------- */
@media (min-width: 901px) {
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming > .reference-training-heading {
    display: none !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-layout {
    position: relative;
    display: block !important;
  }

  /* Keep skill switching available without reintroducing the old inner sidebar. */
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel {
    position: absolute !important;
    z-index: 8;
    top: 7px !important;
    right: 0 !important;
    width: 216px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel .panel-heading,
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming #activitySkillTabs {
    display: none !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-select {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-icon,
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-copy {
    display: none !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-field {
    display: block !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-picker-button {
    width: 100% !important;
    min-height: 36px !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    background: rgba(16,26,29,.8) !important;
    border-color: rgba(167,150,79,.28) !important;
    color: #c4bba8 !important;
  }

  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-content {
    min-width: 0;
    width: 100%;
  }
}

body.fresh-premium-v101163 #activitiesPage #activityCards.farming-activity-root {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.fresh-premium-v101163 .fresh-farming-page-heading {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 74px;
  margin-bottom: 14px;
  padding: 0 230px 13px 0;
  border-bottom: 1px solid rgba(167,150,79,.28);
}

body.fresh-premium-v101163 .fresh-farming-page-heading::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 70px;
  width: 510px;
  max-width: 45%;
  height: 1px;
  background: linear-gradient(90deg, var(--fresh-gold), rgba(200,160,83,.15), transparent);
}

body.fresh-premium-v101163 .fresh-farming-page-heading-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(167,150,79,.33);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, rgba(81,74,50,.62), rgba(14,24,27,.86) 70%);
  box-shadow: inset 0 0 0 5px rgba(8,14,16,.28);
  font-size: 26px;
}

body.fresh-premium-v101163 .fresh-farming-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  color: #af9d74;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
}

body.fresh-premium-v101163 .fresh-farming-page-heading h2 {
  margin: 0 !important;
  color: #eee7d8 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(25px, 2vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

body.fresh-premium-v101163 .fresh-farming-page-heading p {
  margin: 4px 0 0 !important;
  color: #a39f96 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-dashboard {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 11px !important;
  align-items: stretch;
  width: 100% !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero {
  grid-column: 1 / span 3;
  display: flex !important;
  min-width: 0;
  min-height: 98px;
  margin: 0 !important;
  padding: 15px 17px !important;
  border: 1px solid rgba(167,150,79,.27) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(20,31,35,.74), rgba(15,25,28,.82)) !important;
  box-shadow: none !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero > div:first-child {
  min-width: 0;
}

body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero h2 {
  margin: 2px 0 3px !important;
  color: #ded3bb !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero p {
  margin: 0 !important;
  color: #8f928e !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-count {
  display: none !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-stat-strip {
  grid-column: 4 / 13;
  display: grid !important;
  grid-template-columns: .95fr 1fr 1fr .9fr 1.3fr !important;
  gap: 9px !important;
  min-width: 0;
  min-height: 98px;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(167,150,79,.27) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(20,31,35,.74), rgba(15,25,28,.82)) !important;
  box-shadow: none !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-stat-strip > div {
  position: relative;
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 9px 11px !important;
  border: 1px solid rgba(167,150,79,.22) !important;
  border-radius: 4px !important;
  background: rgba(20,31,35,.74) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-stat-strip small {
  color: #9b978d !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-stat-strip strong {
  color: #d2b66f !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.18;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-card {
  grid-column: 1 / 13;
  display: grid !important;
  grid-template-columns: minmax(300px, 2fr) minmax(210px, 1fr) minmax(300px, 1.45fr) minmax(155px, .72fr) !important;
  gap: 12px !important;
  align-items: center;
  min-height: 90px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(167,150,79,.42) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(24,36,39,.92), rgba(15,25,28,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.014), var(--fresh-shadow-soft) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-main {
  display: grid !important;
  grid-template-columns: 48px minmax(0,1fr) !important;
  gap: 11px !important;
  align-items: center;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-icon {
  display: grid;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  border: 1px solid rgba(167,150,79,.25) !important;
  border-radius: 50% !important;
  background: rgba(12,20,23,.72) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-main h3 {
  margin: 2px 0 !important;
  color: #dbc37c !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-main p {
  margin: 0 !important;
  color: #8f928e !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-progress {
  min-width: 0;
  padding: 0 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-progress > div:first-child {
  margin-bottom: 5px;
  color: #99968f;
  font-size: 10px;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-progress strong {
  color: #d3c18d !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards {
  min-width: 0;
  padding-left: 11px;
  border-left: 1px solid rgba(167,150,79,.2);
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards > small {
  display: block;
  margin-bottom: 6px;
  color: #9f8a58 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards > div > span {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 7px !important;
  border: 1px solid rgba(167,150,79,.2) !important;
  border-radius: 3px !important;
  background: rgba(12,20,23,.62) !important;
  color: #a9a49a !important;
  font-size: 9px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards b {
  color: #c5bca8 !important;
  font-weight: 500 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  min-width: 0;
}

body.fresh-premium-v101163 #activitiesPage .farming-contract-actions button {
  width: 100% !important;
  min-height: 31px !important;
  padding: 6px 8px !important;
  font-size: 10px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-grid {
  grid-column: 1 / span 11;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  align-content: start;
  min-width: 0;
  margin: 0 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card {
  display: flex !important;
  min-width: 0;
  min-height: 188px;
  flex-direction: column;
  gap: 8px !important;
  padding: 11px !important;
  border: 1px solid rgba(167,150,79,.34) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(24,36,39,.93), rgba(15,25,28,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 7px 18px rgba(0,0,0,.14) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card.ready {
  border-color: rgba(113,137,57,.62) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-head {
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) !important;
  gap: 8px !important;
  align-items: center;
  min-width: 0;
}

body.fresh-premium-v101163 #activitiesPage .farming-crop-icon,
body.fresh-premium-v101163 #activitiesPage .farming-plot-number {
  display: grid !important;
  place-items: center;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid rgba(167,150,79,.2) !important;
  border-radius: 3px !important;
  background: rgba(10,18,20,.66) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-head small {
  color: #b0934f !important;
  font-size: 8.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-head h3 {
  margin: 1px 0 0 !important;
  color: #dcc47e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.18 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-growth-meta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #8e908c !important;
  font-size: 9px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-growth-meta strong {
  color: #d7bd70 !important;
  font-size: 9.5px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-growth-track {
  height: 5px !important;
  margin: 0 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-harvest-preview {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 5px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-harvest-preview > span {
  display: flex !important;
  min-width: 0;
  min-height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 4px !important;
  border: 1px solid rgba(167,150,79,.18) !important;
  border-radius: 2px !important;
  background: rgba(9,16,18,.56) !important;
  color: #888b88 !important;
  font-size: 8.5px !important;
  text-align: center;
}

body.fresh-premium-v101163 #activitiesPage .farming-harvest-preview b {
  color: #d3c8ae !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 6px !important;
  margin-top: auto;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-actions button {
  min-width: 0 !important;
  min-height: 31px !important;
  padding: 6px 8px !important;
  font-size: 9.5px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-harvest-button:not(:disabled) {
  border-color: rgba(113,137,57,.72) !important;
  background: linear-gradient(180deg, rgba(81,103,41,.9), rgba(54,72,33,.94)) !important;
  color: #dce7bd !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-harvest-button:disabled {
  border-color: rgba(167,150,79,.18) !important;
  background: rgba(13,23,25,.7) !important;
  color: #7d806f !important;
  opacity: 1 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card.locked {
  min-height: 136px;
  opacity: .82;
  border-color: rgba(167,150,79,.18) !important;
  background: linear-gradient(180deg, rgba(22,32,36,.76), rgba(16,24,27,.86)) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card.locked .farming-plot-locked {
  display: grid !important;
  place-items: center;
  gap: 3px;
  flex: 1;
  padding: 5px !important;
  text-align: center;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card.locked .farming-plot-locked > span {
  font-size: 22px !important;
  filter: grayscale(1) sepia(.25);
  opacity: .66;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card.locked .farming-plot-locked strong {
  color: #9d937c !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-card.locked .farming-plot-locked p {
  display: none !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-top: auto;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-form label {
  display: grid;
  gap: 4px;
  color: #96938c !important;
  font-size: 9px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-plot-form button {
  grid-column: 1 / -1 !important;
  min-height: 31px !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-vault {
  grid-column: 12 / 13;
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  gap: 9px !important;
  align-self: start;
  margin: 0 !important;
  padding: 11px !important;
  border: 1px solid rgba(167,150,79,.34) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(24,36,39,.93), rgba(15,25,28,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 7px 18px rgba(0,0,0,.14) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-vault h3 {
  margin: 2px 0 0 !important;
  color: #d8c69a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  max-height: 404px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,150,79,.24) transparent;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-chip {
  display: grid !important;
  grid-template-columns: 30px minmax(0,1fr) !important;
  gap: 6px !important;
  align-items: center;
  min-width: 0;
  padding: 7px !important;
  border: 1px solid rgba(167,150,79,.19) !important;
  border-radius: 3px !important;
  background: rgba(10,18,20,.58) !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-chip > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-chip small {
  display: block;
  overflow: hidden;
  color: #99968d !important;
  font-size: 8.5px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.fresh-premium-v101163 #activitiesPage .farming-seed-chip strong {
  display: block;
  color: #d8c8a8 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.fresh-premium-v101163 #activitiesPage .farming-source-note {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Den Progress — same visual language as the concept, while staying in Den.
   ------------------------------------------------------------------------- */
body.fresh-premium-v101163 #denPage #progressPage {
  gap: 10px !important;
}

body.fresh-premium-v101163 #denPage #progressPage > .structure-page-heading {
  min-height: 58px;
}

body.fresh-premium-v101163 .progress-role-legend {
  border-color: rgba(167,150,79,.2) !important;
  background: rgba(11,19,21,.56) !important;
  color: #888b87 !important;
}

body.fresh-premium-v101163 .progress-tabs.section-owner-tabs {
  display: flex !important;
  gap: 7px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid rgba(167,150,79,.2) !important;
}

body.fresh-premium-v101163 .progress-tabs .section-owner-tab {
  min-width: 112px !important;
  min-height: 36px !important;
}

body.fresh-premium-v101163 #progressPage .progress-panel {
  padding: 13px !important;
  border: 1px solid rgba(167,150,79,.24) !important;
  background: linear-gradient(180deg, rgba(20,31,35,.84), rgba(15,24,27,.87)) !important;
}

body.fresh-premium-v101163 #progressPage .den-guidance-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: end;
  gap: 12px !important;
  padding: 13px !important;
  border: 1px solid rgba(167,150,79,.22) !important;
  background: rgba(13,22,25,.62) !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   Storage / Equipment / Combat / Den / World — global concept alignment.
   Existing information architecture stays intact; these rules unify surface
   hierarchy, density and premium contrast without changing gameplay markup.
   ------------------------------------------------------------------------- */
body.fresh-premium-v101163 :where(
  #bankPage .bank-main-nav,
  #bankPage .bank-category-tabs,
  #equipmentPage .equipment-reference-tabs,
  #combatPage .combat-tabs,
  #denPage .den-tabs,
  #worldMapPage .world-map-tabs,
  #expeditionsPage .expedition-log-tabs,
  #leaderboardsPage .leaderboard-tabs
) {
  gap: 7px !important;
  padding: 7px !important;
  border: 1px solid rgba(167,150,79,.18) !important;
  border-radius: 5px !important;
  background: rgba(11,19,21,.48) !important;
}

body.fresh-premium-v101163 :where(
  .bank-row,
  .bank-item-rs,
  .equipment-slot,
  .combat-roster-card,
  .expedition-log-card,
  .den-room-card,
  .world-map-node-card,
  .collection-card,
  .skill-card,
  .shop-card
) {
  border-color: rgba(167,150,79,.22) !important;
  background: linear-gradient(180deg, rgba(22,34,38,.8), rgba(14,24,27,.84)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 5px 14px rgba(0,0,0,.09) !important;
}

/* -------------------------------------------------------------------------
   Mobile / tablet — same palette, preserve the proven responsive structure.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.fresh-premium-v101163 {
    --fresh-radius: 6px;
    background: linear-gradient(180deg, #111b1f 0%, #0b1316 100%);
  }

  body.fresh-premium-v101163 .app-shell {
    display: block !important;
    width: 100% !important;
  }

  body.fresh-premium-v101163 .app-main {
    background: transparent !important;
  }

  body.fresh-premium-v101163 main {
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  body.fresh-premium-v101163 .topbar {
    border-bottom: 1px solid rgba(167,150,79,.18) !important;
    background: rgba(15,25,28,.96) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  }

  body.fresh-premium-v101163 #currentJourneyTracker {
    border-color: rgba(167,150,79,.22) !important;
    background: rgba(18,29,32,.95) !important;
  }

  body.fresh-premium-v101163 .mobile-top-navigation {
    border-color: rgba(167,150,79,.3) !important;
    background: rgba(13,22,25,.98) !important;
    box-shadow: 0 -10px 28px rgba(0,0,0,.24) !important;
  }

  body.fresh-premium-v101163 .mobile-nav-item,
  body.fresh-premium-v101163 .mobile-more-button,
  body.fresh-premium-v101163 .mobile-nav-more-item {
    border-color: rgba(167,150,79,.16) !important;
    background: rgba(18,29,32,.82) !important;
    color: #aaa79f !important;
  }

  body.fresh-premium-v101163 .mobile-nav-item.active,
  body.fresh-premium-v101163 .mobile-nav-item[aria-current="page"] {
    border-color: rgba(200,160,83,.54) !important;
    background: linear-gradient(180deg, rgba(99,75,34,.72), rgba(47,38,25,.9)) !important;
    color: #e4d2a4 !important;
  }

  body.fresh-premium-v101163 .fresh-farming-page-heading {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 62px;
    margin-bottom: 9px;
    padding: 0 0 10px;
  }

  body.fresh-premium-v101163 .fresh-farming-page-heading::after {
    left: 56px;
    width: 180px;
    max-width: 55%;
  }

  body.fresh-premium-v101163 .fresh-farming-page-heading-icon {
    width: 42px;
    height: 42px;
    font-size: 21px;
  }

  body.fresh-premium-v101163 .fresh-farming-page-heading h2 {
    font-size: 24px !important;
  }

  body.fresh-premium-v101163 .fresh-farming-page-heading p {
    font-size: 11px !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero,
  body.fresh-premium-v101163 #activitiesPage .farming-stat-strip,
  body.fresh-premium-v101163 #activitiesPage .farming-contract-card,
  body.fresh-premium-v101163 #activitiesPage .farming-plot-grid,
  body.fresh-premium-v101163 #activitiesPage .farming-seed-vault {
    grid-column: 1 !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero {
    min-height: 0;
    padding: 11px !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-stat-strip {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    min-height: 0;
    padding: 7px !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-stat-strip > div:last-child {
    grid-column: 1 / -1;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-contract-card {
    grid-template-columns: 1fr !important;
    min-height: 0;
    padding: 10px !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards {
    padding-left: 0;
    border-left: 0;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-plot-grid {
    grid-template-columns: 1fr !important;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-plot-card {
    min-height: 0;
  }

  body.fresh-premium-v101163 #activitiesPage .farming-seed-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    max-height: none;
  }
}

@media (min-width: 901px) and (max-width: 1270px) {
  body.fresh-premium-v101163 #activitiesPage .farming-dashboard {
    grid-template-columns: repeat(10,minmax(0,1fr)) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-dashboard-hero {
    grid-column: 1 / span 3;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-stat-strip {
    grid-column: 4 / 11;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-stat-strip > div:last-child {
    grid-column: span 2;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-contract-card {
    grid-column: 1 / 11;
    grid-template-columns: minmax(260px,1.5fr) minmax(180px,1fr) minmax(240px,1.25fr) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-contract-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-plot-grid {
    grid-column: 1 / 9;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-seed-vault {
    grid-column: 9 / 11;
  }
}

@media (min-width: 1271px) and (max-width: 1510px) {
  body.fresh-premium-v101163 #activitiesPage .farming-plot-grid {
    grid-column: 1 / span 10;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-seed-vault {
    grid-column: 11 / 13;
  }
}

@media (min-width: 1511px) {
  body.fresh-premium-v101163 #activitiesPage .farming-plot-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fresh-premium-v101163 *,
  body.fresh-premium-v101163 *::before,
  body.fresh-premium-v101163 *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Responsive reliability corrections discovered by the full 14-device audit. */
@media (max-width: 900px) {
  body.fresh-premium-v101163 .progress-tabs.section-owner-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  body.fresh-premium-v101163 .progress-tabs .section-owner-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding-inline: 7px !important;
  }
}

@media (min-width: 901px) and (max-width: 1160px) {
  body.fresh-premium-v101163 { --fresh-sidebar-width: 194px; }

  body.fresh-premium-v101163 #expeditionsPage :where(.expedition-log-layout, .expedition-layout, .expedition-reference-layout) {
    grid-template-columns: 1fr !important;
  }
  body.fresh-premium-v101163 #expeditionsPage :where(.expedition-detail-panel, .expedition-log-detail-panel) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }
}

@media (min-width: 901px) and (max-width: 1340px) {
  body.fresh-premium-v101163 #combatPage :where(.combat-layout-v2, .combat-reference-layout, .combat-layout) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.fresh-premium-v101163 #combatPage :where(.combat-side-panel, .combat-food-panel-v2, .combat-session-panel) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 !important;
  }
}
@media (min-width: 901px) and (max-width: 1300px) {
  body.fresh-premium-v101163 #activitiesPage .farming-contract-card {
    grid-template-columns: minmax(240px, 1.5fr) minmax(170px, .9fr) minmax(220px, 1.2fr) !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-contract-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 901px) {
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming #mobileSkillTrainingSummary,
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming .current-activity-card,
  body.fresh-premium-v101163 #activitiesPage.activity-mode-farming #activityBrowseControls {
    display: none !important;
  }
}

@media (min-width: 1301px) {
  body.fresh-premium-v101163 #activitiesPage .farming-contract-progress,
  body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards,
  body.fresh-premium-v101163 #activitiesPage .farming-contract-actions {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-contract-rewards {
    padding-top: 0 !important;
    border-top: 0 !important;
  }
}

@media (min-width: 1511px) {
  body.fresh-premium-v101163 #activitiesPage .farming-plot-grid {
    grid-column: 1 / span 10 !important;
  }
  body.fresh-premium-v101163 #activitiesPage .farming-seed-vault {
    grid-column: 11 / 13 !important;
  }
}
@media (min-width: 1271px) {
  body.fresh-premium-v101163 #activitiesPage .farming-stat-strip {
    grid-template-columns: .86fr .95fr 1fr .95fr .86fr 1.25fr !important;
  }
}

/* JourneyDen UI source: styles/fresh-premium-exact-phase1-v101164.css | sha256:619c043aebc07975955cd1e219102d7e05cb2008f3efb38e56eb7328d77b543e */
/* JourneyDen V1.01.164 — Fresh Premium EXACT Phase 1: Global Shell
   Source of truth: docs/ui/FRESH_PREMIUM_V101163_REFERENCE.png
   This layer intentionally samples the approved screenshot rather than
   re-interpreting it. It owns the global background, shell, sidebar,
   navigation, typography hierarchy, common panels, controls and scrollbars.
   Gameplay/content layouts are not redesigned in Phase 1. */

body.fresh-premium-exact-phase1-v101164 {
  /* Exact-master palette sampled from the approved 1672×941 screenshot. */
  --exact-bg: #0e1a20;
  --exact-bg-top: #0d151a;
  --exact-bg-deep: #0a1419;
  --exact-sidebar: #0b161b;
  --exact-sidebar-deep: #081219;
  --exact-surface: #161f23;
  --exact-surface-cool: #0e1a20;
  --exact-surface-raised: #182428;
  --exact-nav: #171f21;
  --exact-line: #4e4028;
  --exact-line-soft: rgba(78, 64, 40, .72);
  --exact-line-faint: rgba(78, 64, 40, .42);
  --exact-gold: #bc964c;
  --exact-gold-deep: #82622e;
  --exact-gold-soft: #aa997b;
  --exact-gold-text: #cdb07d;
  --exact-text: #c9c4bb;
  --exact-text-strong: #e4ded3;
  --exact-muted: #74736a;
  --exact-muted-2: #5f625e;
  --exact-green: #6f8339;
  --exact-red: #c23f4a;
  --exact-sidebar-width: 244px;
  --exact-radius: 4px;

  /* Re-map the legacy/current palette so older page modules inherit the
     reference colors before their own page-specific exact phases arrive. */
  --fresh-bg: var(--exact-bg);
  --fresh-bg-deep: var(--exact-bg-deep);
  --fresh-sidebar: var(--exact-sidebar);
  --fresh-surface: var(--exact-surface);
  --fresh-surface-2: var(--exact-surface-cool);
  --fresh-surface-3: var(--exact-surface-raised);
  --fresh-line: var(--exact-line);
  --fresh-gold: var(--exact-gold);
  --fresh-gold-soft: var(--exact-gold-soft);
  --fresh-gold-muted: var(--exact-gold-deep);
  --fresh-text: var(--exact-text);
  --fresh-text-strong: var(--exact-text-strong);
  --fresh-muted: var(--exact-muted);
  --fresh-muted-2: var(--exact-muted-2);
  --fresh-green: var(--exact-green);
  --fresh-red: var(--exact-red);
  --fresh-radius: var(--exact-radius);
  --fresh-sidebar-width: var(--exact-sidebar-width);

  --bg: var(--exact-bg);
  --surface: var(--exact-surface);
  --surface-2: var(--exact-surface-cool);
  --surface-3: var(--exact-surface-raised);
  --line: var(--exact-line-soft);
  --text: var(--exact-text);
  --muted: var(--exact-muted);
  --gold: var(--exact-gold);
  --red: var(--exact-red);

  background:
    radial-gradient(ellipse at 78% -8%, rgba(38, 58, 64, .18) 0%, rgba(20, 35, 41, .08) 34%, transparent 58%),
    radial-gradient(ellipse at 26% 28%, rgba(30, 46, 51, .10) 0%, transparent 48%),
    linear-gradient(180deg, #0d151a 0%, #0f1c22 42%, #0d191f 100%) !important;
  color: var(--exact-text) !important;
}

body.fresh-premium-exact-phase1-v101164::before {
  /* The reference has a soft organic/noisy depth, not the previous visible
     square grid. Keep this almost imperceptible. */
  opacity: .18 !important;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.018) 0 .55px, transparent .8px),
    radial-gradient(circle at 74% 68%, rgba(255,255,255,.012) 0 .5px, transparent .75px) !important;
  background-size: 13px 13px, 17px 17px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.48) 70%, transparent) !important;
}

body.fresh-premium-exact-phase1-v101164 .app-shell {
  grid-template-columns: var(--exact-sidebar-width) minmax(0, 1fr) !important;
  background: transparent !important;
}

/* ---------------------------------------------------------------------
   Desktop shell: dimensions and hierarchy copied from the reference.
   --------------------------------------------------------------------- */
@media (min-width: 901px) {
  body.fresh-premium-exact-phase1-v101164 .reference-sidebar,
  body.fresh-premium-exact-phase1-v101164 .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 8px 14px 12px !important;
    border: 1px solid rgba(96, 77, 43, .88) !important;
    border-radius: 0 !important;
    background:
      radial-gradient(ellipse at 50% 9%, rgba(25, 39, 43, .22), transparent 30%),
      linear-gradient(180deg, #09141a 0%, #0d171c 42%, #09151b 100%) !important;
    box-shadow:
      inset 0 0 0 3px rgba(5, 12, 16, .44),
      inset -1px 0 rgba(160, 127, 64, .08),
      8px 0 26px rgba(0,0,0,.20) !important;
    overflow: hidden !important;
  }

  body.fresh-premium-exact-phase1-v101164 .reference-sidebar::before,
  body.fresh-premium-exact-phase1-v101164 .reference-sidebar::after {
    content: "";
    position: absolute;
    width: 31px;
    height: 31px;
    pointer-events: none;
    z-index: 4;
  }

  body.fresh-premium-exact-phase1-v101164 .reference-sidebar::before {
    left: 3px;
    top: 3px;
    border-left: 2px solid #a27a36;
    border-top: 2px solid #a27a36;
    clip-path: polygon(0 0,100% 0,100% 7%,24% 7%,7% 24%,7% 100%,0 100%);
  }

  body.fresh-premium-exact-phase1-v101164 .reference-sidebar::after {
    right: 3px;
    bottom: 3px;
    border-right: 2px solid #a27a36;
    border-bottom: 2px solid #a27a36;
    clip-path: polygon(93% 0,100% 0,100% 100%,0 100%,0 93%,76% 93%,93% 76%);
  }

  body.fresh-premium-exact-phase1-v101164 .premium-brand-block {
    min-height: 64px !important;
    height: 64px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    border: 0 !important;
    background: url('../assets/ui/fresh-premium-exact/journeyden-wordmark.png') 15px 9px / 185px 48px no-repeat !important;
  }

  body.fresh-premium-exact-phase1-v101164 .premium-brand-block::before,
  body.fresh-premium-exact-phase1-v101164 .premium-brand-block::after,
  body.fresh-premium-exact-phase1-v101164 .premium-brand-block .sidebar-journeyden-logo {
    display: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-card {
    grid-template-columns: 61px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 126px !important;
    margin: 0 0 15px !important;
    padding: 13px 12px !important;
    border: 1px solid rgba(92, 76, 48, .75) !important;
    border-radius: 5px !important;
    background:
      radial-gradient(circle at 31% 42%, rgba(24, 42, 48, .34), transparent 39%),
      linear-gradient(155deg, #0e1a20 0%, #101d22 68%, #0c181e 100%) !important;
    box-shadow:
      inset 0 0 0 2px rgba(118, 93, 48, .09),
      inset 0 1px rgba(255,255,255,.015),
      0 4px 12px rgba(0,0,0,.12) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-avatar {
    width: 58px !important;
    height: 65px !important;
    align-self: start;
    border: 0 !important;
    border-radius: 0 !important;
    background: url('../assets/ui/fresh-premium-exact/wanderer-avatar.png') center / contain no-repeat !important;
    box-shadow: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-avatar img {
    opacity: 0 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-copy {
    padding-top: 1px;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-rank,
  body.fresh-premium-exact-phase1-v101164 .sidebar-player-copy > strong {
    color: #c6ad76 !important;
    font-family: Georgia, "Times New Roman", serif !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-rank {
    font-size: 12px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-copy > strong {
    margin-top: 1px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-stats,
  body.fresh-premium-exact-phase1-v101164 .sidebar-player-health-meta {
    color: #7d7c74 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 9.5px !important;
    line-height: 1.22 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-stat > :is(b,strong),
  body.fresh-premium-exact-phase1-v101164 .sidebar-player-health-meta strong {
    color: #d4d0c8 !important;
    font-size: 9.5px !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-health {
    height: 5px !important;
    margin-top: 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #241b20 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-player-health > span {
    background: #c83c49 !important;
    box-shadow: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation {
    gap: 5px !important;
    overflow: hidden auto !important;
    scrollbar-color: rgba(110,88,47,.34) transparent !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item {
    min-height: 45px !important;
    height: 45px !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(82, 70, 48, .72) !important;
    border-radius: 3px !important;
    background:
      linear-gradient(100deg, #151f21 0%, #182326 55%, #131e22 100%) !important;
    color: #c7c2b8 !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.018),
      inset 0 0 0 1px rgba(8,16,19,.22),
      0 2px 7px rgba(0,0,0,.08) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item:hover:not(:disabled) {
    border-color: rgba(125,100,54,.72) !important;
    background: linear-gradient(100deg, #192427 0%, #1d292b 55%, #152126 100%) !important;
    color: #dbd2c1 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item.active,
  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item[aria-current="page"] {
    border-color: #9e7a3a !important;
    background:
      radial-gradient(ellipse at 52% 45%, rgba(173,128,60,.33) 0%, rgba(98,74,39,.24) 38%, transparent 72%),
      linear-gradient(100deg, #44351f 0%, #3a3121 50%, #202725 100%) !important;
    color: #dfc895 !important;
    box-shadow:
      inset 0 0 0 1px rgba(206,166,89,.16),
      inset 0 0 20px rgba(182,138,68,.11),
      0 0 12px rgba(176,132,65,.08) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item b {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item-icon {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 25px 25px !important;
    opacity: .94 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation .nav-item-icon img {
    display: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="denPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/den.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="activitiesPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/activities.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="worldMapPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/world.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="combatPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/combat.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="bankPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/storage.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="equipmentPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/equipment.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="shopPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/shop.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="leaderboardsPage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/leaderboards.png') !important; }
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="guidePage"] .nav-item-icon { background-image: url('../assets/ui/fresh-premium-exact/guide.png') !important; }

  /* The reference uses the footer gear for Settings, not another nav row. The
     original hidden route remains in the DOM to preserve the navigation contract. */
  body.fresh-premium-exact-phase1-v101164 .main-navigation [data-page="settingsPage"] {
    display: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 0 !important;
    min-height: 48px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 1px solid rgba(82,70,48,.72) !important;
    border-radius: 2px !important;
    background: #0b171c !important;
    box-shadow: inset 0 0 0 2px rgba(5,12,15,.25) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-signout-button,
  body.fresh-premium-exact-phase1-v101164 .sidebar-settings-button {
    min-height: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #b9a47d !important;
    box-shadow: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-signout-button {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 13px !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-signout-icon {
    width: 25px;
    height: 27px;
    overflow: hidden;
    text-indent: -999px;
    background: url('../assets/ui/fresh-premium-exact/logout.png') center / 24px 27px no-repeat;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-settings-button {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background: url('../assets/ui/fresh-premium-exact/settings.png') center / 24px 27px no-repeat !important;
    font-size: 0 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-signout-button:hover,
  body.fresh-premium-exact-phase1-v101164 .sidebar-settings-button:hover {
    background-color: rgba(91,70,38,.10) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-build-meta {
    display: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .app-main {
    min-width: 0 !important;
    background:
      radial-gradient(ellipse at 79% -4%, rgba(40,60,65,.17), transparent 43%),
      radial-gradient(ellipse at 31% 34%, rgba(29,43,48,.08), transparent 49%),
      linear-gradient(180deg, #0d171c 0%, #0f1c22 38%, #0d191f 100%) !important;
  }

  body.fresh-premium-exact-phase1-v101164 main {
    width: 100% !important;
    max-width: none !important;
    padding: 17px 30px 28px !important;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  body.fresh-premium-exact-phase1-v101164 {
    --exact-sidebar-width: 214px;
    --fresh-sidebar-width: var(--exact-sidebar-width);
  }
  body.fresh-premium-exact-phase1-v101164 main { padding-inline: 20px !important; }
  body.fresh-premium-exact-phase1-v101164 .premium-brand-block { background-size: 168px auto !important; background-position-x: 8px !important; }
}

/* ---------------------------------------------------------------------
   Shared global language. These are the shell-level exact tokens that every
   page receives now; page-specific composition is handled in later phases.
   --------------------------------------------------------------------- */
body.fresh-premium-exact-phase1-v101164 :where(h1,h2,h3,h4) {
  color: var(--exact-text-strong) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(.page-title-row h2, .section-heading h2, .reference-page-heading h2, .reference-training-heading h2, .den-reference-heading h2, .world-map-heading h2, .expedition-log-page-heading h2, .equipment-clean-heading h2) {
  color: #dfd7c9 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
  letter-spacing: .055em !important;
}

body.fresh-premium-exact-phase1-v101164 .eyebrow {
  color: #b58f49 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .08em !important;
}

body.fresh-premium-exact-phase1-v101164 :where(p, small, .muted, .subtitle) {
  color: var(--exact-muted) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(
  .page-title-row,
  .section-heading.reference-page-heading,
  .section-heading.reference-training-heading,
  .den-reference-heading,
  .world-map-heading,
  .expedition-log-page-heading,
  .equipment-clean-heading
) {
  min-height: 65px !important;
  margin-bottom: 14px !important;
  padding-bottom: 11px !important;
  border-bottom: 1px solid rgba(102,83,48,.62) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.fresh-premium-exact-phase1-v101164 :where(
  .page-title-row,
  .section-heading.reference-page-heading,
  .section-heading.reference-training-heading,
  .den-reference-heading,
  .world-map-heading,
  .expedition-log-page-heading,
  .equipment-clean-heading
)::after {
  background: linear-gradient(90deg, #a27a36, rgba(162,122,54,.34), transparent) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(
  .card,
  .item-card,
  .settings-card,
  .guide-panel,
  .guide-sidebar,
  .bank-shell-rs,
  .bank-content-rs,
  .bank-selected-panel-rs,
  .equipment-reference-layout,
  .equipment-reference-side,
  .equipment-panel,
  .equipment-slot,
  .den-home-section,
  .den-guidance-card,
  .den-overview-card,
  .den-room-card,
  .den-upgrade-card,
  .den-upgrade-tier-card,
  .den-project-card,
  .world-map-panel,
  .world-map-detail,
  .combat-panel,
  .combat-command-deck,
  .combat-side-panel,
  .expedition-log-layout,
  .expedition-log-panel,
  .mastery-summary-card,
  .collection-summary-card,
  .progress-panel,
  .current-activity-card,
  .smithing-active-forge,
  .production-current-activity,
  .activity-selection-row,
  .activity-recipe-row,
  .skill-card
) {
  border-color: rgba(82,70,48,.62) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #161f23 0%, #101c21 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 4px 12px rgba(0,0,0,.10) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(button, .btn, .button, [role="button"]) {
  border: 1px solid rgba(117,91,44,.78) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #141f22 0%, #101a1e 100%) !important;
  color: #c8ad74 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 2px 5px rgba(0,0,0,.12) !important;
  font-weight: 600 !important;
}

body.fresh-premium-exact-phase1-v101164 :where(button, .btn, .button, [role="button"]):hover:not(:disabled) {
  border-color: #9b7737 !important;
  background: linear-gradient(180deg, #1a2526 0%, #131e21 100%) !important;
  color: #ddc38e !important;
}

body.fresh-premium-exact-phase1-v101164 :where(button.active, .section-owner-tab.active, .skill-detail-tabs button.active, [aria-selected="true"]) {
  border-color: #a17b3b !important;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(160,119,55,.28), transparent 72%),
    linear-gradient(180deg, #3d321f 0%, #28271f 100%) !important;
  color: #e0c791 !important;
}

body.fresh-premium-exact-phase1-v101164 :where(button.secondary, .secondary-button, .equipment-secondary-button, .section-owner-tab, .skill-detail-tabs button) {
  border-color: rgba(82,70,48,.65) !important;
  background: #101b1f !important;
  color: #b5aa94 !important;
}

body.fresh-premium-exact-phase1-v101164 button.danger,
body.fresh-premium-exact-phase1-v101164 .danger {
  border-color: rgba(150,55,61,.76) !important;
  background: #25171a !important;
  color: #d09799 !important;
}

body.fresh-premium-exact-phase1-v101164 :where(input, select, textarea) {
  border: 1px solid rgba(82,70,48,.68) !important;
  border-radius: 2px !important;
  background: #0d191e !important;
  color: #cac4b8 !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.18) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(input, select, textarea):focus {
  border-color: #9d7939 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px rgba(157,121,57,.14), inset 0 1px 4px rgba(0,0,0,.18) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(.progress-track, .farming-growth-track, .journey-journal-progress, .den-project-progress, .den-storage-bar, .mobile-skill-summary-progress) {
  border: 1px solid rgba(82,70,48,.58) !important;
  border-radius: 0 !important;
  background: #071217 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35) !important;
}

body.fresh-premium-exact-phase1-v101164 :where(.progress-fill, .farming-growth-track > span, .journey-journal-progress > span, .den-project-progress > span, .den-storage-bar > span, .mobile-skill-summary-progress > span) {
  background: linear-gradient(90deg, #9b7132, #c59a4c, #cdb363) !important;
  box-shadow: none !important;
}

body.fresh-premium-exact-phase1-v101164,
body.fresh-premium-exact-phase1-v101164 * {
  scrollbar-color: rgba(112,88,45,.52) #0b161b;
  scrollbar-width: thin;
}

body.fresh-premium-exact-phase1-v101164 *::-webkit-scrollbar { width: 8px; height: 8px; }
body.fresh-premium-exact-phase1-v101164 *::-webkit-scrollbar-track { background: #0b161b; }
body.fresh-premium-exact-phase1-v101164 *::-webkit-scrollbar-thumb { background: #59482c; border: 2px solid #0b161b; }
body.fresh-premium-exact-phase1-v101164 *::-webkit-scrollbar-thumb:hover { background: #765b30; }

/* ---------------------------------------------------------------------
   Mobile/tablet: same sampled palette; existing proven structure remains.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.fresh-premium-exact-phase1-v101164 {
    background: linear-gradient(180deg, #0d171c 0%, #0f1c22 44%, #0b171c 100%) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .app-main {
    background: transparent !important;
  }

  body.fresh-premium-exact-phase1-v101164 .topbar {
    border-bottom-color: rgba(82,70,48,.62) !important;
    background: #0c181d !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.16) !important;
  }

  body.fresh-premium-exact-phase1-v101164 #currentJourneyTracker {
    border-color: rgba(82,70,48,.62) !important;
    background: #111d21 !important;
  }

  body.fresh-premium-exact-phase1-v101164 .mobile-top-navigation {
    border-color: rgba(82,70,48,.72) !important;
    background: #0a151a !important;
    box-shadow: 0 -8px 22px rgba(0,0,0,.24) !important;
  }

  body.fresh-premium-exact-phase1-v101164 .mobile-nav-item,
  body.fresh-premium-exact-phase1-v101164 .mobile-more-button,
  body.fresh-premium-exact-phase1-v101164 .mobile-nav-more-item {
    border-color: rgba(82,70,48,.52) !important;
    background: #131e22 !important;
    color: #aaa59b !important;
  }

  body.fresh-premium-exact-phase1-v101164 .mobile-nav-item.active,
  body.fresh-premium-exact-phase1-v101164 .mobile-nav-item[aria-current="page"] {
    border-color: #9d7939 !important;
    background: linear-gradient(180deg, #45351e 0%, #2c2a20 100%) !important;
    color: #ddc590 !important;
  }
}

/* Phase 1 shell micro-alignment against the master screenshot. */
@media (min-width: 901px) {
  body.fresh-premium-exact-phase1-v101164 .sidebar-player-avatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-size: cover !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-settings-button {
    background-image: none !important;
  }

  body.fresh-premium-exact-phase1-v101164 .sidebar-settings-button::before {
    content: "";
    display: block;
    width: 24px;
    height: 27px;
    background: url('../assets/ui/fresh-premium-exact/settings.png') center / 24px 27px no-repeat;
  }
}

/* JourneyDen UI source: styles/fresh-premium-exact-phase2-v101165.css | sha256:5febb0f230052620ad7d9b80dc9538432c59ca199bca3952ad6eebf2ab19c2e8 */
/* JourneyDen V1.01.165 — Fresh Premium EXACT Phase 2: Shared Components
   Literal visual master: docs/ui/FRESH_PREMIUM_V101163_REFERENCE.png

   Phase 2 does not redesign page composition. It calibrates reusable UI pieces
   so every current and future page inherits the same panel, control, status,
   list, modal, tooltip and progress language visible in the approved master.
   Phase 1 remains the owner of the page background and global shell. */

body.fresh-premium-exact-phase2-v101165 {
  /* Component colors sampled/derived from the approved master only. */
  --exact-component-panel: #161f21;
  --exact-component-panel-cool: #0e1d23;
  --exact-component-panel-deep: #0b171c;
  --exact-component-inset: #101b1f;
  --exact-component-inset-2: #0c181d;
  --exact-component-locked: #182226;
  --exact-component-line: #4e4028;
  --exact-component-line-strong: #725a31;
  --exact-component-line-gold: #8b6b34;
  --exact-component-gold: #bc964c;
  --exact-component-gold-bright: #cdb363;
  --exact-component-gold-text: #cdb07d;
  --exact-component-text: #c9c4bb;
  --exact-component-text-strong: #e4ded3;
  --exact-component-muted: #74736a;
  --exact-component-muted-deep: #5f625e;
  --exact-component-success: #14331c;
  --exact-component-success-line: #476534;
  --exact-component-success-text: #d0bf72;
  --exact-component-danger: #241719;
  --exact-component-danger-line: #743d40;
  --exact-component-danger-text: #cf9698;
  --exact-component-radius: 4px;
  --exact-component-shadow: 0 5px 14px rgba(0,0,0,.12);
  --exact-component-shadow-raised: 0 8px 20px rgba(0,0,0,.17);
  --exact-component-focus: 0 0 0 2px rgba(188,150,76,.18);
}

/* -------------------------------------------------------------------------
   1. Primary reusable panel/card language.
   Screenshot reference: contract card, crop cards, seed vault, Progress card.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .card,
  .panel,
  .content-card,
  .dashboard-card,
  .section-card,
  .summary-card,
  .overview-card,
  .quick-card,
  .home-card,
  .character-card,
  .profile-card,
  .account-card,
  .gold-card,
  .gold-panel,
  .news-card,
  .news-panel,
  .shop-card,
  .shop-panel,
  .leaderboard-card,
  .leaderboard-panel,
  .settings-card,
  .settings-panel,
  .guide-panel,
  .skills-panel,
  .skill-panel,
  .skill-card,
  .skill-overview-card,
  .activity-panel,
  .activity-card,
  .activity-sidebar-panel,
  .activity-mastery-card,
  .current-activity-card,
  .production-current-activity,
  .smithing-active-panel,
  .construction-active-panel,
  .cooking-active-panel,
  .mastery-panel,
  .mastery-card,
  .mastery-summary-card,
  .milestone-card,
  .milestone-panel,
  .collections-panel,
  .collection-panel,
  .collection-card,
  .collection-summary-card,
  .offline-panel,
  .offline-card,
  .offline-mastery-panel,
  .combat-panel,
  .combat-main-card,
  .combat-side-panel,
  .combat-battle-panel,
  .combat-roster-panel,
  .combat-roster-card,
  .combat-style-panel,
  .combat-food-panel,
  .combat-session-panel,
  .combat-skill-overview-card,
  .combat-skills-inline-panel,
  .expedition-log-panel,
  .expedition-log-list-panel,
  .expedition-log-detail-panel,
  .expedition-log-card,
  .expedition-region-card,
  .expedition-regions-panel,
  .expedition-detail-panel,
  .expedition-loadout-panel,
  .expedition-key-source-panel,
  .expedition-loot-info-panel,
  .expedition-start-card,
  .den-tab-panel,
  .den-overview-card,
  .den-guidance-card,
  .den-room-card,
  .den-room-detail-panel,
  .den-tier-card,
  .den-tier-overview-card,
  .den-upgrade-card,
  .den-upgrade-tier-card,
  .den-project-card,
  .den-project-ledger-card,
  .den-project-ledger-panel,
  .den-progression-panel,
  .equipment-panel,
  .equipment-loadout-panel,
  .equipment-slot-card,
  .equipment-consumable-card,
  .equipment-item-preview-card,
  .equipment-combat-level-card,
  .farming-equipment-slot-card,
  .farming-gear-card,
  .farming-bonus-card,
  .bank-panel,
  .bank-card,
  .bank-selected-panel-rs,
  .potion-preset-card,
  .potion-preset-panel,
  .progress-panel
) {
  border: 1px solid rgba(78,64,40,.82) !important;
  border-radius: var(--exact-component-radius) !important;
  background:
    linear-gradient(180deg, rgba(23,32,34,.98) 0%, rgba(15,27,32,.98) 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.012),
    var(--exact-component-shadow) !important;
}

/* Cooler activity/item cards match the crop-board cards in the master. */
body.fresh-premium-exact-phase2-v101165 :where(
  .activity-click-card,
  .activity-recipe-row,
  .smithing-recipe-row,
  .farming-plot-card,
  .farming-seed-chip,
  .combat-enemy-card,
  .combat-player-card,
  .combat-equipment-card,
  .combat-food-item,
  .exp-log-region-card,
  .exp-log-boss-card,
  .collection-expedition-card,
  .achievement-card,
  .offline-mastery-expedition-card,
  .offline-mastery-reward-card,
  .bank-item-rs,
  .item-card,
  .inventory-item
) {
  border: 1px solid rgba(78,64,40,.78) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, #0e1d23 0%, #0c191e 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.01), 0 3px 8px rgba(0,0,0,.10) !important;
}

/* Inset blocks deliberately stay darker and flatter than their parent card. */
body.fresh-premium-exact-phase2-v101165 :where(
  .data-item,
  .stat-card,
  .stats-card,
  .activity-material-requirements,
  .activity-current-status,
  .bank-selected-stats-rs,
  .combat-clean-stats,
  .combat-idle-stats,
  .combat-selected-food-box,
  .combat-selected-food-summary,
  .expedition-stat-card,
  .expedition-vital-card,
  .farming-harvest-preview > span,
  .farming-contract-rewards span,
  .den-project-requirement,
  .den-overview-priority-state,
  .equipment-supply-row
) {
  border: 1px solid rgba(78,64,40,.66) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #101b1f 0%, #0c181d 100%) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.16) !important;
}

/* Card titles use the same warm serif hierarchy as the Farming cards. */
body.fresh-premium-exact-phase2-v101165 :where(
  .card h2,.card h3,.panel h2,.panel h3,
  .content-card h2,.content-card h3,
  .dashboard-card h2,.dashboard-card h3,
  .activity-card h3,.activity-recipe-row h3,
  .smithing-recipe-row h3,
  .farming-plot-card h3,.farming-contract-card h3,.farming-seed-vault h3,
  .combat-panel h3,.combat-card h3,
  .expedition-log-card h3,.expedition-region-card h3,
  .den-room-card h3,.den-upgrade-card h3,.den-project-card h3,
  .equipment-panel h3,.bank-panel h3,
  .settings-card h3,.guide-panel h3
) {
  color: var(--exact-component-text-strong) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
}

/* -------------------------------------------------------------------------
   2. Stat tiles / compact summary blocks.
   Reference: Plots Unlocked / Planted / Harvested / Seeds Found tiles.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .stat-card,
  .stat-chip,
  .stat-pill,
  .farming-stat-strip > div,
  .combat-stat-row,
  .combat-level-row,
  .expedition-progress-metrics > *,
  .den-overview-mini-stat,
  .achievement-overview-card
) {
  border: 1px solid rgba(78,64,40,.70) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #172123 0%, #111c20 100%) !important;
  color: var(--exact-component-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .stat-card,.stat-chip,.stat-pill,.farming-stat-strip > div,
  .combat-stat-row,.combat-level-row,.achievement-overview-card
) :where(small,span,label) {
  color: #89857b !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .stat-card,.stat-chip,.stat-pill,.farming-stat-strip > div,
  .combat-stat-row,.combat-level-row,.achievement-overview-card
) :where(strong,b) {
  color: #d6c08d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
}

/* -------------------------------------------------------------------------
   3. Buttons. One exact control language, with explicit active/success/danger.
   Reference: Reroll, View All Seeds, Journey, Continue, Open Journal, Start.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  button,.btn,.button,[role="button"],
  .close-button,.craft-button,.buy-button
) {
  min-height: 32px;
  border: 1px solid rgba(114,90,49,.90) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #171f20 0%, #111b1e 100%) !important;
  color: var(--exact-component-gold-text) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 2px 5px rgba(0,0,0,.12) !important;
  text-shadow: none !important;
  transform: none !important;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  button,.btn,.button,[role="button"],.close-button,.craft-button,.buy-button
):hover:not(:disabled) {
  border-color: #8e6d35 !important;
  background: linear-gradient(180deg, #1c2626 0%, #141f21 100%) !important;
  color: #dec48e !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 3px 7px rgba(0,0,0,.15) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  button,.btn,.button,[role="button"]
):focus-visible {
  outline: none !important;
  border-color: #a17b3b !important;
  box-shadow: var(--exact-component-focus), inset 0 1px rgba(255,255,255,.012) !important;
}

/* Gold-selected/primary control mirrors the active Journey tab in the master. */
body.fresh-premium-exact-phase2-v101165 :where(
  .btn-primary,.button-gold,
  button.active,
  .tab.active,.tabs .active,
  .section-owner-tab.active,
  .den-section-tab.active,
  .smithing-nav-tab.active,.smithing-tier-tab.active,
  .cooking-tier-tab.active,.construction-tier-tab.active,.apothecary-tier-tab.active,
  .equipment-reference-tabs .active,.equipment-loadout-tabs .active,
  .expedition-log-tabs .active,.exp-log-detail-tabs .active,.exp-log-filter-tabs .active,
  .leaderboard-tabs .active,.mastery-skill-tabs .active,.skill-detail-tabs .active,
  [role="tab"][aria-selected="true"]
) {
  border-color: #9a783d !important;
  background:
    linear-gradient(180deg, rgba(128,101,55,.86) 0%, rgba(67,56,35,.96) 100%) !important;
  color: #ead29b !important;
  box-shadow: inset 0 1px rgba(245,214,145,.11), inset 0 0 14px rgba(188,150,76,.07), 0 2px 6px rgba(0,0,0,.13) !important;
}

/* Start/success action mirrors the green Start button in crop cards. */
body.fresh-premium-exact-phase2-v101165 :where(
  .btn-success,.success,
  .farming-harvest-button:not(:disabled),
  .start-button,.start-activity-button,
  [data-action^="start-"]
) {
  border-color: var(--exact-component-success-line) !important;
  background: linear-gradient(180deg, #173b20 0%, #102b18 100%) !important;
  color: var(--exact-component-success-text) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .btn-success,.success,.farming-harvest-button:not(:disabled),.start-button,.start-activity-button,[data-action^="start-"]
):hover:not(:disabled) {
  border-color: #5f7942 !important;
  background: linear-gradient(180deg, #1c4927 0%, #12331b 100%) !important;
  color: #dfcf82 !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  button.danger,.danger,.combat-stop-button,.farming-stop-button,
  .reset-danger-card button,.sell-confirm-card .danger
) {
  border-color: var(--exact-component-danger-line) !important;
  background: linear-gradient(180deg, #28191c 0%, #1c1416 100%) !important;
  color: var(--exact-component-danger-text) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(button,.btn,.button,[role="button"]):disabled,
body.fresh-premium-exact-phase2-v101165 :where(button,.btn,.button,[role="button"])[aria-disabled="true"] {
  border-color: rgba(78,64,40,.44) !important;
  background: #111a1c !important;
  color: #71664e !important;
  box-shadow: none !important;
  opacity: .82 !important;
  cursor: not-allowed !important;
}

/* -------------------------------------------------------------------------
   4. Tabs / segmented controls.
   Reference: Journey / Mastery / Collections / Offline Progress.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .tabs,.subtabs,.section-owner-tabs,.den-section-tabs,.den-tabs,
  .skill-tabs,.skill-detail-tabs,.combat-tabs,.expedition-log-tabs,
  .exp-log-detail-tabs,.exp-log-filter-tabs,.leaderboard-tabs,
  .achievement-filter-tabs,.bank-category-tabs,.equipment-reference-tabs,
  .equipment-loadout-tabs,.mastery-skill-tabs
) {
  gap: 6px !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .tab,.section-owner-tab,.den-section-tab,
  .skill-tabs > button,.skill-detail-tabs > button,.combat-tabs > button,
  .expedition-log-tabs > button,.exp-log-detail-tabs > button,.exp-log-filter-tabs > button,
  .leaderboard-tabs > button,.achievement-filter-tabs > button,.bank-category-tabs > button,
  .equipment-reference-tabs > button,.equipment-loadout-tabs > button,.mastery-skill-tabs > button,
  .smithing-nav-tab,.smithing-tier-tab,.cooking-tier-tab,.construction-tier-tab,.apothecary-tier-tab
) {
  min-height: 36px !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(82,68,40,.82) !important;
  border-radius: 2px !important;
  background: #111c1f !important;
  color: #ad9e81 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.01) !important;
}

/* -------------------------------------------------------------------------
   5. Inputs, selects, search/filter controls, checkboxes.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,
  .mobile-activity-skill-native-select,.mobile-bank-category-select,
  .mobile-leaderboard-select,.mobile-mastery-skill-select,.potion-preset-select
) {
  min-height: 34px;
  border: 1px solid rgba(78,64,40,.78) !important;
  border-radius: 2px !important;
  background: #0c181d !important;
  color: #c8c1b4 !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.22) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(input,select,textarea)::placeholder {
  color: #64655f !important;
  opacity: 1 !important;
}

body.fresh-premium-exact-phase2-v101165 :where(input,select,textarea):focus {
  outline: none !important;
  border-color: #9a7638 !important;
  box-shadow: var(--exact-component-focus), inset 0 1px 4px rgba(0,0,0,.22) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(input[type="checkbox"],input[type="radio"]) {
  accent-color: #a57d3a !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .filter-bar,.filters,
  .activity-filter-bar,.activity-filter-toolbar,.activity-main-filters,.activity-subfilters,.activity-advanced-filters,
  .bank-advanced-filters,.construction-bank-filters,.achievement-filter-tools,.achievement-filter-group
) {
  border: 1px solid rgba(78,64,40,.58) !important;
  border-radius: 3px !important;
  background: #0f1a1e !important;
  box-shadow: inset 0 1px rgba(255,255,255,.008) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .filter-chip,.activity-filter-chip,.activity-category-chips button,
  .chip,.badge,.pill,.status-chip,.stat-pill,
  .activity-material-chip,.bank-rarity-chip,.bank-filter-badge,.activity-filter-badge,
  .achievement-state-pill,.achievement-status-pill,.expedition-level-pill,.expedition-loot-chip,
  .expedition-state-badge,.expedition-style-badge,.chapter-milestone-badge,.potion-auto-pill,.bank-potion-active-pill
) {
  border: 1px solid rgba(78,64,40,.66) !important;
  border-radius: 3px !important;
  background: #101b1f !important;
  color: #a9a192 !important;
  box-shadow: none !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .filter-chip.active,.activity-filter-chip.active,.activity-category-chips button.active,
  .chip.active,.badge.active,.pill.active,.status-chip.active,
  [aria-pressed="true"]
) {
  border-color: #896a34 !important;
  background: #2b281e !important;
  color: #d6bb82 !important;
}

/* -------------------------------------------------------------------------
   6. List/table/item rows.
   Screenshot reference: compact reward and Seed Vault rows.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .row,.list-row,.data-row,.entry-row,.option-row,.resource-row,.result-row,
  .bank-row,.shop-row,.achievement-row,.collection-row,.mastery-row,.mastery-activity-row,
  .combat-gear-row,.combat-session-loot-row,.combat-session-summary-row,
  .exp-log-discovery-row,.exp-log-route-row,.exp-log-loot-row,.expedition-key-source-row,
  .leaderboard-row,.offline-reward-row,.offline-summary-row,.settings-action-row,
  .activity-row,.activity-compact-row,.activity-mastery-row,.activity-selection-row,
  .skill-row,.skill-unlock-row,.skill-modal-unlock-row,.equipment-supply-row
) {
  border-color: rgba(78,64,40,.52) !important;
  background: #0f1a1e !important;
  color: var(--exact-component-text) !important;
  box-shadow: none !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .row,.list-row,.data-row,.entry-row,.option-row,.resource-row,.result-row,
  .bank-row,.shop-row,.achievement-row,.collection-row,.mastery-row,.mastery-activity-row,
  .combat-gear-row,.combat-session-loot-row,.exp-log-discovery-row,.exp-log-route-row,.exp-log-loot-row,
  .leaderboard-row,.offline-reward-row,.settings-action-row,.activity-row,.activity-compact-row,.skill-row
):hover {
  background: #121e22 !important;
  border-color: rgba(105,82,44,.62) !important;
}

/* Storage/item cards get the restrained crop-card framing instead of heavy tiles. */
body.fresh-premium-exact-phase2-v101165 :where(
  .bank-card,.bank-card-v2,.bank-item-rs,.bank-item,.item-card,.inventory-item,
  .collection-item,.achievement-item,.mastery-item,.shop-item,.skill-item,.resource-item,.result-item,.entry-item,.option-item
) {
  border: 1px solid rgba(78,64,40,.66) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #111e23 0%, #0d191e 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.009) !important;
}

/* -------------------------------------------------------------------------
   7. Progress bars.
   Master uses a thin square-ended dark trough with warm ochre/gold fill.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .progress,.progress-bar,.progress-track,
  .activity-progress,.activity-mastery-progress,
  .achievement-progress,.achievement-progress-bar,
  .collection-progress,.mastery-progress,.mastery-progress-bar,
  .mini-progress,.skill-card-progress,.skill-overview-progress,
  .combat-attack-progress,.combat-progress-track,
  .expedition-progress-track,.expedition-kill-progress,.expedition-region-progress,.exp-compact-progress,.exp-log-card-progress,
  .den-guidance-progress,.den-overview-mini-progress,.den-overview-priority-progress,.den-project-progress,.den-project-ledger-progress,.den-project-requirement-progress,.den-room-detail-progress,.den-tab-panel-progress,.den-upgrade-tier-progress,.den-world-project-glance-progress,
  .farming-growth-track,.farming-contract-progress .farming-growth-track,
  .journey-journal-progress,.current-journey-progress,.mobile-skill-summary-progress,.smithing-active-progress
) {
  height: 6px !important;
  min-height: 6px !important;
  border: 1px solid rgba(83,67,38,.74) !important;
  border-radius: 0 !important;
  background: #071217 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.42) !important;
  overflow: hidden !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .progress-fill,
  .progress-bar > span,.progress-track > span,
  .activity-progress > span,.activity-mastery-progress > span,
  .achievement-progress > span,.achievement-progress-bar > span,
  .collection-progress > span,.mastery-progress > span,.mastery-progress-bar > span,
  .mini-progress > span,.skill-card-progress > span,.skill-overview-progress > span,
  .combat-progress-fill,.combat-attack-progress > span,
  .expedition-progress-track > span,.expedition-kill-progress > span,.expedition-region-progress > span,.exp-compact-progress > span,.exp-log-card-progress > span,
  .den-guidance-progress > span,.den-overview-mini-progress > span,.den-overview-priority-progress > span,.den-project-progress > span,.den-project-ledger-progress > span,.den-project-requirement-progress > span,.den-room-detail-progress > span,.den-tab-panel-progress > span,.den-upgrade-tier-progress > span,.den-world-project-glance-progress > span,
  .farming-growth-track > span,.journey-journal-progress > span,.current-journey-progress > span,.mobile-skill-summary-progress > span,.smithing-active-progress > span
) {
  border-radius: 0 !important;
  background: linear-gradient(90deg, #9b7132 0%, #c29849 62%, #d0b45f 100%) !important;
  box-shadow: none !important;
}

/* HP stays red while sharing the same square trough geometry. */
body.fresh-premium-exact-phase2-v101165 :where(.progress-health,.health-bar,.hp-bar) {
  border-radius: 0 !important;
  background: #21171b !important;
}
body.fresh-premium-exact-phase2-v101165 :where(.progress-health > span,.health-bar > span,.hp-bar > span) {
  background: #c23f4a !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   8. Locked, empty and unavailable states.
   Reference: Plot 5/6 are muted but still premium, not greyed-out placeholders.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .locked,.is-locked,.level-locked,.status-locked,.skill-locked,.den-room-locked,.blocked,
  .farming-plot-card.locked,.mobile-skill-summary-locked
) {
  border-color: rgba(78,64,40,.58) !important;
  background: linear-gradient(180deg, #182226 0%, #121d21 100%) !important;
  color: #817a6c !important;
  filter: none !important;
  opacity: .88 !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .empty,.activity-filter-empty,.activity-materials-empty,.bank-empty-rs,.bank-empty-v2,
  .combat-empty,.combat-empty-supply,.combat-equipment-empty,.combat-food-empty,.combat-selected-food-empty,.combat-session-empty,
  .den-project-empty-state,.equipment-empty-note,.exp-log-empty-filter,.expedition-key-source-empty,
  .leaderboard-empty,.skill-detail-empty,.smithing-active-empty
) {
  border: 1px dashed rgba(78,64,40,.50) !important;
  border-radius: 3px !important;
  background: #0d181c !important;
  color: #74736a !important;
  box-shadow: none !important;
}

/* -------------------------------------------------------------------------
   9. Modals / confirmations / popovers / tooltips.
   Same card material, stronger shadow, almost-black backdrop.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .modal,.offline-modal,.sell-confirm-modal,.cloud-conflict-modal,.chapter-finale-modal,
  .expedition-start-modal,.skill-detail-modal,.skill-details-modal
) {
  background: rgba(3,9,12,.78) !important;
  backdrop-filter: blur(3px) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(
  .modal-card,.offline-modal-card,.sell-confirm-card,.cloud-conflict-card,.chapter-finale-card,
  .expedition-start-card,.skill-detail-modal-card,.reset-confirm-card
) {
  border: 1px solid rgba(111,86,45,.92) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #172124 0%, #0e191e 100%) !important;
  color: var(--exact-component-text) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.014) !important;
}

body.fresh-premium-exact-phase2-v101165 :where(.popover,.skill-tooltip,.has-tooltip::after) {
  border: 1px solid rgba(104,80,42,.84) !important;
  border-radius: 3px !important;
  background: #111c20 !important;
  color: #c7c0b3 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.34) !important;
}

/* -------------------------------------------------------------------------
   10. Selected/focused item states. Keep the screenshot's restrained gold rim.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :where(
  .selected,.is-selected,.is-selected-room,.active-card,
  .activity-category-grid-selected,.bank-item-rs.selected,.equipment-slot-card.selected,
  [aria-selected="true"]:not(button):not([role="tab"])
) {
  border-color: #8d6c35 !important;
  box-shadow: inset 0 0 0 1px rgba(188,150,76,.09), 0 0 0 1px rgba(0,0,0,.14) !important;
}

/* -------------------------------------------------------------------------
   11. Mobile: same component materials, with touch-safe height retained.
   We do not change the proven Phase 1 navigation/composition architecture.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.fresh-premium-exact-phase2-v101165 :where(
    button,.btn,.button,[role="button"],
    input:not([type="checkbox"]):not([type="radio"]),select,textarea
  ) {
    min-height: 42px;
  }

  body.fresh-premium-exact-phase2-v101165 :where(
    .card,.panel,.content-card,.dashboard-card,.section-card,.summary-card,
    .activity-card,.activity-panel,.skill-card,.bank-panel,.equipment-panel,
    .combat-panel,.expedition-log-panel,.den-tab-panel,.settings-card,.guide-panel
  ) {
    border-radius: 4px !important;
  }

  body.fresh-premium-exact-phase2-v101165 :where(
    .tab,.section-owner-tab,.den-section-tab,
    .skill-tabs > button,.skill-detail-tabs > button,.combat-tabs > button,
    .smithing-nav-tab,.smithing-tier-tab,.cooking-tier-tab,.construction-tier-tab,.apothecary-tier-tab
  ) {
    min-height: 42px !important;
    padding-inline: 14px !important;
  }
}

/* Reduced motion remains respected while preserving exact visual states. */
@media (prefers-reduced-motion: reduce) {
  body.fresh-premium-exact-phase2-v101165 *,
  body.fresh-premium-exact-phase2-v101165 *::before,
  body.fresh-premium-exact-phase2-v101165 *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------------------
   12. Master-reference calibration: Farming components.
   These selectors intentionally match the specificity of the V1.01.163 page
   layer so the approved screenshot, not the older approximation, wins.
   Layout metrics are untouched; only the shared component material is exacted.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-dashboard-hero,
body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-stat-strip {
  border-color: rgba(78,64,40,.72) !important;
  background: linear-gradient(180deg, #0e1a1f 0%, #0c181d 100%) !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-stat-strip > div {
  border-color: rgba(78,64,40,.72) !important;
  background: linear-gradient(180deg, #172123 0%, #111c20 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.01) !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-stat-strip small {
  color: #89857b !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-stat-strip strong {
  color: #d2b66f !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-card {
  border-color: #59482a !important;
  background: linear-gradient(180deg, #171f21 0%, #151f21 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 5px 14px rgba(0,0,0,.12) !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-icon {
  border-color: rgba(78,64,40,.72) !important;
  background: #0d191d !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-main h3 {
  color: #d7bc78 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-main p,
body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-progress > div:first-child {
  color: #85847c !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-rewards {
  border-left-color: rgba(78,64,40,.68) !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-rewards > small {
  color: #a58443 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-contract-rewards > div > span {
  border-color: rgba(78,64,40,.70) !important;
  background: #101b1f !important;
  color: #a9a398 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-plot-card,
body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-seed-vault {
  border-color: #534326 !important;
  background: linear-gradient(180deg, #0e1d23 0%, #0c191e 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.01), 0 4px 10px rgba(0,0,0,.12) !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-crop-icon,
body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-plot-number {
  border-color: rgba(78,64,40,.62) !important;
  background: #0b171b !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-plot-head small {
  color: #ad8741 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-plot-head h3 {
  color: #dfd4bd !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-growth-meta {
  color: #7f817c !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-growth-meta strong {
  color: #d1ae5b !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-harvest-preview > span {
  border-color: rgba(78,64,40,.72) !important;
  background: #101b1f !important;
  color: #85827a !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-harvest-preview b {
  color: #d7c8aa !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-harvest-button:not(:disabled) {
  border-color: #476534 !important;
  background: linear-gradient(180deg, #173b20 0%, #102b18 100%) !important;
  color: #d7ca78 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-harvest-button:disabled {
  border-color: rgba(78,64,40,.48) !important;
  background: #101b1f !important;
  color: #77735f !important;
  opacity: 1 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-plot-card.locked {
  border-color: rgba(78,64,40,.72) !important;
  background: linear-gradient(180deg, #182226 0%, #121d21 100%) !important;
  opacity: .88 !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-plot-card.locked .farming-plot-locked strong {
  color: #8f856f !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-seed-chip {
  border-color: rgba(78,64,40,.72) !important;
  background: linear-gradient(180deg, #101b1f 0%, #0d181c 100%) !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-seed-chip small {
  color: #8b887f !important;
}

body.fresh-premium-exact-phase2-v101165 #activitiesPage .farming-seed-chip strong {
  color: #d5c6a7 !important;
}

/* Reference progress tabs/calibration. */
body.fresh-premium-exact-phase2-v101165 .progress-role-legend {
  border-color: rgba(78,64,40,.58) !important;
  background: #0d181c !important;
  color: #777971 !important;
}

body.fresh-premium-exact-phase2-v101165 #progressPage .progress-panel {
  border-color: rgba(78,64,40,.72) !important;
  background: linear-gradient(180deg, #0f1b20 0%, #0d181d 100%) !important;
}

/* -------------------------------------------------------------------------
   13. Legacy-specificity bridge.
   JourneyDen has years of page-scoped CSS. The exact rollout must beat those
   old visual declarations without changing their layout rules. Using the live
   page IDs gives this final visual layer enough specificity while leaving the
   Phase 1 shell/nav untouched.
   ------------------------------------------------------------------------- */
body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(
  .card,.panel,.content-card,.dashboard-card,.section-card,.summary-card,.overview-card,.quick-card,
  .activity-card,.activity-panel,.skill-card,.skill-panel,.bank-panel,.bank-card,
  .equipment-panel,.equipment-loadout-panel,.combat-panel,.combat-main-card,.combat-side-panel,
  .combat-roster-card,.expedition-log-panel,.expedition-log-card,.expedition-region-card,
  .den-tab-panel,.den-overview-card,.den-guidance-card,.den-room-card,.den-upgrade-card,.den-project-card,
  .settings-card,.settings-panel,.guide-panel,.leaderboard-card,.leaderboard-panel,
  .mastery-card,.mastery-panel,.mastery-summary-card,.collection-card,.collection-panel,.collection-summary-card,
  .offline-card,.offline-panel,.offline-mastery-panel,.progress-panel,.potion-preset-card,.potion-preset-panel
) {
  border-color: rgba(78,64,40,.82) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #161f21 0%, #0f1b20 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 5px 14px rgba(0,0,0,.12) !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(
  .activity-click-card,.activity-recipe-row,.smithing-recipe-row,.farming-plot-card,.farming-seed-chip,
  .combat-enemy-card,.combat-player-card,.combat-equipment-card,.combat-food-item,
  .exp-log-region-card,.exp-log-boss-card,.achievement-card,.collection-expedition-card,
  .bank-item-rs,.bank-item,.item-card,.inventory-item,.shop-item,.collection-item,.mastery-item,.skill-item
) {
  border-color: rgba(78,64,40,.78) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #0e1d23 0%, #0c191e 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.01), 0 3px 8px rgba(0,0,0,.10) !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(button,.btn,.button,[role="button"]) {
  border-color: rgba(114,90,49,.90) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #171f20 0%, #111b1e 100%) !important;
  color: #cdb07d !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 2px 5px rgba(0,0,0,.12) !important;
  transform: none !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(
  button.active,.btn-primary,.button-gold,.tab.active,.section-owner-tab.active,.den-section-tab.active,
  .smithing-nav-tab.active,.smithing-tier-tab.active,.cooking-tier-tab.active,.construction-tier-tab.active,.apothecary-tier-tab.active,
  [role="tab"][aria-selected="true"]
) {
  border-color: #9a783d !important;
  background: linear-gradient(180deg, rgba(128,101,55,.86) 0%, rgba(67,56,35,.96) 100%) !important;
  color: #ead29b !important;
  box-shadow: inset 0 1px rgba(245,214,145,.11), inset 0 0 14px rgba(188,150,76,.07), 0 2px 6px rgba(0,0,0,.13) !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(.btn-success,.success,.farming-harvest-button:not(:disabled),.start-button,.start-activity-button,[data-action^="start-"]) {
  border-color: #476534 !important;
  background: linear-gradient(180deg, #173b20 0%, #102b18 100%) !important;
  color: #d0bf72 !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(button.danger,.danger,.combat-stop-button,.farming-stop-button) {
  border-color: #743d40 !important;
  background: linear-gradient(180deg, #28191c 0%, #1c1416 100%) !important;
  color: #cf9698 !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(button,.btn,.button,[role="button"]):disabled {
  border-color: rgba(78,64,40,.44) !important;
  background: #111a1c !important;
  color: #71664e !important;
  box-shadow: none !important;
  opacity: .82 !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  border-color: rgba(78,64,40,.78) !important;
  border-radius: 2px !important;
  background: #0c181d !important;
  color: #c8c1b4 !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.22) !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(
  .progress,.progress-bar,.progress-track,.activity-progress,.activity-mastery-progress,
  .achievement-progress,.achievement-progress-bar,.collection-progress,.mastery-progress,.mastery-progress-bar,
  .mini-progress,.skill-card-progress,.skill-overview-progress,.combat-attack-progress,.combat-progress-track,
  .expedition-progress-track,.expedition-kill-progress,.expedition-region-progress,.exp-compact-progress,.exp-log-card-progress,
  .den-guidance-progress,.den-overview-mini-progress,.den-overview-priority-progress,.den-project-progress,.den-project-ledger-progress,
  .den-project-requirement-progress,.den-room-detail-progress,.den-tab-panel-progress,.den-upgrade-tier-progress,.den-world-project-glance-progress,
  .farming-growth-track,.journey-journal-progress,.current-journey-progress,.mobile-skill-summary-progress,.smithing-active-progress
) {
  height: 6px !important;
  min-height: 6px !important;
  border: 1px solid rgba(83,67,38,.74) !important;
  border-radius: 0 !important;
  background: #071217 !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.42) !important;
  overflow: hidden !important;
}

body.fresh-premium-exact-phase2-v101165 :is(
  #achievementsPage,#activitiesPage,#bankPage,#combatPage,#denPage,#equipmentPage,
  #expeditionsPage,#guidePage,#leaderboardsPage,#masteryPage,#offlineMasteryPage,
  #progressPage,#settingsPage,#shopPage,#skillsPage,#worldMapPage,#worldProjectsPage
) :where(
  .progress-fill,.progress-bar > span,.progress-track > span,.activity-progress > span,.activity-mastery-progress > span,
  .achievement-progress > span,.achievement-progress-bar > span,.collection-progress > span,.mastery-progress > span,.mastery-progress-bar > span,
  .mini-progress > span,.skill-card-progress > span,.skill-overview-progress > span,.combat-progress-fill,.combat-attack-progress > span,
  .expedition-progress-track > span,.expedition-kill-progress > span,.expedition-region-progress > span,.exp-compact-progress > span,.exp-log-card-progress > span,
  .den-guidance-progress > span,.den-overview-mini-progress > span,.den-overview-priority-progress > span,.den-project-progress > span,.den-project-ledger-progress > span,
  .den-project-requirement-progress > span,.den-room-detail-progress > span,.den-tab-panel-progress > span,.den-upgrade-tier-progress > span,.den-world-project-glance-progress > span,
  .farming-growth-track > span,.journey-journal-progress > span,.current-journey-progress > span,.mobile-skill-summary-progress > span,.smithing-active-progress > span
) {
  border-radius: 0 !important;
  background: linear-gradient(90deg, #9b7132 0%, #c29849 62%, #d0b45f 100%) !important;
  box-shadow: none !important;
}

/* Overlays live outside page containers; duplicate the phase class to beat old
   modal styles without increasing generic button specificity in the shell. */
body.fresh-premium-exact-phase2-v101165.fresh-premium-exact-phase2-v101165 :where(
  .modal-card,.offline-modal-card,.sell-confirm-card,.cloud-conflict-card,.chapter-finale-card,
  .expedition-start-card,.skill-detail-modal-card,.reset-confirm-card
) {
  border: 1px solid rgba(111,86,45,.92) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #172124 0%, #0e191e 100%) !important;
  color: #c9c4bb !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.014) !important;
}

/* JourneyDen UI source: styles/fresh-premium-exact-phase3-v101166.css | sha256:ac679cdaaf8680513e88169500c5f4e799eaf73b3f2b647fa79f58fd3eae7af6 */
/* JourneyDen V1.01.166 — Fresh Premium EXACT Phase 3: Activities
   The approved Fresh Premium Farming screenshot remains the literal master.
   Phase 3 applies its composition language to every activity without changing
   activity logic, rewards, timing, costs, unlocks, Farming plots, or saves. */

body.fresh-premium-exact-phase3-v101166 {
  --activity-master-gap: 14px;
  --activity-master-panel: #161f21;
  --activity-master-card: #0e1d23;
  --activity-master-inset: #101b1f;
  --activity-master-line: #4e4028;
  --activity-master-gold: #bc964c;
  --activity-master-gold-text: #cdb07d;
  --activity-master-text: #c9c4bb;
  --activity-master-strong: #e4ded3;
  --activity-master-muted: #74736a;
}

/* --------------------------------------------------------------------------
   Master activity heading — literal breadcrumb + selected-skill hierarchy.
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-heading {
  display: grid !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  padding: 0 2px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(78,64,40,.76) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9c8359;
  font: 500 12px/1.2 Georgia, "Times New Roman", serif;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-breadcrumb strong {
  color: #cdb07d;
  font-weight: 500;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-title-row {
  display: grid !important;
  grid-template-columns: 58px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-skill-icon {
  display: grid !important;
  place-items: center;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  border: 1px solid rgba(78,64,40,.82) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 42% 36%, #263024 0%, #18231e 47%, #101a1d 100%) !important;
  box-shadow: inset 0 0 0 3px rgba(188,150,76,.035), 0 4px 12px rgba(0,0,0,.16) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-skill-icon :where(img,.jd-skill-icon,.skill-icon-art) {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  object-fit: contain;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-copy .eyebrow {
  display: none !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-copy h2 {
  margin: 0 !important;
  color: #e4ded3 !important;
  font: 500 clamp(28px,2.1vw,36px)/1 Georgia, "Times New Roman", serif !important;
  letter-spacing: .035em !important;
  text-transform: uppercase;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-copy p {
  margin: 0 !important;
  max-width: 760px;
  color: #9d978a !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------
   Skill switcher — preserve functionality, but remove the old left rail.
   It becomes one compact full-width control band under the master heading.
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-layout {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: var(--activity-master-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(78,64,40,.74) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012),0 5px 14px rgba(0,0,0,.12) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel .panel-heading {
  display: grid !important;
  gap: 1px;
  min-width: 112px;
  padding: 0 12px 0 2px !important;
  border-right: 1px solid rgba(78,64,40,.55);
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel .panel-heading .eyebrow {
  color: #98743a !important;
  font-size: 9px !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel .panel-heading strong {
  color: #d6c08d !important;
  font: 500 13px/1.2 Georgia, "Times New Roman", serif !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs.skill-tabs {
  display: grid !important;
  grid-template-columns: repeat(8,minmax(92px,1fr)) !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  padding: 0 0 2px !important;
  scrollbar-width: thin;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs > button {
  display: grid !important;
  grid-template-columns: 26px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 92px !important;
  min-height: 44px !important;
  padding: 5px 7px !important;
  text-align: left !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs .skill-tab-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs .skill-tab-icon :where(img,.jd-skill-icon) {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs button > span:last-child {
  display: grid;
  min-width: 0;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs b {
  overflow: hidden;
  color: #d0c7b7;
  font-size: 10px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs small {
  color: #74736a;
  font-size: 9px !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs button.active b { color:#ead29b !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs button.active small { color:#ae986d !important; }

body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-select { display:none !important; }

/* --------------------------------------------------------------------------
   Main activity workspace. All activities inherit the same width and rhythm.
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-content {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-skill-training-summary {
  display: none !important;
}

/* Gathering: screenshot-like current activity band followed by compact board. */
body.fresh-premium-exact-phase3-v101166 #activitiesPage.activity-mode-gathering .current-activity-card,
body.fresh-premium-exact-phase3-v101166 #activitiesPage .current-activity-card {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(78,64,40,.82) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg,#161f21 0%,#101b1f 100%) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,.12) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-current-topline {
  padding: 9px 12px 0 !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .current-activity-card .activity-header {
  grid-template-columns: 48px minmax(0,1fr) auto !important;
  gap: 10px !important;
  padding: 6px 12px 10px !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-current-icon {
  width: 48px !important;
  height: 48px !important;
  min-width:48px !important;
  border:1px solid rgba(78,64,40,.62) !important;
  border-radius:3px !important;
  background:#0e1d23 !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-current-icon :where(img,.jd-item-icon,.jd-skill-icon) {
  width:42px !important;height:42px !important;max-width:42px !important;max-height:42px !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .current-activity-card .activity-header h2 {
  color:#e4ded3 !important;
  font:500 17px/1.2 Georgia,"Times New Roman",serif !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .current-activity-card .progress-panel {
  padding:7px 12px 10px !important;
  border-top:1px solid rgba(78,64,40,.48) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-browse-controls {
  margin:0 !important;
  padding:8px 10px !important;
  border:1px solid rgba(78,64,40,.72) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#131e21 0%,#0e191d 100%) !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-quick-nav { gap:8px !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-main-filters { gap:6px !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-chips { gap:5px !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-chips button,
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-toggle {
  min-height:30px !important;
  padding:5px 9px !important;
  font-size:10px !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage #activityCards.activity-compact-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-click-card.activity-compact-row {
  grid-template-columns:42px minmax(0,1fr) auto !important;
  min-height:58px !important;
  padding:7px 8px !important;
  gap:8px !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#0e1d23 0%,#0c191e 100%) !important;
  border-color:rgba(78,64,40,.78) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.01),0 3px 8px rgba(0,0,0,.10) !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-click-card.activity-compact-row.active-card {
  border-color:#9a783d !important;
  background:linear-gradient(180deg,#17271e 0%,#112119 100%) !important;
  box-shadow:inset 3px 0 0 #bc964c,0 3px 8px rgba(0,0,0,.12) !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-compact-row .activity-card-ref-title h3 {
  color:#ddd2bd !important;
  font:500 12px/1.2 Georgia,"Times New Roman",serif !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-compact-meta,
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-compact-meta strong { font-size:9px !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-compact-row .activity-card-state {
  min-width:58px !important;
  min-height:26px !important;
  border-radius:2px !important;
}

/* --------------------------------------------------------------------------
   Production: one wide current-activity band + one calm recipe board.
   Smithing/Cooking/Construction/Apothecary share the same composition.
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-forge-navigation,.cooking-hearth-navigation,
  .construction-workshop-navigation,.apothecary-alchemy-navigation
) {
  margin:0 !important;
  border:1px solid rgba(78,64,40,.72) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
  box-shadow:none !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-forge-workspace,.cooking-hearth-workspace,
  .construction-workshop-workspace,.apothecary-alchemy-workspace
) {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-active-panel,.cooking-active-panel,
  .construction-active-panel,.apothecary-active-panel
) {
  order:0 !important;
  position:static !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  border:1px solid rgba(78,64,40,.82) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#161f21 0%,#101b1f 100%) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-recipe-board,.cooking-recipe-board,
  .construction-recipe-board,.apothecary-recipe-board
) {
  order:1 !important;
  width:100% !important;
  min-width:0 !important;
  padding:10px !important;
  border:1px solid rgba(78,64,40,.74) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#131e21 0%,#0e191d 100%) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-recipe-board-heading,.cooking-recipe-board-heading,
  .construction-recipe-board-heading,.apothecary-recipe-board-heading
) {
  margin:0 0 8px !important;
  padding:0 0 8px !important;
  border-bottom:1px solid rgba(78,64,40,.60) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid
) {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:7px !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(
  .smithing-recipe-tile,.cooking-recipe-tile,.construction-recipe-tile,.apothecary-recipe-tile
) {
  min-height:58px !important;
  border-radius:3px !important;
  border-color:rgba(78,64,40,.76) !important;
  background:linear-gradient(180deg,#0e1d23 0%,#0c191e 100%) !important;
}

/* Farming already has the approved master composition. Phase 3 only ensures
   it occupies the same workspace after the old activity left rail is removed. */
body.fresh-premium-exact-phase3-v101166 #activitiesPage.activity-mode-farming .activity-sidebar-panel {
  margin-bottom:0 !important;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .farming-dashboard,
body.fresh-premium-exact-phase3-v101166 #activitiesPage .farming-workspace,
body.fresh-premium-exact-phase3-v101166 #activitiesPage .farming-activity-root {
  width:100% !important;
  min-width:0 !important;
}

/* --------------------------------------------------------------------------
   Responsive adaptation. Same materials, phone-specific composition.
   -------------------------------------------------------------------------- */
@media (max-width:1199px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs.skill-tabs {
    grid-template-columns:repeat(8,minmax(106px,1fr)) !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-heading {
    gap:7px !important;
    margin-bottom:9px !important;
    padding-bottom:10px !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-breadcrumb { font-size:11px; }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-title-row {
    grid-template-columns:46px minmax(0,1fr) !important;
    gap:9px !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-skill-icon {
    width:46px !important;height:46px !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-skill-icon :where(img,.jd-skill-icon,.skill-icon-art) {
    width:32px !important;height:32px !important;max-width:32px !important;max-height:32px !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-copy h2 { font-size:24px !important; }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-master-copy p { font-size:11px !important; }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel {
    display:block !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs.skill-tabs { display:none !important; }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-select {
    display:grid !important;
    border:1px solid rgba(78,64,40,.74) !important;
    background:linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-skill-training-summary { display:grid !important; }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .current-activity-card .activity-header {
    grid-template-columns:44px minmax(0,1fr) !important;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .current-activity-card .activity-header .danger {
    grid-column:1 / -1;
    width:100%;
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(.smithing-recipe-board,.cooking-recipe-board,.construction-recipe-board,.apothecary-recipe-board) {
    padding:8px !important;
  }
}

/* Phase 3 exact overview: four restrained summary tiles, matching the master
   Farming summary-band rhythm. Farming hides this generic band because its
   purpose-built six-tile Farming Expansion strip already occupies that role. */
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:-2px 0 0;
  border:1px solid rgba(78,64,40,.76);
  border-radius:3px;
  background:linear-gradient(180deg,#141e21 0%,#101a1e 100%);
  overflow:hidden;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview[hidden] { display:none !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview > div {
  display:grid;
  gap:3px;
  min-width:0;
  padding:9px 12px;
  border-right:1px solid rgba(78,64,40,.52);
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview > div:last-child { border-right:0; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview small {
  color:#807c73;
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview strong {
  overflow:hidden;
  color:#d6c08d;
  font:500 14px/1.2 Georgia,"Times New Roman",serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Explicit mode hooks: Phase 3 has distinct gathering/production compositions. */
body.fresh-premium-exact-phase3-v101166 #activitiesPage.activity-mode-gathering .activity-content { gap:12px !important; }
body.fresh-premium-exact-phase3-v101166 #activitiesPage.activity-mode-production .activity-content { gap:12px !important; }

@media (max-width:760px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview > div:nth-child(2) { border-right:0; }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview > div:nth-child(-n+2) { border-bottom:1px solid rgba(78,64,40,.52); }
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-exact-overview > div { min-height:44px !important; }
}
@media (max-width:760px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-toggle,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-chips button,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-clear-filters {
    min-height:44px !important;
  }
}

/* ==========================================================================
   Phase 3 exact-composition correction
   The approved Farming master keeps the compact 216px skill selector at the
   top-right. Extend that same composition language to every Activity page and
   add a screenshot-style hero/stat band for non-Farming skills.
   ========================================================================== */
@media (min-width: 901px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage {
    position: relative !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage > .activity-master-heading {
    min-height: 92px !important;
    padding-right: 238px !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-layout {
    position: static !important;
    display: block !important;
    width: 100% !important;
  }

  /* Same compact skill switcher used by the approved Farming reference. */
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel {
    position: absolute !important;
    z-index: 12 !important;
    top: 24px !important;
    right: 0 !important;
    display: block !important;
    width: 216px !important;
    min-width: 216px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs.skill-tabs {
    display: none !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-select {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-icon,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-copy {
    display: none !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-field {
    display: block !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-picker-button {
    width: 100% !important;
    min-height: 36px !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(78,64,40,.82) !important;
    border-radius: 3px !important;
    background: rgba(16,27,31,.92) !important;
    color: #cdb07d !important;
    box-shadow: inset 0 1px rgba(255,255,255,.01) !important;
  }
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview {
  display: grid !important;
  grid-template-columns: minmax(250px,2.7fr) minmax(0,7.3fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(78,64,40,.72) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 5px 14px rgba(0,0,0,.10) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage.activity-mode-farming .fresh-activity-overview,
body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview[hidden] {
  display: none !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview-hero {
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 7px 12px 7px 6px !important;
  border-right: 1px solid rgba(78,64,40,.55) !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview-hero .eyebrow {
  color: #bc964c !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview-hero h3 {
  margin: 0 !important;
  color: #e4ded3 !important;
  font: 500 17px/1.2 Georgia,"Times New Roman",serif !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview-hero p {
  margin: 0 !important;
  max-width: 520px !important;
  color: #918c81 !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-stat-strip {
  display: grid !important;
  grid-template-columns: repeat(5,minmax(0,1fr)) !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-stat-strip > div {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(78,64,40,.68) !important;
  border-radius: 3px !important;
  background: #101b1f !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-stat-strip small {
  overflow: hidden !important;
  color: #858176 !important;
  font-size: 9px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-stat-strip strong {
  overflow: hidden !important;
  color: #cdb07d !important;
  font: 500 12px/1.2 Georgia,"Times New Roman",serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Wide screens use the same four-across board rhythm as the Farming master. */
@media (min-width: 1400px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  }
}

@media (min-width: 901px) and (max-width: 1399px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview {
    grid-template-columns: minmax(220px,2.5fr) minmax(0,7.5fr) !important;
  }
}

/* Mobile keeps the proven picker/summary architecture while inheriting the
   exact Phase 1/2 materials. The desktop hero is intentionally removed. */
@media (max-width: 900px) {
  body.fresh-premium-exact-phase3-v101166 #activitiesPage > .activity-master-heading,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .fresh-activity-overview {
    display: none !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-layout {
    display: block !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage #activitySkillTabs.skill-tabs {
    display: none !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .mobile-activity-skill-select {
    display: grid !important;
  }

  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-toggle,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-clear-filters,
  body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-filter-chip {
    min-height: 44px !important;
  }
}

body.fresh-premium-exact-phase3-v101166 #activitiesPage .activity-click-card.activity-compact-row,
body.fresh-premium-exact-phase3-v101166 #activitiesPage :where(.smithing-recipe-tile,.cooking-recipe-tile,.construction-recipe-tile,.apothecary-recipe-tile) {
  border-radius: 5px !important;
}

/* JourneyDen UI source: styles/fresh-premium-exact-phase4-v101167.css | sha256:3c96a6de3963caa70b0f42be128adb85e149dfd83d06cc2a0de07f9a57baae5b */
/* JourneyDen V1.01.167 — Fresh Premium EXACT Phase 4: Main game systems
   The approved Fresh Premium screenshot remains the literal visual master.
   This layer applies the Phase 1/2 material system and Phase 3 composition
   rhythm to The Den, Progress, World, Projects, Combat, Expeditions, Storage,
   Equipment, Shop, Leaderboards, and Guide without changing gameplay. */

body.fresh-premium-exact-phase4-v101167 {
  --phase4-bg:#0e1a20;
  --phase4-bg-deep:#0a1419;
  --phase4-panel:#161f21;
  --phase4-card:#0e1d23;
  --phase4-inset:#101b1f;
  --phase4-locked:#182226;
  --phase4-line:#4e4028;
  --phase4-line-soft:rgba(78,64,40,.58);
  --phase4-gold:#bc964c;
  --phase4-gold-deep:#82622e;
  --phase4-gold-text:#cdb07d;
  --phase4-text:#c9c4bb;
  --phase4-strong:#e4ded3;
  --phase4-muted:#74736a;
  --phase4-gap:14px;
}

/* --------------------------------------------------------------------------
   Whole-family page rhythm
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 :is(
  #denPage,#progressPage,#worldMapPage,#worldProjectsPage,#combatPage,
  #expeditionsPage,#bankPage,#equipmentPage,#shopPage,#leaderboardsPage,#guidePage
) {
  min-width:0;
  color:var(--phase4-text);
}

body.fresh-premium-exact-phase4-v101167 :is(
  #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
  #equipmentPage,#shopPage,#leaderboardsPage,#guidePage
) > .section-heading,
body.fresh-premium-exact-phase4-v101167 #denPage .den-reference-heading,
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading {
  position:relative;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 0 14px !important;
  padding:24px 2px 14px !important;
  border:0 !important;
  border-bottom:1px solid rgba(78,64,40,.76) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Screenshot-like breadcrumb, generated per owner page without adding UI state. */
body.fresh-premium-exact-phase4-v101167 #denPage .den-reference-heading::before,
body.fresh-premium-exact-phase4-v101167 #progressPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading::before,
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #combatPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #expeditionsPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #bankPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #equipmentPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #shopPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #leaderboardsPage > .section-heading::before,
body.fresh-premium-exact-phase4-v101167 #guidePage > .section-heading::before {
  position:absolute;
  top:1px;
  left:2px;
  color:#9c8359;
  font:500 12px/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:.01em;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-reference-heading::before{content:"The Den  ›  Home"}
body.fresh-premium-exact-phase4-v101167 #progressPage > .section-heading::before{content:"The Den  ›  Progress"}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading::before{content:"World  ›  Map"}
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage > .section-heading::before{content:"World  ›  Projects"}
body.fresh-premium-exact-phase4-v101167 #combatPage > .section-heading::before{content:"Combat  ›  Enemies"}
body.fresh-premium-exact-phase4-v101167 #expeditionsPage > .section-heading::before{content:"Combat  ›  Expeditions"}
body.fresh-premium-exact-phase4-v101167 #bankPage > .section-heading::before{content:"Storage  ›  Inventory"}
body.fresh-premium-exact-phase4-v101167 #equipmentPage > .section-heading::before{content:"Equipment  ›  Loadouts"}
body.fresh-premium-exact-phase4-v101167 #shopPage > .section-heading::before{content:"Shop  ›  Permanent Upgrades"}
body.fresh-premium-exact-phase4-v101167 #leaderboardsPage > .section-heading::before{content:"JourneyDen  ›  Leaderboards"}
body.fresh-premium-exact-phase4-v101167 #guidePage > .section-heading::before{content:"Guide  ›  Reference"}

body.fresh-premium-exact-phase4-v101167 :is(
 #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
 #equipmentPage,#shopPage,#leaderboardsPage,#guidePage
) .reference-page-heading-title,
body.fresh-premium-exact-phase4-v101167 #denPage .reference-page-heading-title {
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
}

body.fresh-premium-exact-phase4-v101167 :is(
 #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
 #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
) .reference-page-heading-icon {
  display:grid !important;
  place-items:center !important;
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  border:1px solid rgba(78,64,40,.82) !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 42% 36%,#263024 0%,#18231e 47%,#101a1d 100%) !important;
  box-shadow:inset 0 0 0 3px rgba(188,150,76,.035),0 4px 12px rgba(0,0,0,.16) !important;
}
body.fresh-premium-exact-phase4-v101167 .reference-page-heading-icon img{
  width:38px !important;height:38px !important;max-width:38px !important;max-height:38px !important;object-fit:contain !important;
}

body.fresh-premium-exact-phase4-v101167 :is(
 #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
 #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
) :is(.section-heading,.den-reference-heading) h2,
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading h2 {
  margin:0 !important;
  color:var(--phase4-strong) !important;
  font:500 clamp(28px,2.1vw,36px)/1 Georgia,"Times New Roman",serif !important;
  letter-spacing:.035em !important;
  text-transform:uppercase;
}
body.fresh-premium-exact-phase4-v101167 :is(
 #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
 #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
) :is(.section-heading,.den-reference-heading) p,
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading p {
  margin:3px 0 0 !important;
  max-width:780px;
  color:#9d978a !important;
  font-size:12px !important;
  line-height:1.45 !important;
}
body.fresh-premium-exact-phase4-v101167 :is(
 #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
 #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
) :is(.section-heading,.den-reference-heading) .eyebrow {
  display:none !important;
}

/* Owner tabs are compact, calm, and sit above the page heading like master controls. */
body.fresh-premium-exact-phase4-v101167 :is(#worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage) > .section-owner-tabs,
body.fresh-premium-exact-phase4-v101167 #progressPage > .progress-tabs {
  width:max-content !important;
  max-width:100% !important;
  margin:0 0 6px !important;
  padding:3px !important;
  gap:3px !important;
  border:1px solid rgba(78,64,40,.68) !important;
  border-radius:3px !important;
  background:#101a1e !important;
  box-shadow:none !important;
}
body.fresh-premium-exact-phase4-v101167 :is(#worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage) > .section-owner-tabs button,
body.fresh-premium-exact-phase4-v101167 #progressPage > .progress-tabs button {
  min-height:36px !important;
  padding:7px 15px !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.fresh-premium-exact-phase4-v101167 :is(#worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage) > .section-owner-tabs button.active,
body.fresh-premium-exact-phase4-v101167 #progressPage > .progress-tabs button.active {
  border-color:#6d542d !important;
  background:linear-gradient(180deg,#4a391d 0%,#2d2619 100%) !important;
  color:#ead29b !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 0 14px rgba(188,150,76,.07) !important;
}

/* --------------------------------------------------------------------------
   THE DEN — master-style overview, utilities and active construction
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #denPage .den-shell{display:grid !important;gap:14px !important;min-width:0 !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-heading-seal{display:none !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-reference-top-grid{
  display:grid !important;grid-template-columns:minmax(320px,1.15fr) minmax(0,1.85fr) !important;gap:12px !important;align-items:stretch !important;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero{
  display:grid !important;grid-template-columns:72px minmax(0,1fr) !important;gap:14px !important;align-items:center !important;
  min-height:128px !important;padding:16px !important;border:1px solid var(--phase4-line) !important;border-radius:3px !important;
  background:linear-gradient(180deg,#161f21 0%,#101b1f 100%) !important;box-shadow:0 6px 16px rgba(0,0,0,.12) !important;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-emblem{
  display:grid !important;place-items:center;width:72px !important;height:72px !important;border:1px solid rgba(78,64,40,.82) !important;border-radius:50% !important;
  background:radial-gradient(circle at 42% 36%,#263024 0%,#18231e 47%,#101a1d 100%) !important;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-emblem img{width:48px !important;height:48px !important;object-fit:contain !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-copy h2{margin:1px 0 4px !important;color:var(--phase4-strong) !important;font:500 22px/1.15 Georgia,"Times New Roman",serif !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-copy p{color:#969187 !important;font-size:12px !important;line-height:1.45 !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-badges{display:flex !important;gap:5px !important;flex-wrap:wrap !important;margin-top:8px !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-badges span{padding:4px 7px !important;border:1px solid rgba(78,64,40,.58) !important;border-radius:2px !important;background:#0e1d23 !important;color:#a99b7d !important;font-size:9px !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-overview-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;height:100% !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-overview-card{
  display:grid !important;align-content:center !important;gap:5px !important;min-height:0 !important;padding:12px !important;
  border:1px solid rgba(78,64,40,.74) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-overview-card strong{color:#d9c39a !important;font:500 16px/1.2 Georgia,"Times New Roman",serif !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-overview-card small{color:var(--phase4-muted) !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-home-section{
  margin:0 !important;padding:13px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;
  background:linear-gradient(180deg,#131e21 0%,#0e191d 100%) !important;box-shadow:0 5px 14px rgba(0,0,0,.10) !important;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-home-section-heading{margin:0 0 10px !important;padding:0 0 9px !important;border-bottom:1px solid rgba(78,64,40,.45) !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-card{
  display:grid !important;grid-template-columns:46px minmax(0,1fr) !important;grid-template-rows:auto auto !important;gap:9px 10px !important;min-width:0 !important;
  padding:12px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important;
}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-icon{display:grid !important;place-items:center;width:46px !important;height:46px !important;border:1px solid rgba(78,64,40,.52) !important;border-radius:3px !important;background:#101b1f !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-icon img{width:34px !important;height:34px !important;object-fit:contain !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-card h3{margin:1px 0 3px !important;color:#dfd1b4 !important;font:500 15px/1.15 Georgia,"Times New Roman",serif !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-card p{margin:0 !important;color:#817f78 !important;font-size:10px !important;line-height:1.4 !important}
body.fresh-premium-exact-phase4-v101167 #denPage .den-room-card-actions{grid-column:1/-1 !important;display:grid !important;grid-template-columns:1fr 1fr !important;gap:6px !important}
body.fresh-premium-exact-phase4-v101167 #denPage :is(.den-room-detail-panel,.den-route-project,.den-upgrade-project){border-color:rgba(78,64,40,.72) !important;background:linear-gradient(180deg,#161f21 0%,#101b1f 100%) !important;border-radius:3px !important;box-shadow:none !important}

/* --------------------------------------------------------------------------
   PROGRESS — one clean ledger workspace
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #progressPage{gap:10px}
body.fresh-premium-exact-phase4-v101167 #progressPage .progress-role-legend{margin:0 !important;padding:7px 10px !important;border:1px solid rgba(78,64,40,.55) !important;border-radius:3px !important;background:#0d181c !important;color:#77756d !important}
body.fresh-premium-exact-phase4-v101167 #progressPage .progress-panel{margin:0 !important;padding:13px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:linear-gradient(180deg,#131e21 0%,#0e191d 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #progressPage .progress-panel-heading{margin-bottom:10px !important;padding-bottom:8px !important;border-bottom:1px solid rgba(78,64,40,.45) !important}
body.fresh-premium-exact-phase4-v101167 #progressPage :is(.mastery-summary-grid,.offline-mastery-summary-grid){grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important}
body.fresh-premium-exact-phase4-v101167 #progressPage .mastery-summary-card{border:1px solid rgba(78,64,40,.62) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}

/* --------------------------------------------------------------------------
   WORLD + PROJECTS
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-shell{display:grid !important;gap:10px !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-chapter-nav{margin:0 !important;padding:6px !important;border:1px solid rgba(78,64,40,.64) !important;border-radius:3px !important;background:#101a1e !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading{margin-bottom:2px !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading-stats{display:grid !important;grid-template-columns:repeat(2,minmax(130px,1fr)) !important;gap:7px !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading-stats>div{padding:8px 10px !important;border:1px solid rgba(78,64,40,.62) !important;border-radius:3px !important;background:#0e1d23 !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading-stats small{color:var(--phase4-muted) !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading-stats strong{color:#d9c39a !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-layout{display:grid !important;grid-template-columns:minmax(0,2.15fr) minmax(300px,.85fr) !important;gap:10px !important;align-items:start !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage :is(.world-map-canvas,.world-map-details){border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:0 6px 16px rgba(0,0,0,.12) !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-detail-art{border-bottom:1px solid rgba(78,64,40,.5) !important}
body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-legend{border-top:1px solid rgba(78,64,40,.45) !important}

body.fresh-premium-exact-phase4-v101167 #worldProjectsPage{gap:10px}
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .world-projects-owner-shell{display:grid !important;gap:10px !important}
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-glance{
  display:grid !important;grid-template-columns:minmax(260px,1.25fr) minmax(260px,1.5fr) auto !important;gap:12px !important;align-items:center !important;
  padding:12px 14px !important;border:1px solid rgba(78,64,40,.76) !important;border-radius:3px !important;background:linear-gradient(180deg,#161f21 0%,#101b1f 100%) !important;
}
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-hub{margin:0 !important;padding:13px !important;border:1px solid rgba(78,64,40,.68) !important;border-radius:3px !important;background:#101a1e !important}
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-layout{display:grid !important;grid-template-columns:minmax(270px,.8fr) minmax(0,2.2fr) !important;gap:10px !important}
body.fresh-premium-exact-phase4-v101167 #worldProjectsPage :is(.den-project-ledger-panel,.den-route-project){border:1px solid rgba(78,64,40,.68) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}

/* --------------------------------------------------------------------------
   COMBAT + EXPEDITIONS
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #combatPage{gap:10px}
body.fresh-premium-exact-phase4-v101167 #combatPage .combat-command-deck{display:grid !important;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr) !important;gap:10px !important;margin:0 !important}
body.fresh-premium-exact-phase4-v101167 #combatPage :is(.combat-skills-inline-panel,.combat-style-panel,.combat-roster-panel,.combat-battle-panel,.combat-food-panel-v2,.combat-session-panel){margin:0 !important;padding:11px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #combatPage .combat-layout-v2{display:grid !important;grid-template-columns:minmax(300px,.92fr) minmax(400px,1.35fr) minmax(270px,.78fr) !important;gap:10px !important;align-items:start !important;margin:0 !important}
body.fresh-premium-exact-phase4-v101167 #combatPage .combat-side-panel{display:grid !important;gap:10px !important}
body.fresh-premium-exact-phase4-v101167 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading,.combat-panel-heading,.combat-battle-panel-heading){margin:0 0 8px !important;padding:0 0 8px !important;border-bottom:1px solid rgba(78,64,40,.45) !important}
body.fresh-premium-exact-phase4-v101167 #combatPage .combat-level-badge{min-width:94px !important;padding:6px 9px !important;border:1px solid rgba(78,64,40,.66) !important;border-radius:3px !important;background:#0e1d23 !important}
body.fresh-premium-exact-phase4-v101167 #combatPage .combat-level-badge strong{color:#d8b66d !important;font:500 20px/1 Georgia,"Times New Roman",serif !important}
body.fresh-premium-exact-phase4-v101167 #combatPage :is(.combat-enemy-card,.combat-style-option,.combat-skill-overview-card,.combat-selected-food-box,.combat-session-loot-row){border-color:rgba(78,64,40,.58) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}

body.fresh-premium-exact-phase4-v101167 #expeditionsPage{gap:10px}
body.fresh-premium-exact-phase4-v101167 #expeditionsPage .expedition-log-page-heading .combat-level-badge{min-width:96px !important;padding:7px 10px !important;border:1px solid rgba(78,64,40,.66) !important;border-radius:3px !important;background:#0e1d23 !important}
body.fresh-premium-exact-phase4-v101167 #expeditionsPage .expedition-log-layout{display:grid !important;grid-template-columns:minmax(280px,.78fr) minmax(0,2.22fr) !important;gap:10px !important;align-items:start !important;margin:0 !important}
body.fresh-premium-exact-phase4-v101167 #expeditionsPage :is(.expedition-regions-panel,.expedition-detail-panel){padding:11px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #expeditionsPage .expedition-region-grid{display:grid !important;gap:6px !important}
body.fresh-premium-exact-phase4-v101167 #expeditionsPage :is(.expedition-region-card,.expedition-log-region-card){border-color:rgba(78,64,40,.58) !important;border-radius:3px !important;background:#0e1d23 !important}

/* --------------------------------------------------------------------------
   STORAGE — wide inventory board + selected-item rail
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #bankPage{gap:10px}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-shell-rs{display:grid !important;gap:8px !important;margin:0 !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-topbar-rs{margin:0 !important;padding:7px !important;border:1px solid rgba(78,64,40,.68) !important;border-radius:3px !important;background:#101a1e !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-main-nav{gap:7px !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-category-tabs{gap:4px !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-category-tabs button{min-height:36px !important;padding:7px 11px !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-content-rs{display:grid !important;grid-template-columns:minmax(0,2.55fr) minmax(280px,.75fr) !important;gap:9px !important;align-items:start !important}
body.fresh-premium-exact-phase4-v101167 #bankPage :is(.bank-grid-panel-rs,.bank-selected-panel-rs){padding:10px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-discovery-rs{margin:0 0 8px !important;padding:8px 9px !important;border:1px solid rgba(78,64,40,.52) !important;border-radius:3px !important;background:#0e1d23 !important}
body.fresh-premium-exact-phase4-v101167 #bankPage .bank-slot-grid-rs{gap:6px !important}
body.fresh-premium-exact-phase4-v101167 #bankPage :is(.bank-slot-rs,.bank-item-slot){border-color:rgba(78,64,40,.54) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}

/* --------------------------------------------------------------------------
   EQUIPMENT — clean loadout board with strong central composition
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #equipmentPage{gap:9px}
body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-tabs{width:max-content !important;max-width:100% !important;margin:0 !important;padding:3px !important;gap:3px !important;border:1px solid rgba(78,64,40,.66) !important;border-radius:3px !important;background:#101a1e !important}
body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-tabs button{min-height:38px !important;padding:7px 14px !important}
body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-panel{margin:0 !important}
body.fresh-premium-exact-phase4-v101167 #equipmentPage :is(.equipment-reference-layout,.farming-equipment-reference-layout){display:grid !important;grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr) !important;gap:10px !important;align-items:start !important}
body.fresh-premium-exact-phase4-v101167 #equipmentPage :is(.equipment-clean-section,.equipment-loadout-frame,.equipment-summary-frame,.equipment-detail-frame,.equipment-food-frame,.equipment-potion-frame,.equipment-tools-frame,.farming-loadout-frame,.farming-equipment-available-frame){border:1px solid rgba(78,64,40,.68) !important;border-radius:3px !important;background:linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-reference-side{display:grid !important;gap:10px !important}
body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-clean-heading{margin-bottom:8px !important;padding-bottom:7px !important;border-bottom:1px solid rgba(78,64,40,.42) !important}

/* --------------------------------------------------------------------------
   SHOP / LEADERBOARDS / GUIDE — utility pages use the same calm board rhythm
   -------------------------------------------------------------------------- */
body.fresh-premium-exact-phase4-v101167 #shopPage .card-grid{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important}
body.fresh-premium-exact-phase4-v101167 #shopPage .card{min-width:0 !important;padding:11px !important;border:1px solid rgba(78,64,40,.66) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #shopPage .card h3{color:#dfd1b4 !important;font:500 15px/1.2 Georgia,"Times New Roman",serif !important}

body.fresh-premium-exact-phase4-v101167 #leaderboardsPage{gap:9px}
body.fresh-premium-exact-phase4-v101167 #leaderboardsPage .leaderboard-tabs{display:flex !important;gap:4px !important;margin:0 !important;padding:5px !important;border:1px solid rgba(78,64,40,.64) !important;border-radius:3px !important;background:#101a1e !important;overflow-x:auto !important}
body.fresh-premium-exact-phase4-v101167 #leaderboardsPage .leaderboard-tabs button{min-height:36px !important;white-space:nowrap !important}
body.fresh-premium-exact-phase4-v101167 #leaderboardsPage .leaderboard-panel{margin:0 !important;padding:11px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #leaderboardsPage :is(.leaderboard-header-row,.leaderboard-row){border-color:rgba(78,64,40,.48) !important}

body.fresh-premium-exact-phase4-v101167 #guidePage{gap:10px}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-layout{display:grid !important;grid-template-columns:minmax(230px,.62fr) minmax(0,2.38fr) !important;gap:10px !important;align-items:start !important}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-index{padding:8px !important;border:1px solid rgba(78,64,40,.68) !important;border-radius:3px !important;background:#101a1e !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-index-heading{padding:5px 5px 9px !important;border-bottom:1px solid rgba(78,64,40,.44) !important}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-index-item{min-height:48px !important;margin-top:5px !important;border:1px solid rgba(78,64,40,.45) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-index-item.active{border-color:#765a2e !important;background:linear-gradient(180deg,#332a1b 0%,#201e18 100%) !important}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-panel{padding:13px !important;border:1px solid rgba(78,64,40,.72) !important;border-radius:3px !important;background:linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;box-shadow:none !important}
body.fresh-premium-exact-phase4-v101167 #guidePage .guide-hero{margin:0 0 10px !important;padding:0 0 10px !important;border-bottom:1px solid rgba(78,64,40,.45) !important}
body.fresh-premium-exact-phase4-v101167 #guidePage :is(.guide-section,.guide-note,.guide-callout){border-color:rgba(78,64,40,.5) !important;border-radius:3px !important;background:#0e1d23 !important;box-shadow:none !important}

/* --------------------------------------------------------------------------
   Responsive phase: same exact material, layout adapted rather than shrunk.
   -------------------------------------------------------------------------- */
@media (max-width:1450px){
  body.fresh-premium-exact-phase4-v101167 #denPage .den-room-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-layout-v2{grid-template-columns:minmax(280px,.9fr) minmax(380px,1.25fr) !important}
  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-side-panel{grid-column:1/-1 !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.fresh-premium-exact-phase4-v101167 #shopPage .card-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}

@media (max-width:1100px){
  body.fresh-premium-exact-phase4-v101167 #denPage .den-reference-top-grid{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-layout,
  body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-layout,
  body.fresh-premium-exact-phase4-v101167 #expeditionsPage .expedition-log-layout,
  body.fresh-premium-exact-phase4-v101167 #bankPage .bank-content-rs,
  body.fresh-premium-exact-phase4-v101167 #equipmentPage :is(.equipment-reference-layout,.farming-equipment-reference-layout),
  body.fresh-premium-exact-phase4-v101167 #guidePage .guide-layout{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-glance{grid-template-columns:1fr 1fr !important}
  body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-glance-actions{grid-column:1/-1 !important}
  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-command-deck{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-layout-v2{grid-template-columns:1fr 1fr !important}
  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-side-panel{grid-column:1/-1 !important}
  body.fresh-premium-exact-phase4-v101167 #shopPage .card-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.fresh-premium-exact-phase4-v101167 #progressPage :is(.mastery-summary-grid,.offline-mastery-summary-grid){grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

@media (max-width:760px){
  body.fresh-premium-exact-phase4-v101167 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage
  ) > .section-heading,
  body.fresh-premium-exact-phase4-v101167 #denPage .den-reference-heading,
  body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading{
    display:block !important;margin-bottom:10px !important;padding:21px 0 11px !important;
  }
  body.fresh-premium-exact-phase4-v101167 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) .reference-page-heading-title{grid-template-columns:46px minmax(0,1fr) !important;gap:9px !important}
  body.fresh-premium-exact-phase4-v101167 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) .reference-page-heading-icon{width:46px !important;height:46px !important;min-width:46px !important}
  body.fresh-premium-exact-phase4-v101167 .reference-page-heading-icon img{width:31px !important;height:31px !important;max-width:31px !important;max-height:31px !important}
  body.fresh-premium-exact-phase4-v101167 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) :is(.section-heading,.den-reference-heading) h2,
  body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading h2{font-size:25px !important}

  body.fresh-premium-exact-phase4-v101167 #denPage .den-hero{grid-template-columns:54px minmax(0,1fr) !important;min-height:0 !important;padding:11px !important}
  body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-emblem{width:54px !important;height:54px !important}
  body.fresh-premium-exact-phase4-v101167 #denPage .den-hero-emblem img{width:38px !important;height:38px !important}
  body.fresh-premium-exact-phase4-v101167 #denPage .den-overview-grid{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #denPage .den-room-grid{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #denPage .den-room-card{grid-template-columns:42px minmax(0,1fr) !important}

  body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-heading-stats{grid-template-columns:1fr 1fr !important;margin-top:10px !important}
  body.fresh-premium-exact-phase4-v101167 #worldMapPage .world-map-layout{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-glance{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #worldProjectsPage .den-world-project-glance-actions{grid-column:auto !important}

  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-layout-v2{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #combatPage .combat-side-panel{grid-column:auto !important;grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #expeditionsPage .expedition-log-layout{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #bankPage .bank-content-rs{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #equipmentPage :is(.equipment-reference-layout,.farming-equipment-reference-layout){grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #shopPage .card-grid{grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #progressPage :is(.mastery-summary-grid,.offline-mastery-summary-grid){grid-template-columns:1fr !important}
  body.fresh-premium-exact-phase4-v101167 #guidePage .guide-layout{grid-template-columns:1fr !important}

  body.fresh-premium-exact-phase4-v101167 :is(#worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage) > .section-owner-tabs,
  body.fresh-premium-exact-phase4-v101167 #progressPage > .progress-tabs,
  body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-tabs{
    width:100% !important;display:flex !important;overflow-x:auto !important;scrollbar-width:none !important;
  }
  body.fresh-premium-exact-phase4-v101167 :is(#worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage) > .section-owner-tabs button,
  body.fresh-premium-exact-phase4-v101167 #progressPage > .progress-tabs button,
  body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-tabs button{min-width:max-content !important;min-height:44px !important}
}


/* Phase 4 must never override router/hidden visibility. */
body.fresh-premium-exact-phase4-v101167 [hidden]{display:none !important;}

@media (max-width:480px){
  body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-tabs{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
  }
  body.fresh-premium-exact-phase4-v101167 #equipmentPage .equipment-loadout-tabs button{
    width:100% !important;
    min-width:0 !important;
    padding:7px 5px !important;
    font-size:11px !important;
    white-space:normal !important;
  }
}

/* JourneyDen UI source: styles/fresh-premium-exact-phase5-v101168.css | sha256:683237fac85f54ab7000dc18372755130dc5ed264505bbdf4825babe7b10b678 */
/* JourneyDen V1.01.168 — Fresh Premium EXACT Phase 5: Mobile + tablet adaptation
   The approved 1672x941 Fresh Premium screenshot remains the literal visual master.
   This layer does not restyle desktop. It adapts the exact Phase 1/2 materials and
   Phase 3/4 page hierarchy deliberately for phones, tablets, landscape devices and
   1024-class screens without changing gameplay, page ownership, or navigation logic. */

body.fresh-premium-exact-phase5-v101168 {
  --phase5-bg:#0e1a20;
  --phase5-bg-deep:#0a1419;
  --phase5-sidebar:#0b161b;
  --phase5-panel:#161f21;
  --phase5-card:#0e1d23;
  --phase5-inset:#101b1f;
  --phase5-line:#4e4028;
  --phase5-gold:#bc964c;
  --phase5-gold-deep:#82622e;
  --phase5-gold-text:#cdb07d;
  --phase5-text:#c9c4bb;
  --phase5-strong:#e4ded3;
  --phase5-muted:#74736a;
}

/* -------------------------------------------------------------------------
   Compact tablet / 1024-class layout: same desktop shell, intentionally fitted.
   ------------------------------------------------------------------------- */
@media (min-width:901px) and (max-width:1180px){
  body.fresh-premium-exact-phase5-v101168{
    --exact-sidebar-width:196px;
    --fresh-sidebar-width:var(--exact-sidebar-width);
  }

  body.fresh-premium-exact-phase5-v101168 main{
    padding:14px 16px 24px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .premium-brand-block{
    background-size:154px auto !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage
  ) > .section-heading,
  body.fresh-premium-exact-phase5-v101168 #denPage .den-reference-heading,
  body.fresh-premium-exact-phase5-v101168 #worldMapPage .world-map-heading{
    margin-bottom:11px !important;
    padding-bottom:11px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) .reference-page-heading-title{
    grid-template-columns:50px minmax(0,1fr) !important;
    gap:10px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) .reference-page-heading-icon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .reference-page-heading-icon img{
    width:33px !important;
    height:33px !important;
    max-width:33px !important;
    max-height:33px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) :is(.section-heading,.den-reference-heading) h2,
  body.fresh-premium-exact-phase5-v101168 #worldMapPage .world-map-heading h2{
    font-size:28px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage > .activity-master-heading{
    min-height:84px !important;
    padding-right:204px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-sidebar-panel{
    top:22px !important;
    width:188px !important;
    min-width:188px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .fresh-activity-overview{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .fresh-activity-overview-hero{
    padding:8px 9px 9px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(78,64,40,.5) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .fresh-activity-stat-strip{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase5-v101168 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-dashboard{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage :is(
    .farming-dashboard-hero,.farming-stat-strip,.farming-contract-card,.farming-seed-vault
  ){
    grid-column:1/-1 !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-plot-grid{
    grid-column:1/-1 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-seed-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 :where(button,.btn,.button,[role="button"],select,input){
    min-height:44px;
  }
}

/* -------------------------------------------------------------------------
   Mobile/tablet shell: exact sampled colors, no legacy warm-black drift.
   ------------------------------------------------------------------------- */
@media (max-width:900px){
  html{background:#0a1419 !important;}

  body.fresh-premium-exact-phase5-v101168{
    min-width:0 !important;
    background:
      radial-gradient(ellipse at 76% -8%,rgba(40,60,65,.14),transparent 40%),
      linear-gradient(180deg,#0d171c 0%,#0f1c22 42%,#0b171c 100%) !important;
    color:var(--phase5-text) !important;
    overflow-x:hidden !important;
  }

  body.fresh-premium-exact-phase5-v101168 .app-shell,
  body.fresh-premium-exact-phase5-v101168 .app-main{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  body.fresh-premium-exact-phase5-v101168 .app-main{
    padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important;
    background:transparent !important;
  }

  /* Premium mobile HUD. More is no longer squeezed into this row. */
  body.fresh-premium-exact-phase5-v101168 .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1650 !important;
    display:grid !important;
    grid-template-columns:88px minmax(92px,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
    min-height:60px !important;
    padding:max(6px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) 6px max(8px,env(safe-area-inset-left,0px)) !important;
    border:0 !important;
    border-bottom:1px solid rgba(78,64,40,.82) !important;
    border-radius:0 !important;
    background:rgba(11,22,27,.985) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.24),inset 0 -1px rgba(188,150,76,.025) !important;
    backdrop-filter:blur(9px);
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-header-logo{
    display:block !important;
    width:86px !important;
    height:32px !important;
    max-width:86px !important;
    max-height:32px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat,
  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip{
    min-height:42px !important;
    border:1px solid rgba(78,64,40,.72) !important;
    border-radius:3px !important;
    background:#101b1f !important;
    box-shadow:inset 0 1px rgba(255,255,255,.01) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat{
    padding:6px 7px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat > span,
  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip span{
    color:#858176 !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat > strong{
    color:var(--phase5-strong) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat .health-bar{
    height:6px !important;
    border:1px solid rgba(78,64,40,.5) !important;
    border-radius:0 !important;
    background:#071217 !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats{
    display:grid !important;
    grid-template-columns:repeat(2,54px) !important;
    gap:4px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip{
    width:54px !important;
    min-width:54px !important;
    padding:5px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip strong{
    color:var(--phase5-gold-text) !important;
  }

  /* Current Journey: compact master-material strip, not a separate brown theme. */
  body.fresh-premium-exact-phase5-v101168 #currentJourneyTracker{
    width:auto !important;
    min-width:0 !important;
    margin:7px 8px 0 !important;
    padding:8px 9px !important;
    border:1px solid rgba(78,64,40,.72) !important;
    border-left:2px solid var(--phase5-gold-deep) !important;
    border-radius:3px !important;
    background:linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.10) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #currentJourneyTracker .current-journey-icon{
    width:30px !important;
    height:30px !important;
    border:1px solid rgba(78,64,40,.55) !important;
    border-radius:50% !important;
    background:#101b1f !important;
  }

  body.fresh-premium-exact-phase5-v101168 #currentJourneyTracker .current-journey-count{
    color:var(--phase5-gold-text) !important;
  }

  body.fresh-premium-exact-phase5-v101168 main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:10px max(8px,env(safe-area-inset-right,0px)) 14px max(8px,env(safe-area-inset-left,0px)) !important;
    overflow-x:clip !important;
  }

  body.fresh-premium-exact-phase5-v101168 .page{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Bottom navigation = Den / Activities / Storage / Combat / More.
     World remains accessible in More through the existing navigation logic. */
  body.fresh-premium-exact-phase5-v101168 .mobile-top-navigation{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:1900 !important;
    display:grid !important;
    grid-template-columns:minmax(0,4fr) minmax(60px,1fr) !important;
    align-items:stretch !important;
    width:100% !important;
    min-height:64px !important;
    margin:0 !important;
    padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px) !important;
    border:0 !important;
    border-top:1px solid rgba(78,64,40,.88) !important;
    border-radius:0 !important;
    background:rgba(10,20,25,.995) !important;
    box-shadow:0 -8px 24px rgba(0,0,0,.34),inset 0 1px rgba(188,150,76,.03) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
    min-width:0 !important;
    min-height:64px !important;
    padding:5px 2px 5px 5px !important;
    background:transparent !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary .mobile-nav-item[data-page="worldMapPage"]{
    display:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary .mobile-nav-item[data-page="denPage"]{order:1 !important;}
  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary .mobile-nav-item[data-page="activitiesPage"]{order:2 !important;}
  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary .mobile-nav-item[data-page="bankPage"]{order:3 !important;}
  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary .mobile-nav-item[data-page="combatPage"]{order:4 !important;}

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-item,
  body.fresh-premium-exact-phase5-v101168 .mobile-more-button{
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    align-content:center !important;
    gap:3px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:0 !important;
    padding:5px 2px 4px !important;
    border:1px solid rgba(78,64,40,.50) !important;
    border-radius:3px !important;
    background:#101b1f !important;
    color:#aaa59b !important;
    box-shadow:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-more-button{
    align-self:stretch !important;
    min-height:54px !important;
    margin:5px 5px 5px 1px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(.mobile-nav-item,.mobile-more-button) > span{
    display:grid !important;
    place-items:center !important;
    min-height:25px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-interface-icon-art{
    width:25px !important;
    height:25px !important;
    object-fit:contain !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(.mobile-nav-item,.mobile-more-button) > b{
    color:inherit !important;
    font-size:9px !important;
    font-weight:700 !important;
    line-height:1 !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-item.active,
  body.fresh-premium-exact-phase5-v101168 .mobile-nav-item[aria-current="page"],
  body.fresh-premium-exact-phase5-v101168 .mobile-more-button.menu-open,
  body.fresh-premium-exact-phase5-v101168 .mobile-more-button[aria-expanded="true"]{
    border-color:#8d6a34 !important;
    background:
      radial-gradient(ellipse at 50% 35%,rgba(160,119,55,.22),transparent 72%),
      linear-gradient(180deg,#342c1e 0%,#20231e 100%) !important;
    color:#dfc58e !important;
    box-shadow:inset 0 2px 0 rgba(188,150,76,.52) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-item::after,
  body.fresh-premium-exact-phase5-v101168 .mobile-more-button::after{
    display:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-more{
    position:absolute !important;
    right:6px !important;
    bottom:100% !important;
    left:6px !important;
    width:auto !important;
    max-height:min(70dvh,620px) !important;
    margin:0 !important;
    padding:10px !important;
    overflow:auto !important;
    border:1px solid rgba(78,64,40,.86) !important;
    border-bottom-color:rgba(78,64,40,.5) !important;
    border-radius:5px 5px 0 0 !important;
    background:#0b161b !important;
    box-shadow:0 -16px 38px rgba(0,0,0,.46) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-more-heading{
    padding:8px !important;
    border-bottom:1px solid rgba(78,64,40,.5) !important;
    background:transparent !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-more-group{
    border-color:rgba(78,64,40,.54) !important;
    border-radius:3px !important;
    background:#101b1f !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-more-item{
    min-height:48px !important;
    border-color:rgba(78,64,40,.48) !important;
    border-radius:3px !important;
    background:#0e1d23 !important;
    color:#b8b1a5 !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-more-item.active{
    border-color:#82622e !important;
    background:#27251d !important;
    color:#dfc58e !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-more-backdrop{
    bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important;
    background:rgba(0,0,0,.58) !important;
  }

  /* Shared mobile component discipline: exact Phase 2 materials and touch size. */
  body.fresh-premium-exact-phase5-v101168 :where(
    button,.btn,.button,[role="button"],select,input,textarea
  ){
    min-height:44px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :where(
    .card,.panel,.item-card,.den-home-section,.den-room-card,.den-route-project,
    .current-activity-card,.activity-click-card,.production-current-activity,
    .combat-panel,.combat-roster-panel,.combat-battle-panel,.combat-food-panel-v2,.combat-session-panel,
    .expedition-log-panel,.expedition-log-detail-panel,.bank-grid-panel-rs,.bank-selected-panel-rs,
    .equipment-panel-clean,.equipment-reference-side,.guide-index,.guide-panel,.leaderboard-panel
  ){
    border-color:rgba(78,64,40,.68) !important;
    border-radius:3px !important;
    background-color:var(--phase5-card) !important;
    box-shadow:none !important;
  }

  /* Exact owner heading translated to a phone-sized hierarchy. */
  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage
  ) > .section-heading,
  body.fresh-premium-exact-phase5-v101168 #denPage .den-reference-heading,
  body.fresh-premium-exact-phase5-v101168 #worldMapPage .world-map-heading{
    display:block !important;
    min-height:0 !important;
    margin:0 0 10px !important;
    padding:20px 0 10px !important;
    border-bottom:1px solid rgba(78,64,40,.72) !important;
    background:transparent !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) .reference-page-heading-title{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:9px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) .reference-page-heading-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-color:rgba(78,64,40,.8) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .reference-page-heading-icon img{
    width:29px !important;
    height:29px !important;
    max-width:29px !important;
    max-height:29px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage
  ) :is(.section-heading,.den-reference-heading) h2,
  body.fresh-premium-exact-phase5-v101168 #worldMapPage .world-map-heading h2{
    margin:0 !important;
    font-size:24px !important;
    line-height:1.05 !important;
    letter-spacing:.035em !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #progressPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,
    #equipmentPage,#shopPage,#leaderboardsPage,#guidePage,#denPage,#worldMapPage
  ) :is(.section-heading,.den-reference-heading,.world-map-heading) p{
    margin-top:4px !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }

  /* Tabs never clip; two-column groups are preferred over tiny horizontal pills. */
  body.fresh-premium-exact-phase5-v101168 :is(
    #worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage
  ) > .section-owner-tabs,
  body.fresh-premium-exact-phase5-v101168 #progressPage > .progress-tabs,
  body.fresh-premium-exact-phase5-v101168 #equipmentPage .equipment-loadout-tabs{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    overflow:visible !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(
    #worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage
  ) > .section-owner-tabs button,
  body.fresh-premium-exact-phase5-v101168 #progressPage > .progress-tabs button,
  body.fresh-premium-exact-phase5-v101168 #equipmentPage .equipment-loadout-tabs button{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    white-space:normal !important;
  }

  /* Activities: phone is action-first; tablet keeps a compact master title. */
  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-sidebar-panel{
    margin-bottom:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .mobile-activity-skill-select{
    min-height:54px !important;
    padding:7px !important;
    border:1px solid rgba(78,64,40,.7) !important;
    border-radius:3px !important;
    background:#101b1f !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .mobile-activity-skill-picker-button{
    min-height:44px !important;
    border-color:rgba(78,64,40,.76) !important;
    border-radius:3px !important;
    background:#0e1d23 !important;
    color:var(--phase5-gold-text) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .mobile-skill-training-summary{
    margin:0 0 8px !important;
    border-color:rgba(78,64,40,.68) !important;
    border-radius:3px !important;
    background:#101b1f !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage :is(
    #activityCards.activity-compact-grid,.smithing-recipe-grid,.cooking-recipe-grid,
    .construction-recipe-grid,.apothecary-recipe-grid
  ){
    grid-template-columns:1fr !important;
    gap:7px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card,
  body.fresh-premium-exact-phase5-v101168 #activitiesPage :is(
    .smithing-active-forge,.production-current-activity
  ){
    margin-bottom:8px !important;
    border-radius:3px !important;
  }

  /* Farming: one calm flow on phones, two plots on portrait tablets. */
  body.fresh-premium-exact-phase5-v101168 #activitiesPage .fresh-farming-page-heading{
    margin-bottom:9px !important;
    border-bottom-color:rgba(78,64,40,.72) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-dashboard{
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage :is(
    .farming-dashboard-hero,.farming-stat-strip,.farming-contract-card,
    .farming-plot-card,.farming-seed-vault
  ){
    border-color:rgba(78,64,40,.68) !important;
    border-radius:3px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-stat-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-contract-card{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-plot-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-seed-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  /* The Den: room identity first, actions below, no narrow desktop leftovers. */
  body.fresh-premium-exact-phase5-v101168 #denPage .den-reference-top-grid,
  body.fresh-premium-exact-phase5-v101168 #denPage .den-overview-grid,
  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-card{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:8px 9px !important;
    padding:10px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-card-actions{
    grid-column:1/-1 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-card-actions button:only-child{
    grid-column:1/-1 !important;
  }

  /* Storage: inventory remains dense; selected item is a bottom sheet. */
  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-content-rs{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-grid-panel-rs{
    padding:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-slot-grid-rs{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-slot-rs{
    min-width:0 !important;
    min-height:68px !important;
    border-radius:3px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-selected-panel-rs.open{
    border:1px solid rgba(78,64,40,.82) !important;
    border-bottom:0 !important;
    border-radius:5px 5px 0 0 !important;
    background:#0b161b !important;
  }

  /* Equipment and combat: readable game boards rather than compressed desktop grids. */
  body.fresh-premium-exact-phase5-v101168 #equipmentPage :is(
    .equipment-reference-layout,.farming-equipment-reference-layout
  ){
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-command-deck,
  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-layout-v2,
  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-side-panel,
  body.fresh-premium-exact-phase5-v101168 #expeditionsPage .expedition-log-layout,
  body.fresh-premium-exact-phase5-v101168 #worldMapPage .world-map-layout,
  body.fresh-premium-exact-phase5-v101168 #worldProjectsPage .den-world-project-layout,
  body.fresh-premium-exact-phase5-v101168 #guidePage .guide-layout{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-side-panel{
    grid-column:auto !important;
  }

  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-enemy-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #shopPage .card-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #progressPage :is(
    .mastery-summary-grid,.offline-mastery-summary-grid
  ){
    grid-template-columns:1fr !important;
  }

  body.fresh-premium-exact-phase5-v101168 [hidden]{display:none !important;}
}

/* Portrait tablets get more information density without desktop-like squeezing. */
@media (min-width:600px) and (max-width:900px){
  body.fresh-premium-exact-phase5-v101168 .topbar{
    grid-template-columns:112px minmax(150px,1fr) auto !important;
    min-height:66px !important;
    padding-inline:12px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-header-logo{
    width:108px !important;
    max-width:108px !important;
    height:36px !important;
    max-height:36px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats{
    grid-template-columns:repeat(2,68px) !important;
    gap:6px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip{
    width:68px !important;
    min-width:68px !important;
  }

  body.fresh-premium-exact-phase5-v101168 main{
    padding:12px 14px 18px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage > .activity-master-heading{
    display:grid !important;
    min-height:74px !important;
    margin-bottom:8px !important;
    padding:19px 0 10px !important;
    border-bottom:1px solid rgba(78,64,40,.72) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-master-breadcrumb{
    display:flex !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-master-title-row{
    grid-template-columns:44px minmax(0,1fr) !important;
    gap:9px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-master-skill-icon{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-master-copy h2{
    font-size:24px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .activity-master-copy p{
    font-size:11px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase5-v101168 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid),
  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-plot-grid,
  body.fresh-premium-exact-phase5-v101168 #shopPage .card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-slot-grid-rs{
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-enemy-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Small phones: protect text and controls rather than compressing them. */
@media (max-width:359px){
  body.fresh-premium-exact-phase5-v101168 .topbar{
    grid-template-columns:72px minmax(76px,1fr) auto !important;
    gap:4px !important;
    padding-right:max(5px,env(safe-area-inset-right,0px)) !important;
    padding-left:max(5px,env(safe-area-inset-left,0px)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-header-logo{
    width:70px !important;
    max-width:70px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats{
    grid-template-columns:repeat(2,47px) !important;
    gap:3px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip{
    width:47px !important;
    min-width:47px !important;
    padding:4px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-interface-icon-art{
    width:13px !important;
    height:13px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary{
    gap:2px !important;
    padding-left:3px !important;
  }

  body.fresh-premium-exact-phase5-v101168 :is(.mobile-nav-item,.mobile-more-button) > b{
    font-size:8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-slot-grid-rs{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-enemy-grid{
    grid-template-columns:1fr !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-seed-grid{
    grid-template-columns:1fr !important;
  }
}

/* Landscape phones: preserve the game view vertically while keeping touch controls. */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  body.fresh-premium-exact-phase5-v101168 .topbar{
    position:sticky !important;
    grid-template-columns:82px minmax(100px,1fr) auto !important;
    min-height:50px !important;
    padding-top:max(4px,env(safe-area-inset-top,0px)) !important;
    padding-bottom:4px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-header-logo{
    width:80px !important;
    max-width:80px !important;
    height:28px !important;
    max-height:28px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat,
  body.fresh-premium-exact-phase5-v101168 .top-stats .stat-chip{
    min-height:38px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #currentJourneyTracker{
    margin-top:5px !important;
    padding:6px 8px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #currentJourneyTracker .current-journey-hint{
    display:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-top-navigation,
  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary{
    min-height:56px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-primary{
    padding-top:3px !important;
    padding-bottom:3px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-nav-item,
  body.fresh-premium-exact-phase5-v101168 .mobile-more-button{
    min-height:48px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-more-button{
    margin-top:3px !important;
    margin-bottom:3px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .mobile-interface-icon-art{
    width:21px !important;
    height:21px !important;
  }

  body.fresh-premium-exact-phase5-v101168 main{
    padding-top:7px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage #activityCards.activity-compact-grid,
  body.fresh-premium-exact-phase5-v101168 #activitiesPage :where(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid),
  body.fresh-premium-exact-phase5-v101168 #activitiesPage .farming-plot-grid,
  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-grid,
  body.fresh-premium-exact-phase5-v101168 #shopPage .card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  body.fresh-premium-exact-phase5-v101168 *,
  body.fresh-premium-exact-phase5-v101168 *::before,
  body.fresh-premium-exact-phase5-v101168 *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* Phase 5 specificity bridge: retire the older top-right More placement and
   keep older mobile page rules from reducing critical actions below 44px. */
@media (max-width:900px){
  body.fresh-premium-exact-phase5-v101168 #mobileMoreNavButton.mobile-utility-menu-button{
    position:relative !important;
    inset:auto !important;
    z-index:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    align-self:stretch !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:54px !important;
    margin:5px 5px 5px 1px !important;
    padding:5px 2px 4px !important;
    border:1px solid rgba(78,64,40,.50) !important;
    border-radius:3px !important;
    background:#101b1f !important;
    box-shadow:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 #denPage .den-room-card-actions button,
  body.fresh-premium-exact-phase5-v101168 #combatPage button{
    min-height:44px !important;
  }
}

@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  body.fresh-premium-exact-phase5-v101168 #mobileMoreNavButton.mobile-utility-menu-button{
    min-height:48px !important;
    margin-top:3px !important;
    margin-bottom:3px !important;
  }
}

@media (max-width:900px){
  body.fresh-premium-exact-phase5-v101168 :is(.reference-sidebar,.sidebar){
    display:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 #combatPage #combatAutoEatControl,
  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-selected-food-large > button,
  body.fresh-premium-exact-phase5-v101168 #combatPage .combat-mobile-fold,
  body.fresh-premium-exact-phase5-v101168 #expeditionsPage .exp-log-detail-tabs button,
  body.fresh-premium-exact-phase5-v101168 #bankPage .bank-category-tabs button{
    min-height:44px !important;
    height:auto !important;
  }
}

/* Phase 5 visual calibration fixes -------------------------------------------------
   Tablet HUD must retain the JourneyDen/HP identity from the exact master, and the
   mobile current-activity card must read as one intentional horizontal unit rather
   than inheriting the old 92px action rail. */
@media (max-width:900px){
  body.fresh-premium-exact-phase5-v101168 .topbar-title{
    display:block !important;
    min-width:0 !important;
    width:auto !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    justify-self:end !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card .activity-header,
  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card:not(.is-idle) .activity-header{
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:8px 10px !important;
    padding:10px !important;
    align-items:center !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card .activity-current-icon{
    grid-column:1 !important;
    grid-row:1 !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card .activity-current-copy{
    grid-column:2 !important;
    grid-row:1 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card .activity-current-copy h2{
    font-size:17px !important;
    line-height:1.1 !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage .current-activity-card .activity-current-copy p{
    font-size:11px !important;
    line-height:1.35 !important;
  }

  body.fresh-premium-exact-phase5-v101168 #activitiesPage #stopActivityButton{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:44px !important;
    justify-self:stretch !important;
  }
}

@media (min-width:600px) and (max-width:900px){
  body.fresh-premium-exact-phase5-v101168 .topbar{
    grid-template-columns:minmax(180px,1fr) auto !important;
  }

  body.fresh-premium-exact-phase5-v101168 .topbar-title{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .health-header-stat{
    display:grid !important;
    width:min(220px,32vw) !important;
    min-width:150px !important;
  }

  body.fresh-premium-exact-phase5-v101168 .top-stats{
    grid-template-columns:repeat(2,minmax(68px,auto)) !important;
    gap:6px !important;
  }
}

/* JourneyDen UI source: styles/fresh-premium-exact-phase6-v101169.css | sha256:e3d04171bd521a08b73b1f37ea5afcf49eea8156813f18240b367443703cd3ac */
/* JourneyDen V1.01.169 — Fresh Premium EXACT Phase 6: Pixel lock + final audit
   Source of truth: docs/ui/FRESH_PREMIUM_V101163_REFERENCE.png
   This is the final visual guard layer. It does not invent a new look and it
   does not alter gameplay. It removes remaining legacy visual drift, locks the
   shared master materials, and calibrates the Farming master composition. */

html {
  background:#0e1a20 !important;
  color-scheme:dark;
}

body.fresh-premium-exact-phase6-v101169 {
  --phase6-bg:#0e1a20;
  --phase6-bg-top:#0d151a;
  --phase6-bg-deep:#0a1419;
  --phase6-sidebar:#0b161b;
  --phase6-panel:#161f23;
  --phase6-card:#0e1d23;
  --phase6-inset:#101b1f;
  --phase6-line:#4e4028;
  --phase6-gold:#bc964c;
  --phase6-gold-deep:#82622e;
  --phase6-gold-text:#cdb07d;
  --phase6-text:#c9c4bb;
  --phase6-strong:#e4ded3;
  --phase6-muted:#74736a;
  --phase6-green:#6f8339;
  --phase6-red:#c23f4a;

  /* Reassert the single master palette at the end of the entire cascade. */
  --exact-bg:var(--phase6-bg);
  --exact-bg-top:var(--phase6-bg-top);
  --exact-bg-deep:var(--phase6-bg-deep);
  --exact-sidebar:var(--phase6-sidebar);
  --exact-surface:var(--phase6-panel);
  --exact-surface-cool:var(--phase6-bg);
  --exact-line:var(--phase6-line);
  --exact-gold:var(--phase6-gold);
  --exact-gold-deep:var(--phase6-gold-deep);
  --exact-gold-text:var(--phase6-gold-text);
  --exact-text:var(--phase6-text);
  --exact-text-strong:var(--phase6-strong);
  --exact-muted:var(--phase6-muted);
  --exact-green:var(--phase6-green);
  --exact-red:var(--phase6-red);
}

/* Router/accessibility state must always beat presentation. */
body.fresh-premium-exact-phase6-v101169 [hidden],
body.fresh-premium-exact-phase6-v101169 .page[hidden] {
  display:none !important;
}

/* Final shell tone lock. Keep the Phase 1 geometry exactly as approved. */
body.fresh-premium-exact-phase6-v101169 .app-shell,
body.fresh-premium-exact-phase6-v101169 main,
body.fresh-premium-exact-phase6-v101169 .page {
  color:var(--phase6-text);
}

/* Shared page headings: prevent older owner styles from warming the title line. */
body.fresh-premium-exact-phase6-v101169 :is(
  .page-title-row,
  .section-heading.reference-page-heading,
  .section-heading.reference-training-heading,
  .den-reference-heading,
  .world-map-heading,
  .expedition-log-page-heading
) {
  border-bottom-color:rgba(78,64,40,.76) !important;
  box-shadow:none !important;
}

body.fresh-premium-exact-phase6-v101169 :is(
  .page-title-row,
  .section-heading.reference-page-heading,
  .section-heading.reference-training-heading,
  .den-reference-heading,
  .world-map-heading,
  .expedition-log-page-heading
) h2 {
  color:var(--phase6-strong) !important;
}

body.fresh-premium-exact-phase6-v101169 .eyebrow {
  color:#b58f49 !important;
}

/* Final material bridge for legacy panels that still have owner-specific rules. */
body.fresh-premium-exact-phase6-v101169 :is(
  .diagnostics,
  details.diagnostics,
  .empty,
  .empty-state,
  .empty-panel,
  .placeholder,
  .list-row,
  .item-row,
  .status-row,
  .summary-row
) {
  border-color:rgba(78,64,40,.52) !important;
  background-color:var(--phase6-inset) !important;
  color:var(--phase6-text) !important;
}

body.fresh-premium-exact-phase6-v101169 :is(
  button,
  .btn,
  .button,
  [role="button"]
):focus-visible {
  outline:1px solid var(--phase6-gold) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px rgba(188,150,76,.12) !important;
}

body.fresh-premium-exact-phase6-v101169 :is(button,.btn,.button):disabled {
  border-color:rgba(78,64,40,.40) !important;
  color:#74736a !important;
  box-shadow:none !important;
}

/* Progress bars in the master are thin, square-ended and antique gold. */
body.fresh-premium-exact-phase6-v101169 :is(
  .progress-track,
  .farming-growth-track,
  .den-project-progress,
  .world-project-progress,
  .collection-progress
) {
  border-radius:0 !important;
}
body.fresh-premium-exact-phase6-v101169 :is(
  .progress-track > span,
  .progress-track > div,
  .progress-fill,
  .farming-growth-track > span,
  .den-project-progress > span,
  .world-project-progress > span,
  .collection-progress > span
) {
  border-radius:0 !important;
}

/* -------------------------------------------------------------------------
   Farming master calibration — the screenshot is the literal geometry guide.
   These rules only tune presentation; the six live plot objects and all
   Farming logic continue to come from the existing system.
   ------------------------------------------------------------------------- */
@media (min-width:1440px) {
  body.fresh-premium-exact-phase6-v101169 #activitiesPage.activity-mode-farming .activity-content {
    gap:0 !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .fresh-farming-page-heading {
    margin-bottom:14px !important;
    padding-bottom:11px !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-dashboard {
    grid-template-columns:repeat(16,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-dashboard-hero {
    grid-column:1 / span 4 !important;
    min-height:104px !important;
    padding:14px 16px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-stat-strip {
    grid-column:5 / 17 !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    min-height:104px !important;
    padding:11px !important;
    gap:8px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-stat-strip > div {
    min-height:80px !important;
    padding:8px 9px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-contract-card {
    grid-column:1 / 17 !important;
    min-height:90px !important;
    padding:11px 13px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-grid {
    grid-column:1 / span 14 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-seed-vault {
    grid-column:15 / 17 !important;
    padding:10px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card:not(.locked) {
    min-height:194px !important;
    padding:10px !important;
    gap:7px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card.locked {
    min-height:136px !important;
    box-sizing:border-box !important;
  }

  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-source-note {
    grid-column:1 / 17 !important;
  }
}

/* Wide-system cards should never pick up the old warm-brown panel family. */
@media (min-width:901px) {
  body.fresh-premium-exact-phase6-v101169 :is(
    #denPage,#progressPage,#worldMapPage,#worldProjectsPage,#combatPage,
    #expeditionsPage,#bankPage,#equipmentPage,#shopPage,#leaderboardsPage,#guidePage
  ) :is(.card,.panel,.stat-card,.summary-card,.detail-card) {
    border-color:rgba(78,64,40,.68) !important;
  }
}

/* Mobile/tablet remain Phase 5 compositions; only the master palette is locked. */
@media (max-width:900px) {
  body.fresh-premium-exact-phase6-v101169 {
    background-color:var(--phase6-bg) !important;
  }
  body.fresh-premium-exact-phase6-v101169 .mobile-top-navigation,
  body.fresh-premium-exact-phase6-v101169 #mobileTopNavigation {
    border-color:rgba(78,64,40,.78) !important;
  }
  body.fresh-premium-exact-phase6-v101169 :is(button,.btn,.button,[role="button"],select,input) {
    min-height:44px;
  }
}

@media (max-width:900px) {
  body.fresh-premium-exact-phase6-v101169 #bankPage .bank-category-tabs button {
    min-width:44px !important;
  }
}

@media (max-width:900px) {
  body.fresh-premium-exact-phase6-v101169 #activitiesPage :is(button,.btn,.button,[role="button"],select,input),
  body.fresh-premium-exact-phase6-v101169 :is(#denPage,#progressPage,#worldMapPage,#worldProjectsPage,#combatPage,#expeditionsPage,#bankPage,#equipmentPage,#shopPage,#leaderboardsPage,#guidePage) :is(button,.btn,.button,[role="button"],select,input) {
    min-height:44px !important;
  }
}

@media (max-width:900px) {
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-contract-actions button,
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-actions button,
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-form button,
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-seed-vault button {
    min-height:44px !important;
  }
}

/* 1672 master geometry: lock the vertical rhythm visible in the approved PNG. */
@media (min-width:1440px) {
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .fresh-farming-page-heading {
    height:80px !important;
    min-height:80px !important;
    margin-bottom:10px !important;
    box-sizing:border-box !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-dashboard {
    gap:14px 10px !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-dashboard-hero,
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-stat-strip {
    height:104px !important;
    min-height:104px !important;
    overflow:hidden !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-contract-card {
    height:90px !important;
    min-height:90px !important;
    overflow:hidden !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card:not(.locked) {
    height:194px !important;
    min-height:194px !important;
    overflow:hidden !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card.locked {
    height:136px !important;
    min-height:136px !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-seed-vault {
    min-height:307px !important;
  }
}

@media (min-width:1440px) {
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card:not(.locked) {
    height:198px !important;
    min-height:198px !important;
    padding:8px !important;
    gap:4px !important;
    overflow:visible !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-harvest-preview > span {
    min-height:36px !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card.locked {
    overflow:hidden !important;
  }
  body.fresh-premium-exact-phase6-v101169 #activitiesPage .farming-plot-card.locked .farming-plot-locked {
    min-height:0 !important;
    padding:2px !important;
  }
}

/* Master viewport horizontal calibration. The approved PNG's content frame is
   approximately x=273..1648 at 1672px, so the final shell uses the measured
   six-pixel inter-column gap and 17px main inset at wide desktop. */
@media (min-width:1440px) {
  body.fresh-premium-exact-phase6-v101169 .app-shell {
    column-gap:6px !important;
  }
  body.fresh-premium-exact-phase6-v101169 main {
    padding-left:17px !important;
    padding-right:17px !important;
  }
}

/* JourneyDen UI source: styles/farming-seed-bag-v101171.css | sha256:a44d0d5d2450dbca50329b185d3278dc8d06fa020f4b18eec89ecbd8a9c27363 */
/* JourneyDen V1.01.171 — Seed Bag Core · Phase 1
   Scoped Farming-only UI extension. Reuses the Fresh Premium EXACT palette;
   no new global theme tokens or page composition are introduced here. */

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag {
  gap: 10px !important;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag > div:first-child p {
  margin: 5px 0 0;
  color: #85847c;
  font-size: 10px;
  line-height: 1.45;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag .farming-seed-grid {
  grid-template-columns: 1fr !important;
  max-height: none !important;
  overflow: visible !important;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(78,64,40,.72);
  border-radius: 3px;
  background: linear-gradient(180deg, #101b1f 0%, #0d181c 100%);
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(78,64,40,.62);
  background: #0b171b;
  overflow: hidden;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-icon img {
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy {
  min-width: 0;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy small,
body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy strong,
body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy span {
  display: block;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy small {
  overflow: hidden;
  color: #8b887f;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy strong {
  margin-top: 2px;
  color: #d5c6a7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 500;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy span {
  margin-top: 2px;
  color: #7f817c;
  font-size: 9px;
  line-height: 1.35;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-actions,
body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-load {
  display: grid;
  gap: 6px;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-actions {
  grid-template-columns: 1fr;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-load label {
  display: grid;
  gap: 4px;
  color: #8b887f;
  font-size: 9px;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-note {
  color: #777971;
  font-size: 9px;
  line-height: 1.4;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-automation-paused {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(78,64,40,.58);
  background: #101b1f;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-automation-paused strong {
  color: #cdb07d;
  font-size: 10px;
}

body.farming-seed-bag-v101171 #activitiesPage .farming-automation-paused span {
  color: #85847c;
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag .farming-seed-grid {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .9fr) !important;
    align-items: stretch;
  }

  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-load {
    align-content: stretch;
  }
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag > div:first-child p,
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy small,
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy span,
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-load label,
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-note,
  body.farming-seed-bag-v101171 #activitiesPage .farming-automation-paused span {
    font-size: 12px;
  }

  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag-slot-copy strong {
    font-size: 16px;
  }

  body.farming-seed-bag-v101171 #activitiesPage .farming-automation-paused strong {
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  body.farming-seed-bag-v101171 #activitiesPage .farming-seed-bag .farming-seed-grid {
    grid-template-columns: 1fr !important;
  }
}

/* JourneyDen UI source: styles/farm-improvements-v101172.css | sha256:175f245e4546fefca9035698e76a6cd6bb4db9c3e448059ead72899fc62028f3 */
/* JourneyDen V1.01.173 — Farm Improvements ownership correction
   Permanent farm projects belong to The Den -> Construction.
   The Construction activity remains repeatable component crafting only. */

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .den-farm-improvements {
  display:grid;
  gap:9px;
  margin-top:12px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:stretch;
  padding:13px 14px;
  border:1px solid rgba(78,64,40,.78);
  border-radius:3px;
  background:linear-gradient(180deg,#161f21 0%,#0f1b20 100%);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-hero h3 {
  margin:2px 0 4px;
  color:#e4ded3;
  font:500 20px/1.15 Georgia,"Times New Roman",serif;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-hero p {
  max-width:700px;
  margin:0;
  color:#9b978d;
  font-size:11px;
  line-height:1.45;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-current {
  display:grid;
  grid-template-columns:repeat(3,minmax(105px,1fr));
  gap:6px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-current > div {
  min-width:0;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  border:1px solid rgba(78,64,40,.58);
  background:#0e1d23;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-current small {
  color:#74736a;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-current strong {
  color:#cdb07d;
  font-size:15px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-note {
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(78,64,40,.48);
  background:#101b1f;
  color:#8b8a82;
  font-size:10px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-note strong {
  color:#cdb07d;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project {
  min-width:0;
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid rgba(78,64,40,.78);
  border-radius:3px;
  background:linear-gradient(180deg,#0e1d23 0%,#0c191e 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.01),0 4px 10px rgba(0,0,0,.12);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project.ready {
  border-color:#8b6b34;
  box-shadow:inset 3px 0 0 #bc964c,0 4px 10px rgba(0,0,0,.12);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project.building {
  border-color:#725a31;
  background:linear-gradient(180deg,#142026 0%,#0d1a20 100%);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project.built {
  border-color:#476534;
  background:linear-gradient(180deg,#11231b 0%,#0e1c18 100%);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project-head h3 {
  margin:2px 0 0;
  color:#e4ded3;
  font:500 17px/1.2 Georgia,"Times New Roman",serif;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-state {
  flex:0 0 auto;
  padding:4px 7px;
  border:1px solid rgba(78,64,40,.58);
  background:#101b1f;
  color:#cdb07d;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project.built .farm-improvement-state {
  border-color:#476534;
  color:#aebd72;
  background:#14311c;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-description {
  margin:0;
  color:#928f86;
  font-size:10.5px;
  line-height:1.45;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-effect {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 9px;
  border:1px solid rgba(78,64,40,.48);
  background:#101b1f;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-effect small {
  color:#74736a;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-effect strong {
  color:#cdb07d;
  font-size:11px;
  text-align:right;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-progress {
  display:grid;
  gap:5px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-progress > div:first-child {
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#8b8a82;
  font-size:9.5px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-progress b {
  color:#cdb07d;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirements {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement {
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  min-height:48px;
  padding:6px 8px;
  border:1px solid rgba(78,64,40,.45);
  background:#101b1f;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement.condition {
  grid-template-columns:24px minmax(0,1fr);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement.ready {
  border-color:rgba(71,101,52,.72);
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement-icon {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:#bc964c;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement-icon :where(img,.jd-item-icon) {
  max-width:28px;
  max-height:28px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement strong {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#c9c4bb;
  font-size:10px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement small {
  display:block;
  margin-top:2px;
  color:#74736a;
  font-size:9px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirement > b {
  color:#cdb07d;
  font-size:10px;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-build-button {
  width:100%;
  min-height:38px;
  border-color:#8b6b34 !important;
  background:linear-gradient(180deg,#3b301b 0%,#241f17 100%) !important;
  color:#d8bd82 !important;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-build-button.completed {
  border-color:#476534 !important;
  background:#14311c !important;
  color:#aebd72 !important;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-empty {
  padding:14px;
  border:1px solid rgba(78,64,40,.48);
  background:#101b1f;
  color:#8b8a82;
}

body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-empty strong {
  display:block;
  margin-bottom:3px;
  color:#cdb07d;
}

@media (max-width:1180px) {
  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-hero {
    grid-template-columns:1fr;
  }
}

@media (max-width:760px) {
  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-project-grid,
  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvement-requirements {
    grid-template-columns:1fr;
  }

  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-current {
    grid-template-columns:1fr 1fr;
  }

  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-current > div:last-child {
    grid-column:1 / -1;
  }

  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-improvements-note {
    align-items:flex-start;
    flex-direction:column;
  }
}

/* JourneyDen UI source: styles/farming-seed-bag-upgrades-v101174.css | sha256:1166d673481ec1b38cecec9ae9ecd2cc16d48c987e76d2262b5770a51e1caeb8 */
/* JourneyDen V1.01.174 — Seed Bag Upgrades · Phase 3
   Functional multi-slot extension for the Farming-owned Seed Bag.
   Reuses the Fresh Premium EXACT materials and keeps Den construction ownership. */

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-summary > span {
  display: grid;
  gap: 1px;
  padding: 6px 7px;
  border: 1px solid rgba(78,64,40,.62);
  background: #101b1f;
  color: #85847c;
  font-size: 9px;
  line-height: 1.25;
}

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-summary b {
  color: #cdb07d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 500;
}

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry + .farming-seed-bag-entry {
  padding-top: 8px;
  border-top: 1px solid rgba(78,64,40,.42);
}

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry .farming-seed-bag-load,
body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry .farming-seed-bag-actions {
  min-width: 0;
}

body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry select,
body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry button {
  width: 100%;
  min-width: 0;
}

@media (max-width: 900px) {
  body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-summary > span {
    font-size: 12px;
  }
  body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-summary b {
    font-size: 15px;
  }
  body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry + .farming-seed-bag-entry {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 430px) {
  body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-summary {
    grid-template-columns: 1fr 1fr;
  }
  body.seed-bag-upgrades-v101174 #activitiesPage .farming-seed-bag-entry + .farming-seed-bag-entry {
    padding-top: 8px;
    border-top: 1px solid rgba(78,64,40,.42);
  }
}

/* JourneyDen UI source: styles/farming-seed-bag-polish-v101177.css | sha256:23e223781eb8d5d9caeab2b17eb82643d1d23871c8d6b00e693870209c46ef6d */
/* JourneyDen V1.01.177 — Seed Bag UI Integration · Phase 5
   Farming-only presentation polish. Mechanics remain owned by systems/farming.
   Uses the locked Fresh Premium EXACT palette and routes improvements back to
   The Den → Construction rather than introducing Farming-owned upgrades. */

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag {
  gap: 9px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header > div {
  min-width: 0;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header h3 {
  margin: 2px 0 0 !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header p {
  margin: 4px 0 0;
  color: var(--exact-muted, #74736a) !important;
  font-size: 10px;
  line-height: 1.42;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-improve-farm-button {
  min-height: 32px;
  padding-inline: 10px !important;
  white-space: nowrap;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary > span {
  display: grid !important;
  gap: 1px !important;
  min-width: 0;
  padding: 6px 7px !important;
  border: 1px solid var(--exact-line-faint, rgba(78,64,40,.42)) !important;
  background: var(--exact-surface-cool, #0e1a20) !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary small {
  overflow: hidden;
  color: var(--exact-muted, #74736a) !important;
  font-size: 8px !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary b {
  overflow: hidden;
  color: var(--exact-gold-text, #cdb07d) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-entry {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--exact-line-faint, rgba(78,64,40,.42));
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(16,27,31,.98), rgba(12,23,27,.98));
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-entry.status-low {
  border-color: rgba(188,150,76,.58);
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-entry.status-full {
  border-color: rgba(111,131,57,.58);
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-slot-head {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-icon {
  width: 30px !important;
  height: 30px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-empty-icon {
  color: var(--exact-gold-deep, #82622e);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-slot-copy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1px 5px;
  min-width: 0;
  align-items: baseline;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-slot-copy small {
  grid-column: 1;
  grid-row: 1;
  color: var(--exact-muted, #74736a) !important;
  font-size: 8px !important;
  text-transform: uppercase;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-slot-copy strong {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  color: var(--exact-text-strong, #e4ded3) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-state {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  color: var(--exact-gold-text, #cdb07d) !important;
  font-size: 8px !important;
  white-space: nowrap;
}

body.seed-bag-polish-v101177 #activitiesPage .status-full .farming-seed-bag-state {
  color: #9eae73 !important;
}

body.seed-bag-polish-v101177 #activitiesPage .status-low .farming-seed-bag-state {
  color: #d0a757 !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter > div:first-child {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--exact-muted, #74736a);
  font-size: 8px;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter > div:first-child strong {
  color: var(--exact-gold-text, #cdb07d);
  font-size: 10px;
  font-weight: 600;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-progress {
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(78,64,40,.55);
  background: #091317;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--exact-gold-deep, #82622e), var(--exact-gold, #bc964c));
}

body.seed-bag-polish-v101177 #activitiesPage .status-full .farming-seed-bag-progress > span {
  background: linear-gradient(90deg, #56672f, var(--exact-green, #6f8339));
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter > small,
body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-empty-copy,
body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-no-stock {
  color: var(--exact-muted, #74736a) !important;
  font-size: 8px !important;
  line-height: 1.35;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-actions {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 5px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-actions button,
body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load button {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 5px 7px !important;
  font-size: 9px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load {
  display: grid !important;
  gap: 5px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--exact-muted, #74736a) !important;
  font-size: 8px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load select {
  width: 100%;
  min-width: 0;
  min-height: 31px !important;
  font-size: 9px !important;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-footer {
  display: grid;
  gap: 2px;
  padding-top: 7px;
  border-top: 1px solid var(--exact-line-faint, rgba(78,64,40,.42));
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-footer strong {
  color: var(--exact-gold-text, #cdb07d);
  font-size: 9px;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-footer span {
  color: var(--exact-muted, #74736a);
  font-size: 8px;
  line-height: 1.4;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-automation-paused {
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 7px !important;
  align-items: center;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-automation-paused > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.seed-bag-polish-v101177 #activitiesPage .farming-manage-seed-bag {
  min-width: 104px;
  min-height: 31px;
  padding-inline: 8px !important;
  white-space: nowrap;
}

/* Keep the approved wide-desktop Seed Vault rail geometry. The compartment
   list scrolls internally once the farm reaches several slots rather than
   pushing the entire plot board out of alignment. */
@media (min-width: 1440px) {
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header {
    grid-template-columns: 1fr;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-improve-farm-button {
    width: 100%;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary {
    grid-template-columns: 1fr !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary > span {
    display: flex !important;
    gap: 6px !important;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 6px !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-grid {
    max-height: 326px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(188,150,76,.32) transparent;
  }
}

@media (max-width: 1439px) and (min-width: 701px) {
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header p,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary small,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-slot-copy small,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-state,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter > div:first-child,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter > small,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-empty-copy,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-no-stock,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load label,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-footer span {
    font-size: 12px !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary b,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-slot-copy strong {
    font-size: 15px !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-meter > div:first-child strong,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-footer strong {
    font-size: 12px !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-actions button,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load button,
  body.seed-bag-polish-v101177 #activitiesPage .farming-improve-farm-button,
  body.seed-bag-polish-v101177 #activitiesPage .farming-manage-seed-bag,
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-load select {
    min-height: 44px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 700px) {
  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-header {
    grid-template-columns: 1fr;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-improve-farm-button {
    width: 100%;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary {
    grid-template-columns: 1fr 1fr !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-bag-summary > span:last-child {
    grid-column: 1 / -1;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-seed-grid {
    grid-template-columns: 1fr !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-automation-paused {
    grid-template-columns: 1fr !important;
  }

  body.seed-bag-polish-v101177 #activitiesPage .farming-manage-seed-bag {
    width: 100%;
  }
}

/* JourneyDen UI source: styles/ui-navigation-repair-v101179.css | sha256:eba5d4017b40de4f57f8738f854bd86e3d25fa1f60664629b9434a91056ab6fb */
/* JourneyDen V1.01.179 — Activities UI repair + Combat/Expeditions split
   Repair layer only. The Fresh Premium EXACT palette remains canonical.
   - Desktop Activities shows every activity skill directly instead of reusing
     the mobile-only picker control.
   - Tablet/phone keep the custom skill picker and it is usable through 900px.
   - Combat and Expeditions are independent navigation owners again. */

/* -------------------------------------------------------------------------
   Activities — desktop: visible skill board, no broken top-right mobile picker.
   ------------------------------------------------------------------------- */
@media (min-width:901px){
  body.ui-navigation-repair-v101179 #activitiesPage{
    position:relative !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage > .activity-master-heading{
    min-height:0 !important;
    padding-right:0 !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .activity-layout{
    position:static !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .activity-sidebar-panel{
    position:static !important;
    z-index:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:8px 10px 10px !important;
    border:1px solid rgba(78,64,40,.74) !important;
    border-radius:3px !important;
    background:linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.012),0 5px 14px rgba(0,0,0,.12) !important;
    overflow:visible !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .activity-sidebar-panel .panel-heading{
    display:flex !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:8px !important;
    min-width:0 !important;
    padding:0 1px 1px !important;
    border:0 !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .activity-sidebar-panel .panel-heading .eyebrow{
    color:#98743a !important;
    font-size:9px !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .activity-sidebar-panel .panel-heading strong{
    color:#d6c08d !important;
    font:500 13px/1.2 Georgia,"Times New Roman",serif !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs.skill-tabs{
    display:grid !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
    padding:0 !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs > button{
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    padding:6px 8px !important;
    text-align:left !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs .skill-tab-icon{
    width:28px !important;
    height:28px !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs b{
    font-size:10px !important;
    white-space:normal !important;
    line-height:1.1 !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs small{
    margin-top:2px !important;
    font-size:9px !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .mobile-activity-skill-select{
    display:none !important;
  }
}

/* 1024-class screens: keep all eight activity skills visible without a scroll strip. */
@media (min-width:901px) and (max-width:1279px){
  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs.skill-tabs{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* -------------------------------------------------------------------------
   Activities — tablet/phone: the custom picker must actually open.
   The historical picker stylesheet disabled it above 760px while later layouts
   reused its button through 900px, which made 761–900px impossible to switch.
   ------------------------------------------------------------------------- */
@media (max-width:900px){
  body.ui-navigation-repair-v101179 #activitiesPage .activity-sidebar-panel{
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 8px !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage #activitySkillTabs.skill-tabs,
  body.ui-navigation-repair-v101179 #activitiesPage .activity-sidebar-panel .panel-heading{
    display:none !important;
  }

  body.ui-navigation-repair-v101179 #activitiesPage .mobile-activity-skill-select{
    display:grid !important;
  }

  body.ui-navigation-repair-v101179 .mobile-activity-skill-picker:not([hidden]){
    display:flex !important;
  }
}

/* Independent owner pages do not need an internal Combat/Expedition switch. */
body.ui-navigation-repair-v101179 #combatPage > .section-owner-tabs,
body.ui-navigation-repair-v101179 #expeditionsPage > .section-owner-tabs{
  display:none !important;
}

/* =========================================================
   Expeditions — independent owner-page cleanup
   ========================================================= */
body.ui-navigation-repair-v101179 .main-navigation [data-page="expeditionsPage"] .nav-item-icon {
  background-image: url('../assets/icons/interface/navigation/expeditions.webp') !important;
}

/* Expeditions is no longer nested under Combat. */
body.ui-navigation-repair-v101179 #expeditionsPage > .section-heading::before {
  content: "Expeditions" !important;
}

/* The Phase 4 owner layout made the log rail too narrow for the legacy
   132px region artwork, causing names such as Whispering Woods to wrap one
   syllable per line at common desktop widths. Give the independent owner
   enough rail width and a slightly tighter image column. */
@media (min-width:1101px) {
  body.ui-navigation-repair-v101179 #expeditionsPage .expedition-log-layout {
    grid-template-columns: minmax(350px, .94fr) minmax(0, 2.06fr) !important;
  }
  body.ui-navigation-repair-v101179 #expeditionsPage .exp-log-region-card {
    grid-template-columns: 108px minmax(0, 1fr) !important;
  }
  body.ui-navigation-repair-v101179 #expeditionsPage .exp-log-region-art {
    min-width: 0 !important;
  }
  body.ui-navigation-repair-v101179 #expeditionsPage .exp-log-card-title strong {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* JourneyDen UI source: styles/ui-full-repair-v101180.css | sha256:24ef6574fa1c9e5e13046923819fab4fa8aa287e815479b78e3ce550c4045fe4 */
/* JourneyDen V1.01.180 — full populated UI repair.
   Loaded last on purpose: fixes visibility/hierarchy regressions without changing gameplay. */

/* Production skills: when something is running, its live status/progress belongs directly
   beneath the skill overview, before category/tier navigation. */
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host:not([hidden]) {
  display: block !important;
  min-width: 0;
  margin: 0 !important;
}
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host > .smithing-active-panel {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas:
    "current stop"
    "progress progress"
    "materials materials" !important;
  gap: 9px 12px !important;
  align-items: center !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(78,64,40,.72) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg,#141f22 0%,#0e1a1e 100%) !important;
  box-shadow: none !important;
}
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-current-activity { grid-area: current !important; min-width:0; }
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-progress { grid-area: progress !important; margin:0 !important; min-width:0; }
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-materials { grid-area: materials !important; min-width:0; margin:0 !important; }
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-stop { grid-area: stop !important; align-self:center !important; min-width:112px !important; }
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-heading { margin-bottom:0 !important; }
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-materials-compact { max-height:100px; overflow:auto; }
body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .progress-track { min-height:7px !important; }

/* Combat desktop: styles must never be crushed into a narrow 4/5-column side box.
   The command deck becomes two readable full-width bands; stance cards can breathe. */
@media (min-width: 901px) {
  body.ui-full-repair-v101180 #combatPage .combat-command-deck {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body.ui-full-repair-v101180 #combatPage .combat-style-grid {
    grid-template-columns: repeat(4,minmax(150px,1fr)) !important;
    gap: 7px !important;
  }
  body.ui-full-repair-v101180 #combatPage .combat-style-button {
    min-width: 0 !important;
    min-height: 62px !important;
    grid-template-columns: 34px minmax(0,1fr) !important;
    padding: 8px 10px !important;
  }
  body.ui-full-repair-v101180 #combatPage .combat-style-button > div,
  body.ui-full-repair-v101180 #combatPage .combat-style-button strong,
  body.ui-full-repair-v101180 #combatPage .combat-style-button small,
  body.ui-full-repair-v101180 #combatPage .combat-style-button b {
    min-width: 0 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* Activity picker: never break a skill name across lines on phone/tablet. */
@media (max-width: 900px) {
  body.ui-full-repair-v101180 #activitiesPage .mobile-activity-skill-field,
  body.ui-full-repair-v101180 #activitiesPage .mobile-activity-skill-picker-button {
    width: 100% !important;
    min-width: 0 !important;
  }
  body.ui-full-repair-v101180 #mobileActivitySkillPickerValue {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host > .smithing-active-panel {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "current stop"
      "progress progress"
      "materials materials" !important;
    padding: 10px !important;
  }
  body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-stop {
    min-width: 84px !important;
  }
  body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-materials-compact {
    max-height:none;
    overflow:visible;
  }
}

@media (max-width: 560px) {
  body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host > .smithing-active-panel {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "current"
      "progress"
      "materials"
      "stop" !important;
  }
  body.ui-full-repair-v101180 #activitiesPage .production-active-activity-host .smithing-active-stop {
    width:100% !important;
    min-height:44px !important;
  }
}

/* Phase 2's generic progress selector accidentally treated the whole production
   progress component as the 6px trough, clipping its label and percentage.
   Restore the wrapper; only its nested .progress-track is the trough. */
body.ui-full-repair-v101180 #activitiesPage .smithing-active-progress {
  display: grid !important;
  gap: 6px !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.ui-full-repair-v101180 #activitiesPage .smithing-active-progress .progress-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 16px !important;
  color: #a79574 !important;
  font-size: 10px !important;
}

/* The exact-component progress selector also accidentally matched the entire
   Den > Progress tab panel (.den-tab-panel-progress), collapsing the whole
   Progress workspace to a 6px bar. Restore it as a normal Den tab container. */
body.ui-full-repair-v101180 #denPage .den-tab-panel-progress {
  display: grid !important;
  gap: 8px !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.ui-full-repair-v101180 #denPage .den-tab-panel-progress[hidden] {
  display: none !important;
}

/* JourneyDen UI source: styles/ui-activities-farming-repair-v101181.css | sha256:3c91b3d95fb456e090bbf1bb9132f658708893de23f1f52981b72558f3acd30d */
/* JourneyDen V1.01.181 — Activities + Farming UI repair.
   Loaded last intentionally. This removes the old Farming-only absolute skill
   selector and makes every Activity use one reliable responsive selector. */

/* Desktop/tablet landscape: one full-width activity selector band. The old
   V1.01.163 Farming exception had higher selector specificity and could force
   the mobile dropdown + 8 skill buttons into a 216px absolute rail. */
@media (min-width:901px){
  body.ui-activities-farming-repair-v101181 #activitiesPage,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming{
    position:relative !important;
  }

  body.ui-activities-farming-repair-v101181 #activitiesPage .activity-layout,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-layout{
    position:static !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.ui-activities-farming-repair-v101181 #activitiesPage .activity-sidebar-panel,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel{
    position:static !important;
    inset:auto !important;
    z-index:auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:8px 10px 10px !important;
    border:1px solid rgba(78,64,40,.74) !important;
    border-radius:3px !important;
    background:linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.012),0 5px 14px rgba(0,0,0,.12) !important;
    overflow:visible !important;
  }

  body.ui-activities-farming-repair-v101181 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel .panel-heading{
    display:flex !important;
    align-items:baseline !important;
    gap:8px !important;
    min-width:0 !important;
    padding:0 1px 1px !important;
    border:0 !important;
  }

  body.ui-activities-farming-repair-v101181 #activitiesPage #activitySkillTabs.skill-tabs,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming #activitySkillTabs.skill-tabs{
    position:static !important;
    display:grid !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    overflow:visible !important;
    padding:0 !important;
  }

  body.ui-activities-farming-repair-v101181 #activitiesPage #activitySkillTabs > button,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming #activitySkillTabs > button{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    height:auto !important;
    padding:6px 8px !important;
  }

  body.ui-activities-farming-repair-v101181 #activitiesPage .mobile-activity-skill-select,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-select{
    display:none !important;
  }

  /* Farming previously reserved 230px for the broken absolute dropdown. */
  body.ui-activities-farming-repair-v101181 #activitiesPage .fresh-farming-page-heading,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .fresh-farming-page-heading{
    padding-right:0 !important;
  }
}

@media (min-width:901px) and (max-width:1279px){
  body.ui-activities-farming-repair-v101181 #activitiesPage #activitySkillTabs.skill-tabs,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming #activitySkillTabs.skill-tabs{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

/* Phone/tablet portrait: exactly one selector — the custom picker. */
@media (max-width:900px){
  body.ui-activities-farming-repair-v101181 #activitiesPage .activity-sidebar-panel,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel{
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 0 8px !important;
  }
  body.ui-activities-farming-repair-v101181 #activitiesPage #activitySkillTabs.skill-tabs,
  body.ui-activities-farming-repair-v101181 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming #activitySkillTabs.skill-tabs,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel .panel-heading{
    display:none !important;
  }
  body.ui-activities-farming-repair-v101181 #activitiesPage .mobile-activity-skill-select,
  body.ui-activities-farming-repair-v101181.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-select{
    position:static !important;
    display:grid !important;
    width:100% !important;
  }
}

/* Farming summary has six live values. The old five-column template forced the
   Gear Bonuses tile into a broken extra row/overlap on wide screens. */
@media (min-width:1280px){
  body.ui-activities-farming-repair-v101181 #activitiesPage .farming-stat-strip{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}

/* Keep the contract readable rather than squeezing its actions/rewards into
   narrow columns at ordinary desktop widths. */
@media (min-width:901px) and (max-width:1399px){
  body.ui-activities-farming-repair-v101181 #activitiesPage .farming-contract-card{
    grid-template-columns:minmax(280px,1.6fr) minmax(190px,.9fr) minmax(250px,1.2fr) !important;
  }
  body.ui-activities-farming-repair-v101181 #activitiesPage .farming-contract-actions{
    grid-column:1/-1 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Defensive geometry: no activity selector is ever allowed to collapse into
   vertical 20px slivers again. */
body.ui-activities-farming-repair-v101181 #activitySkillTabs > button{
  writing-mode:horizontal-tb !important;
  overflow:hidden !important;
}
body.ui-activities-farming-repair-v101181 #activitySkillTabs b,
body.ui-activities-farming-repair-v101181 #activitySkillTabs small{
  word-break:normal !important;
  overflow-wrap:normal !important;
}

/* JourneyDen UI source: styles/den-farming-room-v101182.css | sha256:70f87fda53cc22736d42c81fd1791e321b68482342581ef06e5275a83ab86bbf */
/* JourneyDen V1.01.182 — Farming room integration.
   Adds Farm as a first-class Den Rooms utility without changing Farm Improvement ownership. */

@media (min-width: 1280px) {
  body.den-farming-room-v101182 #denPage .den-room-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

body.den-farming-room-v101182 #denPage [data-den-room-card="farm"] .den-room-icon img {
  object-fit: contain;
}

/* JourneyDen UI source: styles/farm-room-storage-upgrade-style-v101183.css | sha256:e44658d1ea1dccfbe24371385bafd84defe1a4e5ee4dcb71d9fc0ccb1c04fdd7 */
/* JourneyDen V1.01.183 — Farm room upgrades use the Storage upgrade presentation. */
body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-storage-style-grid {
  grid-template-columns: minmax(0, 1fr);
}
body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-storage-style-upgrade {
  margin: 0;
}
body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-upgrade-built-history {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:8px 11px;
  border:1px solid rgba(78,64,40,.48);
  background:#101b1f;
}
body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-upgrade-built-history small {
  flex:0 0 auto;
  color:#cdb07d;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-upgrade-built-history span {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8b8a82;
  font-size:10px;
}
@media (max-width:760px) {
  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-upgrade-built-history {
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  body.farm-improvements-v101172 #denPage .den-tab-panel-den-projects .farm-upgrade-built-history span {
    white-space:normal;
  }
}

/* JourneyDen UI source: styles/activity-skill-drawer-v101186.css | sha256:8f25f5824c319c9586deb6a84435b425b0d764f850ddccfcc05533d77ccc3a7c */
/* JourneyDen V1.01.186 — Activity skill drawer.
   Replaces the wide permanent 8-skill strip with a compact current-skill
   switcher and a temporary skill drawer so the activity workspace keeps its
   full width. Loaded last intentionally. */

body.activity-skill-drawer-v101186 #activitiesPage .activity-layout,
body.activity-skill-drawer-v101186.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
}

body.activity-skill-drawer-v101186 #activitiesPage .activity-sidebar-panel,
body.activity-skill-drawer-v101186.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel{
  position:static !important;
  inset:auto !important;
  z-index:auto !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.activity-skill-drawer-v101186 #activitiesPage .activity-sidebar-panel > .panel-heading,
body.activity-skill-drawer-v101186 #activitiesPage #activitySkillTabs.skill-tabs{
  display:none !important;
}

body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-select.activity-skill-switcher,
body.activity-skill-drawer-v101186.fresh-premium-v101163 #activitiesPage.activity-mode-farming .mobile-activity-skill-select.activity-skill-switcher{
  position:relative !important;
  inset:auto !important;
  z-index:auto !important;
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:62px !important;
  margin:0 !important;
  padding:8px 10px !important;
  border:1px solid rgba(78,64,40,.74) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#141e21 0%,#101a1e 100%) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.018),0 2px 8px rgba(0,0,0,.12) !important;
}

body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-icon{
  width:42px !important;
  height:42px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(175,132,57,.42) !important;
  border-radius:50% !important;
  background:#0b161b !important;
  overflow:hidden !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-icon img,
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-icon-art{
  width:30px !important;
  height:30px !important;
  object-fit:contain !important;
}

body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-copy{
  min-width:0 !important;
  display:grid !important;
  gap:1px !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-copy small{
  color:#9f8a60 !important;
  font-size:10px !important;
  line-height:1.1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-copy strong{
  overflow:hidden !important;
  color:#ead4a0 !important;
  font-family:var(--jd-serif,Georgia,serif) !important;
  font-size:16px !important;
  line-height:1.12 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .activity-skill-switcher-meta{
  color:#9d988b !important;
  font-size:11px !important;
  line-height:1.15 !important;
}

body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-field{
  position:relative !important;
  display:block !important;
  min-width:136px !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-picker-button{
  width:auto !important;
  min-width:136px !important;
  min-height:44px !important;
  justify-content:center !important;
  gap:10px !important;
  padding:8px 12px !important;
  border:1px solid rgba(179,137,59,.58) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#1b2425,#11191d) !important;
  color:#dfc68e !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:650 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.025) !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-picker-button:hover{
  border-color:rgba(205,160,70,.78) !important;
  background:linear-gradient(180deg,#222a28,#151d20) !important;
}
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-picker-chevron{
  font-size:16px !important;
  transform:none !important;
}

/* The compatibility select remains visually hidden at every breakpoint. */
body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
  border:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
}

body.activity-skill-drawer-v101186 .mobile-activity-skill-picker[hidden]{display:none !important;}
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker{
  position:fixed !important;
  inset:0 !important;
  z-index:7200 !important;
  display:flex !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-backdrop{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:rgba(3,9,12,.7) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-panel{
  background:linear-gradient(180deg,#121e23 0%,#0b161b 100%) !important;
  border-color:rgba(174,132,56,.58) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.025) !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-heading{
  border-bottom-color:rgba(174,132,56,.28) !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-heading h3{
  color:#ead4a0 !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-list{
  scrollbar-color:rgba(188,145,62,.48) rgba(0,0,0,.18) !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice{
  min-width:0 !important;
  border-color:rgba(103,86,54,.46) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#152024,#10191d) !important;
  color:#c8c1b0 !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice.active{
  border-color:rgba(205,159,68,.76) !important;
  background:linear-gradient(180deg,#3a3020 0%,#211d17 100%) !important;
  box-shadow:inset 3px 0 #c59849,inset 0 1px rgba(255,240,194,.055) !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-icon{
  border-color:rgba(156,119,52,.4) !important;
  background:#0b1519 !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-copy b{
  color:#dbc694 !important;
  font-size:13px !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-copy small{
  color:#9a9589 !important;
  font-size:10px !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-progress{
  grid-column:2 / -1 !important;
  height:3px !important;
  overflow:hidden !important;
  margin-top:4px !important;
  background:#0a1114 !important;
  border:1px solid rgba(82,70,47,.45) !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-progress > span{
  display:block !important;
  height:100% !important;
  background:#b98a3b !important;
}
body.activity-skill-drawer-v101186 .mobile-activity-skill-choice.skill-locked .mobile-activity-skill-choice-progress{
  opacity:.25 !important;
}

/* Desktop/laptop: a temporary drawer overlays the left edge of the workspace
   instead of stealing permanent width from Activities. */
@media (min-width:901px){
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker{
    align-items:stretch !important;
    justify-content:flex-start !important;
    padding:0 !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-backdrop{
    left:var(--exact-sidebar-width,var(--fresh-sidebar-width,214px)) !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-panel{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:var(--exact-sidebar-width,var(--fresh-sidebar-width,214px)) !important;
    width:310px !important;
    max-width:calc(100vw - var(--exact-sidebar-width,var(--fresh-sidebar-width,214px)) - 24px) !important;
    max-height:none !important;
    border-top:0 !important;
    border-bottom:0 !important;
    border-left:1px solid rgba(174,132,56,.58) !important;
    border-right:1px solid rgba(174,132,56,.58) !important;
    border-radius:0 5px 5px 0 !important;
    animation:jd-activity-drawer-in .16s ease-out both !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-list{
    grid-template-columns:1fr !important;
    gap:6px !important;
    padding:10px 12px 14px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-choice{
    min-height:68px !important;
    grid-template-columns:42px minmax(0,1fr) 14px !important;
    gap:9px !important;
    padding:8px 9px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-icon{
    width:40px !important;
    height:40px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-icon img,
  body.activity-skill-drawer-v101186 .mobile-activity-skill-choice-icon-art{
    width:30px !important;
    height:30px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-footer{
    display:none !important;
  }
}

@keyframes jd-activity-drawer-in{
  from{transform:translateX(-18px);opacity:.75;}
  to{transform:translateX(0);opacity:1;}
}

/* Phone/tablet: keep the same control but present the picker as a deliberate
   bottom sheet. */
@media (max-width:900px){
  body.activity-skill-drawer-v101186 #activitiesPage .activity-sidebar-panel,
  body.activity-skill-drawer-v101186.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel{
    margin:0 0 8px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:10px max(8px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-panel{
    position:relative !important;
    width:min(100%,560px) !important;
    max-height:min(84dvh,720px) !important;
    border-radius:7px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-list{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:9px !important;
  }
  body.activity-skill-drawer-v101186 .mobile-activity-skill-choice{
    min-height:66px !important;
    grid-template-columns:34px minmax(0,1fr) 12px !important;
    padding:7px !important;
  }
}

@media (max-width:600px){
  body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-select.activity-skill-switcher{
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:8px 10px !important;
  }
  body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-field{
    grid-column:1 / -1 !important;
    min-width:0 !important;
  }
  body.activity-skill-drawer-v101186 #activitiesPage .mobile-activity-skill-picker-button{
    width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width:340px){
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-list{
    grid-template-columns:1fr !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.activity-skill-drawer-v101186 .mobile-activity-skill-picker-panel{animation:none !important;}
}

/* Keep the overlay padding inside the viewport; without border-box, fixed
   inset geometry can grow beyond phone height by the sheet padding. */
body.activity-skill-drawer-v101186 .mobile-activity-skill-picker{
  box-sizing:border-box !important;
}

/* JourneyDen UI source: styles/expedition-clickability-v101187.css | sha256:8d256ea1b1303b60a9da0b91213547df45d60a4a33a0792741fd88954abcaf23 */
/* JourneyDen V1.01.187 — Expedition clickability repair.
   Expedition log entries remain inspectable even while the route is locked.
   Locked state may disable entering the run, but must never disable selecting
   the expedition or opening its detail/loot information. */
body.expedition-clickability-v101187 #mainNavigation [data-page="expeditionsPage"],
body.expedition-clickability-v101187 #mobileMoreNavigation [data-page="expeditionsPage"],
body.expedition-clickability-v101187 #expeditionsPage .exp-log-region-card{
  pointer-events:auto !important;
  cursor:pointer !important;
}

body.expedition-clickability-v101187 #expeditionsPage .exp-log-region-card.locked{
  cursor:pointer !important;
}

/* JourneyDen UI source: styles/phone-ui-repair-v101196.css | sha256:a2f5d102fd6766c391a989d4ab35822346876d0b4c3c50d3784000999f2fe734 */
/* ========================================================================== 
   JourneyDen V1.01.196 — Phone UI Repair
   Phone-only layout correction after a visual 320/360/390/430 px audit.
   Desktop/tablet gameplay and data are intentionally unchanged.
   ========================================================================== */

@media (max-width: 430px) {
  /* -----------------------------------------------------------------------
     Global phone density — get players to the actual page content sooner.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 main {
    padding: 7px !important;
  }

  body.phone-ui-repair-v101196 .page > .section-heading.reference-page-heading,
  body.phone-ui-repair-v101196 .page > .reference-page-heading,
  body.phone-ui-repair-v101196 #equipmentPage > .equipment-page-heading {
    min-height: 0 !important;
    margin: 0 0 7px !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  body.phone-ui-repair-v101196 .reference-page-heading-title {
    gap: 7px !important;
    min-width: 0 !important;
  }

  body.phone-ui-repair-v101196 .reference-page-heading-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  body.phone-ui-repair-v101196 .reference-page-heading-icon img {
    width: 24px !important;
    height: 24px !important;
  }

  body.phone-ui-repair-v101196 .reference-page-heading h2,
  body.phone-ui-repair-v101196 .section-heading h2 {
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.05 !important;
  }

  body.phone-ui-repair-v101196 .reference-page-heading .eyebrow {
    font-size: 8px !important;
  }

  body.phone-ui-repair-v101196 .reference-page-heading p,
  body.phone-ui-repair-v101196 #equipmentPageDescription {
    display: none !important;
  }

  /* Compact one-row Chapter I bar outside The Den. The full Journal remains
     available from The Den / Progress instead of consuming every page top. */
  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker.current-journey-tracker {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    min-height: 45px !important;
    margin: 5px 7px 0 !important;
    padding: 6px 7px 6px 9px !important;
    gap: 7px !important;
    border-radius: 9px !important;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-icon,
  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-copy > .eyebrow,
  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-hint,
  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-progress,
  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-count,
  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-actions .secondary {
    display: none !important;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-copy {
    display: grid !important;
    gap: 1px !important;
    min-width: 0 !important;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-copy::before {
    content: "Chapter I · Current objective";
    color: #9f8d6d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-copy > strong {
    overflow: hidden !important;
    color: #dec184 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyTracker .current-journey-actions {
    display: block !important;
    grid-column: auto !important;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyAction {
    min-width: 44px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
    font-size: 0 !important;
    white-space: nowrap !important;
  }

  body.phone-ui-repair-v101196:not(.den-page-active) #currentJourneyAction::after {
    content: "Go ›";
    font-size: 10px;
    font-weight: 800;
  }

  /* -----------------------------------------------------------------------
     The Den — robust five-tab grid and the critical Progress width repair.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 #denPage #denSectionTabs.den-section-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body.phone-ui-repair-v101196 #denPage #denSectionTabs .den-section-tab {
    width: auto !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 5px 3px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  body.phone-ui-repair-v101196 #denTab-overview,
  body.phone-ui-repair-v101196 #denTab-rooms,
  body.phone-ui-repair-v101196 #denTab-den-projects {
    grid-column: span 2 !important;
  }

  body.phone-ui-repair-v101196 #denTab-skill-levels,
  body.phone-ui-repair-v101196 #denTab-progress {
    grid-column: span 3 !important;
  }

  /* V1.01.143 used a flex declaration with higher ownership specificity than
     the old Den mobile rule. Explicitly restore a true one-column phone card. */
  body.phone-ui-repair-v101196.structure-ownership-v101143.den-home-hub-v10177 #denPage #progressPage .den-guidance-card,
  body.phone-ui-repair-v101196.structure-ownership-v101143.den-home-hub-v10177 #denPage #progressPage .den-guidance-main,
  body.phone-ui-repair-v101196.structure-ownership-v101143.den-home-hub-v10177 #denPage #progressPage .den-guidance-copy,
  body.phone-ui-repair-v101196.structure-ownership-v101143.den-home-hub-v10177 #denPage #progressPage .den-guidance-progress {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.phone-ui-repair-v101196.structure-ownership-v101143.den-home-hub-v10177 #denPage #progressPage .den-guidance-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.phone-ui-repair-v101196 #denPage #progressPage .den-guidance-copy > *,
  body.phone-ui-repair-v101196 #denPage #progressPage .den-guidance-progress > * {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body.phone-ui-repair-v101196 #denPage #progressPage .den-guidance-copy small {
    line-height: 1.45 !important;
  }

  body.phone-ui-repair-v101196 #denPage #progressPage .den-guidance-progress {
    text-align: left !important;
  }

  /* -----------------------------------------------------------------------
     World Projects — stacked glance/action layout instead of compressed row.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance-copy,
  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance-progress,
  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance-actions {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance-copy h3 {
    margin: 1px 0 2px !important;
    font-size: 17px !important;
  }

  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-glance-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 6px !important;
    white-space: normal !important;
  }

  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-hub-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.phone-ui-repair-v101196 #worldProjectsPage .den-world-project-hub-heading > button {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* -----------------------------------------------------------------------
     Activities — remove duplicated skill identity and keep primary filters sane.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 #activitiesPage .mobile-skill-training-summary {
    padding: 7px 8px !important;
    gap: 5px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .mobile-skill-training-summary .mobile-skill-summary-head {
    display: none !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .mobile-skill-training-summary .mobile-skill-summary-xp,
  body.phone-ui-repair-v101196 #activitiesPage .mobile-skill-training-summary .mobile-skill-summary-meta {
    font-size: 9px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .activity-quick-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .activity-main-filters,
  body.phone-ui-repair-v101196 #activitiesPage .activity-availability-nav,
  body.phone-ui-repair-v101196 #activitiesPage .activity-availability-chips {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .activity-availability-chips {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .activity-availability-chips .activity-filter-chip {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 5px 4px !important;
    line-height: 1.1 !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .activity-availability-chips .activity-filter-chip span {
    display: block !important;
    overflow: hidden !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .activity-availability-chips .activity-filter-chip small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 8px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage #activityFilterToggle {
    min-width: 68px !important;
    min-height: 44px !important;
    padding: 5px 6px !important;
    font-size: 9px !important;
  }

  /* Smithing: phones now require Category -> Material before recipe rows. */
  body.phone-ui-repair-v101196 #activitiesPage .smithing-mobile-browse-prompt {
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 13px 11px;
    border: 1px solid rgba(177, 121, 45, .42);
    border-radius: 6px;
    background: rgba(4, 10, 12, .88);
    text-align: left;
  }

  body.phone-ui-repair-v101196 #activitiesPage .smithing-mobile-browse-prompt strong {
    color: #dec184;
    font-size: 13px;
  }

  body.phone-ui-repair-v101196 #activitiesPage .smithing-mobile-browse-prompt span {
    color: #90836f;
    font-size: 10px;
    line-height: 1.4;
  }

  /* -----------------------------------------------------------------------
     Combat — readable 2x2 combat skill card grid.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 #combatPage .combat-skill-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body.phone-ui-repair-v101196 #combatPage .combat-skill-overview-card {
    min-height: 60px !important;
    padding: 7px !important;
  }

  body.phone-ui-repair-v101196 #combatPage .combat-skill-overview-card .skill-overview-main {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  body.phone-ui-repair-v101196 #combatPage .combat-skill-overview-card .skill-overview-copy strong {
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* -----------------------------------------------------------------------
     Expeditions — labels must fit; detail navigation becomes a readable 2x2.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 #expeditionsPage .exp-log-filter-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  body.phone-ui-repair-v101196 #expeditionsPage .exp-log-filter-tabs button {
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 4px 2px !important;
    overflow: hidden !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.phone-ui-repair-v101196 #expeditionsPage .exp-log-detail-tabs {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 5px 0 !important;
  }

  body.phone-ui-repair-v101196 #expeditionsPage .exp-log-detail-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 5px 4px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* -----------------------------------------------------------------------
     Farming + Equipment — secondary management areas fold on small phones.
     The toggles are inserted by render.js and remember state during the session.
     ----------------------------------------------------------------------- */
  body.phone-ui-repair-v101196 .phone-section-fold-toggle {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 7px 0 4px !important;
    padding: 7px 9px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border: 1px solid rgba(177, 121, 45, .35) !important;
    background: rgba(8, 17, 20, .92) !important;
    color: #cdb47e !important;
    font-size: 10px !important;
    text-align: left !important;
  }

  body.phone-ui-repair-v101196 .phone-section-fold-toggle::after {
    content: "▾";
    flex: 0 0 auto;
  }

  body.phone-ui-repair-v101196 .phone-section-fold-toggle[aria-expanded="false"]::after {
    content: "›";
  }

  body.phone-ui-repair-v101196 .phone-fold-target.phone-fold-collapsed {
    display: none !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-source-note {
    display: none !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-plot-grid {
    gap: 7px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-loadout-tabs {
    gap: 4px !important;
    margin-bottom: 7px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-loadout-tabs button {
    min-width: 0 !important;
    padding: 6px 5px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-loadout-tabs button small {
    display: none !important;
  }
}

/* At slightly wider phones keep the critical layout repairs but allow the
   normal page descriptions / spacing to breathe again. */
@media (min-width: 431px) {
  body.phone-ui-repair-v101196 .phone-section-fold-toggle {
    display: none !important;
  }
  body.phone-ui-repair-v101196 .phone-fold-target.phone-fold-collapsed {
    display: block !important;
  }
}

@media (max-width: 430px) {
  /* Final specificity guard for the Progress guidance card itself. Older
     premium layers gave this card a two-column template (content + actions),
     which could reserve ~236px for buttons and leave the copy at 0–88px. */
  body.phone-ui-repair-v101196 #denPage #progressPage #denGuidanceCard.den-guidance-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.phone-ui-repair-v101196 #denPage #progressPage #denGuidanceCard .den-guidance-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 5px !important;
  }

  body.phone-ui-repair-v101196 #denPage #progressPage #denGuidanceCard .den-guidance-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 6px 5px !important;
    white-space: normal !important;
  }
}

@media (max-width: 430px) {
  /* Fold targets need to beat older page-specific !important display rules. */
  body.phone-ui-repair-v101196 #activitiesPage .phone-fold-target.phone-fold-collapsed,
  body.phone-ui-repair-v101196 #equipmentPage .phone-fold-target.phone-fold-collapsed {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Equipment loadout: three compact slot columns rather than five tall rows. */
  body.phone-ui-repair-v101196 #equipmentPage .equipment-slot-overview-clean {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
    gap: 5px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-character-slot {
    grid-area: auto !important;
    min-height: 68px !important;
    padding: 5px 4px !important;
    grid-template-rows: 26px auto auto !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-character-slot-icon {
    width: 27px !important;
    height: 27px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-character-slot-icon img {
    width: 25px !important;
    height: 25px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-character-slot small {
    font-size: 7.5px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-character-slot strong {
    font-size: 8.5px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-clean-section {
    padding: 8px !important;
    margin-bottom: 6px !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-clean-heading > small {
    display: none !important;
  }

  body.phone-ui-repair-v101196 #equipmentPage .equipment-slot-detail {
    margin-top: 5px !important;
    padding: 7px !important;
  }

  /* Farming: stats are a compact 3x2 strip and locked plots are roadmap rows,
     not six full-size cultivation cards. */
  body.phone-ui-repair-v101196 #activitiesPage .farming-dashboard-hero {
    min-height: 0 !important;
    padding: 9px !important;
    gap: 7px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-dashboard-hero p {
    display: none !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-stat-strip > div {
    min-height: 50px !important;
    padding: 6px 4px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-stat-strip small {
    font-size: 7px !important;
    line-height: 1.1 !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-stat-strip strong {
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-plot-card.locked {
    min-height: 74px !important;
    height: auto !important;
    padding: 7px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-plot-card.locked .farming-plot-locked {
    min-height: 0 !important;
    padding: 5px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-plot-card.locked .farming-plot-locked > span {
    font-size: 13px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-plot-card.locked .farming-plot-locked > strong {
    font-size: 9px !important;
  }

  body.phone-ui-repair-v101196 #activitiesPage .farming-plot-card.locked .farming-plot-locked > p {
    display: none !important;
  }
}

/* JourneyDen UI source: styles/phone-scroll-fix-v101197.css | sha256:ac1e04aa583c4eb79f63e617843a4f57852fa8d1791a1338288769c882dea867 */
/* ========================================================================== 
   JourneyDen V1.01.197 — Phone Vertical Scroll Fix
   Restores native page swiping after the V1.01.196 phone density repair.
   Keep page-height ownership on the document root: content containers must not
   become accidental non-scrolling overflow containers on Android/Chromium.
   ========================================================================== */

@media (max-width: 760px) {
  /* The document root is the one vertical scroll owner on phone. */
  html {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body.phone-scroll-fix-v101197 {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }

  /* Older mobile/reference layers used overflow: clip on main and overflow-x
     clipping on shell ancestors. That made those ancestors absorb wheel/touch
     gestures even though window.scrollTo() still worked programmatically. */
  body.phone-scroll-fix-v101197 .app-shell,
  body.phone-scroll-fix-v101197 .app-main,
  body.phone-scroll-fix-v101197 main,
  body.phone-scroll-fix-v101197 .page {
    overflow: visible !important;
  }

  /* Horizontal carousels keep their own local scrolling rules. Do not turn
     the whole page into a nested vertical scroll container. */
  body.phone-scroll-fix-v101197 :is(
    .main-navigation,
    .mobile-nav-primary,
    .activity-filter-bar,
    .activity-subfilters,
    .exp-log-region-list,
    .combat-style-grid,
    .combat-enemy-grid,
    .combat-food-grid-v2
  ) {
    touch-action: pan-x pan-y !important;
  }
}

@media (max-width: 760px) {
  /* Preserve intentional background locks for true full-screen dialogs/sheets.
     The lock follows the body's open-state class and releases automatically. */
  html:has(body.activity-skill-picker-open),
  html:has(body.skill-detail-modal-open),
  html:has(body.chapter-finale-open) {
    overflow-y: hidden !important;
  }
}

/* JourneyDen UI source: styles/skills-desktop-navigator-v101234.css | sha256:93e212694ec23a523c4efef426595841494f20d6360729c17ae919ad2df1194c */
/* JourneyDen V1.01.234 — Skills desktop navigator, Phase 2.
   Desktop replaces the temporary skill drawer with a permanent, grouped
   navigator. Phone/tablet keeps the existing picker for Phase 3. */

@media (min-width:901px){
  body.skill-navigator-phase2-v101234 #activitiesPage .activity-layout,
  body.skill-navigator-phase2-v101234.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-layout{
    display:grid !important;
    grid-template-columns:minmax(188px,208px) minmax(0,1fr) !important;
    align-items:start !important;
    gap:12px !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage .activity-sidebar-panel,
  body.skill-navigator-phase2-v101234.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel{
    position:sticky !important;
    top:10px !important;
    z-index:8 !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-height:calc(100dvh - 20px) !important;
    margin:0 !important;
    padding:0 !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    border:1px solid rgba(87,70,42,.72) !important;
    border-radius:4px !important;
    background:linear-gradient(180deg,#111b1f 0%,#0b1418 100%) !important;
    box-shadow:0 5px 18px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.018) !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(184,139,57,.42) rgba(0,0,0,.14) !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage .activity-sidebar-panel > .panel-heading{
    display:block !important;
    padding:12px 12px 10px !important;
    border-bottom:1px solid rgba(91,73,43,.58) !important;
    background:linear-gradient(180deg,rgba(28,38,39,.92),rgba(18,28,31,.8)) !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .activity-sidebar-panel > .panel-heading .eyebrow{
    display:block !important;
    margin-bottom:2px !important;
    color:#8f7b58 !important;
    font-size:9px !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .activity-sidebar-panel > .panel-heading strong{
    color:#e0c58d !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    font-size:15px !important;
    font-weight:500 !important;
  }

  /* The drawer switcher remains the mobile/tablet control only. */
  body.skill-navigator-phase2-v101234 #activitiesPage .mobile-activity-skill-select.activity-skill-switcher{
    display:none !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs.skill-tabs.desktop-skill-navigator{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-height:none !important;
    padding:5px 0 8px !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-group{
    display:block !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-group + .skill-navigator-group{
    margin-top:5px !important;
    padding-top:5px !important;
    border-top:1px solid rgba(83,67,42,.42) !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-group-heading{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-height:24px !important;
    padding:4px 10px 3px !important;
    color:#8f7d5c !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-group-heading small{
    color:#6f685b !important;
    font-size:8px !important;
    font-weight:600 !important;
    letter-spacing:0 !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
    min-width:0 !important;
    padding:0 6px !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs .skill-navigator-button{
    position:relative !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 12px !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:45px !important;
    margin:0 !important;
    padding:5px 7px !important;
    border:1px solid rgba(77,65,44,.5) !important;
    border-radius:3px !important;
    background:linear-gradient(180deg,#151f22,#10191c) !important;
    color:#c9bea5 !important;
    text-align:left !important;
    box-shadow:inset 0 1px rgba(255,255,255,.018) !important;
    cursor:pointer !important;
    transition:border-color .12s ease,background .12s ease,transform .08s ease !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs .skill-navigator-button:hover{
    border-color:rgba(166,126,56,.62) !important;
    background:linear-gradient(180deg,#1a2526,#121c1f) !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs .skill-navigator-button:active{
    transform:translateY(1px) !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs .skill-navigator-button.active{
    border-color:rgba(204,158,68,.76) !important;
    background:linear-gradient(180deg,#342c20 0%,#201c17 100%) !important;
    color:#f0d8a1 !important;
    box-shadow:inset 3px 0 #c79643,inset 0 1px rgba(255,241,196,.05) !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs .skill-navigator-button:focus-visible{
    outline:2px solid rgba(225,179,82,.86) !important;
    outline-offset:1px !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-icon{
    display:grid !important;
    place-items:center !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(131,101,49,.42) !important;
    border-radius:3px !important;
    background:#0a1418 !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-icon img,
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-icon-art{
    width:24px !important;
    height:24px !important;
    object-fit:contain !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-copy{
    display:block !important;
    min-width:0 !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-copy b{
    display:block !important;
    overflow:hidden !important;
    color:inherit !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    font-size:12px !important;
    font-weight:500 !important;
    line-height:1.12 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-copy small{
    display:block !important;
    margin-top:2px !important;
    color:#89857b !important;
    font-size:9px !important;
    line-height:1.05 !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-button.active .skill-navigator-copy small{
    color:#b5a27c !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-state{
    justify-self:end !important;
    color:#7e735e !important;
    font-size:10px !important;
    line-height:1 !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-button.active .skill-navigator-state{
    color:#d4a853 !important;
  }
  body.skill-navigator-phase2-v101234 #activitiesPage .skill-navigator-button.skill-locked{
    opacity:.55 !important;
    filter:saturate(.58) !important;
  }

  body.skill-navigator-phase2-v101234 #activitiesPage .activity-content{
    min-width:0 !important;
  }
}

/* Phase 2 is intentionally desktop-only. Existing phone/tablet picker remains
   the active control until Phase 3. */
@media (max-width:900px){
  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs.desktop-skill-navigator{
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.skill-navigator-phase2-v101234 #activitiesPage #activitySkillTabs .skill-navigator-button{
    transition:none !important;
  }
}

/* JourneyDen UI source: styles/skills-mobile-picker-v101235.css | sha256:b7a396e3e775026378e0b86dd33c06fbb83e8cd2c53bdf6af2ade9fb85077b43 */
/* JourneyDen V1.01.235 — Skills mobile picker, Phase 3.
   Phone/tablet gets one large current-skill control and a grouped two-column
   picker. Desktop stays on the persistent Phase 2 navigator. */

@media (max-width:900px){
  body.skill-picker-phase3-v101235 #activitiesPage .activity-sidebar-panel,
  body.skill-picker-phase3-v101235.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-sidebar-panel{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 8px !important;
    padding:0 !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .activity-sidebar-panel > .panel-heading{
    display:none !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-select.activity-skill-switcher{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-picker-button{
    position:relative !important;
    width:100% !important;
    min-width:0 !important;
    min-height:62px !important;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
    padding:8px 10px !important;
    border:1px solid rgba(176,134,58,.55) !important;
    border-radius:5px !important;
    background:linear-gradient(180deg,#172326 0%,#0d171a 100%) !important;
    color:#d8c59a !important;
    text-align:left !important;
    box-shadow:inset 0 1px rgba(255,255,255,.025),0 3px 10px rgba(0,0,0,.15) !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-picker-button:active{
    transform:translateY(1px) !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-picker-button:focus-visible{
    outline:2px solid rgba(222,174,78,.82) !important;
    outline-offset:2px !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-icon{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(158,119,50,.46) !important;
    border-radius:4px !important;
    background:#091316 !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-icon img,
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-icon-art{
    width:31px !important;
    height:31px !important;
    object-fit:contain !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-copy{
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:baseline !important;
    column-gap:7px !important;
    row-gap:1px !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-copy > small{
    grid-column:1 / -1 !important;
    display:block !important;
    margin:0 !important;
    color:#887b63 !important;
    font-size:8px !important;
    font-weight:700 !important;
    letter-spacing:.11em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-copy > strong{
    min-width:0 !important;
    overflow:hidden !important;
    color:#ead19a !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    font-size:16px !important;
    font-weight:600 !important;
    line-height:1.12 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .activity-skill-switcher-meta{
    justify-self:start !important;
    color:#938976 !important;
    font-size:9px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-picker-affordance{
    min-width:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    color:#c49a4c !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage #mobileActivitySkillPickerValue{
    display:block !important;
    color:#a68d5d !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
  }
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-picker-chevron{
    display:block !important;
    color:#d1a755 !important;
    font-size:20px !important;
    line-height:1 !important;
    transform:translateY(-1px) !important;
  }

  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-native-select{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
  }

  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker[hidden]{
    display:none !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-backdrop{
    background:rgba(0,5,4,.78) !important;
    backdrop-filter:blur(2px) !important;
    -webkit-backdrop-filter:blur(2px) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-panel{
    position:relative !important;
    width:min(100%,560px) !important;
    max-height:min(82dvh,700px) !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    border:1px solid rgba(195,148,62,.62) !important;
    border-radius:8px !important;
    background:linear-gradient(180deg,#1c2522 0%,#0d1615 82px,#07100f 100%) !important;
    box-shadow:0 18px 54px rgba(0,0,0,.62),inset 0 1px rgba(255,239,195,.04) !important;
  }

  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-heading{
    min-height:66px !important;
    padding:12px 12px 9px !important;
    align-items:flex-start !important;
    border-bottom:1px solid rgba(151,112,48,.28) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-heading .eyebrow{
    color:#8e7953 !important;
    font-size:8px !important;
    letter-spacing:.13em !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-heading h3{
    margin:2px 0 1px !important;
    color:#e6cb91 !important;
    font-size:18px !important;
    line-height:1.08 !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-heading p{
    margin:0 !important;
    color:#8d877a !important;
    font-size:10px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-x{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
    border-color:rgba(168,126,53,.34) !important;
    background:#091211 !important;
    color:#b99a5a !important;
  }

  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-list{
    min-height:0 !important;
    overflow-y:auto !important;
    display:block !important;
    padding:8px 9px 10px !important;
    scrollbar-width:thin !important;
    scrollbar-color:rgba(180,136,57,.4) rgba(0,0,0,.15) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-skill-picker-group{
    display:block !important;
    min-width:0 !important;
  }
  body.skill-picker-phase3-v101235 .mobile-skill-picker-group + .mobile-skill-picker-group{
    margin-top:8px !important;
    padding-top:8px !important;
    border-top:1px solid rgba(117,92,52,.28) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-skill-picker-group-heading{
    min-height:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:0 2px 4px !important;
    color:#9f895f !important;
    font-size:9px !important;
    font-weight:700 !important;
    letter-spacing:.11em !important;
    text-transform:uppercase !important;
  }
  body.skill-picker-phase3-v101235 .mobile-skill-picker-group-heading small{
    color:#6f6a5e !important;
    font-size:8px !important;
    letter-spacing:0 !important;
  }
  body.skill-picker-phase3-v101235 .mobile-skill-picker-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice{
    position:relative !important;
    min-width:0 !important;
    min-height:60px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 10px !important;
    grid-template-rows:auto 3px !important;
    align-items:center !important;
    gap:6px !important;
    padding:7px 7px 6px !important;
    overflow:hidden !important;
    border:1px solid rgba(91,77,50,.54) !important;
    border-radius:4px !important;
    background:linear-gradient(180deg,#151f1e 0%,#0b1413 100%) !important;
    color:#c9bea8 !important;
    text-align:left !important;
    box-shadow:inset 0 1px rgba(255,255,255,.018) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice:active{
    transform:translateY(1px) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice:focus-visible{
    outline:2px solid rgba(224,175,77,.8) !important;
    outline-offset:1px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice.active{
    border-color:rgba(211,162,69,.78) !important;
    background:linear-gradient(180deg,#342c20 0%,#1c1a15 100%) !important;
    box-shadow:inset 3px 0 #c79743,inset 0 1px rgba(255,239,194,.045) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice.skill-locked{
    opacity:.52 !important;
    filter:saturate(.55) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-icon{
    grid-column:1 !important;
    grid-row:1 !important;
    width:32px !important;
    height:32px !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(134,101,47,.4) !important;
    border-radius:3px !important;
    background:#081211 !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-icon img,
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-icon-art{
    width:24px !important;
    height:24px !important;
    object-fit:contain !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-copy{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-copy b{
    overflow:hidden !important;
    color:#d6c293 !important;
    font-family:var(--jd-serif,Georgia,serif) !important;
    font-size:11px !important;
    font-weight:600 !important;
    line-height:1.08 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice.active .mobile-activity-skill-choice-copy b{
    color:#f0d699 !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-copy small{
    color:#817c70 !important;
    font-size:8px !important;
    line-height:1 !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-state{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    color:#d0a64f !important;
    font-size:9px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-progress{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    height:2px !important;
    overflow:hidden !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.34) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-progress > span{
    display:block !important;
    height:100% !important;
    background:linear-gradient(90deg,#806127,#c79a43) !important;
  }

  /* Selection already closes on one tap; backdrop/X are enough. */
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-footer{
    display:none !important;
  }
}

/* Keep a real two-column navigator on normal phone widths. */
@media (max-width:360px){
  body.skill-picker-phase3-v101235 .mobile-skill-picker-grid{
    gap:5px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice{
    min-height:56px !important;
    grid-template-columns:29px minmax(0,1fr) 8px !important;
    gap:5px !important;
    padding:6px 5px 5px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-icon{
    width:28px !important;
    height:28px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-icon img,
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-icon-art{
    width:21px !important;
    height:21px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice-copy b{
    font-size:10px !important;
  }
}

@media (max-width:900px) and (max-height:430px) and (orientation:landscape){
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker{
    padding:5px 7px calc(5px + env(safe-area-inset-bottom)) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-panel{
    max-height:calc(100dvh - 10px) !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-heading{
    min-height:48px !important;
    padding:7px 9px 6px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-heading p{
    display:none !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-list{
    padding:6px 8px 7px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-skill-picker-group + .mobile-skill-picker-group{
    margin-top:5px !important;
    padding-top:5px !important;
  }
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice{
    min-height:48px !important;
  }
}

@media (min-width:901px){
  /* Phase 3 must not disturb the persistent desktop navigator. */
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker{
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.skill-picker-phase3-v101235 .mobile-activity-skill-picker-panel,
  body.skill-picker-phase3-v101235 .mobile-activity-skill-choice,
  body.skill-picker-phase3-v101235 #activitiesPage .mobile-activity-skill-picker-button{
    animation:none !important;
    transition:none !important;
  }
}

/* JourneyDen UI source: styles/skills-active-clarity-phase4-v101236.css | sha256:c6ae537d22a7cc3baf2d1a161b2db50be733fb3a165941b6fb808177260f3c5d */
/* JourneyDen V1.01.236 — Active Activity Clarity + Skills final polish, Phase 4.
   Keeps the running idle activity obvious while players browse another skill.
   Presentation only: no network polling or gameplay authority changes. */

body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto;
  grid-template-rows:auto 3px;
  align-items:center;
  gap:6px 10px;
  min-width:0;
  margin:0 0 10px;
  padding:8px 9px 7px;
  overflow:hidden;
  border:1px solid rgba(151,112,46,.55);
  border-radius:5px;
  background:linear-gradient(180deg,#182321 0%,#0c1515 100%);
  box-shadow:inset 0 1px rgba(255,244,207,.025),0 3px 12px rgba(0,0,0,.14);
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:3px; width:3px;
  background:#b88436;
  opacity:.82;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar.is-idle{
  border-color:rgba(84,75,59,.5);
  background:linear-gradient(180deg,#141c1c 0%,#0b1213 100%);
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar.is-idle::before{
  background:#5e655e; opacity:.55;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar.is-browsing-other{
  border-color:rgba(200,151,59,.72);
  box-shadow:inset 0 1px rgba(255,244,207,.035),0 4px 14px rgba(0,0,0,.18);
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-icon{
  grid-column:1; grid-row:1;
  width:40px; height:40px;
  display:grid; place-items:center;
  overflow:hidden;
  border:1px solid rgba(142,105,46,.46);
  border-radius:4px;
  background:#081211;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-icon img,
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-icon-art{
  width:30px; height:30px; object-fit:contain;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy{
  grid-column:2; grid-row:1;
  min-width:0;
  display:flex; flex-direction:column; gap:1px;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy small{
  color:#9c8357; font-size:8px; font-weight:700; letter-spacing:.1em; line-height:1.1; text-transform:uppercase;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy strong{
  min-width:0;
  overflow:hidden;
  color:#e6ce96;
  font-family:var(--jd-serif,Georgia,serif);
  font-size:14px; font-weight:600; line-height:1.15;
  text-overflow:ellipsis; white-space:nowrap;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy > span{
  overflow:hidden; color:#8f8a7d; font-size:9px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-timing{
  grid-column:3; grid-row:1;
  min-width:54px;
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-timing strong{
  color:#d8bd7d; font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-timing small{
  color:#827b6b; font-size:8px; font-variant-numeric:tabular-nums;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-view{
  grid-column:4; grid-row:1;
  min-height:32px;
  padding:5px 9px;
  border:1px solid rgba(176,132,52,.54);
  border-radius:3px;
  background:linear-gradient(180deg,#30291d,#191813);
  color:#d9bd7d;
  font-size:9px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-view:active{transform:translateY(1px);}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-view:focus-visible{outline:2px solid rgba(224,176,75,.82); outline-offset:2px;}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-track{
  grid-column:1 / -1; grid-row:2;
  width:100%; height:3px; overflow:hidden; border-radius:999px; background:rgba(0,0,0,.38);
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-track > span{
  display:block; width:0; height:100%; background:linear-gradient(90deg,#7f5d25,#c4933e); transition:width .12s linear;
}
body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar.is-idle .activity-global-active-track > span{background:#5a625d;}

/* Final navigator resilience: future long names can wrap instead of being cut off. */
@media (min-width:901px){
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar{
    position:sticky; top:8px; z-index:7;
  }
  body.skills-active-clarity-phase4-v101236 #activitiesPage #activitySkillTabs .skill-navigator-button{
    min-height:44px !important; height:auto !important;
  }
  body.skills-active-clarity-phase4-v101236 #activitiesPage .skill-navigator-copy b{
    display:-webkit-box !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    white-space:normal !important;
    text-overflow:clip !important;
  }
}

@media (max-width:900px){
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-layout,
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-content,
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-sidebar-panel{
    min-width:0 !important; max-width:100% !important;
  }
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar{
    grid-template-columns:36px minmax(0,1fr) auto;
    grid-template-rows:auto auto 3px;
    gap:5px 8px;
    margin-bottom:8px;
    padding:7px 8px 6px;
  }
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-icon{
    width:34px; height:34px;
  }
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-icon img,
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-icon-art{width:25px; height:25px;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy strong{font-size:12px;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy > span{font-size:8px;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-timing{grid-column:3; grid-row:1; min-width:46px;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-view{
    grid-column:2 / 4; grid-row:2; justify-self:end; min-height:27px; padding:4px 8px;
  }
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-track{grid-column:1 / -1; grid-row:3;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .mobile-activity-skill-copy > strong{
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  }
  body.skills-active-clarity-phase4-v101236 .mobile-activity-skill-choice{height:auto !important;}
  body.skills-active-clarity-phase4-v101236 .mobile-activity-skill-choice-copy b{
    display:-webkit-box !important;
    overflow:hidden !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    white-space:normal !important;
    text-overflow:clip !important;
  }
}

@media (max-width:360px){
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-copy > span{display:none;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-bar{grid-template-columns:34px minmax(0,1fr) auto;}
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-view{font-size:8px;}
}

@media (prefers-reduced-motion:reduce){
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-track > span,
  body.skills-active-clarity-phase4-v101236 #activitiesPage .activity-global-active-view{transition:none !important;}
}

/* JourneyDen UI source: styles/production-farming-layout-phase2-v101244.css | sha256:8e2449285ba2056e97fa7bd65ae5b822eca504640a7d293d0e60703a8e709065 */
/* JourneyDen V1.01.244 — Production UI crop repair, Phase 2.
   Farming geometry is governed by the real Activities workspace width, not
   the browser viewport. This layer intentionally loads after the historical
   screenshot-calibration CSS so dynamic game content cannot be clipped. */

body.production-farming-layout-phase2-v101244 #activitiesPage #activityCards.farming-activity-root {
  container-name: farming-workspace;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible !important;
}

body.production-farming-layout-phase2-v101244 #activitiesPage :is(
  .farming-dashboard,
  .farming-dashboard > *,
  .farming-dashboard-hero,
  .farming-stat-strip,
  .farming-contract-card,
  .farming-plot-grid,
  .farming-plot-card,
  .farming-seed-vault,
  .farming-source-note
) {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Screenshot-calibration heights are not safe for live/dynamic text. Keep the
   visual minimum rhythm but allow cards to grow whenever their content needs it. */
body.production-farming-layout-phase2-v101244 #activitiesPage :is(
  .farming-dashboard-hero,
  .farming-stat-strip,
  .farming-contract-card,
  .farming-plot-card:not(.locked),
  .farming-plot-card.locked
) {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-card > *,
body.production-farming-layout-phase2-v101244 #activitiesPage .farming-plot-card > *,
body.production-farming-layout-phase2-v101244 #activitiesPage .farming-stat-strip > * {
  min-width: 0;
}

body.production-farming-layout-phase2-v101244 #activitiesPage :is(
  .farming-contract-main h3,
  .farming-contract-main p,
  .farming-growth-meta,
  .farming-growth-meta > span,
  .farming-contract-rewards span
) {
  overflow-wrap: anywhere;
}

/* The old four-column Farming contract needs roughly 1030px before it can fit.
   Collapse the screenshot layout based on the *workspace* instead of viewport. */
@container farming-workspace (max-width: 1100px) {
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-dashboard {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage :is(
    .farming-dashboard-hero,
    .farming-stat-strip,
    .farming-contract-card,
    .farming-plot-grid,
    .farming-seed-vault,
    .farming-source-note
  ) {
    grid-column: 1 !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-card {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr) !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-main,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-progress {
    grid-column: auto !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-rewards,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-actions {
    grid-column: 1 / -1 !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-actions button {
    width: 100%;
    min-width: 0 !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-plot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container farming-workspace (max-width: 820px) {
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-card,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-plot-grid,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-seed-vault {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage :is(
    .farming-contract-main,
    .farming-contract-progress,
    .farming-contract-rewards,
    .farming-contract-actions
  ) {
    grid-column: 1 !important;
  }

  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container farming-workspace (max-width: 520px) {
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-stat-strip,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-contract-actions,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-seed-grid,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-harvest-preview,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-plot-actions,
  body.production-farming-layout-phase2-v101244 #activitiesPage .farming-plot-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* JourneyDen UI source: styles/production-mobile-layout-phase3-v101245.css | sha256:57daa05cf87bbd53a4c8b1f5a87834efc0fd65c5a240ccbd7e3c2aded3a4588e */
/* JourneyDen V1.01.245 — Production UI mobile/tablet repair, Phase 3.
   Keeps the V1.01.244 desktop Farming geometry intact while hardening the
   Activities production shell below the desktop navigator breakpoint. */

@media (max-width: 900px) {
  body.production-mobile-layout-phase3-v101245 #activitiesPage .activity-layout,
  body.production-mobile-layout-phase3-v101245 #activitiesPage .activity-sidebar-panel,
  body.production-mobile-layout-phase3-v101245 #activitiesPage .activity-content,
  body.production-mobile-layout-phase3-v101245 #activitiesPage #activityCards {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* V1.01.186 had a Farming-only high-specificity grid rule. It can beat the
     newer V1.01.235 picker and place the picker button inside only the 44px
     icon track. On phone/tablet the switcher is one full-width button. */
  body.production-mobile-layout-phase3-v101245.skill-picker-phase3-v101235.fresh-premium-v101163
    #activitiesPage.activity-mode-farming .mobile-activity-skill-select.activity-skill-switcher {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  body.production-mobile-layout-phase3-v101245.skill-picker-phase3-v101235.fresh-premium-v101163
    #activitiesPage.activity-mode-farming .mobile-activity-skill-picker-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
  }

  /* Shared production workspaces must always shrink with the Activities
     content column. This is defensive against old min-width and sticky-rail
     rules when phone/tablet breakpoints overlap. */
  body.production-mobile-layout-phase3-v101245 #activitiesPage :is(
    .smithing-forge-workspace,
    .cooking-hearth-workspace,
    .construction-workshop-workspace,
    .apothecary-alchemy-workspace,
    .smithing-recipe-board,
    .cooking-recipe-board,
    .construction-recipe-board,
    .apothecary-recipe-board,
    .smithing-active-panel,
    .cooking-active-panel,
    .construction-active-panel,
    .apothecary-active-panel
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.production-mobile-layout-phase3-v101245 #activitiesPage :is(
    .smithing-category-nav,
    .cooking-category-nav,
    .construction-category-nav,
    .apothecary-category-nav,
    .smithing-tier-nav,
    .cooking-tier-nav,
    .construction-tier-nav,
    .apothecary-tier-nav
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.production-mobile-layout-phase3-v101245 #activitiesPage :is(
    .smithing-recipe-grid,
    .cooking-recipe-grid,
    .construction-recipe-grid,
    .apothecary-recipe-grid
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.production-mobile-layout-phase3-v101245 #activitiesPage :is(
    .smithing-recipe-tile,
    .cooking-recipe-tile,
    .construction-recipe-tile,
    .apothecary-recipe-tile,
    .smithing-recipe-row-copy,
    .smithing-current-activity-copy,
    .smithing-active-material-name
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Current production recipes are compact horizontal rows. Keep one readable
   row per line on phones rather than allowing older tile-grid rules to turn a
   row into a narrow card. Tablet widths remain governed by the existing
   V1.01.156 single-column production layout. */
@media (max-width: 560px) {
  body.production-mobile-layout-phase3-v101245 #activitiesPage :is(
    .smithing-recipe-grid,
    .cooking-recipe-grid,
    .construction-recipe-grid,
    .apothecary-recipe-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.production-mobile-layout-phase3-v101245 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    width: 100% !important;
    overflow: hidden !important;
  }

  body.production-mobile-layout-phase3-v101245 #activitiesPage .smithing-recipe-row-copy {
    overflow: hidden !important;
  }
}

/* V1.01.145 assigned named grid areas to the old <=360px selector. Once the
   V1.01.235 picker button becomes the grid container those stale names can
   create implicit columns inside the button. Reset them for the modern picker. */
@media (max-width: 360px) {
  body.production-mobile-layout-phase3-v101245.skill-picker-phase3-v101235.fresh-premium-v101163
    #activitiesPage.activity-mode-farming .mobile-activity-skill-picker-button > .mobile-activity-skill-icon,
  body.production-mobile-layout-phase3-v101245.skill-picker-phase3-v101235.fresh-premium-v101163
    #activitiesPage.activity-mode-farming .mobile-activity-skill-picker-button > .mobile-activity-skill-copy {
    grid-area: auto !important;
  }
}

/* JourneyDen UI source: styles/production-ui-regression-phase4-v101246.css | sha256:a1b38c1ceb085f8175bf304f3da96cc20f45208d4ac58b68a27ec158eb7e23b9 */
/* JourneyDen V1.01.246 — Production UI final regression repair, Phase 4.
   Closes the 901–1180px breakpoint gap left between the phone/tablet guard
   and the wide desktop forge navigation. Presentation only. */

@media (min-width: 901px) and (max-width: 1180px) {
  body.production-ui-regression-phase4-v101246 #activitiesPage :is(
    .smithing-category-nav,
    .cooking-category-nav,
    .construction-category-nav,
    .apothecary-category-nav
  ) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.production-ui-regression-phase4-v101246 #activitiesPage .smithing-tier-navigation {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.production-ui-regression-phase4-v101246 #activitiesPage .smithing-tier-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding-top: 0 !important;
  }

  body.production-ui-regression-phase4-v101246 #activitiesPage :is(
    .smithing-tier-nav,
    .cooking-tier-nav,
    .construction-tier-nav,
    .apothecary-tier-nav
  ) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.production-ui-regression-phase4-v101246 #activitiesPage :is(
    .smithing-nav-tab,
    .cooking-nav-tab,
    .construction-nav-tab,
    .apothecary-nav-tab,
    .smithing-tier-tab,
    .cooking-tier-tab,
    .construction-tier-tab,
    .apothecary-tier-tab
  ) {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
  }
}

/* Final defensive contract for dynamic production copy. Long translated or
   future content may wrap, but it must never widen the Activities workspace. */
body.production-ui-regression-phase4-v101246 #activitiesPage :is(
  .smithing-forge-navigation,
  .smithing-forge-workspace,
  .cooking-hearth-workspace,
  .construction-workshop-workspace,
  .apothecary-alchemy-workspace,
  .smithing-recipe-board,
  .cooking-recipe-board,
  .construction-recipe-board,
  .apothecary-recipe-board,
  .smithing-active-panel,
  .cooking-active-panel,
  .construction-active-panel,
  .apothecary-active-panel
) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

body.production-ui-regression-phase4-v101246 #activitiesPage :is(
  .smithing-forge-identity,
  .smithing-forge-identity > div,
  .smithing-recipe-row-copy,
  .smithing-current-activity-copy,
  .smithing-active-material-name,
  .smithing-recipe-tile-name,
  .smithing-recipe-tile-state,
  .smithing-current-activity-meta,
  .smithing-active-subheading
) {
  min-width: 0 !important;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Legacy baseline layer: production-ui-hardening.css
   ========================================================================== */
/* JourneyDen V1.01.262 — Production UI Hardening, Phase 3
   Shared scalable recipe geometry for Smithing, Cooking, Construction and
   Apothecary. Presentation only: no gameplay, balance or authority changes. */

/* Use the actual content rail as the responsive source of truth. */
body.production-ui-hardening-v101262 #activitiesPage :is(
  .smithing-recipe-board,
  .cooking-recipe-board,
  .construction-recipe-board,
  .apothecary-recipe-board
) {
  container-type: inline-size;
  container-name: production-recipes;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: visible !important;
}

body.production-ui-hardening-v101262 #activitiesPage :is(
  .smithing-active-panel,
  .cooking-active-panel,
  .construction-active-panel,
  .apothecary-active-panel
) {
  container-type: inline-size;
  container-name: production-active;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Future-safe desktop recipe grid. A recipe row is never allowed to collapse
   into the ~100px cards that caused one-character-per-line names. */
body.production-ui-hardening-v101262 #activitiesPage :is(
  .smithing-recipe-grid,
  .cooking-recipe-grid,
  .construction-recipe-grid,
  .apothecary-recipe-grid
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-items: stretch;
}

body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(72px, auto) !important;
  grid-template-rows: minmax(44px, auto) !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 56px !important;
  padding: 7px 8px !important;
  gap: 8px !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-row-copy {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-name {
  display: -webkit-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
  line-height: 1.2 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-owned {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
  min-width: 72px !important;
  max-width: 112px !important;
  min-height: 24px !important;
  padding: 4px 6px !important;
  box-sizing: border-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.15 !important;
}

/* Recipe section headings are allowed to wrap but never widen the board. */
body.production-ui-hardening-v101262 #activitiesPage :is(
  .smithing-recipe-section-heading,
  .cooking-recipe-section-heading,
  .construction-recipe-section-heading,
  .apothecary-recipe-section-heading,
  .smithing-recipe-board-heading,
  .cooking-recipe-board-heading,
  .construction-recipe-board-heading,
  .apothecary-recipe-board-heading
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.production-ui-hardening-v101262 #activitiesPage :is(
  .smithing-recipe-section-heading h3,
  .cooking-recipe-section-heading h3,
  .construction-recipe-section-heading h3,
  .apothecary-recipe-section-heading h3,
  .smithing-recipe-board-heading strong,
  .cooking-recipe-board-heading strong,
  .construction-recipe-board-heading strong,
  .apothecary-recipe-board-heading strong
) {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Running activity material rows also get a protected text column. */
body.production-ui-hardening-v101262 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
  grid-template-columns: 24px minmax(120px, 1fr) auto minmax(78px, auto) !important;
  grid-template-areas: "icon name need owned" !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

body.production-ui-hardening-v101262 #activitiesPage .smithing-active-material-name,
body.production-ui-hardening-v101262 #activitiesPage .smithing-current-activity-copy,
body.production-ui-hardening-v101262 #activitiesPage .smithing-current-activity-copy h3 {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Medium production rails still use multiple columns, but never below the safe
   horizontal-row width. Container queries make this independent of sidebars. */
@container production-recipes (max-width: 820px) {
  body.production-ui-hardening-v101262 #activitiesPage :is(
    .smithing-recipe-grid,
    .cooking-recipe-grid,
    .construction-recipe-grid,
    .apothecary-recipe-grid
  ) {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 7px !important;
  }
}

@container production-recipes (max-width: 520px) {
  body.production-ui-hardening-v101262 #activitiesPage :is(
    .smithing-recipe-grid,
    .cooking-recipe-grid,
    .construction-recipe-grid,
    .apothecary-recipe-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 32px minmax(0, 1fr) minmax(64px, auto) !important;
    min-height: 54px !important;
    padding: 6px 7px !important;
    gap: 7px !important;
  }

  body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
    min-width: 64px !important;
    max-width: 84px !important;
    padding: 4px 5px !important;
  }
}

@container production-active (max-width: 520px) {
  body.production-ui-hardening-v101262 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon name need"
      "icon owned owned" !important;
    row-gap: 2px !important;
  }
}

@container production-recipes (max-width: 340px) {
  body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(58px, auto) !important;
    gap: 5px !important;
    padding-inline: 6px !important;
  }

  body.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-row .smithing-recipe-tile-state {
    min-width: 58px !important;
    max-width: 72px !important;
    font-size: 8px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: skill-activity-compact-header.css
   ========================================================================== */
/* JourneyDen V1.01.263 — Phase 2 Shared Compact Skill Header
   Purpose: remove redundant Gathering/Production overview copy while keeping
   Level, XP, XP-to-next, unlocked count and Mastery visible in a compact rail.
   This layer intentionally sits after the locked V1.01.252 bundle and the
   V1.01.262 Production hardening layer. */

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview {
  display: grid !important;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(78,64,40,.66) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg,rgba(20,30,33,.96),rgba(15,25,29,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.012), 0 3px 10px rgba(0,0,0,.08) !important;
  box-sizing: border-box !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage.activity-mode-farming .fresh-activity-overview,
body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview[hidden] {
  display: none !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 10px 0 3px !important;
  border-right: 1px solid rgba(78,64,40,.48) !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero .eyebrow {
  display: block !important;
  margin: 0 !important;
  color: #bc964c !important;
  font-size: 8.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .075em !important;
  white-space: nowrap !important;
}

/* The page heading already identifies the skill. These two legacy lines were
   the largest source of duplicate vertical information. */
body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero h3,
body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero p {
  display: none !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-width: 0 !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  border: 0 !important;
  border-left: 1px solid rgba(78,64,40,.32) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:first-child {
  border-left: 0 !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip small {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #7f7b72 !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  letter-spacing: .025em !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip strong {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #d0b47f !important;
  font: 500 10.5px/1.15 Georgia,"Times New Roman",serif !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* Medium-width desktop keeps all five stats in one calm row. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero {
    padding-right: 7px !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div {
    gap: 3px !important;
    padding-inline: 5px !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip small {
    font-size: 7.5px !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip strong {
    font-size: 9.5px !important;
  }
}

/* Mobile/tablet previously hid the entire overview. The compact version is
   small enough to retain the progression information without horizontal scroll. */
@media (max-width: 900px) {
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview {
    display: block !important;
    min-height: 0 !important;
    padding: 5px 6px !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage.activity-mode-farming .fresh-activity-overview,
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview[hidden] {
    display: none !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero {
    min-height: 22px !important;
    padding: 0 2px 4px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(78,64,40,.32) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-overview-hero .eyebrow {
    font-size: 8px !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div {
    min-height: 30px !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 6px 7px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(78,64,40,.22) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:nth-child(-n+3) {
    border-top: 0 !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:not(:nth-child(3n+1)) {
    border-left: 1px solid rgba(78,64,40,.22) !important;
  }
}

@media (max-width: 480px) {
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:nth-child(-n+3) {
    border-top: 1px solid rgba(78,64,40,.22) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:nth-child(-n+2) {
    border-top: 0 !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:not(:nth-child(3n+1)) {
    border-left: 0 !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:nth-child(even) {
    border-left: 1px solid rgba(78,64,40,.22) !important;
  }
  body.skill-activity-compact-header-v101263 #activitiesPage .fresh-activity-stat-strip > div:last-child {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: gathering-current-activity.css
   ========================================================================== */
/* JourneyDen V1.01.263 — Gathering Activity UI Cleanup, Phase 3.
   Compact current-activity presentation for Woodcutting, Mining, Fishing and
   Foraging. Presentation only: owned counts, timers, rewards and authority
   continue to come from the existing trusted runtime. */

body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card.is-idle {
  display: none !important;
}

body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card:not(.is-idle) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(123, 91, 43, .64) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #142022 0%, #0d181b 100%) !important;
  box-shadow: inset 3px 0 0 rgba(194, 143, 55, .66), 0 3px 10px rgba(0,0,0,.12) !important;
}

body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-topline {
  display: block !important;
  padding: 7px 11px 0 !important;
  min-height: 0 !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-topline .eyebrow {
  color: #b99a60 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-status {
  display: none !important;
}

body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 4px 11px 7px !important;
  min-width: 0 !important;
  background: transparent !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: 1px solid rgba(100, 76, 42, .55) !important;
  border-radius: 3px !important;
  background: #071113 !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-icon :where(img,.jd-item-icon,.jd-skill-icon),
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-icon-art {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-copy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header h2 {
  margin: 0 !important;
  color: #e6dfd1 !important;
  font: 600 16px/1.1 Georgia, "Times New Roman", serif !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 3px 10px !important;
  min-width: 0 !important;
  color: #918978 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-meta > span:first-child {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-owned {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
  color: #9e947f !important;
  white-space: nowrap !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-owned strong {
  color: #e0bf76 !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header p {
  display: none !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header .danger {
  min-width: 72px !important;
  min-height: 32px !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  align-self: center !important;
}

body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .progress-panel {
  display: grid !important;
  grid-template-columns: auto minmax(80px, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 11px 7px !important;
  border-top: 1px solid rgba(91, 72, 43, .38) !important;
  background: rgba(4, 10, 12, .42) !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .progress-meta {
  display: contents !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .progress-status {
  grid-column: 1 !important;
  min-width: 38px !important;
  color: #968d7b !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .progress-interface-icon-art {
  display: none !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .progress-track {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 5px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(115, 84, 39, .48) !important;
  border-radius: 0 !important;
  background: #04090a !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card #progressPercent {
  grid-column: 3 !important;
  justify-self: end !important;
  color: #9b927f !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) {
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 4px 8px 6px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-topline {
    padding: 6px 8px 0 !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-icon :where(img,.jd-item-icon,.jd-skill-icon),
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-icon-art {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header h2 {
    font-size: 14px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-meta {
    gap: 2px 7px !important;
    font-size: 9px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-owned strong {
    font-size: 12px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header .danger {
    min-width: 58px !important;
    min-height: 30px !important;
    padding: 4px 9px !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .progress-panel {
    grid-template-columns: auto minmax(55px, 1fr) auto !important;
    gap: 6px !important;
    padding: 5px 8px 6px !important;
  }
}

@media (max-width: 360px) {
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-meta {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .activity-current-meta > span:first-child {
    white-space: normal !important;
  }
}

/* Phase 3 late-cascade normalization: historical Activity rules assign a
   70px header floor, bottom margin and full-width mobile Stop button. Those
   were correct for the older card but would re-inflate the compact layout. */
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering .current-activity-card .activity-header .danger {
  width: auto !important;
  max-width: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: end !important;
}
body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering #stopActivityButton {
  width: auto !important;
  min-width: 72px !important;
  min-height: 32px !important;
  padding: 5px 12px !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: end !important;
}
@media (max-width:600px) {
  body.gathering-current-activity-v101263 #activitiesPage.activity-mode-gathering #stopActivityButton {
    min-width: 58px !important;
    min-height: 30px !important;
    padding: 4px 9px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: production-recipe-details.css
   ========================================================================== */
/* JourneyDen V1.01.263 — Production Recipe Details, Phase 4
   Shows finished-item ownership and explicit Need/Have ingredient counts on
   Production recipe cards and active material rows. Presentation only. */

/* The richer cards need enough horizontal room for item name + status +
   ingredient quantities. Fewer healthy columns are preferred over cramped ones. */
body.production-recipe-details-v101263 #activitiesPage :is(
  .smithing-recipe-grid,
  .cooking-recipe-grid,
  .construction-recipe-grid,
  .apothecary-recipe-grid
) {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}

body.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(72px, auto) !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 8px !important;
  gap: 6px 8px !important;
}

body.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
}
body.production-recipe-details-v101263 #activitiesPage .smithing-recipe-row-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile-state {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
}

body.production-recipe-details-v101263 #activitiesPage .production-recipe-requirements {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding-top: 5px !important;
  border-top: 1px solid rgba(115, 84, 39, .34) !important;
}

body.production-recipe-details-v101263 #activitiesPage .production-recipe-material {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 20px !important;
  color: #a79e8d !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

body.production-recipe-details-v101263 #activitiesPage .production-recipe-material-icon {
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-recipe-material-icon :where(img,.jd-item-icon) {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
}

body.production-recipe-details-v101263 #activitiesPage .production-recipe-material-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.production-recipe-details-v101263 #activitiesPage .production-recipe-material-counts {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  white-space: nowrap !important;
  color: #8f8777 !important;
  font-variant-numeric: tabular-nums !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-recipe-material-counts strong {
  color: #d7bf87 !important;
  font-weight: 700 !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-recipe-material.missing .production-recipe-material-counts span:last-child strong {
  color: #d58b82 !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-recipe-material.ready .production-recipe-material-counts span:last-child strong {
  color: #b9c98d !important;
}

body.production-recipe-details-v101263 #activitiesPage .production-recipe-cycle-meta {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px 9px !important;
  min-width: 0 !important;
  padding-top: 2px !important;
  color: #847d70 !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  font-variant-numeric: tabular-nums !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-recipe-cycle-meta > span:not(:last-child)::after {
  content: "·";
  margin-left: 9px;
  color: #5f584d;
}

/* Active Production rows use the same explicit language as recipe cards. */
body.production-recipe-details-v101263 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
  grid-template-columns: 24px minmax(120px, 1fr) auto auto !important;
  grid-template-areas: "icon name need owned" !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-active-material-need {
  grid-area: need !important;
  color: #a49a87 !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-active-material-have {
  grid-area: owned !important;
  color: #a49a87 !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}
body.production-recipe-details-v101263 #activitiesPage .production-active-material-need strong,
body.production-recipe-details-v101263 #activitiesPage .production-active-material-have strong {
  color: #d7bf87 !important;
}
body.production-recipe-details-v101263 #activitiesPage .smithing-active-material.missing .production-active-material-have strong {
  color: #d58b82 !important;
}
body.production-recipe-details-v101263 #activitiesPage .smithing-active-material.ready .production-active-material-have strong {
  color: #b9c98d !important;
}

@container production-recipes (max-width: 760px) {
  body.production-recipe-details-v101263 #activitiesPage :is(
    .smithing-recipe-grid,
    .cooking-recipe-grid,
    .construction-recipe-grid,
    .apothecary-recipe-grid
  ) {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }
}

@container production-recipes (max-width: 580px) {
  body.production-recipe-details-v101263 #activitiesPage :is(
    .smithing-recipe-grid,
    .cooking-recipe-grid,
    .construction-recipe-grid,
    .apothecary-recipe-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@container production-recipes (max-width: 380px) {
  body.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile.smithing-recipe-row {
    grid-template-columns: 30px minmax(0, 1fr) minmax(58px, auto) !important;
    padding: 7px 6px !important;
    gap: 5px 6px !important;
  }
  body.production-recipe-details-v101263 #activitiesPage .production-recipe-material {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 4px !important;
  }
  body.production-recipe-details-v101263 #activitiesPage .production-recipe-material-counts {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    font-size: 8px !important;
  }
  body.production-recipe-details-v101263 #activitiesPage .production-recipe-cycle-meta {
    gap: 2px 6px !important;
  }
  body.production-recipe-details-v101263 #activitiesPage .production-recipe-cycle-meta > span:not(:last-child)::after {
    margin-left: 6px !important;
  }
}

@container production-active (max-width: 520px) {
  body.production-recipe-details-v101263 #activitiesPage .smithing-active-panel.running .smithing-active-material.compact {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon name name"
      "icon need owned" !important;
    row-gap: 2px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: production-current-activity.css
   ========================================================================== */
/* JourneyDen V1.01.263 — Production Current Activity Cleanup, Phase 5.
   Compact live-production summary for Smithing, Cooking, Construction and
   Apothecary. Presentation only: owned counts, Need/Have materials, timers,
   rewards and Stop continue to use the existing trusted runtime. */

body.production-current-activity-v101263 #activitiesPage.activity-mode-production .smithing-active-panel.running {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(123, 91, 43, .64) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #142022 0%, #0d181b 100%) !important;
  box-shadow: inset 3px 0 0 rgba(194, 143, 55, .66), 0 3px 10px rgba(0,0,0,.12) !important;
}

body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-topline {
  display: block !important;
  padding: 7px 11px 0 !important;
  min-height: 0 !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-topline .eyebrow {
  color: #b99a60 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-status {
  display: none !important;
}

body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-heading {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 4px 11px 7px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(100, 76, 42, .55) !important;
  border-radius: 3px !important;
  background: #071113 !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-icon :where(img,.jd-item-icon),
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-art {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-copy h3 {
  margin: 0 !important;
  min-width: 0 !important;
  color: #e6dfd1 !important;
  font: 600 16px/1.1 Georgia, "Times New Roman", serif !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-meta {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 3px 10px !important;
  min-width: 0 !important;
  color: #918978 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-cycle {
  min-width: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-owned {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
  color: #9e947f !important;
  white-space: nowrap !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-owned strong {
  color: #e0bf76 !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-stop {
  width: auto !important;
  min-width: 72px !important;
  max-width: none !important;
  min-height: 32px !important;
  padding: 5px 12px !important;
  margin: 0 !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
}

body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  border-top: 1px solid rgba(91, 72, 43, .38) !important;
  background: rgba(8, 15, 16, .30) !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .smithing-active-subheading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #8f8676 !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .smithing-materials-status {
  font-size: 8px !important;
  white-space: nowrap !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .smithing-active-material.compact {
  grid-template-columns: 22px minmax(100px, 1fr) auto auto !important;
  grid-template-areas: "icon name need owned" !important;
  gap: 5px 8px !important;
  min-width: 0 !important;
  min-height: 26px !important;
  padding: 3px 6px !important;
  overflow: hidden !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .smithing-active-material-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .production-active-material-need,
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .production-active-material-have {
  font-size: 9px !important;
  white-space: nowrap !important;
}

body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-progress {
  display: grid !important;
  grid-template-columns: auto minmax(80px, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 11px 7px !important;
  border-top: 1px solid rgba(91, 72, 43, .38) !important;
  background: rgba(4, 10, 12, .42) !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-progress .progress-meta {
  display: contents !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-progress .progress-meta > span:first-child {
  grid-column: 1 !important;
  min-width: 38px !important;
  color: #968d7b !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-progress .progress-meta > span:last-child {
  grid-column: 3 !important;
  justify-self: end !important;
  color: #9b927f !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}
body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-progress .progress-track {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 5px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(115, 84, 39, .48) !important;
  border-radius: 0 !important;
  background: #04090a !important;
}

@media (max-width: 600px) {
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-topline {
    padding: 6px 8px 0 !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-heading {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 4px 8px 6px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-icon :where(img,.jd-item-icon),
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-art {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-copy h3 {
    font-size: 14px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-meta {
    gap: 2px 7px !important;
    font-size: 9px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-owned strong {
    font-size: 12px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-stop {
    min-width: 58px !important;
    min-height: 30px !important;
    padding: 4px 9px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials {
    padding: 6px 8px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .smithing-active-material.compact {
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon name name"
      "icon need owned" !important;
    row-gap: 2px !important;
    column-gap: 6px !important;
    min-height: 32px !important;
    padding: 4px 5px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-progress {
    grid-template-columns: auto minmax(55px, 1fr) auto !important;
    gap: 6px !important;
    padding: 5px 8px 6px !important;
  }
}

@media (max-width: 360px) {
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-meta {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-cycle {
    white-space: normal !important;
  }
}

/* V1.01.263 Phase 6 — future-content resilience.
   On mid-desktop layouts the active-production rail can be much narrower than
   the viewport because it sits beside the recipe board. Respond to the rail's
   real width, not only the viewport, so long Need/Have values never spill. */
@container production-active (max-width: 290px) {

  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-heading {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-item-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-active-stop {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    margin-top: 3px !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-compact .smithing-current-activity-meta {
    min-width: 0 !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-cycle {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body.production-current-activity-v101263 #activitiesPage.activity-mode-production .production-current-materials .smithing-active-material.compact {
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon name name"
      "icon need owned" !important;
    row-gap: 2px !important;
    column-gap: 6px !important;
    min-height: 32px !important;
    padding: 4px 5px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: combat-hierarchy-phase1.css
   ========================================================================== */
/* JourneyDen V1.01.272 — Combat UI Hierarchy Cleanup Phase 1
   Scope: visual hierarchy/spacing only. Combat logic and authority are untouched. */

body.combat-hierarchy-phase1-v101272 #combatPage{
  --combat-hierarchy-line: rgba(78,64,40,.52);
  --combat-hierarchy-line-soft: rgba(78,64,40,.34);
  --combat-hierarchy-gold: #d8b66d;
  gap:8px;
}

/* The page title should orient the player, not compete with the live encounter. */
body.combat-hierarchy-phase1-v101272 #combatPage .reference-combat-heading{
  margin-bottom:2px !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage .reference-combat-heading p{
  max-width:720px;
  margin-top:2px !important;
  font-size:10px !important;
  line-height:1.35 !important;
  opacity:.72;
}

/* Command deck becomes a compact summary layer. */
body.combat-hierarchy-phase1-v101272 #combatPage .combat-command-deck{
  gap:7px !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage :is(.combat-skills-inline-panel,.combat-style-panel){
  padding:8px 10px !important;
  border-color:var(--combat-hierarchy-line-soft) !important;
  background:#101b1f !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading){
  min-height:0 !important;
  margin:0 0 6px !important;
  padding:0 0 5px !important;
  border-bottom-color:var(--combat-hierarchy-line-soft) !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading) .eyebrow{
  font-size:8px !important;
  letter-spacing:.06em !important;
  opacity:.76;
}
body.combat-hierarchy-phase1-v101272 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading) h3{
  margin:1px 0 0 !important;
  font-size:13px !important;
  line-height:1.1 !important;
}

/* Four combat skills stay visible, but read as one compact proficiency strip. */
@media (min-width:901px){
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card{
    min-height:0 !important;
    padding:6px 7px 5px !important;
    border-color:var(--combat-hierarchy-line-soft) !important;
    background:#0d1a1e !important;
    box-shadow:none !important;
    transform:none !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-main{
    grid-template-columns:28px minmax(0,1fr) auto !important;
    gap:6px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-icon{
    width:28px !important;
    height:28px !important;
    border-radius:3px !important;
    font-size:15px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-copy strong{
    font-size:10px !important;
    line-height:1.1 !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-copy span{
    margin-top:1px !important;
    font-size:7px !important;
    line-height:1.15 !important;
    opacity:.72;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-level{
    min-width:27px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-level small{
    font-size:6px !important;
    opacity:.72;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-level b{
    margin-top:0 !important;
    color:var(--combat-hierarchy-gold) !important;
    font-size:16px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-progress{
    height:3px !important;
    margin:5px 0 0 !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-card .skill-overview-meta{
    display:none !important;
  }
}

/* Combat style is a mode selector, not a second dashboard. */
@media (min-width:901px){
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-heading{
    align-items:center !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-level-badge{
    min-width:76px !important;
    padding:4px 7px !important;
    border-color:var(--combat-hierarchy-line) !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-level-badge small{
    font-size:6px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-level-badge strong{
    font-size:16px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button{
    display:grid !important;
    grid-template-columns:26px minmax(0,1fr) !important;
    gap:6px !important;
    align-items:center !important;
    min-height:38px !important;
    padding:5px 7px !important;
    border-color:var(--combat-hierarchy-line-soft) !important;
    border-radius:3px !important;
    background:#0d1a1e !important;
    box-shadow:none !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button.active{
    border-color:rgba(216,182,109,.72) !important;
    background:linear-gradient(180deg,rgba(137,103,48,.34),rgba(91,68,37,.22)) !important;
    box-shadow:inset 0 -2px 0 #d8b66d !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button .combat-style-icon{
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
    border-radius:3px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button .combat-style-copy{
    display:block !important;
    min-width:0 !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button .combat-style-copy small,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button .combat-style-copy span,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button .combat-style-copy b{
    display:none !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button .combat-style-copy strong{
    display:block !important;
    overflow:hidden !important;
    color:#ddd0b4 !important;
    font-size:10px !important;
    line-height:1.15 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-button.active .combat-style-copy strong{
    color:#f0c66f !important;
  }
}

/* One selected-style explanation replaces four repeated descriptions. */
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help{
  min-height:22px;
  margin-top:5px;
  padding:4px 7px;
  border-left:2px solid rgba(216,182,109,.54);
  background:rgba(0,0,0,.09);
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help > span{
  display:none;
  min-width:0;
  align-items:center;
  gap:7px;
  color:#c8b995;
  font-size:8px;
  line-height:1.2;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help strong{
  color:#e5d7b9;
  font-size:9px;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help b{
  color:#d8b66d;
  font-weight:800;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help small{
  overflow:hidden;
  color:#8f968f;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-panel:has(.combat-style-button[data-style="accurate"].active) .combat-style-help [data-style-help="accurate"],
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-panel:has(.combat-style-button[data-style="aggressive"].active) .combat-style-help [data-style-help="aggressive"],
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-panel:has(.combat-style-button[data-style="defensive"].active) .combat-style-help [data-style-help="defensive"],
body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-panel:has(.combat-style-button[data-style="controlled"].active) .combat-style-help [data-style-help="controlled"]{
  display:flex;
}

/* Let the encounter be the visual anchor; support panels deliberately recede. */
body.combat-hierarchy-phase1-v101272 #combatPage .combat-layout-v2{
  gap:8px !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-battle-panel{
  position:relative;
  border-color:rgba(216,182,109,.58) !important;
  background:linear-gradient(180deg,#142126 0%,#0d191d 100%) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.12) !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-battle-panel::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(216,182,109,.82),transparent);
  pointer-events:none;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-battle-panel-heading{
  color:#e5d7b9 !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-battle-panel-heading .eyebrow{
  opacity:.72;
}
body.combat-hierarchy-phase1-v101272 #combatPage :is(.combat-roster-panel,.combat-food-panel-v2,.combat-session-panel){
  border-color:var(--combat-hierarchy-line-soft) !important;
  background:#101b1f !important;
  box-shadow:none !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage :is(.combat-panel-heading,.combat-battle-panel-heading){
  margin-bottom:6px !important;
  padding-bottom:6px !important;
  border-bottom-color:var(--combat-hierarchy-line-soft) !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-panel-heading h3{
  margin:1px 0 0 !important;
  font-size:13px !important;
}
body.combat-hierarchy-phase1-v101272 #combatPage .combat-panel-kicker{
  font-size:8px !important;
  opacity:.64;
}

/* Supplies: one compact selected-food row and one concise rule line. */
@media (min-width:901px){
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-food-panel-v2,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-panel{
    padding:9px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-side-help{
    margin:3px 0 6px !important;
    color:#8f968f !important;
    font-size:7px !important;
    line-height:1.3 !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-box{
    margin-bottom:6px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-large,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-empty{
    gap:6px !important;
    min-height:46px !important;
    padding:6px !important;
    border-color:rgba(216,182,109,.36) !important;
    border-radius:3px !important;
    background:#0d1a1e !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-large>span,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-empty>span{
    font-size:18px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-large small,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-empty small{
    display:none !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-large strong,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-empty strong{
    font-size:10px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-large b,
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-empty b{
    margin-top:1px !important;
    font-size:7px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-selected-food-large>button{
    min-width:44px !important;
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:9px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage #combatAutoEatControl{
    min-height:30px !important;
    padding:5px 8px !important;
    font-size:8px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-food-select-row{
    gap:3px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-food-select-row label{
    font-size:7px !important;
    opacity:.72;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-food-select-row select{
    min-height:34px !important;
    padding:5px 8px !important;
    font-size:9px !important;
  }

  /* Session record is useful context, not the focal point. */
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-panel{
    min-height:0 !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-heading-meta{
    gap:4px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-heading-meta strong{
    padding:3px 5px !important;
    border:1px solid var(--combat-hierarchy-line-soft) !important;
    background:#0b171b !important;
    font-size:8px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-xp{
    gap:3px !important;
    margin:5px 0 !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-xp>div{
    min-height:0 !important;
    padding:4px 3px !important;
    border-color:var(--combat-hierarchy-line-soft) !important;
    border-radius:2px !important;
    background:#0b171b !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-xp small{
    font-size:6px !important;
    opacity:.66;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-xp strong{
    margin-top:0 !important;
    font-size:8px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-loot{
    gap:3px !important;
    margin-top:5px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-summary-row{
    gap:5px !important;
    padding:5px !important;
    border-color:var(--combat-hierarchy-line-soft) !important;
    border-radius:2px !important;
    background:#0d1a1e !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-session-summary-icon{
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
  }
}

/* Tablet keeps the hierarchy without forcing four cramped columns. */
@media (min-width:761px) and (max-width:900px){
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-skill-overview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Phone remains on the established mobile layout; only the new helper is compacted. */
@media (max-width:760px){
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help{
    margin-top:4px;
    padding:4px 6px;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help > span{
    flex-wrap:wrap;
    gap:3px 6px;
  }
  body.combat-hierarchy-phase1-v101272 #combatPage .combat-style-help small{
    flex-basis:100%;
    white-space:normal;
  }
}

/* ==========================================================================
   Legacy baseline layer: combat-main-layout-phase2.css
   ========================================================================== */
/* JourneyDen V1.01.273 — Combat UI Main Layout Rebuild Phase 2
   Scope: desktop/tablet composition only. Combat logic and authority are untouched.
   Goal: one readable combat workspace with roster left, encounter center, support rail right. */

body.combat-main-layout-phase2-v101273 #combatPage{
  --combat-p2-workspace:#0b1518;
  --combat-p2-divider:rgba(78,64,40,.34);
  --combat-p2-divider-strong:rgba(216,182,109,.46);
  --combat-p2-muted:#8f968f;
}

/* Keep the Phase 1 command summary visually separate from the live workspace. */
body.combat-main-layout-phase2-v101273 #combatPage .combat-command-deck{
  margin-bottom:8px !important;
}

/* Desktop combat becomes one coherent workspace instead of four competing boxes. */
@media (min-width:1041px){
  body.combat-main-layout-phase2-v101273 #combatPage .combat-layout-v2{
    display:grid !important;
    grid-template-areas:"roster battle support" !important;
    grid-template-columns:212px minmax(430px,1fr) 236px !important;
    gap:0 !important;
    align-items:stretch !important;
    min-width:0;
    padding:8px !important;
    border:1px solid var(--combat-p2-divider) !important;
    background:var(--combat-p2-workspace) !important;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.18) !important;
  }

  body.combat-main-layout-phase2-v101273 #combatPage .combat-roster-panel{
    grid-area:roster;
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
    min-height:548px !important;
    padding:2px 9px 2px 2px !important;
    border:0 !important;
    border-right:1px solid var(--combat-p2-divider) !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-panel{
    grid-area:battle;
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    min-height:548px !important;
    margin:0 9px !important;
    padding:10px !important;
    align-self:stretch !important;
  }

  body.combat-main-layout-phase2-v101273 #combatPage .combat-side-panel{
    grid-area:support;
    grid-column:3 !important;
    grid-row:1 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    gap:0 !important;
    min-width:0 !important;
    padding:2px 2px 2px 9px !important;
    border-left:1px solid var(--combat-p2-divider) !important;
    align-self:stretch !important;
  }

  /* Support sections read as one rail, not two separate dashboard cards. */
  body.combat-main-layout-phase2-v101273 #combatPage .combat-food-panel-v2{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-session-panel{
    grid-column:1 !important;
    grid-row:2 !important;
  }

  body.combat-main-layout-phase2-v101273 #combatPage .combat-food-panel-v2,
  body.combat-main-layout-phase2-v101273 #combatPage .combat-session-panel{
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-session-panel{
    min-height:0 !important;
    margin-top:10px !important;
    padding-top:10px !important;
    border-top:1px solid var(--combat-p2-divider) !important;
  }

  /* Align all three column headings to the same rhythm. */
  body.combat-main-layout-phase2-v101273 #combatPage .combat-roster-panel > .combat-panel-heading,
  body.combat-main-layout-phase2-v101273 #combatPage .combat-side-panel .combat-panel-heading,
  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-panel-heading{
    min-height:38px !important;
    margin:0 0 7px !important;
    padding:0 1px 6px !important;
  }

  /* The roster becomes a bounded navigation rail; the page itself stays stable. */
  body.combat-main-layout-phase2-v101273 #combatPage .combat-enemy-grid{
    max-height:492px !important;
    padding-right:2px !important;
    overscroll-behavior:contain;
  }

  /* Center encounter receives the largest share of width and a stable canvas. */
  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-view{
    min-height:482px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-idle-panel{
    min-height:474px !important;
  }

  /* Keep support content compact enough that the battle remains the dominant column. */
  body.combat-main-layout-phase2-v101273 #combatPage .combat-side-help{
    max-width:28ch;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-session-loot{
    max-height:205px !important;
  }
}

/* Wide desktop gives the encounter still more room without inflating side rails. */
@media (min-width:1420px){
  body.combat-main-layout-phase2-v101273 #combatPage .combat-layout-v2{
    grid-template-columns:226px minmax(520px,1fr) 248px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-panel{
    margin-inline:10px !important;
  }
}

/* Mid desktop: preserve the three-zone hierarchy instead of dropping support below the fight. */
@media (min-width:1041px) and (max-width:1260px){
  body.combat-main-layout-phase2-v101273 #combatPage .combat-layout-v2{
    grid-template-columns:196px minmax(390px,1fr) 214px !important;
    padding:7px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-panel{
    margin-inline:7px !important;
    padding:8px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-roster-panel{
    padding-right:7px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-side-panel{
    padding-left:7px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-enemy-card{
    grid-template-columns:44px minmax(0,1fr) auto !important;
    gap:6px !important;
    min-height:56px !important;
    padding:4px 5px 4px 4px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-roster-portrait{
    width:42px !important;
    height:42px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-enemy-xp{
    min-width:40px !important;
  }
}

/* Tablet/small desktop: two primary columns, support remains a single calm rail below. */
@media (min-width:761px) and (max-width:1040px){
  body.combat-main-layout-phase2-v101273 #combatPage .combat-layout-v2{
    display:grid !important;
    grid-template-columns:220px minmax(0,1fr) !important;
    grid-template-areas:
      "roster battle"
      "support support" !important;
    gap:7px !important;
    align-items:start !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-roster-panel{grid-area:roster;}
  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-panel{grid-area:battle;}
  body.combat-main-layout-phase2-v101273 #combatPage .combat-side-panel{
    grid-area:support;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-food-panel-v2{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-session-panel{
    grid-column:2 !important;
    grid-row:1 !important;
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-battle-panel,
  body.combat-main-layout-phase2-v101273 #combatPage .combat-roster-panel{
    min-height:500px !important;
  }
  body.combat-main-layout-phase2-v101273 #combatPage .combat-enemy-grid{
    max-height:440px !important;
  }
}

/* Phone keeps the established battle-first mobile stack from the locked mobile layer. */
@media (max-width:760px){
  body.combat-main-layout-phase2-v101273 #combatPage .combat-layout-v2{
    gap:6px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: combat-enemy-roster-phase3.css
   ========================================================================== */
/* JourneyDen V1.01.274 — Combat UI Enemy Roster Cleanup Phase 3
   Scope: enemy roster hierarchy and density only. Combat data/authority are untouched. */

body.combat-enemy-roster-phase3-v101274 #combatPage{
  --combat-p3-roster-line:rgba(78,64,40,.30);
  --combat-p3-roster-line-active:rgba(216,182,109,.60);
  --combat-p3-roster-ready:#928363;
  --combat-p3-roster-engaged:#a8ce69;
}

/* Keep the established phone roster intact for the later mobile-specific polish phase. */
@media (min-width:761px){
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-grid{
    gap:3px !important;
    padding-right:3px !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(126,91,42,.72) rgba(2,6,7,.78);
  }

  /* Enemy entries become compact navigation rows rather than mini dashboard cards. */
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card{
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    align-items:center !important;
    gap:6px !important;
    min-height:48px !important;
    padding:4px 6px 4px 4px !important;
    border:1px solid var(--combat-p3-roster-line) !important;
    border-radius:2px !important;
    background:rgba(7,15,18,.64) !important;
    box-shadow:none !important;
    transition:border-color .12s ease, background-color .12s ease !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card:hover:not(:disabled){
    border-color:rgba(216,182,109,.38) !important;
    background:rgba(12,25,29,.82) !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card:focus-visible{
    outline:1px solid rgba(216,182,109,.78) !important;
    outline-offset:1px !important;
  }

  /* The engaged target is unmistakable without turning the entire row into a bright panel. */
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card.active{
    border-color:var(--combat-p3-roster-line-active) !important;
    background:linear-gradient(90deg,rgba(154,113,49,.16),rgba(12,25,29,.80) 38%,rgba(7,15,18,.68)) !important;
    box-shadow:inset 2px 0 0 #d8b66d !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-roster-portrait{
    width:36px !important;
    height:36px !important;
    border-color:rgba(182,121,34,.18) !important;
    border-radius:2px !important;
    background:#020607 !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-copy{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "name state"
      "meta state" !important;
    column-gap:6px !important;
    row-gap:1px !important;
    align-items:center !important;
    min-width:0 !important;
  }

  /* Name and XP read as one primary line; XP stays secondary rather than a separate block. */
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-name-row{
    grid-area:name !important;
    display:flex !important;
    align-items:baseline !important;
    gap:5px !important;
    min-width:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-name-row strong{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#d6bc89 !important;
    font-size:10px !important;
    line-height:1.15 !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card.active .combat-enemy-name-row strong{
    color:#ead09b !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-xp{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    padding:0 !important;
    color:#b99a60 !important;
    font-size:7px !important;
    line-height:1 !important;
    text-align:left !important;
    opacity:.88;
  }

  /* Level + HP are the single supporting line. */
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-copy > small{
    grid-area:meta !important;
    display:block !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    color:#7e796a !important;
    font-size:7px !important;
    line-height:1.2 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Ready/Engaged becomes one consistent status chip at the row edge. */
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-state{
    grid-area:state !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-width:47px !important;
    margin:0 !important;
    padding:3px 4px 2px !important;
    border:1px solid rgba(118,94,56,.26) !important;
    border-radius:999px !important;
    background:rgba(7,12,13,.72) !important;
    color:var(--combat-p3-roster-ready) !important;
    font-size:6px !important;
    line-height:1 !important;
    letter-spacing:.065em !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-state::before{
    content:"";
    width:4px;
    height:4px;
    flex:0 0 4px;
    border-radius:50%;
    background:currentColor;
    opacity:.72;
  }

  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card.active .combat-enemy-state{
    border-color:rgba(168,206,105,.32) !important;
    background:rgba(82,111,47,.13) !important;
    color:var(--combat-p3-roster-engaged) !important;
  }

  /* A little more breathing room around the rail heading, less around each target. */
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-roster-panel > .combat-panel-heading{
    margin-bottom:5px !important;
  }
}


/* Mid desktop/tablet: give the enemy name the full row, then share the quieter second line with status. */
@media (min-width:761px) and (max-width:1260px){
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-copy{
    grid-template-areas:
      "name name"
      "meta state" !important;
    column-gap:4px !important;
  }
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-state{
    min-width:35px !important;
    padding:2px 3px !important;
    font-size:5.5px !important;
  }
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-copy > small{
    font-size:6.5px !important;
  }
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-xp{
    font-size:6.5px !important;
  }
}

/* Narrow tablet rail: preserve the same information hierarchy without crowding the status. */
@media (min-width:761px) and (max-width:880px){
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-card{
    grid-template-columns:34px minmax(0,1fr) !important;
    gap:5px !important;
    min-height:45px !important;
    padding:4px !important;
  }
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-roster-portrait{
    width:32px !important;
    height:32px !important;
  }
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-copy{
    column-gap:4px !important;
  }
  body.combat-enemy-roster-phase3-v101274 #combatPage .combat-enemy-state{
    min-width:33px !important;
    padding-inline:2px !important;
    font-size:5px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: combat-support-cleanup-phase4.css
   ========================================================================== */
/* JourneyDen V1.01.275 — Combat Support Cleanup Phase 4
   Scope: Combat Food / Auto-eat / Session Spoils presentation only.
   Combat actions, timing, rewards, Storage authority and Supabase behavior are untouched. */

body.combat-support-cleanup-phase4-v101275 #combatPage{
  --combat-p4-line: rgba(78,64,40,.30);
  --combat-p4-line-strong: rgba(216,182,109,.38);
  --combat-p4-muted: #8f968f;
  --combat-p4-gold: #d8b66d;
}


body.combat-support-cleanup-phase4-v101275 #combatPage .combat-food-cooldown-a11y{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}

/* The right rail should read like quiet support instrumentation, not another dashboard. */
@media (min-width:761px){
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-panel{
    align-content:start !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-panel .combat-panel-heading{
    min-height:32px !important;
    margin-bottom:5px !important;
    padding-bottom:5px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-panel .combat-panel-heading .eyebrow{
    font-size:7px !important;
    letter-spacing:.06em !important;
    opacity:.68;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-panel .combat-panel-heading h3{
    font-size:12px !important;
    line-height:1.1 !important;
  }

  /* Auto-eat becomes a compact state control instead of a full-sized action button. */
  body.combat-support-cleanup-phase4-v101275 #combatPage #combatAutoEatControl{
    min-width:0 !important;
    min-height:24px !important;
    padding:3px 7px !important;
    border:1px solid var(--combat-p4-line-strong) !important;
    border-radius:999px !important;
    background:#0a1518 !important;
    color:#aa9a7a !important;
    font-size:7px !important;
    line-height:1 !important;
    box-shadow:none !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage #combatAutoEatControl.active{
    border-color:rgba(132,164,91,.58) !important;
    background:rgba(61,84,46,.22) !important;
    color:#b8ce8d !important;
  }

  /* One concise rules line; no explanatory paragraph block. */
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-help{
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    max-width:none !important;
    margin:0 0 5px !important;
    padding:0 !important;
    color:var(--combat-p4-muted) !important;
    font-size:7px !important;
    line-height:1.2 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-help::before{
    content:'◆';
    flex:0 0 auto;
    color:rgba(216,182,109,.58);
    font-size:5px;
  }

  /* Selected food is a single supply row: item, remaining/heal, Eat. */
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-box{
    margin:0 0 5px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty{
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:6px !important;
    min-height:40px !important;
    padding:5px 5px !important;
    border:1px solid var(--combat-p4-line) !important;
    border-left:2px solid rgba(216,182,109,.56) !important;
    background:#0b171a !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large>span,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty>span{
    display:grid !important;
    width:30px !important;
    height:30px !important;
    place-items:center !important;
    overflow:hidden !important;
    border:1px solid rgba(216,182,109,.22) !important;
    background:#071013 !important;
    font-size:16px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large>span img,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty>span img{
    max-width:100% !important;
    max-height:100% !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large>div,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty>div{
    min-width:0 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large strong,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty strong{
    display:block !important;
    overflow:hidden !important;
    color:#e0d4bb !important;
    font-size:9px !important;
    line-height:1.15 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large b,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty b{
    display:block !important;
    margin-top:2px !important;
    color:#a99a7c !important;
    font-size:7px !important;
    font-weight:700 !important;
    line-height:1.1 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large>button{
    min-width:38px !important;
    min-height:28px !important;
    padding:4px 7px !important;
    border-color:rgba(216,182,109,.42) !important;
    font-size:8px !important;
  }

  /* The native selector stays predictable, but the redundant desktop label disappears. */
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-food-select-row{
    gap:0 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-food-select-row label{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage #combatFoodSelect{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 28px 0 7px !important;
    border-color:var(--combat-p4-line) !important;
    background:#081215 !important;
    color:#bdac8b !important;
    font-size:8px !important;
  }

  /* Session Spoils: totals are the headline; XP becomes quiet telemetry. */
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-panel{
    margin-top:8px !important;
    padding-top:8px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-heading-meta{
    display:flex !important;
    gap:3px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-heading-meta strong{
    min-width:0 !important;
    padding:2px 5px !important;
    border:1px solid var(--combat-p4-line) !important;
    border-radius:999px !important;
    background:#081215 !important;
    color:#bda777 !important;
    font-size:7px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-xp{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2px 8px !important;
    margin:4px 0 5px !important;
    padding:4px 5px !important;
    border:1px solid rgba(78,64,40,.20) !important;
    background:rgba(4,11,13,.42) !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-xp>div{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:5px !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-xp small{
    overflow:hidden !important;
    color:#747f7c !important;
    font-size:6px !important;
    line-height:1.25 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-xp strong{
    flex:0 0 auto !important;
    margin:0 !important;
    color:#b9aa8c !important;
    font-size:7px !important;
    line-height:1.25 !important;
  }

  /* Empty loot no longer creates another dashed/card-shaped region. */
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-loot{
    gap:2px !important;
    max-height:185px !important;
    margin-top:3px !important;
    padding:0 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-empty{
    min-height:0 !important;
    padding:4px 1px !important;
    border:0 !important;
    background:transparent !important;
    color:#68736f !important;
    font-size:7px !important;
    line-height:1.25 !important;
    text-align:left !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-summary-list{
    display:grid !important;
    gap:2px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-summary-row{
    display:grid !important;
    grid-template-columns:24px minmax(0,1fr) auto !important;
    gap:5px !important;
    min-height:30px !important;
    padding:3px 4px !important;
    border:1px solid rgba(78,64,40,.22) !important;
    background:#0a1518 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-summary-icon{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-summary-copy strong,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-summary-amount strong{
    font-size:7px !important;
    line-height:1.2 !important;
  }

  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-session-summary-amount strong{
    color:#c2ac7b !important;
  }
}

/* Mid desktop needs especially economical support controls. */
@media (min-width:1041px) and (max-width:1260px){
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-help{
    font-size:6px !important;
  }
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty{
    grid-template-columns:28px minmax(0,1fr) auto !important;
    gap:4px !important;
    padding-inline:4px !important;
  }
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-large>span,
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-selected-food-empty>span{
    width:28px !important;
    height:28px !important;
  }
}

/* Phone remains owned by the later responsive/mobile polish phase. */
@media (max-width:760px){
  body.combat-support-cleanup-phase4-v101275 #combatPage .combat-side-panel{
    gap:6px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: combat-responsive-mobile-phase5.css
   ========================================================================== */
/* JourneyDen V1.01.276 — Combat Responsive & Mobile Polish Phase 5
   Scope: responsive presentation only. Combat state, timing, rewards, actions,
   authority and Supabase request behavior remain unchanged. */

body.combat-responsive-phase5-v101276 #combatPage{
  --combat-p5-line:rgba(78,64,40,.30);
  --combat-p5-gold:#d8b66d;
  --combat-p5-muted:#87908a;
}

/* Tablet / narrow desktop: keep the two-zone hierarchy usable without making
   the roster or command deck feel like separate full pages. */
@media (min-width:761px) and (max-width:1040px){
  body.combat-responsive-phase5-v101276 #combatPage .combat-command-deck{
    gap:6px !important;
    margin-bottom:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skills-inline-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-style-panel{
    padding:7px 8px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-layout-v2{
    grid-template-columns:200px minmax(0,1fr) !important;
    gap:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-battle-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-roster-panel{
    min-height:460px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-grid{
    max-height:404px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-side-panel{
    gap:6px !important;
  }
}

/* Phone: battle-first hierarchy with compact command controls and roster rows.
   The document remains the only vertical scroll owner. */
@media (max-width:760px){
  body.combat-responsive-phase5-v101276 #combatPage{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-command-deck{
    display:grid !important;
    gap:5px !important;
    margin:0 0 6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skills-inline-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-style-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-roster-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-battle-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-food-panel-v2,
  body.combat-responsive-phase5-v101276 #combatPage .combat-session-panel{
    border-radius:3px !important;
  }

  /* Skills are reference information. Keep them available before a fight,
     but remove the extra block from the active-combat viewport. */
  body.combat-responsive-phase5-v101276 #combatPage.combat-active .combat-skills-inline-panel{
    display:none !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skills-inline-panel{
    padding:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card{
    min-height:44px !important;
    padding:4px 3px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card .skill-overview-main{
    grid-template-columns:18px minmax(0,1fr) auto !important;
    gap:2px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card .skill-overview-icon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card .skill-overview-copy strong{
    font-size:7px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card .skill-overview-level b{
    font-size:10px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card .skill-overview-progress{
    height:2px !important;
    margin-top:3px !important;
  }

  /* Stances are controls, not cards: a readable 2x2 selector before combat.
     During combat it compresses to one four-choice command strip. */
  body.combat-responsive-phase5-v101276 #combatPage .combat-style-panel{
    padding:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-heading{
    min-height:26px !important;
    margin:0 0 4px !important;
    padding:0 0 4px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:3px !important;
    overflow:visible !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-button{
    display:grid !important;
    grid-template-columns:20px minmax(0,1fr) !important;
    align-items:center !important;
    justify-items:start !important;
    gap:5px !important;
    min-height:44px !important;
    padding:5px 6px !important;
    text-align:left !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-button .combat-style-icon{
    width:20px !important;
    height:20px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-button strong{
    font-size:8px !important;
    text-align:left !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-help{
    margin-top:3px !important;
    padding:3px 5px !important;
    font-size:7px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage.combat-active .combat-style-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage.combat-active .combat-style-button{
    grid-template-columns:1fr !important;
    justify-items:center !important;
    min-height:44px !important;
    padding:4px 2px !important;
    text-align:center !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage.combat-active .combat-style-button .combat-style-icon{
    display:none !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage.combat-active .combat-style-button strong{
    font-size:7px !important;
    text-align:center !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage.combat-active .combat-style-help{
    display:none !important;
  }

  /* One simple mobile stack. Existing active/inactive ordering still decides
     whether Battle or Roster comes first. */
  body.combat-responsive-phase5-v101276 #combatPage .combat-layout-v2{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    width:100% !important;
    min-width:0 !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-roster-panel,
  body.combat-responsive-phase5-v101276 #combatPage .combat-battle-panel{
    min-height:0 !important;
    padding:6px !important;
  }

  /* Enemy roster becomes compact tap targets instead of a gallery of giant
     portraits. This dramatically shortens the inactive combat screen. */
  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-card{
    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    align-items:center !important;
    gap:5px !important;
    min-height:52px !important;
    padding:4px !important;
    border-radius:3px !important;
    text-align:left !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-roster-portrait{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-roster-portrait .combat-enemy-icon-art,
  body.combat-responsive-phase5-v101276 #combatPage .combat-roster-portrait img{
    width:36px !important;
    height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-copy{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "name name"
      "meta state" !important;
    gap:1px 4px !important;
    min-width:0 !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-name-row{
    grid-area:name !important;
    justify-content:flex-start !important;
    gap:4px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-name-row strong{
    font-size:8px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-xp{
    font-size:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-copy > small{
    grid-area:meta !important;
    font-size:6.5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-state{
    grid-area:state !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-top:0 !important;
    background:transparent !important;
    font-size:6px !important;
    line-height:1 !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-card.active{
    border-color:rgba(216,182,109,.68) !important;
    box-shadow:inset 2px 0 0 var(--combat-p5-gold) !important;
  }

  /* Active battlefield is the primary phone surface. Large art remains clear
     without occupying most of the viewport. */
  body.combat-responsive-phase5-v101276 #combatPage .combat-battle-panel{
    padding:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-battle-clean{
    gap:4px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-fighter-clean.enemy,
  body.combat-responsive-phase5-v101276 #combatPage .combat-fighter-clean.player{
    padding:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-fighter-clean.enemy .combat-fighter-portrait{
    min-height:128px !important;
    max-height:154px !important;
    margin-bottom:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-fighter-clean.enemy .combat-enemy-portrait .combat-fighter-enemy-art{
    max-height:150px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-fighter-clean-head{
    margin-bottom:4px !important;
    padding-bottom:4px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-health-bar{
    height:7px !important;
    margin:3px 0 5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-progress-track{
    height:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-clean-stats span{
    min-height:32px !important;
    padding:4px 2px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-encounter-footer{
    padding:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-repeat-note{
    min-height:32px !important;
    padding:5px 6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-stop-button{
    min-height:44px !important;
  }

  /* Support becomes a compact secondary HUD. Keep controls comfortably tappable
     while applying the calmer Phase 4 hierarchy to phone too. */
  body.combat-responsive-phase5-v101276 #combatPage .combat-side-panel{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-food-panel-v2,
  body.combat-responsive-phase5-v101276 #combatPage .combat-session-panel{
    padding:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-panel-heading{
    min-height:26px !important;
    margin-bottom:4px !important;
    padding-bottom:4px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage #combatAutoEatControl{
    min-height:44px !important;
    padding:5px 9px !important;
    border-radius:999px !important;
    font-size:7px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-side-help{
    display:flex !important;
    margin:0 0 4px !important;
    font-size:6.5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-selected-food-large,
  body.combat-responsive-phase5-v101276 #combatPage .combat-selected-food-empty{
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) auto !important;
    gap:5px !important;
    min-height:42px !important;
    padding:5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-selected-food-large > span,
  body.combat-responsive-phase5-v101276 #combatPage .combat-selected-food-empty > span{
    width:30px !important;
    height:30px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-selected-food-large > button{
    min-width:44px !important;
    min-height:44px !important;
    padding:6px 9px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage #combatFoodSelect{
    min-height:44px !important;
    height:44px !important;
    max-height:44px !important;
    font-size:9px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-session-panel{
    margin-top:0 !important;
    padding-top:6px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-session-xp{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:2px 8px !important;
    margin:3px 0 4px !important;
    padding:4px 5px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-session-xp > div{
    min-height:0 !important;
    padding:0 !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-mobile-fold{
    min-height:44px !important;
    padding:6px 7px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-session-loot{
    max-height:none !important;
  }
}

/* Very narrow phones: one roster row per line avoids name/status truncation. */
@media (max-width:360px){
  body.combat-responsive-phase5-v101276 #combatPage .combat-enemy-grid{
    grid-template-columns:1fr !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-style-button{
    padding-inline:4px !important;
  }

  body.combat-responsive-phase5-v101276 #combatPage .combat-skill-overview-card .skill-overview-copy strong{
    font-size:6.5px !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: phone-mobile-ownership.css
   ========================================================================== */
/* JourneyDen V1.01.307 — Mobile Vertical Scroll Recovery
   Final mobile CSS ownership layer. This file is intentionally loaded last.
   It consolidates the former V1.01.302 route hotfix, V1.01.304 keyboard/viewport
   presentation layer, and V1.01.305 <=900px shell/breakpoint layer.
   Gameplay, authority, persistence and Supabase behavior are untouched. */

@media (max-width:900px){
  /* Top-level route visibility has exactly one mobile owner. Component styles may
     lay out content inside a page, but may never make an inactive page visible. */
  body.phone-mobile-ownership-v101307 main > .page:not(.active){
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 main > .page.active{
    display:block !important;
  }
}

/* VisualViewport / keyboard ownership (consolidated from V1.01.304). */
@media (max-width:900px){
  :root{
    --jd-phone-visual-height:100dvh;
    --jd-phone-visual-width:100vw;
    --jd-phone-visual-offset-top:0px;
    --jd-phone-visual-offset-left:0px;
    --jd-phone-keyboard-inset:0px;
  }

  body.phone-input-focused :is(input:not([type="checkbox"]):not([type="radio"]),textarea,[contenteditable="true"]){
    scroll-margin-top:18px;
    scroll-margin-bottom:18px;
  }

  /* The fixed game nav should never sit over Android's keyboard or the focused field. */
  body.phone-keyboard-open .mobile-top-navigation{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(calc(100% + env(safe-area-inset-bottom))) !important;
  }

  body.phone-keyboard-open main{
    padding-bottom:max(12px,env(safe-area-inset-bottom)) !important;
  }

  body.phone-keyboard-open .gain-feed{
    bottom:max(10px,env(safe-area-inset-bottom)) !important;
  }

  /* Keep bottom sheets/dialogs within the *visible* viewport, not the layout viewport. */
  body.phone-mobile-ownership-v101307 :is(
    .offline-modal,
    .cloud-conflict-modal,
    .expedition-start-modal,
    .sell-confirm-modal,
    .chapter-finale-modal,
    .skill-detail-modal,
    .skill-details-modal,
    .bank-item-modal-v2,
    .mobile-activity-skill-picker
  ){
    top:var(--jd-phone-visual-offset-top) !important;
    bottom:auto !important;
    height:var(--jd-phone-visual-height) !important;
    max-height:var(--jd-phone-visual-height) !important;
  }

  body.phone-mobile-ownership-v101307 :is(
    .offline-modal-card,
    .cloud-conflict-card,
    .expedition-start-card,
    .sell-confirm-card,
    .chapter-finale-card,
    .skill-detail-panel,
    .skill-details-panel,
    .skill-detail-modal-card,
    .bank-item-panel-v2,
    .mobile-activity-skill-picker-panel
  ){
    max-height:calc(var(--jd-phone-visual-height) - 12px) !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* More is a bottom sheet too. It must respect the visible viewport when Chrome UI changes height. */
  body.phone-mobile-ownership-v101307 .mobile-nav-more{
    max-height:min(66dvh,calc(var(--jd-phone-visual-height) - 84px)) !important;
    overscroll-behavior:contain;
  }

  /* Auth/standalone full-screen overlays also follow the real visual viewport. */
  body.phone-mobile-ownership-v101307 #authGate{
    min-height:var(--jd-phone-visual-height) !important;
    height:var(--jd-phone-visual-height) !important;
  }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  body.phone-mobile-ownership-v101307 .mobile-top-navigation{
    transition:none !important;
  }
}

/* <=900px shell + landscape/breakpoint ownership (consolidated from V1.01.305). */
@media (max-width:900px){
  :root{
    --jd-mobile-shell-max:900px;
    --jd-mobile-nav-height:66px;
    --jd-mobile-topbar-height:54px;
    --jd-mobile-page-pad:10px;
  }

  html{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y pinch-zoom !important;
  }

  body.phone-mobile-ownership-v101307{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
    padding-bottom:calc(var(--jd-mobile-nav-height) + env(safe-area-inset-bottom,0px)) !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y pinch-zoom !important;
    scroll-padding-top:calc(var(--jd-mobile-topbar-height) + 8px) !important;
    scroll-padding-bottom:calc(var(--jd-mobile-nav-height) + 12px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* <=900px has one shell owner: no desktop sidebar + complete mobile command bar. */
  body.phone-mobile-ownership-v101307 .sidebar{
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-top-navigation{
    position:fixed !important;
    inset:auto 0 0 0 !important;
    z-index:1700 !important;
    display:grid !important;
    grid-template-columns:minmax(0,4fr) minmax(60px,1fr) !important;
    align-items:stretch !important;
    width:100% !important;
    padding:0 0 env(safe-area-inset-bottom,0px) !important;
    border-top:1px solid rgba(244,183,45,.17) !important;
    border-bottom:0 !important;
    background:rgba(7,16,24,.985) !important;
    box-shadow:0 -10px 30px rgba(2,8,13,.42) !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-primary{
    position:relative !important;
    z-index:1720 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:3px !important;
    padding:5px 6px 6px !important;
    background:transparent !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-item{
    min-width:0 !important;
    min-height:54px !important;
    gap:3px !important;
    padding:5px 2px !important;
    border-radius:10px !important;
    touch-action:manipulation !important;
  }

  body.phone-mobile-ownership-v101307 #mobileMoreNavButton.mobile-utility-menu-button{
    position:relative !important;
    inset:auto !important;
    align-self:stretch !important;
    width:auto !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:5px 5px 5px 1px !important;
    padding:5px 2px 4px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-item > span{
    min-height:24px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-item > b{
    min-width:0 !important;
    font-size:9px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more[hidden]{
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-backdrop{
    display:none !important;
    position:fixed !important;
    inset:0 0 calc(var(--jd-mobile-nav-height) + env(safe-area-inset-bottom,0px)) 0 !important;
    z-index:1690 !important;
    width:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:rgba(0,0,0,.54) !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more:not([hidden]) + .mobile-nav-more-backdrop{
    display:block !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more{
    top:auto !important;
    bottom:100% !important;
    left:6px !important;
    right:6px !important;
    max-height:min(72dvh,calc(var(--jd-phone-visual-height,100dvh) - var(--jd-mobile-nav-height) - 12px),620px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    border-radius:14px 14px 0 0 !important;
  }

  /* The 821–900px gap previously received mobile components without a mobile shell. */
  body.phone-mobile-ownership-v101307 .mobile-header-logo{
    display:block !important;
    width:76px !important;
    height:auto !important;
    max-height:34px !important;
    object-fit:contain !important;
  }

  body.phone-mobile-ownership-v101307 .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:1450 !important;
    display:grid !important;
    grid-template-columns:76px minmax(82px,1fr) auto !important;
    align-items:center !important;
    gap:7px !important;
    min-height:var(--jd-mobile-topbar-height) !important;
    padding:max(7px,env(safe-area-inset-top,0px)) 8px 7px !important;
    border-bottom:1px solid rgba(244,183,45,.12) !important;
    background:rgba(8,18,27,.975) !important;
  }

  body.phone-mobile-ownership-v101307 .topbar-title > :is(.eyebrow,p){
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 .topbar-title{
    display:block !important;
    min-width:0 !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:5px 7px !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat > span{
    display:block !important;
    font-size:8px !important;
    line-height:1 !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat > strong{
    display:block !important;
    margin-top:2px !important;
    overflow:hidden !important;
    font-size:11px !important;
    line-height:1.1 !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat .health-bar{
    height:5px !important;
    margin-top:4px !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats{
    display:grid !important;
    grid-template-columns:repeat(2,56px) !important;
    gap:4px !important;
    width:auto !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-content:center !important;
    gap:2px !important;
    width:56px !important;
    min-width:0 !important;
    min-height:40px !important;
    padding:4px 5px !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > div{
    display:grid !important;
    gap:2px !important;
    min-width:0 !important;
    width:100% !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > div > :is(span,strong){
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-align:center !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > div > span{
    font-size:6.5px !important;
    line-height:1 !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > div > strong{
    font-size:10.5px !important;
    line-height:1 !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-interface-icon-art{
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > :is(span,strong){
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > span{
    font-size:6.5px !important;
    line-height:1 !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip > strong{
    font-size:10.5px !important;
    line-height:1 !important;
  }

  body.phone-mobile-ownership-v101307 :is(.app-shell,.app-main,main,.page){
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  body.phone-mobile-ownership-v101307 main{
    padding:var(--jd-mobile-page-pad) !important;
  }

  /* Keep the document root as the vertical scroll owner through the entire mobile range. */
  body.phone-mobile-ownership-v101307 :is(.app-shell,.app-main,main,.page){
    height:auto !important;
    overflow:visible !important;
    overflow-y:visible !important;
    overscroll-behavior-y:auto !important;
  }

  body.phone-mobile-ownership-v101307 :is(img,svg,canvas,video){
    max-width:100% !important;
  }

  body.phone-mobile-ownership-v101307 :is(button,[role="button"]){
    min-height:44px;
    touch-action:manipulation;
  }

  body.phone-mobile-ownership-v101307 :is(input,select,textarea){
    min-height:44px;
  }

  body.phone-mobile-ownership-v101307 .gain-feed{
    bottom:calc(var(--jd-mobile-nav-height) + 10px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* Compact-height ownership for landscape phones and short foldable panes.
   Width alone is not enough: a 390px-high landscape phone needs a shorter shell. */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  :root{
    --jd-mobile-nav-height:50px;
    --jd-mobile-topbar-height:44px;
    --jd-mobile-page-pad:7px;
  }

  body.phone-mobile-ownership-v101307{
    scroll-padding-top:48px !important;
    scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)) !important;
  }

  body.phone-mobile-ownership-v101307 .topbar{
    position:relative !important;
    grid-template-columns:60px minmax(72px,1fr) auto !important;
    gap:5px !important;
    min-height:44px !important;
    padding:4px 7px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-header-logo{
    width:60px !important;
    max-height:27px !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat > span,
  body.phone-mobile-ownership-v101307 .top-stats .stat-chip span{
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat > strong{
    margin:0 !important;
    font-size:10px !important;
  }

  body.phone-mobile-ownership-v101307 .health-header-stat .health-bar{
    height:4px !important;
    margin-top:3px !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats{
    grid-template-columns:repeat(2,48px) !important;
    gap:3px !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip{
    width:48px !important;
    min-height:32px !important;
    padding:3px 4px !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip strong{
    font-size:10px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-primary{
    gap:2px !important;
    padding:3px 5px 4px !important;
  }

  body.phone-mobile-ownership-v101307 #mobileMoreNavButton.mobile-utility-menu-button{
    min-height:46px !important;
    margin:3px 4px 3px 1px !important;
    padding:3px 2px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-item{
    min-height:46px !important;
    grid-template-columns:22px minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    align-content:center !important;
    justify-content:center !important;
    gap:4px !important;
    padding:3px 4px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-item > span{
    min-height:0 !important;
    font-size:16px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-item > b{
    font-size:8px !important;
    text-align:left !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more{
    left:5px !important;
    right:5px !important;
    max-height:calc(var(--jd-phone-visual-height,100dvh) - 58px) !important;
    padding:7px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-heading{
    margin:-7px -7px 5px !important;
    padding:7px 9px 6px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-heading span{
    display:none !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-groups{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-group{
    padding:5px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-label{
    font-size:7.5px !important;
    padding-bottom:4px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-grid{
    grid-template-columns:1fr !important;
    gap:3px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-item{
    min-height:40px !important;
    grid-template-columns:25px minmax(0,1fr) !important;
    padding:4px 6px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-item > b{
    font-size:8.5px !important;
  }

  body.phone-mobile-ownership-v101307 .current-journey-tracker{
    margin:5px 7px 0 !important;
  }

  body.phone-mobile-ownership-v101307 .page > :is(.section-heading.reference-page-heading,.reference-page-heading),
  body.phone-mobile-ownership-v101307 #equipmentPage > .equipment-page-heading{
    margin-bottom:6px !important;
    padding-block:6px !important;
  }

  body.phone-mobile-ownership-v101307 :is(
    .offline-modal-card,.cloud-conflict-card,.expedition-start-card,.sell-confirm-card,
    .chapter-finale-card,.skill-detail-panel,.skill-details-panel,.skill-detail-modal-card,
    .bank-item-panel-v2,.mobile-activity-skill-picker-panel
  ){
    max-height:calc(var(--jd-phone-visual-height,100dvh) - 8px) !important;
  }
}

/* Narrow portrait density stays owned here rather than relying on an unrelated 430px repair layer. */
@media (max-width:430px) and (orientation:portrait){
  :root{ --jd-mobile-page-pad:8px; }

  body.phone-mobile-ownership-v101307 .topbar{
    grid-template-columns:72px minmax(76px,1fr) auto !important;
    gap:5px !important;
    padding-inline:6px !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-header-logo{
    width:72px !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats{
    grid-template-columns:repeat(2,52px) !important;
  }

  body.phone-mobile-ownership-v101307 .top-stats .stat-chip{
    width:52px !important;
  }
}

@media (min-width:901px){
  body.phone-mobile-ownership-v101307 .mobile-top-navigation{
    display:none !important;
  }
}

@media (max-width:900px) and (prefers-reduced-motion:reduce){
  body.phone-mobile-ownership-v101307 :is(.topbar,.mobile-top-navigation,.mobile-nav-item,.mobile-nav-more){
    transition:none !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: phone-more-navigation-hotfix.css
   ========================================================================== */
/* JourneyDen V1.01.321 — Phone More navigation stacking hotfix.
   The legacy mobile-game-feel bundle forces .mobile-nav-more to z-index:4!important.
   V1.01.307 moved the backdrop into the 1690+ phone navigation stack but did not
   re-own the menu z-index, allowing the backdrop to cover the More sheet. */
@media (max-width: 900px) {
  body.phone-mobile-ownership-v101307 .mobile-top-navigation {
    isolation: isolate !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-backdrop {
    z-index: 1710 !important;
    pointer-events: auto !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-primary {
    z-index: 1720 !important;
  }

  body.phone-mobile-ownership-v101307 #mobileMoreNavButton.mobile-utility-menu-button {
    z-index: 1720 !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more:not([hidden]) {
    z-index: 1740 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body.phone-mobile-ownership-v101307 .mobile-nav-more-item {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: expedition-approved-mockup.css
   ========================================================================== */
/* JourneyDen V1.01.338 — Expedition approved mockup implementation
   Visual target: /mnt/data/expeditielogboek_van_het_fluisterwoud.png */
body.expedition-approved-mockup-v101338 {
  --exp338-bg: #071115;
  --exp338-panel: #091419;
  --exp338-panel-2: #0b171b;
  --exp338-panel-3: #101b1e;
  --exp338-line: rgba(176, 121, 44, .34);
  --exp338-line-strong: rgba(205, 149, 63, .78);
  --exp338-gold: #d29a43;
  --exp338-gold-bright: #efc56f;
  --exp338-cream: #e8ddc5;
  --exp338-muted: #9e947e;
  --exp338-green: #9ccf45;
  --exp338-red: #ca594d;
  --exp338-red-dark: #6e211b;
}

body.expedition-approved-mockup-v101338 #expeditionsPage {
  color: var(--exp338-cream);
  padding-bottom: 10px;
}

/* Header — intentionally open, matching the approved mockup rather than the old boxed dossier. */
body.expedition-approved-mockup-v101338 .expedition-log-page-heading {
  min-height: 104px;
  margin: 0 0 12px !important;
  padding: 12px 18px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(176,121,44,.28) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 57% 20%, rgba(79,91,73,.08), transparent 30%),
    linear-gradient(180deg, rgba(7,17,21,.08), rgba(7,17,21,.28)) !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading::before,
body.expedition-approved-mockup-v101338 .expedition-log-page-heading::after { display:none !important; }
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .reference-page-heading-title {
  display:flex;
  align-items:center;
  gap:18px;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .reference-page-heading-icon {
  width:68px !important;
  height:68px !important;
  border:1px solid rgba(190,132,49,.54) !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(86,57,22,.3),rgba(4,11,14,.86) 67%) !important;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 5px rgba(181,123,40,.07),0 0 18px rgba(181,123,40,.06) !important;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .reference-page-heading-icon img {
  width:44px !important;
  height:44px !important;
  filter:sepia(1) saturate(.86) brightness(1.35) !important;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .eyebrow {
  color:var(--exp338-gold-bright);
  font-size:11px;
  letter-spacing:.075em;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading h2 {
  margin:2px 0 2px !important;
  color:var(--exp338-cream) !important;
  font-size:clamp(31px,2.35vw,42px) !important;
  line-height:1;
  letter-spacing:.012em !important;
  text-transform:none;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading p {
  margin:7px 0 0 !important;
  color:#a79f8d !important;
  font-size:12px;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .combat-level-badge {
  min-width:150px !important;
  min-height:72px;
  padding:10px 14px !important;
  border:1px solid rgba(176,121,44,.27) !important;
  border-radius:7px !important;
  background:rgba(6,15,18,.72) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28) !important;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .combat-level-badge::before {
  content:"♜";
  position:absolute;
  margin-left:-86px;
  font-size:31px;
  color:#d5b36f;
  opacity:.9;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .combat-level-badge small {
  color:#9b9078;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.06em;
}
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .combat-level-badge strong {
  color:var(--exp338-gold-bright) !important;
  font-size:25px !important;
  line-height:1.1;
}

/* Two-column composition from the approved image. */
body.expedition-approved-mockup-v101338 .expedition-log-layout {
  display:grid !important;
  grid-template-columns:minmax(390px, 28.5%) minmax(0, 1fr) !important;
  gap:14px !important;
  align-items:start !important;
}
body.expedition-approved-mockup-v101338 .expedition-log-list-panel,
body.expedition-approved-mockup-v101338 .expedition-log-detail-panel {
  min-width:0;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.expedition-approved-mockup-v101338 .expedition-log-list-panel::before { display:none !important; }
body.expedition-approved-mockup-v101338 .expedition-log-list-panel {
  padding:14px !important;
  border:1px solid rgba(176,121,44,.27) !important;
  border-radius:8px !important;
  background:linear-gradient(180deg,rgba(9,20,24,.96),rgba(5,14,17,.96)) !important;
}

/* Filter rail. */
body.expedition-approved-mockup-v101338 .exp-log-filter-tabs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 0 13px;
}
body.expedition-approved-mockup-v101338 .exp-log-filter-tabs button {
  min-height:43px !important;
  padding:0 12px !important;
  border:1px solid rgba(181,123,40,.3) !important;
  border-radius:5px !important;
  background:#081317 !important;
  color:#c5b28b !important;
  font-size:10px !important;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3) !important;
}
body.expedition-approved-mockup-v101338 .exp-log-filter-tabs button.active {
  border-color:#d7a04c !important;
  background:linear-gradient(180deg,#745223,#2e2516) !important;
  color:#f2d79f !important;
  box-shadow:inset 0 0 0 1px rgba(238,193,100,.14),0 0 9px rgba(193,129,38,.16) !important;
}

/* Expedition cards. */
body.expedition-approved-mockup-v101338 .exp-log-region-list { display:grid; gap:11px; }
body.expedition-approved-mockup-v101338 .exp-log-region-card {
  width:100%;
  min-height:165px;
  display:grid !important;
  grid-template-columns:136px minmax(0,1fr);
  gap:0;
  padding:0 !important;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(176,121,44,.3) !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#0d191d,#081215) !important;
  color:var(--exp338-cream) !important;
  text-align:left;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.36) !important;
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease !important;
}
body.expedition-approved-mockup-v101338 .exp-log-region-card:hover {
  transform:none !important;
  border-color:rgba(214,163,77,.64) !important;
  background:linear-gradient(180deg,#101d21,#091519) !important;
}
body.expedition-approved-mockup-v101338 .exp-log-region-card.selected {
  border-color:#dfa544 !important;
  box-shadow:inset 0 0 0 2px rgba(221,158,57,.22),0 0 13px rgba(206,136,31,.18) !important;
}
body.expedition-approved-mockup-v101338 .exp-log-region-card.selected::after {
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(238,190,91,.23);
  border-radius:4px;
  pointer-events:none;
}
body.expedition-approved-mockup-v101338 .exp-log-region-card.locked { opacity:.74; }
body.expedition-approved-mockup-v101338 .exp-log-region-art {
  display:block;
  min-height:163px;
  border-right:1px solid rgba(176,121,44,.24);
  background-size:cover;
  background-position:center;
  position:relative;
}
body.expedition-approved-mockup-v101338 .exp-log-region-art::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(7,16,19,.72)),linear-gradient(180deg,transparent 65%,rgba(0,0,0,.22));
}
body.expedition-approved-mockup-v101338 .exp-log-region-card.locked .exp-log-region-art::before,
body.expedition-approved-mockup-v101338 .exp-log-region-card.progress .exp-log-region-art::before {
  content:"🔒";
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(219,198,154,.35);
  border-radius:50%;
  background:rgba(5,11,14,.82);
  font-size:15px;
  filter:grayscale(1);
}
body.expedition-approved-mockup-v101338 .exp-log-region-card.selected .exp-log-region-art::before {
  content:"✓";
  position:absolute;
  z-index:2;
  top:10px;
  left:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(218,166,65,.82);
  border-radius:50%;
  background:rgba(51,40,17,.9);
  color:#f0c766;
  font-size:16px;
  font-weight:800;
}
body.expedition-approved-mockup-v101338 .exp-log-region-main {
  padding:18px 18px 13px !important;
  min-width:0;
  display:flex;
  flex-direction:column;
}
body.expedition-approved-mockup-v101338 .exp-log-card-title {
  display:block !important;
}
body.expedition-approved-mockup-v101338 .exp-log-card-title strong {
  display:block;
  color:#e6c273 !important;
  font-size:19px !important;
  line-height:1.05;
}
body.expedition-approved-mockup-v101338 .exp-log-card-title em {
  display:inline-flex;
  margin-top:11px;
  padding:4px 8px !important;
  border:1px solid rgba(122,151,89,.43) !important;
  border-radius:3px !important;
  background:rgba(19,45,23,.45) !important;
  color:#9fd54a !important;
  font-size:8px !important;
  font-style:normal;
  letter-spacing:.055em;
  text-transform:uppercase;
}
body.expedition-approved-mockup-v101338 .exp-log-region-card.locked .exp-log-card-title em,
body.expedition-approved-mockup-v101338 .exp-log-region-card.progress .exp-log-card-title em {
  border-color:rgba(119,140,148,.28) !important;
  background:rgba(14,24,29,.62) !important;
  color:#8998a0 !important;
}
body.expedition-approved-mockup-v101338 .exp-log-region-main > small {
  order:-1;
  margin:5px 0 0 !important;
  color:#a99b7b !important;
  font-size:11px !important;
}
body.expedition-approved-mockup-v101338 .exp-log-card-title + small { order:0; }
body.expedition-approved-mockup-v101338 .exp-log-card-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:auto !important;
  padding-top:15px !important;
  color:#9f8b66 !important;
  font-size:8px !important;
}
body.expedition-approved-mockup-v101338 .exp-log-card-stats span { display:flex; flex-direction:column; gap:3px; }
body.expedition-approved-mockup-v101338 .exp-log-card-stats b { color:#d9c28e !important; font-size:11px !important; }
body.expedition-approved-mockup-v101338 .exp-log-card-progress { display:none !important; }
body.expedition-approved-mockup-v101338 .exp-log-lock-note { display:none !important; }
body.expedition-approved-mockup-v101338 .exp-log-next-chapter {
  min-height:88px;
  margin:14px 0 0 !important;
  padding:12px 16px !important;
  border:1px solid rgba(176,121,44,.18) !important;
  border-radius:7px !important;
  background:rgba(5,12,15,.64) !important;
  display:flex;
  gap:14px;
  align-items:center;
}
body.expedition-approved-mockup-v101338 .exp-log-next-chapter > span {
  width:38px;height:38px;display:grid;place-items:center;font-size:24px;filter:grayscale(1);opacity:.8;
}
body.expedition-approved-mockup-v101338 .exp-log-next-chapter strong { color:#b9a77d !important; font-size:12px !important; }
body.expedition-approved-mockup-v101338 .exp-log-next-chapter small { color:#7d796c !important; font-size:9px !important; line-height:1.4; }

/* Right side — hero/detail shell. */
body.expedition-approved-mockup-v101338 .exp-log-detail-shell {
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.expedition-approved-mockup-v101338 .exp-log-detail-shell::before { display:none !important; }
body.expedition-approved-mockup-v101338 .exp338-hero {
  min-height:191px;
  display:grid;
  grid-template-columns:minmax(310px,34%) minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(176,121,44,.28);
  border-radius:8px;
  background:linear-gradient(90deg,#0a161a,#071115);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
body.expedition-approved-mockup-v101338 .exp338-hero-art {
  min-height:190px;
  display:block;
  background-size:cover;
  background-position:center;
  border-right:1px solid rgba(176,121,44,.18);
  position:relative;
}
body.expedition-approved-mockup-v101338 .exp338-hero-art::after {
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,rgba(6,15,18,.9)),linear-gradient(0deg,rgba(0,0,0,.08),transparent 45%);
}
body.expedition-approved-mockup-v101338 .exp338-hero-copy {
  min-width:0;
  padding:31px 28px 20px;
  position:relative;
  background:
    radial-gradient(circle at 88% 46%, rgba(112,82,34,.11), transparent 23%),
    linear-gradient(90deg,rgba(10,20,23,.97),rgba(6,15,18,.97));
}
body.expedition-approved-mockup-v101338 .exp338-hero-copy::after {
  content:"✥";
  position:absolute;right:30px;top:29px;font-size:94px;line-height:1;color:rgba(174,122,43,.07);transform:rotate(12deg);pointer-events:none;
}
body.expedition-approved-mockup-v101338 .exp338-hero-copy .eyebrow {
  display:block;color:#d49c3e !important;font-size:10px !important;letter-spacing:.075em;text-transform:uppercase;
}
body.expedition-approved-mockup-v101338 .exp338-hero-copy h2 {
  margin:7px 0 20px !important;
  color:#eee5d3 !important;
  font-size:clamp(28px,2.25vw,39px) !important;
  line-height:1;
  letter-spacing:.006em !important;
}
body.expedition-approved-mockup-v101338 .exp338-meta {
  display:grid;
  grid-template-columns:1.05fr .7fr 1.45fr .82fr .95fr;
  gap:7px;
  position:relative;
  z-index:1;
}
body.expedition-approved-mockup-v101338 .exp338-meta-chip {
  min-width:0;
  min-height:56px;
  padding:8px 10px;
  border:1px solid rgba(176,121,44,.25);
  border-radius:5px;
  background:rgba(5,14,17,.74);
  display:flex;
  align-items:center;
  gap:8px;
}
body.expedition-approved-mockup-v101338 .exp338-meta-chip > i {
  flex:0 0 auto;
  width:25px;height:25px;display:grid;place-items:center;
  color:#d2ae68;font-style:normal;font-size:17px;
}
body.expedition-approved-mockup-v101338 .exp338-meta-chip.completed > i { color:#9dd04b; }
body.expedition-approved-mockup-v101338 .exp338-meta-chip.entry > i { color:#62d99b; }
body.expedition-approved-mockup-v101338 .exp338-meta-chip small { display:block;color:#9d8d70;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
body.expedition-approved-mockup-v101338 .exp338-meta-chip b { display:block;color:#e2d2ad;font-size:10px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
body.expedition-approved-mockup-v101338 .exp338-meta-chip.completed b { color:#a7d95a; }

/* Route progress centerpiece. */
body.expedition-approved-mockup-v101338 .exp338-route {
  margin-top:10px;
  padding:16px 22px 11px;
  border:1px solid rgba(176,121,44,.26);
  border-radius:8px 8px 0 0;
  border-bottom:0;
  background:linear-gradient(180deg,#0b171b,#081316);
}
body.expedition-approved-mockup-v101338 .exp338-section-label {
  color:#d49c3f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.expedition-approved-mockup-v101338 .exp338-route-track {
  display:grid;
  grid-template-columns:repeat(9,minmax(18px,1fr));
  align-items:center;
  margin:10px 75px 0;
}
body.expedition-approved-mockup-v101338 .exp338-route-link {
  height:2px;
  background:linear-gradient(90deg,rgba(189,135,58,.7),rgba(155,119,67,.34));
  position:relative;
}
body.expedition-approved-mockup-v101338 .exp338-route-link.done { background:#be8837; }
body.expedition-approved-mockup-v101338 .exp338-route-link::after {
  content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#d09a48;
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap { position:relative;display:grid;justify-items:center;min-width:0; }
body.expedition-approved-mockup-v101338 .exp338-route-node {
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(145,115,68,.45);background:radial-gradient(circle,#182228,#0b1418 70%);color:#9b8e75;font-family:Georgia,serif;font-size:23px;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.34);
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap.done .exp338-route-node {
  border-color:#728d39;background:radial-gradient(circle,#394524,#172116 70%);color:#e3c974;
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap.current .exp338-route-node {
  border-color:#e2ac51;background:radial-gradient(circle,#6f4d1f,#21190d 72%);color:#f1d18d;
  box-shadow:inset 0 0 0 4px rgba(121,76,18,.34),0 0 18px rgba(221,161,66,.28);
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap.current::before {
  content:"";position:absolute;top:-14px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #dfaa50;
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap.boss .exp338-route-node {
  border-color:#b77738;background:radial-gradient(circle,#3c1815,#140d0d 72%);color:#e76557;font-size:25px;
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap small {
  min-height:18px;margin-top:5px;color:#978669;font-size:8px;white-space:nowrap;
}
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap.current small,
body.expedition-approved-mockup-v101338 .exp338-route-node-wrap.boss small { color:#d9ad5e; }
body.expedition-approved-mockup-v101338 .exp338-route-check {
  position:absolute;bottom:16px;width:16px;height:16px;border-radius:50%;border:1px solid #769333;background:#172114;color:#a8d34f;font-size:10px;display:grid;place-items:center;
}

/* Active encounter — large and visually dominant. */
body.expedition-approved-mockup-v101338 .exp338-encounter {
  padding:15px 13px 14px;
  border:1px solid rgba(176,121,44,.26);
  border-top:1px solid rgba(176,121,44,.17);
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#0a161a,#071115);
}
body.expedition-approved-mockup-v101338 .exp338-encounter-card {
  min-height:242px;
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 242px;
  gap:18px;
  padding:13px;
  border:1px solid rgba(176,121,44,.22);
  border-radius:7px;
  background:linear-gradient(90deg,rgba(10,22,26,.92),rgba(6,15,18,.96));
}
body.expedition-approved-mockup-v101338 .exp338-portrait-wrap { position:relative;min-width:0; }
body.expedition-approved-mockup-v101338 .exp338-portrait {
  width:100%;height:194px;display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(190,133,49,.52);border-radius:5px;background:#070f12;
}
body.expedition-approved-mockup-v101338 .exp338-portrait img {
  width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto !important;
}
body.expedition-approved-mockup-v101338 .exp338-portrait .jd-enemy-icon,
body.expedition-approved-mockup-v101338 .exp338-portrait .jd-enemy-icon img { width:128px!important;height:128px!important;object-fit:contain!important;image-rendering:pixelated!important; }
body.expedition-approved-mockup-v101338 .exp338-portrait-badge {
  position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #b77936;background:#101315;color:#d14f43;font-size:20px;box-shadow:0 0 0 3px #081215;
}
body.expedition-approved-mockup-v101338 .exp338-fight-main { min-width:0;padding:4px 0; }
body.expedition-approved-mockup-v101338 .exp338-fight-main .eyebrow { color:#d69f43 !important;font-size:9px !important; }
body.expedition-approved-mockup-v101338 .exp338-fight-main h3 {
  margin:10px 0 8px !important;color:#eee5d4 !important;font-size:28px !important;line-height:1;
}
body.expedition-approved-mockup-v101338 .exp338-enemy-meta { margin:0 0 23px;color:#ac9e82;font-size:11px;letter-spacing:.02em; }
body.expedition-approved-mockup-v101338 .exp338-hp-row { margin-top:14px; }
body.expedition-approved-mockup-v101338 .exp338-hp-head { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;color:#d8c79f;font-size:10px; }
body.expedition-approved-mockup-v101338 .exp338-hp-head b { color:#e8dcc0;font-size:11px; }
body.expedition-approved-mockup-v101338 .exp338-hp-track {
  height:10px;border:1px solid rgba(133,117,78,.5);border-radius:6px;overflow:hidden;background:#081012;box-shadow:inset 0 1px 2px rgba(0,0,0,.55);
}
body.expedition-approved-mockup-v101338 .exp338-hp-track i { display:block;height:100%;transition:width .16s linear; }
body.expedition-approved-mockup-v101338 .exp338-hp-track.enemy i { background:linear-gradient(90deg,#b94e46,#d86558); }
body.expedition-approved-mockup-v101338 .exp338-hp-track.player i { background:linear-gradient(90deg,#708c29,#98b842); }
body.expedition-approved-mockup-v101338 .exp338-fight-side {
  min-width:0;display:flex;flex-direction:column;gap:8px;padding-left:14px;border-left:1px solid rgba(176,121,44,.14);
}
body.expedition-approved-mockup-v101338 .exp338-live-badge {
  align-self:flex-start;margin:0 0 2px;padding:5px 8px;border:1px solid rgba(165,64,55,.35);border-radius:3px;background:rgba(92,24,22,.32);color:#e06a5a;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
body.expedition-approved-mockup-v101338 .exp338-live-badge::before { content:"●";margin-right:6px;color:#e95449; }
body.expedition-approved-mockup-v101338 .exp338-side-row {
  min-height:58px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:6px 7px;border:1px solid rgba(176,121,44,.18);border-radius:4px;background:rgba(5,13,16,.62);position:relative;overflow:hidden;
}
body.expedition-approved-mockup-v101338 .exp338-side-icon { width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(176,121,44,.23);background:#0a1417;color:#d0ac68;font-size:20px; }
body.expedition-approved-mockup-v101338 .exp338-side-icon .jd-item-icon { width:32px;height:32px; }
body.expedition-approved-mockup-v101338 .exp338-side-icon img { width:32px;height:32px;object-fit:contain; }
body.expedition-approved-mockup-v101338 .exp338-side-row small { display:block;color:#9e8e72;font-size:8px; }
body.expedition-approved-mockup-v101338 .exp338-side-row b { display:block;margin-top:2px;color:#ead7b2;font-size:11px;line-height:1.15; }
body.expedition-approved-mockup-v101338 .exp338-side-progress {
  position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left center;background:#d29a43;opacity:.62;
}
body.expedition-approved-mockup-v101338 .exp338-side-row.enemy .exp338-side-progress { background:#c65a50; }

/* Approved two-button footer. */
body.expedition-approved-mockup-v101338 .exp338-actions {
  display:grid;
  grid-template-columns:1fr 1.14fr;
  gap:16px;
  margin-top:14px;
}
body.expedition-approved-mockup-v101338 .exp338-actions button {
  min-height:67px !important;
  border-radius:6px !important;
  border:1px solid rgba(193,139,54,.72) !important;
  background:linear-gradient(180deg,#0e1b20,#081216) !important;
  color:#e7d5ae !important;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-size:14px !important;
  font-family:inherit;
  font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.36) !important;
}
body.expedition-approved-mockup-v101338 .exp338-actions button:hover { border-color:#e0aa50 !important;filter:brightness(1.06); }
body.expedition-approved-mockup-v101338 .exp338-actions button.stop {
  border-color:#bb4b3c !important;
  background:linear-gradient(180deg,#74251f,#4d1916) !important;
  color:#f1d7c3 !important;
}
body.expedition-approved-mockup-v101338 .exp338-actions button.start {
  border-color:#d9a042 !important;
  background:linear-gradient(180deg,#5b421e,#2d2415) !important;
  color:#f0d28f !important;
}
body.expedition-approved-mockup-v101338 .exp338-actions button small { display:block;margin-top:3px;color:#b49c6e;font-size:8px;font-weight:400;text-transform:none;letter-spacing:0; }
body.expedition-approved-mockup-v101338 .exp338-actions button:disabled { opacity:.46; }

/* Route preview and the legacy deep detail states are intentionally below the exact overview composition. */
body.expedition-approved-mockup-v101338 .exp-log-route-preview { margin-top:12px;border:1px solid rgba(176,121,44,.25);border-radius:6px;background:#081317; }
body.expedition-approved-mockup-v101338 .exp338-secondary-details { margin-top:12px;padding:12px;border:1px solid rgba(176,121,44,.22);border-radius:7px;background:#081317; }
body.expedition-approved-mockup-v101338 .exp338-secondary-tabs { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px; }
body.expedition-approved-mockup-v101338 .exp338-secondary-tabs button { min-height:34px;border:1px solid rgba(176,121,44,.26);background:#091419;color:#bda97f;font-size:9px;text-transform:uppercase;letter-spacing:.05em; }
body.expedition-approved-mockup-v101338 .exp338-secondary-tabs button.active { border-color:#d6a34d;color:#efca7d;background:#312716; }

/* Desktop compression keeps the target proportions rather than reverting to the old card grid. */
@media (max-width: 1500px) and (min-width: 821px) {
  body.expedition-approved-mockup-v101338 .expedition-log-layout { grid-template-columns:minmax(350px,30%) minmax(0,1fr) !important;gap:10px!important; }
  body.expedition-approved-mockup-v101338 .exp-log-region-card { grid-template-columns:115px minmax(0,1fr);min-height:145px; }
  body.expedition-approved-mockup-v101338 .exp-log-region-art { min-height:143px; }
  body.expedition-approved-mockup-v101338 .exp-log-region-main { padding:13px 12px 10px!important; }
  body.expedition-approved-mockup-v101338 .exp-log-card-title strong { font-size:16px!important; }
  body.expedition-approved-mockup-v101338 .exp338-hero { grid-template-columns:minmax(250px,31%) minmax(0,1fr); }
  body.expedition-approved-mockup-v101338 .exp338-hero-copy { padding:24px 18px 15px; }
  body.expedition-approved-mockup-v101338 .exp338-meta { grid-template-columns:1fr 1fr 1.25fr 1fr; }
  body.expedition-approved-mockup-v101338 .exp338-meta-chip.combat { display:none; }
  body.expedition-approved-mockup-v101338 .exp338-route-track { margin-left:45px;margin-right:45px; }
  body.expedition-approved-mockup-v101338 .exp338-encounter-card { grid-template-columns:150px minmax(0,1fr) 205px;gap:13px; }
  body.expedition-approved-mockup-v101338 .exp338-portrait { height:175px; }
}

/* Mobile preserves functionality; desktop is the literal screenshot target. */
@media (max-width: 820px) {
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading { min-height:auto;padding:8px 4px 12px!important; }
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading .reference-page-heading-icon { width:48px!important;height:48px!important; }
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading .reference-page-heading-icon img { width:30px!important;height:30px!important; }
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading h2 { font-size:25px!important; }
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading p { display:none; }
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading .combat-level-badge { min-width:78px!important;min-height:54px; }
  body.expedition-approved-mockup-v101338 .expedition-log-page-heading .combat-level-badge::before { display:none; }
  body.expedition-approved-mockup-v101338 .expedition-log-layout { grid-template-columns:1fr!important; }
  body.expedition-approved-mockup-v101338 .expedition-log-list-panel { padding:8px!important; }
  body.expedition-approved-mockup-v101338 .exp-log-region-list { display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scroll-snap-type:x mandatory; }
  body.expedition-approved-mockup-v101338 .exp-log-region-card { flex:0 0 min(86vw,340px);grid-template-columns:100px minmax(0,1fr);min-height:124px;scroll-snap-align:start; }
  body.expedition-approved-mockup-v101338 .exp-log-region-art { min-height:122px; }
  body.expedition-approved-mockup-v101338 .exp-log-region-main { padding:11px!important; }
  body.expedition-approved-mockup-v101338 .exp-log-card-title strong { font-size:15px!important; }
  body.expedition-approved-mockup-v101338 .exp-log-next-chapter { min-height:62px; }
  body.expedition-approved-mockup-v101338 .exp338-hero { grid-template-columns:1fr; }
  body.expedition-approved-mockup-v101338 .exp338-hero-art { min-height:145px;border-right:0;border-bottom:1px solid rgba(176,121,44,.18); }
  body.expedition-approved-mockup-v101338 .exp338-hero-copy { padding:18px 14px 14px; }
  body.expedition-approved-mockup-v101338 .exp338-hero-copy h2 { font-size:27px!important;margin-bottom:14px!important; }
  body.expedition-approved-mockup-v101338 .exp338-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.expedition-approved-mockup-v101338 .exp338-meta-chip.chapter { grid-column:1/-1; }
  body.expedition-approved-mockup-v101338 .exp338-route { padding:13px 5px 8px;overflow:hidden; }
  body.expedition-approved-mockup-v101338 .exp338-route-track { margin:10px 4px 0; }
  body.expedition-approved-mockup-v101338 .exp338-route-node { width:39px;height:39px;font-size:16px; }
  body.expedition-approved-mockup-v101338 .exp338-route-check { display:none; }
  body.expedition-approved-mockup-v101338 .exp338-encounter { padding:8px; }
  body.expedition-approved-mockup-v101338 .exp338-encounter-card { grid-template-columns:92px minmax(0,1fr);gap:10px;padding:9px; }
  body.expedition-approved-mockup-v101338 .exp338-portrait { height:118px; }
  body.expedition-approved-mockup-v101338 .exp338-portrait-badge { width:32px;height:32px;font-size:15px; }
  body.expedition-approved-mockup-v101338 .exp338-fight-main h3 { font-size:21px!important; }
  body.expedition-approved-mockup-v101338 .exp338-enemy-meta { margin-bottom:12px;font-size:9px; }
  body.expedition-approved-mockup-v101338 .exp338-fight-side { grid-column:1/-1;padding-left:0;border-left:0;display:grid;grid-template-columns:repeat(2,1fr); }
  body.expedition-approved-mockup-v101338 .exp338-live-badge { grid-column:1/-1; }
  body.expedition-approved-mockup-v101338 .exp338-actions { grid-template-columns:1fr;gap:8px;margin-top:8px; }
  body.expedition-approved-mockup-v101338 .exp338-actions button { min-height:52px!important;font-size:11px!important; }
}
body.expedition-approved-mockup-v101338 .exp-log-card-title small {
  display:block;
  margin-top:6px;
  color:#aa9b7b;
  font-size:11px;
  font-weight:400;
}
/* Final literal-target corrections */
body.expedition-approved-mockup-v101338 .expedition-log-page-heading .reference-page-heading-icon img {
  filter:none !important;
  width:56px !important;
  height:56px !important;
  object-fit:contain;
}
body.expedition-approved-mockup-v101338 .exp338-actions > .expedition-action,
body.expedition-approved-mockup-v101338 .exp338-actions > .expedition-preview-button {
  grid-column:auto !important;
  width:100% !important;
  margin:0 !important;
}
body.expedition-approved-mockup-v101338:has(#expeditionsPage.active) .diagnostics,
body.expedition-approved-mockup-v101338:has(#expeditionsPage.active) .app-shell > footer,
body.expedition-approved-mockup-v101338[data-section-owner="expeditionsPage"] .diagnostics,
body.expedition-approved-mockup-v101338[data-section-owner="expeditionsPage"] .app-shell > footer {
  display:none !important;
}
body.expedition-approved-mockup-v101338:has(#expeditionsPage.active) footer,
body.expedition-approved-mockup-v101338[data-section-owner="expeditionsPage"] footer { display:none !important; }
/* Specificity shield: older premium/button and navigation repair layers use #expeditionsPage. */
body.expedition-approved-mockup-v101338 #expeditionsPage > .expedition-log-page-heading::before,
body.expedition-approved-mockup-v101338 #expeditionsPage > .expedition-log-page-heading::after { display:none !important; content:none !important; }
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-layout {
  grid-template-columns:minmax(390px,29%) minmax(0,1fr) !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-region-card {
  grid-template-columns:136px minmax(0,1fr) !important;
  min-height:165px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-region-art { min-height:163px !important; }
body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-filter-tabs button,
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-actions button,
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-secondary-tabs button {
  border-radius:5px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-filter-tabs button {
  border:1px solid rgba(181,123,40,.3) !important;
  background:#081317 !important;
  color:#c5b28b !important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3) !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-filter-tabs button.active {
  border-color:#d7a04c !important;
  background:linear-gradient(180deg,#745223,#2e2516) !important;
  color:#f2d79f !important;
  box-shadow:inset 0 0 0 1px rgba(238,193,100,.14),0 0 9px rgba(193,129,38,.16) !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-actions button {
  border:1px solid rgba(193,139,54,.72) !important;
  background:linear-gradient(180deg,#0e1b20,#081216) !important;
  color:#e7d5ae !important;
  border-radius:6px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-actions button.stop {
  border-color:#bb4b3c !important;
  background:linear-gradient(180deg,#74251f,#4d1916) !important;
  color:#f1d7c3 !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-actions button.start {
  border-color:#d9a042 !important;
  background:linear-gradient(180deg,#5b421e,#2d2415) !important;
  color:#f0d28f !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-page-heading .eyebrow {
  display:block !important;
  margin:0 0 4px !important;
  color:#d29a43 !important;
  opacity:1 !important;
  font-size:11px !important;
}
@media (max-width:1500px) and (min-width:821px) {
  body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-layout { grid-template-columns:minmax(350px,30%) minmax(0,1fr)!important; }
  body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-region-card { grid-template-columns:115px minmax(0,1fr)!important;min-height:145px!important; }
  body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-region-art { min-height:143px!important; }
}
@media (max-width:820px) {
  body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-layout { grid-template-columns:1fr!important; }
  body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-region-card { grid-template-columns:100px minmax(0,1fr)!important;min-height:124px!important; }
  body.expedition-approved-mockup-v101338 #expeditionsPage .exp-log-region-art { min-height:122px!important; }
}
/* Pixel-match pass against the approved mockup. */
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-page-heading {
  min-height:80px !important;
  padding:5px 18px 8px !important;
  margin-bottom:8px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-page-heading .reference-page-heading-icon {
  width:62px !important;
  height:62px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-page-heading .reference-page-heading-icon img {
  width:52px !important;
  height:52px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-page-heading h2 {
  text-transform:none !important;
  letter-spacing:.01em !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .expedition-log-page-heading .combat-level-badge {
  min-height:64px !important;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-encounter {
  position:relative;
  padding-top:42px;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-active-label {
  position:absolute;
  left:14px;
  top:17px;
  z-index:2;
}
body.expedition-approved-mockup-v101338 #expeditionsPage .exp338-fight-main h3 {
  margin-top:6px !important;
}

/* ==========================================================================
   Legacy baseline layer: farming-recovery.css
   ========================================================================== */
/* JourneyDen V1.01.340 — Farming Collection & UI Recovery.
   Final ownership layer for the Farming Activities workspace. It prevents the
   desktop navigator and compact picker from being visible at the same time,
   removes historical Farming-only positioning rules, and gives harvest blockers
   an explicit visual state. */

body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-layout,
body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-sidebar-panel,
body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-content,
body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activityCards,
body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-dashboard {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 901px) {
  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-layout {
    display: grid !important;
    grid-template-columns: 208px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-sidebar-panel {
    position: sticky !important;
    inset: auto !important;
    top: 10px !important;
    display: block !important;
    width: 208px !important;
    max-width: 208px !important;
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-sidebar-panel > .panel-heading {
    display: block !important;
    position: static !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .mobile-activity-skill-select.activity-skill-switcher,
  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #mobileActivitySkillPicker {
    display: none !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator {
    display: flex !important;
    position: static !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activitySkillTabs :is(.skill-navigator-group,.skill-navigator-list,.skill-navigator-button,.skill-navigator-icon,.skill-navigator-copy,.skill-navigator-state) {
    position: relative !important;
    float: none !important;
    inset: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activitySkillTabs .skill-navigator-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activitySkillTabs .skill-navigator-button {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 45px !important;
  }
}

@media (max-width: 900px) {
  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-layout {
    display: block !important;
    width: 100% !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-sidebar-panel {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    margin: 0 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-sidebar-panel > .panel-heading,
  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activitySkillTabs {
    display: none !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .mobile-activity-skill-select.activity-skill-switcher {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .mobile-activity-skill-picker-button {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
  }
}

body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-plot-card.storage-blocked {
  border-color: rgba(194, 118, 65, .76) !important;
  box-shadow: inset 3px 0 rgba(179, 88, 52, .72), inset 0 1px rgba(255,255,255,.02) !important;
}

body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-collect-blocker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 6px 0 2px;
  padding: 7px 8px;
  border: 1px solid rgba(170, 88, 53, .55);
  border-radius: 3px;
  background: rgba(77, 31, 23, .28);
  color: #d6a889;
  font-size: 10px;
  line-height: 1.35;
}
body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-collect-blocker strong { color: #edc09a; }
body.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-storage-button {
  border-color: rgba(194, 118, 65, .66) !important;
  background: linear-gradient(180deg, #34221c, #211713) !important;
  color: #e3b18c !important;
}

/* Final cascade lock. Historical V1.01.163/181/186 Farming rules intentionally
   had very high specificity, so this ownership layer matches/exceeds them. */
@media (min-width: 901px) {
  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > .mobile-activity-skill-select.activity-skill-switcher,
  body.farming-recovery-v101340.production-mobile-layout-phase3-v101245.skill-picker-phase3-v101235.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > .mobile-activity-skill-select.activity-skill-switcher {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > .panel-heading {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 12px 10px !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > #activitySkillTabs.skill-tabs.desktop-skill-navigator {
    display: flex !important;
    position: static !important;
    flex-flow: column nowrap !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 5px 0 8px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator > .skill-navigator-group,
  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator .skill-navigator-list {
    position: static !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator .skill-navigator-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
    gap: 3px !important;
    padding: 0 6px !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator .skill-navigator-button {
    position: relative !important;
    inset: auto !important;
    float: none !important;
    clear: both !important;
    display: grid !important;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: 34px minmax(0, 1fr) 12px !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 45px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator .skill-navigator-icon {
    position: static !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-navigator-phase2-v101234.fresh-premium-v101163
  #activitiesPage.activity-mode-farming #activitySkillTabs.desktop-skill-navigator :is(.skill-navigator-copy,.skill-navigator-state) {
    position: static !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-picker-phase3-v101235.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > .panel-heading,
  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-picker-phase3-v101235.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > #activitySkillTabs.skill-tabs.desktop-skill-navigator {
    display: none !important;
  }

  body.farming-recovery-v101340.activity-skill-drawer-v101186.skill-picker-phase3-v101235.fresh-premium-v101163
  #activitiesPage.activity-mode-farming .activity-sidebar-panel > .mobile-activity-skill-select.activity-skill-switcher {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: phone-input-scroll-recovery.css
   ========================================================================== */
/* JourneyDen V1.01.348 — Phone Input & Scroll Recovery
   Android/mobile input hardening. The root document is the only vertical page
   scroll owner. Hidden/closed full-screen UI may never capture pointer input.
   Gameplay, authority, persistence and Supabase behavior are untouched. */

@media (max-width:900px){
  html{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y pinch-zoom !important;
    -webkit-overflow-scrolling:touch;
  }

  /* IMPORTANT: keep both axes visible here. `overflow-x:hidden` +
     `overflow-y:visible` computes the Y axis to `auto`, accidentally making
     body a second scroll container on mobile browsers. HTML already clips X. */
  body.phone-input-scroll-recovery-v101348{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y pinch-zoom !important;
  }

  body.phone-input-scroll-recovery-v101348 :is(.app-shell,main,main > .page.active){
    overflow-y:visible;
    touch-action:pan-y pinch-zoom;
  }

  /* A hidden More sheet must never leave its backdrop above the game. */
  body.phone-input-scroll-recovery-v101348 #mobileMoreNavigation[hidden] + .mobile-nav-more-backdrop{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  body.phone-input-scroll-recovery-v101348 #mobileActivitySkillPicker[hidden],
  body.phone-input-scroll-recovery-v101348 #authGate[hidden],
  body.phone-input-scroll-recovery-v101348 #skillDetailModal:not(.open),
  body.phone-input-scroll-recovery-v101348 #bankItemModal:not(.open),
  body.phone-input-scroll-recovery-v101348 #chapterFinaleModal:not(.open),
  body.phone-input-scroll-recovery-v101348 #expeditionKeyRequiredModal:not(.open),
  body.phone-input-scroll-recovery-v101348 #expeditionStartModal:not(.open),
  body.phone-input-scroll-recovery-v101348 #resetConfirmModal:not(.open),
  body.phone-input-scroll-recovery-v101348 #sellConfirmModal:not(.open){
    pointer-events:none !important;
  }

  /* Defensive fallback for a mobile session-resume race: if auth itself says
     the gate is hidden, a stale body auth-lock must not disable every button. */
  body.phone-input-scroll-recovery-v101348.auth-locked:has(#authGate[hidden]) :is(.app-shell,#mobileTopNavigation){
    pointer-events:auto !important;
    user-select:auto !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: activity-progress-smoothing.css
   ========================================================================== */
/* JourneyDen V1.01.351 — display-only activity progress smoothing.
   The event scheduler keeps gameplay simulation sparse; these fills are driven
   directly by a requestAnimationFrame presentation loop while Activities is
   visible so their width does not fight the older 50–180ms transition rules. */
body.activity-progress-smoothing-v101351 #activityGlobalActiveFill,
body.activity-progress-smoothing-v101351 #activitiesPage #progressFill,
body.activity-progress-smoothing-v101351 #activitiesPage #apothecaryActiveProgressFill,
body.activity-progress-smoothing-v101351 #activitiesPage #cookingActiveProgressFill,
body.activity-progress-smoothing-v101351 #activitiesPage #smithingActiveProgressFill,
body.activity-progress-smoothing-v101351 #activitiesPage #constructionActiveProgressFill {
  transition: none !important;
}

/* ==========================================================================
   Legacy baseline layer: combat-expedition-smoothing.css
   ========================================================================== */
/* JourneyDen V1.01.352 — display-only Combat + Expedition smoothing.
   Attack readiness fills are driven directly by the event scheduler's
   requestAnimationFrame presentation loop; gameplay simulation stays sparse. */
body.combat-expedition-smoothing-v101352 #combatPage .combat-progress-fill {
  transition: none !important;
}

body.combat-expedition-smoothing-v101352 #combatPage #combatPlayerHealthFill,
body.combat-expedition-smoothing-v101352 #combatPage #combatEnemyHealthFill,
body.combat-expedition-smoothing-v101352 #expeditionsPage [data-exp-player-health-fill],
body.combat-expedition-smoothing-v101352 #expeditionsPage [data-exp-enemy-health-fill] {
  transition: width 110ms linear !important;
}

body.combat-expedition-smoothing-v101352 #expeditionsPage [data-exp-player-timer],
body.combat-expedition-smoothing-v101352 #expeditionsPage [data-exp-enemy-timer] {
  transition: none !important;
  will-change: transform;
}

/* A new fighter/stage is structurally rendered only at encounter boundaries.
   A short entrance animation softens that handoff without delaying combat. */
body.combat-expedition-smoothing-v101352 #combatPage .combat-fighter-clean.enemy,
body.combat-expedition-smoothing-v101352 #expeditionsPage .exp338-encounter-card {
  animation: jd-v101352-encounter-enter 150ms ease-out both;
}

@keyframes jd-v101352-encounter-enter {
  from { opacity: .78; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.combat-expedition-smoothing-v101352 #combatPage .combat-fighter-clean.enemy,
  body.combat-expedition-smoothing-v101352 #expeditionsPage .exp338-encounter-card {
    animation: none !important;
  }
  body.combat-expedition-smoothing-v101352 #combatPage #combatPlayerHealthFill,
  body.combat-expedition-smoothing-v101352 #combatPage #combatEnemyHealthFill,
  body.combat-expedition-smoothing-v101352 #expeditionsPage [data-exp-player-health-fill],
  body.combat-expedition-smoothing-v101352 #expeditionsPage [data-exp-enemy-health-fill] {
    transition: none !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: den-concept-exact.css
   ========================================================================== */
/* JourneyDen V1.01.362 — Exact Den UI
   Desktop reference: 1852 x 849. Scene reference: 1513 x 488.
   The illustrated room is the approved concept crop; interaction remains live HTML. */

body.den-concept-v101362.den-page-active {
  --den-reference-width: 1513px;
  --den-reference-scene-ratio: 1513 / 488;
  --den-bronze: #76582f;
  --den-bronze-bright: #b98b47;
  --den-gold: #d5ab61;
  --den-parchment: #ded6c2;
  --den-muted: #8e8b80;
  --den-panel: #071319;
  --den-panel-soft: #0a171d;
  --den-line: rgba(137, 99, 48, .45);
  background: #050d11;
}

/* Reference screenshot uses the full browser width rather than the old 1500px cap. */
body.den-concept-v101362.den-page-active {
  --sidebar-width: 242px;
}
body.den-concept-v101362.den-page-active .app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  border-inline: 0;
  background: #061015;
}
body.den-concept-v101362.den-page-active .app-main {
  min-width: 0;
  background:
    radial-gradient(circle at 54% 30%, rgba(19, 40, 44, .18), transparent 44%),
    linear-gradient(180deg, #071117 0%, #061015 100%);
}
body.den-concept-v101362.den-page-active .topbar,
body.den-concept-v101362.den-page-active #currentJourneyTracker,
body.den-concept-v101362.den-page-active #activePotionBar {
  display: none !important;
}
body.den-concept-v101362.den-page-active .app-main > main {
  padding: 0 !important;
  overflow-x: hidden;
}
body.den-concept-v101362.den-page-active #denPage {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 !important;
  overflow: visible;
}
body.den-concept-v101362.den-page-active #denPage > .den-shell {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The previous card/tab Den remains in the DOM for compatibility and as an
   interaction-only management surface. It no longer competes with Home. */
body.den-concept-v101362 #denPage .den-reference-heading,
body.den-concept-v101362 #denPage #denSectionTabs,
body.den-concept-v101362 #denPage #denTabPanels {
  display: none !important;
}
body.den-concept-v101362 #denPage > .den-shell > .den-reference-top-grid,
body.den-concept-v101362 #denPage > .den-shell > .den-home-section,
body.den-concept-v101362 #denPage > .den-shell > .den-route-project,
body.den-concept-v101362 #denPage > .den-shell > .den-progression-panel,
body.den-concept-v101362 #denPage > .den-shell > .den-future-note {
  display: none !important;
}

/* Management opens only after the Workbench / a focused construction task is requested. */
body.den-concept-v101362 #denPage.den-concept-management-open #denTabPanels {
  display: block !important;
  width: min(var(--den-reference-width), calc(100% - 60px));
  margin: 16px 0 28px 30px;
}
body.den-concept-v101362 #denPage.den-concept-management-open #denTabPanel-den-projects:not([hidden]) {
  display: grid !important;
  gap: 14px;
}
body.den-concept-v101362 #denPage.den-concept-management-open #denTabPanel-den-projects[hidden] {
  display: none !important;
}
body.den-concept-v101362 #denPage .den-concept-management-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--den-line);
  background: #071217;
}
body.den-concept-v101362 #denPage .den-concept-management-bar strong {
  color: var(--den-parchment);
  font: 600 15px Georgia, serif;
}
body.den-concept-v101362 #denPage .den-concept-management-bar button {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(181, 133, 64, .66);
  border-radius: 3px;
  background: #0a171c;
  color: #d8c8a7;
}

/* ===========================
   Exact Home composition
   =========================== */
body.den-concept-v101362 #denPage .den-concept-shell {
  box-sizing: border-box;
  width: min(var(--den-reference-width), calc(100% - 30px));
  margin-left: 30px;
  padding-top: 28px;
  padding-bottom: 34px;
}
body.den-concept-v101362 #denPage .den-concept-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 510px;
  align-items: start;
  min-height: 81px;
  gap: 22px;
}
body.den-concept-v101362 #denPage .den-concept-heading {
  padding: 15px 6px 0 6px;
}
body.den-concept-v101362 #denPage .den-concept-heading h2 {
  margin: 0;
  color: #e4e2dc;
  font: 700 25px/1.05 Georgia, 'Times New Roman', serif;
  letter-spacing: -.01em;
}
body.den-concept-v101362 #denPage .den-concept-heading p {
  margin: 12px 0 0;
  color: #838582;
  font-size: 12px;
  line-height: 1.35;
}
body.den-concept-v101362 #denPage .den-concept-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 0;
}
body.den-concept-v101362 #denPage .den-concept-stats article {
  box-sizing: border-box;
  height: 73px;
  padding: 17px 13px 12px;
  border: 1px solid rgba(111, 84, 47, .34);
  border-radius: 2px;
  background: rgba(7, 19, 24, .72);
  box-shadow: inset 0 1px 0 rgba(255, 224, 160, .015);
}
body.den-concept-v101362 #denPage .den-concept-stats small,
body.den-concept-v101362 #denPage .den-concept-kicker {
  display: block;
  color: #6e746f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .045em;
}
body.den-concept-v101362 #denPage .den-concept-stats strong {
  display: block;
  margin-top: 10px;
  color: #d9b56d;
  font: 700 15px/1 Georgia, serif;
  white-space: nowrap;
}

/* Approved room artwork crop. */
body.den-concept-v101362 #denPage .den-concept-scene-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: var(--den-reference-scene-ratio);
  overflow: hidden;
  border: 1px solid rgba(154, 106, 43, .62);
  border-radius: 9px;
  background: #0b0d0c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 206, 115, .035),
    0 10px 30px rgba(0, 0, 0, .22);
}
body.den-concept-v101362 #denPage .den-concept-scene {
  position: absolute;
  inset: 0;
}
body.den-concept-v101362 #denPage .den-concept-scene-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

/* Hotspots intentionally have transparent faces: the approved artwork already
   contains the exact visible button. HTML buttons provide semantics/clickability. */
body.den-concept-v101362 #denPage .den-scene-hotspot {
  position: absolute;
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.den-concept-v101362 #denPage .den-scene-hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
body.den-concept-v101362 #denPage .den-scene-hotspot:hover,
body.den-concept-v101362 #denPage .den-scene-hotspot:focus-visible {
  border-color: rgba(229, 182, 91, .58);
  box-shadow: 0 0 14px rgba(214, 155, 61, .15), inset 0 0 0 1px rgba(255, 218, 140, .12);
  outline: none;
}
body.den-concept-v101362 #denPage .den-scene-hotspot:active {
  transform: translateY(1px);
}
/* Coordinates are percentages of the 1513 x 488 reference scene. */
body.den-concept-v101362 #denPage .den-hotspot-storage {
  left: 9.39%; top: 59.84%; width: 9.25%; height: 9.84%;
}
body.den-concept-v101362 #denPage .den-hotspot-skills {
  left: 38.13%; top: 39.34%; width: 7.80%; height: 9.84%;
}
body.den-concept-v101362 #denPage .den-hotspot-map {
  left: 71.58%; top: 25.82%; width: 7.40%; height: 10.25%;
}
body.den-concept-v101362 #denPage .den-hotspot-workbench {
  left: 54.20%; top: 68.24%; width: 10.30%; height: 10.25%;
}
body.den-concept-v101362 #denPage .den-hotspot-rest {
  left: 84.27%; top: 75.00%; width: 8.65%; height: 10.25%;
}

body.den-concept-v101362 #denPage .den-concept-bottom {
  display: grid;
  grid-template-columns: 31.3% 32.1% 36.6%;
  min-height: 190px;
  margin-top: 13px;
  border: 1px solid rgba(111, 84, 47, .38);
  border-radius: 2px;
  background: rgba(6, 17, 22, .88);
  overflow: hidden;
}
body.den-concept-v101362 #denPage .den-concept-panel {
  position: relative;
  min-width: 0;
  padding: 17px 14px 14px;
  background: linear-gradient(180deg, rgba(8, 21, 27, .88), rgba(5, 15, 20, .88));
}
body.den-concept-v101362 #denPage .den-concept-panel + .den-concept-panel {
  border-left: 1px solid rgba(111, 84, 47, .31);
}
body.den-concept-v101362 #denPage .den-concept-panel h3 {
  margin: 11px 0 8px;
  color: #d9d7d0;
  font: 700 18px/1.15 Georgia, 'Times New Roman', serif;
}
body.den-concept-v101362 #denPage .den-concept-panel p {
  min-height: 30px;
  margin: 0;
  color: #727976;
  font-size: 11px;
  line-height: 1.4;
}
body.den-concept-v101362 #denPage .den-concept-progress-meta,
body.den-concept-v101362 #denPage .den-concept-task-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  color: #ac8650;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.den-concept-v101362 #denPage .den-concept-progress-meta strong {
  color: #8f8f88;
  font-size: 11px;
}
body.den-concept-v101362 #denPage .den-concept-progress {
  position: relative;
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid #4a3924;
  border-radius: 2px;
  background: #041015;
}
body.den-concept-v101362 #denPage .den-concept-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #78582e, #a5793b);
  transition: width .18s linear;
}
body.den-concept-v101362 #denPage .den-concept-status-line {
  display: block;
  margin-top: 17px;
  color: #8c7351;
  font-size: 11px;
}

body.den-concept-v101362 #denPage .den-concept-requirement-list {
  display: grid;
  gap: 0;
  margin-top: 10px;
}
body.den-concept-v101362 #denPage .den-concept-requirement-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 27px;
  border-bottom: 1px solid rgba(99, 76, 44, .23);
  color: #aaa99f;
  font-size: 11px;
}
body.den-concept-v101362 #denPage .den-concept-requirement-row .den-concept-req-icon {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  overflow: hidden;
}
body.den-concept-v101362 #denPage .den-concept-requirement-row .den-concept-req-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
body.den-concept-v101362 #denPage .den-concept-requirement-row strong {
  color: #c3beb0;
  font-weight: 600;
}
body.den-concept-v101362 #denPage .den-concept-requirement-row span:last-child {
  color: #94958d;
  font-weight: 700;
  white-space: nowrap;
}
body.den-concept-v101362 #denPage .den-concept-requirement-row.is-ready span:last-child {
  color: #b6bd91;
}
body.den-concept-v101362 #denPage .den-concept-action {
  min-height: 38px;
  margin-top: 12px;
  padding: 7px 13px;
  border: 1px solid rgba(137, 98, 45, .54);
  border-radius: 2px;
  background: linear-gradient(180deg, #0a181d, #071217);
  color: #c39a5d;
  font: 600 11px Georgia, serif;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 151, .018);
}
body.den-concept-v101362 #denPage .den-concept-action:hover:not(:disabled),
body.den-concept-v101362 #denPage .den-concept-action:focus-visible {
  border-color: rgba(196, 142, 68, .78);
  color: #e1bd77;
  outline: none;
}
body.den-concept-v101362 #denPage .den-concept-task .den-concept-action {
  min-width: 158px;
}
body.den-concept-v101362 #denPage .den-concept-task-progress-meta {
  justify-content: flex-end;
  margin-top: 8px;
  color: #8f8f88;
  text-transform: none;
}
body.den-concept-v101362 #denPage .den-concept-task-progress {
  margin-top: 5px;
}

/* Sidebar parity for the approved reference while the Den is active. */
body.den-concept-v101362.den-page-active .sidebar {
  border-right-color: #70512b;
  background: linear-gradient(180deg, #07131a 0%, #061116 100%);
}
body.den-concept-v101362.den-page-active .premium-brand-block {
  min-height: 55px;
  padding: 8px 14px 5px;
  border-bottom: 0;
}
body.den-concept-v101362.den-page-active .sidebar-journeyden-logo {
  width: 192px;
  max-width: 100%;
}
body.den-concept-v101362.den-page-active .sidebar-player-card {
  box-sizing: border-box;
  width: 205px;
  min-height: 120px;
  margin: 9px auto 13px;
  border-color: rgba(117, 85, 44, .60);
  border-radius: 3px;
  background: #08161c;
}
body.den-concept-v101362.den-page-active .main-navigation {
  gap: 5px;
  padding: 0 15px 8px;
}
body.den-concept-v101362.den-page-active .main-navigation .nav-group {
  display: contents;
}
body.den-concept-v101362.den-page-active .main-navigation .nav-group-label {
  display: none !important;
}
body.den-concept-v101362.den-page-active .main-navigation button.nav-item {
  box-sizing: border-box;
  width: 205px;
  min-height: 42px;
  margin: 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(89, 71, 47, .72);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(11, 27, 33, .95), rgba(7, 19, 25, .95));
  color: #cfc5af;
  font: 600 13px Georgia, serif;
}
body.den-concept-v101362.den-page-active .main-navigation button.nav-item.active {
  border-color: #c18a3a;
  background: linear-gradient(180deg, #5b3d1e, #402b17);
  color: #e4c889;
  box-shadow: inset 3px 0 #e4a73f, inset 0 0 18px rgba(220, 158, 58, .12);
}
body.den-concept-v101362.den-page-active .sidebar-footer {
  min-height: 58px;
  padding: 7px 15px 12px;
  border-top: 0;
}
body.den-concept-v101362.den-page-active .sidebar-build-meta {
  display: none !important;
}
body.den-concept-v101362.den-page-active .sidebar-signout-button {
  width: 165px;
  min-height: 38px;
  border-color: rgba(89, 71, 47, .65);
  border-radius: 3px;
  background: #07161c;
}

/* 1200–1499px: preserve the exact composition and scale as one unit. */
@media (max-width: 1499px) and (min-width: 821px) {
  body.den-concept-v101362.den-page-active { --sidebar-width: 216px; }
  body.den-concept-v101362 #denPage .den-concept-shell {
    width: calc(100% - 24px);
    margin-left: 16px;
    padding-top: 22px;
  }
  body.den-concept-v101362 #denPage .den-concept-header {
    grid-template-columns: minmax(0, 1fr) minmax(410px, 43%);
  }
  body.den-concept-v101362.den-page-active .sidebar-player-card,
  body.den-concept-v101362.den-page-active .main-navigation button.nav-item {
    width: 188px;
  }
}

/* Mobile keeps the room spatial: it pans horizontally rather than reflowing the
   fireplace/map/workbench into unrelated cards. Bottom data stacks for reading. */
@media (max-width: 820px) {
  body.den-concept-v101362.den-page-active .app-main > main {
    overflow-x: visible;
  }
  body.den-concept-v101362 #denPage .den-concept-shell {
    width: 100%;
    margin: 0;
    padding: 12px 10px calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.den-concept-v101362 #denPage .den-concept-header {
    display: block;
    min-height: 0;
  }
  body.den-concept-v101362 #denPage .den-concept-heading {
    padding: 4px 2px 12px;
  }
  body.den-concept-v101362 #denPage .den-concept-heading h2 {
    font-size: 23px;
  }
  body.den-concept-v101362 #denPage .den-concept-heading p {
    margin-top: 7px;
    font-size: 11px;
  }
  body.den-concept-v101362 #denPage .den-concept-stats {
    gap: 5px;
    margin-bottom: 10px;
  }
  body.den-concept-v101362 #denPage .den-concept-stats article {
    height: 60px;
    padding: 10px 8px;
  }
  body.den-concept-v101362 #denPage .den-concept-stats small {
    font-size: 8px;
  }
  body.den-concept-v101362 #denPage .den-concept-stats strong {
    margin-top: 8px;
    font-size: 12px;
  }
  body.den-concept-v101362 #denPage .den-concept-scene-viewport {
    aspect-ratio: auto;
    height: min(56vw, 255px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
  body.den-concept-v101362 #denPage .den-concept-scene {
    position: relative;
    width: 790px;
    height: calc(790px * 488 / 1513);
  }
  body.den-concept-v101362 #denPage .den-concept-bottom {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 9px;
  }
  body.den-concept-v101362 #denPage .den-concept-panel + .den-concept-panel {
    border-left: 0;
    border-top: 1px solid rgba(111, 84, 47, .31);
  }
  body.den-concept-v101362 #denPage .den-concept-panel {
    padding: 14px 12px;
  }
  body.den-concept-v101362 #denPage .den-concept-panel p {
    min-height: 0;
  }
  body.den-concept-v101362 #denPage.den-concept-management-open #denTabPanels {
    width: calc(100% - 20px);
    margin: 10px;
  }
}

/* ==========================================================================
   Legacy baseline layer: den-hotspot-visibility.css
   ========================================================================== */
/* JourneyDen V1.01.363 — Den Hotspot Visibility Fix
   The global UI foundation applies button backgrounds with !important.
   Den room hotspots must remain visually transparent so the approved artwork's
   Storage / Skills / Map / Workbench / Rest labels stay visible underneath. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus-visible {
  background: transparent !important;
  background-image: none !important;
  color: transparent !important;
  border-color: rgba(229, 182, 91, .58) !important;
  box-shadow: 0 0 14px rgba(214, 155, 61, .15), inset 0 0 0 1px rgba(255, 218, 140, .12) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:active:not(:disabled) {
  background: transparent !important;
  transform: translateY(1px) !important;
}

/* ==========================================================================
   Legacy baseline layer: den-button-interaction.css
   ========================================================================== */
/* JourneyDen V1.01.364 — Den Button Interaction Polish
   Converts the room hotspots from invisible overlays into exact visual buttons.
   Each hitbox is aligned to the baked reference button itself, then covered by a
   lossless crop of that button so hover/press feedback can be applied without
   changing the approved Den composition. */

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot {
  --den-button-art: none;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px;
  background-color: transparent !important;
  background-image: var(--den-button-art) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: transparent !important;
  outline: none !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .24) !important;
  cursor: pointer;
  transform-origin: center;
  transition:
    transform 90ms ease,
    filter 110ms ease,
    box-shadow 110ms ease;
  filter: brightness(1) saturate(1);
  isolation: isolate;
}

/* Keep the accessible label available to assistive technology only. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Exact pixel bounds measured from the 1513 x 488 approved room art. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-storage {
  --den-button-art: url('../assets/ui/den/buttons/v101364/storage.webp');
  left: 9.9141%;
  top: 62.5000%;
  width: 9.1870%;
  height: 9.2213%;
}
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-skills {
  --den-button-art: url('../assets/ui/den/buttons/v101364/skills.webp');
  left: 39.6563%;
  top: 40.9836%;
  width: 7.5347%;
  height: 9.6311%;
}
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-map {
  --den-button-art: url('../assets/ui/den/buttons/v101364/map.webp');
  left: 73.2981%;
  top: 27.8689%;
  width: 6.9400%;
  height: 9.6311%;
}
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-workbench {
  --den-button-art: url('../assets/ui/den/buttons/v101364/workbench.webp');
  left: 55.5188%;
  top: 70.0820%;
  width: 10.3106%;
  height: 9.6311%;
}
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest {
  --den-button-art: url('../assets/ui/den/buttons/v101364/rest.webp');
  left: 86.1864%;
  top: 76.4344%;
  width: 7.9974%;
  height: 9.6311%;
}

/* Restore the button artwork on every interaction state. This intentionally
   overrides V1.01.363's transparent-hotspot emergency fix. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus-visible {
  background-image: var(--den-button-art) !important;
  border: 0 !important;
  outline: none !important;
  transform: translateY(-1px) scale(1.018);
  filter: brightness(1.16) saturate(1.08);
  box-shadow:
    0 0 0 1px rgba(236, 191, 102, .62),
    0 0 13px rgba(212, 151, 53, .28),
    0 5px 10px rgba(0, 0, 0, .36) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:active:not(:disabled) {
  background-image: var(--den-button-art) !important;
  transform: translateY(1px) scale(.986) !important;
  filter: brightness(.94) saturate(.96);
  box-shadow:
    0 0 0 1px rgba(176, 127, 53, .48),
    0 1px 3px rgba(0, 0, 0, .42) !important;
  transition-duration: 40ms;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:disabled {
  background-image: var(--den-button-art) !important;
  cursor: default;
  filter: grayscale(.3) brightness(.7);
  opacity: .72;
}

@media (prefers-reduced-motion: reduce) {
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot {
    transition: filter 80ms linear, box-shadow 80ms linear;
  }
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:hover:not(:disabled),
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus-visible,
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:active:not(:disabled) {
    transform: none !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: den-hotspot-offline-mastery.css
   ========================================================================== */
/* JourneyDen V1.01.365 — Den Hover Cleanup + Offline Mastery Hotspot
   Removes the detached hover outline from Den scene buttons. Pointer hover is
   communicated only through a restrained lift/brightness/shadow response.
   The former Rest hotspot becomes a real Offline Mastery button and routes to
   the existing Offline Mastery progress page without adding a backend request. */

/* Pointer hover: no ring/outline. The artwork/button face itself provides the edge. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:hover:not(:disabled) {
  border: 0 !important;
  outline: none !important;
  transform: translateY(-1px) scale(1.012);
  filter: brightness(1.13) saturate(1.06);
  box-shadow:
    0 5px 11px rgba(0, 0, 0, .34),
    0 0 11px rgba(212, 151, 53, .16) !important;
}

/* Keep a keyboard-only focus cue for accessibility without showing it on mouse hover. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus-visible {
  outline: 2px solid rgba(236, 191, 102, .78) !important;
  outline-offset: 2px;
  transform: translateY(-1px) scale(1.012);
  filter: brightness(1.13) saturate(1.06);
  box-shadow: 0 5px 11px rgba(0, 0, 0, .34) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:active:not(:disabled) {
  border: 0 !important;
  outline: none !important;
  transform: translateY(1px) scale(.988) !important;
  filter: brightness(.94) saturate(.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .42) !important;
}

/* Replace the baked Rest crop with a live button face so its label can evolve
   independently of the room artwork. It is centered over the original Rest
   location and widened just enough for “Offline Mastery”. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest {
  --den-button-art: none;
  left: 84.4351%;
  top: 76.4344%;
  width: 11.5000%;
  height: 9.6311%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  border: 1px solid rgba(184, 135, 57, .92) !important;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(20, 31, 35, .99), rgba(9, 18, 21, .99)) !important;
  background-image: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 166, .07),
    inset 0 -5px 10px rgba(0, 0, 0, .16),
    0 3px 8px rgba(0, 0, 0, .25) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: #e8d8b2 !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(10px, .95vw, 16px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* The live Offline Mastery button retains its own physical bronze edge while
   hover feedback stays outline-free. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:hover:not(:disabled) {
  border: 1px solid rgba(204, 155, 70, .96) !important;
  background:
    linear-gradient(180deg, rgba(27, 40, 43, .995), rgba(11, 21, 24, .995)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 174, .09),
    0 5px 11px rgba(0, 0, 0, .34),
    0 0 11px rgba(212, 151, 53, .14) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:active:not(:disabled) {
  border: 1px solid rgba(169, 120, 48, .92) !important;
  background:
    linear-gradient(180deg, rgba(12, 22, 25, .995), rgba(8, 15, 18, .995)) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .35),
    0 1px 2px rgba(0, 0, 0, .35) !important;
}

@media (max-width: 700px) {
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
    font-size: 11px;
  }
}

/* ==========================================================================
   Legacy baseline layer: den-hotspot-final-polish.css
   ========================================================================== */
/* JourneyDen V1.01.366 — Den Hotspot Final Polish
   Keeps every scene hotspot perfectly registered to the baked button beneath it.
   No hover/focus translation or scale is allowed: moving the overlay reveals the
   original baked edge underneath and creates the detached/double-outline effect.
   Feedback is therefore contained inside the button bounds through brightness and
   inset shading only. Offline Mastery returns to the exact original Rest footprint. */

/* All Den hotspots stay locked to their measured artwork bounds in every state. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus-visible,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:active:not(:disabled) {
  outline: none !important;
  outline-offset: 0 !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

/* Hover and keyboard focus brighten the existing button face without drawing a
   ring, glow edge, or shifted duplicate of the artwork. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:focus-visible {
  border: 0 !important;
  filter: brightness(1.12) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 191, .08), inset 0 -2px 4px rgba(0, 0, 0, .16) !important;
}

/* Press feedback remains fully inside the measured hitbox. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot:active:not(:disabled) {
  border: 0 !important;
  filter: brightness(.89) saturate(.96) !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(0, 0, 0, .16) !important;
}

/* Offline Mastery exactly replaces the old Rest button footprint. Keeping the
   same bounds prevents any part of the baked Rest button from peeking around it. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest {
  --den-button-art: none;
  left: 86.1864%;
  top: 76.4344%;
  width: 7.9974%;
  height: 9.6311%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px !important;
  border: 1px solid rgba(184, 135, 57, .92) !important;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(20, 31, 35, 1), rgba(9, 18, 21, 1)) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 166, .07), inset 0 -5px 10px rgba(0, 0, 0, .16) !important;
  filter: none !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: #e8d8b2 !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(9px, .70vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72);
}

/* Keep the physical bronze edge identical in all interaction states. Only the
   interior changes, so there is no apparent hover outline. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus-visible {
  border: 1px solid rgba(184, 135, 57, .92) !important;
  background: linear-gradient(180deg, rgba(25, 38, 41, 1), rgba(11, 21, 24, 1)) !important;
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 191, .08), inset 0 -4px 9px rgba(0, 0, 0, .18) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:active:not(:disabled) {
  border: 1px solid rgba(184, 135, 57, .92) !important;
  background: linear-gradient(180deg, rgba(11, 20, 23, 1), rgba(7, 14, 16, 1)) !important;
  filter: none !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .50), inset 0 0 0 1px rgba(0, 0, 0, .18) !important;
}

@media (max-width: 700px) {
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
    font-size: 9px;
  }
}

/* ==========================================================================
   Legacy baseline layer: world-projects-redesign.css
   ========================================================================== */
/* JourneyDen V1.01.367–371 — World Projects mockup implementation
   Phase 1: hierarchy cleanup
   Phase 2: route-card rebuild
   Phase 3: project stage/reward presentation
   Phase 4: requirement actions + contribute-all footer
   Phase 5: responsive/regression polish */

body.world-projects-redesign-v101371 #worldProjectsPage {
  --wp-bg: #0b171c;
  --wp-panel: #0d1c22;
  --wp-panel-soft: #101f24;
  --wp-gold: #c79339;
  --wp-gold-bright: #e4b653;
  --wp-border: rgba(171, 125, 48, .42);
  --wp-border-soft: rgba(144, 105, 44, .28);
  --wp-text: #eee9df;
  --wp-muted: #a8a89f;
  --wp-green: #8fd772;
  --wp-blue: #63a8ea;
  --wp-red: #e07855;
  gap: 0 !important;
}

/* Phase 1 — compact page hierarchy */
body.world-projects-redesign-v101371 #worldProjectsPage > .world-projects-page-heading {
  margin: 0 0 8px !important;
  padding: 10px 0 12px !important;
  min-height: 0 !important;
  border-bottom: 1px solid var(--wp-border-soft) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading::before { content: none !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading .reference-page-heading-title {
  align-items: center !important;
  gap: 14px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading .reference-page-heading-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 42% 36%, rgba(210,161,72,.17), rgba(8,16,20,.92) 68%) !important;
  box-shadow: inset 0 0 0 4px rgba(214,163,72,.04), 0 0 18px rgba(201,145,52,.07) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading h2 {
  margin: 2px 0 2px !important;
  font-size: clamp(28px, 2vw, 41px) !important;
  letter-spacing: .025em !important;
  line-height: 1 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading p {
  margin: 4px 0 0 !important;
  color: var(--wp-muted) !important;
  max-width: 720px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading .eyebrow {
  color: var(--wp-gold) !important;
  letter-spacing: .045em !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage > .world-projects-tabs {
  width: max-content !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  display: flex !important;
  gap: 4px !important;
  border: 0 !important;
  background: transparent !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage > .world-projects-tabs button {
  min-width: 88px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #132126, #0c171b) !important;
  color: #d8c499 !important;
  box-shadow: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage > .world-projects-tabs button.active {
  color: #fff1c8 !important;
  border-color: rgba(218, 161, 66, .78) !important;
  background: linear-gradient(180deg, rgba(96,70,29,.95), rgba(54,39,20,.96)) !important;
  box-shadow: inset 0 0 0 2px rgba(245,190,82,.07), 0 0 14px rgba(204,145,45,.1) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-owner-shell,
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-redesign-shell {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-redesign-layout {
  display: grid !important;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 2.45fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Phase 2 — route list */
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-route-panel {
  position: sticky !important;
  top: 12px !important;
  align-self: start !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(14,29,35,.98), rgba(8,20,25,.98)) !important;
  box-shadow: inset 0 0 28px rgba(0,0,0,.14) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-route-heading {
  margin: 0 0 12px !important;
  padding: 0 0 11px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--wp-border-soft) !important;
  display: block !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-route-heading h3 {
  margin: 3px 0 !important;
  font-size: 17px !important;
  color: var(--wp-text) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-route-heading small {
  display: block !important;
  margin-top: 3px !important;
  color: #7f8986 !important;
  font-size: 11px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger,
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-active {
  display: grid !important;
  gap: 8px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card {
  --route-art: none;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 115px !important;
  margin: 0 !important;
  padding: 13px 13px 11px 58px !important;
  overflow: hidden !important;
  display: block !important;
  text-align: left !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 7px !important;
  color: var(--wp-text) !important;
  background:
    linear-gradient(90deg, rgba(12,25,30,.98) 0%, rgba(12,25,30,.94) 51%, rgba(12,25,30,.56) 100%),
    var(--route-art) center right / 62% auto no-repeat,
    #0b1a20 !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.15) !important;
  transform: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card:hover:not(.is-locked) {
  border-color: rgba(217,160,64,.58) !important;
  background:
    linear-gradient(90deg, rgba(15,30,35,.98) 0%, rgba(15,30,35,.93) 51%, rgba(15,30,35,.52) 100%),
    var(--route-art) center right / 64% auto no-repeat,
    #0d1d22 !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.14), 0 0 0 1px rgba(207,151,57,.08) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card.is-selected {
  border-color: rgba(229,175,76,.88) !important;
  box-shadow: inset 0 0 0 1px rgba(248,194,90,.16), 0 0 14px rgba(214,156,58,.18) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card.is-selected::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 18%;
  bottom: 18%;
  width: 3px;
  background: #e6b148;
  box-shadow: 0 0 9px rgba(239,181,73,.85);
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card.is-complete {
  opacity: .86 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card.is-locked {
  opacity: .62 !important;
  filter: saturate(.55) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-index {
  position: absolute !important;
  top: 14px !important;
  left: 13px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: #d7a34a !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 29px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-copy {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 3px 8px !important;
  min-width: 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-top { display: contents !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-top .eyebrow {
  display: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-copy > strong {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #f0ece3 !important;
  font-size: 15px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-copy > small {
  grid-column: 1 / -1 !important;
  color: #acaaa0 !important;
  font-size: 12px !important;
  white-space: normal !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-status {
  grid-column: 1 !important;
  width: max-content !important;
  margin-top: 6px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(84,153,207,.35) !important;
  border-radius: 999px !important;
  background: rgba(30,82,119,.28) !important;
  color: #8fc7f1 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .is-complete .den-project-ledger-status {
  border-color: rgba(93,177,92,.35) !important;
  background: rgba(39,103,54,.28) !important;
  color: var(--wp-green) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .is-locked .den-project-ledger-status {
  border-color: rgba(145,145,137,.25) !important;
  background: rgba(76,82,82,.28) !important;
  color: #aaa !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-progress {
  grid-column: 1 !important;
  align-self: end !important;
  height: 5px !important;
  margin: 6px 0 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.11) !important;
  overflow: hidden !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-progress i {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,#397bbd,#67acf0) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .is-complete .den-project-ledger-progress i {
  background: linear-gradient(90deg,#4c9656,#8ad273) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-meta {
  grid-column: 2 !important;
  grid-row: 4 !important;
  align-self: center !important;
  margin: 4px 0 0 !important;
  min-width: auto !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-meta b {
  color: #e7dcb8 !important;
  font-size: 12px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-meta em { display: none !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-lock-note {
  grid-column: 1 / -1 !important;
  margin-top: 4px !important;
  color: #a8a89f !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}

/* Phase 3 — selected project */
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail {
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(13,28,34,.99), rgba(8,20,25,.99)) !important;
  box-shadow: inset 0 0 40px rgba(0,0,0,.13) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail-hero {
  position: relative !important;
  min-height: 170px !important;
  padding: 22px 180px 18px 26px !important;
  display: block !important;
  border-bottom: 1px solid var(--wp-border-soft) !important;
  background: linear-gradient(90deg, rgba(11,24,30,.99), rgba(11,24,30,.92) 65%, rgba(18,35,39,.80)) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail-copy {
  max-width: 920px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail-copy .eyebrow {
  color: var(--wp-gold) !important;
  letter-spacing: .09em !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail-copy h3 {
  margin: 8px 0 6px !important;
  color: #f4efe5 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(24px, 2vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-destination-line {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
  color: #d6c7a5 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-destination-line strong { font-size: 13px !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail-copy p {
  margin: 0 !important;
  color: #a8aca5 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-hero-side {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 176px !important;
  pointer-events: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-hero-side .den-room-status {
  position: absolute !important;
  right: 18px !important;
  top: 14px !important;
  z-index: 4 !important;
  padding: 6px 11px !important;
  border: 1px solid rgba(90,156,205,.35) !important;
  border-radius: 999px !important;
  background: rgba(24,69,100,.28) !important;
  color: #93c8ef !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-region-art {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: .26 !important;
  background-position: center !important;
  background-size: cover !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-region-art span { display: none !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-crest {
  position: absolute !important;
  right: 38px !important;
  top: 54px !important;
  z-index: 3 !important;
  width: 76px !important;
  height: 92px !important;
  display: grid !important;
  place-items: center !important;
  clip-path: polygon(8% 0,92% 0,92% 72%,50% 100%,8% 72%) !important;
  border: 1px solid var(--wp-border) !important;
  background: linear-gradient(180deg,rgba(106,77,35,.6),rgba(35,39,35,.86)) !important;
  box-shadow: inset 0 0 0 3px rgba(231,175,76,.06), 0 0 16px rgba(0,0,0,.2) !important;
  color: #d7a651 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-crest span { font-size: 34px !important; filter: drop-shadow(0 2px 2px #000); }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-overview-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(205px, 270px) !important;
  gap: 10px !important;
  padding: 10px 18px 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-panel {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-tracker {
  display: grid !important;
  grid-template-columns: repeat(var(--stage-count, 1), minmax(0, 1fr)) !important;
  min-height: 76px !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 4px !important;
  background: rgba(9,22,27,.74) !important;
  overflow: hidden !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card {
  position: relative !important;
  min-width: 0 !important;
  padding: 12px 12px 10px 52px !important;
  border-right: 1px solid var(--wp-border-soft) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card:last-child { border-right: 0 !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-node {
  position: absolute !important;
  left: 13px !important;
  top: 18px !important;
  width: 29px !important;
  height: 29px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(195,143,54,.55) !important;
  border-radius: 50% !important;
  background: #122126 !important;
  color: #dbad58 !important;
  font-weight: 800 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card.is-complete .world-project-stage-node {
  border-color: rgba(105,184,94,.58) !important;
  background: rgba(31,79,42,.44) !important;
  color: var(--wp-green) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card.is-current {
  background: linear-gradient(180deg,rgba(46,62,54,.18),rgba(15,28,31,.16)) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card small {
  display: block !important;
  color: #a6aaa4 !important;
  font-size: 10px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card strong {
  display: block !important;
  margin-top: 3px !important;
  color: #e8dfca !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card em {
  display: block !important;
  margin-top: 3px !important;
  color: #79b6e8 !important;
  font-size: 10px !important;
  font-style: normal !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card.is-complete em { color: var(--wp-green) !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-panel {
  min-height: 88px !important;
  padding: 12px 16px 13px !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 4px !important;
  background: rgba(9,21,26,.72) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-copy {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-copy > div { display: grid !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-copy .eyebrow { color: var(--wp-gold) !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-copy strong {
  margin-top: 2px !important;
  color: #f1ece2 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 33px !important;
  line-height: 1 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-copy small {
  max-width: 210px !important;
  color: #969e99 !important;
  font-size: 10px !important;
  text-align: right !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-track {
  position: relative !important;
  height: 7px !important;
  margin-top: 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  overflow: visible !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-track > span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg,#458bc8,#6baee7) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-progress-track > i {
  display: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-panel {
  min-width: 0 !important;
  padding: 13px 14px !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 4px !important;
  background: linear-gradient(145deg, rgba(21,36,39,.9), rgba(9,22,27,.82)) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-panel > .eyebrow {
  display: block !important;
  margin-bottom: 10px !important;
  color: var(--wp-gold) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 7px 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 50% !important;
  background: rgba(179,129,51,.08) !important;
  color: #d8aa59 !important;
  font-size: 20px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-row small {
  display: block !important;
  color: #969d97 !important;
  font-size: 10px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-row strong {
  display: block !important;
  margin-top: 2px !important;
  color: #e4d4ad !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* Phase 4 — requirement grid + action footer */
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-requirements-panel {
  padding: 14px 18px 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-requirements-heading {
  display: grid !important;
  grid-template-columns: max-content minmax(0,1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-requirements-heading strong {
  color: var(--wp-gold) !important;
  font-size: 11px !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-requirements-heading > span {
  height: 1px !important;
  background: linear-gradient(90deg, var(--wp-border), transparent) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirements {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 8px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement {
  position: relative !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 9px 122px 9px 56px !important;
  display: block !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 4px !important;
  background: rgba(8,21,26,.78) !important;
  box-shadow: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement:not(.is-complete) {
  border-color: rgba(177,126,45,.42) !important;
  background: linear-gradient(90deg, rgba(16,30,33,.92), rgba(8,21,26,.84)) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement.is-complete {
  opacity: .83 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement-icon {
  position: absolute !important;
  left: 9px !important;
  top: 9px !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(156,119,57,.34) !important;
  border-radius: 4px !important;
  background: #0d1a1f !important;
  overflow: hidden !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement-icon img,
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-item-art {
  max-width: 30px !important;
  max-height: 30px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement-copy {
  min-width: 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement-copy > strong {
  display: block !important;
  color: #e9e5dc !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-resource-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px 7px !important;
  margin-top: 3px !important;
  min-width: 0 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-resource-summary span {
  color: #bdb8aa !important;
  font-size: 10px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-resource-summary small {
  color: #838d89 !important;
  font-size: 10px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement-progress { display: none !important; }
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement > button {
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-width: 102px !important;
  min-height: 34px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(207,151,58,.55) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg,rgba(70,50,21,.9),rgba(38,30,19,.95)) !important;
  color: #e9ca84 !important;
  font-size: 10px !important;
  box-shadow: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement > button:not(:disabled):hover {
  border-color: rgba(231,175,74,.84) !important;
  background: linear-gradient(180deg,rgba(91,65,27,.96),rgba(46,34,18,.98)) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement > button:disabled {
  border-color: rgba(136,87,49,.28) !important;
  background: rgba(52,31,26,.22) !important;
  color: var(--wp-red) !important;
  opacity: 1 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-check {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--wp-green) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-check b {
  color: inherit !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .den-project-check span {
  width: 15px !important;
  height: 15px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(112,197,94,.65) !important;
  border-radius: 50% !important;
  font-size: 9px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-action-bar {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 12px 18px 16px !important;
  padding: 7px 7px 7px 14px !important;
  min-height: 55px !important;
  border: 1px solid var(--wp-border-soft) !important;
  border-radius: 4px !important;
  background: rgba(10,22,26,.78) !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-action-bar .den-project-hint {
  margin: 0 !important;
  color: #9d9d93 !important;
  font-size: 11px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-action-bar .den-project-hint::before {
  content: "ⓘ";
  margin-right: 7px;
  color: #c99a48;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-footer-actions {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-footer-actions button {
  min-height: 39px !important;
  padding: 8px 14px !important;
  border-radius: 3px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-contribute-all {
  min-width: 230px !important;
  border: 1px solid rgba(227,171,71,.78) !important;
  background: linear-gradient(180deg,#9a7031,#5d411e) !important;
  color: #fff0c8 !important;
  box-shadow: inset 0 0 0 2px rgba(255,209,111,.08), 0 0 12px rgba(187,130,42,.13) !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 14px !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage .world-project-contribute-all:disabled {
  border-color: rgba(150,124,77,.32) !important;
  background: rgba(67,58,39,.46) !important;
  color: #817961 !important;
  box-shadow: none !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage #denCompleteForestRoute:not([hidden]) {
  border-color: rgba(120,194,95,.55) !important;
  background: linear-gradient(180deg,rgba(52,108,56,.9),rgba(30,67,37,.95)) !important;
  color: #dff3d4 !important;
}
body.world-projects-redesign-v101371 #worldProjectsPage #denCompleteForestRoute:disabled { display: none !important; }

/* Phase 5 — desktop scaling and phone/tablet */
@media (max-width: 1180px) {
  body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-redesign-layout {
    grid-template-columns: minmax(235px,.72fr) minmax(0,2fr) !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-overview-grid {
    grid-template-columns: 1fr !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-panel {
    display: grid !important;
    grid-template-columns: max-content 1fr 1fr !important;
    align-items: center !important;
    gap: 10px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-panel > .eyebrow { margin: 0 !important; }
}
@media (max-width: 900px) {
  body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-redesign-layout {
    grid-template-columns: 1fr !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-route-panel {
    position: static !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-active {
    grid-template-columns: repeat(3, minmax(210px,1fr)) !important;
    overflow-x: auto !important;
    padding-bottom: 3px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-card { min-width: 230px !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirements { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading .reference-page-heading-icon {
    width: 44px !important; height: 44px !important; flex-basis: 44px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading h2 { font-size: 28px !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-projects-page-heading p { font-size: 11px !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage > .world-projects-tabs { width: 100% !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage > .world-projects-tabs button { flex: 1 !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-route-panel { padding: 10px !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-ledger-active {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(240px,86vw) !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-detail-hero {
    min-height: 0 !important;
    padding: 18px 18px 16px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-hero-side { display: none !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-overview-grid,
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-requirements-panel { padding-left: 10px !important; padding-right: 10px !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-tracker {
    grid-template-columns: 1fr !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--wp-border-soft) !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-stage-card:last-child { border-bottom: 0 !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-reward-panel {
    display: block !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement {
    padding-right: 103px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement > button { min-width: 88px !important; }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-action-bar {
    grid-template-columns: 1fr !important;
    margin: 10px !important;
    padding: 11px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-footer-actions button,
  body.world-projects-redesign-v101371 #worldProjectsPage .world-project-contribute-all { width: 100% !important; min-width: 0 !important; }
}

/* V1.01.371 phone collision closure: keep requirement copy and actions in separate rows. */
@media (max-width: 620px) {
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement {
    min-height: 92px !important;
    padding: 10px 10px 44px 56px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-resource-summary {
    display: grid !important;
    gap: 2px !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-requirement > button {
    left: 56px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 29px !important;
    transform: none !important;
  }
  body.world-projects-redesign-v101371 #worldProjectsPage .den-project-check {
    left: 56px !important;
    right: auto !important;
    top: auto !important;
    bottom: 10px !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: den-offline-mastery-closure.css
   ========================================================================== */
/* JourneyDen V1.01.372 — Offline Mastery Den Closure
   Final cache-busted override for the right-hand Den hotspot.
   The old Rest/Bed button is completely covered, the new control uses the same
   compact bronze/dark treatment as the other scene controls, and every interaction
   stays inside the button bounds so no detached outline can appear. */

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus-visible,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:active:not(:disabled) {
  --den-button-art: none !important;
  left: 85.0851% !important;
  top: 76.4344% !important;
  width: 10.2000% !important;
  height: 9.6311% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(4px, .38vw, 7px);
  padding: 0 clamp(6px, .55vw, 10px) !important;
  border: 1px solid rgba(169, 129, 64, .96) !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgb(20, 29, 30), rgb(10, 17, 18)) !important;
  background-image: none !important;
  color: #ddc99a !important;
  outline: none !important;
  outline-offset: 0 !important;
  transform: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(233, 198, 127, .07),
    inset 0 -3px 7px rgba(0, 0, 0, .22),
    0 2px 5px rgba(0, 0, 0, .25) !important;
  filter: none !important;
  overflow: hidden;
  z-index: 4;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest::before {
  content: '';
  flex: 0 0 clamp(13px, 1.12vw, 18px);
  width: clamp(13px, 1.12vw, 18px);
  height: clamp(13px, 1.12vw, 18px);
  background: url('../assets/icons/interface/status/offline.webp') center / contain no-repeat;
  opacity: .90;
  filter: sepia(.25) saturate(.72) brightness(1.12);
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: #e2cfa0 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(10px, .86vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .78);
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus-visible {
  border-color: rgba(186, 145, 76, .98) !important;
  background: linear-gradient(180deg, rgb(25, 36, 37), rgb(12, 21, 22)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 178, .08),
    inset 0 -3px 7px rgba(0, 0, 0, .20),
    0 2px 5px rgba(0, 0, 0, .25) !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:active:not(:disabled) {
  border-color: rgba(153, 112, 52, .98) !important;
  background: linear-gradient(180deg, rgb(11, 19, 20), rgb(7, 13, 14)) !important;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, .48),
    inset 0 0 0 1px rgba(0, 0, 0, .16) !important;
}

@media (max-width: 700px) {
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest {
    gap: 4px;
    padding-inline: 5px !important;
  }
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
    font-size: 9px !important;
  }
  body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest::before {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
}

/* ==========================================================================
   Legacy baseline layer: den-offline-mastery-sprite.css
   ========================================================================== */
/* JourneyDen V1.01.373 — Offline Mastery Exact Den Button Sprite
   Offline Mastery now uses the same pre-rendered button-sprite pipeline as
   Storage, Skills, Map, and Workbench. No live label/icon is drawn over the room,
   so the legacy Rest artwork cannot bleed through or create doubled text. */

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus-visible,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:active:not(:disabled) {
  --den-button-art: url('../assets/ui/den/buttons/v101373/offline-mastery.webp') !important;
  left: 84.1045% !important;
  top: 76.4344% !important;
  width: 12.1613% !important;
  height: 9.6311% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  background-image: var(--den-button-art) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  color: transparent !important;
  outline: none !important;
  outline-offset: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  z-index: 5 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* The sprite already contains the icon and label, exactly like every other
   visible Den control. Keep the semantic label screen-reader only. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  color: transparent !important;
}

body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest::before,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest::after {
  content: none !important;
  display: none !important;
}

/* Match V1.01.366 interaction behavior used by the other room sprites: the
   artwork never shifts away from the baked room button position. */
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest {
  filter: brightness(1) saturate(1) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .24) !important;
}
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:hover:not(:disabled),
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus,
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:focus-visible {
  filter: brightness(1.12) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 191, .08), inset 0 -2px 4px rgba(0, 0, 0, .16) !important;
}
body.den-concept-v101362.den-page-active #denPage .den-scene-hotspot.den-hotspot-rest:active:not(:disabled) {
  filter: brightness(.89) saturate(.96) !important;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(0, 0, 0, .16) !important;
}

/* ==========================================================================
   Legacy baseline layer: combat-visual-rebuild.css
   ========================================================================== */
/* JourneyDen V1.01.380 — Combat Visual Rebuild
   Phases 1-6 consolidated: compact readiness, stance selector, roster,
   battlefield-first encounter, support rail, responsive regression closure.
   Presentation only: combat simulation, rewards, timing and authority remain unchanged. */

body.combat-visual-rebuild-v101379 #combatPage{
  --cv-bg:#0b1518;
  --cv-panel:#0f1c20;
  --cv-panel-2:#0c181c;
  --cv-panel-3:#101f24;
  --cv-line:rgba(168,126,58,.32);
  --cv-line-strong:rgba(212,165,79,.62);
  --cv-gold:#d6ad63;
  --cv-gold-bright:#edca83;
  --cv-text:#e9dfca;
  --cv-muted:#8d968f;
  --cv-green:#9ece72;
  --cv-blue:#72aee7;
  --cv-red:#d86363;
  gap:8px !important;
}

/* Phase 1 — page hierarchy + compressed proficiency strip */
body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading{
  min-height:0 !important;
  margin:0 0 4px !important;
  padding:4px 8px 9px !important;
  border-bottom:1px solid var(--cv-line) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading .reference-page-heading-icon{
  width:46px !important;height:46px !important;min-width:46px !important;
}
body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading h2{
  margin:1px 0 1px !important;font-size:27px !important;line-height:1 !important;
  color:#eee6d8 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading .eyebrow{
  color:#b58c46 !important;font-size:9px !important;letter-spacing:.08em !important;
}
body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading p{
  margin:4px 0 0 !important;max-width:700px !important;
  font-size:10px !important;line-height:1.3 !important;color:#89918c !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-command-deck{
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:8px !important;
  margin:0 !important;
}
body.combat-visual-rebuild-v101379 #combatPage :is(.combat-skills-inline-panel,.combat-style-panel){
  min-width:0 !important;
  padding:9px !important;
  border:1px solid var(--cv-line) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,#101d21,#0d191d) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.018) !important;
}
body.combat-visual-rebuild-v101379 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading){
  min-height:0 !important;margin:0 0 7px !important;padding:0 0 6px !important;
  border-bottom:1px solid rgba(168,126,58,.22) !important;
  align-items:center !important;
}
body.combat-visual-rebuild-v101379 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading) .eyebrow{
  color:#b58c46 !important;font-size:7px !important;letter-spacing:.1em !important;
}
body.combat-visual-rebuild-v101379 #combatPage :is(.combat-skills-inline-heading,.combat-style-heading) h3{
  margin:1px 0 0 !important;color:#ded4bf !important;font-size:11px !important;line-height:1 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-skill-overview-grid{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:5px !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-tile{
  display:grid !important;grid-template-columns:28px minmax(0,1fr) !important;gap:6px !important;align-items:center !important;
  min-height:43px !important;padding:5px 6px !important;
  border:1px solid rgba(168,126,58,.23) !important;border-radius:3px !important;
  background:#0b171b !important;box-shadow:none !important;transform:none !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-icon{
  width:28px !important;height:28px !important;display:grid !important;place-items:center !important;
  border:1px solid rgba(168,126,58,.24) !important;border-radius:3px !important;background:#111f23 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-icon img{width:21px !important;height:21px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-copy{min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-name{display:flex !important;justify-content:space-between !important;gap:5px !important;align-items:baseline !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-name strong{font-size:8px !important;color:#d9cfbb !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-name b{font-size:10px !important;color:var(--cv-gold-bright) !important;white-space:nowrap !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-copy>small{display:block !important;margin:2px 0 4px !important;font-size:6px !important;color:#7d8782 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-progress{height:3px !important;margin:0 !important;border-radius:0 !important;background:#172328 !important;overflow:hidden !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-proficiency-progress span{background:linear-gradient(90deg,#a9792e,#d9b35d) !important;}

/* Phase 2 — combat style becomes a segmented command selector */
body.combat-visual-rebuild-v101379 #combatPage .combat-overall-badge{
  min-width:66px !important;padding:3px 7px !important;border:1px solid rgba(168,126,58,.30) !important;border-radius:3px !important;background:#0b171b !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-overall-badge small{font-size:6px !important;color:#78817c !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-overall-badge strong{font-size:14px !important;color:var(--cv-gold-bright) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-style-grid{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:4px !important;overflow:visible !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option{
  position:relative !important;display:grid !important;grid-template-columns:25px minmax(0,1fr) auto !important;align-items:center !important;gap:6px !important;
  min-height:42px !important;padding:5px 7px !important;
  border:1px solid rgba(168,126,58,.23) !important;border-radius:3px !important;
  background:#0b171b !important;box-shadow:none !important;text-align:left !important;
  transition:border-color .12s ease,background .12s ease,transform .08s ease !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option:hover{border-color:rgba(212,165,79,.52) !important;background:#101f23 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option:active{transform:translateY(1px) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option.active{
  border-color:rgba(231,188,102,.78) !important;
  background:linear-gradient(180deg,rgba(125,88,35,.33),rgba(66,49,29,.22)) !important;
  box-shadow:inset 0 -2px #d1a451 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option .combat-style-icon{
  width:25px !important;height:25px !important;display:grid !important;place-items:center !important;
  border:1px solid rgba(168,126,58,.24) !important;border-radius:3px !important;background:#111f23 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option .combat-style-icon img{width:19px !important;height:19px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-copy{display:block !important;min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-copy strong{display:block !important;color:#ded4bf !important;font-size:8px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-copy small{display:block !important;margin-top:2px !important;color:#7f8983 !important;font-size:6px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-option.active .combat-stance-copy strong{color:#f0cf8d !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stance-check{font-size:10px !important;color:#b5d97d !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-style-help{
  min-height:22px !important;margin:5px 0 0 !important;padding:4px 7px !important;
  border:0 !important;border-left:2px solid rgba(212,165,79,.55) !important;background:rgba(0,0,0,.10) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-style-help>span{gap:6px !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-style-help strong{font-size:8px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-style-help b{color:var(--cv-gold-bright) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-style-help small{color:#78827d !important;}

/* Phase 3 — roster + workspace composition */
body.combat-visual-rebuild-v101379 #combatPage .combat-layout-v2{
  display:grid !important;
  grid-template-columns:230px minmax(500px,1fr) 255px !important;
  grid-template-areas:"roster battle support" !important;
  gap:8px !important;align-items:stretch !important;
  min-height:548px !important;
}
body.combat-visual-rebuild-v101379 #combatPage :is(.combat-roster-panel,.combat-battle-panel,.combat-side-panel){min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-roster-panel{
  grid-area:roster !important;padding:9px !important;
  border:1px solid var(--cv-line) !important;border-radius:4px !important;background:linear-gradient(180deg,#0f1c20,#0b171a) !important;
  overflow:hidden !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-panel-heading,
body.combat-visual-rebuild-v101379 #combatPage .combat-battle-panel-heading{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;
  min-height:0 !important;margin:0 0 7px !important;padding:0 0 7px !important;border-bottom:1px solid rgba(168,126,58,.22) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-panel-heading .eyebrow,
body.combat-visual-rebuild-v101379 #combatPage .combat-battle-panel-heading .eyebrow{font-size:7px !important;letter-spacing:.09em !important;color:#b58c46 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-panel-heading h3{margin:1px 0 0 !important;font-size:11px !important;color:#ded4bf !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-panel-kicker,
body.combat-visual-rebuild-v101379 #combatPage .combat-battle-panel-heading>small{font-size:6px !important;color:#78827d !important;white-space:nowrap !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-grid{
  display:flex !important;flex-direction:column !important;gap:5px !important;
  max-height:510px !important;overflow:auto !important;padding:0 2px 0 0 !important;scrollbar-width:thin !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-card{
  display:grid !important;grid-template-columns:48px minmax(0,1fr) !important;gap:8px !important;align-items:center !important;
  min-height:62px !important;padding:6px !important;
  border:1px solid rgba(168,126,58,.23) !important;border-radius:3px !important;
  background:#0b171b !important;box-shadow:none !important;text-align:left !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-card:hover{border-color:rgba(212,165,79,.50) !important;background:#101e22 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-card.active{
  border-color:rgba(230,185,94,.84) !important;background:linear-gradient(90deg,rgba(130,90,36,.25),rgba(13,25,29,.78)) !important;
  box-shadow:inset 3px 0 #d5a54d !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-roster-portrait{
  width:48px !important;height:48px !important;border:1px solid rgba(168,126,58,.30) !important;border-radius:3px !important;background:#111d21 !important;overflow:hidden !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-roster-portrait img{width:100% !important;height:100% !important;object-fit:cover !important;image-rendering:auto !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-copy{min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-name-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:5px !important;min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-name-row strong{min-width:0 !important;color:#e2d7c0 !important;font-size:8px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-state{
  flex:0 0 auto !important;margin:0 !important;padding:1px 5px !important;border:1px solid rgba(168,126,58,.25) !important;border-radius:999px !important;
  color:#b9aa86 !important;background:rgba(0,0,0,.18) !important;font-size:5px !important;text-transform:uppercase !important;letter-spacing:.08em !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-card.active .combat-enemy-state{border-color:rgba(104,153,83,.48) !important;color:#b9df8b !important;background:rgba(71,112,49,.16) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-vitals,
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-rewards{display:flex !important;gap:8px !important;align-items:center !important;margin-top:3px !important;font-size:6px !important;line-height:1 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-vitals{color:#8f9891 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-rewards{color:#ba985a !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-rewards span+span::before{content:"•";margin-right:8px;color:#60533e;}

/* Phase 4 — battlefield is the hero */
body.combat-visual-rebuild-v101379 #combatPage .combat-battle-panel{
  grid-area:battle !important;padding:9px !important;
  border:1px solid rgba(212,165,79,.54) !important;border-radius:4px !important;
  background:radial-gradient(circle at 50% 30%,rgba(121,82,35,.08),transparent 36%),linear-gradient(180deg,#101d21,#0a1417) !important;
  box-shadow:0 8px 26px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.015) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-battle-panel-heading strong{display:block !important;margin-top:1px !important;color:#ded4bf !important;font-size:11px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-battle-view{min-height:495px !important;border:0 !important;background:transparent !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-battlefield-idle{
  display:flex !important;flex-direction:column !important;justify-content:center !important;gap:12px !important;
  min-height:490px !important;padding:20px !important;border:1px solid rgba(168,126,58,.22) !important;background:rgba(3,10,12,.45) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-hero{text-align:center !important;max-width:520px !important;margin:0 auto !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-crest{
  width:68px !important;height:68px !important;margin:0 auto 10px !important;display:grid !important;place-items:center !important;
  border:1px solid rgba(212,165,79,.58) !important;border-radius:50% !important;background:radial-gradient(circle,rgba(140,95,34,.20),rgba(7,15,18,.85)) !important;
  box-shadow:0 0 24px rgba(190,132,48,.09) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-crest img{width:42px !important;height:42px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-hero .eyebrow{display:block !important;margin-bottom:5px !important;color:#aa8344 !important;font-size:7px !important;letter-spacing:.12em !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-hero>strong{display:block !important;color:#eadfc8 !important;font-family:Georgia,serif !important;font-size:21px !important;font-weight:500 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-hero p{margin:6px auto 0 !important;max-width:430px !important;color:#818b85 !important;font-size:8px !important;line-height:1.45 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip{
  display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:1px !important;
  border:1px solid rgba(168,126,58,.24) !important;background:rgba(168,126,58,.18) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip>span{
  display:flex !important;align-items:baseline !important;justify-content:center !important;gap:6px !important;min-height:39px !important;padding:8px 6px !important;background:#091417 !important;text-align:center !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip small{color:#747f79 !important;font-size:6px !important;text-transform:uppercase !important;letter-spacing:.04em !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip strong{color:#e3bd70 !important;font-size:13px !important;font-weight:700 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-loadout{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-stance,
body.combat-visual-rebuild-v101379 #combatPage .combat-selected-food-summary{
  display:grid !important;grid-template-columns:auto minmax(0,1fr) !important;align-items:center !important;gap:8px !important;min-height:54px !important;padding:8px 10px !important;
  border:1px solid rgba(168,126,58,.22) !important;background:#0b171a !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-stance{display:flex !important;flex-direction:column !important;align-items:flex-start !important;justify-content:center !important;gap:1px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-stance small,
body.combat-visual-rebuild-v101379 #combatPage .combat-selected-food-summary small{color:#77817c !important;font-size:6px !important;text-transform:uppercase !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-stance strong,
body.combat-visual-rebuild-v101379 #combatPage .combat-selected-food-summary strong{color:#dfd3bb !important;font-size:9px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-stance span,
body.combat-visual-rebuild-v101379 #combatPage .combat-selected-food-summary b{color:#8e9891 !important;font-size:7px !important;font-weight:500 !important;}

body.combat-visual-rebuild-v101379 #combatPage .combat-battlefield-live{display:flex !important;flex-direction:column !important;gap:8px !important;min-height:490px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline{
  display:grid !important;grid-template-columns:auto minmax(0,1fr) auto !important;align-items:center !important;gap:10px !important;
  min-height:31px !important;padding:5px 8px !important;border:1px solid rgba(168,126,58,.22) !important;background:#091417 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline>span{display:flex !important;align-items:center !important;gap:5px !important;color:#93b66f !important;font-size:6px !important;text-transform:uppercase !important;letter-spacing:.06em !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline i{width:6px !important;height:6px !important;border-radius:50% !important;background:#82b657 !important;box-shadow:0 0 7px rgba(130,182,87,.45) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline strong{color:#e2d7c0 !important;font-size:9px !important;text-align:center !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline small{color:#a48651 !important;font-size:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-duel-stage{
  display:grid !important;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) !important;gap:8px !important;align-items:center !important;
  min-height:270px !important;padding:14px !important;border:1px solid rgba(168,126,58,.22) !important;
  background:radial-gradient(circle at 50% 55%,rgba(181,119,40,.10),transparent 24%),linear-gradient(180deg,rgba(4,11,13,.64),rgba(5,13,15,.88)) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-duelist{
  display:grid !important;grid-template-columns:118px minmax(0,1fr) !important;grid-template-areas:"portrait head" "portrait hptext" "portrait hpbar" "portrait timer" !important;
  column-gap:12px !important;row-gap:5px !important;align-items:center !important;
  padding:10px !important;border:1px solid rgba(168,126,58,.22) !important;background:rgba(10,23,27,.82) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{grid-template-columns:minmax(0,1fr) 118px !important;grid-template-areas:"head portrait" "hptext portrait" "hpbar portrait" "timer portrait" !important;text-align:right !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait{grid-area:portrait !important;width:118px !important;height:150px !important;margin:0 !important;border:1px solid rgba(212,165,79,.44) !important;border-radius:3px !important;background:linear-gradient(180deg,#122126,#091316) !important;overflow:hidden !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{width:100% !important;height:126px !important;display:grid !important;place-items:center !important;overflow:hidden !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait img{width:100% !important;height:100% !important;object-fit:cover !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-player-portrait img{width:70px !important;height:70px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>small{display:block !important;padding:5px !important;border-top:1px solid rgba(168,126,58,.22) !important;color:#817c70 !important;font-size:6px !important;text-transform:uppercase !important;letter-spacing:.08em !important;text-align:center !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head{grid-area:head !important;display:block !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head small{display:block !important;color:#8c938b !important;font-size:6px !important;text-transform:uppercase !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head strong{display:block !important;margin:2px 0 !important;color:#eadfc8 !important;font-family:Georgia,serif !important;font-size:17px !important;font-weight:500 !important;line-height:1 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head b{display:block !important;color:#b18e55 !important;font-size:7px !important;font-weight:500 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-health-line{grid-area:hptext !important;display:flex !important;justify-content:space-between !important;gap:8px !important;color:#878f89 !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy .combat-health-line{flex-direction:row-reverse !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-health-line strong{color:#ded4bf !important;font-size:8px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-health-bar{grid-area:hpbar !important;height:8px !important;margin:0 !important;border:1px solid rgba(0,0,0,.35) !important;background:#1d2929 !important;overflow:hidden !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-health-bar>span{background:linear-gradient(90deg,#8c3138,#c8515d) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-health-bar.enemy>span{background:linear-gradient(90deg,#7c3e2d,#c16a3d) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-attack-timer{grid-area:timer !important;margin:2px 0 0 !important;padding:0 !important;border:0 !important;background:none !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-attack-timer>div:first-child{display:flex !important;justify-content:space-between !important;gap:5px !important;margin-bottom:4px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy .combat-attack-timer>div:first-child{flex-direction:row-reverse !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-attack-timer small{color:#747d78 !important;font-size:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-attack-timer b{color:#ae8e59 !important;font-size:6px !important;font-weight:500 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-progress-track{height:5px !important;border:0 !important;background:#1c292d !important;overflow:hidden !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-progress-fill{background:linear-gradient(90deg,#96702e,#d9b355) !important;transition:none !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-progress-fill.enemy{background:linear-gradient(90deg,#784735,#bd7046) !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:3px !important;color:#c49b55 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core span{width:46px !important;height:46px !important;display:grid !important;place-items:center !important;border:1px solid rgba(212,165,79,.48) !important;border-radius:50% !important;background:#0b1719 !important;font-family:Georgia,serif !important;font-size:13px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core small{color:#6f766f !important;font-size:5px !important;text-transform:uppercase !important;letter-spacing:.08em !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-footer{
  display:grid !important;grid-template-columns:auto auto 1fr auto !important;gap:7px !important;align-items:center !important;min-height:31px !important;padding:5px 8px !important;border:1px solid rgba(168,126,58,.22) !important;background:#091417 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-footer span{color:#767f79 !important;font-size:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-footer strong{color:#d4ae68 !important;font-size:8px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop{display:grid !important;grid-template-columns:auto minmax(0,1fr) !important;gap:10px !important;align-items:center !important;min-height:40px !important;padding:5px 8px !important;border:1px solid rgba(168,126,58,.22) !important;background:#0a1518 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop>.eyebrow{font-size:6px !important;color:#a3814a !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop>div{display:flex !important;gap:6px !important;flex-wrap:wrap !important;justify-content:flex-end !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop-item{display:grid !important;grid-template-columns:24px auto auto !important;align-items:center !important;gap:5px !important;padding:3px 6px !important;border:1px solid rgba(168,126,58,.18) !important;background:#0e1b1f !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop-item img{width:22px !important;height:22px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop-item b{color:#cfc4ae !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop-item small{color:#c29d5e !important;font-size:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-bottom-actions{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:10px !important;margin-top:auto !important;padding:7px 8px !important;border:1px solid rgba(168,126,58,.22) !important;background:#0a1518 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-repeat-note{display:flex !important;align-items:center !important;gap:7px !important;min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-repeat-note>span{color:#9abb6f !important;font-size:15px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-repeat-note strong{display:block !important;color:#c9c0ad !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-repeat-note small{display:block !important;margin-top:2px !important;color:#747d78 !important;font-size:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-stop-button{min-height:31px !important;padding:5px 12px !important;border:1px solid rgba(170,72,64,.62) !important;border-radius:3px !important;background:linear-gradient(180deg,rgba(107,47,43,.52),rgba(64,33,31,.46)) !important;color:#e2b3a9 !important;font-size:7px !important;}

/* Phase 5 — supplies and rewards become a calm support rail */
body.combat-visual-rebuild-v101379 #combatPage .combat-side-panel{
  grid-area:support !important;display:flex !important;flex-direction:column !important;gap:8px !important;
  padding:0 !important;border:0 !important;background:none !important;
}
body.combat-visual-rebuild-v101379 #combatPage :is(.combat-food-panel-v2,.combat-session-panel){
  margin:0 !important;padding:9px !important;border:1px solid var(--cv-line) !important;border-radius:4px !important;background:linear-gradient(180deg,#0f1c20,#0b171a) !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-panel{flex:1 1 auto !important;min-height:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage #combatAutoEatControl{
  min-height:24px !important;padding:3px 7px !important;border:1px solid rgba(115,151,71,.48) !important;border-radius:999px !important;background:rgba(63,92,44,.14) !important;color:#a9c980 !important;font-size:5px !important;white-space:nowrap !important;
}
body.combat-visual-rebuild-v101379 #combatPage #combatAutoEatControl:not(.active){border-color:rgba(168,126,58,.25) !important;background:#0a1518 !important;color:#94866c !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-side-help{margin:0 0 7px !important;color:#7b8580 !important;font-size:6px !important;line-height:1.35 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-card{
  display:grid !important;grid-template-columns:36px minmax(0,1fr) auto !important;align-items:center !important;gap:7px !important;min-height:51px !important;padding:6px !important;border:1px solid rgba(168,126,58,.22) !important;background:#091417 !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-icon{width:36px !important;height:36px !important;display:grid !important;place-items:center !important;border:1px solid rgba(168,126,58,.22) !important;background:#111f23 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-icon img{width:31px !important;height:31px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-copy{min-width:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-copy small{display:block !important;color:#737e78 !important;font-size:5px !important;text-transform:uppercase !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-copy strong{display:block !important;margin:2px 0 !important;color:#ded4bf !important;font-size:8px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-supply-copy b{display:block !important;color:#b39562 !important;font-size:6px !important;font-weight:500 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-eat-button{min-width:39px !important;min-height:29px !important;padding:4px 7px !important;border:1px solid rgba(212,165,79,.48) !important;border-radius:2px !important;background:#0d1a1d !important;color:#d5b672 !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-food-select-row{display:block !important;margin-top:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-food-select-row label{display:block !important;margin-bottom:3px !important;color:#737d77 !important;font-size:5px !important;text-transform:uppercase !important;letter-spacing:.08em !important;}
body.combat-visual-rebuild-v101379 #combatPage #combatFoodSelect{width:100% !important;height:31px !important;min-height:31px !important;padding:3px 24px 3px 6px !important;border:1px solid rgba(168,126,58,.24) !important;border-radius:2px !important;background:#091417 !important;color:#bcb19b !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-heading-meta{display:flex !important;gap:4px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-heading-meta strong{padding:2px 5px !important;border:1px solid rgba(168,126,58,.20) !important;border-radius:999px !important;background:#091417 !important;color:#c4a161 !important;font-size:6px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp{display:grid !important;grid-template-columns:1fr !important;gap:3px !important;margin:0 0 7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp-row{display:grid !important;grid-template-columns:25px minmax(0,1fr) !important;gap:6px !important;align-items:center !important;min-height:34px !important;padding:4px 6px !important;border:1px solid rgba(168,126,58,.18) !important;background:#091417 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp-row>span{width:25px !important;height:25px !important;display:grid !important;place-items:center !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp-row img{width:22px !important;height:22px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp-row small{display:block !important;color:#747e78 !important;font-size:5px !important;text-transform:uppercase !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp-row strong{display:block !important;margin-top:1px !important;color:#d5c8ae !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-mobile-fold{display:none !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-loot{display:block !important;margin:0 !important;max-height:207px !important;overflow:auto !important;padding:0 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-list{display:flex !important;flex-direction:column !important;gap:3px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-row{display:grid !important;grid-template-columns:30px minmax(0,1fr) auto !important;align-items:center !important;gap:6px !important;min-height:38px !important;padding:4px 5px !important;border:1px solid rgba(168,126,58,.17) !important;background:#091417 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-icon{width:30px !important;height:30px !important;display:grid !important;place-items:center !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-icon img{width:27px !important;height:27px !important;object-fit:contain !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-copy strong{display:block !important;color:#cfc4ad !important;font-size:7px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-copy small{display:block !important;margin-top:1px !important;color:#69736e !important;font-size:5px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-summary-amount strong{color:#c19b5b !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-empty{display:grid !important;grid-template-columns:24px minmax(0,1fr) !important;gap:6px !important;align-items:center !important;padding:7px !important;border:1px solid rgba(168,126,58,.16) !important;background:#091417 !important;color:#747e78 !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-empty>span{font-size:16px !important;color:#826d4e !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-empty strong{display:block !important;color:#a9a08e !important;font-size:7px !important;}
body.combat-visual-rebuild-v101379 #combatPage .combat-session-empty small{display:block !important;margin-top:2px !important;font-size:5px !important;line-height:1.3 !important;}

/* Phase 6 — laptop/tablet/phone closure */
@media (max-width:1350px) and (min-width:1041px){
  body.combat-visual-rebuild-v101379 #combatPage .combat-layout-v2{grid-template-columns:205px minmax(430px,1fr) 230px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist{grid-template-columns:96px minmax(0,1fr) !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{grid-template-columns:minmax(0,1fr) 96px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait{width:96px !important;height:135px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{height:111px !important;}
}
@media (max-width:1040px) and (min-width:761px){
  body.combat-visual-rebuild-v101379 #combatPage .combat-command-deck{grid-template-columns:1fr !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-layout-v2{grid-template-columns:220px minmax(0,1fr) !important;grid-template-areas:"roster battle" "support support" !important;min-height:0 !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-side-panel{display:grid !important;grid-template-columns:1fr 1fr !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-session-loot{max-height:150px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duel-stage{grid-template-columns:1fr 38px 1fr !important;padding:8px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist{grid-template-columns:80px minmax(0,1fr) !important;padding:7px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{grid-template-columns:minmax(0,1fr) 80px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait{width:80px !important;height:120px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{height:96px !important;}
}
@media (max-width:760px){
  body.combat-visual-rebuild-v101379 #combatPage{gap:6px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading{padding:4px 4px 8px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading .reference-page-heading-icon{width:38px !important;height:38px !important;min-width:38px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading h2{font-size:23px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .reference-combat-heading p{font-size:9px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-command-deck{grid-template-columns:1fr !important;gap:5px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-skills-inline-panel{padding:7px !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-skills-inline-panel{display:none !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-skill-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-style-panel{padding:7px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-style-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-style-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-option{grid-template-columns:1fr !important;min-height:38px !important;padding:4px !important;text-align:center !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-option .combat-style-icon,
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-option .combat-stance-copy small,
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-check{display:none !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-copy strong{text-align:center !important;font-size:7px !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-style-help{display:none !important;}

  body.combat-visual-rebuild-v101379 #combatPage .combat-layout-v2{display:flex !important;flex-direction:column !important;gap:5px !important;min-height:0 !important;width:100% !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-battle-panel{order:1 !important;padding:6px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-roster-panel{order:2 !important;padding:6px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-side-panel{order:3 !important;display:flex !important;flex-direction:column !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-battle-view{min-height:0 !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-battlefield-idle{min-height:260px !important;padding:12px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-idle-crest{width:54px !important;height:54px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-idle-hero>strong{font-size:18px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip{grid-template-columns:repeat(5,minmax(0,1fr)) !important;overflow:hidden !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip>span{display:block !important;min-height:40px !important;padding:6px 2px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip small{display:block !important;font-size:5px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip strong{display:block !important;margin-top:3px !important;font-size:11px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-idle-loadout{grid-template-columns:1fr !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-battlefield-live{min-height:0 !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline{grid-template-columns:1fr auto !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-encounter-topline>strong{display:none !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duel-stage{grid-template-columns:1fr 28px 1fr !important;gap:4px !important;min-height:0 !important;padding:6px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{display:flex !important;flex-direction:column !important;gap:5px !important;padding:6px !important;text-align:left !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait{width:100% !important;height:128px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{height:104px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head{width:100% !important;text-align:left !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head strong{font-size:12px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-health-line,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy .combat-health-line,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy .combat-attack-timer>div:first-child{width:100% !important;flex-direction:row !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-health-bar,
  body.combat-visual-rebuild-v101379 #combatPage .combat-attack-timer{width:100% !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core span{width:28px !important;height:28px !important;font-size:8px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core small{display:none !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-bottom-actions{align-items:stretch !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-repeat-note small{display:none !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-stop-button{min-height:44px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop{grid-template-columns:1fr !important;gap:5px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-last-drop>div{justify-content:flex-start !important;}

  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-grid{display:grid !important;grid-template-columns:1fr !important;gap:4px !important;max-height:none !important;overflow:visible !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-card{grid-template-columns:52px minmax(0,1fr) !important;min-height:64px !important;padding:5px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-roster-portrait{width:52px !important;height:52px !important;}

  body.combat-visual-rebuild-v101379 #combatPage :is(.combat-food-panel-v2,.combat-session-panel){padding:7px !important;}
  body.combat-visual-rebuild-v101379 #combatPage #combatAutoEatControl,
  body.combat-visual-rebuild-v101379 #combatPage #combatFoodSelect,
  body.combat-visual-rebuild-v101379 #combatPage .combat-eat-button{min-height:44px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-mobile-fold{display:flex !important;min-height:44px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-session-xp{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-session-loot{max-height:none !important;overflow:visible !important;}
}
@media (max-width:380px){
  body.combat-visual-rebuild-v101379 #combatPage .combat-duel-stage{grid-template-columns:1fr !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core{height:24px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait{height:116px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{height:92px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip>span:nth-child(4),
  body.combat-visual-rebuild-v101379 #combatPage .combat-derived-strip>span:nth-child(5){display:none !important;}
}

/* Phase 6 visual QA corrections: neutralize legacy fighter transforms and keep
   the phone duel readable instead of squeezing two full fighter records side-by-side. */
body.combat-visual-rebuild-v101379 #combatPage .combat-idle-hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core,
body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core span,
body.combat-visual-rebuild-v101379 #combatPage .combat-vs-clean,
body.combat-visual-rebuild-v101379 #combatPage .combat-vs-clean span{
  transform:none !important;
  writing-mode:horizontal-tb !important;
}

@media (max-width:760px){
  body.combat-visual-rebuild-v101379 #combatPage .combat-duel-stage{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:5px !important;
    padding:6px !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{
    width:100% !important;
    display:grid !important;
    grid-template-columns:84px minmax(0,1fr) !important;
    grid-template-areas:"portrait head" "portrait hptext" "portrait hpbar" "portrait timer" !important;
    column-gap:8px !important;
    row-gap:4px !important;
    align-items:center !important;
    min-width:0 !important;
    padding:6px !important;
    text-align:left !important;
    writing-mode:horizontal-tb !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy .combat-fighter-portrait{
    grid-area:portrait !important;
    width:84px !important;
    height:104px !important;
    min-width:84px !important;
    writing-mode:horizontal-tb !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{height:80px !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-clean-head,
  body.combat-visual-rebuild-v101379 #combatPage .combat-health-line,
  body.combat-visual-rebuild-v101379 #combatPage .combat-health-bar,
  body.combat-visual-rebuild-v101379 #combatPage .combat-attack-timer{
    min-width:0 !important;
    writing-mode:horizontal-tb !important;
    transform:none !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core{
    width:100% !important;
    height:28px !important;
    flex:0 0 28px !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core span{
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-card{
    grid-template-columns:44px minmax(0,1fr) !important;
    min-height:60px !important;
    gap:5px !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-roster-portrait{
    width:44px !important;
    height:44px !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-rewards{
    gap:4px !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-rewards span+span::before{
    margin-right:4px !important;
  }
}
@media (max-width:360px){
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-grid{grid-template-columns:1fr !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{
    grid-template-columns:74px minmax(0,1fr) !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait,
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy .combat-fighter-portrait{
    width:74px !important;
    min-width:74px !important;
    height:96px !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-fighter-portrait>span{height:72px !important;}
}
@media (max-width:760px){
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.player{order:1 !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-clash-core{order:2 !important;}
  body.combat-visual-rebuild-v101379 #combatPage .combat-duelist.enemy{order:3 !important;}
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-option .combat-stance-copy{
    display:block !important;
    width:100% !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage.combat-active .combat-stance-option .combat-stance-copy strong{
    display:block !important;
    color:#d8c8a7 !important;
    white-space:nowrap !important;
  }
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-vitals,
  body.combat-visual-rebuild-v101379 #combatPage .combat-enemy-rewards{
    white-space:nowrap !important;
    overflow:hidden !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: equipment-modern.css
   ========================================================================== */
/* JourneyDen V1.01.381 — Equipment Visual Rebuild
   Goal: bring Equipment into the same modern visual language as World Projects
   while preserving all existing equipment/farming behavior and DOM contracts. */

body.equipment-modern-v101381 #equipmentPage {
  --eq-bg: #0b171c;
  --eq-panel: #0d1c22;
  --eq-panel-soft: #101f24;
  --eq-panel-deep: #09161b;
  --eq-gold: #c79339;
  --eq-gold-bright: #e4b653;
  --eq-border: rgba(171, 125, 48, .42);
  --eq-border-soft: rgba(144, 105, 44, .28);
  --eq-text: #eee9df;
  --eq-muted: #a8a89f;
  --eq-green: #8fd772;
  --eq-blue: #63a8ea;
  --eq-red: #e07855;
  gap: 0 !important;
}

/* Compact page header shared with the World Projects visual hierarchy. */
body.equipment-modern-v101381 #equipmentPage > .equipment-page-heading {
  margin: 0 0 10px !important;
  padding: 10px 0 13px !important;
  min-height: 0 !important;
  border-bottom: 1px solid var(--eq-border-soft) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-page-heading::before { content: none !important; }
body.equipment-modern-v101381 #equipmentPage .equipment-page-heading .reference-page-heading-title {
  align-items: center !important;
  gap: 14px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-page-heading .reference-page-heading-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  border: 1px solid var(--eq-border) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 42% 36%, rgba(210,161,72,.17), rgba(8,16,20,.92) 68%) !important;
  box-shadow: inset 0 0 0 4px rgba(214,163,72,.04), 0 0 18px rgba(201,145,52,.07) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-page-heading h2 {
  margin: 2px 0 2px !important;
  font-size: clamp(28px, 2vw, 41px) !important;
  letter-spacing: .025em !important;
  line-height: 1 !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-page-heading p {
  max-width: 760px !important;
  margin: 4px 0 0 !important;
  color: var(--eq-muted) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-page-heading .eyebrow {
  color: var(--eq-gold) !important;
  letter-spacing: .045em !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-best-loadout-button {
  min-height: 40px !important;
  padding: 9px 16px !important;
  border: 1px solid rgba(218,161,66,.58) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #17252a, #0d181c) !important;
  color: #e9cf97 !important;
  box-shadow: none !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-best-loadout-button:hover:not(:disabled) {
  border-color: rgba(229,175,76,.86) !important;
  color: #fff0c8 !important;
  background: linear-gradient(180deg, rgba(70,52,26,.82), rgba(34,26,17,.9)) !important;
}

/* Loadout switcher: remove the old framed bar and use the same compact tab treatment as Projects. */
body.equipment-modern-v101381 #equipmentPage > .equipment-loadout-tabs {
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  display: flex !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button {
  min-width: 180px !important;
  min-height: 44px !important;
  padding: 7px 14px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  text-align: left !important;
  border: 1px solid var(--eq-border) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #132126, #0c171b) !important;
  box-shadow: none !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button > span {
  grid-row: 1 / 3 !important;
  width: 28px !important;
  height: 28px !important;
  align-self: center !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 18px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button strong {
  color: #e8d6ae !important;
  font-size: 12px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button small {
  margin-top: 0 !important;
  color: #878d87 !important;
  font-size: 9px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button.active {
  border-color: rgba(218,161,66,.78) !important;
  background: linear-gradient(180deg, rgba(96,70,29,.95), rgba(54,39,20,.96)) !important;
  box-shadow: inset 0 0 0 2px rgba(245,190,82,.07), 0 0 14px rgba(204,145,45,.10) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button.active strong { color: #fff1c8 !important; }
body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button.active small { color: #c3ad82 !important; }

/* Main workspace mirrors Projects: dominant working panel + sticky context rail. */
body.equipment-modern-v101381 #equipmentPage .equipment-reference-layout {
  grid-template-columns: minmax(0, 2.35fr) minmax(300px, .86fr) !important;
  gap: 14px !important;
  align-items: start !important;
  margin-bottom: 14px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-reference-side {
  position: sticky !important;
  top: 12px !important;
  align-self: start !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
}

body.equipment-modern-v101381 #equipmentPage .equipment-clean-section,
body.equipment-modern-v101381 #equipmentPage .potion-preset-panel {
  position: relative !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--eq-border) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(14,29,35,.98), rgba(8,20,25,.98)) !important;
  box-shadow: inset 0 0 30px rgba(0,0,0,.13) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-section::before,
body.equipment-modern-v101381 #equipmentPage .equipment-clean-section::after,
body.equipment-modern-v101381 #equipmentPage .potion-preset-panel::before,
body.equipment-modern-v101381 #equipmentPage .potion-preset-panel::after { content: none !important; }

body.equipment-modern-v101381 #equipmentPage .equipment-loadout-frame {
  min-height: 548px !important;
  overflow: hidden !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-heading {
  margin: 0 0 12px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid var(--eq-border-soft) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-heading h3 {
  margin: 3px 0 0 !important;
  color: var(--eq-text) !important;
  font-size: 17px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-heading .eyebrow {
  color: var(--eq-gold) !important;
  letter-spacing: .08em !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-heading > small {
  color: #7f8986 !important;
  font-size: 10px !important;
}

/* Character loadout becomes a clean equipment board rather than a set of boxed tiles. */
body.equipment-modern-v101381 #equipmentPage .equipment-slot-overview-clean {
  width: min(100%, 850px) !important;
  min-height: 440px !important;
  gap: 9px !important;
  margin: 2px auto 0 !important;
  padding: 16px 10px 8px !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(199,147,57,.085), transparent 28%),
    radial-gradient(circle at 50% 43%, transparent 0 34%, rgba(199,147,57,.055) 34.5% 35%, transparent 35.5%),
    linear-gradient(180deg, rgba(255,255,255,.008), rgba(0,0,0,.06)) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette {
  opacity: .12 !important;
  filter: saturate(.65) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette .character-head,
body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette .character-torso,
body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette .character-legs {
  border-color: rgba(216,163,70,.36) !important;
  background: linear-gradient(180deg, rgba(203,153,63,.13), rgba(29,54,58,.025)) !important;
  box-shadow: 0 0 28px rgba(206,152,60,.04) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette .character-torso { border-radius: 44px 44px 24px 24px !important; }
body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette .character-legs { border-radius: 18px 18px 42px 42px !important; }

body.equipment-modern-v101381 #equipmentPage .equipment-character-slot {
  position: relative !important;
  min-height: 88px !important;
  padding: 9px 7px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(16,32,37,.97), rgba(8,19,23,.97)) !important;
  color: var(--eq-text) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.14) !important;
  transform: none !important;
  overflow: visible !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot:hover {
  border-color: rgba(217,160,64,.58) !important;
  background: linear-gradient(180deg, rgba(20,39,43,.98), rgba(10,22,26,.98)) !important;
  box-shadow: inset 0 0 22px rgba(0,0,0,.12), 0 0 0 1px rgba(207,151,57,.06) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot.filled {
  border-color: rgba(190,137,48,.42) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(213,163,70,.08), transparent 52%),
    linear-gradient(180deg, rgba(17,34,39,.98), rgba(8,19,23,.98)) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot.selected {
  border-color: rgba(229,175,76,.92) !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(248,194,90,.13), 0 0 14px rgba(214,156,58,.17) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot.selected::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 18% !important;
  bottom: 18% !important;
  width: 3px !important;
  border-radius: 0 2px 2px 0 !important;
  background: #e6b148 !important;
  box-shadow: 0 0 9px rgba(239,181,73,.8) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot-icon {
  width: 40px !important;
  height: 40px !important;
  font-size: 23px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot-icon .jd-item-icon {
  width: 38px !important;
  height: 38px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot small {
  color: #858d88 !important;
  font-size: 8px !important;
  letter-spacing: .08em !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot strong {
  color: #e3d5b6 !important;
  font-size: 9px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-character-slot.filled strong { color: #f0e4c7 !important; }

/* Right rail: one hero metric followed by readable stat tiles. */
body.equipment-modern-v101381 #equipmentPage .equipment-summary-frame,
body.equipment-modern-v101381 #equipmentPage .equipment-detail-frame {
  min-width: 0 !important;
  padding: 13px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-summary {
  gap: 8px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card {
  position: relative !important;
  grid-template-columns: minmax(0,1fr) 74px !important;
  grid-template-rows: auto auto !important;
  min-height: 84px !important;
  padding: 12px 13px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 6px !important;
  background: linear-gradient(100deg, rgba(15,31,36,.98), rgba(10,22,27,.98)) !important;
  overflow: hidden !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 17px !important;
  bottom: 17px !important;
  width: 3px !important;
  background: #d9a348 !important;
  box-shadow: 0 0 8px rgba(222,164,63,.5) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card small {
  color: #8a8f88 !important;
  font-size: 8px !important;
  letter-spacing: .08em !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card strong {
  color: #efc969 !important;
  font-size: 36px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card span {
  color: #a5a59c !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-stats {
  gap: 6px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-stats > div {
  min-height: 56px !important;
  padding: 9px 5px !important;
  border: 1px solid rgba(144,105,44,.24) !important;
  border-radius: 5px !important;
  background: rgba(5,13,16,.78) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-stats small {
  color: #7f8782 !important;
  font-size: 7px !important;
  text-transform: uppercase !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-combat-stats strong {
  margin-top: 4px !important;
  color: #dec485 !important;
  font-size: 16px !important;
}

/* Selected item card feels like the selected-project detail rather than a black rectangle. */
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail {
  gap: 9px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-main {
  grid-template-columns: 72px minmax(0,1fr) !important;
  gap: 11px !important;
  min-height: 94px !important;
  padding: 11px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 6px !important;
  background: linear-gradient(105deg, rgba(13,27,32,.98), rgba(7,17,21,.98)) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-icon {
  width: 70px !important;
  height: 70px !important;
  border: 1px solid rgba(200,148,55,.30) !important;
  border-radius: 6px !important;
  background: radial-gradient(circle, rgba(201,148,55,.08), rgba(5,12,15,.92) 70%) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-icon .jd-item-icon {
  width: 62px !important;
  height: 62px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-main small {
  color: #858d88 !important;
  font-size: 8px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-main h3 {
  margin-top: 3px !important;
  color: #f0eadf !important;
  font-size: 16px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-main p {
  margin-top: 5px !important;
  color: #aaa99f !important;
  font-size: 10px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-main span {
  margin-top: 5px !important;
  color: #cfaa62 !important;
  font-size: 9px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-actions {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 6px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-actions button {
  min-height: 38px !important;
  border-radius: 4px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-actions .equipment-bis-label {
  min-height: 36px !important;
  border: 1px solid rgba(93,177,92,.28) !important;
  border-radius: 4px !important;
  background: rgba(39,103,54,.18) !important;
  color: #9dd488 !important;
}

/* Lower modules align to the same modular grid as World Projects. */
body.equipment-modern-v101381 #equipmentPage .equipment-supplies-reference-grid {
  grid-template-columns: minmax(300px,.82fr) minmax(0,1.55fr) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-supply-row {
  gap: 9px !important;
  padding: 10px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(13,27,32,.97), rgba(7,17,21,.97)) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-supply-identity > span {
  border: 1px solid rgba(199,147,57,.26) !important;
  border-radius: 5px !important;
  background: #071116 !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-supply-row select,
body.equipment-modern-v101381 #equipmentPage .equipment-supply-row button {
  min-height: 39px !important;
  border-radius: 4px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-secondary-button.active-toggle {
  border-color: rgba(93,177,92,.48) !important;
  background: rgba(39,103,54,.24) !important;
  color: #aee39a !important;
}

body.equipment-modern-v101381 #equipmentPage .potion-preset-panel {
  gap: 10px !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-hero {
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--eq-border-soft) !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-hero h2 {
  color: var(--eq-text) !important;
  font-size: 17px !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-hero p {
  color: #818a86 !important;
  font-size: 9px !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-auto-toggle {
  border-radius: 4px !important;
  border-color: var(--eq-border-soft) !important;
  background: #081418 !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-grid {
  gap: 7px !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-card {
  padding: 9px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(13,27,32,.96), rgba(7,17,21,.96)) !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-card.active {
  border-color: rgba(93,177,92,.44) !important;
  background: linear-gradient(180deg, rgba(39,103,54,.15), rgba(7,17,21,.96)) !important;
}
body.equipment-modern-v101381 #equipmentPage .potion-preset-icon,
body.equipment-modern-v101381 #equipmentPage .potion-preset-effect,
body.equipment-modern-v101381 #equipmentPage .potion-preset-select select,
body.equipment-modern-v101381 #equipmentPage .potion-preset-actions button {
  border-radius: 4px !important;
}

/* Gathering tools become three compact inventory-like cards. */
body.equipment-modern-v101381 #equipmentPage .equipment-tools-frame { margin-bottom: 0 !important; }
body.equipment-modern-v101381 #equipmentPage .equipment-tools-clean {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 8px !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-tool-clean {
  min-height: 80px !important;
  padding: 10px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(13,27,32,.96), rgba(7,17,21,.96)) !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-slot-icon {
  border: 1px solid rgba(199,147,57,.25) !important;
  border-radius: 5px !important;
  background: #071116 !important;
}
body.equipment-modern-v101381 #equipmentPage .equipment-clean-slot-actions button {
  border-radius: 4px !important;
}

/* Farming uses the same structure, with green reserved only for Farming-specific state. */
body.equipment-modern-v101381 #equipmentPage .farming-loadout-frame { min-height: 500px !important; }
body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot-overview {
  width: min(100%, 760px) !important;
  min-height: 360px !important;
  margin: 14px auto 0 !important;
  padding: 14px !important;
  gap: 9px !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 49%, rgba(111,171,78,.075), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.008), rgba(0,0,0,.06)) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-loadout-emblem {
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(111,171,78,.09), transparent 67%) !important;
  color: rgba(157,200,89,.34) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot {
  position: relative !important;
  min-height: 94px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(16,32,37,.97), rgba(8,19,23,.97)) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.14) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot:hover {
  border-color: rgba(118,176,89,.60) !important;
  background: linear-gradient(180deg, rgba(18,38,36,.98), rgba(9,23,21,.98)) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot.filled {
  border-color: rgba(118,176,89,.46) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot.selected {
  border-color: rgba(143,215,114,.86) !important;
  outline: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(143,215,114,.12), 0 0 13px rgba(91,155,73,.16) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot.selected::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 18% !important;
  bottom: 18% !important;
  width: 3px !important;
  background: #8fd772 !important;
  box-shadow: 0 0 8px rgba(143,215,114,.55) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-bonus-card {
  padding: 10px 11px !important;
  border: 1px solid rgba(93,177,92,.24) !important;
  border-radius: 5px !important;
  background: rgba(39,103,54,.11) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-bonus-card.muted {
  border-color: var(--eq-border-soft) !important;
  background: rgba(5,13,16,.76) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-equipment-available-frame { margin-top: 14px !important; }
body.equipment-modern-v101381 #equipmentPage .farming-equipment-available { gap: 8px !important; }
body.equipment-modern-v101381 #equipmentPage .farming-gear-card {
  padding: 11px !important;
  border: 1px solid var(--eq-border-soft) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(13,27,32,.96), rgba(7,17,21,.96)) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-gear-card.equipped {
  border-color: rgba(93,177,92,.42) !important;
  background: linear-gradient(180deg, rgba(39,103,54,.14), rgba(7,17,21,.96)) !important;
}
body.equipment-modern-v101381 #equipmentPage .farming-gear-card-meta button { border-radius: 4px !important; }
body.equipment-modern-v101381 #equipmentPage .farming-gear-source { border-top-color: var(--eq-border-soft) !important; }

/* Tablet: stop sticky behavior and stack the context rail below the loadout board. */
@media (max-width: 1050px) {
  body.equipment-modern-v101381 #equipmentPage .equipment-reference-layout {
    grid-template-columns: 1fr !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-reference-side {
    position: static !important;
    grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr) !important;
    grid-template-rows: none !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-loadout-frame { min-height: 0 !important; }
  body.equipment-modern-v101381 #equipmentPage .equipment-supplies-reference-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body.equipment-modern-v101381 #equipmentPage > .equipment-page-heading {
    align-items: flex-start !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-page-heading .reference-page-heading-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-best-loadout-button {
    width: 100% !important;
    margin-top: 8px !important;
  }
  body.equipment-modern-v101381 #equipmentPage > .equipment-loadout-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button {
    min-width: 0 !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-clean-section,
  body.equipment-modern-v101381 #equipmentPage .potion-preset-panel {
    padding: 11px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-reference-side {
    grid-template-columns: 1fr !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-slot-overview-clean {
    grid-template-columns: repeat(5,minmax(68px,1fr)) !important;
    min-height: 410px !important;
    padding: 8px 4px !important;
    gap: 6px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-character-slot {
    min-height: 80px !important;
    padding: 7px 4px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-character-slot-icon {
    width: 34px !important;
    height: 34px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-tools-clean {
    grid-template-columns: 1fr !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-tool-clean {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
  }
}

@media (max-width: 620px) {
  body.equipment-modern-v101381 #equipmentPage .equipment-page-heading .reference-page-heading-title {
    gap: 10px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-page-heading h2 {
    font-size: 27px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-page-heading p {
    font-size: 10px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button {
    min-height: 52px !important;
    grid-template-columns: 25px minmax(0,1fr) !important;
    padding: 7px 9px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button > span {
    width: 25px !important;
    height: 25px !important;
    font-size: 16px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-loadout-tabs button small { display: none !important; }

  body.equipment-modern-v101381 #equipmentPage .equipment-slot-overview-clean {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:
      "head neck"
      "cape ring"
      "weapon shield"
      "hands body"
      "legs feet" !important;
    min-height: 0 !important;
    padding: 2px !important;
    gap: 6px !important;
    background: transparent !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-character-silhouette { display: none !important; }
  body.equipment-modern-v101381 #equipmentPage .equipment-character-slot {
    min-height: 82px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-main {
    grid-template-columns: 60px minmax(0,1fr) !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-icon {
    width: 58px !important;
    height: 58px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-slot-detail-icon .jd-item-icon {
    width: 52px !important;
    height: 52px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card {
    grid-template-columns: minmax(0,1fr) 62px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-combat-level-card strong {
    font-size: 31px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-combat-stats {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  body.equipment-modern-v101381 #equipmentPage .equipment-supply-row {
    grid-template-columns: 1fr !important;
  }
  body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot-overview {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    padding: 2px !important;
    gap: 6px !important;
    background: transparent !important;
  }
  body.equipment-modern-v101381 #equipmentPage .farming-loadout-emblem { display: none !important; }
  body.equipment-modern-v101381 #equipmentPage .farming-equipment-slot {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 84px !important;
  }
  body.equipment-modern-v101381 #equipmentPage .farming-equipment-available {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: global-ui-foundation.css
   ========================================================================== */
/* JourneyDen V1.01.382 — Global UI Design System Foundation
   Shared modern visual language derived from World Projects / Equipment.
   Presentation only: no gameplay contracts or action IDs are changed. */

body.global-ui-modern-v101382 {
  --jd-bg-0:#061116;
  --jd-bg-1:#09171c;
  --jd-bg-2:#0c1b20;
  --jd-panel:#0d1c22;
  --jd-panel-soft:#112127;
  --jd-panel-deep:#071419;
  --jd-gold:#c79339;
  --jd-gold-bright:#e4b653;
  --jd-gold-pale:#efd49a;
  --jd-text:#eee9df;
  --jd-muted:#a5aaa3;
  --jd-dim:#747d79;
  --jd-border:rgba(171,125,48,.42);
  --jd-border-soft:rgba(144,105,44,.28);
  --jd-border-faint:rgba(144,105,44,.16);
  --jd-green:#8fd772;
  --jd-blue:#73b5ee;
  --jd-red:#e07855;
  --jd-radius:5px;
  --jd-radius-lg:8px;
  --jd-shadow-inset:inset 0 0 30px rgba(0,0,0,.13);
  --jd-shadow-focus:0 0 0 1px rgba(229,175,76,.1), 0 0 18px rgba(204,145,45,.1);
  --sidebar-width:236px;
  background:
    radial-gradient(circle at 76% -8%, rgba(192,139,48,.07), transparent 30%),
    linear-gradient(180deg,#071319 0,#061116 100%) !important;
  color:var(--jd-text);
}

body.global-ui-modern-v101382 .app-shell {
  width:min(1780px,100%) !important;
  border-inline:1px solid var(--jd-border-faint) !important;
  background:linear-gradient(180deg,rgba(7,18,23,.985),rgba(5,14,18,.99)) !important;
  box-shadow:0 0 80px rgba(0,0,0,.25) !important;
}
body.global-ui-modern-v101382 main { padding:18px 20px 26px !important; }
body.global-ui-modern-v101382 .page { max-width:1540px; margin:0 auto; }

/* Sidebar / permanent navigation */
body.global-ui-modern-v101382 .sidebar {
  border-right:1px solid var(--jd-border-soft) !important;
  background:
    linear-gradient(90deg,rgba(216,161,61,.025),transparent 22%),
    linear-gradient(180deg,#08161b,#061116) !important;
  box-shadow:8px 0 28px rgba(0,0,0,.12) !important;
}
body.global-ui-modern-v101382 .premium-brand-block {
  min-height:68px !important;
  padding:14px 18px 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:linear-gradient(180deg,rgba(17,32,36,.82),rgba(8,20,24,.6)) !important;
}
body.global-ui-modern-v101382 .sidebar-journeyden-logo { max-width:176px !important; filter:drop-shadow(0 2px 8px rgba(209,158,68,.08)); }
body.global-ui-modern-v101382 .sidebar-player-card {
  margin:10px 12px 8px !important;
  padding:12px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:var(--jd-radius-lg) !important;
  background:linear-gradient(145deg,rgba(17,34,39,.96),rgba(8,20,24,.96)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.global-ui-modern-v101382 .sidebar-player-avatar {
  border-color:var(--jd-border) !important;
  background:radial-gradient(circle,rgba(199,147,57,.14),rgba(7,17,21,.9) 70%) !important;
}
body.global-ui-modern-v101382 .sidebar-player-rank,
body.global-ui-modern-v101382 .sidebar-player-gold { color:var(--jd-gold-pale) !important; }
body.global-ui-modern-v101382 .sidebar-player-stats { color:var(--jd-muted) !important; }
body.global-ui-modern-v101382 .sidebar-player-health { background:#050d10 !important; border:1px solid rgba(255,255,255,.035) !important; }

body.global-ui-modern-v101382 .main-navigation.grouped-navigation {
  gap:8px !important;
  padding:7px 10px 10px !important;
  overflow-y:auto;
}
body.global-ui-modern-v101382 .main-navigation .nav-group { gap:4px !important; }
body.global-ui-modern-v101382 .main-navigation .nav-group-label {
  margin:5px 7px 1px !important;
  color:#746c59 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}
body.global-ui-modern-v101382 .main-navigation .nav-item {
  min-height:40px !important;
  padding:8px 10px !important;
  border:1px solid transparent !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,29,34,.46),rgba(7,17,21,.26)) !important;
  color:#c1b99f !important;
  box-shadow:none !important;
  transition:border-color .12s ease,background .12s ease,color .12s ease !important;
}
body.global-ui-modern-v101382 .main-navigation .nav-item:hover {
  border-color:rgba(171,125,48,.28) !important;
  background:linear-gradient(180deg,rgba(24,41,45,.74),rgba(9,21,25,.72)) !important;
  color:#eadbb9 !important;
  transform:none !important;
}
body.global-ui-modern-v101382 .main-navigation .nav-item.active {
  position:relative;
  border-color:rgba(218,161,66,.62) !important;
  background:linear-gradient(90deg,rgba(86,61,26,.74),rgba(30,31,25,.7) 72%,rgba(12,22,25,.82)) !important;
  color:#fff0c9 !important;
  box-shadow:inset 0 0 0 1px rgba(245,190,82,.05),0 0 14px rgba(204,145,45,.07) !important;
}
body.global-ui-modern-v101382 .main-navigation .nav-item.active::before {
  content:""; position:absolute; left:-1px; top:22%; bottom:22%; width:3px;
  background:var(--jd-gold-bright); box-shadow:0 0 8px rgba(228,182,83,.62);
}
body.global-ui-modern-v101382 .main-navigation .nav-item-icon { opacity:.88; }
body.global-ui-modern-v101382 .main-navigation .nav-item.active .nav-item-icon { opacity:1; filter:drop-shadow(0 0 5px rgba(228,182,83,.18)); }
body.global-ui-modern-v101382 .sidebar-footer {
  padding:10px 12px !important;
  border-top:1px solid var(--jd-border-soft) !important;
  background:#071419 !important;
}
body.global-ui-modern-v101382 .sidebar-signout-button,
body.global-ui-modern-v101382 .sidebar-settings-button {
  border:1px solid var(--jd-border-soft) !important;
  background:#09181d !important;
  color:#cfc5aa !important;
  border-radius:4px !important;
}
body.global-ui-modern-v101382 .sidebar-build-meta { color:#666d68 !important; }

/* Top account strip */
body.global-ui-modern-v101382 .topbar {
  min-height:62px !important;
  padding:10px 20px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:linear-gradient(180deg,rgba(10,24,29,.98),rgba(7,18,22,.98)) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.09) !important;
}
body.global-ui-modern-v101382 .topbar-title > .eyebrow { color:#8c764e !important; }
body.global-ui-modern-v101382 .topbar-title p { color:#777f7a !important; font-size:11px !important; }
body.global-ui-modern-v101382 .health-header-stat > span,
body.global-ui-modern-v101382 .stat-chip span { color:#7f8782 !important; }
body.global-ui-modern-v101382 .stat-chip {
  min-width:108px !important;
  padding:7px 10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,31,36,.98),rgba(8,19,23,.98)) !important;
  box-shadow:none !important;
}
body.global-ui-modern-v101382 .stat-chip strong { color:#e6d9bd !important; }

/* Journey tracker behaves like a slim status rail rather than a second header. */
body.global-ui-modern-v101382 .current-journey-tracker {
  margin:10px 20px 0 !important;
  padding:9px 12px !important;
  min-height:54px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(90deg,rgba(15,31,36,.96),rgba(8,20,24,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.global-ui-modern-v101382 .current-journey-icon {
  width:34px !important; height:34px !important; border:1px solid var(--jd-border-soft) !important;
  border-radius:50% !important; background:rgba(199,147,57,.055) !important;
}
body.global-ui-modern-v101382 .current-journey-copy strong { color:#e9e4da !important; }
body.global-ui-modern-v101382 .current-journey-hint { color:#858c87 !important; }
body.global-ui-modern-v101382 .current-journey-progress { height:4px !important; background:#050d10 !important; border-radius:99px !important; }
body.global-ui-modern-v101382 .current-journey-count { color:#dfbd6b !important; }

/* Shared headings: same hierarchy as World Projects / Equipment. */
body.global-ui-modern-v101382 .page > .section-heading,
body.global-ui-modern-v101382 .page > .page-title-row,
body.global-ui-modern-v101382 #progressPage > .section-heading,
body.global-ui-modern-v101382 #skillsPage > .section-heading {
  margin:0 0 12px !important;
  padding:10px 0 12px !important;
  min-height:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.global-ui-modern-v101382 .reference-page-heading::before,
body.global-ui-modern-v101382 .section-heading::before { content:none !important; }
body.global-ui-modern-v101382 .reference-page-heading-title { align-items:center !important; gap:14px !important; }
body.global-ui-modern-v101382 .reference-page-heading-icon {
  width:54px !important; height:54px !important; flex:0 0 54px !important;
  border:1px solid var(--jd-border) !important; border-radius:50% !important;
  background:radial-gradient(circle at 42% 36%,rgba(210,161,72,.15),rgba(8,16,20,.92) 68%) !important;
  box-shadow:inset 0 0 0 4px rgba(214,163,72,.035),0 0 18px rgba(201,145,52,.055) !important;
}
body.global-ui-modern-v101382 .reference-page-heading-icon img { width:28px !important; height:28px !important; object-fit:contain; }
body.global-ui-modern-v101382 .page .section-heading h2,
body.global-ui-modern-v101382 .page .page-title-row h2,
body.global-ui-modern-v101382 #progressPage .section-heading h2 {
  margin:2px 0 !important; font-size:clamp(27px,2vw,39px) !important; line-height:1 !important;
  letter-spacing:.025em !important; color:var(--jd-text) !important;
}
body.global-ui-modern-v101382 .page .section-heading p,
body.global-ui-modern-v101382 .page .page-title-row p { margin:4px 0 0 !important; color:var(--jd-muted) !important; max-width:760px !important; }
body.global-ui-modern-v101382 .eyebrow { color:var(--jd-gold) !important; letter-spacing:.08em !important; }

/* Shared panels / cards */
body.global-ui-modern-v101382 .card,
body.global-ui-modern-v101382 .settings-card,
body.global-ui-modern-v101382 .leaderboard-panel,
body.global-ui-modern-v101382 .guide-index,
body.global-ui-modern-v101382 .guide-article,
body.global-ui-modern-v101382 .mastery-summary-card,
body.global-ui-modern-v101382 .mastery-section,
body.global-ui-modern-v101382 .collection-expedition-ledger-section,
body.global-ui-modern-v101382 .den-guidance-card,
body.global-ui-modern-v101382 .journey-journal,
body.global-ui-modern-v101382 .achievement-card,
body.global-ui-modern-v101382 .collection-card {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:var(--jd-radius) !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.global-ui-modern-v101382 .card:hover,
body.global-ui-modern-v101382 .settings-card:hover {
  border-color:rgba(199,147,57,.42) !important; transform:none !important;
}

/* Shared buttons */
body.global-ui-modern-v101382 button:not(.den-scene-hotspot):not(.world-map-frontier-marker) {
  min-height:36px;
  border:1px solid rgba(218,161,66,.55);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(76,55,27,.95),rgba(42,31,19,.98));
  color:#f0d9a2;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  transition:border-color .12s ease,background .12s ease,color .12s ease,opacity .12s ease;
}
body.global-ui-modern-v101382 button:not(.den-scene-hotspot):not(.world-map-frontier-marker):hover:not(:disabled) {
  filter:none !important; transform:none !important;
  border-color:rgba(232,181,87,.83);
  background:linear-gradient(180deg,rgba(94,68,30,.98),rgba(49,35,20,.99));
  color:#fff0c7;
}
body.global-ui-modern-v101382 button.secondary,
body.global-ui-modern-v101382 .secondary-button,
body.global-ui-modern-v101382 button.text-button {
  border-color:var(--jd-border-soft) !important;
  background:linear-gradient(180deg,#132126,#0c171b) !important;
  color:#cbbd9f !important;
}
body.global-ui-modern-v101382 button.danger,
body.global-ui-modern-v101382 .reset-request-button {
  border-color:rgba(190,88,67,.55) !important;
  background:linear-gradient(180deg,rgba(104,45,35,.88),rgba(59,29,25,.92)) !important;
  color:#f0b09f !important;
}
body.global-ui-modern-v101382 button:disabled { opacity:.4 !important; }

/* Shared tabs / segmented navigation */
body.global-ui-modern-v101382 .section-owner-tabs,
body.global-ui-modern-v101382 .leaderboard-tabs,
body.global-ui-modern-v101382 .mastery-skill-tabs,
body.global-ui-modern-v101382 .achievement-filter-tabs {
  gap:5px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important;
}
body.global-ui-modern-v101382 .section-owner-tabs button,
body.global-ui-modern-v101382 .leaderboard-tabs button,
body.global-ui-modern-v101382 .mastery-skill-tabs button,
body.global-ui-modern-v101382 .achievement-filter-tabs button {
  min-height:38px !important; padding:8px 14px !important;
  border:1px solid var(--jd-border) !important; border-radius:3px !important;
  background:linear-gradient(180deg,#132126,#0c171b) !important; color:#c9b98f !important;
}
body.global-ui-modern-v101382 .section-owner-tabs button.active,
body.global-ui-modern-v101382 .leaderboard-tabs button.active,
body.global-ui-modern-v101382 .mastery-skill-tabs button.active,
body.global-ui-modern-v101382 .achievement-filter-tabs button.active {
  border-color:rgba(218,161,66,.78) !important;
  background:linear-gradient(180deg,rgba(96,70,29,.95),rgba(54,39,20,.96)) !important;
  color:#fff1c8 !important; box-shadow:inset 0 0 0 2px rgba(245,190,82,.06),0 0 14px rgba(204,145,45,.08) !important;
}

/* Shared form controls */
body.global-ui-modern-v101382 input,
body.global-ui-modern-v101382 select,
body.global-ui-modern-v101382 textarea {
  min-height:36px;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:4px !important;
  background:#07151a !important;
  color:#e8e4dc !important;
  box-shadow:inset 0 0 14px rgba(0,0,0,.12) !important;
}
body.global-ui-modern-v101382 input:focus,
body.global-ui-modern-v101382 select:focus,
body.global-ui-modern-v101382 textarea:focus {
  outline:none !important; border-color:rgba(218,161,66,.7) !important; box-shadow:0 0 0 2px rgba(218,161,66,.08) !important;
}

/* Generic progress and status language */
body.global-ui-modern-v101382 .progress-track,
body.global-ui-modern-v101382 .mini-progress,
body.global-ui-modern-v101382 .journey-journal-progress {
  height:6px !important; border:1px solid rgba(255,255,255,.025) !important; border-radius:99px !important; background:#050d10 !important;
}
body.global-ui-modern-v101382 .progress-fill,
body.global-ui-modern-v101382 .mini-progress > span,
body.global-ui-modern-v101382 .journey-journal-progress > span {
  background:linear-gradient(90deg,#b77e2b,#e2b04d) !important;
  border-radius:99px !important;
}

/* Modal family */
body.global-ui-modern-v101382 .offline-modal-card,
body.global-ui-modern-v101382 .bank-item-panel-v2,
body.global-ui-modern-v101382 .expedition-start-card,
body.global-ui-modern-v101382 .skill-detail-modal-card {
  border:1px solid rgba(201,149,61,.52) !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,#0e2026,#08161b) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.56),inset 0 0 34px rgba(0,0,0,.12) !important;
}

/* Phone shell keeps the same system instead of reverting to the legacy cards. */
@media (max-width:820px) {
  body.global-ui-modern-v101382 { --sidebar-width:0px; }
  body.global-ui-modern-v101382 .app-shell { display:block !important; border:0 !important; }
  body.global-ui-modern-v101382 main { padding:10px 10px 86px !important; }
  body.global-ui-modern-v101382 .topbar { min-height:54px !important; padding:8px 10px !important; }
  body.global-ui-modern-v101382 .current-journey-tracker { margin:7px 8px 0 !important; padding:8px 9px !important; }
  body.global-ui-modern-v101382 .mobile-top-navigation {
    border-color:var(--jd-border-soft) !important;
    background:rgba(7,18,22,.985) !important;
    box-shadow:0 -14px 34px rgba(0,0,0,.32) !important;
  }
  body.global-ui-modern-v101382 .mobile-nav-item,
  body.global-ui-modern-v101382 .mobile-more-button {
    border:0 !important; background:transparent !important; color:#8e958e !important; box-shadow:none !important;
  }
  body.global-ui-modern-v101382 .mobile-nav-item.active {
    color:#f0d79f !important; background:linear-gradient(180deg,rgba(199,147,57,.06),transparent) !important;
  }
  body.global-ui-modern-v101382 .mobile-nav-more {
    border-color:var(--jd-border) !important;
    background:linear-gradient(180deg,#0e2026,#07151a) !important;
  }
  body.global-ui-modern-v101382 .page > .section-heading,
  body.global-ui-modern-v101382 .page > .page-title-row { padding:8px 0 10px !important; }
  body.global-ui-modern-v101382 .reference-page-heading-icon { width:46px !important; height:46px !important; flex-basis:46px !important; }
  body.global-ui-modern-v101382 .page .section-heading h2,
  body.global-ui-modern-v101382 .page .page-title-row h2 { font-size:27px !important; }
}

/* ==========================================================================
   Legacy baseline layer: den-skills-modern.css
   ========================================================================== */
/* JourneyDen V1.01.383 — Den + Skills Modernization */

/* DEN — preserve the exact room artwork/hotspots, modernize its framing and supporting UI. */
body.den-skills-modern-v101383 #denPage .den-concept-shell {
  gap:12px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-header {
  min-height:82px !important;
  margin:0 !important;
  padding:10px 0 12px !important;
  border:0 !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-heading h2 {
  margin:2px 0 4px !important;
  font-size:clamp(30px,2.15vw,42px) !important;
  line-height:1 !important;
  letter-spacing:.025em !important;
  color:var(--jd-text) !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-heading p {
  max-width:760px !important;
  color:var(--jd-muted) !important;
  font-size:12px !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-stats {
  gap:6px !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-stats article {
  min-width:116px !important;
  min-height:56px !important;
  padding:8px 10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,31,36,.96),rgba(8,19,23,.96)) !important;
  box-shadow:none !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-stats small { color:#818984 !important; font-size:8px !important; letter-spacing:.08em !important; }
body.den-skills-modern-v101383 #denPage .den-concept-stats strong { color:#ebd8aa !important; font-size:15px !important; }
body.den-skills-modern-v101383 #denPage .den-concept-scene-viewport {
  border:1px solid rgba(171,125,48,.48) !important;
  border-radius:7px !important;
  background:#071419 !important;
  box-shadow:inset 0 0 42px rgba(0,0,0,.23),0 12px 36px rgba(0,0,0,.12) !important;
  overflow:hidden !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-scene-viewport::after {
  content:"" !important;
  pointer-events:none !important;
  position:absolute !important;
  inset:0 !important;
  border:1px solid rgba(245,190,82,.045) !important;
  border-radius:6px !important;
  box-shadow:inset 0 0 52px rgba(0,0,0,.2) !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-bottom {
  gap:10px !important;
  margin-top:0 !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-panel,
body.den-skills-modern-v101383 #denPage .den-overview-card,
body.den-skills-modern-v101383 #denPage .den-room-card,
body.den-skills-modern-v101383 #denPage .den-room-detail-panel,
body.den-skills-modern-v101383 #denPage .den-route-project {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.den-skills-modern-v101383 #denPage .den-concept-panel { padding:13px !important; }
body.den-skills-modern-v101383 #denPage .den-concept-kicker,
body.den-skills-modern-v101383 #denPage .den-reference-heading .eyebrow { color:var(--jd-gold) !important; }
body.den-skills-modern-v101383 #denPage .den-concept-progress,
body.den-skills-modern-v101383 #denPage .den-concept-task-progress,
body.den-skills-modern-v101383 #denPage .den-storage-bar,
body.den-skills-modern-v101383 #denPage .den-project-progress { height:6px !important; border-radius:99px !important; background:#050d10 !important; }
body.den-skills-modern-v101383 #denPage .den-room-card {
  padding:12px !important;
  transition:border-color .12s ease,background .12s ease !important;
}
body.den-skills-modern-v101383 #denPage .den-room-card:hover {
  border-color:rgba(218,161,66,.56) !important;
  background:linear-gradient(180deg,rgba(18,35,40,.98),rgba(9,21,25,.98)) !important;
  transform:none !important;
}
body.den-skills-modern-v101383 #denPage .den-room-icon {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:50% !important;
  background:rgba(199,147,57,.06) !important;
}
body.den-skills-modern-v101383 #denPage .den-room-status,
body.den-skills-modern-v101383 #denPage .den-upgrade-stage {
  border-radius:999px !important;
  border:1px solid rgba(115,181,238,.3) !important;
  background:rgba(38,87,123,.2) !important;
  color:#94c6eb !important;
}

/* SKILLS / ACTIVITIES — stronger master-detail hierarchy and calmer cards. */
body.den-skills-modern-v101383 #activitiesPage > .activity-master-heading {
  margin:0 0 12px !important;
  padding:10px 0 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-master-breadcrumb {
  margin-bottom:7px !important;
  color:#777f7a !important;
  font-size:10px !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-master-breadcrumb strong { color:#bda66f !important; }
body.den-skills-modern-v101383 #activitiesPage .activity-master-title-row { gap:14px !important; }
body.den-skills-modern-v101383 #activitiesPage .activity-master-skill-icon {
  width:54px !important; height:54px !important; flex:0 0 54px !important;
  border:1px solid var(--jd-border) !important; border-radius:50% !important;
  background:radial-gradient(circle at 42% 36%,rgba(210,161,72,.15),rgba(8,16,20,.92) 68%) !important;
  box-shadow:inset 0 0 0 4px rgba(214,163,72,.035) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-master-copy h2 {
  margin:2px 0 !important; font-size:clamp(28px,2vw,39px) !important; line-height:1 !important; letter-spacing:.025em !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-master-copy p { margin:4px 0 0 !important; color:var(--jd-muted) !important; }
body.den-skills-modern-v101383 #activitiesPage .activity-layout {
  grid-template-columns:minmax(190px,.52fr) minmax(0,2.8fr) !important;
  gap:14px !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-sidebar-panel {
  position:sticky !important; top:12px !important;
  overflow:hidden !important;
  border:1px solid var(--jd-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-sidebar-panel .panel-heading {
  padding:11px 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:transparent !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-sidebar-panel .panel-heading strong { color:#e5ded0 !important; font-size:13px !important; }
body.den-skills-modern-v101383 #activitiesPage .skill-tabs {
  gap:3px !important; padding:6px !important; background:transparent !important;
}
body.den-skills-modern-v101383 #activitiesPage .skill-tabs button {
  position:relative !important;
  min-height:40px !important;
  padding:8px 10px !important;
  border:1px solid transparent !important;
  border-radius:4px !important;
  background:rgba(7,17,21,.36) !important;
  color:#a8aaa1 !important;
  box-shadow:none !important;
}
body.den-skills-modern-v101383 #activitiesPage .skill-tabs button:hover { border-color:var(--jd-border-soft) !important; color:#ddceb0 !important; }
body.den-skills-modern-v101383 #activitiesPage .skill-tabs button.active {
  border-color:rgba(218,161,66,.58) !important;
  background:linear-gradient(90deg,rgba(82,59,26,.7),rgba(18,27,27,.74)) !important;
  color:#fff0c6 !important;
  box-shadow:none !important;
}
body.den-skills-modern-v101383 #activitiesPage .skill-tabs button.active::before {
  content:""; position:absolute; left:-1px; top:22%; bottom:22%; width:3px; background:var(--jd-gold-bright); box-shadow:0 0 7px rgba(228,182,83,.55);
}
body.den-skills-modern-v101383 #activitiesPage .activity-global-active-bar {
  min-height:58px !important;
  margin:0 0 10px !important;
  padding:9px 11px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(90deg,rgba(15,31,36,.96),rgba(8,20,24,.96)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-global-active-icon {
  border:1px solid var(--jd-border-soft) !important; border-radius:50% !important; background:rgba(199,147,57,.055) !important;
}
body.den-skills-modern-v101383 #activitiesPage .fresh-activity-overview,
body.den-skills-modern-v101383 #activitiesPage .current-activity-card,
body.den-skills-modern-v101383 #activitiesPage .activity-browse-controls {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.den-skills-modern-v101383 #activitiesPage .fresh-activity-overview { padding:12px !important; margin-bottom:10px !important; }
body.den-skills-modern-v101383 #activitiesPage .current-activity-card { margin-bottom:10px !important; overflow:hidden !important; }
body.den-skills-modern-v101383 #activitiesPage .activity-header {
  padding:12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:linear-gradient(90deg,rgba(199,147,57,.035),transparent) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-current-icon {
  border:1px solid var(--jd-border-soft) !important; border-radius:6px !important; background:#08171c !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-browse-controls { padding:10px !important; margin-bottom:10px !important; }
body.den-skills-modern-v101383 #activitiesPage .activity-filter-chips button,
body.den-skills-modern-v101383 #activitiesPage .activity-availability-chips button,
body.den-skills-modern-v101383 #activitiesPage .activity-category-chips button {
  min-height:30px !important; padding:5px 10px !important; border-radius:999px !important;
  border-color:var(--jd-border-soft) !important; background:#0a191e !important; color:#a9a99f !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-filter-chips button.active,
body.den-skills-modern-v101383 #activitiesPage .activity-availability-chips button.active,
body.den-skills-modern-v101383 #activitiesPage .activity-category-chips button.active {
  border-color:rgba(218,161,66,.65) !important; background:rgba(89,64,27,.58) !important; color:#f3dfb0 !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-card-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card {
  min-height:145px !important;
  padding:12px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card:hover { border-color:rgba(218,161,66,.5) !important; }
body.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card.active-card {
  border-color:rgba(229,175,76,.88) !important;
  box-shadow:inset 0 0 0 1px rgba(248,194,90,.1),0 0 14px rgba(214,156,58,.1) !important;
}
body.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card h3 { color:#ece6db !important; }
body.den-skills-modern-v101383 #activitiesPage .requirements { color:#8d948e !important; }

/* Skill Progress modal/card language */
body.den-skills-modern-v101383 #skillsPage .card-grid { gap:8px !important; }
body.den-skills-modern-v101383 #skillsPage .card-grid .card { min-height:132px !important; }
body.den-skills-modern-v101383 .skill-detail-modal-card { overflow:hidden !important; }
body.den-skills-modern-v101383 .skill-detail-header { padding:14px !important; border-bottom:1px solid var(--jd-border-soft) !important; }
body.den-skills-modern-v101383 .skill-detail-tabs { display:flex !important; gap:5px !important; padding:8px 12px !important; border-bottom:1px solid var(--jd-border-soft) !important; background:#08171c !important; }
body.den-skills-modern-v101383 .skill-detail-tabs button { border-color:var(--jd-border-soft) !important; background:#0c1a1f !important; color:#a8a89f !important; }
body.den-skills-modern-v101383 .skill-detail-tabs button.active { border-color:rgba(218,161,66,.7) !important; background:rgba(82,59,26,.65) !important; color:#f5dfac !important; }

@media (max-width:980px) {
  body.den-skills-modern-v101383 #activitiesPage .activity-layout { grid-template-columns:170px minmax(0,1fr) !important; gap:10px !important; }
}
@media (max-width:820px) {
  body.den-skills-modern-v101383 #denPage .den-concept-header { display:block !important; }
  body.den-skills-modern-v101383 #denPage .den-concept-stats { margin-top:9px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body.den-skills-modern-v101383 #denPage .den-concept-stats article { min-width:0 !important; }
  body.den-skills-modern-v101383 #activitiesPage .activity-layout { display:block !important; }
  body.den-skills-modern-v101383 #activitiesPage .activity-sidebar-panel { position:static !important; margin-bottom:8px !important; border:0 !important; background:transparent !important; box-shadow:none !important; }
  body.den-skills-modern-v101383 #activitiesPage .activity-sidebar-panel .panel-heading,
  body.den-skills-modern-v101383 #activitiesPage .skill-tabs { display:none !important; }
  body.den-skills-modern-v101383 #activitiesPage .mobile-activity-skill-select { border:1px solid var(--jd-border) !important; border-radius:5px !important; background:#0b1b20 !important; }
  body.den-skills-modern-v101383 #activitiesPage .activity-card-grid { grid-template-columns:1fr !important; }
}

/* ==========================================================================
   Legacy baseline layer: world-expeditions-modern.css
   ========================================================================== */
/* JourneyDen V1.01.384 — World + Expeditions Modernization */

/* WORLD MAP — same hierarchy as World Projects, with the map remaining the hero. */
body.world-expeditions-modern-v101384 #worldMapPage > .section-owner-tabs {
  width:max-content !important;
  margin:0 0 12px !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-shell { gap:12px !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-chapter-nav {
  display:flex !important;
  gap:5px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-chapter-nav button {
  min-height:36px !important;
  border:1px solid var(--jd-border) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#132126,#0c171b) !important;
  color:#c9b98f !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-chapter-nav button.active {
  border-color:rgba(218,161,66,.78) !important;
  background:linear-gradient(180deg,rgba(96,70,29,.95),rgba(54,39,20,.96)) !important;
  color:#fff1c8 !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading {
  margin:0 !important;
  padding:10px 0 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  align-items:center !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading h2 {
  margin:2px 0 3px !important;
  font-size:clamp(30px,2.2vw,42px) !important;
  line-height:1 !important;
  letter-spacing:.025em !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading p {
  max-width:780px !important;
  color:var(--jd-muted) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading-stats { gap:6px !important; min-width:300px !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading-stats > div {
  min-height:56px !important;
  padding:8px 10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,31,36,.96),rgba(8,19,23,.96)) !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading-stats small { color:#818984 !important; font-size:8px !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading-stats strong { color:#e9d7ac !important; font-size:12px !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-layout {
  grid-template-columns:minmax(0,2.5fr) minmax(285px,.82fr) !important;
  gap:14px !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-canvas {
  min-height:610px !important;
  border:1px solid rgba(171,125,48,.48) !important;
  border-radius:7px !important;
  background:#071419 !important;
  box-shadow:inset 0 0 52px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.1) !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-details {
  position:sticky !important;
  top:12px !important;
  align-self:start !important;
  overflow:hidden !important;
  padding:0 13px 13px !important;
  border:1px solid var(--jd-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-detail-art {
  margin:0 -13px 12px !important;
  min-height:150px !important;
  border:0 !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  border-radius:0 !important;
  box-shadow:inset 0 -38px 50px rgba(6,17,21,.45) !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-detail-heading { gap:10px !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-detail-icon {
  width:42px !important; height:42px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:50% !important;
  background:rgba(199,147,57,.055) !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-details h3 { color:#ece6dc !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-details p { color:#9ca19b !important; }
body.world-expeditions-modern-v101384 #worldMapPage .world-map-detail-status > *,
body.world-expeditions-modern-v101384 #worldMapPage .world-map-detail-project > * {
  border-color:var(--jd-border-soft) !important;
  border-radius:4px !important;
  background:#09181d !important;
}
body.world-expeditions-modern-v101384 #worldMapPage .world-map-legend {
  margin:0 !important;
  padding:9px 11px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:4px !important;
  background:#08171c !important;
  color:#888f89 !important;
}

/* WORLD PROJECTS — unify the few remaining tokens with the new global system. */
body.world-expeditions-modern-v101384 #worldProjectsPage .world-projects-redesign-layout { gap:14px !important; }
body.world-expeditions-modern-v101384 #worldProjectsPage .world-project-route-panel,
body.world-expeditions-modern-v101384 #worldProjectsPage .world-project-detail {
  border-color:var(--jd-border) !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
}
body.world-expeditions-modern-v101384 #worldProjectsPage .world-project-stage-panel,
body.world-expeditions-modern-v101384 #worldProjectsPage .world-project-progress-panel,
body.world-expeditions-modern-v101384 #worldProjectsPage .world-project-reward-panel,
body.world-expeditions-modern-v101384 #worldProjectsPage .world-project-requirements-panel {
  border-color:var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:rgba(7,18,22,.58) !important;
}

/* EXPEDITIONS — keep the approved art/interaction model, modernize the information architecture. */
body.world-expeditions-modern-v101384 #expeditionsPage > .expedition-log-page-heading {
  margin:0 0 12px !important;
  padding:10px 0 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .combat-level-badge {
  min-width:130px !important;
  padding:8px 11px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,31,36,.98),rgba(8,19,23,.98)) !important;
  box-shadow:none !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .combat-level-badge strong { color:#e7bf62 !important; }
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-layout {
  grid-template-columns:minmax(270px,.82fr) minmax(0,2.25fr) !important;
  gap:14px !important;
  align-items:start !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-list-panel,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-detail-panel {
  border:1px solid var(--jd-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-list-panel {
  position:sticky !important;
  top:12px !important;
  padding:12px !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid { gap:7px !important; }
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid > button,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid > article,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-region-card {
  position:relative !important;
  min-height:92px !important;
  overflow:hidden !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:6px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.95),rgba(8,20,25,.95)) !important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.12) !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid > button.active,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid > article.active,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-region-card.active {
  border-color:rgba(229,175,76,.86) !important;
  box-shadow:inset 0 0 0 1px rgba(248,194,90,.1),0 0 14px rgba(214,156,58,.11) !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-detail-panel { overflow:hidden !important; }
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-detail-panel > * { border-color:var(--jd-border-soft) !important; }
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-detail-hero,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-region-hero {
  border-radius:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  box-shadow:inset 0 -48px 70px rgba(5,15,19,.42) !important;
}
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-stage-card,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-reward-card,
body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-card {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:#09191e !important;
  box-shadow:none !important;
}

@media (max-width:1000px) {
  body.world-expeditions-modern-v101384 #worldMapPage .world-map-layout { grid-template-columns:minmax(0,1.8fr) minmax(260px,.8fr) !important; gap:10px !important; }
  body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-layout { grid-template-columns:240px minmax(0,1fr) !important; gap:10px !important; }
}
@media (max-width:820px) {
  body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading { display:block !important; }
  body.world-expeditions-modern-v101384 #worldMapPage .world-map-heading-stats { margin-top:8px !important; min-width:0 !important; grid-template-columns:1fr 1.2fr !important; }
  body.world-expeditions-modern-v101384 #worldMapPage .world-map-layout { display:block !important; }
  body.world-expeditions-modern-v101384 #worldMapPage .world-map-canvas { min-height:470px !important; margin-bottom:9px !important; }
  body.world-expeditions-modern-v101384 #worldMapPage .world-map-details { position:static !important; }
  body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-layout { display:block !important; }
  body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-list-panel { position:static !important; margin-bottom:9px !important; }
  body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:480px) {
  body.world-expeditions-modern-v101384 #expeditionsPage .expedition-log-region-grid { grid-template-columns:1fr !important; }
}

/* V1.01.402 — overview drop targets with live Storage ownership. */
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-possible-drops {
  margin:10px 0 0;
  padding:11px 12px 12px;
  border:1px solid var(--jd-border-soft);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(9,24,29,.92),rgba(6,17,21,.92));
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-head > div {
  display:grid;
  gap:2px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-head small {
  color:#77837f;
  font-size:10px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-head > b {
  color:#b8b4a8;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-card {
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:7px 8px;
  border:1px solid rgba(113,96,61,.48);
  border-radius:4px;
  background:rgba(5,15,18,.74);
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-card.owned {
  border-color:rgba(110,143,53,.7);
  background:linear-gradient(180deg,rgba(16,35,24,.58),rgba(6,18,18,.78));
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-card.unique {
  box-shadow:inset 2px 0 0 rgba(212,151,47,.68);
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(115,98,64,.42);
  border-radius:4px;
  background:#071317;
  overflow:hidden;
  font-size:22px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-icon img,
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-icon-art {
  max-width:30px;
  max-height:30px;
  object-fit:contain;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-copy {
  min-width:0;
  display:grid;
  gap:2px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-copy strong {
  overflow:hidden;
  color:#e1ddd2;
  font-size:11px;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-copy small {
  color:#777f7b;
  font-size:9px;
  white-space:nowrap;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-owned {
  min-width:42px;
  display:grid;
  justify-items:end;
  gap:1px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-owned b {
  color:#9fcf4d;
  font-size:15px;
  line-height:1;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-owned i {
  width:5px;
  height:5px;
  margin:3px 3px 1px 0;
  border-radius:50%;
  background:#505a57;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-owned small {
  color:#747d79;
  font-size:8px;
  white-space:nowrap;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-card.owned .exp402-drop-owned small {
  color:#91a67f;
}
@media (max-width:1250px) {
  body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
  body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-head { align-items:start; }
  body.world-expeditions-modern-v101384 #expeditionsPage .exp402-drop-grid { grid-template-columns:1fr; }
}

/* V1.01.405 — Possible Drops stays compact until the player asks to inspect it. */
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-possible-drops {
  margin:10px 0 0;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border:1px solid var(--jd-border-soft);
  border-radius:5px;
  background:linear-gradient(180deg,rgba(9,24,29,.96),rgba(6,17,21,.96));
  color:#e1ddd2;
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle:hover {
  border-color:rgba(206,151,52,.62);
  background:linear-gradient(180deg,rgba(13,31,35,.98),rgba(7,20,24,.98));
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle:focus-visible {
  outline:2px solid rgba(212,151,47,.72);
  outline-offset:2px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle-copy {
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:10px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle-copy small {
  color:#9a9b91;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle-icon {
  flex:0 0 auto;
  color:#d49a35;
  font-size:19px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .16s ease;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-possible-drops.expanded .exp405-drop-toggle-icon {
  transform:rotate(180deg);
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-panel.exp402-possible-drops {
  margin-top:6px;
}
body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-panel .exp402-drop-head {
  align-items:center;
  min-height:14px;
}
@media (max-width:520px) {
  body.world-expeditions-modern-v101384 #expeditionsPage .exp405-drop-toggle-copy {
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
}

/* ==========================================================================
   Legacy baseline layer: combat-modern.css
   ========================================================================== */
/* JourneyDen V1.01.385 — Combat Modernization
   Keeps the V1.01.379/380 combat rebuild and brings it under the shared UI system. */

body.combat-modern-v101385 #combatPage > .reference-combat-heading {
  margin:0 0 12px !important;
  padding:10px 0 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.combat-modern-v101385 #combatPage .combat-command-deck {
  gap:10px !important;
  margin-bottom:10px !important;
}
body.combat-modern-v101385 #combatPage .combat-skills-inline-panel,
body.combat-modern-v101385 #combatPage .combat-style-panel,
body.combat-modern-v101385 #combatPage .combat-roster-panel,
body.combat-modern-v101385 #combatPage .combat-battle-panel,
body.combat-modern-v101385 #combatPage .combat-food-panel-v2,
body.combat-modern-v101385 #combatPage .combat-session-panel {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.combat-modern-v101385 #combatPage .combat-skills-inline-panel,
body.combat-modern-v101385 #combatPage .combat-style-panel { padding:12px !important; }
body.combat-modern-v101385 #combatPage .combat-skills-inline-heading,
body.combat-modern-v101385 #combatPage .combat-style-heading,
body.combat-modern-v101385 #combatPage .combat-panel-heading {
  margin:0 0 10px !important;
  padding:0 0 9px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.combat-modern-v101385 #combatPage .combat-level-badge,
body.combat-modern-v101385 #combatPage .combat-overall-badge {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:#09191e !important;
  box-shadow:none !important;
}
body.combat-modern-v101385 #combatPage .combat-level-badge strong,
body.combat-modern-v101385 #combatPage .combat-overall-badge strong { color:#e7bf62 !important; }
body.combat-modern-v101385 #combatPage .skill-overview-grid,
body.combat-modern-v101385 #combatPage .combat-skill-overview-grid { gap:6px !important; }
body.combat-modern-v101385 #combatPage .skill-overview-grid > *,
body.combat-modern-v101385 #combatPage .combat-skill-overview-grid > * {
  min-height:56px !important;
  padding:8px 9px !important;
  border:1px solid rgba(144,105,44,.23) !important;
  border-radius:5px !important;
  background:rgba(5,13,16,.7) !important;
  box-shadow:none !important;
}
body.combat-modern-v101385 #combatPage .combat-style-grid { gap:6px !important; }
body.combat-modern-v101385 #combatPage .combat-style-grid button {
  min-height:58px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,#132126,#0c171b) !important;
  color:#c4bda9 !important;
  box-shadow:none !important;
}
body.combat-modern-v101385 #combatPage .combat-style-grid button.active {
  border-color:rgba(229,175,76,.82) !important;
  background:linear-gradient(180deg,rgba(89,64,27,.86),rgba(46,34,20,.9)) !important;
  color:#fff0c6 !important;
  box-shadow:inset 0 0 0 1px rgba(248,194,90,.08),0 0 12px rgba(214,156,58,.09) !important;
}
body.combat-modern-v101385 #combatPage .combat-style-help { color:#7f8985 !important; }

/* Main combat workspace: roster / battle / support rail. */
body.combat-modern-v101385 #combatPage .combat-layout-v2 {
  grid-template-columns:minmax(245px,.67fr) minmax(0,1.65fr) minmax(270px,.72fr) !important;
  gap:10px !important;
  align-items:start !important;
}
body.combat-modern-v101385 #combatPage .combat-roster-panel,
body.combat-modern-v101385 #combatPage .combat-side-panel {
  position:sticky !important;
  top:12px !important;
  align-self:start !important;
}
body.combat-modern-v101385 #combatPage .combat-roster-panel { padding:11px !important; }
body.combat-modern-v101385 #combatPage .combat-enemy-grid { gap:6px !important; }
body.combat-modern-v101385 #combatPage .combat-enemy-grid > button,
body.combat-modern-v101385 #combatPage .combat-enemy-grid .combat-enemy-card {
  position:relative !important;
  min-height:68px !important;
  padding:8px 9px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(13,28,33,.96),rgba(7,18,22,.96)) !important;
  color:#c7c3b8 !important;
  box-shadow:none !important;
}
body.combat-modern-v101385 #combatPage .combat-enemy-grid > button:hover,
body.combat-modern-v101385 #combatPage .combat-enemy-grid .combat-enemy-card:hover {
  border-color:rgba(218,161,66,.48) !important;
  background:linear-gradient(180deg,rgba(18,35,40,.98),rgba(9,21,25,.98)) !important;
}
body.combat-modern-v101385 #combatPage .combat-enemy-grid > button.active,
body.combat-modern-v101385 #combatPage .combat-enemy-grid .combat-enemy-card.active,
body.combat-modern-v101385 #combatPage .combat-enemy-grid .selected {
  border-color:rgba(229,175,76,.86) !important;
  box-shadow:inset 0 0 0 1px rgba(248,194,90,.09),0 0 12px rgba(214,156,58,.1) !important;
}
body.combat-modern-v101385 #combatPage .combat-battle-panel { min-height:475px !important; overflow:hidden !important; }
body.combat-modern-v101385 #combatPage .combat-battle-panel-heading {
  padding:11px 13px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:linear-gradient(90deg,rgba(199,147,57,.035),transparent) !important;
}
body.combat-modern-v101385 #combatPage .combat-battle-view { padding:12px !important; }
body.combat-modern-v101385 #combatPage .combat-empty {
  min-height:385px !important;
  border:1px dashed rgba(144,105,44,.25) !important;
  border-radius:6px !important;
  background:radial-gradient(circle at 50% 42%,rgba(199,147,57,.055),transparent 28%) !important;
  color:#7f8782 !important;
}
body.combat-modern-v101385 #combatPage .combat-side-panel { display:grid !important; gap:8px !important; }
body.combat-modern-v101385 #combatPage .combat-food-panel-v2,
body.combat-modern-v101385 #combatPage .combat-session-panel { padding:11px !important; }
body.combat-modern-v101385 #combatPage .combat-selected-food-box,
body.combat-modern-v101385 #combatPage .combat-food-choice,
body.combat-modern-v101385 #combatPage .combat-food-item {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:#08171c !important;
  box-shadow:none !important;
}
body.combat-modern-v101385 #combatPage .combat-session-heading-meta { color:#808985 !important; }
body.combat-modern-v101385 #combatPage .combat-session-xp,
body.combat-modern-v101385 #combatPage .combat-session-loot {
  border-top:1px solid var(--jd-border-soft) !important;
}
body.combat-modern-v101385 #combatPage .combat-session-loot > * {
  border-color:rgba(144,105,44,.2) !important;
  background:#071419 !important;
  border-radius:4px !important;
}

/* Combat in motion: hero panel treatment without changing rendered timings. */
body.combat-modern-v101385 #combatPage .combat-battle-live,
body.combat-modern-v101385 #combatPage .combat-encounter-live {
  border:1px solid rgba(171,125,48,.36) !important;
  border-radius:6px !important;
  background:
    radial-gradient(circle at 50% 20%,rgba(199,147,57,.075),transparent 36%),
    linear-gradient(180deg,rgba(11,26,31,.98),rgba(6,16,20,.98)) !important;
  box-shadow:inset 0 0 34px rgba(0,0,0,.16) !important;
}
body.combat-modern-v101385 #combatPage .combat-health-bar,
body.combat-modern-v101385 #combatPage .combat-progress-track,
body.combat-modern-v101385 #combatPage .combat-attack-progress {
  border-radius:99px !important;
  background:#050d10 !important;
  border:1px solid rgba(255,255,255,.025) !important;
  overflow:hidden !important;
}

@media (max-width:1180px) {
  body.combat-modern-v101385 #combatPage .combat-layout-v2 {
    grid-template-columns:minmax(210px,.62fr) minmax(0,1.55fr) minmax(240px,.72fr) !important;
    gap:8px !important;
  }
}
@media (max-width:920px) and (min-width:821px) {
  body.combat-modern-v101385 #combatPage .combat-layout-v2 {
    grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr) !important;
  }
  body.combat-modern-v101385 #combatPage .combat-side-panel { grid-column:1 / -1 !important; position:static !important; grid-template-columns:1fr 1fr !important; }
}
@media (max-width:820px) {
  body.combat-modern-v101385 #combatPage .combat-command-deck { display:block !important; }
  body.combat-modern-v101385 #combatPage .combat-skills-inline-panel { margin-bottom:8px !important; }
  body.combat-modern-v101385 #combatPage .combat-layout-v2 { display:block !important; }
  body.combat-modern-v101385 #combatPage .combat-roster-panel,
  body.combat-modern-v101385 #combatPage .combat-side-panel { position:static !important; margin-bottom:8px !important; }
  body.combat-modern-v101385 #combatPage .combat-enemy-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.combat-modern-v101385 #combatPage .combat-battle-panel { min-height:390px !important; margin-bottom:8px !important; }
  body.combat-modern-v101385 #combatPage .combat-empty { min-height:300px !important; }
}
@media (max-width:480px) {
  body.combat-modern-v101385 #combatPage .combat-enemy-grid { grid-template-columns:1fr !important; }
}

/* ==========================================================================
   Legacy baseline layer: storage-shop-modern.css
   ========================================================================== */
/* JourneyDen V1.01.386 — Storage + Shop Modernization */

/* STORAGE — turn legacy bank chrome into a clean browsing workspace. */
body.storage-shop-modern-v101386 #bankPage > .bank-heading {
  margin:0 0 12px !important;
  padding:10px 0 12px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  align-items:center !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-stack-note {
  max-width:300px !important;
  color:#7e8681 !important;
  font-size:10px !important;
  text-align:right !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-shell-rs {
  display:grid !important;
  gap:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-topbar-rs,
body.storage-shop-modern-v101386 #bankPage .bank-topbar-v2 {
  margin:0 !important;
  padding:10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-main-nav { gap:8px !important; }
body.storage-shop-modern-v101386 #bankPage .bank-category-tabs {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-category-tabs button {
  min-height:34px !important;
  padding:6px 11px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:3px !important;
  background:linear-gradient(180deg,#132126,#0c171b) !important;
  color:#a9a596 !important;
  box-shadow:none !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-category-tabs button.active {
  border-color:rgba(218,161,66,.78) !important;
  background:linear-gradient(180deg,rgba(96,70,29,.95),rgba(54,39,20,.96)) !important;
  color:#fff1c8 !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-category-swipe-hint { color:#666f6b !important; font-size:9px !important; }
body.storage-shop-modern-v101386 #bankPage .bank-filter-toggle,
body.storage-shop-modern-v101386 #bankPage .bank-reset-filters { min-height:34px !important; }
body.storage-shop-modern-v101386 #bankPage .bank-advanced-filters {
  margin-top:8px !important;
  padding-top:8px !important;
  border-top:1px solid var(--jd-border-soft) !important;
  gap:7px !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-filter-search,
body.storage-shop-modern-v101386 #bankPage .bank-category-filter,
body.storage-shop-modern-v101386 #bankPage .bank-sort-select { min-width:0 !important; }
body.storage-shop-modern-v101386 #bankPage .bank-content-rs {
  display:grid !important;
  grid-template-columns:minmax(0,2.5fr) minmax(270px,.76fr) !important;
  gap:10px !important;
  align-items:start !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-grid-panel-rs,
body.storage-shop-modern-v101386 #bankPage .bank-selected-panel-rs {
  border:1px solid var(--jd-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-grid-panel-rs { padding:11px !important; }
body.storage-shop-modern-v101386 #bankPage .bank-selected-panel-rs {
  position:sticky !important;
  top:12px !important;
  min-height:340px !important;
  padding:11px !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-discovery-rs {
  margin:0 0 10px !important;
  padding:9px 10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:#08171c !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-discovery-bar {
  height:5px !important;
  border:0 !important;
  border-radius:99px !important;
  background:#050d10 !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-rarity-summary { gap:4px !important; color:#838b86 !important; }
body.storage-shop-modern-v101386 #bankPage .bank-rarity-summary > * {
  border:1px solid rgba(144,105,44,.18) !important;
  border-radius:999px !important;
  background:#071419 !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-slot-grid-rs {
  gap:7px !important;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr)) !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-slot-rs,
body.storage-shop-modern-v101386 #bankPage .bank-item-slot,
body.storage-shop-modern-v101386 #bankPage .bank-slot {
  position:relative !important;
  min-height:116px !important;
  padding:9px !important;
  overflow:hidden !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(13,28,33,.96),rgba(7,18,22,.96)) !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.12) !important;
  transform:none !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-slot-rs:hover,
body.storage-shop-modern-v101386 #bankPage .bank-item-slot:hover,
body.storage-shop-modern-v101386 #bankPage .bank-slot:hover {
  border-color:rgba(218,161,66,.52) !important;
  background:linear-gradient(180deg,rgba(18,35,40,.98),rgba(9,21,25,.98)) !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-slot-rs.selected,
body.storage-shop-modern-v101386 #bankPage .bank-item-slot.selected,
body.storage-shop-modern-v101386 #bankPage .bank-slot.selected {
  border-color:rgba(229,175,76,.88) !important;
  box-shadow:inset 0 0 0 1px rgba(248,194,90,.09),0 0 12px rgba(214,156,58,.1) !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-selected-empty-rs {
  min-height:300px !important;
  border:1px dashed rgba(144,105,44,.24) !important;
  border-radius:5px !important;
  background:radial-gradient(circle at 50% 35%,rgba(199,147,57,.045),transparent 32%) !important;
  color:#757e79 !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-selected-empty-icon {
  width:52px !important; height:52px !important;
  border:1px solid var(--jd-border-soft) !important; border-radius:50% !important; background:rgba(199,147,57,.05) !important;
}

/* Selected item and item modal use a modern hero + actions layout. */
body.storage-shop-modern-v101386 #bankPage .bank-selected-card,
body.storage-shop-modern-v101386 .bank-item-panel-v2 .bank-item-card-v2 {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-selected-hero,
body.storage-shop-modern-v101386 .bank-item-panel-v2 .bank-item-hero-v2 {
  padding:11px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:radial-gradient(circle at 24% 20%,rgba(199,147,57,.06),transparent 38%),#08171c !important;
}
body.storage-shop-modern-v101386 #bankPage .bank-selected-actions,
body.storage-shop-modern-v101386 .bank-item-panel-v2 .bank-item-actions-v2 { gap:6px !important; }

/* SHOP — readable permanent-upgrade catalogue instead of generic legacy cards. */
body.storage-shop-modern-v101386 #shopPage #shopCards {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
}
body.storage-shop-modern-v101386 #shopPage #shopCards .card,
body.storage-shop-modern-v101386 #shopPage .shop-card {
  min-height:190px !important;
  padding:14px !important;
  overflow:hidden !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:
    radial-gradient(circle at 90% 5%,rgba(199,147,57,.055),transparent 34%),
    linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.storage-shop-modern-v101386 #shopPage #shopCards .card:hover,
body.storage-shop-modern-v101386 #shopPage .shop-card:hover { border-color:rgba(218,161,66,.5) !important; }
body.storage-shop-modern-v101386 #shopPage #shopCards .large-icon,
body.storage-shop-modern-v101386 #shopPage .shop-card .large-icon {
  display:grid !important; place-items:center !important;
  width:48px !important; height:48px !important;
  border:1px solid var(--jd-border-soft) !important; border-radius:50% !important;
  background:rgba(199,147,57,.055) !important;
}
body.storage-shop-modern-v101386 #shopPage #shopCards h3,
body.storage-shop-modern-v101386 #shopPage .shop-card h3 { color:#ece5d8 !important; font-size:16px !important; }
body.storage-shop-modern-v101386 #shopPage #shopCards p,
body.storage-shop-modern-v101386 #shopPage .shop-card p,
body.storage-shop-modern-v101386 #shopPage #shopCards .requirements { color:#8f9690 !important; }
body.storage-shop-modern-v101386 #shopPage #shopCards .shop-price,
body.storage-shop-modern-v101386 #shopPage #shopCards .cost,
body.storage-shop-modern-v101386 #shopPage .shop-card .shop-price { color:#e2bc65 !important; }
body.storage-shop-modern-v101386 #shopPage #shopCards .card > button,
body.storage-shop-modern-v101386 #shopPage .shop-card > button { margin-top:auto !important; }

@media (max-width:1100px) {
  body.storage-shop-modern-v101386 #bankPage .bank-content-rs { grid-template-columns:minmax(0,2fr) minmax(245px,.8fr) !important; }
  body.storage-shop-modern-v101386 #shopPage #shopCards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:820px) {
  body.storage-shop-modern-v101386 #bankPage > .bank-heading { align-items:flex-start !important; }
  body.storage-shop-modern-v101386 #bankPage .bank-stack-note { max-width:none !important; text-align:left !important; }
  body.storage-shop-modern-v101386 #bankPage .bank-content-rs { display:block !important; }
  body.storage-shop-modern-v101386 #bankPage .bank-selected-panel-rs { position:static !important; min-height:0 !important; margin-top:8px !important; }
  body.storage-shop-modern-v101386 #bankPage .bank-slot-grid-rs { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; }
  body.storage-shop-modern-v101386 #shopPage #shopCards { grid-template-columns:1fr !important; gap:7px !important; }
  body.storage-shop-modern-v101386 #shopPage #shopCards .card { min-height:0 !important; }
}
@media (max-width:460px) {
  body.storage-shop-modern-v101386 #bankPage .bank-slot-grid-rs { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* ==========================================================================
   Legacy baseline layer: utility-pages-modern.css
   ========================================================================== */
/* JourneyDen V1.01.387 — Leaderboards, Guide, Settings and Progress Modernization */

/* LEADERBOARDS */
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-tabs {
  margin:0 0 10px !important;
  overflow-x:auto !important;
  padding-bottom:2px !important;
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-security-notice {
  margin:0 0 10px !important;
  padding:8px 10px !important;
  border:1px solid rgba(115,181,238,.22) !important;
  border-radius:4px !important;
  background:rgba(34,73,100,.13) !important;
  color:#8daec4 !important;
  font-size:10px !important;
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-panel { overflow:hidden !important; }
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-panel-heading {
  padding:12px 13px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:linear-gradient(90deg,rgba(199,147,57,.035),transparent) !important;
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-panel-heading h3 { color:#ece5d8 !important; font-size:17px !important; }
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-header-row {
  padding:8px 13px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  background:#071419 !important;
  color:#717b76 !important;
  font-size:9px !important;
  letter-spacing:.08em !important;
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-row {
  min-height:48px !important;
  padding:8px 13px !important;
  border-top:1px solid rgba(144,105,44,.13) !important;
  background:transparent !important;
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-row:nth-child(even) { background:rgba(255,255,255,.008) !important; }
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-row.current-player {
  position:relative !important;
  background:linear-gradient(90deg,rgba(91,65,26,.35),rgba(9,22,26,.3)) !important;
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-row.current-player::before {
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:3px; background:var(--jd-gold-bright); box-shadow:0 0 7px rgba(228,182,83,.5);
}
body.utility-pages-modern-v101387 #leaderboardsPage .leaderboard-rank { color:#dbb558 !important; }

/* GUIDE — modern index + article reading pane. */
body.utility-pages-modern-v101387 #guidePage .guide-layout {
  grid-template-columns:minmax(220px,.62fr) minmax(0,2.25fr) !important;
  gap:12px !important;
  align-items:start !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-index {
  position:sticky !important;
  top:12px !important;
  padding:10px !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-index-heading {
  padding:2px 3px 9px !important;
  margin-bottom:6px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-index-heading h3 { margin:2px 0 !important; color:#e6dfd3 !important; }
body.utility-pages-modern-v101387 #guidePage .guide-index-item {
  position:relative !important;
  min-height:48px !important;
  margin:3px 0 !important;
  padding:7px 9px !important;
  border:1px solid transparent !important;
  border-radius:4px !important;
  background:rgba(7,17,21,.35) !important;
  color:#a3a59f !important;
  box-shadow:none !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-index-item:hover { border-color:var(--jd-border-soft) !important; color:#d8cdb3 !important; }
body.utility-pages-modern-v101387 #guidePage .guide-index-item.active {
  border-color:rgba(218,161,66,.56) !important;
  background:linear-gradient(90deg,rgba(82,59,26,.55),rgba(14,25,26,.68)) !important;
  color:#f4dfb0 !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-index-item.active::before {
  content:""; position:absolute; left:-1px; top:20%; bottom:20%; width:3px; background:var(--jd-gold-bright);
}
body.utility-pages-modern-v101387 #guidePage .guide-article { padding:0 !important; overflow:hidden !important; }
body.utility-pages-modern-v101387 #guidePage .guide-panel { padding:14px !important; }
body.utility-pages-modern-v101387 #guidePage .guide-hero {
  margin:-14px -14px 12px !important;
  padding:18px 16px !important;
  border:0 !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
  border-radius:0 !important;
  background:radial-gradient(circle at 12% 10%,rgba(199,147,57,.07),transparent 34%),linear-gradient(180deg,#102127,#0a191e) !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-hero-icon,
body.utility-pages-modern-v101387 #guidePage .guide-hero-emoji {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:50% !important;
  background:rgba(199,147,57,.05) !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-callout,
body.utility-pages-modern-v101387 #guidePage .guide-note,
body.utility-pages-modern-v101387 #guidePage .guide-section {
  margin:10px 0 !important;
  padding:11px 12px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:#08171c !important;
}
body.utility-pages-modern-v101387 #guidePage .guide-section h4 { color:#e4dccf !important; }
body.utility-pages-modern-v101387 #guidePage .guide-section p,
body.utility-pages-modern-v101387 #guidePage .guide-note { color:#9ca19b !important; }

/* SETTINGS — dashboard cards with clearer ownership and danger treatment. */
body.utility-pages-modern-v101387 #settingsPage .settings-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px !important;
}
body.utility-pages-modern-v101387 #settingsPage .settings-card {
  position:relative !important;
  min-height:220px !important;
  padding:14px !important;
  overflow:hidden !important;
}
body.utility-pages-modern-v101387 #settingsPage .settings-card-interface-icon-art,
body.utility-pages-modern-v101387 #settingsPage .reset-danger-icon {
  width:46px !important; height:46px !important;
  display:grid !important; place-items:center !important;
  padding:10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:50% !important;
  background:rgba(199,147,57,.05) !important;
  opacity:.9 !important;
}
body.utility-pages-modern-v101387 #settingsPage .settings-card h3 { margin:6px 0 !important; color:#ece5d8 !important; font-size:17px !important; }
body.utility-pages-modern-v101387 #settingsPage .settings-card p { color:#929a94 !important; line-height:1.5 !important; }
body.utility-pages-modern-v101387 #settingsPage .settings-hint,
body.utility-pages-modern-v101387 #settingsPage .cloud-sync-status { color:#7f8882 !important; }
body.utility-pages-modern-v101387 #settingsPage .settings-name-row,
body.utility-pages-modern-v101387 #settingsPage .settings-action-row { gap:6px !important; }
body.utility-pages-modern-v101387 #settingsPage .settings-name-row input { flex:1 1 auto !important; }
body.utility-pages-modern-v101387 #settingsPage .reset-danger-card {
  border-color:rgba(190,88,67,.35) !important;
  background:linear-gradient(180deg,rgba(40,25,25,.82),rgba(19,18,20,.92)) !important;
}
body.utility-pages-modern-v101387 #settingsPage .reset-danger-card .eyebrow { color:#c77c69 !important; }
body.utility-pages-modern-v101387 #settingsPage .reset-danger-icon { border-color:rgba(190,88,67,.3) !important; background:rgba(133,57,45,.08) !important; color:#d89786 !important; }

/* PROGRESS — one modern dashboard system for Journey, Mastery, Collections, Offline. */
body.utility-pages-modern-v101387 #progressPage {
  max-width:1540px !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.utility-pages-modern-v101387 #progressPage .progress-role-legend {
  margin:0 0 10px !important;
  padding:8px 10px !important;
  border:1px solid var(--jd-border-soft) !important;
  border-radius:4px !important;
  background:#08171c !important;
  color:#7f8782 !important;
  font-size:10px !important;
}
body.utility-pages-modern-v101387 #progressPage .progress-role-legend b { color:#c4b68f !important; }
body.utility-pages-modern-v101387 #progressPage .progress-tabs { width:max-content !important; max-width:100% !important; margin:0 0 10px !important; }
body.utility-pages-modern-v101387 #progressPage .progress-panel {
  padding:13px !important;
  border:1px solid var(--jd-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(14,29,35,.98),rgba(8,20,25,.98)) !important;
  box-shadow:var(--jd-shadow-inset) !important;
}
body.utility-pages-modern-v101387 #progressPage .progress-panel-heading {
  margin:0 0 11px !important;
  padding:0 0 10px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.utility-pages-modern-v101387 #progressPage .progress-panel-heading h3 { margin:2px 0 !important; color:#ece5d8 !important; font-size:20px !important; }
body.utility-pages-modern-v101387 #progressPage .progress-panel-heading p { color:#8f9791 !important; }
body.utility-pages-modern-v101387 #progressPage .mastery-summary-grid { gap:7px !important; }
body.utility-pages-modern-v101387 #progressPage .mastery-summary-card {
  min-height:104px !important;
  padding:11px !important;
}
body.utility-pages-modern-v101387 #progressPage .mastery-summary-card span,
body.utility-pages-modern-v101387 #progressPage .mastery-summary-card small { color:#858d88 !important; }
body.utility-pages-modern-v101387 #progressPage .mastery-summary-card strong { color:#e5bd62 !important; }
body.utility-pages-modern-v101387 #progressPage .mastery-section,
body.utility-pages-modern-v101387 #progressPage .collection-expedition-ledger-section { margin-top:9px !important; padding:12px !important; }
body.utility-pages-modern-v101387 #progressPage .mastery-section-heading,
body.utility-pages-modern-v101387 #progressPage .collection-expedition-ledger-heading {
  padding-bottom:9px !important;
  margin-bottom:9px !important;
  border-bottom:1px solid var(--jd-border-soft) !important;
}
body.utility-pages-modern-v101387 #progressPage .mastery-milestone-grid,
body.utility-pages-modern-v101387 #progressPage .offline-mastery-reward-grid,
body.utility-pages-modern-v101387 #progressPage .achievement-grid,
body.utility-pages-modern-v101387 #progressPage .mastery-collection-grid { gap:7px !important; }
body.utility-pages-modern-v101387 #progressPage .mastery-milestone-card,
body.utility-pages-modern-v101387 #progressPage .offline-mastery-reward-card,
body.utility-pages-modern-v101387 #progressPage .collection-expedition-card,
body.utility-pages-modern-v101387 #progressPage .achievement-card,
body.utility-pages-modern-v101387 #progressPage .collection-card {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:#08171c !important;
  box-shadow:none !important;
}
body.utility-pages-modern-v101387 #progressPage .den-guidance-card { padding:12px !important; }
body.utility-pages-modern-v101387 #progressPage .journey-journal { margin-top:9px !important; padding:12px !important; }

@media (max-width:900px) {
  body.utility-pages-modern-v101387 #guidePage .guide-layout { grid-template-columns:190px minmax(0,1fr) !important; gap:8px !important; }
}
@media (max-width:820px) {
  body.utility-pages-modern-v101387 #guidePage .guide-layout { display:block !important; }
  body.utility-pages-modern-v101387 #guidePage .guide-index { position:static !important; margin-bottom:8px !important; }
  body.utility-pages-modern-v101387 #guidePage .guide-index { display:flex !important; overflow-x:auto !important; gap:5px !important; }
  body.utility-pages-modern-v101387 #guidePage .guide-index-heading { display:none !important; }
  body.utility-pages-modern-v101387 #guidePage .guide-index-item { min-width:150px !important; margin:0 !important; }
  body.utility-pages-modern-v101387 #settingsPage .settings-grid { grid-template-columns:1fr !important; gap:7px !important; }
  body.utility-pages-modern-v101387 #settingsPage .settings-card { min-height:0 !important; }
  body.utility-pages-modern-v101387 #progressPage .progress-role-legend { overflow-x:auto !important; white-space:nowrap !important; }
  body.utility-pages-modern-v101387 #progressPage .progress-tabs { display:flex !important; width:100% !important; overflow-x:auto !important; }
}

/* ==========================================================================
   Legacy baseline layer: global-ui-polish.css
   ========================================================================== */
/* JourneyDen V1.01.388 — Global UI Modernization Closure
   Final consistency, production-screen coverage, responsive ownership and interaction polish. */

body.global-ui-polish-v101388 {
  scrollbar-color:rgba(171,125,48,.34) #071419;
  scrollbar-width:thin;
}
body.global-ui-polish-v101388 ::selection { background:rgba(199,147,57,.3); color:#fff1ce; }
body.global-ui-polish-v101388 * { -webkit-tap-highlight-color:transparent; }
body.global-ui-polish-v101388 :focus-visible {
  outline:2px solid rgba(228,182,83,.7) !important;
  outline-offset:2px !important;
}
body.global-ui-polish-v101388 .page { animation:jd-modern-page-in .14s ease-out both; }
@keyframes jd-modern-page-in { from{opacity:.86;transform:translateY(2px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce) {
  body.global-ui-polish-v101388 .page { animation:none !important; }
  body.global-ui-polish-v101388 * { scroll-behavior:auto !important; transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* Production/gathering content inside Skills receives the same hierarchy. */
body.global-ui-polish-v101388 #activitiesPage .production-active-activity-host,
body.global-ui-polish-v101388 #activitiesPage .smithing-forge-navigation,
body.global-ui-polish-v101388 #activitiesPage .cooking-hearth-navigation,
body.global-ui-polish-v101388 #activitiesPage .construction-workshop-navigation,
body.global-ui-polish-v101388 #activitiesPage .apothecary-alchemy-navigation {
  margin:0 0 9px !important;
}
body.global-ui-polish-v101388 #activitiesPage .production-recipe-grid,
body.global-ui-polish-v101388 #activitiesPage .recipe-grid,
body.global-ui-polish-v101388 #activitiesPage .smithing-recipe-grid,
body.global-ui-polish-v101388 #activitiesPage .farming-plot-grid { gap:7px !important; }
body.global-ui-polish-v101388 #activitiesPage .recipe-card,
body.global-ui-polish-v101388 #activitiesPage .production-card,
body.global-ui-polish-v101388 #activitiesPage .smithing-recipe-card,
body.global-ui-polish-v101388 #activitiesPage .farming-plot,
body.global-ui-polish-v101388 #activitiesPage .farm-plot,
body.global-ui-polish-v101388 #activitiesPage .seed-bag-card,
body.global-ui-polish-v101388 #activitiesPage .seed-bag-panel,
body.global-ui-polish-v101388 #activitiesPage .production-recipe-detail,
body.global-ui-polish-v101388 #activitiesPage .production-recipe-details {
  border:1px solid var(--jd-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(13,28,33,.96),rgba(7,18,22,.96)) !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.1) !important;
}
body.global-ui-polish-v101388 #activitiesPage .recipe-card:hover,
body.global-ui-polish-v101388 #activitiesPage .production-card:hover,
body.global-ui-polish-v101388 #activitiesPage .smithing-recipe-card:hover,
body.global-ui-polish-v101388 #activitiesPage .farming-plot:hover {
  border-color:rgba(218,161,66,.46) !important;
  transform:none !important;
}
body.global-ui-polish-v101388 #activitiesPage .recipe-card.active,
body.global-ui-polish-v101388 #activitiesPage .production-card.active,
body.global-ui-polish-v101388 #activitiesPage .smithing-recipe-card.active,
body.global-ui-polish-v101388 #activitiesPage .farming-plot.active,
body.global-ui-polish-v101388 #activitiesPage .selected {
  border-color:rgba(229,175,76,.82) !important;
  box-shadow:inset 0 0 0 1px rgba(248,194,90,.08),0 0 12px rgba(214,156,58,.08) !important;
}
body.global-ui-polish-v101388 #activitiesPage .material-row,
body.global-ui-polish-v101388 #activitiesPage .recipe-material,
body.global-ui-polish-v101388 #activitiesPage .production-material-row {
  border-color:rgba(144,105,44,.18) !important;
  background:#071419 !important;
  border-radius:4px !important;
}

/* Equipment closure: inherit global modern tokens while preserving V381 geometry. */
body.global-ui-polish-v101388 #equipmentPage .equipment-clean-section,
body.global-ui-polish-v101388 #equipmentPage .potion-preset-panel {
  border-color:var(--jd-border) !important;
}
body.global-ui-polish-v101388 #equipmentPage .equipment-character-slot,
body.global-ui-polish-v101388 #equipmentPage .farming-equipment-slot,
body.global-ui-polish-v101388 #equipmentPage .equipment-food-choice,
body.global-ui-polish-v101388 #equipmentPage .equipment-tool-card {
  transition:border-color .12s ease,background .12s ease !important;
}

/* Unified small status chips. */
body.global-ui-polish-v101388 .status-chip,
body.global-ui-polish-v101388 .badge,
body.global-ui-polish-v101388 .den-room-status,
body.global-ui-polish-v101388 .activity-current-status,
body.global-ui-polish-v101388 .combat-status,
body.global-ui-polish-v101388 .expedition-status {
  border-radius:999px !important;
}

/* Empty states should feel intentional instead of unfinished. */
body.global-ui-polish-v101388 .empty-state,
body.global-ui-polish-v101388 .empty-card,
body.global-ui-polish-v101388 .bank-selected-empty-rs,
body.global-ui-polish-v101388 .combat-empty {
  color:#7a837e !important;
}
body.global-ui-polish-v101388 .empty-state strong,
body.global-ui-polish-v101388 .empty-card strong,
body.global-ui-polish-v101388 .bank-selected-empty-rs strong,
body.global-ui-polish-v101388 .combat-empty strong { color:#c9c2b2 !important; }

/* Footer/diagnostics are visually subordinate. */
body.global-ui-polish-v101388 .diagnostics {
  margin-top:18px !important;
  border:1px solid rgba(144,105,44,.14) !important;
  border-radius:4px !important;
  background:#061217 !important;
  color:#6f7773 !important;
}
body.global-ui-polish-v101388 .diagnostics summary { cursor:pointer; padding:8px 10px !important; color:#777f7a !important; }
body.global-ui-polish-v101388 .app-main > footer {
  min-height:36px !important;
  padding:7px 18px !important;
  border-top:1px solid rgba(144,105,44,.16) !important;
  background:#061217 !important;
  color:#6f7773 !important;
  font-size:10px !important;
}

/* Consistent tooltip/popover treatment. */
body.global-ui-polish-v101388 .unlock-tooltip,
body.global-ui-polish-v101388 .tooltip,
body.global-ui-polish-v101388 [role="tooltip"] {
  border:1px solid var(--jd-border) !important;
  border-radius:5px !important;
  background:#07161b !important;
  color:#d9d3c7 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.42) !important;
}

/* Make scrollable tab rows feel deliberately scrollable on touch. */
body.global-ui-polish-v101388 .leaderboard-tabs,
body.global-ui-polish-v101388 .section-owner-tabs,
body.global-ui-polish-v101388 .bank-category-tabs,
body.global-ui-polish-v101388 .mastery-skill-tabs {
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
}
body.global-ui-polish-v101388 .leaderboard-tabs > *,
body.global-ui-polish-v101388 .section-owner-tabs > *,
body.global-ui-polish-v101388 .bank-category-tabs > *,
body.global-ui-polish-v101388 .mastery-skill-tabs > * { scroll-snap-align:start; }

/* Desktop rhythm / large displays */
@media (min-width:1500px) {
  body.global-ui-polish-v101388 main { padding-left:24px !important; padding-right:24px !important; }
  body.global-ui-polish-v101388 #activitiesPage .activity-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body.global-ui-polish-v101388 #shopPage #shopCards { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}

/* Tablet ownership: avoid awkward three-column squeeze. */
@media (max-width:1100px) and (min-width:821px) {
  body.global-ui-polish-v101388 { --sidebar-width:206px; }
  body.global-ui-polish-v101388 main { padding:14px !important; }
  body.global-ui-polish-v101388 .main-navigation .nav-item { min-height:38px !important; padding:7px 8px !important; }
  body.global-ui-polish-v101388 .sidebar-player-card { margin-inline:8px !important; }
  body.global-ui-polish-v101388 .reference-page-heading-icon { width:48px !important; height:48px !important; flex-basis:48px !important; }
}

/* Phone closure: modern, compact, no horizontal overflow from desktop-only min widths. */
@media (max-width:820px) {
  body.global-ui-polish-v101388 .page,
  body.global-ui-polish-v101388 #progressPage { width:100% !important; max-width:100% !important; min-width:0 !important; }
  body.global-ui-polish-v101388 .reference-page-heading-title { min-width:0 !important; }
  body.global-ui-polish-v101388 .reference-page-heading-title > div { min-width:0 !important; }
  body.global-ui-polish-v101388 .page .section-heading p,
  body.global-ui-polish-v101388 .page .page-title-row p { max-width:100% !important; font-size:11px !important; line-height:1.4 !important; }
  body.global-ui-polish-v101388 button { touch-action:manipulation; }
  body.global-ui-polish-v101388 input,
  body.global-ui-polish-v101388 select,
  body.global-ui-polish-v101388 textarea { font-size:16px !important; }
  body.global-ui-polish-v101388 .section-owner-tabs,
  body.global-ui-polish-v101388 .leaderboard-tabs,
  body.global-ui-polish-v101388 .mastery-skill-tabs,
  body.global-ui-polish-v101388 .bank-category-tabs { max-width:100% !important; overflow-x:auto !important; flex-wrap:nowrap !important; }
  body.global-ui-polish-v101388 .section-owner-tabs button,
  body.global-ui-polish-v101388 .leaderboard-tabs button,
  body.global-ui-polish-v101388 .mastery-skill-tabs button,
  body.global-ui-polish-v101388 .bank-category-tabs button { flex:0 0 auto !important; }
  body.global-ui-polish-v101388 .card-grid { grid-template-columns:1fr !important; }
  body.global-ui-polish-v101388 .mobile-nav-more-item {
    border:1px solid var(--jd-border-soft) !important;
    border-radius:5px !important;
    background:#09191e !important;
    color:#c2bba7 !important;
  }
  body.global-ui-polish-v101388 .mobile-nav-more-item:active { border-color:rgba(218,161,66,.62) !important; background:rgba(74,54,25,.48) !important; }
}

@media (max-width:420px) {
  body.global-ui-polish-v101388 main { padding-inline:8px !important; }
  body.global-ui-polish-v101388 .current-journey-tracker { margin-inline:6px !important; }
  body.global-ui-polish-v101388 .reference-page-heading-icon { width:42px !important; height:42px !important; flex-basis:42px !important; }
  body.global-ui-polish-v101388 .page .section-heading h2,
  body.global-ui-polish-v101388 .page .page-title-row h2 { font-size:24px !important; }
}

/* Final phone correction: the legacy Equipment mobile summary used a 92px metric rail;
   the modern system gives Combat Rating a full-width hero card with stats beneath it. */
@media (max-width:620px) {
  body.global-ui-polish-v101388 #equipmentPage .equipment-clean-summary {
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  body.global-ui-polish-v101388 #equipmentPage .equipment-combat-level-card {
    width:100% !important;
    grid-template-columns:minmax(0,1fr) 58px !important;
    grid-template-rows:auto auto !important;
    min-height:74px !important;
    padding:10px 11px !important;
  }
  body.global-ui-polish-v101388 #equipmentPage .equipment-combat-level-card small {
    white-space:nowrap !important;
    overflow:visible !important;
  }
  body.global-ui-polish-v101388 #equipmentPage .equipment-combat-level-card span {
    display:block !important;
    margin:0 !important;
    max-width:230px !important;
  }
  body.global-ui-polish-v101388 #equipmentPage .equipment-combat-stats {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: storage-simplification.css
   ========================================================================== */
/* JourneyDen V1.01.389 — Storage Simplification
   Keep the V1.01.388 modern language, but restore Storage's inventory-first hierarchy. */

/* Header: quiet utility page, not a hero surface. */
body.storage-simplified-v101389 #bankPage > .bank-heading {
  margin:0 0 7px !important;
  padding:4px 0 9px !important;
  min-height:0 !important;
}
body.storage-simplified-v101389 #bankPage .reference-page-heading-icon {
  width:42px !important;
  height:42px !important;
}
body.storage-simplified-v101389 #bankPage .reference-page-heading-title h2 {
  font-size:28px !important;
  line-height:1 !important;
}
body.storage-simplified-v101389 #bankPage .bank-stack-note {
  display:none !important;
}
body.storage-simplified-v101389 #bankPage #bankSummary {
  margin-top:2px !important;
  color:#7f8984 !important;
  font-size:10px !important;
}

/* Remove the card-around-a-toolbar feeling. */
body.storage-simplified-v101389 #bankPage .bank-shell-rs {
  gap:7px !important;
}
body.storage-simplified-v101389 #bankPage .bank-topbar-rs,
body.storage-simplified-v101389 #bankPage .bank-topbar-v2 {
  padding:5px 0 8px !important;
  border:0 !important;
  border-bottom:1px solid rgba(144,105,44,.26) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.storage-simplified-v101389 #bankPage .bank-main-nav {
  gap:5px !important;
}
body.storage-simplified-v101389 #bankPage .bank-category-tabs {
  gap:3px !important;
}
body.storage-simplified-v101389 #bankPage .bank-category-tabs button,
body.storage-simplified-v101389 #bankPage .bank-filter-toggle,
body.storage-simplified-v101389 #bankPage .bank-reset-filters {
  min-height:30px !important;
  padding:4px 9px !important;
  border-radius:2px !important;
  font-size:10px !important;
}
body.storage-simplified-v101389 #bankPage .bank-category-tabs button:not(.active) {
  border-color:rgba(144,105,44,.22) !important;
  background:rgba(8,20,24,.72) !important;
}
body.storage-simplified-v101389 #bankPage .bank-category-tabs button.active {
  background:linear-gradient(180deg,rgba(80,58,25,.9),rgba(44,31,17,.92)) !important;
}
body.storage-simplified-v101389 #bankPage .bank-filter-toggle {
  margin-left:auto !important;
  background:rgba(8,20,24,.72) !important;
}
body.storage-simplified-v101389 #bankPage .bank-advanced-filters {
  margin-top:6px !important;
  padding-top:6px !important;
}

/* Inventory owns the workspace. There is no empty permanent details column. */
body.storage-simplified-v101389 #bankPage .bank-content-rs {
  grid-template-columns:minmax(0,1fr) !important;
  gap:7px !important;
}
body.storage-simplified-v101389 #bankPage .bank-content-rs:has(#bankSelectedPanel > :not(.bank-selected-empty-rs)) {
  grid-template-columns:minmax(0,1fr) minmax(260px,300px) !important;
}
body.storage-simplified-v101389 #bankPage .bank-grid-panel-rs {
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.storage-simplified-v101389 #bankPage #bankSelectedPanel:has(> .bank-selected-empty-rs) {
  display:none !important;
}
body.storage-simplified-v101389 #bankPage .bank-selected-panel-rs {
  top:8px !important;
  min-height:0 !important;
  padding:9px !important;
  border-color:rgba(144,105,44,.34) !important;
  background:rgba(8,20,24,.94) !important;
}

/* Collection is useful status, but not a second hero card. */
body.storage-simplified-v101389 #bankPage .bank-discovery-rs {
  display:grid !important;
  grid-template-columns:auto auto minmax(100px,220px) 1fr !important;
  align-items:center !important;
  gap:7px !important;
  margin:0 0 7px !important;
  padding:3px 1px 6px !important;
  border:0 !important;
  border-bottom:1px solid rgba(144,105,44,.16) !important;
  border-radius:0 !important;
  background:transparent !important;
}
body.storage-simplified-v101389 #bankPage .bank-discovery-rs > span,
body.storage-simplified-v101389 #bankPage .bank-discovery-rs > strong {
  font-size:9px !important;
  line-height:1 !important;
}
body.storage-simplified-v101389 #bankPage .bank-discovery-bar {
  height:3px !important;
}
body.storage-simplified-v101389 #bankPage .bank-rarity-summary {
  justify-self:end !important;
  opacity:.72 !important;
}
body.storage-simplified-v101389 #bankPage .bank-rarity-summary > * {
  padding:2px 5px !important;
  border:0 !important;
  background:transparent !important;
}

/* Denser item grid: more inventory, less chrome. */
body.storage-simplified-v101389 #bankPage .bank-slot-grid-rs {
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important;
  gap:5px !important;
}
body.storage-simplified-v101389 #bankPage .bank-slot-rs,
body.storage-simplified-v101389 #bankPage .bank-item-slot,
body.storage-simplified-v101389 #bankPage .bank-slot {
  min-height:102px !important;
  padding:7px !important;
  border-radius:3px !important;
  background:rgba(9,22,27,.86) !important;
  box-shadow:none !important;
}
body.storage-simplified-v101389 #bankPage .bank-slot-rs:hover,
body.storage-simplified-v101389 #bankPage .bank-item-slot:hover,
body.storage-simplified-v101389 #bankPage .bank-slot:hover {
  background:rgba(13,29,34,.96) !important;
}

@media (max-width:820px) {
  body.storage-simplified-v101389 #bankPage > .bank-heading {
    margin-bottom:4px !important;
    padding:2px 0 7px !important;
  }
  body.storage-simplified-v101389 #bankPage .reference-page-heading-icon {
    width:36px !important;
    height:36px !important;
  }
  body.storage-simplified-v101389 #bankPage .reference-page-heading-title h2 {
    font-size:23px !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-topbar-rs,
  body.storage-simplified-v101389 #bankPage .bank-topbar-v2 {
    padding:4px 0 7px !important;
  }
  body.storage-simplified-v101389 #bankPage .mobile-bank-category-select {
    min-height:44px !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-filter-toggle {
    min-height:44px !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-discovery-rs {
    grid-template-columns:auto 1fr minmax(74px,150px) !important;
    gap:6px !important;
    margin-bottom:6px !important;
    padding:3px 0 6px !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-discovery-rs > strong {
    justify-self:start !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-rarity-summary {
    display:none !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-selected-panel-rs {
    margin-top:6px !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-slot-grid-rs {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-slot-rs,
  body.storage-simplified-v101389 #bankPage .bank-item-slot,
  body.storage-simplified-v101389 #bankPage .bank-slot {
    min-height:92px !important;
    padding:5px !important;
  }
}

@media (max-width:340px) {
  body.storage-simplified-v101389 #bankPage .bank-slot-grid-rs {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  body.storage-simplified-v101389 #bankPage .bank-discovery-rs {
    grid-template-columns:auto auto 1fr !important;
  }
}

/* ==========================================================================
   Legacy baseline layer: expedition-run-state.css
   ========================================================================== */
/* JourneyDen V1.01.400 — Expedition run-state clarity and completion confirmation */
.expedition-completion-card .expedition-completion-icon{
  color:#b9de69;
  border-color:rgba(151,190,66,.48);
  background:linear-gradient(rgba(105,145,42,.10),rgba(105,145,42,.04)),var(--surface-2);
}
.expedition-completion-card .expedition-completion-actions{
  grid-template-columns:1fr;
}
.expedition-completion-card .expedition-completion-stats .recommended strong{
  color:#b9de69;
  font-size:14px;
  text-align:right;
}
@media(max-width:520px){
  .expedition-completion-card .expedition-completion-stats{grid-template-columns:1fr;}
}

/* ==========================================================================
   Legacy baseline layer: storage-inventory-first.css
   ========================================================================== */
/* JourneyDen V1.01.399 — Storage: Inventory First
   Target: compact, calm storage browser based on the approved mockup. */

body.storage-inventory-first-v101399 #bankPage {
  --bank-panel: rgba(7, 18, 22, .88);
  --bank-panel-strong: rgba(8, 21, 25, .96);
  --bank-line: rgba(166, 119, 48, .32);
  --bank-line-soft: rgba(166, 119, 48, .20);
  --bank-gold: #d7a64d;
}

/* Quiet header: Storage + capacity is enough. */
body.storage-inventory-first-v101399 #bankPage > .bank-heading {
  margin: 0 0 10px !important;
  padding: 6px 0 12px !important;
  border-bottom: 0 !important;
}
body.storage-inventory-first-v101399 #bankPage .reference-page-heading-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(211,160,69,.11), rgba(7,18,22,.15)) !important;
}
body.storage-inventory-first-v101399 #bankPage .reference-page-heading-title h2 {
  margin: 0 !important;
  font-size: 34px !important;
  letter-spacing: .02em !important;
}
body.storage-inventory-first-v101399 #bankPage #bankSummary {
  margin: 4px 0 0 !important;
  color: #8f958e !important;
  font-size: 11px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-stack-note { display: none !important; }

/* One utility row: categories -> search -> filters. */
body.storage-inventory-first-v101399 #bankPage .bank-shell-rs { gap: 12px !important; }
body.storage-inventory-first-v101399 #bankPage .bank-topbar-rs,
body.storage-inventory-first-v101399 #bankPage .bank-topbar-v2 {
  padding: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bank-line-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-main-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-category-tabs {
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-category-tabs button {
  min-height: 34px !important;
  padding: 6px 11px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 210px !important;
  min-width: 150px !important;
  max-width: 280px !important;
  margin-left: auto !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary > img {
  position: absolute !important;
  left: 10px !important;
  width: 15px !important;
  height: 15px !important;
  opacity: .72 !important;
  pointer-events: none !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary input {
  width: 100% !important;
  min-height: 34px !important;
  padding: 6px 10px 6px 32px !important;
  border: 1px solid var(--bank-line) !important;
  border-radius: 3px !important;
  background: rgba(5, 14, 17, .82) !important;
  color: #ddd6c7 !important;
  font-size: 10px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary input:focus {
  border-color: rgba(218,161,66,.72) !important;
  outline: 1px solid rgba(218,161,66,.18) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-filter-toggle {
  flex: 0 0 auto !important;
  margin-left: 6px !important;
  min-height: 34px !important;
  padding: 6px 11px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-category-swipe-hint { display: none !important; }
body.storage-inventory-first-v101399 #bankPage .bank-advanced-filters {
  justify-content: flex-end !important;
  align-items: end !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(166,119,48,.12) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-sort-control {
  width: min(240px, 100%) !important;
}

/* Inventory grid is the page. Collection/rarity chrome is intentionally gone. */
body.storage-inventory-first-v101399 #bankPage .bank-content-rs {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-content-rs:has(#bankSelectedPanel > :not(.bank-selected-empty-rs)) {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 310px) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-grid-panel-rs {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-discovery-rs { display: none !important; }
body.storage-inventory-first-v101399 #bankPage .bank-slot-grid-rs {
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)) !important;
  gap: 5px !important;
  align-content: start !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-slot-rs,
body.storage-inventory-first-v101399 #bankPage .bank-item-slot,
body.storage-inventory-first-v101399 #bankPage .bank-slot {
  aspect-ratio: 1 / .92 !important;
  min-height: 72px !important;
  max-height: 88px !important;
  padding: 5px !important;
  border: 1px solid rgba(166,119,48,.28) !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, rgba(11,25,29,.86), rgba(5,15,18,.90)) !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,.15) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-slot-rs:hover,
body.storage-inventory-first-v101399 #bankPage .bank-item-slot:hover,
body.storage-inventory-first-v101399 #bankPage .bank-slot:hover {
  border-color: rgba(216,164,70,.58) !important;
  background: linear-gradient(180deg, rgba(15,32,36,.94), rgba(7,19,22,.96)) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-slot-rs.selected,
body.storage-inventory-first-v101399 #bankPage .bank-item-slot.selected,
body.storage-inventory-first-v101399 #bankPage .bank-slot.selected {
  border-color: rgba(239,184,79,.96) !important;
  box-shadow: inset 0 0 0 1px rgba(245,194,91,.16), 0 0 10px rgba(216,158,55,.13) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-slot-icon-rs {
  font-size: 24px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-slot-icon-rs .bank-slot-icon-art,
body.storage-inventory-first-v101399 #bankPage .bank-slot-icon-rs .jd-item-icon {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-slot-count-rs {
  right: 3px !important;
  bottom: 3px !important;
  max-width: 80% !important;
  padding: 1px 4px !important;
  border: 1px solid rgba(164,119,48,.20) !important;
  border-radius: 3px !important;
  background: rgba(4,12,15,.88) !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
}

/* Slim contextual inspector, not a second dashboard. */
body.storage-inventory-first-v101399 #bankPage .bank-selected-panel-rs {
  top: 8px !important;
  min-height: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--bank-line) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(9,23,27,.96), rgba(5,16,19,.97)) !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.13) !important;
}
body.storage-inventory-first-v101399 #bankPage #bankSelectedPanel:has(> .bank-selected-empty-rs) { display: none !important; }
body.storage-inventory-first-v101399 #bankPage .bank-selected-header-rs {
  min-height: 58px !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
  padding: 0 28px 10px 0 !important;
  border-bottom: 1px solid rgba(166,119,48,.18) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-icon-rs {
  width: 54px !important;
  height: 54px !important;
  border: 1px solid rgba(166,119,48,.26) !important;
  border-radius: 3px !important;
  background: rgba(5,14,17,.70) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-icon-rs img {
  width: 38px !important;
  height: 38px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-header-rs h3 {
  margin-top: 3px !important;
  font-size: 17px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-rarity-label {
  font-size: 8px !important;
  opacity: .78 !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-stats-rs {
  gap: 0 !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(166,119,48,.20) !important;
  border-radius: 3px !important;
  background: rgba(4,13,16,.55) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-stats-rs > div {
  padding: 8px 6px !important;
  border: 0 !important;
  border-right: 1px solid rgba(166,119,48,.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: center !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-stats-rs > div:last-child { border-right: 0 !important; }
body.storage-inventory-first-v101399 #bankPage .bank-selected-info-rs {
  display: grid !important;
  gap: 10px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-info-rs > div {
  max-height: none !important;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(166,119,48,.16) !important;
  background: transparent !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-info-rs ul {
  margin: 6px 0 0 !important;
  padding: 7px 9px 7px 24px !important;
  border: 1px solid rgba(166,119,48,.20) !important;
  border-radius: 3px !important;
  background: rgba(4,13,16,.48) !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-selected-info-rs p {
  margin: 5px 0 0 !important;
  color: #858c86 !important;
  font-size: 9px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-sell-rs {
  margin-top: 10px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-sell-buttons-rs {
  gap: 5px !important;
  margin-top: 6px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-sell-buttons-rs button,
body.storage-inventory-first-v101399 #bankPage .bank-sell-x-rs input,
body.storage-inventory-first-v101399 #bankPage .bank-sell-x-rs button {
  min-height: 34px !important;
  border-radius: 3px !important;
}
body.storage-inventory-first-v101399 #bankPage .bank-sell-x-rs button {
  border-color: rgba(220,166,67,.62) !important;
  background: linear-gradient(180deg, #a87c31, #75521f) !important;
  color: #fff0c2 !important;
}

@media (max-width: 1180px) {
  body.storage-inventory-first-v101399 #bankPage .bank-main-nav { flex-wrap: wrap !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary {
    order: 4 !important;
    flex: 1 1 220px !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
  body.storage-inventory-first-v101399 #bankPage .bank-filter-toggle { margin-left: auto !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-slot-grid-rs {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  body.storage-inventory-first-v101399 #bankPage > .bank-heading { padding: 3px 0 8px !important; }
  body.storage-inventory-first-v101399 #bankPage .reference-page-heading-icon { width: 40px !important; height: 40px !important; }
  body.storage-inventory-first-v101399 #bankPage .reference-page-heading-title h2 { font-size: 25px !important; }
  body.storage-inventory-first-v101399 #bankPage #bankSummary { font-size: 10px !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-main-nav { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 6px !important; }
  body.storage-inventory-first-v101399 #bankPage .mobile-bank-category-select { grid-column: 1 / 2 !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-filter-toggle { grid-column: 2 / 3 !important; min-height: 44px !important; margin: 0 !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary { grid-column: 1 / -1 !important; order: initial !important; min-width: 0 !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary input { min-height: 44px !important; font-size: 12px !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-content-rs,
  body.storage-inventory-first-v101399 #bankPage .bank-content-rs:has(#bankSelectedPanel > :not(.bank-selected-empty-rs)) { display: block !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-slot-grid-rs { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 4px !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-slot-rs,
  body.storage-inventory-first-v101399 #bankPage .bank-item-slot,
  body.storage-inventory-first-v101399 #bankPage .bank-slot { min-height: 68px !important; max-height: none !important; padding: 4px !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-slot-icon-rs .bank-slot-icon-art,
  body.storage-inventory-first-v101399 #bankPage .bank-slot-icon-rs .jd-item-icon { width: 30px !important; height: 30px !important; }
  body.storage-inventory-first-v101399 #bankPage .bank-selected-panel-rs { margin-top: 8px !important; }
}

@media (max-width: 390px) {
  body.storage-inventory-first-v101399 #bankPage .bank-slot-grid-rs { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* The primary search label remains accessible without consuming visual space. */
body.storage-inventory-first-v101399 #bankPage .bank-filter-search-primary > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   Legacy baseline layer: skills-workspace.css
   ========================================================================== */
/* JourneyDen V1.01.414 — scalable shared skill-training workspace.
   One layout for Gathering + Production + Farming; Combat skills stay links to Combat. */
body.skills-workspace-v101414 #activitiesPage {
  --skill-panel:#0b1a20;
  --skill-panel-deep:#071419;
  --skill-panel-soft:#0f2329;
  --skill-border:rgba(176,130,56,.34);
  --skill-border-soft:rgba(176,130,56,.20);
  --skill-gold:#d5a64b;
  --skill-gold-bright:#efc56b;
  --skill-text:#eee6d6;
  --skill-muted:#969d98;
  --skill-green:#91b647;
  --skill-red:#b94e46;
  padding-top:0 !important;
}

body.skills-workspace-v101414 #activitiesPage .activity-workspace-legacy-skill-tabs,
body.skills-workspace-v101414 #activitiesPage .activity-workspace-legacy-current,
body.skills-workspace-v101414 #activitiesPage .desktop-skill-navigator {
  display:none !important;
}

body.skills-workspace-v101414 #activitiesPage .activity-layout.activity-workspace-layout {
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-content { min-width:0 !important; }

/* Hero */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-hero {
  margin:0 0 14px !important;
  padding:16px 18px 15px !important;
  border:1px solid var(--skill-border) !important;
  border-radius:5px !important;
  background:
    radial-gradient(circle at 8% 30%,rgba(205,153,62,.07),transparent 22%),
    linear-gradient(135deg,rgba(14,34,40,.99),rgba(7,19,24,.99)) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012),0 12px 30px rgba(0,0,0,.16) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-master-breadcrumb {
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  margin:0 0 9px !important;
  color:#7f8782 !important;
  font-size:10px !important;
  letter-spacing:.04em !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-master-breadcrumb strong { color:#c5a966 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-hero-grid {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(390px,46%) !important;
  gap:22px !important;
  align-items:center !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-identity {
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-icon {
  width:84px !important;
  height:84px !important;
  min-width:84px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(218,161,66,.62) !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(33,65,62,.72),rgba(9,24,28,.94) 66%) !important;
  box-shadow:inset 0 0 0 7px rgba(190,137,47,.055),0 0 18px rgba(196,143,48,.09) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-icon :is(img,.jd-skill-icon,.activity-master-skill-icon-art) {
  width:54px !important;
  height:54px !important;
  max-width:54px !important;
  max-height:54px !important;
  object-fit:contain !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-master-copy { min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-master-copy > .eyebrow { color:#c89843 !important; }
body.skills-workspace-v101414 #activitiesPage #activityMasterSkillName {
  margin:1px 0 3px !important;
  color:#f1e6d0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:clamp(30px,2.7vw,45px) !important;
  line-height:1 !important;
  letter-spacing:.015em !important;
  text-transform:uppercase !important;
}
body.skills-workspace-v101414 #activitiesPage #activityMasterSkillDescription {
  max-width:650px !important;
  margin:0 !important;
  color:#a3aaa5 !important;
  font-size:12px !important;
  line-height:1.55 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-tags {
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin-top:10px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-tag {
  display:inline-flex !important;
  align-items:center !important;
  min-height:25px !important;
  padding:4px 9px !important;
  border:1px solid var(--skill-border-soft) !important;
  border-radius:4px !important;
  background:rgba(16,35,40,.75) !important;
  color:#c9ad72 !important;
  font-size:9px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button {
  min-height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:4px 9px 4px 6px !important;
  border:1px solid var(--skill-border-soft) !important;
  border-radius:4px !important;
  background:#0a1b20 !important;
  color:#d9c9aa !important;
  box-shadow:none !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button .mobile-activity-skill-icon {
  width:22px !important;height:22px !important;display:grid !important;place-items:center !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button .mobile-activity-skill-icon :is(img,.jd-skill-icon) {
  width:20px !important;height:20px !important;max-width:20px !important;max-height:20px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button .mobile-activity-skill-copy {
  display:flex !important;align-items:center !important;gap:5px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button .mobile-activity-skill-copy small { display:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button .mobile-activity-skill-copy strong { font-size:10px !important;color:#e7d6b7 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button .activity-skill-switcher-meta { color:#84918b !important;font-size:9px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-switch-affordance { color:#c89b4f !important;font-size:9px !important;font-weight:800 !important; }

/* Active task integrated into hero */
body.skills-workspace-v101414 #activitiesPage .activity-global-active-bar.activity-workspace-active-task {
  position:relative !important;
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) auto auto !important;
  grid-template-rows:auto auto !important;
  gap:5px 10px !important;
  align-items:center !important;
  min-height:92px !important;
  margin:0 !important;
  padding:12px 13px 15px !important;
  border:1px solid var(--skill-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(8,25,30,.94),rgba(6,18,22,.94)) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.2) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-active-task .activity-global-active-icon {
  grid-row:1 / 3 !important;
  width:48px !important;height:48px !important;
  border-radius:5px !important;
  border:1px solid var(--skill-border-soft) !important;
  background:#0b1a1e !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-active-task .activity-global-active-icon :is(img,.jd-item-icon,.jd-skill-icon) {
  width:40px !important;height:40px !important;max-width:40px !important;max-height:40px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-global-active-copy small {
  color:#b78939 !important;font-size:9px !important;font-weight:800 !important;letter-spacing:.08em !important;text-transform:uppercase !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-global-active-copy strong { color:#eee2ca !important;font-size:13px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-global-active-copy span { color:#8e9892 !important;font-size:9px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-global-active-timing { min-width:72px !important;text-align:right !important; }
body.skills-workspace-v101414 #activitiesPage .activity-global-active-timing strong { color:#f0e2c6 !important;font-size:15px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-global-active-timing small { color:#b99a61 !important;font-size:9px !important; }
body.skills-workspace-v101414 #activitiesPage :is(.activity-global-active-stop,.activity-global-active-view) {
  min-width:82px !important;min-height:36px !important;padding:7px 11px !important;border-radius:4px !important;font-size:10px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-global-active-track {
  grid-column:1 / -1 !important;
  position:absolute !important;left:13px !important;right:13px !important;bottom:10px !important;
  height:4px !important;border-radius:99px !important;background:#071216 !important;border:1px solid rgba(167,126,54,.22) !important;overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-global-active-track > span { background:linear-gradient(90deg,#bf8731,#dfad52) !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-active-task.is-idle { opacity:.82 !important; }

/* Stat strip */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-panel {
  margin:0 0 14px !important;
  padding:0 !important;
  border:1px solid var(--skill-border-soft) !important;
  border-radius:5px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,rgba(12,29,35,.96),rgba(8,21,26,.96)) !important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.14) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-overview-copy { display:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip {
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip > div {
  position:relative !important;
  min-width:0 !important;
  min-height:74px !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:8px !important;
  align-content:center !important;
  padding:10px 12px !important;
  border-right:1px solid var(--skill-border-soft) !important;
  background:transparent !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip > div:last-child { border-right:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-stat-icon {
  grid-row:1 / 3 !important;
  width:31px !important;height:31px !important;display:grid !important;place-items:center !important;
  border:1px solid rgba(182,136,55,.36) !important;border-radius:50% !important;background:rgba(178,130,43,.055) !important;color:#d3a750 !important;font-size:10px !important;font-weight:900 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip small { color:#929a94 !important;font-size:8px !important;text-transform:none !important;letter-spacing:.02em !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip strong { overflow:hidden !important;text-overflow:ellipsis !important;color:#e7ddc9 !important;font-size:12px !important;white-space:nowrap !important; }

/* Activity browser */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-browser {
  border:1px solid var(--skill-border-soft) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(11,28,34,.98),rgba(7,20,25,.98)) !important;
  overflow:hidden !important;
  box-shadow:inset 0 0 24px rgba(0,0,0,.12) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-browser-heading {
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;
  padding:10px 12px 4px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-browser-heading .eyebrow { color:#c79a45 !important; }
body.skills-workspace-v101414 #activitiesPage #activityWorkspaceResultCount { color:#78837e !important;font-size:9px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-browse-controls.activity-workspace-controls {
  margin:0 !important;padding:7px 10px 10px !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-toolbar {
  display:grid !important;
  grid-template-columns:minmax(270px,auto) minmax(190px,1fr) auto minmax(165px,auto) auto !important;
  gap:8px !important;
  align-items:center !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-main-filters { display:flex !important;align-items:center !important;gap:6px !important;min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-category-nav { min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-filter-chips { display:flex !important;gap:4px !important;align-items:center !important;flex-wrap:nowrap !important;overflow:auto !important;scrollbar-width:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-filter-chips::-webkit-scrollbar { display:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-filter-chip {
  min-height:31px !important;padding:5px 10px !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#091a1f !important;color:#b6b3a8 !important;box-shadow:none !important;white-space:nowrap !important;font-size:9px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-filter-chip small { margin-left:5px !important;padding:1px 5px !important;border-radius:99px !important;background:rgba(255,255,255,.045) !important;color:#7e8882 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-filter-chip.active { border-color:rgba(215,162,67,.72) !important;background:linear-gradient(180deg,rgba(105,73,28,.72),rgba(63,46,22,.72)) !important;color:#f4e1b1 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-search {
  min-width:0 !important;height:32px !important;display:flex !important;align-items:center !important;gap:6px !important;padding:0 9px !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#07171c !important;color:#bd944e !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-search input { width:100% !important;min-width:0 !important;height:28px !important;padding:0 !important;border:0 !important;background:transparent !important;color:#d8d4c9 !important;outline:none !important;font-size:9px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-filter-toggle { min-height:32px !important;padding:5px 9px !important;border-radius:4px !important;font-size:9px !important;white-space:nowrap !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-sort { height:32px !important;display:flex !important;align-items:center !important;gap:6px !important;padding:0 7px !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#07171c !important;color:#8e9993 !important;font-size:8px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-sort select { min-width:120px !important;height:28px !important;padding:0 20px 0 3px !important;border:0 !important;background:transparent !important;color:#d0bd96 !important;font-size:9px !important;outline:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-view-toggle { display:flex !important;gap:3px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-view-toggle button { width:32px !important;height:32px !important;min-width:32px !important;padding:0 !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#07171c !important;color:#7e8882 !important;box-shadow:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-view-toggle button.active { border-color:rgba(215,162,67,.65) !important;color:#e8bd65 !important;background:rgba(104,73,28,.46) !important; }
body.skills-workspace-v101414 #activitiesPage .activity-advanced-filters { margin-top:8px !important;padding:8px !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#07171c !important; }

/* Scalable list/table */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-table-head {
  display:grid !important;
  grid-template-columns:minmax(275px,2.4fr) minmax(120px,1.05fr) 90px 100px 90px minmax(135px,1.15fr) 96px !important;
  gap:8px !important;
  align-items:center !important;
  padding:8px 13px !important;
  border-top:1px solid var(--skill-border-soft) !important;
  border-bottom:1px solid var(--skill-border-soft) !important;
  color:#9b7e49 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-list {
  display:block !important;
  padding:7px 8px 9px !important;
  margin:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .skill-activity-row {
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(275px,2.4fr) minmax(120px,1.05fr) 90px 100px 90px minmax(135px,1.15fr) 96px !important;
  gap:8px !important;
  align-items:center !important;
  min-height:58px !important;
  margin:0 0 4px !important;
  padding:7px 9px !important;
  border:1px solid rgba(162,125,59,.18) !important;
  border-radius:4px !important;
  background:linear-gradient(90deg,rgba(12,31,37,.95),rgba(8,23,28,.95)) !important;
  box-shadow:none !important;
  transition:border-color .14s ease,background .14s ease !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage .skill-activity-row:last-child { margin-bottom:0 !important; }
body.skills-workspace-v101414 #activitiesPage .skill-activity-row:hover { border-color:rgba(210,158,66,.48) !important;background:linear-gradient(90deg,rgba(16,38,43,.97),rgba(9,25,30,.97)) !important; }
body.skills-workspace-v101414 #activitiesPage .skill-activity-row.active-card { border-color:rgba(220,168,75,.78) !important;background:linear-gradient(90deg,rgba(28,50,38,.95),rgba(9,29,30,.97)) !important;box-shadow:inset 3px 0 0 rgba(223,174,76,.76) !important; }
body.skills-workspace-v101414 #activitiesPage .skill-activity-row.activity-disabled { opacity:.64 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-main { display:flex !important;align-items:center !important;gap:9px !important;min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .skill-activity-row .activity-card-ref-icon {
  width:42px !important;height:42px !important;min-width:42px !important;display:grid !important;place-items:center !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#07161b !important;
}
body.skills-workspace-v101414 #activitiesPage .skill-activity-row .activity-card-ref-icon :is(img,.jd-item-icon,.activity-item-icon-art) { width:36px !important;height:36px !important;max-width:36px !important;max-height:36px !important;object-fit:contain !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-name { min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-card-ref-title { display:flex !important;align-items:center !important;gap:5px !important;min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-card-ref-title h3 { min-width:0 !important;margin:0 !important;color:#e8e1d3 !important;font-size:11px !important;line-height:1.18 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important; }
body.skills-workspace-v101414 #activitiesPage .activity-favorite-button { width:22px !important;height:22px !important;min-width:22px !important;padding:0 !important;border:0 !important;background:transparent !important;color:#8a7c5e !important;font-size:16px !important;line-height:1 !important;box-shadow:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-favorite-button:hover,
body.skills-workspace-v101414 #activitiesPage .activity-favorite-button.active { color:#e0b65d !important; }
body.skills-workspace-v101414 #activitiesPage .activity-favorite-button.active { text-shadow:0 0 7px rgba(221,173,74,.35) !important; }
body.skills-workspace-v101414 #activitiesPage .activity-compact-meta { display:flex !important;align-items:center !important;gap:6px !important;margin-top:3px !important;color:#808983 !important;font-size:8px !important;white-space:nowrap !important;overflow:hidden !important; }
body.skills-workspace-v101414 #activitiesPage .activity-compact-meta span + span::before { content:"•";margin-right:6px;color:#5a635f !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-bonus-dot { color:#a79568 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-cell { min-width:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-cell small { display:none !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-cell strong { display:block !important;color:#c8c6bc !important;font-size:9px !important;font-weight:700 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-owned strong,
body.skills-workspace-v101414 #activitiesPage .activity-row-xp strong { color:#ddc282 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-yield strong { display:flex !important;align-items:center !important;gap:4px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-yield-icon { width:16px !important;height:16px !important;max-width:16px !important;max-height:16px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-yield-plus { color:#67716c !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-action { display:flex !important;justify-content:flex-end !important; }
body.skills-workspace-v101414 #activitiesPage .activity-card-state {
  min-width:78px !important;min-height:29px !important;display:grid !important;place-items:center !important;padding:5px 8px !important;border:1px solid rgba(132,151,91,.32) !important;border-radius:4px !important;background:#0d271f !important;color:#d9dfc4 !important;font-size:8px !important;font-weight:800 !important;text-transform:none !important;letter-spacing:.02em !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-card-state.active { border-color:rgba(191,147,57,.55) !important;background:rgba(75,61,29,.67) !important;color:#f0d495 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-card-state.blocked { border-color:rgba(92,98,93,.25) !important;background:#111d20 !important;color:#727d78 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-progress { position:absolute !important;left:9px !important;right:9px !important;bottom:3px !important;height:3px !important;border-radius:99px !important;background:#061215 !important;overflow:hidden !important; }
body.skills-workspace-v101414 #activitiesPage .activity-row-progress span { display:block !important;height:100% !important;background:linear-gradient(90deg,#b77c2b,#e0ad4e) !important; }

/* Production rows inherit exactly the same table language. */
body.skills-workspace-v101414 #activitiesPage :is(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
  display:block !important;grid-template-columns:none !important;gap:0 !important;
}
body.skills-workspace-v101414 #activitiesPage :is(.smithing-recipe-tile,.cooking-recipe-tile,.construction-recipe-tile,.apothecary-recipe-tile).skill-activity-row {
  min-height:64px !important;padding:7px 9px !important;
}
body.skills-workspace-v101414 #activitiesPage .production-row-materials { grid-column:1 / -1 !important;display:none !important;padding:5px 0 0 51px !important; }
body.skills-workspace-v101414 #activitiesPage .skill-activity-row:hover .production-row-materials,
body.skills-workspace-v101414 #activitiesPage .skill-activity-row:focus-within .production-row-materials,
body.skills-workspace-v101414 #activitiesPage .skill-activity-row.active-card .production-row-materials { display:block !important; }
body.skills-workspace-v101414 #activitiesPage .production-row-materials .production-recipe-requirements { display:flex !important;gap:5px !important;flex-wrap:wrap !important;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important; }
body.skills-workspace-v101414 #activitiesPage .production-row-materials .production-recipe-material { width:auto !important;min-width:150px !important;min-height:28px !important;padding:3px 5px !important;display:grid !important;grid-template-columns:22px minmax(55px,1fr) auto !important;gap:4px !important;border-radius:3px !important; }
body.skills-workspace-v101414 #activitiesPage .production-row-materials .production-recipe-material-icon { width:20px !important;height:20px !important; }
body.skills-workspace-v101414 #activitiesPage .production-row-materials .production-recipe-material-icon :is(img,.jd-item-icon) { width:18px !important;height:18px !important;max-width:18px !important;max-height:18px !important; }
body.skills-workspace-v101414 #activitiesPage .production-row-materials .production-recipe-material-name { font-size:8px !important; }
body.skills-workspace-v101414 #activitiesPage .production-row-materials .production-recipe-material-counts { display:flex !important;gap:5px !important;font-size:7px !important; }
body.skills-workspace-v101414 #activitiesPage :is(.smithing-recipe-board,.cooking-recipe-board,.construction-recipe-board,.apothecary-recipe-board) { border:0 !important;background:transparent !important;padding:0 !important; }
body.skills-workspace-v101414 #activitiesPage :is(.smithing-recipe-board-heading,.cooking-recipe-board-heading,.construction-recipe-board-heading,.apothecary-recipe-board-heading) { display:none !important; }
body.skills-workspace-v101414 #activitiesPage :is(.smithing-forge-workspace,.cooking-hearth-workspace,.construction-workshop-workspace,.apothecary-alchemy-workspace) { display:block !important;grid-template-columns:none !important;gap:0 !important; }
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation { margin:0 0 8px !important;padding:7px !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#08191e !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-production-active { margin:0 0 9px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-production-active .smithing-active-panel { border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#08191e !important; }

/* Grid view remains available when option counts become very large. */
body.skills-workspace-v101414 #activitiesPage:has(#activityCards.activity-workspace-grid-view) .activity-workspace-table-head { display:none !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view {
  display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;
}
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .skill-activity-row {
  grid-template-columns:minmax(0,1fr) auto !important;grid-template-rows:auto auto auto !important;gap:5px 8px !important;min-height:118px !important;margin:0 !important;padding:9px !important;
}
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-main { grid-column:1 / -1 !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-action { grid-column:2 !important;grid-row:2 / 4 !important;align-self:center !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-cell { display:flex !important;align-items:center !important;gap:5px !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-cell small { display:inline !important;color:#717d77 !important;font-size:7px !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-requirement { grid-column:1 !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view :is(.activity-row-owned,.activity-row-cycle) { grid-column:1 !important; }
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view :is(.activity-row-xp,.activity-row-yield) { grid-column:1 !important; }

/* Farming uses the same outer skill shell but keeps plot-specific controls. */
body.skills-workspace-v101414 #activitiesPage.activity-mode-farming .activity-workspace-table-head { display:none !important; }
body.skills-workspace-v101414 #activitiesPage.activity-mode-farming #activityCards { padding:0 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-farming-dashboard { margin:0 !important;padding:9px !important;border:0 !important;background:transparent !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-farming-subhead { margin:0 0 8px !important;padding:9px 10px !important;border:1px solid var(--skill-border-soft) !important;border-radius:4px !important;background:#08191e !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-farming-subhead h2 { margin:1px 0 2px !important;font-size:16px !important;color:#e5dcc8 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-farming-subhead p { margin:0 !important;color:#87918b !important;font-size:9px !important; }
body.skills-workspace-v101414 #activitiesPage .farming-stat-strip { margin-bottom:8px !important;grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
body.skills-workspace-v101414 #activitiesPage .farming-stat-strip > div { min-height:52px !important;padding:7px 8px !important; }
body.skills-workspace-v101414 #activitiesPage .farming-plot-grid { gap:6px !important; }
body.skills-workspace-v101414 #activitiesPage .farming-plot-card { border-color:var(--skill-border-soft) !important;border-radius:4px !important;background:linear-gradient(180deg,#0b1d22,#07171c) !important;box-shadow:none !important; }
body.skills-workspace-v101414 #activitiesPage .farming-seed-bag-panel,
body.skills-workspace-v101414 #activitiesPage .farming-contract-card { border-color:var(--skill-border-soft) !important;border-radius:4px !important;background:#08191e !important; }

/* Medium desktop/tablet */
@media (max-width:1180px) {
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-hero-grid { grid-template-columns:minmax(0,1fr) minmax(330px,42%) !important;gap:14px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip > div:nth-child(4) { border-right:0 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip > div:nth-child(-n+4) { border-bottom:1px solid var(--skill-border-soft) !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-toolbar { grid-template-columns:minmax(250px,1fr) minmax(170px,1fr) auto !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-sort { grid-column:2 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-view-toggle { grid-column:3 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-table-head,
  body.skills-workspace-v101414 #activitiesPage .skill-activity-row { grid-template-columns:minmax(235px,2fr) minmax(115px,1fr) 75px 85px 80px minmax(115px,1fr) 86px !important; }
}

/* Phone: same hierarchy, stacked rather than a separate visual system. */
@media (max-width:820px) {
  body.skills-workspace-v101414 #activitiesPage { padding:7px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-hero { padding:10px !important;margin-bottom:8px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-hero-grid { display:block !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-identity { gap:10px !important;align-items:flex-start !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-icon { width:54px !important;height:54px !important;min-width:54px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-icon :is(img,.jd-skill-icon,.activity-master-skill-icon-art) { width:38px !important;height:38px !important;max-width:38px !important;max-height:38px !important; }
  body.skills-workspace-v101414 #activitiesPage #activityMasterSkillName { font-size:28px !important; }
  body.skills-workspace-v101414 #activitiesPage #activityMasterSkillDescription { font-size:10px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-picker-button { max-width:100% !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-active-task { margin-top:10px !important;min-height:82px !important;grid-template-columns:40px minmax(0,1fr) auto !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-active-task .activity-global-active-icon { width:40px !important;height:40px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-active-task .activity-global-active-icon :is(img,.jd-item-icon,.jd-skill-icon) { width:34px !important;height:34px !important;max-width:34px !important;max-height:34px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-global-active-view,
  body.skills-workspace-v101414 #activitiesPage .activity-global-active-stop { grid-column:3 !important;grid-row:1 / 3 !important;min-width:62px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-panel { margin-bottom:8px !important;overflow-x:auto !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip { display:flex !important;min-width:max-content !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip > div { width:128px !important;min-height:58px !important;padding:7px 8px !important;border-bottom:0 !important;border-right:1px solid var(--skill-border-soft) !important;grid-template-columns:28px 90px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-stat-icon { width:25px !important;height:25px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-browser-heading { padding:8px 8px 3px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-browse-controls.activity-workspace-controls { padding:5px 6px 7px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-toolbar { display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:5px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-main-filters { grid-column:1 / -1 !important;overflow:auto !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-search { grid-column:1 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-filter-toggle { grid-column:2 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-sort { grid-column:1 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-view-toggle { grid-column:2 !important;justify-self:end !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-table-head { display:none !important; }
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-list { padding:5px !important; }
  body.skills-workspace-v101414 #activitiesPage .skill-activity-row,
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .skill-activity-row {
    display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-rows:auto auto auto auto !important;gap:5px 7px !important;min-height:0 !important;padding:7px !important;margin:0 0 5px !important;
  }
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view { display:block !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-main,
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-main { grid-column:1 !important;grid-row:1 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-action,
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .activity-row-action { grid-column:2 !important;grid-row:1 !important;align-self:center !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-requirement { grid-column:1 / -1 !important;grid-row:2 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-requirement small { display:inline !important;margin-right:4px !important;color:#6f7974 !important;font-size:7px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-requirement strong { display:inline !important;font-size:8px !important; }
  body.skills-workspace-v101414 #activitiesPage :is(.activity-row-owned,.activity-row-xp,.activity-row-cycle,.activity-row-yield) { grid-row:auto !important;grid-column:auto !important;display:flex !important;align-items:center !important;gap:4px !important;min-width:0 !important;padding:3px 5px !important;border:1px solid rgba(151,118,58,.13) !important;border-radius:3px !important;background:rgba(5,17,21,.4) !important; }
  body.skills-workspace-v101414 #activitiesPage :is(.activity-row-owned,.activity-row-xp,.activity-row-cycle,.activity-row-yield) small { display:inline !important;color:#6f7974 !important;font-size:7px !important; }
  body.skills-workspace-v101414 #activitiesPage :is(.activity-row-owned,.activity-row-xp,.activity-row-cycle,.activity-row-yield) strong { font-size:8px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-owned { grid-column:1 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-xp { grid-column:2 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-cycle { grid-column:1 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-yield { grid-column:2 !important; }
  body.skills-workspace-v101414 #activitiesPage .production-row-materials { grid-column:1 / -1 !important;padding-left:0 !important; }
  body.skills-workspace-v101414 #activitiesPage .farming-stat-strip { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width:520px) {
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-switch-affordance { display:none !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-stat-strip > div { width:116px !important;grid-template-columns:25px 78px !important; }
  body.skills-workspace-v101414 #activitiesPage .skill-activity-row .activity-card-ref-icon { width:36px !important;height:36px !important;min-width:36px !important; }
  body.skills-workspace-v101414 #activitiesPage .skill-activity-row .activity-card-ref-icon :is(img,.jd-item-icon,.activity-item-icon-art) { width:31px !important;height:31px !important;max-width:31px !important;max-height:31px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-card-state { min-width:62px !important;font-size:7px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-row-yield span { max-width:72px !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important; }
}
/* Specificity closures against historical !important skill/activity skins. */
body.skills-workspace-v101414.den-skills-modern-v101383 #activitiesPage #activitySkillTabs.activity-workspace-legacy-skill-tabs,
body.skills-workspace-v101414.skills-active-clarity-phase4-v101236 #activitiesPage #activitySkillTabs.activity-workspace-legacy-skill-tabs { display:none !important; }
body.skills-workspace-v101414.activities-simplification-v101155 #activitiesPage .activity-click-card.skill-activity-row,
body.skills-workspace-v101414.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card.skill-activity-row {
  display:grid !important;
  grid-template-columns:minmax(275px,2.4fr) minmax(120px,1.05fr) 90px 100px 90px minmax(135px,1.15fr) 96px !important;
  gap:8px !important;
  min-height:58px !important;
  padding:7px 9px !important;
}
@media (max-width:1180px) {
  body.skills-workspace-v101414.activities-simplification-v101155 #activitiesPage .activity-click-card.skill-activity-row,
  body.skills-workspace-v101414.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card.skill-activity-row {
    grid-template-columns:minmax(235px,2fr) minmax(115px,1fr) 75px 85px 80px minmax(115px,1fr) 86px !important;
  }
}
@media (max-width:820px) {
  body.skills-workspace-v101414.activities-simplification-v101155 #activitiesPage .activity-click-card.skill-activity-row,
  body.skills-workspace-v101414.den-skills-modern-v101383 #activitiesPage .activity-card-grid .card.skill-activity-row {
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto auto auto !important;
    min-height:0 !important;
    padding:7px !important;
  }
}

/* V1.01.414 production compatibility closure.
   Historical production skins force every recipe back into their old
   34px / copy / state card. The scalable Skills workspace owns the final
   layout whenever a production tile opts into production-skill-activity-row. */
body.skills-workspace-v101414 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
body.skills-workspace-v101414.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
body.skills-workspace-v101414.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
body.skills-workspace-v101414.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
body.skills-workspace-v101414.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row {
  display:grid !important;
  grid-template-columns:minmax(275px,2.4fr) minmax(120px,1.05fr) 90px 100px 90px minmax(135px,1.15fr) 96px !important;
  grid-template-rows:auto !important;
  align-content:center !important;
  align-items:center !important;
  justify-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:64px !important;
  padding:7px 9px !important;
  margin:0 0 4px !important;
  overflow:hidden !important;
  border-radius:4px !important;
}

body.skills-workspace-v101414 #activitiesPage :is(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid),
body.skills-workspace-v101414.production-recipe-details-v101263 #activitiesPage :is(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  width:100% !important;
  min-width:0 !important;
}

/* The item icon is nested inside the new first-column activity cell, so old
   direct-grid placement must not pull it out of that cell. */
body.skills-workspace-v101414.production-recipe-details-v101263 #activitiesPage .production-skill-activity-row .smithing-recipe-tile-icon {
  grid-column:auto !important;
  grid-row:auto !important;
  align-self:auto !important;
  width:42px !important;
  height:42px !important;
}

/* Grid view applies to the nested production recipe grids too. */
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view :is(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:6px !important;
}
body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row {
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto auto auto !important;
  min-height:118px !important;
  margin:0 !important;
  padding:9px !important;
}

@media (max-width:1180px) {
  body.skills-workspace-v101414 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row {
    grid-template-columns:minmax(235px,2fr) minmax(115px,1fr) 75px 85px 80px minmax(115px,1fr) 86px !important;
  }
}

@media (max-width:820px) {
  body.skills-workspace-v101414 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414.production-ui-hardening-v101262 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414.production-recipe-details-v101263 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414.smithing-recipe-selection-v101154 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414.production-activity-layout-fix-v101156 #activitiesPage .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row,
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view .smithing-recipe-tile.smithing-recipe-row.production-skill-activity-row {
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto auto auto !important;
    align-content:start !important;
    min-height:0 !important;
    padding:7px !important;
  }
  body.skills-workspace-v101414 #activitiesPage #activityCards.activity-workspace-grid-view :is(.smithing-recipe-grid,.cooking-recipe-grid,.construction-recipe-grid,.apothecary-recipe-grid) {
    display:block !important;
  }
}

/* V1.01.414 production navigation consolidation.
   The shared workspace already owns skill identity, level and XP. Production
   modules keep only their useful category/tier browsing controls. */
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:6px !important;
  margin:0 0 8px !important;
  padding:6px 7px !important;
  min-height:0 !important;
  border:1px solid var(--skill-border-soft) !important;
  border-radius:4px !important;
  background:#08191e !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation[hidden] { display:none !important; }
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation .smithing-forge-head,
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation .smithing-forge-xp { display:none !important; }
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-category-nav,.cooking-category-nav,.construction-category-nav,.apothecary-category-nav) {
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
  overflow-x:auto !important;
  scrollbar-width:thin;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-nav-tab,.cooking-nav-tab,.construction-nav-tab,.apothecary-nav-tab) {
  flex:0 0 auto !important;
  min-width:88px !important;
  min-height:34px !important;
  padding:5px 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border-radius:3px !important;
  font-size:8px !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-nav-tab,.cooking-nav-tab,.construction-nav-tab,.apothecary-nav-tab) small {
  display:inline-grid !important;
  place-items:center !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 4px !important;
  border-radius:99px !important;
  background:rgba(255,255,255,.04) !important;
  font-size:7px !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-tier-navigation,.cooking-tier-navigation,.construction-tier-navigation,.apothecary-tier-navigation) {
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation .smithing-tier-heading {
  flex:0 0 auto !important;
  min-width:78px !important;
  margin:0 !important;
  padding:0 5px !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation .smithing-tier-heading span {
  display:block !important;
  color:#b89047 !important;
  font-size:7px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation .smithing-tier-heading small {
  display:block !important;
  margin-top:2px !important;
  color:#71807a !important;
  font-size:7px !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-tier-nav,.cooking-tier-nav,.construction-tier-nav,.apothecary-tier-nav) {
  display:flex !important;
  flex:1 1 auto !important;
  align-items:center !important;
  gap:4px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:auto !important;
  scrollbar-width:thin;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-tier-tab,.cooking-tier-tab,.construction-tier-tab,.apothecary-tier-tab) {
  flex:0 0 auto !important;
  min-width:72px !important;
  min-height:32px !important;
  padding:4px 7px !important;
  border-radius:3px !important;
  font-size:8px !important;
}
body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-tier-tab,.cooking-tier-tab,.construction-tier-tab,.apothecary-tier-tab) small {
  margin-top:1px !important;
  font-size:6px !important;
}
body.skills-workspace-v101414 #activitiesPage :is(.smithing-forge-workspace,.cooking-hearth-workspace,.construction-workshop-workspace,.apothecary-alchemy-workspace) .smithing-active-panel.empty {
  display:none !important;
}

@media (max-width:820px) {
  body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation { padding:5px !important;gap:5px !important; }
  body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-tier-navigation,.cooking-tier-navigation,.construction-tier-navigation,.apothecary-tier-navigation) { display:block !important; }
  body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation .smithing-tier-heading { display:none !important; }
  body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-nav-tab,.cooking-nav-tab,.construction-nav-tab,.apothecary-nav-tab) { min-width:76px !important;min-height:32px !important;padding:4px 7px !important; }
  body.skills-workspace-v101414 #activitiesPage .smithing-forge-navigation :is(.smithing-tier-tab,.cooking-tier-tab,.construction-tier-tab,.apothecary-tier-tab) { min-width:68px !important;min-height:30px !important; }
}

/* V1.01.414 Farming ownership closure.
   V1.01.340 intentionally restored the old 208px desktop skill navigator. That
   navigator no longer exists in the scalable workspace, so Farming must not
   retain its two-column shell or hide the shared stat strip. */
body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-layout.activity-workspace-layout,
body.skills-workspace-v101414.farming-recovery-v101340.fresh-premium-v101163 #activitiesPage.activity-mode-farming .activity-layout.activity-workspace-layout {
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  width:100% !important;
  max-width:100% !important;
}
body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-content,
body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activityCards.farming-activity-root,
body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-dashboard,
body.skills-workspace-v101414.production-farming-layout-phase2-v101244 #activitiesPage.activity-mode-farming #activityCards.farming-activity-root {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-dashboard {
  display:grid !important;
  gap:10px !important;
}
body.skills-workspace-v101414.fresh-premium-exact-phase3-v101166.skill-activity-compact-header-v101263 #activitiesPage.activity-mode-farming #activityExactOverview.fresh-activity-overview.activity-workspace-stat-panel,
body.skills-workspace-v101414.fresh-premium-exact-phase3-v101166 #activitiesPage.activity-mode-farming #activityExactOverview.activity-workspace-stat-panel,
body.skills-workspace-v101414.skill-activity-compact-header-v101263 #activitiesPage.activity-mode-farming #activityExactOverview.activity-workspace-stat-panel {
  display:block !important;
  width:100% !important;
  margin:0 0 14px !important;
  padding:0 !important;
}
body.skills-workspace-v101414 #activitiesPage.activity-mode-farming #activityExactOverview .activity-workspace-stat-strip {
  display:grid !important;
  grid-template-columns:repeat(7,minmax(0,1fr)) !important;
}
body.skills-workspace-v101414 #activitiesPage.activity-mode-farming .activity-workspace-browser {
  width:100% !important;
  min-width:0 !important;
}
body.skills-workspace-v101414 #activitiesPage.activity-mode-farming #activityCards.farming-activity-root {
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

@media (max-width:820px) {
  body.skills-workspace-v101414 #activitiesPage.activity-mode-farming #activityExactOverview .activity-workspace-stat-strip {
    display:flex !important;
    min-width:max-content !important;
  }
  body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming .activity-content,
  body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming #activityCards.farming-activity-root,
  body.skills-workspace-v101414.farming-recovery-v101340 #activitiesPage.activity-mode-farming .farming-dashboard {
    width:100% !important;
  }
}

/* V1.01.414 shared skill switcher: the former mobile drawer is now the
   universal skill picker. Older bundle CSS hid it above 760px; the workspace
   intentionally exposes it on every viewport when opened. */
body.skills-workspace-v101414 .mobile-activity-skill-picker[hidden] {
  display:none !important;
}
body.skills-workspace-v101414.activity-skill-picker-open .mobile-activity-skill-picker:not([hidden]) {
  display:flex !important;
}

/* V1.01.415 — visible scalable skill rail.
   Replaces the easy-to-miss inline Switch control with direct navigation. */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-rail-shell {
  display:flex !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  margin:0 0 14px !important;
  padding:7px !important;
  border:1px solid var(--skill-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(9,25,30,.98),rgba(6,18,22,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 8px 22px rgba(0,0,0,.12) !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail {
  display:flex !important;
  flex:1 1 auto !important;
  align-items:stretch !important;
  gap:7px !important;
  min-width:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(205,157,76,.45) transparent !important;
  scroll-behavior:smooth !important;
  overscroll-behavior-inline:contain !important;
  -webkit-overflow-scrolling:touch !important;
  padding:1px 1px 3px !important;
}
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail::-webkit-scrollbar { height:4px !important; }
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail::-webkit-scrollbar-track { background:transparent !important; }
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail::-webkit-scrollbar-thumb { background:rgba(205,157,76,.38) !important;border-radius:99px !important; }
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button,
body.skills-workspace-v101414 #activitiesPage .activity-workspace-all-skills-button {
  position:relative !important;
  min-height:44px !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:7px 13px !important;
  border:1px solid rgba(176,130,56,.29) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(13,32,37,.96),rgba(8,22,27,.96)) !important;
  color:#d8d2c5 !important;
  font-size:11px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button:hover,
body.skills-workspace-v101414 #activitiesPage .activity-workspace-all-skills-button:hover {
  border-color:rgba(220,169,77,.58) !important;
  background:linear-gradient(180deg,rgba(18,42,45,.98),rgba(10,27,31,.98)) !important;
  color:#f0dfbd !important;
  transform:translateY(-1px) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button.active {
  border-color:rgba(229,178,78,.82) !important;
  background:linear-gradient(180deg,rgba(31,60,47,.96),rgba(14,40,34,.96)) !important;
  color:#f2ead8 !important;
  box-shadow:inset 0 0 0 1px rgba(191,151,68,.18),0 0 14px rgba(176,130,56,.08) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button.active::after {
  content:"" !important;
  position:absolute !important;
  left:17px !important;
  right:17px !important;
  bottom:-1px !important;
  height:2px !important;
  border-radius:99px !important;
  background:#d7a94c !important;
  box-shadow:0 0 8px rgba(215,169,76,.38) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button.skill-locked {
  opacity:.53 !important;
  filter:saturate(.58) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button.skill-locked:hover { opacity:.72 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-icon {
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 24px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-icon :is(img,.jd-skill-icon,.activity-skill-rail-icon-art) {
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  object-fit:contain !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-lock { font-size:9px !important;opacity:.72 !important; }
body.skills-workspace-v101414 #activitiesPage .activity-workspace-all-skills-button {
  flex:0 0 auto !important;
  border-color:rgba(199,151,67,.42) !important;
  color:#e1d2b5 !important;
  padding-inline:14px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-all-skills-icon {
  width:20px !important;
  height:20px !important;
  display:grid !important;
  place-items:center !important;
  color:#d8ac5a !important;
  font-size:16px !important;
}
/* The old inline picker button no longer owns header navigation. */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-tags .activity-workspace-skill-picker-button { display:none !important; }

@media (max-width:820px) {
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-rail-shell {
    margin:0 0 10px !important;
    padding:5px !important;
    gap:5px !important;
  }
  body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail {
    gap:5px !important;
    padding-bottom:2px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-button,
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-all-skills-button {
    min-height:40px !important;
    padding:6px 10px !important;
    gap:6px !important;
    font-size:10px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-icon {
    width:21px !important;height:21px !important;flex-basis:21px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-icon :is(img,.jd-skill-icon,.activity-skill-rail-icon-art) {
    width:19px !important;height:19px !important;max-width:19px !important;max-height:19px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-all-skills-button {
    position:sticky !important;
    right:0 !important;
    z-index:2 !important;
    box-shadow:-10px 0 14px rgba(6,18,22,.92),inset 0 1px 0 rgba(255,255,255,.018) !important;
  }
}

/* V1.01.415 legacy skill-tab geometry reset.
   Older repair layers forced every #activitySkillTabs child to width:100% and
   display:grid; the rail intentionally owns those direct children now. */
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail > button.activity-skill-rail-button {
  display:inline-flex !important;
  grid-template-columns:none !important;
  width:auto !important;
  min-width:max-content !important;
  max-width:none !important;
  min-height:44px !important;
  height:auto !important;
  padding:7px 13px !important;
  text-align:center !important;
  overflow:visible !important;
  writing-mode:horizontal-tb !important;
}
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail > button.activity-skill-rail-button::before {
  display:none !important;
  content:none !important;
}
@media (max-width:820px) {
  body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail > button.activity-skill-rail-button {
    min-height:40px !important;
    padding:6px 10px !important;
  }
}

/* Compact enough to expose the full current skill set on normal desktop widths;
   future additions still use horizontal overflow rather than wrapping. */
body.skills-workspace-v101414 #activitiesPage #activitySkillTabs.activity-workspace-skill-rail > button.activity-skill-rail-button {
  min-height:40px !important;
  padding:6px 8px !important;
  gap:5px !important;
  font-size:10px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-icon {
  width:20px !important;
  height:20px !important;
  flex-basis:20px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-icon :is(img,.jd-skill-icon,.activity-skill-rail-icon-art) {
  width:19px !important;
  height:19px !important;
  max-width:19px !important;
  max-height:19px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-rail-lock {
  position:absolute !important;
  top:4px !important;
  right:4px !important;
  font-size:7px !important;
}

/* V1.01.416 — contextual skill progression panel.
   Keeps training as the primary workspace while levels/unlocks/mastery are one
   obvious click away on the left. The V1.01.415 rail is retained only as a
   hidden compatibility host for existing rendering logic. */
body.skills-workspace-v101414 #activitiesPage .activity-skill-context-layout {
  display:grid !important;
  grid-template-columns:250px minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  min-width:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-main-workspace {
  min-width:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-context-panel {
  position:sticky !important;
  top:10px !important;
  z-index:3 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
  padding:9px !important;
  border:1px solid var(--skill-border) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(9,25,30,.99),rgba(6,18,22,.99)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 12px 28px rgba(0,0,0,.16) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-card {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
  padding:13px 12px 12px !important;
  border:1px solid rgba(176,130,56,.24) !important;
  border-radius:5px !important;
  background:
    radial-gradient(circle at 50% 12%,rgba(50,91,69,.18),transparent 42%),
    linear-gradient(180deg,rgba(13,34,39,.98),rgba(8,22,27,.98)) !important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.16) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon {
  width:82px !important;
  height:82px !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  margin:0 0 1px !important;
  border:1px solid rgba(218,161,66,.62) !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(37,70,61,.75),rgba(8,22,26,.96) 68%) !important;
  box-shadow:inset 0 0 0 7px rgba(190,137,47,.05),0 0 18px rgba(196,143,48,.08) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon :is(img,.jd-skill-icon,.activity-context-skill-icon-art) {
  width:52px !important;
  height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:contain !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-heading {
  text-align:center !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-heading .eyebrow {
  color:#b98a3c !important;
  font-size:8px !important;
}
body.skills-workspace-v101414 #activitiesPage #activityContextSkillName {
  margin:2px 0 0 !important;
  color:#ebddc2 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:18px !important;
  line-height:1.05 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-level {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:0 !important;
  margin-top:1px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-level small {
  color:#989f99 !important;
  font-size:9px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-level strong {
  color:#f0e1c5 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:30px !important;
  line-height:1 !important;
  font-weight:500 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-progress {
  height:7px !important;
  margin:2px 4px 0 !important;
  border:1px solid rgba(169,126,51,.24) !important;
  border-radius:99px !important;
  background:#061116 !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-progress > span {
  display:block !important;
  width:0;
  height:100% !important;
  border-radius:inherit !important;
  background:linear-gradient(90deg,#b77e2c,#e0ac50) !important;
  box-shadow:0 0 10px rgba(214,164,75,.22) !important;
  transition:width .2s linear !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-progress-text {
  min-height:14px !important;
  color:#a59f91 !important;
  font-size:9px !important;
  text-align:center !important;
  line-height:1.35 !important;
}
/* V1.01.417 — duplicate the skill selector into the left context card so
   switching is discoverable exactly where players read level progress. */
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch {
  width:100% !important;
  min-height:54px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 22px !important;
  gap:8px !important;
  align-items:center !important;
  margin:4px 0 1px !important;
  padding:9px 10px !important;
  border:1px solid rgba(188,139,55,.43) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,35,39,.98),rgba(8,23,28,.98)) !important;
  color:#eadfc9 !important;
  text-align:left !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 6px 16px rgba(0,0,0,.11) !important;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch:hover,
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch[aria-expanded="true"] {
  border-color:rgba(224,172,78,.72) !important;
  background:linear-gradient(180deg,rgba(22,47,47,.99),rgba(11,31,33,.99)) !important;
  box-shadow:inset 0 0 0 1px rgba(224,172,78,.05),0 8px 20px rgba(0,0,0,.16) !important;
  transform:translateY(-1px) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch-copy {
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch-copy strong {
  color:#eee1c9 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:13px !important;
  line-height:1.1 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch-copy small {
  overflow:hidden !important;
  color:#9ca49e !important;
  font-size:8px !important;
  line-height:1.15 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch-copy small b {
  color:#d7c6a7 !important;
  font-weight:700 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch-chevron {
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  color:#d4a54f !important;
  font-size:15px !important;
  transition:transform .15s ease !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch[aria-expanded="true"] .activity-context-skill-switch-chevron {
  transform:rotate(180deg) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats {
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin:3px 0 0 !important;
  padding:0 !important;
  border-top:1px solid rgba(176,130,56,.16) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats > div {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(76px,auto) !important;
  gap:8px !important;
  align-items:center !important;
  min-height:39px !important;
  padding:7px 2px !important;
  border-bottom:1px solid rgba(176,130,56,.13) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dt {
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  color:#9ca39d !important;
  font-size:9px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dt > span {
  width:21px !important;
  height:21px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 21px !important;
  border:1px solid rgba(203,153,65,.35) !important;
  border-radius:50% !important;
  color:#c99b49 !important;
  font-size:7px !important;
  font-weight:800 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dd {
  margin:0 !important;
  min-width:0 !important;
  color:#e6d8bd !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-align:right !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dd strong,
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dd small {
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dd strong {
  color:#e8ca84 !important;
  font-size:9px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-stats dd small {
  margin-top:2px !important;
  color:#858e89 !important;
  font-size:8px !important;
  font-weight:500 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-actions {
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action {
  width:100% !important;
  min-height:58px !important;
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 12px !important;
  gap:9px !important;
  align-items:center !important;
  padding:8px 9px !important;
  border:1px solid rgba(176,130,56,.24) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(13,31,36,.96),rgba(8,22,27,.96)) !important;
  color:#d8cdb8 !important;
  text-align:left !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
  transition:border-color .15s ease,background .15s ease,transform .15s ease !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action:hover {
  border-color:rgba(218,164,72,.58) !important;
  background:linear-gradient(180deg,rgba(20,42,43,.98),rgba(10,29,31,.98)) !important;
  transform:translateY(-1px) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action.featured {
  border-color:rgba(204,160,70,.62) !important;
  background:linear-gradient(180deg,rgba(31,63,47,.90),rgba(13,40,34,.94)) !important;
  box-shadow:inset 0 0 0 1px rgba(173,213,91,.08),0 0 14px rgba(112,151,61,.07) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action-icon {
  width:32px !important;
  height:32px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(202,152,65,.35) !important;
  border-radius:50% !important;
  color:#d2a14e !important;
  font-size:15px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action > span:nth-child(2) {
  display:flex !important;
  min-width:0 !important;
  flex-direction:column !important;
  gap:2px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action strong {
  color:#eadfc9 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:11px !important;
  line-height:1.1 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action small {
  overflow:hidden !important;
  color:#88938d !important;
  font-size:8px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-action > b {
  color:#c99b49 !important;
  font-size:18px !important;
  font-weight:400 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-skill-context-panel.skill-locked .activity-context-skill-card {
  filter:saturate(.58) !important;
}

/* Prominent compact skill switcher stays in the header instead of consuming an
   entire row. It reuses the existing picker and is always discoverable. */
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch {
  min-height:31px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:4px 7px 4px 5px !important;
  border:1px solid rgba(176,130,56,.31) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,rgba(13,31,36,.98),rgba(8,22,27,.98)) !important;
  color:#ddd0b8 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch:hover {
  border-color:rgba(218,164,72,.58) !important;
  background:linear-gradient(180deg,rgba(19,42,43,.98),rgba(10,28,31,.98)) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-icon {
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 22px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-icon :is(img,.jd-skill-icon,.mobile-activity-skill-icon-art) {
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  object-fit:contain !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-copy {
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:5px !important;
  min-width:0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-copy strong {
  color:#eadcbf !important;
  font-size:9px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-copy small {
  color:#8c9690 !important;
  font-size:8px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-label {
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  padding-left:6px !important;
  border-left:1px solid rgba(176,130,56,.17) !important;
  color:#c99945 !important;
  font-size:8px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-compat {
  display:none !important;
}
body.skills-workspace-v101414 #activitiesPage #mobileSkillTrainingSummary {
  display:none !important;
}

@media (max-width:1180px) and (min-width:901px) {
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-layout {
    grid-template-columns:218px minmax(0,1fr) !important;
    gap:9px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-panel { padding:7px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-card { padding:11px 9px 10px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon { width:68px !important;height:68px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon :is(img,.jd-skill-icon,.activity-context-skill-icon-art) { width:43px !important;height:43px !important;max-width:43px !important;max-height:43px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action { min-height:52px !important;grid-template-columns:29px minmax(0,1fr) 10px !important;gap:7px !important;padding:7px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action-icon { width:27px !important;height:27px !important;font-size:13px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-hero-grid { grid-template-columns:minmax(0,1fr) minmax(320px,43%) !important;gap:12px !important; }
}

@media (max-width:900px) {
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-layout {
    display:block !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-panel {
    position:static !important;
    margin:0 0 10px !important;
    padding:7px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-card {
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) auto !important;
    grid-template-rows:auto auto auto !important;
    gap:5px 9px !important;
    align-items:center !important;
    padding:9px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon {
    grid-row:1 / 4 !important;
    width:54px !important;height:54px !important;margin:0 !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon :is(img,.jd-skill-icon,.activity-context-skill-icon-art) { width:35px !important;height:35px !important;max-width:35px !important;max-height:35px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-heading { text-align:left !important; }
  body.skills-workspace-v101414 #activitiesPage #activityContextSkillName { font-size:15px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-level { grid-column:3 !important;grid-row:1 / 3 !important;align-self:center !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-level strong { font-size:25px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-progress { grid-column:2 / 4 !important;grid-row:2 !important;width:100% !important;margin:1px 0 0 !important;height:6px !important;align-self:end !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-progress-text { grid-column:2 / 4 !important;grid-row:3 !important;text-align:left !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch { grid-column:1 / 4 !important;grid-row:4 !important;min-height:45px !important;margin:2px 0 0 !important;padding:7px 9px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-switch-copy strong { font-size:11px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-stats { display:none !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-actions {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(125px,1fr)) !important;
    gap:6px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    scrollbar-width:none !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-actions::-webkit-scrollbar { display:none !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action {
    min-width:125px !important;
    min-height:47px !important;
    grid-template-columns:25px minmax(0,1fr) 8px !important;
    gap:6px !important;
    padding:6px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action-icon { width:24px !important;height:24px !important;font-size:11px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action small { font-size:7px !important; }
}

@media (max-width:560px) {
  body.skills-workspace-v101414 #activitiesPage .activity-context-actions { grid-template-columns:repeat(4,minmax(116px,1fr)) !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action { min-width:116px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-copy { flex-direction:column !important;align-items:flex-start !important;gap:0 !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch-label { padding-left:4px !important; }
}

/* V1.01.416 on-demand progression drawer. The contextual buttons open this
   only when requested so training stays visually quiet. */
body.skills-workspace-v101414.activity-skill-info-open { overflow:hidden !important; }
body.skills-workspace-v101414 .activity-skill-info-modal[hidden] { display:none !important; }
body.skills-workspace-v101414 .activity-skill-info-modal {
  position:fixed !important;
  inset:0 !important;
  z-index:3600 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(380px,470px) !important;
  pointer-events:auto !important;
}
body.skills-workspace-v101414 .activity-skill-info-backdrop {
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:rgba(2,8,11,.64) !important;
  backdrop-filter:blur(2px) !important;
}
body.skills-workspace-v101414 .activity-skill-info-panel {
  grid-column:2 !important;
  grid-row:1 !important;
  position:relative !important;
  min-width:0 !important;
  height:100dvh !important;
  display:grid !important;
  grid-template-rows:auto auto minmax(0,1fr) !important;
  border-left:1px solid rgba(202,151,64,.48) !important;
  background:
    radial-gradient(circle at 50% 0,rgba(44,78,61,.15),transparent 26%),
    linear-gradient(180deg,#0b1d22,#071419 72%) !important;
  box-shadow:-18px 0 44px rgba(0,0,0,.38),inset 1px 0 0 rgba(255,255,255,.02) !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 .activity-skill-info-header {
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) 36px !important;
  gap:11px !important;
  align-items:center !important;
  padding:17px 16px 14px !important;
  border-bottom:1px solid rgba(176,130,56,.22) !important;
}
body.skills-workspace-v101414 .activity-skill-info-icon {
  width:52px !important;
  height:52px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(211,159,66,.52) !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(39,73,62,.72),rgba(8,22,27,.96)) !important;
}
body.skills-workspace-v101414 .activity-skill-info-icon :is(img,.jd-skill-icon,.activity-skill-info-icon-art) {
  width:34px !important;height:34px !important;max-width:34px !important;max-height:34px !important;object-fit:contain !important;
}
body.skills-workspace-v101414 .activity-skill-info-header .eyebrow { color:#b98a3c !important;font-size:8px !important; }
body.skills-workspace-v101414 #activitySkillInfoTitle {
  margin:2px 0 1px !important;
  color:#efe2ca !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:23px !important;
  line-height:1 !important;
}
body.skills-workspace-v101414 #activitySkillInfoLevel { color:#919a94 !important;font-size:9px !important; }
body.skills-workspace-v101414 .activity-skill-info-close {
  width:34px !important;height:34px !important;display:grid !important;place-items:center !important;padding:0 !important;
  border:1px solid rgba(176,130,56,.28) !important;border-radius:4px !important;background:#09181d !important;color:#d2a14e !important;font-size:21px !important;font-weight:400 !important;
}
body.skills-workspace-v101414 .activity-skill-info-tabs {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  padding:8px 10px !important;
  gap:5px !important;
  border-bottom:1px solid rgba(176,130,56,.18) !important;
  background:rgba(5,16,20,.82) !important;
}
body.skills-workspace-v101414 .activity-skill-info-tabs button {
  min-height:34px !important;
  padding:6px 5px !important;
  border:1px solid rgba(176,130,56,.20) !important;
  border-radius:4px !important;
  background:#091b20 !important;
  color:#959d98 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;
}
body.skills-workspace-v101414 .activity-skill-info-tabs button.active {
  border-color:rgba(213,166,75,.65) !important;
  background:linear-gradient(180deg,rgba(33,61,47,.94),rgba(14,39,34,.94)) !important;
  color:#ead8b6 !important;
}
body.skills-workspace-v101414 .activity-skill-info-content {
  min-height:0 !important;
  padding:12px !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(205,157,76,.40) transparent !important;
}
body.skills-workspace-v101414 .activity-skill-info-level-hero {
  padding:16px !important;
  border:1px solid rgba(176,130,56,.25) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(15,37,41,.98),rgba(8,23,27,.98)) !important;
  text-align:center !important;
}
body.skills-workspace-v101414 .activity-skill-info-level-hero > small { display:block !important;color:#969e98 !important;font-size:9px !important; }
body.skills-workspace-v101414 .activity-skill-info-level-hero > strong { display:block !important;margin:2px 0 !important;color:#f0dfbf !important;font-family:Georgia,"Times New Roman",serif !important;font-size:42px !important;font-weight:500 !important;line-height:1 !important; }
body.skills-workspace-v101414 .activity-skill-info-level-hero > span { display:block !important;color:#9d9687 !important;font-size:9px !important; }
body.skills-workspace-v101414 .activity-skill-info-progress { height:7px !important;margin:10px auto 0 !important;border:1px solid rgba(176,130,56,.23) !important;border-radius:99px !important;background:#061116 !important;overflow:hidden !important; }
body.skills-workspace-v101414 .activity-skill-info-progress > span { display:block !important;height:100% !important;background:linear-gradient(90deg,#b97e2c,#e0ae52) !important;border-radius:inherit !important; }
body.skills-workspace-v101414 .activity-skill-info-summary-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:9px !important;
}
body.skills-workspace-v101414 .activity-skill-info-summary-grid article {
  min-height:78px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
  padding:11px !important;
  border:1px solid rgba(176,130,56,.21) !important;
  border-radius:5px !important;
  background:#091b20 !important;
}
body.skills-workspace-v101414 .activity-skill-info-summary-grid small { color:#86918b !important;font-size:8px !important;text-transform:uppercase !important;letter-spacing:.06em !important; }
body.skills-workspace-v101414 .activity-skill-info-summary-grid strong { color:#e9d9bb !important;font-size:12px !important;line-height:1.25 !important; }
body.skills-workspace-v101414 .activity-skill-info-summary-grid span { color:#928a79 !important;font-size:8px !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-list,
body.skills-workspace-v101414 .activity-skill-info-milestones,
body.skills-workspace-v101414 .activity-skill-info-mastery-list {
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}
body.skills-workspace-v101414 .activity-skill-info-unlock-row {
  display:grid !important;
  grid-template-columns:38px 36px minmax(0,1fr) 24px !important;
  gap:9px !important;
  align-items:center !important;
  min-height:60px !important;
  padding:8px 9px !important;
  border:1px solid rgba(176,130,56,.20) !important;
  border-radius:5px !important;
  background:#091a1f !important;
}
body.skills-workspace-v101414 .activity-skill-info-unlock-row.unlocked { border-color:rgba(125,173,65,.45) !important;background:linear-gradient(180deg,rgba(17,43,34,.88),rgba(9,28,26,.92)) !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-row.locked { opacity:.62 !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-level {
  width:36px !important;height:36px !important;display:grid !important;place-items:center !important;border:1px solid rgba(197,150,65,.38) !important;border-radius:50% !important;color:#e0c17e !important;font-size:10px !important;font-weight:800 !important;
}
body.skills-workspace-v101414 .activity-skill-info-unlock-row.unlocked .activity-skill-info-unlock-level { border-color:rgba(129,183,66,.64) !important;color:#b7dc73 !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-icon { width:34px !important;height:34px !important;display:grid !important;place-items:center !important;border:1px solid rgba(176,130,56,.17) !important;border-radius:4px !important;background:#06161a !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-icon :is(img,.jd-item-icon,.skill-activity-item-icon-art) { width:29px !important;height:29px !important;max-width:29px !important;max-height:29px !important;object-fit:contain !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-row div strong { display:block !important;color:#e6d8bd !important;font-size:10px !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-row div small { display:block !important;margin-top:2px !important;color:#828d87 !important;font-size:8px !important; }
body.skills-workspace-v101414 .activity-skill-info-unlock-row > b { color:#8eba4b !important;text-align:center !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone {
  display:grid !important;
  grid-template-columns:58px minmax(0,1fr) 20px !important;
  gap:10px !important;
  align-items:center !important;
  min-height:72px !important;
  padding:9px !important;
  border:1px solid rgba(176,130,56,.20) !important;
  border-radius:5px !important;
  background:#091a1f !important;
}
body.skills-workspace-v101414 .activity-skill-info-milestone.reached { border-color:rgba(125,173,65,.42) !important;background:linear-gradient(180deg,rgba(17,42,34,.88),rgba(9,27,25,.92)) !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone.locked { opacity:.68 !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone > span { width:54px !important;height:54px !important;display:grid !important;place-items:center !important;align-content:center !important;border:1px solid rgba(197,150,65,.34) !important;border-radius:50% !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone > span small { color:#8d948e !important;font-size:6px !important;letter-spacing:.08em !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone > span strong { color:#e0c07d !important;font-size:16px !important;line-height:1 !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone div strong { display:block !important;color:#e5d7bd !important;font-size:10px !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone div small { display:block !important;margin-top:3px !important;color:#909993 !important;font-size:8px !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone div em { display:block !important;margin-top:3px !important;color:#b28b48 !important;font-size:7px !important;font-style:normal !important; }
body.skills-workspace-v101414 .activity-skill-info-milestone > b { color:#9bc153 !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-row {
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 48px !important;
  gap:9px !important;
  align-items:center !important;
  min-height:65px !important;
  padding:9px !important;
  border:1px solid rgba(176,130,56,.19) !important;
  border-radius:5px !important;
  background:#091a1f !important;
}
body.skills-workspace-v101414 .activity-skill-info-mastery-icon { width:40px !important;height:40px !important;display:grid !important;place-items:center !important;border:1px solid rgba(176,130,56,.22) !important;border-radius:4px !important;background:#06161a !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-icon :is(img,.jd-item-icon,.jd-skill-icon,.activity-skill-info-mastery-icon-art) { width:34px !important;height:34px !important;max-width:34px !important;max-height:34px !important;object-fit:contain !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-title { display:flex !important;justify-content:space-between !important;gap:8px !important;align-items:center !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-title strong { color:#e5d7bd !important;font-size:9px !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-title span { color:#c59d58 !important;font-size:7px !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-progress { height:5px !important;margin:6px 0 4px !important;border-radius:99px !important;background:#051216 !important;overflow:hidden !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-progress > span { display:block !important;height:100% !important;background:linear-gradient(90deg,#688f3f,#b79c48) !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-row div > small { color:#818b86 !important;font-size:7px !important; }
body.skills-workspace-v101414 .activity-skill-info-mastery-row > b { color:#d5aa5a !important;font-size:9px !important;text-align:right !important; }
body.skills-workspace-v101414 .activity-skill-info-empty { padding:22px !important;border:1px dashed rgba(176,130,56,.24) !important;border-radius:5px !important;color:#8d9791 !important;text-align:center !important;font-size:9px !important; }

@media (max-width:700px) {
  body.skills-workspace-v101414 .activity-skill-info-modal { display:flex !important;align-items:flex-end !important; }
  body.skills-workspace-v101414 .activity-skill-info-backdrop { position:absolute !important;inset:0 !important; }
  body.skills-workspace-v101414 .activity-skill-info-panel {
    grid-column:auto !important;grid-row:auto !important;width:100% !important;height:min(88dvh,760px) !important;margin-top:auto !important;border-left:0 !important;border-top:1px solid rgba(202,151,64,.48) !important;border-radius:10px 10px 0 0 !important;box-shadow:0 -18px 44px rgba(0,0,0,.42) !important;
  }
  body.skills-workspace-v101414 .activity-skill-info-header { padding:13px 12px 11px !important;grid-template-columns:46px minmax(0,1fr) 34px !important; }
  body.skills-workspace-v101414 .activity-skill-info-icon { width:44px !important;height:44px !important; }
  body.skills-workspace-v101414 .activity-skill-info-icon :is(img,.jd-skill-icon,.activity-skill-info-icon-art) { width:29px !important;height:29px !important;max-width:29px !important;max-height:29px !important; }
  body.skills-workspace-v101414 #activitySkillInfoTitle { font-size:19px !important; }
  body.skills-workspace-v101414 .activity-skill-info-tabs { overflow-x:auto !important;grid-template-columns:repeat(4,minmax(84px,1fr)) !important;padding:7px !important; }
  body.skills-workspace-v101414 .activity-skill-info-content { padding:9px !important; }
}

/* V1.01.416 release-density polish. Keep the contextual progression panel
   useful without starving the scalable activity browser on common laptops. */
@media (max-width:1500px) and (min-width:901px) {
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-layout {
    grid-template-columns:225px minmax(0,1fr) !important;
    gap:10px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-panel { padding:8px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-card { padding:11px 10px 10px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon { width:72px !important;height:72px !important; }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-icon :is(img,.jd-skill-icon,.activity-context-skill-icon-art) {
    width:46px !important;height:46px !important;max-width:46px !important;max-height:46px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-toolbar {
    grid-template-columns:minmax(160px,1fr) auto minmax(150px,190px) auto !important;
    gap:6px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-main-filters {
    grid-column:1 / -1 !important;
    grid-row:1 !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-search {
    grid-column:1 !important;
    grid-row:2 !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-filter-toggle {
    grid-column:2 !important;
    grid-row:2 !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-sort {
    grid-column:3 !important;
    grid-row:2 !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-view-toggle {
    grid-column:4 !important;
    grid-row:2 !important;
    justify-self:end !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-table-head,
  body.skills-workspace-v101414 #activitiesPage .skill-activity-row {
    grid-template-columns:minmax(200px,2.25fr) 72px 65px 72px 64px minmax(105px,1.15fr) 72px !important;
  }
}

@media (max-width:1180px) and (min-width:901px) {
  body.skills-workspace-v101414 #activitiesPage .activity-skill-context-layout {
    grid-template-columns:205px minmax(0,1fr) !important;
  }
}

/* On phones, show all four progression shortcuts at once instead of hiding
   some behind horizontal scrolling. */
@media (max-width:560px) {
  body.skills-workspace-v101414 #activitiesPage .activity-context-actions {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    overflow:visible !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-action {
    min-width:0 !important;
    width:100% !important;
  }
}


/* V1.01.418 — approved left-side skill selector implementation.
   The selector now lives beneath the left skill card as a compact grouped list,
   while the right workspace stays stable and the hero switcher is desktop-hidden. */
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-panel {
  display:block !important;
  margin:-2px 0 2px !important;
  padding:8px 7px 7px !important;
  border:1px solid rgba(176,130,56,.24) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,rgba(10,26,31,.98),rgba(7,20,24,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 6px 16px rgba(0,0,0,.12) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-panel[hidden] {
  display:none !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-list {
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  max-height:470px !important;
  overflow:auto !important;
  padding-right:2px !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(201,155,73,.68) rgba(5,17,21,.84) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-list::-webkit-scrollbar {
  width:8px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-list::-webkit-scrollbar-track {
  background:rgba(5,17,21,.84) !important;
  border-radius:999px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-list::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,rgba(212,165,79,.90),rgba(134,105,43,.90)) !important;
  border-radius:999px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-group {
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-group-heading {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  min-height:18px !important;
  padding:0 2px !important;
  color:#c79a4b !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-choices {
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice {
  position:relative !important;
  width:100% !important;
  min-height:52px !important;
  display:grid !important;
  grid-template-columns:32px minmax(0,1fr) 18px !important;
  gap:9px !important;
  align-items:center !important;
  padding:7px 9px 8px 8px !important;
  border:1px solid rgba(176,130,56,.18) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,rgba(9,24,29,.98),rgba(7,19,23,.98)) !important;
  color:#dfd2bb !important;
  text-align:left !important;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice:hover {
  border-color:rgba(216,168,74,.45) !important;
  background:linear-gradient(180deg,rgba(13,31,36,.99),rgba(8,23,27,.99)) !important;
  transform:translateY(-1px) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice.active {
  border-color:rgba(160,191,92,.72) !important;
  background:linear-gradient(180deg,rgba(18,50,43,.96),rgba(11,34,31,.98)) !important;
  box-shadow:inset 0 0 0 1px rgba(182,214,106,.10),0 0 14px rgba(101,144,62,.08) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice.skill-locked {
  opacity:.62 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-icon {
  width:30px !important;
  height:30px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(198,150,66,.24) !important;
  border-radius:4px !important;
  background:rgba(5,16,20,.88) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-icon :is(img,.jd-skill-icon,.activity-context-skill-choice-icon-art) {
  width:20px !important;
  height:20px !important;
  max-width:20px !important;
  max-height:20px !important;
  object-fit:contain !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-copy {
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-copy b {
  overflow:hidden !important;
  color:#efe2ca !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:10px !important;
  line-height:1.05 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-copy small {
  overflow:hidden !important;
  color:#8f9a93 !important;
  font-size:8px !important;
  line-height:1.1 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice.active .activity-context-skill-choice-copy b {
  color:#f3dfb0 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-state {
  align-self:center !important;
  justify-self:end !important;
  color:#d7aa58 !important;
  font-size:13px !important;
  line-height:1 !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice.active .activity-context-skill-choice-state {
  color:#bfe17a !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-progress {
  position:absolute !important;
  left:49px !important;
  right:10px !important;
  bottom:6px !important;
  height:2px !important;
  border-radius:999px !important;
  background:rgba(224,173,79,.15) !important;
  overflow:hidden !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-progress > span {
  display:block !important;
  height:100% !important;
  background:linear-gradient(90deg,#b77e2c,#e0ac50) !important;
}
body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch {
  display:none !important;
}
@media (max-width:900px) {
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-panel {
    display:none !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-workspace-skill-switch {
    display:inline-flex !important;
  }
}
@media (max-width:1180px) and (min-width:901px) {
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-picker-list {
    max-height:420px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice {
    min-height:48px !important;
    grid-template-columns:28px minmax(0,1fr) 16px !important;
    gap:7px !important;
    padding:6px 8px 7px 7px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-icon {
    width:26px !important;
    height:26px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-icon :is(img,.jd-skill-icon,.activity-context-skill-choice-icon-art) {
    width:17px !important;
    height:17px !important;
    max-width:17px !important;
    max-height:17px !important;
  }
  body.skills-workspace-v101414 #activitiesPage .activity-context-skill-choice-progress {
    left:43px !important;
  }
}