:root {
  --bg:#17110d;
  --panel:#241812;
  --panel-2:#2d1e15;
  --panel-3:#35251a;
  --text:#eadfc9;
  --muted:#ad9877;
  --gold:#c69a45;
  --gold-bright:#e1bd6a;
  --brown:#6b4325;
  --brown-dark:#3a2416;
  --line:#5b422b;
  --danger:#b65c4b;
  --success:#829b55;
  --shadow:0 14px 35px rgba(0,0,0,.34);
  --radius:12px;
}

* {
  box-sizing:border-box;
}

/* =========================================================
   GLOBAL IMAGE SAFETY
   ========================================================= */

img {
  max-width:100% !important;
  height:auto;
  box-sizing:border-box;
}

html,
body {
  margin:0;
  min-height:100%;
  background:radial-gradient(circle at 20% 0%,#342218 0,#17110d 48%,#100c09 100%);
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
}

body {
  line-height:1.55;
}

a {
  color:var(--gold-bright);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header { position: sticky; top: 0; z-index: 100; background: #140d09; border-bottom: 1px solid var(--line); box-shadow: 0 5px 18px #0008; }

.header-inner {
  max-width:1400px;
  margin:auto;
  padding:12px 18px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
}

.brand {
  font-weight:bold;
  font-size:1.25rem;
  color:var(--gold-bright);
  white-space:nowrap;
}

.brand img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.main-nav {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.main-nav a {
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:8px;
}

.main-nav a:hover {
  background:#2b1c13;
  border-color:var(--line);
  text-decoration:none;
}

.gift-link {
  color:#f0ca72!important;
}

.page-shell {
  max-width:1400px;
  margin:0 auto;
  padding:30px 18px 55px;
  min-height:calc(100vh - 120px);
}

.site-footer {
  text-align:center;
  color:var(--muted);
  padding:22px;
  border-top:1px solid var(--line);
  background:#120d09;
}

/* =========================================================
   GENERAL
   ========================================================= */

h1,
h2,
h3 {
  color:var(--gold-bright);
  margin-top:0;
}

h1 {
  font-size:2.1rem;
}

h2 {
  font-size:1.45rem;
}

.hero,
.panel,
.card {
  background:linear-gradient(145deg,#2a1b13,#1e140f);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.hero {
  padding:34px;
}

.grid {
  display:grid;
  gap:18px;
}

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

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

.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.button,
button {
  font:inherit;
  cursor:pointer;
  background:linear-gradient(#d2ab59,#a9792e);
  color:#1b120a;
  border:1px solid #e2c27b;
  border-radius:8px;
  padding:9px 14px;
  font-weight:bold;
}

.button:hover,
button:hover {
  filter:brightness(1.08);
  text-decoration:none;
}

.button.secondary,
button.secondary {
  background:#3a281b;
  color:var(--text);
  border-color:var(--line);
}

.button.danger,
button.danger {
  background:#71382f;
  color:#fff;
  border-color:#9e5144;
}

.tiny {
  padding:5px 9px;
  font-size:.9rem;
}

label {
  display:block;
  font-weight:bold;
  color:var(--gold);
  margin-bottom:5px;
}

.field {
  margin-bottom:15px;
}

input,
select,
textarea {
  width:100%;
  padding:10px 11px;
  border:1px solid #6a4d32;
  background:#120d09;
  color:var(--text);
  border-radius:7px;
  font:inherit;
}

textarea {
  min-height:140px;
  resize:vertical;
}

.help,
.muted {
  color:var(--muted);
}

.notice {
  padding:12px 14px;
  border-radius:8px;
  background:#332318;
  border:1px solid var(--line);
  margin:12px 0;
}

.notice.error {
  border-color:#814438;
  color:#f0b2a4;
}

.notice.success {
  border-color:#657d42;
  color:#c6d6a3;
}

/* =========================================================
   TABLES
   ========================================================= */

.table-wrap {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:9px;
}

.data-table {
  width:100%;
  border-collapse:collapse;
  min-width:850px;
}

.data-table th,
.data-table td {
  padding:10px;
  border-bottom:1px solid #493322;
  text-align:left;
  vertical-align:middle;
}

.data-table th {
  background:#342318;
  color:var(--gold);
  position:sticky;
  top:0;
  white-space:nowrap;
}

.data-table tr:hover td {
  background:#2a1b13;
}

table {
  max-width:100%;
}

table td,
table th {
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

table td > *,
table th > * {
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

/* =========================================================
   THUMBNAILS
   ========================================================= */

.database-thumb {
  width:100px;
  height:100px;
  object-fit:contain;
  display:block;
}

.thumb {
  width:72px;
  height:72px;
  object-fit:contain;
  background:#120d09;
  border:1px solid var(--line);
  border-radius:8px;
}

.thumb.large {
  width:150px;
  height:150px;
}

/* =========================================================
   TABS / SEARCH / GENERAL CONTROLS
   ========================================================= */

.tabs {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.tab {
  background:#2e1e14;
  color:var(--text);
  border-color:var(--line);
}

.tab.active {
  background:#a9782f;
  color:#170f09;
}

.search-row {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}

.search-row input[type="search"] {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.para-grid,
.treasure-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}

/* =========================================================
   PARA CARDS
   ========================================================= */

.para-card {
  position:relative;
}

.para-card .star {
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:none;
  color:#b59b70;
  font-size:1.5rem;
  padding:0;
}

.para-card .star.on {
  color:#f0c75a;
}

.para-card img {
  width:100%;
  height:220px;
  object-fit:contain;
  transparent !important;
  border-radius:8px;
  border:1px solid var(--line);
}

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

.tag {
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  background:#3b2819;
  border:1px solid var(--line);
  margin:2px;
  font-size:.8rem;
}

.xpbar {
  height:10px;
  background:#100c09;
  border:1px solid var(--line);
  border-radius:99px;
  overflow:hidden;
}

.xpbar span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#8c6428,#e0bd63);
}

.xpbar[data-progress] span {
  width:0;
}

/* =========================================================
   INVENTORY / ADMIN
   ========================================================= */

.inventory-row {
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #4a3423;
}

.item-type {
  color:var(--gold);
  font-size:.9rem;
}

.qty {
  font-size:1.15rem;
  font-weight:bold;
  color:var(--gold-bright);
}

.admin-nav {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
}

.admin-nav a {
  padding:8px 11px;
  background:#2e1e14;
  border:1px solid var(--line);
  border-radius:7px;
}

.color-swatch {
  display:inline-block;
  width:25px;
  height:25px;
  border-radius:5px;
  border:1px solid #fff4;
  vertical-align:middle;
  margin-right:4px;
}

.stat-row {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.stat {
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#2a1b13;
}

.stat strong {
  display:block;
  color:var(--gold-bright);
  font-size:1.35rem;
}

/* =========================================================
   PARABLORB IMAGE FALLBACK
   ========================================================= */

.database-image-fallback {
  position:absolute;
  inset:0;
  width:100px;
  height:100px;
  min-width:100px;
  min-height:100px;
  display:none;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:#120d09;
  border:1px solid var(--line,#5b4630);
  border-radius:8px;
  color:var(--gold-bright,#e1bd6a);
  font-family:Georgia,serif;
  font-size:4rem;
  line-height:1;
  font-weight:bold;
  text-decoration:none;
}

.database-image-fallback.is-visible {
  display:flex;
}

.database-para-image-fallback {
  position:absolute;
  inset:0;
  width:100px;
  height:100px;
  display:none;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  background:#120d09;
  border:1px solid var(--line,#5b4630);
  border-radius:8px;
  color:var(--gold-bright,#e1bd6a);
  font-family:Georgia,serif;
  font-size:4rem;
  line-height:1;
  font-weight:bold;
}

.database-para-image-fallback.is-visible {
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:2;
}

.database-para-image-wrap .database-para-image-fallback {
  pointer-events:none;
}

/* =========================================================
   EXPLORE MAP
   ========================================================= */

.map {
  position:relative;
  min-height:700px;
  border:1px solid var(--line);
  border-radius:12px;
  background:
    radial-gradient(circle at 18% 20%,#7b633b 0,#5a4529 22%,transparent 42%),
    radial-gradient(circle at 78% 68%,#66502f 0,#40301d 25%,transparent 48%),
    linear-gradient(145deg,#4d3a23,#281b11 72%,#1b120c);
  overflow:hidden;
}

.map::before {
  content:"";
  position:absolute;
  inset:18px;
  border:1px dashed #d8b66a55;
  border-radius:16px;
  pointer-events:none;
}

.map-area {
  position:absolute;
  width:190px;
  max-width:190px;
  min-height:155px;
  padding:12px 14px 10px;
  margin:0;
  border:2px solid #d9b45e99;
  background:rgba(35,23,13,.94);
  color:#f3d99a;
  border-radius:14px;
  text-align:center;
  transform:translate(-50%,-50%);
  z-index:2;
  box-shadow:
    0 5px 12px rgba(0,0,0,.28),
    inset 0 0 0 1px #ffffff08;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

.map-area::before {
  display:block;
  width:100%;
  height:55px;
  margin:0 0 5px;
  font-size:3rem;
  line-height:1;
  text-align:center;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));
  pointer-events:none;
}

.map-area.area-1::before { content:"🌾"; }
.map-area.area-2::before { content:"🌲"; }
.map-area.area-3::before { content:"🏖️"; }
.map-area.area-4::before { content:"🏜️"; }
.map-area.area-5::before { content:"☠️"; }
.map-area.area-6::before { content:"🌋"; }
.map-area.area-7::before { content:"🕳️"; }

.map-area strong {
  display:block;
  width:100%;
  color:#ffe2a1;
  font-size:.95rem;
  line-height:1.15;
  margin:0 0 5px;
}

.map-area small {
  display:block;
  width:100%;
  color:#c8b18b;
  font-size:.68rem;
  line-height:1.25;
  margin:0;
}

.map-area small:nth-of-type(1) {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:2.5em;
}

.map-area small:nth-of-type(2) {
  color:var(--gold);
  font-size:.66rem;
  margin-top:4px;
}

.map-area .tiny {
  display:inline-block;
  margin-top:auto;
  padding:5px 8px;
  font-size:.72rem;
  line-height:1.1;
}

.map-area:hover {
  background:rgba(78,52,27,.97);
  border-color:var(--gold-bright);
  box-shadow:
    0 8px 20px rgba(0,0,0,.4),
    0 0 14px rgba(225,189,106,.12);
  z-index:10;
}

.map-area.area-1 { left:15%; top:22%; }
.map-area.area-2 { left:48%; top:16%; }
.map-area.area-3 { left:81%; top:27%; }
.map-area.area-4 { left:27%; top:53%; }
.map-area.area-6 { left:58%; top:43%; }
.map-area.area-5 { left:80%; top:61%; }
.map-area.area-7 { left:43%; top:78%; }

.map-area[data-den-open] {
  display:flex;
  width:190px;
  max-width:190px;
  min-height:155px;
  padding:12px 14px 10px;
  margin:0;
  font:inherit;
  cursor:pointer;
  text-align:center;
  color:#f3d99a;
  border:2px solid #d9b45e99;
  border-radius:14px;
  background:rgba(35,23,13,.94);
  box-shadow:
    0 5px 12px rgba(0,0,0,.28),
    inset 0 0 0 1px #ffffff08;
}

.map-area[data-den-open]:hover {
  background:rgba(78,52,27,.97);
  border-color:var(--gold-bright);
  filter:none;
  box-shadow:
    0 8px 20px rgba(0,0,0,.4),
    0 0 14px rgba(225,189,106,.12);
}

.map-area[data-den-open] small:first-of-type {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height:2.5em;
}

.map-area[data-den-open] .button {
  display:inline-block;
  margin-top:auto;
}

/* =========================================================
   EXPLORE MODAL
   ========================================================= */

.explore-modal {
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none !important;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:20px;
  margin:0;
  background:rgba(0,0,0,.72);
  overflow:auto;
}

.explore-modal.open {
  display:flex !important;
}

.explore-modal-card {
  position:relative;
  width:min(560px,100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:24px;
  margin:auto;
  background:linear-gradient(145deg,#2a1b13,#1e140f);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.65);
}

.explore-modal-close {
  position:absolute;
  right:12px;
  top:10px;
  width:34px;
  height:34px;
  padding:0;
  margin:0;
  background:#3a281b;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:7px;
  font-family:Arial,sans-serif;
  font-size:24px;
  font-weight:normal;
  line-height:30px;
  text-align:center;
  cursor:pointer;
}

.explore-modal-close:hover {
  background:#513723;
  filter:none;
}

.den-tix-image {
  text-align:center;
  margin:12px 0;
}

.den-tix-image img {
  width:60px;
  height:60px;
  object-fit:contain;
}

.den-tix-owned {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:15px 0;
  color:var(--muted);
}

.den-tix-owned strong {
  color:var(--gold-bright);
  font-size:1.35rem;
}

.den-roll-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 13px;
  margin-bottom:8px;
  background:#2a1b13;
  border:1px solid var(--line);
  border-radius:8px;
}

.den-roll-summary span {
  color:var(--gold);
}

.den-roll-summary strong {
  color:var(--gold-bright);
  font-size:1.15rem;
}

/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.form-grid .wide {
  grid-column:1/-1;
}

/* =========================================================
   RESULTS TOOLBAR
   ========================================================= */

.results-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  margin:0 0 12px;
}

.results-toolbar .search-row {
  display:grid;
  grid-template-columns:460px auto;
  gap:8px;
  width:auto;
  margin:0;
}

.results-toolbar .search-row input[type="search"] {
  width:460px;
  min-width:0;
}

.results-toolbar .pagination {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin:0;
  padding:0;
  position:static;
  float:none;
  clear:none;
  flex-wrap:wrap;
}

.pagination-options,
.pagination-pages {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
}

.pagination-current {
  white-space:nowrap;
}

.pagination .button {
  white-space:nowrap;
}

.results-count {
  margin:10px 0 15px;
}

/* =========================================================
   PARA SEARCH + SORT
   ========================================================= */

.para-toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}

.para-toolbar .para-search {
  flex:1 1 auto;
  width:auto;
  min-width:660px;
  max-width:none;
  margin:0;
}

.para-toolbar .search-button {
  flex:0 0 auto;
  width:auto;
  min-width:auto;
  white-space:nowrap;
  margin:0;
}

.para-toolbar .para-sort-label {
  flex:0 0 auto;
  width:auto;
  margin:0 0 0 auto;
  padding:0;
  white-space:nowrap;
}

.para-toolbar .para-sort {
  flex:0 0 220px;
  width:220px;
  min-width:220px;
  max-width:220px;
  margin:0;
}

/* =========================================================
   PARA COLORS
   ========================================================= */

.para-colors {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:8px 0 16px;
}

.para-color-row {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:26px;
}

.para-color-swatch {
  display:inline-block;
  width:24px;
  height:24px;
  flex:none;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  border-radius:4px;
}

.para-color-swatch.circle {
  border-radius:50%;
}

.para-color-hex {
  font-size:.88rem;
  color:var(--text);
}

/* =========================================================
   UTILITY
   ========================================================= */

.spaced {
  margin-top:18px;
}

.spaced-bottom {
  margin-bottom:14px;
}

.actions-end {
  align-items:end;
}

.inline-form {
  display:inline;
}

.hidden {
  display:none;
}

.table-spaced {
  margin-top:18px;
}

.heading-spaced {
  margin-top:20px;
}

/* =========================================================
   DATABASE
   ========================================================= */

.species-with-dna {
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.dna-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:1px solid var(--line);
  border-radius:5px;
  background:#2e1e14;
  color:var(--gold-bright);
  font-size:.82rem;
  line-height:1;
  cursor:pointer;
}

.dna-button:hover {
  background:#3b2819;
  border-color:var(--gold);
  filter:none;
}

.database-sort-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  width:100%;
}

.database-sort-link:hover {
  text-decoration:none;
}

.database-sort-arrow {
  opacity:.7;
  font-size:.85em;
  line-height:1;
}

.page-jump {
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.page-jump select {
  width:72px;
  min-width:72px;
  max-width:72px;
  box-sizing:border-box;
}

.database-pagination-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.pagination-pages {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
}

.database-show-select {
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  flex:0 0 auto;
}

.database-show-select select {
  width:88px;
  min-width:88px;
  max-width:88px;
  padding:5px 27px 5px 8px;
  box-sizing:border-box;
}

.database-pagination-bottom {
  margin-top:16px;
  max-width:100%;
  overflow:hidden;
}

.database-pagination-bottom .database-pagination-controls {
  justify-content:flex-end;
}

.database-search-field {
  flex:1 1 auto;
  min-width:120px;
  max-width:520px;
  box-sizing:border-box;
}

.database-search-button {
  flex:0 0 auto;
  white-space:nowrap;
}

.database-controls {
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}

.database-controls .database-pagination-controls {
  width:100%;
  min-width:0;
}

.database-search-help {
  margin-top:7px;
  margin-bottom:0;
}

.results-count {
  margin-bottom:12px;
}

.database-keeper {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.database-keeper > img.database-keeper-fallback-icon {
  width:auto;
  height:35px;
  object-fit:contain;
  flex:0 0 35px;
}

.database-keeper > img.database-keeper-fallback-icon.database-keeper-default-icon:not(.database-keeper-bean-icon) {
  filter:grayscale(1);
}

.database-game-account {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.database-game-account-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:35px;
  min-width:35px;
  height:35px;
  font-size:28px;
  line-height:1;
}

.database-game-account-name {
  display:inline-block;
}

/* =========================================================
   DNA MODAL
   ========================================================= */

body.dna-modal-open {
  overflow:hidden;
}

.dna-modal {
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:25px;
}

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

.dna-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(8,5,3,.78);
  backdrop-filter:blur(3px);
}

.dna-modal-card {
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  padding:26px;
  background:linear-gradient(145deg,#2d1e15,#1b120d);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}

.dna-modal-close {
  position:absolute;
  top:10px;
  right:12px;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--line);
  border-radius:7px;
  background:#2e1e14;
  color:var(--text);
  font-size:1.45rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dna-modal-close:hover {
  background:#71382f;
  color:#fff;
  filter:none;
}

.dna-modal-header {
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:40px;
  margin-bottom:22px;
}

.dna-modal-header h2 {
  margin:0;
}

.dna-modal-symbol {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  flex:none;
  border:1px solid var(--line);
  border-radius:9px;
  background:#2e1e14;
  font-size:1.6rem;
}

.dna-content {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:22px;
}

.dna-colors {
  padding:16px;
  background:#21160f;
  border:1px solid var(--line);
  border-radius:10px;
}

.dna-colors h3 {
  margin-bottom:14px;
}

.dna-color-list {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dna-color {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:25px;
  font-family:monospace;
  font-size:.9rem;
}

.dna-swatch {
  display:inline-block;
  width:18px;
  height:18px;
  flex:none;
  border:1px solid #fff5;
  border-radius:4px;
  background:#120d09;
}

.dna-details {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}

.dna-detail-row {
  display:grid;
  grid-template-columns:155px 1fr;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid #493322;
}

.dna-detail-row:last-child {
  border-bottom:0;
}

.dna-detail-row>span {
  color:var(--gold);
  font-weight:bold;
}

.dna-detail-row>strong {
  color:var(--text);
  font-weight:normal;
  overflow-wrap:anywhere;
}

.status-explorer {
  color:var(--gold-bright);
  font-weight:bold;
}

/* =========================================================
   KEEPER PROFILES
   ========================================================= */

.keeper-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-direction:row-reverse;
}

.keeper-icon {
  width:32px;
  height:32px;
  object-fit:contain;
  border-radius:6px;
  vertical-align:middle;
}

.keeper-profile {
  max-width:900px;
  margin:0 auto;
}

.keeper-profile-header {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
}

.keeper-profile-icon {
  height:100px;
  object-fit:contain;
  flex:none;
  border:1px solid var(--line);
  border-radius:12px;
  background:#120d09;
}

.keeper-profile-name {
  margin:0;
}

.keeper-profile-pronouns {
  color:var(--muted);
  margin-top:3px;
}

.keeper-profile-bio {
  white-space:normal;
  overflow-wrap:anywhere;
}

.keeper-profile-bio img {
  max-width:100% !important;
  height:auto;
  display:block;
  margin:10px 0;
  border-radius:8px;
}

.keeper-site-preference {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.keeper-site-choice {
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#2e1e14;
}

.keeper-site-choice.active {
  background:#a9782f;
  color:#170f09;
  border-color:#e2c27b;
}

/* =========================================================
   EXPLORE NAV
   ========================================================= */

.explore-nav-link {
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex-direction:row-reverse;
}

.explore-notification {
  color:#f0c75a;
  font-size:.9em;
  line-height:1;
  text-shadow:
    0 0 4px rgba(240,199,90,.5),
    0 0 8px rgba(240,199,90,.2);
  animation:explore-star-pulse 1.8s ease-in-out infinite;
}

@keyframes explore-star-pulse {
  0%,100% {
    opacity:1;
    transform:scale(1);
  }

  50% {
    opacity:.55;
    transform:scale(1.18);
  }
}

/* =========================================================
   LIBRARY INDEX
   ========================================================= */

.library-index-table-wrap {
  width:100%;
  max-width:900px;
  margin:0 auto;
  overflow-x:auto;
}

.library-index-table {
  width:100%;
  table-layout:fixed;
}

.library-index-table th:first-child,
.library-index-table td:first-child {
  width:28%;
}

.library-index-table th:nth-child(2),
.library-index-table td:nth-child(2) {
  width:72%;
}

.library-intro {
  text-align:center;
}

.library-intro p {
  text-align:center;
}

.library-controls {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:20px;
  margin:20px 0;
  flex-wrap:wrap;
}

.library-global-search,
.library-page-size {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.library-global-search {
  flex:1 1 320px;
  max-width:900px;
}

.library-page-size {
  flex:0 0 auto;
}

.library-global-search label,
.library-page-size label {
  font-weight:700;
}

.library-global-search input,
.library-page-size select {
  box-sizing:border-box;
  min-height:40px;
  padding:8px 10px;
  border-radius:6px;
  border:1px solid rgba(227,184,79,.45);
  background:#0f130c;
  color:inherit;
}

.library-global-search input {
  width:100%;
}

.library-page-size select {
  min-width:105px;
}

/* =========================================================
   LIBRARY TABLE
   ========================================================= */

.library-table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:9px;
}

.library-table {
  width:100%;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

.library-table .col-image { width:6%; }
.library-table .col-name { width:25%; }
.library-table .col-type { width:14%; }
.library-table .col-rarity { width:15%; }
.library-table .col-use { width:33%; }
.library-table .col-event { width:7%; }

.library-table th,
.library-table td {
  box-sizing:border-box;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  vertical-align:middle;
  border-right:1px solid #493322;
  border-bottom:1px solid #493322;
}

.library-table th:first-child,
.library-table td:first-child {
  border-left:0;
}

.library-table th:last-child,
.library-table td:last-child {
  border-right:0;
}

.library-table th {
  white-space:normal;
  text-align:center;
}

.library-table td {
  white-space:normal;
  text-align:center;
}

.library-table .column-title {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

.library-table .column-title > span {
  min-width:0;
  max-width:100%;
  flex:1 1 auto;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}

.library-table .sort-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  flex-shrink:0;
  min-width:34px;
  height:30px;
  padding:2px 6px;
  border:1px solid rgba(227,184,79,.45);
  border-radius:6px;
  background:rgba(27,33,21,.96);
  color:inherit;
  cursor:pointer;
}

.library-table .sort-btn:hover,
.library-table .sort-btn.active-up,
.library-table .sort-btn.active-down {
  border-color:#e3b84f;
}

.library-table .sort-up,
.library-table .sort-down {
  opacity:.35;
  font-size:10px;
  line-height:1;
}

.library-table .sort-btn.active-up .sort-up,
.library-table .sort-btn.active-down .sort-down {
  opacity:1;
}

.treasure-icon-cell {
  padding:6px!important;
  text-align:center;
  vertical-align:middle!important;
}

.treasure-icon {
  display:block;
  width:auto;
  height:42px !important;
  max-width:100% !important;
  object-fit:contain !important;
  margin:0 auto;
  border-radius:6px;
}

.treasure-icon-empty {
  display:block;
  width:100%;
  text-align:center;
  opacity:.5;
}

.treasure-event-cell {
  text-align:center;
  white-space:nowrap !important;
  padding-left:4px !important;
  padding-right:4px !important;
}

.treasure-event-icon {
  display:inline-block;
  font-size:1.35em;
  line-height:1;
}

.library-pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:20px 0 5px;
  flex-wrap:wrap;
}

.pagination-button {
  min-width:95px;
  padding:9px 14px;
  border:1px solid rgba(227,184,79,.55);
  border-radius:6px;
  background:linear-gradient(to bottom,#e3b84f,#b98d2f);
  color:#17110d;
  font-weight:700;
  cursor:pointer;
}

.pagination-button:hover:not(:disabled) {
  filter:brightness(1.08);
}

.pagination-button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.pagination-info {
  min-width:110px;
  text-align:center;
  font-weight:700;
}

/* =========================================================
   BLORBARIUM
   ========================================================= */

.blorbarium-page {
  max-width:1400px;
  margin:0 auto;
}

.blorbarium-intro {
  text-align:center;
  max-width:900px;
  margin:0 auto 28px;
}

.blorbarium-intro p {
  color:var(--muted);
}

.blorbarium-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
  margin:0 0 26px;
  padding:16px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.blorbarium-controls-label {
  color:var(--gold-bright);
  font-weight:bold;
  white-space:nowrap;
}

.blorbarium-size-buttons {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.blorbarium-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:62px;
  padding:9px 15px;
  background:linear-gradient(#d2ab59,#a9792e);
  color:#1b120a;
  border:1px solid #e2c27b;
  border-radius:8px;
  font-weight:bold;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.22);
  transition:filter .15s ease,transform .15s ease;
}

.blorbarium-button:hover {
  filter:brightness(1.1);
  color:#1b120a;
  text-decoration:none;
  transform:translateY(-1px);
}

.blorbarium-button.active {
  background:linear-gradient(#e1bd6a,#c69a45);
  color:#1b120a;
  border-color:#f0d38b;
  box-shadow:0 0 0 2px rgba(225,189,106,.18),0 4px 10px rgba(0,0,0,.25);
}

.blorbarium-count {
  text-align:center;
  color:var(--muted);
  margin:0 0 20px;
}

.blorbarium-gallery {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.blorbarium-item {
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease;
}

.blorbarium-item:hover {
  transform:translateY(-3px);
  filter:brightness(1.06);
  border-color:var(--gold);
}

.blorbarium-item img {
  display:block;
  width:100%;
  height:250px;
  object-fit:contain;
  border-radius:8px;
  transition:transform .2s ease;
}

.blorbarium-item:hover img {
  transform:scale(1.035);
}

.blorbarium-empty {
  text-align:center;
  padding:35px 20px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.blorbarium-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:32px auto 0;
}

.blorbarium-page-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  min-height:40px;
  padding:8px 13px;
}

.blorbarium-page-button.active {
  background:linear-gradient(#e1bd6a,#c69a45);
  color:#1b120a;
  border-color:#f0d38b;
}

.blorbarium-page-button.disabled {
  opacity:.35;
  cursor:default;
  pointer-events:none;
}

.blorbarium-page-info {
  width:100%;
  text-align:center;
  color:var(--muted);
  margin-top:5px;
}

.blorbarium-lightbox {
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(0,0,0,.92);
}

.blorbarium-lightbox.active {
  display:flex;
}

.blorbarium-lightbox img {
  display:block;
  max-width:90vw !important;
  max-height:90vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 12px 45px rgba(0,0,0,.65);
}

.blorbarium-close,
.blorbarium-prev,
.blorbarium-next {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:linear-gradient(#d2ab59,#a9792e);
  color:#1b120a;
  border:1px solid #e2c27b;
  border-radius:8px;
  font-weight:bold;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  cursor:pointer;
}

.blorbarium-close:hover,
.blorbarium-prev:hover,
.blorbarium-next:hover {
  filter:brightness(1.1);
}

.blorbarium-close {
  top:20px;
  right:25px;
  width:44px;
  height:44px;
  font-size:30px;
  line-height:1;
}

.blorbarium-prev,
.blorbarium-next {
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:68px;
  font-size:32px;
}

.blorbarium-prev {
  left:20px;
}

.blorbarium-next {
  right:20px;
}

.blorbarium-ellipsis {
  width:auto;
  margin:0 2px;
}

/* =========================================================
   EXPLORE PAGE
   ========================================================= */

.explore-page-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.explorer-profile {
  display:flex;
  align-items:center;
  gap:24px;
  width:100%;
}

.explorer-profile-image {
  flex:0 0 150px;
  width:150px;
  max-width:150px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
}

.explorer-profile-image img {
  display:block;
  width:150px;
  max-width:150px !important;
  height:auto;
  max-height:150px;
  object-fit:contain;
}

.explorer-profile-info {
  flex:1;
  min-width:0;
}

.explorer-profile-info h3 {
  margin:0 0 4px;
}

.explorer-profile-id {
  color:var(--muted);
  margin-bottom:18px;
}

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

.explorer-bonus-grid .stat {
  text-align:center;
}

.explorer-bonus-grid .stat strong {
  display:block;
}

.explorer-bonus-grid .stat span {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.85rem;
}

/* =========================================================
   TRAITS / GALLERY
   ========================================================= */

.gallery-page {
  max-width:1200px;
  margin:0 auto;
}

.gallery-header {
  max-width:900px;
  margin:0 auto 38px;
  text-align:center;
}

.gallery-header h1 {
  margin:0 0 18px;
}

.gallery-header .divider {
  margin:0 auto 24px;
}

.gallery-header p {
  margin:0 auto;
  line-height:1.8;
}

.gallery-breadcrumbs {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.gallery-breadcrumbs a {
  color:var(--gold-bright);
}

.gallery-section {
  width:100%;
}

.gallery-grid {
  display:grid;
  gap:18px;
}

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

.gallery-folder {
  position:relative;
  display:block;
  min-width:0;
  padding:18px;
  padding-right:48px;
  background:linear-gradient(145deg,#2a1b13,#1e140f);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
  text-decoration:none;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease;
}

.gallery-folder:hover {
  text-decoration:none;
  transform:translateY(-2px);
  filter:brightness(1.06);
  border-color:var(--gold);
}

.gallery-folder-content {
  width:100%;
  min-width:0;
}

.gallery-folder-heading {
  display:flex;
  align-items:flex-start;
  gap:15px;
  min-width:0;
  margin-bottom:15px;
}

.gallery-folder-icon {
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:#2e1e14;
  color:var(--gold-bright);
  font-size:1.45rem;
}

.gallery-folder-heading > div:last-child {
  min-width:0;
  flex:1;
}

.gallery-folder-content h2 {
  margin:0 0 5px;
  font-size:1.2rem;
  color:var(--gold-bright);
}

.gallery-folder-content p {
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.gallery-folder-preview {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  width:100%;
  overflow:hidden;
  border-radius:8px;
}

.gallery-folder-preview img {
  display:block;
  width:100%;
  height:70px;
  object-fit:cover;
  background:#120d09;
  border:1px solid var(--line);
  border-radius:6px;
}

.gallery-folder-arrow {
  position:absolute;
  top:20px;
  right:18px;
  color:var(--gold-bright);
  font-size:1.4rem;
}

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

.gallery-image {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:12px;
  background:linear-gradient(145deg,#2a1b13,#1e140f);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
  text-decoration:none;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease;
}

.gallery-image:hover {
  transform:translateY(-2px);
  filter:brightness(1.05);
  border-color:var(--gold);
  text-decoration:none;
}

.gallery-image img {
  display:block;
  width:100%;
  height:240px;
  object-fit:contain;
  background:#120d09;
  border:1px solid var(--line);
  border-radius:8px;
}

.gallery-image span {
  display:block;
  padding:10px 4px 2px;
  text-align:center;
  color:var(--gold-bright);
  font-weight:bold;
}

.gallery-empty {
  padding:35px 20px;
  text-align:center;
  background:linear-gradient(145deg,#2a1b13,#1e140f);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.gallery-empty h2 {
  margin-bottom:8px;
}

.gallery-empty p {
  margin:0;
  color:var(--muted);
}

/* =========================================================
   PARA EDIT MODAL
   ========================================================= */

.para-edit-modal {
  background:rgba(0,0,0,.78) !important;
}

.para-edit-card {
  background:linear-gradient(145deg,#2a1b13,#1e140f) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 20px 70px rgba(0,0,0,.65) !important;
}

.para-edit-card h2 {
  color:var(--gold-bright);
}

.para-edit-card label {
  color:var(--gold);
}

.para-edit-card input,
.para-edit-card select,
.para-edit-card textarea {
  background:#120d09 !important;
  color:var(--text) !important;
  border:1px solid #6a4d32 !important;
}

.para-edit-card input:focus,
.para-edit-card select:focus,
.para-edit-card textarea:focus {
  outline:none;
  border-color:var(--gold-bright) !important;
  box-shadow:0 0 0 2px rgba(225,189,106,.12);
}

.para-edit-card .muted {
  color:var(--muted) !important;
}

.para-edit-close {
  background:#3a281b !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

.para-edit-close:hover {
  background:#513723 !important;
  color:var(--gold-bright) !important;
  filter:none !important;
}

.edit-para-list {
  margin:15px 0 22px;
}

.edit-para-choice {
  background:#2e1e14 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}

.edit-para-choice:hover {
  background:#3b2819 !important;
  border-color:var(--gold) !important;
  color:var(--gold-bright) !important;
  filter:none !important;
}

.para-edit-card .button {
  background:linear-gradient(#d2ab59,#a9792e) !important;
  color:#1b120a !important;
  border-color:#e2c27b !important;
}

.para-edit-card .button:hover {
  filter:brightness(1.08) !important;
}

/* =========================================================
   ADMIN USER PROFILE NAMES
   ========================================================= */

.admin-profile-name,
.keeper-profile-name.admin,
.keeper-link.admin,
.admin-user-name {
  color:#e59a4a !important;
  font-weight:700 !important;
}

.admin-profile-name:hover,
.keeper-profile-name.admin:hover,
.keeper-link.admin:hover,
.admin-user-name:hover {
  color:#f0b66b !important;
  text-decoration:underline;
}

/* =========================================================
   MISSING IMAGE FALLBACK
   ========================================================= */

.image-missing-fallback {
  display:none !important;
}

.image-missing-fallback.is-visible {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:5rem !important;
  line-height:1 !important;
  color:var(--gold-bright) !important;
  background:#120d09 !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
}

.image-missing-fallback:not(.is-hidden).is-visible {
  display:flex !important;
}

.treasure-icon.image-missing-fallback {
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  font-size:2rem !important;
  padding:0 !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

/* =========================================================
   STORE / PURCHASE NOTICES
   ========================================================= */

.blorb-success {
  background:#263b20;
  border:1px solid #6f9d52;
  color:#dcefcf;
  padding:12px 16px;
  border-radius:6px;
  margin:0 0 16px;
  font-weight:bold;
}

.store-pending-page-notice {
  border:1px solid var(--gold);
  box-shadow:0 0 12px rgba(198,154,69,.16);
}

.store-pending-page-entry {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 20px;
  padding:10px 0;
  margin-bottom:14px;
  border-top:1px solid rgba(198,154,69,.2);
  text-align:center;
}

.store-pending-page-entry:last-child {
  margin-bottom:0;
}

.store-pending-purchase-details {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.store-pending-cancel-form {
  margin:6px 0 0;
}

.store-pending-cancel-form button {
  font-size:.85em;
}

.store-payment-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  text-align:center;
  margin-top:12px;
}

.store-payment-links > div {
  margin-top:6px;
}

.store-payment-links a {
  display:inline-block;
  padding:8px 12px;
  border:1px solid var(--gold);
  border-radius:7px;
  text-decoration:none;
}

.store-payment-links a:hover {
  background:var(--panel-3);
}

.purchase-reminder-form {
  margin:0 0 8px;
}

.purchase-reminder-form button {
  width:100%;
}

.purchase-review-form {
  min-width:220px;
}

.purchase-review-form textarea {
  width:100%;
  box-sizing:border-box;
  resize:vertical;
  margin-bottom:8px;
}

.purchase-review-buttons {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* =========================================================
   STORE PAGE
   ========================================================= */

.store-page-top {
  position:relative;
}

.store-history-links {
  text-align:right;
  margin:0 0 18px;
}

.store-history-links a {
  white-space:nowrap;
}

.store-notifications-panel {
  position:relative;
}

.store-notifications-panel .store-history-links {
  margin-top:15px;
}

.store-item-card {
  text-align:center;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.store-item-card,
.store-item-card * {
  box-sizing:border-box;
}

.store-item-card > * {
  min-width:0;
  max-width:100%;
}

.store-item-information {
  text-align:center;
}

.store-item-payment-owned,
.store-item-owned,
.store-item-cost,
.store-item-name,
.store-item-rarity {
  text-align:center;
}

.store-item-use {
  text-align:center;
  font-size:.85em;
  margin-top:-4px;
  margin-bottom:8px;
}

.store-item-purchase {
  text-align:center;
}

.store-item-purchase form {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.store-item-purchase form .store-quantity-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.store-item-purchase form .store-quantity-row label {
  margin:0;
}

.store-item-purchase button {
  display:block;
  margin:4px auto 0;
}

.store-item-cannot-buy {
  text-align:center;
}

.store-item-cannot-buy .store-insufficient-message {
  display:block;
  color:#c0392b;
  font-weight:bold;
  margin-bottom:8px;
}

.store-item-cannot-buy button {
  display:block;
  margin:0 auto;
}

/* =========================================================
   STORE / ITEM IMAGE CONTAINMENT
   ========================================================= */

.store-item-image {
  width:100%;
  max-width:100% !important;
  height:100px;
  min-height:100px;
  max-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
}

.store-item-image img {
  display:block;
  width:auto;
  height:auto;
  max-width:100% !important;
  max-height:100%;
  object-fit:contain;
  margin:0 auto;
  flex:0 1 auto;
}

.store-item-image-fallback {
  width:100px;
  height:100px;
  max-width:100% !important;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  overflow:hidden;
  margin:0 auto;
  font-family:Arial,sans-serif;
  font-size:72px;
  line-height:1;
  font-weight:bold;
}

.store-item-image-fallback.is-hidden,
.store-no-results.is-hidden,
.store-item-card.is-hidden {
  display:none !important;
}

.store-item-image img.image-failed {
  display:none;
}

/* =========================================================
   GENERAL ITEM IMAGE CONTAINMENT
   ========================================================= */

.item-card,
.store-item,
.store-item-card,
.treasure-card,
.my-treasure-card,
.library-item,
.library-item-card,
.treasure-library-image-cell,
.item-image,
.item-image-wrap,
.store-item-image,
.treasure-image,
.my-treasure-image,
.library-item-image {
  min-width:0;
  max-width:100% !important;
  height:auto;
  box-sizing:border-box;
}

.item-card img,
.store-item img,
.store-item-card img,
.treasure-card img,
.my-treasure-card img,
.library-item img,
.library-item-card img,
.treasure-library-image-cell img,
.item-image img,
.item-image-wrap img,
.store-item-image img,
.treasure-image img,
.my-treasure-image img,
.library-item-image img {
  display:block;
  box-sizing:border-box;
  max-width:100% !important;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  min-width:0;
  min-height:0;
}

.store-item,
.store-item-card,
.treasure-card,
.my-treasure-card,
.library-item,
.library-item-card {
  min-width:0;
}

.item-image,
.item-image-wrap,
.store-item-image,
.treasure-image,
.my-treasure-image,
.library-item-image {
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.store-item-image-fallback {
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   TREASURE LIBRARY
   ========================================================= */

.treasure-library-table-wrap {
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  margin-top:20px;
}

.treasure-library-table {
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.treasure-library-table th,
.treasure-library-table td {
  padding:12px 14px;
  border-bottom:1px solid rgba(198,154,69,.25);
  vertical-align:middle;
  text-align:left;
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.treasure-library-table th {
  color:var(--gold-bright,#e1bd6a);
  font-weight:bold;
  white-space:nowrap;
}

.treasure-library-table tbody tr:hover {
  background:rgba(198,154,69,.06);
}

.treasure-library-id {
  white-space:nowrap;
  font-size:13px;
  opacity:.75;
}

.treasure-library-image-cell {
  width:80px;
  min-width:80px;
  max-width:80px !important;
  overflow:hidden;
  text-align:center !important;
}

.treasure-library-image {
  display:block;
  width:60px;
  height:60px;
  max-width:60px !important;
  max-height:60px;
  margin:0 auto;
  object-fit:contain;
}

.treasure-library-image-fallback {
  width:60px;
  height:60px;
  max-width:60px !important;
  max-height:60px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-family:Arial,sans-serif;
  font-size:42px;
  line-height:1;
  font-weight:bold;
}

.treasure-library-name,
.treasure-library-type,
.treasure-library-rarity,
.treasure-library-event,
.treasure-library-trait,
.treasure-library-alt {
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.treasure-library-name {
  font-weight:bold;
}

.treasure-library-type {
  white-space:normal;
}

.treasure-library-rarity {
  font-style:italic;
}

.treasure-library-event {
  white-space:normal;
}

.treasure-library-event-icon {
  margin-right:5px;
}

.treasure-library-trait {
  white-space:normal;
}

.treasure-library-alt {
  min-width:220px;
  max-width:500px;
}

.treasure-library-table td,
.treasure-library-table th {
  box-sizing:border-box;
}

.treasure-library-table-wrap {
  box-sizing:border-box;
}

.treasure-library-table {
  table-layout:fixed;
}

.treasure-library-table td,
.treasure-library-table th {
  min-width:0;
  max-width:100%;
}

.treasure-library-image-cell .treasure-library-image-fallback {
  display:flex;
}

/* =========================================================
   INVENTORY DEPOSIT NOTIFICATION
   ========================================================= */

.deposit-notification-panel {
  position:relative;
  margin:20px 0 25px;
  padding:20px 60px 20px 22px;
  border:2px solid var(--gold,#c69a45);
  border-radius:10px;
  background:var(--panel-2,#2d1e15);
  box-shadow:0 0 18px rgba(198,154,69,.18);
}

.deposit-notification-panel h2 {
  margin:0 0 10px;
  color:var(--gold-bright,#e1bd6a);
}

.deposit-notification-message {
  font-size:1.08em;
  font-weight:bold;
}

.deposit-notification-source {
  margin-top:7px;
}

.deposit-notification-dismiss-form {
  position:absolute;
  top:10px;
  right:10px;
  margin:0;
}

.deposit-notification-dismiss {
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--gold,#c69a45);
  border-radius:50%;
  background:transparent;
  color:var(--gold-bright,#e1bd6a);
  font-size:27px;
  line-height:31px;
  cursor:pointer;
}

.deposit-notification-dismiss:hover {
  background:rgba(198,154,69,.14);
}

/* =========================================================
   SITE TIME
   ========================================================= */

.site-brand-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.site-time {
  display:block;
  width:100%;
  margin-top:3px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}

.site-time-value {
  color:var(--gold-bright);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

.site-time-label {
  color:var(--muted);
}

.breeding-button {
  display:block;
  width:100%;
  text-align:center;
  padding:18px 24px;
  font-size:1.25rem;
  margin:15px 0 25px;
  box-sizing:border-box;
}

/* =========================================================
   PERSONALITY LIBRARY
   ========================================================= */

.personality-search {
  width:100%;
  margin:0 0 20px;
}

.personality-search-form {
  position:relative;
  width:100%;
}

.personality-search-form input[type="text"] {
  width:100%;
  box-sizing:border-box;
  padding:12px 42px 12px 14px;
  border:1px solid var(--brown);
  border-radius:6px;
  background:var(--panel);
  color:var(--text);
  font-family:Georgia,serif;
  font-size:1rem;
}

.personality-search-form input[type="text"]::placeholder {
  color:var(--muted);
}

.personality-search-form input[type="text"]:focus {
  outline:none;
  border-color:var(--gold);
}

.personality-search-clear {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  text-decoration:none;
  font-size:1.4rem;
  line-height:1;
}

.personality-search-clear:hover {
  color:var(--gold-bright);
}

.personality-table th.sortable-header {
  padding:0;
  white-space:nowrap;
}

.personality-table th.sortable-header .table-sort-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  color:inherit;
  text-decoration:none;
}

.personality-table th.sortable-header .table-sort-link:hover {
  color:var(--gold-bright);
}

.personality-table .sort-arrow {
  flex-shrink:0;
  color:var(--gold);
  font-size:.75rem;
  line-height:1;
}

.personality-table td:nth-child(2) {
  white-space:normal;
}

.personality-table .personality-no-results {
  text-align:center;
  padding:30px 15px;
  color:var(--muted);
}

/* =========================================================
   MUNCHIE MAKEOVER
   ========================================================= */

.munchie-page {
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(
      circle at top left,
      rgba(198,154,69,.12),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(107,67,37,.12),
      transparent 35%
    );
}

.munchie-page * {
  box-sizing:border-box;
}

.munchie-container {
  width:min(1100px,calc(100% - 32px));
  margin:0 auto;
  padding:35px 0 70px;
}

.munchie-intro {
  text-align:center;
  margin-bottom:30px;
}

.munchie-intro h1 {
  margin:0 0 10px;
  font-size:clamp(2rem,5vw,3.2rem);
}

.munchie-intro p {
  max-width:700px;
  margin:0 auto;
  color:var(--muted);
}

.munchie-card {
  background:rgba(36,24,18,.88);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:25px;
}

.munchie-select-label {
  display:block;
  font-weight:700;
  margin-bottom:8px;
}

.munchie-select {
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#120d09;
  color:var(--text);
  font-size:1rem;
}

.para-preview {
  display:none;
  grid-template-columns:170px 1fr;
  gap:25px;
  align-items:center;
  margin-top:25px;
  padding:20px;
  border-radius:18px;
  background:rgba(198,154,69,.045);
}

.para-preview.show {
  display:grid;
}

.para-image-wrap {
  text-align:center;
}

.para-image {
  width:150px;
  height:150px;
  object-fit:contain;
  border-radius:18px;
}

.para-name {
  font-size:1.7rem;
  font-weight:800;
  margin-bottom:7px;
  color:var(--gold-bright);
}

.personality-pill {
  display:inline-block;
  padding:7px 13px;
  border-radius:999px;
  font-weight:800;
  margin-top:5px;
}

.category-CALM {
  background:#40513a;
}

.category-FRIENDLY {
  background:#73552d;
}

.category-BOLD {
  background:#92751b;
}

.category-UNUSUAL {
  background:#543b36;
}

.category-NERVOUS {
  background:#75452c;
}

.category-HOSTILE {
  background:#66342d;
}

.item-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:25px;
}

.item-button {
  position:relative;
  border:1px solid var(--line);
  background:rgba(198,154,69,.045);
  color:var(--text);
  border-radius:18px;
  padding:20px;
  cursor:pointer;
  text-align:left;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.item-button:hover:not(:disabled) {
  transform:translateY(-3px);
  background:rgba(198,154,69,.08);
  border-color:var(--gold);
}

.item-button:disabled {
  opacity:.35;
  cursor:not-allowed;
}

.item-name {
  font-size:1.1rem;
  font-weight:800;
  color:var(--gold-bright);
}

.item-quantity {
  display:block;
  margin-top:5px;
  color:var(--muted);
}

.item-description {
  display:block;
  margin-top:12px;
  color:var(--muted);
  line-height:1.4;
}

.makeover-message {
  margin-top:20px;
  min-height:25px;
  text-align:center;
  color:#d99b8c;
}

.history-section {
  margin-top:45px;
}

.history-section h2 {
  margin-bottom:18px;
}

.history-list {
  display:grid;
  gap:12px;
}

.history-entry {
  display:grid;
  grid-template-columns:75px 1fr;
  gap:15px;
  align-items:center;
  padding:14px;
  background:rgba(36,24,18,.78);
  border:1px solid var(--line);
  border-radius:16px;
}

.history-image {
  width:65px;
  height:65px;
  object-fit:contain;
  border-radius:12px;
}

.history-main {
  min-width:0;
}

.history-top {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:5px;
}

.history-para-name {
  font-weight:800;
  color:var(--gold-bright);
}

.history-date {
  color:var(--muted);
  font-size:.85rem;
}

.history-change {
  color:var(--text);
}

.history-old {
  text-decoration:line-through;
  opacity:.65;
}

.history-new {
  font-weight:800;
  color:var(--gold-bright);
}

.history-item {
  color:var(--gold);
  font-weight:700;
}

.history-loading,
.history-empty {
  text-align:center;
  padding:25px;
  color:var(--muted);
}

.result-overlay {
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(8,5,3,.78);
  backdrop-filter:blur(6px);
  align-items:center;
  justify-content:center;
  padding:20px;
}

.result-overlay.show {
  display:flex;
}

.result-dialog {
  width:min(500px,100%);
  background:#21160f;
  border:1px solid var(--line);
  border-radius:25px;
  padding:30px;
  text-align:center;
  box-shadow:0 25px 80px rgba(0,0,0,.5);
  animation:munchiePop .25s ease;
}

@keyframes munchiePop {
  from {
    opacity:0;
    transform:scale(.9) translateY(15px);
  }

  to {
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.result-dialog h2 {
  margin-top:0;
  color:var(--gold-bright);
}

.result-para-image {
  width:150px;
  height:150px;
  object-fit:contain;
}

.result-dialog-text {
  font-size:1.1rem;
  line-height:1.6;
  color:var(--text);
}

.result-dialog button {
  margin-top:20px;
  border:0;
  border-radius:12px;
  padding:12px 25px;
  background:linear-gradient(#d2ab59,#a9792e);
  color:#1b120a;
  font-weight:800;
  cursor:pointer;
}

/* Munchie image safety */

.munchie-page .para-image-wrap {
  width:140px;
  height:140px;
  flex:0 0 140px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#120d09;
  border:1px solid var(--line);
  border-radius:10px;
}

.munchie-page .para-image {
  display:block;
  width:auto;
  height:auto;
  max-width:130px !important;
  max-height:130px !important;
  object-fit:contain;
}

.munchie-page ~ .result-overlay .result-para-image,
.result-overlay .result-para-image {
  display:block;
  width:auto;
  height:auto;
  max-width:220px !important;
  max-height:220px !important;
  object-fit:contain;
  margin:0 auto 18px;
}

.munchie-page .history-image,
.history-entry .history-image {
  display:block;
  width:70px;
  height:70px;
  max-width:70px !important;
  max-height:70px !important;
  flex:0 0 70px;
  object-fit:contain;
  overflow:hidden;
  background:#120d09;
  border:1px solid var(--line);
  border-radius:8px;
}

.munchie-page img {
  box-sizing:border-box;
  max-width:100%;
}

/* =========================================================
   PERSONALITY CHART
   ========================================================= */

.personality-chart {
  width:100%;
  max-width:1100px;
  margin:30px auto;
  font-family:Georgia,"Times New Roman",serif;
  color:#eadfc9;
}

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

.personality-card {
  background:#241812;
  border:1px solid #6a4a35;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.personality-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px 11px;
  border-bottom:1px solid #493525;
}

.personality-dot {
  width:15px;
  height:15px;
  flex:0 0 15px;
  border-radius:50%;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.06),
    0 0 10px rgba(255,255,255,.12);
}

.personality-name {
  margin:0;
  font-size:1.2rem;
  font-weight:bold;
  letter-spacing:.04em;
}

.personality-description {
  margin:2px 0 0;
  color:#bcae96;
  font-size:.92rem;
  font-style:italic;
}

.personality-body {
  padding:15px 18px 18px;
}

.trait-list {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.trait-list li {
  display:inline-block;
  padding:5px 10px;
  background:#17110d;
  border:1px solid #493525;
  border-radius:20px;
  color:#eadfc9;
  font-size:.88rem;
  line-height:1.25;
  white-space:normal;
}

.calm .personality-header {
  background:linear-gradient(135deg,rgba(76,175,80,.18),transparent);
}

.calm .personality-dot {
  background:#4caf50;
}

.friendly .personality-header {
  background:linear-gradient(135deg,rgba(66,133,244,.18),transparent);
}

.friendly .personality-dot {
  background:#4285f4;
}

.bold .personality-header {
  background:linear-gradient(135deg,rgba(245,197,66,.18),transparent);
}

.bold .personality-dot {
  background:#f5c542;
}

.unusual .personality-header {
  background:linear-gradient(135deg,rgba(145,82,190,.18),transparent);
}

.unusual .personality-dot {
  background:#9252be;
}

.nervous .personality-header {
  background:linear-gradient(135deg,rgba(230,126,34,.18),transparent);
}

.nervous .personality-dot {
  background:#e67e22;
}

.hostile .personality-header {
  background:linear-gradient(135deg,rgba(192,57,43,.18),transparent);
}

.hostile .personality-dot {
  background:#c0392b;
}

/* =========================================================
   GENETICS LAB
   ========================================================= */

.genetics-wrap {
  width:min(1100px,calc(100% - 40px));
  margin:0 auto;
  padding:35px 0 90px;
}

.genetics-panel {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:35px;
  box-shadow:0 12px 35px rgba(0,0,0,.28);
}

.genetics-title {
  margin:0 0 10px;
  text-align:center;
  color:var(--gold-bright);
  font-size:clamp(32px,5vw,50px);
}

.genetics-subtitle {
  max-width:850px;
  margin:0 auto 30px;
  text-align:center;
  color:var(--muted);
  line-height:1.7;
}

.genetics-form {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.genetics-field label {
  display:block;
  margin-bottom:8px;
  color:var(--gold-bright);
  font-weight:bold;
}

.genetics-field input {
  width:100%;
  min-height:48px;
  box-sizing:border-box;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:var(--text);
  font:inherit;
}

.genetics-field input:focus {
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(198,154,69,.15);
}

.genetics-parent {
  margin-top:10px;
  min-height:64px;
  padding:11px 13px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-2);
  color:var(--text);
  font-size:.88rem;
  line-height:1.45;
}

.genetics-parent strong {
  color:var(--gold-bright);
  font-size:.95rem;
}

.genetics-role {
  display:inline-block;
  margin-top:4px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-3);
  color:var(--gold-bright);
  font-size:.72rem;
  font-weight:bold;
}

.genetics-compatibility {
  grid-column:1/-1;
  margin-top:2px;
  padding:15px 18px;
  border:1px solid var(--line);
  border-radius:9px;
  text-align:center;
  color:var(--gold-bright);
  background:rgba(198,154,69,.07);
}

.genetics-compatibility.ok {
  border-color:var(--success);
  background:rgba(130,155,85,.12);
  color:#c9dca2;
}

.genetics-compatibility.bad {
  border-color:var(--danger);
  background:rgba(182,92,75,.12);
  color:#e7b5ab;
}

.genetics-compatibility strong {
  display:block;
  margin-bottom:3px;
}

.genetics-actions {
  grid-column:1/-1;
  display:flex;
  justify-content:center;
  margin-top:5px;
}

.genetics-button {
  min-width:190px;
  min-height:46px;
  padding:10px 22px;
  border:1px solid var(--gold);
  border-radius:8px;
  background:var(--gold);
  color:#20160c;
  font:inherit;
  font-weight:bold;
  cursor:pointer;
  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.genetics-button:hover {
  background:var(--gold-bright);
  transform:translateY(-1px);
  box-shadow:0 5px 15px rgba(198,154,69,.18);
}

.genetics-error {
  margin-top:20px;
  padding:15px 18px;
  border:1px solid var(--danger);
  border-radius:9px;
  background:rgba(182,92,75,.12);
  color:#e7b5ab;
  text-align:center;
}

.genetics-results {
  margin-top:35px;
}

.genetics-results h2 {
  margin:0 0 22px;
  color:var(--gold-bright);
  text-align:center;
}

.genetics-results-subtitle {
  margin:-10px auto 20px;
  color:var(--muted);
  text-align:center;
  font-size:.9rem;
}

.genetics-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
}

.genetics-set {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:8px 5px;
  box-sizing:border-box;
  border:1px solid rgba(198,154,69,.15);
  border-radius:8px;
  background:var(--panel-2);
  transition:
    border-color .15s ease,
    transform .15s ease;
}

.genetics-set:hover {
  border-color:var(--gold);
  transform:translateY(-1px);
}

.genetics-swatch {
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:inline-block;
  border:1px solid rgba(255,255,255,.28);
  border-radius:5px;
  box-shadow:inset 0 1px rgba(255,255,255,.1);
}

.genetics-copy {
  display:flex;
  justify-content:center;
  margin-top:22px;
}

.genetics-copy button {
  min-height:42px;
  padding:8px 18px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel-2);
  color:var(--gold-bright);
  font:inherit;
  font-weight:bold;
  cursor:pointer;
}

.genetics-copy button:hover {
  background:var(--panel-3);
  border-color:var(--gold);
}

/* =========================================================
   LEVEL / XP
   ========================================================= */

.para-level-xp {
  margin:14px 0;
}

.para-level-xp-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.para-level-xp-header strong {
  font-size:1.05em;
}

.para-level-xp-details {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:.85em;
}

/* =========================================================
   PROFILE PREVIEW
   ========================================================= */

.profile-preview-button {
  cursor:pointer;
  display:inline-block;
  margin-left:6px;
  text-decoration:none;
  border:0;
  background:none;
  padding:0;
  font:inherit;
  line-height:1;
}

.profile-preview-content {
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}

.profile-preview-field {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.profile-preview-field > span {
  font-weight:700;
  font-size:.85em;
  opacity:.75;
}

.profile-preview-field > div {
  line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.profile-modal-card {
  max-width:650px;
}

/* =========================================================
   DNA / FAMILY TREE ICONS
   ========================================================= */

.dna-link,
.family-tree-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-width:24px;
  height:24px;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
}

.dna-link:hover,
.family-tree-link:hover {
  text-decoration:none;
  transform:scale(1.12);
}

.family-tree-link {
  margin-left:1px;
}

.database-para-info-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-width:24px;
  height:24px;
  line-height:1;
  cursor:help;
  text-decoration:none;
  user-select:none;
}

.database-para-info-icon:hover {
  transform:scale(1.12);
}

.database-para-info-icon:focus {
  outline:1px solid var(--gold-bright,#e1bd6a);
  outline-offset:2px;
  border-radius:4px;
}

/* =========================================================
   FAMILY TREE MODAL
   ========================================================= */

.database-family-tree-modal-card {
  width:min(1450px,calc(100vw - 30px));
  max-width:1450px;
  max-height:calc(100vh - 30px);
  overflow:hidden;
  box-sizing:border-box;
}

.database-family-tree-modal-content {
  display:flex;
  flex-direction:column;
  min-width:0;
}

.database-family-tree-modal-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  margin-bottom:12px;
}

.database-family-tree-title {
  margin:0 0 5px;
}

.database-family-tree-note {
  margin:0;
}

.database-family-tree-close {
  flex:0 0 auto;
}

.database-family-tree-body {
  max-height:calc(100vh - 150px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.database-family-tree-wrap {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:hidden;
  border:1px solid rgba(198,154,69,.50);
  border-radius:10px;
  background:rgba(0,0,0,.10);
}

.database-family-tree-table {
  border-collapse:collapse;
  width:100%;
  min-width:0;
  table-layout:fixed;
}

.database-family-tree-table th,
.database-family-tree-table td {
  border:1px solid rgba(198,154,69,.42);
  padding:7px 5px;
  text-align:center;
  vertical-align:middle;
  background:rgba(36,24,18,.48);
}

.database-family-tree-generation-label {
  width:155px;
  min-width:155px;
  padding:7px 9px !important;
  color:var(--gold-bright,#e1bd6a);
  font-size:.68rem;
  line-height:1.2;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:rgba(23,17,13,.82) !important;
}

.database-family-tree-node-link {
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text,#eadfc9);
}

.database-family-tree-node-link:hover {
  color:var(--gold-bright,#e1bd6a);
}

.database-family-tree-node-link:hover .database-family-tree-node-id {
  text-decoration:underline;
}

.database-family-tree-node-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:0;
  width:100%;
}

.database-family-tree-node-image {
  width:52px;
  max-width:52px;
  height:auto !important;
  max-height:none !important;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

.database-family-tree-node-fallback {
  width:52px;
  min-width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid rgba(198,154,69,.45);
  border-radius:6px;
  color:var(--gold-bright,#e1bd6a);
  font-weight:bold;
  font-size:1rem;
  background:rgba(0,0,0,.18);
  flex:0 0 auto;
}

.database-family-tree-node-id {
  display:block;
  color:var(--gold-bright,#e1bd6a);
  font-size:.8rem;
  line-height:1.1;
  font-weight:700;
  white-space:nowrap;
}

.database-family-tree-node-name {
  display:block;
  max-width:100%;
  color:var(--text,#eadfc9);
  font-size:.68rem;
  line-height:1.15;
  font-weight:600;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.database-family-tree-current-cell {
  background:rgba(198,154,69,.13) !important;
}

.database-family-tree-current .database-family-tree-node-image {
  width:64px;
  max-width:64px;
  height:auto !important;
  max-height:none !important;
}

.database-family-tree-current .database-family-tree-node-fallback {
  width:64px;
  min-width:64px;
  height:64px;
}

.database-family-tree-current .database-family-tree-node-id {
  font-size:.9rem;
}

.database-family-tree-node-missing {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin:0 auto;
  box-sizing:border-box;
  border:1px dashed rgba(198,154,69,.35);
  border-radius:6px;
  color:#9f9585;
  font-weight:bold;
  background:rgba(0,0,0,.12);
}

.database-family-tree-empty,
.database-family-tree-loading {
  padding:30px 10px;
  text-align:center;
  color:var(--text,#eadfc9);
}

/* =========================================================
   DATABASE PARA TABLE
   ========================================================= */

.database-para-table th:nth-child(2),
.database-para-table td:nth-child(2) {
  width:70px;
  min-width:70px;
  white-space:nowrap;
}

.database-para-table th:nth-child(8),
.database-para-table td:nth-child(8) {
  width:125px;
  min-width:125px;
  white-space:nowrap;
}

.database-para-table th:nth-child(10),
.database-para-table td:nth-child(10) {
  width:75px;
  min-width:75px;
  white-space:nowrap;
}

.data-table th,
.data-table td {
  text-align:center;
  vertical-align:middle;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px) {
  .blorbarium-gallery {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:1000px) {
  .results-toolbar {
    flex-wrap:wrap;
  }

  .results-toolbar .pagination {
    margin-left:auto;
  }
}

@media(max-width:900px) {
  .grid.two,
  .grid.three,
  .form-grid {
    grid-template-columns:1fr;
  }

  .header-inner {
    align-items:flex-start;
    flex-direction:column;
  }

  .main-nav {
    justify-content:flex-start;
  }

  .page-shell {
    padding:22px 12px;
  }

  .map {
    min-height:850px;
  }

  .map-area,
  .map-area[data-den-open] {
    width:165px;
    max-width:165px;
    min-height:150px;
    padding:9px;
  }

  .map-area::before {
    height:48px;
    font-size:2.6rem;
  }

  .map-area strong {
    font-size:.85rem;
  }

  .map-area small {
    font-size:.61rem;
  }

  .map-area .tiny {
    padding:4px 6px;
    font-size:.66rem;
  }

  .map-area.area-1 {
    left:20%;
    top:17%;
  }

  .map-area.area-2 {
    left:61%;
    top:12%;
  }

  .map-area.area-3 {
    left:81%;
    top:30%;
  }

  .map-area.area-4 {
    left:23%;
    top:48%;
  }

  .map-area.area-6 {
    left:55%;
    top:43%;
  }

  .map-area.area-5 {
    left:79%;
    top:58%;
  }

  .map-area.area-7 {
    left:48%;
    top:77%;
  }

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

@media(max-width:850px) {
  .gallery-folder-grid,
  .gallery-image-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .gallery-folder-preview img {
    height:64px;
  }
}

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

  .blorbarium-controls {
    justify-content:center;
  }

  .blorbarium-size-buttons {
    justify-content:center;
  }

  .search-row {
    align-items:center;
    flex-wrap:wrap;
  }

  .database-search-field {
    flex:1 1 220px;
    min-width:0;
    max-width:none;
  }

  .database-controls {
    flex:1 1 100%;
    width:100%;
  }

  .database-controls .database-pagination-controls {
    justify-content:flex-start;
  }

  .pagination-pages {
    justify-content:flex-start;
  }
}

@media(max-width:750px) {
  .para-toolbar {
    flex-wrap:wrap;
  }

  .para-toolbar .para-search {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:none;
  }

  .para-toolbar .search-button {
    flex:0 0 auto;
  }

  .para-toolbar .para-sort-label {
    flex:0 0 auto;
    margin-left:0;
  }

  .para-toolbar .para-sort {
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:none;
  }

  .results-toolbar {
    flex-direction:column;
    align-items:stretch;
  }

  .results-toolbar .search-row {
    grid-template-columns:minmax(0,1fr) auto;
    width:100%;
  }

  .results-toolbar .search-row input[type="search"] {
    width:100%;
  }

  .results-toolbar .pagination {
    justify-content:flex-start;
    margin-left:0;
  }

  .dna-modal {
    padding:12px;
  }

  .dna-modal-card {
    max-height:94vh;
    padding:20px;
  }

  .dna-content {
    grid-template-columns:1fr;
  }

  .dna-colors {
    width:100%;
  }

  .dna-color-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dna-detail-row {
    grid-template-columns:130px 1fr;
  }
}

@media(max-width:700px) {
  .library-index-table-wrap {
    max-width:100%;
  }

  .library-index-table th,
  .library-index-table td {
    padding:12px 14px;
  }

  .library-controls {
    align-items:stretch;
  }

  .library-page-size {
    width:100%;
  }

  .library-page-size select {
    width:100%;
  }

  .library-table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .library-table {
    width:100%;
    max-width:100%;
    min-width:0;
    table-layout:fixed;
  }

  .library-table th,
  .library-table td {
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .treasure-library-table th,
  .treasure-library-table td {
    padding:9px 10px;
  }

  .treasure-library-alt {
    min-width:180px;
  }

  .store-item-image {
    height:100px;
    min-height:100px;
    max-height:100px !important;
  }

  .store-item-image img {
    max-width:100% !important;
    max-height:100%;
  }

.store-edit-quantity{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-top:10px;
}

.store-edit-quantity input{
    width:100px;
    box-sizing:border-box;
}

@media(max-width:800px){
    .store-edit-quantity input{
        width:100%;
    }
}

  .treasure-library-table-wrap {
    width:100%;
    max-width:100%;
    overflow-x:auto;
  }

  .treasure-library-table {
    width:100%;
    max-width:100%;
    table-layout:fixed;
  }

  .treasure-library-image-cell {
    width:70px;
    min-width:70px;
    max-width:70px !important;
  }

  .treasure-library-image {
    width:50px;
    height:auto;
    max-width:50px !important;
    max-height:50px;
  }

  .treasure-library-image-fallback {
    width:50px;
    height:50px;
    max-width:50px !important;
    max-height:50px;
    font-size:36px;
  }

  .personality-search {
    margin-bottom:15px;
  }

  .personality-table {
    min-width:760px;
  }

  .personality-table th.sortable-header .table-sort-link {
    padding:10px 12px;
  }

  .personality-grid {
    grid-template-columns:1fr;
  }

  .para-preview {
    grid-template-columns:1fr;
    text-align:center;
  }

  .item-grid {
    grid-template-columns:1fr;
  }

  .history-top {
    flex-direction:column;
    gap:3px;
  }

  .genetics-wrap {
    width:calc(100% - 20px);
    padding:20px 0 60px;
  }

  .genetics-panel {
    padding:24px 16px;
  }

  .genetics-form {
    grid-template-columns:1fr;
  }

  .genetics-compatibility,
  .genetics-actions {
    grid-column:auto;
  }

  .genetics-grid {
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    gap:8px !important;
    padding:8px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .genetics-grid .genetics-set {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:52px !important;
    height:auto !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    padding:8px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    flex:0 0 auto !important;
  }

  .genetics-grid .genetics-set .genetics-swatch {
    display:block !important;
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    max-width:27px !important;
    min-height:27px !important;
    max-height:27px !important;
    flex:0 0 27px !important;
    box-sizing:border-box !important;
  }

  .database-family-tree-modal-card {
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
  }

  .database-family-tree-modal-header {
    margin-bottom:8px;
  }

  .database-family-tree-body {
    max-height:calc(100vh - 125px);
  }

  .database-family-tree-wrap {
    border-radius:8px;
  }

  .database-family-tree-table {
    width:100%;
    min-width:0;
  }

  .database-family-tree-table th,
  .database-family-tree-table td {
    padding:5px 3px;
  }

  .database-family-tree-generation-label {
    width:140px;
    min-width:140px;
    font-size:.62rem;
  }

  .database-family-tree-node-image {
    width:48px;
    max-width:48px;
    height:auto !important;
    max-height:none !important;
  }

  .database-family-tree-node-fallback {
    width:48px;
    min-width:48px;
    height:48px;
  }

  .database-family-tree-current .database-family-tree-node-image {
    width:58px;
    max-width:58px;
    height:auto !important;
    max-height:none !important;
  }

  .database-family-tree-current .database-family-tree-node-fallback {
    width:58px;
    min-width:58px;
    height:58px;
  }

  .database-family-tree-node-name {
    font-size:.62rem;
  }

  .munchie-page .para-image-wrap {
    width:110px;
    height:110px;
    flex:0 0 110px;
  }

  .munchie-page .para-image {
    max-width:100px !important;
    max-height:100px !important;
  }

  .result-overlay .result-para-image {
    max-width:180px !important;
    max-height:180px !important;
  }

  .munchie-page .history-image,
  .history-entry .history-image {
    width:60px;
    height:60px;
    max-width:60px !important;
    max-height:60px !important;
    flex-basis:60px;
  }

  .site-time {
    font-size:.68rem;
  }

  .explore-page-header {
    flex-direction:column;
    align-items:stretch;
  }

  .explorer-profile {
    flex-direction:column;
    align-items:stretch;
  }

  .explorer-profile-image {
    width:150px;
    max-width:150px !important;
    margin:0 auto;
  }

  .explorer-profile-image img {
    width:150px;
    max-width:150px !important;
    height:auto;
    max-height:150px;
  }

  .explorer-profile-info {
    text-align:center;
  }

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

@media(max-width:650px) {
  .explore-page-header {
    flex-direction:column;
    align-items:stretch;
  }

  .explorer-profile {
    flex-direction:column;
    align-items:stretch;
  }

  .explorer-profile-image {
    width:150px;
    max-width:150px !important;
    margin:0 auto;
  }

  .explorer-profile-image img {
    width:150px;
    max-width:150px !important;
    height:auto;
    max-height:150px;
  }

  .explorer-profile-info {
    text-align:center;
  }

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

@media(max-width:600px) {
  .para-grid,
  .treasure-grid {
    grid-template-columns:1fr;
  }

  .search-row {
    align-items:stretch;
  }

  .inventory-row {
    grid-template-columns:60px 1fr;
  }

  .inventory-row .qty {
    grid-column:2;
  }

  .map {
    min-height:1120px;
  }

  .map-area,
  .map-area[data-den-open] {
    width:170px;
    max-width:170px;
    min-height:150px;
  }

  .map-area::before {
    height:48px;
    font-size:2.7rem;
  }

  .map-area strong {
    font-size:.86rem;
  }

  .map-area small {
    font-size:.63rem;
  }

  .map-area.area-1 {
    left:29%;
    top:9%;
  }

  .map-area.area-2 {
    left:70%;
    top:18%;
  }

  .map-area.area-3 {
    left:31%;
    top:29%;
  }

  .map-area.area-4 {
    left:70%;
    top:38%;
  }

  .map-area.area-6 {
    left:30%;
    top:54%;
  }

  .map-area.area-5 {
    left:70%;
    top:61%;
  }

  .map-area.area-7 {
    left:50%;
    top:79%;
  }

  .keeper-profile-header {
    flex-direction:column;
    text-align:center;
  }

  .keeper-profile-icon {
    width:85px;
    height:85px;
  }

  .blorbarium-gallery {
    grid-template-columns:1fr;
    gap:18px;
  }

  .blorbarium-item img {
    height:auto;
    max-height:400px;
  }

  .blorbarium-controls {
    justify-content:center;
    padding:14px;
    gap:12px;
  }

  .blorbarium-size-buttons {
    width:100%;
    justify-content:center;
    gap:8px;
  }

  .blorbarium-button {
    min-width:58px;
  }

  .blorbarium-pagination {
    gap:7px;
  }

  .blorbarium-prev,
  .blorbarium-next {
    width:45px;
    height:55px;
    font-size:27px;
  }

  .blorbarium-prev {
    left:10px;
  }

  .blorbarium-next {
    right:10px;
  }

  .blorbarium-close {
    top:10px;
    right:12px;
  }

  .blorbarium-lightbox {
    padding:20px;
  }

  .gallery-page {
    width:100%;
  }

  .gallery-folder-grid,
  .gallery-image-grid {
    grid-template-columns:1fr;
  }

  .gallery-folder-preview img {
    height:60px;
  }

  .gallery-image img {
    height:auto;
    max-height:420px;
  }

  .gallery-folder {
    padding:15px;
    padding-right:44px;
  }

  .search-row {
    align-items:stretch;
  }

  .database-search-field {
    flex:1 1 100%;
    width:100%;
    max-width:none;
  }

  .database-search-button {
    flex:0 0 auto;
  }

  .database-controls {
    flex:1 1 100%;
    width:100%;
  }

  .database-controls .database-pagination-controls {
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }

  .database-show-select {
    flex:0 0 auto;
  }

  .pagination-pages {
    justify-content:flex-start;
    width:auto;
    max-width:100%;
  }
}

@media(max-width:500px) {
  .pagination {
    flex-direction:column;
    align-items:flex-start;
  }

  .pagination-options,
  .pagination-pages {
    flex-wrap:wrap;
  }
}

@media(max-width:450px) {
  .dna-color-list {
    grid-template-columns:1fr;
  }

  .dna-detail-row {
    grid-template-columns:1fr;
    gap:3px;
  }
}

/* =========================================================
   MOBILE / SAFARI IMAGE CONTAINMENT
   ========================================================= */

@media(max-width:700px) {
  .item-card,
  .store-item,
  .store-item-card,
  .treasure-card,
  .my-treasure-card,
  .library-item,
  .library-item-card,
  .item-image,
  .item-image-wrap,
  .store-item-image,
  .treasure-image,
  .my-treasure-image,
  .library-item-image {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box;
  }

  .item-card img,
  .store-item img,
  .store-item-card img,
  .treasure-card img,
  .my-treasure-card img,
  .library-item img,
  .library-item-card img,
  .item-image img,
  .item-image-wrap img,
  .store-item-image img,
  .treasure-image img,
  .my-treasure-image img,
  .library-item-image img {
    max-width:100% !important;
    max-height:100% !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }
}

/* =========================================================
   BLORBARIUM MISSING-IMAGE FALLBACK
   Scoped to the Blorbarium gallery to avoid conflicts with the
   existing database/item fallback styles.
   ========================================================= */
.blorbarium-item .blorbarium-image-wrap {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:250px;
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
  background:#120d09;
  border-radius:8px;
}

.blorbarium-item .blorbarium-image-wrap > img {
  display:block;
  width:100% !important;
  max-width:100% !important;
  height:250px !important;
  max-height:100% !important;
  object-fit:contain !important;
}

.blorbarium-item .blorbarium-image-fallback {
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:var(--gold-bright,#e1bd6a);
  font-family:Georgia,"Times New Roman",serif;
  font-size:5rem;
  font-weight:bold;
  line-height:1;
  user-select:none;
}

.blorbarium-item .blorbarium-image-wrap.is-missing > img {
  display:none !important;
}

.blorbarium-item .blorbarium-image-wrap.is-missing > .blorbarium-image-fallback {
  display:flex;
}




/* ============================================================
   FAMILY TREE BUTTON
   ============================================================ */
.family-tree-open-button {
    margin: 10px 0 4px;
}

/* ============================================================
   FAMILY TREE MODAL AND RESPONSIVE TREE
   Single consolidated section; no horizontal scrolling.
   ============================================================ */
.family-tree-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .78);
    align-items: center;
    justify-content: center;
}

.family-tree-modal.is-open {
    display: flex;
}

.family-tree-modal-inner {
    position: relative;
    width: 100%;
    max-width: 1400px;
    min-width: 0;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid rgba(198, 154, 69, .60);
    border-radius: 12px;
    background: var(--panel, #241812);
    color: var(--text, #eadfc9);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}

.family-tree-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-width: 0;
    margin-bottom: 12px;
}

.family-tree-modal-title {
    min-width: 0;
    margin: 0;
    color: var(--gold-bright, #e1bd6a);
    overflow-wrap: anywhere;
}

.family-tree-modal-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(198, 154, 69, .55);
    border-radius: 7px;
    background: rgba(0, 0, 0, .20);
    color: var(--text, #eadfc9);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.family-tree-modal-close:hover {
    background: rgba(198, 154, 69, .15);
    color: var(--gold-bright, #e1bd6a);
}

.family-tree-modal-note {
    margin: 0 0 12px;
}

.family-tree-modal-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: calc(100vh - 155px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.family-tree-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 14px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(198, 154, 69, .50);
    border-radius: 10px;
    background: rgba(0, 0, 0, .10);
}

.family-tree-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.family-tree-table th,
.family-tree-table td {
    min-width: 0;
    max-width: 100%;
    padding: 5px 3px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    vertical-align: top;
}

.family-tree-generation-label {
    width: clamp(38px, 7vw, 90px);
    min-width: 0;
    padding: 5px 3px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    font-size: clamp(.45rem, 1.1vw, .7rem);
    line-height: 1.15;
}

.family-tree-node-cell {
    min-width: 0;
    padding: 3px 1px;
    overflow: hidden;
    vertical-align: top;
}

.family-tree-node-link,
.family-tree-node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.family-tree-node-link {
    color: inherit;
    text-decoration: none;
}

.family-tree-node-link:hover {
    color: var(--gold-bright, #e1bd6a);
}

.family-tree-node-image {
    display: block;
    width: clamp(12px, 4vw, 60px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto;
}

.family-tree-node-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(12px, 4vw, 52px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: 1px solid rgba(198, 154, 69, .45);
    border-radius: 6px;
    color: var(--gold-bright, #e1bd6a);
    font-size: clamp(.55rem, 1.2vw, 1rem);
    font-weight: bold;
    background: rgba(0, 0, 0, .18);
}

.family-tree-node-id {
    display: block;
    max-width: 100%;
    color: var(--gold-bright, #e1bd6a);
    font-size: clamp(.45rem, 1.2vw, .8rem);
    line-height: 1.1;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.family-tree-node-name {
    display: block;
    max-width: 100%;
    font-size: clamp(.4rem, 1.1vw, .68rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.family-tree-current-cell {
    background: rgba(198, 154, 69, .13) !important;
}

.family-tree-current .family-tree-node-image {
    width: clamp(18px, 5vw, 64px);
    max-width: 100%;
}

.family-tree-current .family-tree-node-fallback {
    width: clamp(18px, 5vw, 64px);
    max-width: 100%;
}

.family-tree-current .family-tree-node-id {
    font-size: clamp(.5rem, 1.4vw, .9rem);
}

.family-tree-node-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(12px, 4vw, 52px);
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px dashed rgba(198, 154, 69, .35);
    border-radius: 6px;
    color: #9f9585;
    font-weight: bold;
    background: rgba(0, 0, 0, .12);
}

@media (max-width: 700px) {
    .family-tree-modal {
        padding: 8px;
        align-items: center;
    }

    .family-tree-modal-inner {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        padding: 10px 6px;
        border-radius: 9px;
    }

    .family-tree-modal-header {
        gap: 8px;
        margin-bottom: 8px;
    }

    .family-tree-modal-title {
        font-size: 1rem;
    }

    .family-tree-modal-close {
        width: 32px;
        height: 32px;
    }

    .family-tree-modal-body {
        max-height: calc(100vh - 120px);
    }

    .family-tree-wrap {
        margin-left: 0;
        margin-right: 0;
        border-radius: 6px;
    }

    .family-tree-table th,
    .family-tree-table td {
        padding: 3px 1px;
    }

    .family-tree-generation-label {
        width: clamp(30px, 9vw, 58px);
        padding: 3px 2px;
        font-size: .48rem;
    }

    .family-tree-node-content,
    .family-tree-node-link {
        gap: 2px;
    }

    .family-tree-node-image {
        width: clamp(10px, 5vw, 36px);
    }

    .family-tree-node-fallback {
        width: clamp(10px, 5vw, 36px);
        font-size: .65rem;
    }

    .family-tree-current .family-tree-node-image,
    .family-tree-current .family-tree-node-fallback {
        width: clamp(14px, 6vw, 44px);
    }

    .family-tree-node-id {
        font-size: clamp(.38rem, 1.8vw, .62rem);
    }

    .family-tree-node-name {
        font-size: clamp(.34rem, 1.5vw, .54rem);
        line-height: 1.1;
    }
}



/* =========================================
   TREASURE RARITY ICON OVERLAY
   ========================================= */

.my-treasure-image-wrap {
    position: relative !important;
}

.my-treasure-rarity {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 50 !important;

    display: block !important;
    width: 35px !important;
    height: 35px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none !important;
}

@media (max-width: 380px) {
    .my-treasure-rarity {
        width: 25px !important;
        height: 25px !important;
        top: 4px !important;
        right: 4px !important;
    }
}


.species-rarities-field select {
    width: 100%;
    min-width: 120px;
    box-sizing: border-box;
}

.species-rarities-field .help {
    font-size: 0.78rem;
    margin-top: 6px;
}



/* Trick or Treat header banner */
#tt-header-widget-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

#tt-header-widget-wrap[hidden] {
    display: none !important;
}

#tt-header-widget-wrap .tt-header-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
}

#tt-header-widget-wrap .tt-header-widget img {
    display: block;
    flex: 0 0 auto;
    width: 168px;
    max-width: 40%;
    height: auto;
    margin: 0;
}

#tt-header-widget-wrap .tt-header-widget h1 {
    margin: 0;
    text-align: center;
}



/* PARABLORB GALLERY — force thumbnails and popup to display correctly */
.para-gallery-item {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.para-gallery-item img {
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    pointer-events: none;
}

.para-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(8, 6, 5, .94) !important;
}

.para-lightbox.is-open {
    display: flex !important;
}

.para-lightbox-content,
.para-lightbox-image-wrap {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.para-lightbox-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}