:root {
  --ink: #4d3826;
  --ink-soft: #7e664d;
  --cream: #f5e7d0;
  --cream-2: #ead2b1;
  --cream-3: #dfbe91;
  --paper: #f8ead4;
  --brown: #2a1a10;
  --brown-2: #3c2719;
  --gold: #b88543;
  --olive: #555533;
  --shadow: rgba(34, 18, 8, .34);
  --locked: #cfc1ae;
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #1e130c; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 70% 18%, rgba(161, 104, 50, .14), transparent 28%),
    radial-gradient(circle at 20% 78%, rgba(97, 72, 36, .11), transparent 24%),
    linear-gradient(180deg, #25170f, #1c120d 70%, #21160f);
  color: var(--ink);
}
button { font: inherit; }

.app-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 28px;
}

.brand-row {
  min-height: 86px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  color: #f4dfbd;
  padding: 0 20px 16px;
}
.brand-lockup { display: flex; align-items: center; gap: 15px; }
.fox-mark {
  width: 66px; height: 66px; border-radius: 50%;
  border: 1px solid rgba(213, 158, 82, .52);
  display: grid; place-items: center;
  color: #d99d50;
  box-shadow: inset 0 0 0 5px rgba(184, 133, 67, .07);
}
.fox-mark svg { width: 42px; height: 42px; }
.brand-lockup h1 { margin: 0; font-size: clamp(27px, 3vw, 42px); letter-spacing: .045em; font-weight: 600; }
.brand-lockup p { margin: 3px 0 0; font-size: 18px; letter-spacing: .03em; }
.sparkle { font-size: 30px; color: #b88a51; transform: translateY(-13px); }
.wallet-pill {
  background: rgba(252, 236, 211, .08);
  color: #e4c9a2;
  border: 1px solid rgba(228, 201, 162, .2);
  border-radius: 999px;
  padding: 10px 15px;
  cursor: pointer;
}
.wallet-pill:hover { background: rgba(252, 236, 211, .13); }

.workspace { display: grid; grid-template-columns: .92fr 1.08fr; gap: 22px; align-items: stretch; }
.panel {
  background: linear-gradient(145deg, var(--paper), #f0dcc0);
  border: 2px solid rgba(108, 74, 45, .52);
  box-shadow:
    0 16px 36px var(--shadow),
    inset 0 0 0 4px rgba(255,255,255,.32),
    inset 0 0 0 6px rgba(162, 116, 72, .14);
}
.preview-card, .asset-card { min-height: 730px; }
.preview-card {
  border-radius: var(--radius-xl);
  padding: 22px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.soft-button {
  align-self: flex-start;
  border: 1px solid #d4b78f;
  background: #f4dfc0;
  color: #4a382a;
  border-radius: 12px;
  padding: 11px 18px;
  box-shadow: 0 3px 8px rgba(64, 38, 18, .13), inset 0 1px 0 #fff4e5;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
}
.soft-button:hover { transform: translateY(-1px); }
.preview-canvas {
  flex: 1;
  min-height: 520px;
  margin-top: 16px;
  border: 1px dashed rgba(120, 88, 56, .12);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(180deg, rgba(255,251,244,.44), rgba(236,211,181,.18));
}
.empty-preview {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 28px; color: rgba(93, 68, 46, .46);
  transition: opacity .2s ease;
}
.empty-preview strong { display: block; font-size: 21px; margin: 7px 0 4px; }
.empty-preview small { max-width: 330px; font: 15px/1.4 Arial, sans-serif; }
.empty-star { font-size: 28px; color: rgba(173,125,65,.46); }
.render-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.render-stack img {
  position: absolute;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
}
.camera-button {
  position: absolute; right: 31px; bottom: 106px;
  width: 50px; height: 50px; border-radius: 13px;
  border: 2px solid #d0af83; background: #745233; color: white;
  box-shadow: 0 4px 12px rgba(57, 34, 16, .23); cursor: pointer;
  font-size: 24px;
}
.save-button {
  margin-top: 18px;
  align-self: center;
  width: min(92%, 410px);
  min-height: 68px;
  border: 2px solid #7b6945;
  border-radius: 14px;
  background: linear-gradient(#636241, #4f5135);
  color: #fff7e9;
  box-shadow: inset 0 0 0 3px rgba(237, 208, 149, .24), 0 4px 8px rgba(63, 44, 23, .24);
  display: flex; align-items: center; justify-content: space-around;
  text-transform: uppercase; letter-spacing: .055em; font-size: 20px;
  cursor: pointer;
}
.save-button:hover { filter: brightness(1.05); }

.asset-card {
  border-radius: var(--radius-xl);
  padding: 84px 18px 18px;
  position: relative;
  display: flex; flex-direction: column;
}
.asset-title-tab {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  min-width: 246px; height: 84px;
  border: 2px solid rgba(108, 74, 45, .52);
  border-bottom: 0;
  background: linear-gradient(#f7ead6, #f0ddc2);
  border-radius: 20px 20px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.28);
}
.asset-title-tab h2 { margin: 0; font-size: 26px; letter-spacing: .05em; }
.hanger-icon { font-size: 32px; transform: rotate(-9deg); }
.category-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; margin-bottom: 18px;
}
.category-tab {
  border: 1px solid #d4b893; background: rgba(235,216,191,.58);
  border-radius: 14px; min-height: 62px; cursor: pointer; color: #6e5943;
  display: grid; place-items: center; position: relative;
  transition: .16s ease;
}
.category-tab svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.category-tab:hover { background: rgba(247,230,204,.9); transform: translateY(-1px); }
.category-tab.active {
  background: #e6bd79;
  color: #4e3821;
  border-color: #b37e3a;
  box-shadow: inset 0 0 0 2px rgba(255,247,225,.52), 0 2px 6px rgba(90,59,27,.15);
}
.category-tab .tab-label {
  position: absolute; bottom: -18px; font-size: 10px; text-transform: uppercase;
  opacity: 0; pointer-events: none; background: #2e1d13; color: #f8e7cc; padding: 3px 6px; border-radius: 5px;
}
.category-tab:hover .tab-label { opacity: 1; }
.asset-section-heading { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 3px 2px 15px; }
.asset-section-heading span { height: 1px; background: linear-gradient(90deg, transparent, rgba(160,118,73,.52)); }
.asset-section-heading span:last-child { background: linear-gradient(90deg, rgba(160,118,73,.52), transparent); }
.asset-section-heading h3 { margin: 0; text-transform: uppercase; font-size: 18px; letter-spacing: .06em; }
.asset-scroll { flex: 1; overflow-y: auto; padding: 2px 11px 2px 3px; scrollbar-color: #8b6846 #ead7bc; scrollbar-width: thin; }
.asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; }
.asset-tile {
  aspect-ratio: 1 / 1.08;
  border: 1px solid #d1b48e;
  background: linear-gradient(145deg, rgba(252,244,231,.8), rgba(236,216,190,.67));
  border-radius: 14px; position: relative; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.33);
  cursor: pointer; color: #7d664f;
}
.asset-tile:hover:not(.locked) { border-color: #a87438; transform: translateY(-1px); }
.asset-tile.selected { outline: 3px solid rgba(178,129,55,.62); outline-offset: -3px; }
.asset-tile.locked {
  background: linear-gradient(145deg, #d8caba, #c8b7a2);
  cursor: not-allowed;
  color: #725e49;
}
.asset-tile .lock { font-size: 34px; opacity: .82; }
.asset-tile .locked-label { margin-top: 6px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.asset-tile .slot-mark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background: #e2bd87; color: #7a5c39; display: flex; align-items: center; padding-left: 8px;
}
.asset-tile .empty-asset-copy { text-align: center; font: 12px/1.3 Arial, sans-serif; opacity: .46; padding: 10px; }
.asset-preview-image { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.collection-progress {
  margin-top: 13px; min-height: 44px; border: 1px solid #d5b995; border-radius: 12px;
  background: rgba(248,232,208,.62);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 0 13px;
  text-transform: uppercase; letter-spacing: .055em; font-size: 13px;
}
.collection-progress strong { font-size: 15px; }

.saved-panel { margin-top: 23px; border-radius: var(--radius-xl); padding: 20px 24px 0; }
.saved-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.saved-heading h2 { margin: 0; font-size: 20px; letter-spacing: .035em; }
.saved-heading span { color: #796249; font-size: 14px; text-transform: uppercase; }
.saved-content { display: grid; grid-template-columns: 1fr 270px; gap: 20px; align-items: stretch; padding: 12px 0 14px; }
.saved-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.saved-slot {
  min-height: 225px; border: 1px solid #d1b48e; border-radius: 16px;
  background: linear-gradient(145deg, rgba(252,244,231,.64), rgba(236,216,190,.42));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.27);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; overflow: hidden; position: relative;
}
.saved-slot.locked { color: #705b45; text-align: center; gap: 6px; }
.saved-slot.locked .lock { font-size: 32px; }
.saved-slot.locked small { font: 13px/1.4 Arial, sans-serif; padding: 0 12px; }
.saved-slot .saved-preview { flex: 1; min-height: 170px; display: grid; place-items: center; color: rgba(94,70,45,.45); font: 13px Arial, sans-serif; padding: 10px; text-align:center; }
.saved-slot-actions { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid #d3b68f; }
.saved-slot .load-button,
.saved-slot .clear-style-button { border: 0; background: #e8c38d; padding: 9px; text-transform: uppercase; letter-spacing: .06em; color: #4d3927; cursor:pointer; }
.saved-slot .load-button { border-right: 1px solid #d3b68f; }
.saved-slot .clear-style-button { min-width: 72px; background: rgba(240,218,186,.92); color: #76563a; }
.saved-slot .load-button:hover,
.saved-slot .clear-style-button:hover { filter: brightness(1.035); }
.note-card {
  min-height: 230px; background: #f3dfc2; border: 1px solid #d7b991; transform: rotate(1deg);
  box-shadow: 0 7px 12px rgba(77,49,27,.13); padding: 34px 22px 20px; text-align: center; position: relative;
}
.paperclip { position: absolute; top: -8px; left: 24px; font-size: 42px; color: #ad7741; transform: rotate(27deg); }
.mini-fox { font-size: 28px; color: #9c7348; }
.note-card p { margin: 7px 0 0; font-size: 17px; line-height: 1.45; }
.note-card .note-small { font-size: 15px; }
.note-heart { position: absolute; right: 17px; bottom: 10px; font-size: 26px; color: #a57246; }
.wallet-history-note {
  min-height: 43px; border-top: 1px solid rgba(153,112,72,.2);
  display: flex; align-items: center; justify-content: center; gap: 10px; color: #766149; font-size: 15px;
}
.info-button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #987957; background: transparent; color: #795f43; cursor:pointer; }

.bottom-nav {
  margin-top: 16px; border-radius: 22px; padding: 8px 11px;
  background: linear-gradient(#3b2a1c, #2b1d14); border: 1px solid rgba(208,171,117,.28);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  box-shadow: 0 10px 24px rgba(16,9,4,.34);
}
.bottom-nav button {
  min-height: 66px; border: 0; border-radius: 14px; background: transparent; color: #ebd4b0;
  cursor: pointer; text-transform: uppercase; letter-spacing: .055em; font-size: 13px;
  display: flex; gap: 9px; align-items: center; justify-content: center;
}
.bottom-nav button span { font-size: 24px; }
.bottom-nav button:hover { background: rgba(247,226,193,.06); }
.bottom-nav button.active { background: #f3dfbe; color: #513b26; box-shadow: inset 0 0 0 2px rgba(133,92,49,.22); }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px);
  background: #2e2017; color: #f8e5c8; border: 1px solid rgba(230,195,146,.35);
  padding: 11px 16px; border-radius: 999px; opacity: 0; pointer-events:none; transition:.2s ease; z-index: 30;
  box-shadow: 0 8px 22px rgba(0,0,0,.28); font: 14px Arial, sans-serif;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-card, .asset-card { min-height: 600px; }
  .saved-content { grid-template-columns: 1fr; }
  .note-card { min-height: 170px; }
}
@media (max-width: 620px) {
  .app-shell { width: min(100% - 14px, 1180px); padding-top: 16px; }
  .brand-row { padding-inline: 5px; }
  .wallet-pill { display:none; }
  .fox-mark { width: 50px; height: 50px; }
  .brand-lockup p { font-size: 14px; }
  .preview-card, .asset-card { padding-inline: 12px; }
  .asset-card { padding-top: 78px; }
  .asset-title-tab { min-width: 205px; height: 78px; }
  .category-tabs { gap: 5px; }
  .category-tab { min-height: 55px; }
  .asset-grid { grid-template-columns: repeat(2, 1fr); }
  .saved-panel { padding-inline: 12px; }
  .saved-heading { align-items:flex-start; flex-direction:column; }
  .saved-slots { grid-template-columns: 1fr; }
  .saved-slot { min-height: 160px; }
  .bottom-nav button { font-size: 0; }
  .bottom-nav button span { font-size: 26px; }
}

/* v0.5 DESKTOP VIEWPORT LAYOUT
   Keep the same composition as the approved mockup, but make the screen itself
   a fixed-height application shell. Nothing is globally transformed or scaled.
   The main workspace absorbs the remaining height, and only the asset list scrolls. */
@media (min-width: 901px) {
  html, body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .viewport-fit {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: clamp(8px, 1.4vh, 18px) 14px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
  }

  .app-shell {
    width: min(1180px, calc(100vw - 28px));
    max-width: 1180px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-rows:
      clamp(58px, 7vh, 92px)
      minmax(0, 1fr)
      clamp(112px, 20vh, 280px)
      clamp(50px, 7vh, 84px);
    gap: clamp(6px, 1.1vh, 16px);
    overflow: hidden;
  }

  .brand-row {
    min-height: 0;
    height: 100%;
    padding: 0 20px;
  }

  .workspace {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .preview-card,
  .asset-card {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .preview-card {
    padding: clamp(12px, 1.8vh, 22px);
  }

  .preview-canvas {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: clamp(7px, 1.2vh, 16px);
  }

  .save-button {
    flex: 0 0 auto;
    margin-top: clamp(7px, 1.2vh, 18px);
    min-height: clamp(42px, 5.6vh, 68px);
  }

  .camera-button {
    right: clamp(18px, 2.4vh, 31px);
    bottom: clamp(58px, 9vh, 106px);
  }

  .asset-card {
    padding: clamp(54px, 6.2vh, 84px) 18px clamp(10px, 1.4vh, 18px);
  }

  .asset-title-tab {
    min-width: clamp(205px, 21vw, 246px);
    height: clamp(54px, 6.2vh, 84px);
  }

  .category-tabs {
    flex: 0 0 auto;
    gap: clamp(5px, .7vh, 8px);
    margin-bottom: clamp(8px, 1.3vh, 18px);
  }

  .category-tab {
    min-height: clamp(40px, 4.6vh, 62px);
  }

  .asset-section-heading {
    flex: 0 0 auto;
    margin: 0 2px clamp(7px, 1vh, 15px);
  }

  .asset-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .collection-progress {
    flex: 0 0 auto;
    margin-top: clamp(6px, 1vh, 13px);
    min-height: clamp(32px, 4vh, 44px);
  }

  .saved-panel {
    min-height: 0;
    height: 100%;
    margin-top: 0;
    padding: clamp(9px, 1.4vh, 20px) 24px 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .saved-heading {
    flex: 0 0 auto;
  }

  .saved-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(5px, .9vh, 12px) 0 clamp(5px, 1vh, 14px);
    overflow: hidden;
  }

  .saved-slots,
  .note-card {
    min-height: 0;
    height: 100%;
  }

  .saved-slot {
    min-height: 0;
    height: 100%;
  }

  .saved-slot .saved-preview {
    min-height: 0;
  }

  .note-card {
    padding: clamp(10px, 2.2vh, 34px) 16px clamp(8px, 1.4vh, 20px);
  }

  .wallet-history-note {
    flex: 0 0 auto;
    min-height: clamp(24px, 3vh, 43px);
  }

  .bottom-nav {
    min-height: 0;
    height: 100%;
    margin-top: 0;
    padding: clamp(4px, .7vh, 8px) 11px;
  }

  .bottom-nav button {
    min-height: 0;
    height: 100%;
  }
}

/* Compact-height desktop tuning. These rules do not rearrange the UI; they only
   keep controls readable when the browser is wide but physically short. */
@media (min-width: 901px) and (max-height: 750px) {
  .fox-mark { width: 42px; height: 42px; }
  .fox-mark svg { width: 28px; height: 28px; }
  .brand-lockup { gap: 10px; }
  .brand-lockup h1 { font-size: clamp(24px, 2.5vw, 32px); }
  .brand-lockup p { margin-top: 1px; font-size: 13px; }
  .sparkle { font-size: 22px; transform: translateY(-7px); }
  .wallet-pill { padding: 7px 11px; font-size: 12px; }

  .soft-button {
    padding: 7px 12px;
    font-size: 12px;
  }

  .save-button {
    font-size: 15px;
  }

  .camera-button {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .asset-title-tab h2 { font-size: 20px; }
  .hanger-icon { font-size: 25px; }
  .category-tab svg { width: 22px; height: 22px; }
  .asset-section-heading h3 { font-size: 14px; }
  .asset-grid { gap: 9px; }
  .collection-progress { font-size: 10px; padding-inline: 10px; }
  .collection-progress strong { font-size: 12px; }

  .saved-heading h2 { font-size: 15px; }
  .saved-heading span { font-size: 10px; }
  .saved-content { grid-template-columns: 1fr 220px; gap: 12px; }
  .saved-slots { gap: 10px; }
  .saved-slot .saved-preview { font-size: 10px; padding: 5px; }
  .saved-slot .load-button, .saved-slot .clear-style-button { padding: 5px; font-size: 11px; }
  .saved-slot .clear-style-button { min-width: 58px; }
  .saved-slot.locked { gap: 2px; }
  .saved-slot.locked .lock { font-size: 22px; }
  .saved-slot.locked small { font-size: 10px; line-height: 1.2; }
  .note-card { transform: rotate(.5deg); }
  .paperclip { top: -6px; left: 18px; font-size: 28px; }
  .mini-fox { font-size: 18px; }
  .note-card p { margin-top: 2px; font-size: 12px; line-height: 1.2; }
  .note-card .note-small { font-size: 10px; }
  .note-heart { right: 11px; bottom: 5px; font-size: 18px; }
  .wallet-history-note { font-size: 10px; gap: 7px; }
  .info-button { width: 17px; height: 17px; font-size: 10px; }

  .bottom-nav button { font-size: 10px; gap: 6px; }
  .bottom-nav button span { font-size: 18px; }
}

@media (min-width: 901px) and (max-height: 750px) {
  .saved-slot.locked .lock { font-size: 16px; }
  .saved-slot.locked strong { font-size: 10px; line-height: 1; }
  .saved-slot.locked small { font-size: 8px; line-height: 1.05; }

  .note-card {
    padding: 4px 12px;
  }
  .note-card .mini-fox { display: none; }
  .note-card p {
    margin-top: 1px;
    font-size: 10.5px;
    line-height: 1.08;
  }
  .note-card .note-small {
    font-size: 9.5px;
    line-height: 1.08;
  }
}


/* v0.8.1 screen routing guardrail.
   Screen visibility is class-driven instead of relying only on the HTML hidden attribute,
   so navigation cannot be defeated by layout/CSS differences between browsers. */
.screen-hidden { display: none !important; }

/* v0.8 STATS SCREEN SHELL
   Static visual foundation only. The simulation, XP, passive decay, condition resolver,
   expression resolver, milestone logic, and tier perks are intentionally not wired yet. */
.stats-screen[hidden] { display: none !important; }
.stats-screen {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: 14px;
}
.stats-overview {
  min-height: 0;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 22px;
}
.stats-fox-card,
.stats-values-card,
.expression-tier-card,
.detail-card {
  border-radius: var(--radius-xl);
  min-height: 0;
  overflow: hidden;
}
.stats-fox-card,
.stats-values-card {
  padding: 18px 20px;
}
.stats-fox-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}
.stats-values-card {
  display: flex;
  flex-direction: column;
}
.stats-card-heading,
.detail-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: #98724c;
  font: 700 10px/1.1 Arial, sans-serif;
  letter-spacing: .13em;
}
.stats-card-heading h2 {
  margin: 0;
  color: #503a28;
  font-size: 22px;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.stats-spark { color: #b78445; font-size: 22px; }

.stats-fox-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 105, 65, .24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.48), transparent 36%),
    linear-gradient(180deg, rgba(255,250,242,.68), rgba(224,196,161,.27));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.25);
}
.stats-render-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.stats-render-stack img {
  position: absolute;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
}
.stats-empty-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 18px;
  color: rgba(86, 61, 40, .47);
  font-family: Arial, sans-serif;
  transition: opacity .2s ease;
}
.stats-empty-preview > span { color: #b7864a; font: 25px Georgia, serif; }
.stats-empty-preview strong { margin: 5px 0 2px; font: 700 15px Georgia, serif; color: rgba(77,56,38,.62); }
.stats-empty-preview small { font-size: 11px; line-height: 1.35; }

.condition-summary {
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid #d3b48d;
  border-radius: 14px;
  background: rgba(247, 229, 201, .76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}
.condition-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f7ead4;
  background: #756444;
  border: 2px solid #b99460;
}
.condition-copy { min-width: 0; }
.condition-copy span {
  display: block;
  color: #8c6a47;
  font: 700 9px Arial, sans-serif;
  letter-spacing: .11em;
}
.condition-copy strong {
  display: inline-block;
  margin-right: 8px;
  color: #4d3927;
  font-size: 17px;
}
.condition-copy small {
  color: #77634f;
  font: 10px/1.25 Arial, sans-serif;
}

.stat-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.stat-row {
  min-height: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  border: 1px solid rgba(178, 139, 93, .45);
  border-radius: 13px;
  background: rgba(250, 238, 218, .62);
}
.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #ead0a9;
  border: 1px solid #c9a574;
  color: #684c32;
  font-size: 19px;
}
.stat-main { min-width: 0; }
.stat-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.stat-label span {
  color: #5a412c;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.stat-label strong {
  color: #71593e;
  font-size: 14px;
}
.stat-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #d9c7ad;
  box-shadow: inset 0 1px 2px rgba(76, 52, 32, .18);
}
.stat-track span {
  display: block;
  width: var(--stat-fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8c774d, #b68a51);
}
.stat-main small {
  display: block;
  margin-top: 4px;
  color: #806b56;
  font: 10px/1.2 Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-detail-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, .82fr) minmax(0, 1fr);
  gap: 12px;
}
.expression-tier-card {
  grid-column: 1 / -1;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}
.detail-card {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.detail-card-heading h3 {
  margin: 0;
  color: #523c29;
  font-size: 14px;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.detail-card-heading > span {
  color: #9a754d;
  font: 700 9px Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.detail-card-heading.compact { padding-bottom: 5px; border-bottom: 1px solid rgba(156,112,70,.16); }
.expression-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}
.expression-current,
.expression-rule {
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid #c49a63;
}
.expression-current span,
.expression-rule span {
  display: block;
  color: #98724d;
  font: 700 8.5px Arial, sans-serif;
  letter-spacing: .1em;
}
.expression-current strong,
.expression-rule strong {
  display: block;
  margin: 2px 0;
  color: #503a28;
  font-size: 13px;
}
.expression-current small,
.expression-rule small {
  display: block;
  color: #7d6955;
  font: 9.5px/1.2 Arial, sans-serif;
}
.milestone-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0 2px;
}
.milestone-preview span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px dashed #b89362;
  color: #a98250;
  background: rgba(246,225,195,.55);
}
.detail-card p {
  margin: 2px 0 0;
  color: #78634e;
  font: 9.5px/1.25 Arial, sans-serif;
}
.perk-preview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.perk-mark {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #656447;
  color: #f5e8cf;
  border: 1px solid #a98b5b;
}
.perk-preview strong,
.progress-note-card > strong {
  display: block;
  color: #503a28;
  font-size: 12px;
}
.perk-preview small {
  display: block;
  margin-top: 2px;
  color: #7a6651;
  font: 9px/1.2 Arial, sans-serif;
}
.progress-note-card { position: relative; }
.progress-note-card::after {
  content: '♡';
  position: absolute;
  right: 13px;
  bottom: 8px;
  color: rgba(159,111,72,.58);
  font-size: 22px;
  transform: rotate(-8deg);
}
.progress-note-card > strong { margin-top: 7px; }

@media (min-width: 901px) {
  .stats-screen {
    grid-row: 2 / 4;
    height: 100%;
    overflow: hidden;
  }
  .app-shell.stats-active {
    grid-template-rows:
      clamp(58px, 7vh, 92px)
      minmax(0, 1fr)
      clamp(50px, 7vh, 84px);
  }
  .app-shell.stats-active .stats-screen { grid-row: 2; }
  .app-shell.stats-active .bottom-nav { grid-row: 3; }
}

@media (min-width: 901px) and (max-height: 750px) {
  .stats-screen { gap: 8px; }
  .stats-overview { gap: 12px; }
  .stats-fox-card,
  .stats-values-card { padding: 10px 12px; }
  .stats-card-heading h2 { font-size: 16px; }
  .section-eyebrow { font-size: 8px; }
  .stats-spark { font-size: 16px; }
  .stats-fox-card { gap: 6px; }
  .condition-summary { min-height: 48px; grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 5px 8px; }
  .condition-icon { width: 28px; height: 28px; }
  .condition-copy span { font-size: 7px; }
  .condition-copy strong { font-size: 13px; }
  .condition-copy small { font-size: 8px; }
  .stat-list { gap: 5px; margin-top: 6px; }
  .stat-row { grid-template-columns: 31px minmax(0,1fr); gap: 7px; padding: 4px 7px; border-radius: 10px; }
  .stat-icon { width: 27px; height: 27px; border-radius: 8px; font-size: 14px; }
  .stat-label { margin-bottom: 2px; }
  .stat-label span, .stat-label strong { font-size: 10px; }
  .stat-track { height: 5px; }
  .stat-main small { margin-top: 2px; font-size: 7.5px; }
  .stats-detail-grid { gap: 7px; }
  .expression-tier-card, .detail-card { padding: 6px 9px; border-radius: 16px; }
  .detail-card-heading h3 { font-size: 10px; }
  .detail-card-heading > span { font-size: 7px; }
  .expression-content { gap: 10px; margin-top: 3px; }
  .expression-current, .expression-rule { padding-left: 8px; }
  .expression-current span, .expression-rule span { font-size: 6.5px; }
  .expression-current strong, .expression-rule strong { font-size: 9px; margin: 1px 0; }
  .expression-current small, .expression-rule small { font-size: 7px; }
  .milestone-preview { gap: 5px; margin: 2px 0 0; }
  .milestone-preview span { width: 24px; height: 24px; }
  .detail-card p { font-size: 7.5px; }
  .perk-preview { gap: 7px; padding-top: 3px; }
  .perk-mark { width: 27px; height: 27px; border-radius: 8px; }
  .perk-preview strong, .progress-note-card > strong { font-size: 9px; }
  .perk-preview small { font-size: 7px; }
  .progress-note-card > strong { margin-top: 4px; }
}

@media (max-width: 900px) {
  .stats-screen {
    grid-template-rows: auto auto;
    gap: 14px;
  }
  .stats-overview { grid-template-columns: 1fr; }
  .stats-fox-card { min-height: 560px; }
  .stats-values-card { min-height: 430px; }
  .stats-detail-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .expression-tier-card { grid-column: auto; min-height: 180px; }
  .detail-card { min-height: 150px; }
  .expression-content { grid-template-columns: 1fr; }
}

/* v0.9 COMPANION SCREEN SHELL
   The fox remains the visual focus. Quick stats are deliberately a tiny old-game-style HUD:
   bar name + fill only. No tier names, percentages, explanations, or condition analysis appear here. */
.companion-screen {
  min-height: 0;
  display: grid;
  grid-template-columns:
    clamp(430px, calc(100dvh - 155px), 660px)
    clamp(260px, 23vw, 310px);
  justify-content: center;
  gap: 18px;
}
.companion-fox-panel,
.companion-controls {
  border-radius: var(--radius-xl);
  min-height: 0;
  overflow: hidden;
}
.companion-fox-panel {
  padding: 18px 20px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}
.companion-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.companion-panel-heading h2 {
  margin: 0;
  color: #503a28;
  font-size: 22px;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.companion-spark { color: #b78445; font-size: 22px; }
.companion-fox-canvas {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 105, 65, .24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.48), transparent 36%),
    linear-gradient(180deg, rgba(255,250,242,.68), rgba(224,196,161,.27));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.25);
}
.companion-render-stack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.companion-render-stack img {
  position: absolute;
  user-select: none;
  pointer-events: none;
  transform-origin: center center;
  transition: opacity .14s ease;
}
.companion-render-stack.is-fox-vanished img:not([data-category="backgrounds"]) {
  opacity: 0 !important;
}
.companion-empty-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 18px;
  color: rgba(86, 61, 40, .47);
  font-family: Arial, sans-serif;
  transition: opacity .2s ease;
}
.companion-empty-preview > span { color: #b7864a; font: 26px Georgia, serif; }
.companion-empty-preview strong { margin: 5px 0 2px; font: 700 16px Georgia, serif; color: rgba(77,56,38,.62); }
.companion-empty-preview small { font-size: 11px; line-height: 1.35; }
.companion-response {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #d3b48d;
  border-radius: 14px;
  background: rgba(247, 229, 201, .76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}
.response-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f7ead4;
  background: #756444;
  border: 1px solid #b99460;
}
.companion-response p {
  margin: 0;
  color: #5c4733;
  font-size: 14px;
  font-style: italic;
}

.companion-controls {
  padding: 12px 13px 14px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
}
.companion-mini-stats {
  padding: 7px 8px 8px;
  border: 1px solid rgba(159, 116, 72, .42);
  border-radius: 12px;
  background: rgba(247, 232, 210, .58);
  display: grid;
  gap: 4px;
}
.mini-stat {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 14px;
}
.mini-stat > span {
  color: #654b34;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mini-stat-track {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #d7c3a6;
  box-shadow: inset 0 1px 2px rgba(76,52,32,.16);
}
.mini-stat-track i {
  display: block;
  width: var(--mini-fill);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8c774d, #b68a51);
  transition: width .28s ease;
}
.mini-stat-track::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(20% - 1px),
    rgba(91,66,42,.27) calc(20% - 1px),
    rgba(91,66,42,.27) 20%
  );
}
.stat-track span { transition: width .28s ease; }
.interaction-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  color: #8f6d49;
}
.interaction-divider span { height: 1px; background: rgba(159, 116, 72, .3); }
.interaction-divider b {
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .13em;
}
.companion-actions {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 7px;
}
.companion-actions button {
  min-height: 0;
  width: 100%;
  border: 1px solid #cfaf85;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(250,239,221,.9), rgba(231,205,170,.75));
  color: #533d2b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(62,39,20,.09);
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px 1fr 24px;
  align-items: center;
  padding: 0 9px;
  text-align: left;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.companion-actions button::after {
  content: '›';
  justify-self: end;
  color: #a17a4e;
  font-size: 20px;
}
.companion-actions button:hover {
  transform: translateY(-1px);
  filter: brightness(1.025);
  border-color: #ae7d43;
}
.companion-actions button > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(213, 179, 132, .42);
  color: #745438;
  font-size: 15px;
}
.companion-actions strong {
  font-size: 14px;
  letter-spacing: .035em;
  text-transform: uppercase;
}

@media (min-width: 901px) {
  .companion-screen {
    grid-row: 2;
    height: 100%;
    overflow: hidden;
  }
  .app-shell.companion-active {
    grid-template-rows:
      clamp(58px, 7vh, 92px)
      minmax(0, 1fr)
      clamp(50px, 7vh, 84px);
  }
  .app-shell.companion-active .companion-screen { grid-row: 2; }
  .app-shell.companion-active .bottom-nav { grid-row: 3; }
}

@media (min-width: 901px) and (max-height: 750px) {
  .companion-screen {
    gap: 12px;
    grid-template-columns:
      clamp(410px, calc(100dvh - 145px), 520px)
      clamp(245px, 23vw, 290px);
    justify-content: center;
  }
  .companion-fox-panel { padding: 10px 12px; gap: 6px; }
  .companion-panel-heading h2 { font-size: 16px; }
  .companion-spark { font-size: 16px; }
  .companion-response { min-height: 42px; grid-template-columns: 26px minmax(0,1fr); padding: 5px 8px; }
  .response-mark { width: 23px; height: 23px; font-size: 11px; }
  .companion-response p { font-size: 10.5px; }
  .companion-controls { padding: 8px 9px 9px; gap: 5px; }
  .companion-mini-stats { padding: 5px 6px; gap: 3px; border-radius: 9px; }
  .mini-stat { grid-template-columns: 63px minmax(0,1fr); gap: 5px; min-height: 11px; }
  .mini-stat > span { font-size: 7.5px; }
  .mini-stat-track { height: 4px; }
  .interaction-divider { gap: 5px; }
  .interaction-divider b { font-size: 6.5px; }
  .companion-actions { gap: 5px; }
  .companion-actions button { border-radius: 9px; grid-template-columns: 28px 1fr 18px; padding-inline: 7px; }
  .companion-actions button > span { width: 21px; height: 21px; border-radius: 7px; font-size: 12px; }
  .companion-actions strong { font-size: 10.5px; }
  .companion-actions button::after { font-size: 15px; }
}

@media (max-width: 900px) {
  .companion-screen { grid-template-columns: 1fr; gap: 14px; }
  .companion-fox-panel { min-height: 560px; }
  .companion-controls { min-height: 430px; }
}


/* v0.10 Companion interaction states */
.companion-roam-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: #654b34;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(180deg, rgba(247,232,210,.84), rgba(220,190,152,.68));
  backdrop-filter: blur(1px);
}
.companion-roam-overlay.screen-hidden { display: none !important; }
.companion-roam-overlay .roam-mark { font: 32px Georgia, serif; color: #9c7749; }
.companion-roam-overlay strong { font: 700 20px Georgia, serif; text-transform: uppercase; letter-spacing: .04em; }
.companion-roam-overlay small { max-width: 280px; font: 11px/1.35 Arial, sans-serif; color: rgba(91,67,46,.7); }

.companion-roam-status {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px 8px 8px;
}
.companion-roam-status.screen-hidden { display: none !important; }
.roam-status-heading h3 { margin: 2px 0 0; font: 700 18px Georgia, serif; color: #5b402c; text-transform: uppercase; }
.roam-clock-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 9px;
  border: 1px solid rgba(159,116,72,.34);
  border-radius: 10px;
  background: rgba(247,232,210,.55);
  color: #6a5139;
}
.roam-clock-row span { font: 700 9px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.roam-clock-row strong { font: 700 15px Georgia, serif; }
.roam-souvenir-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d2b188;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(250,239,221,.9), rgba(231,205,170,.72));
  color: #5a432f;
}
.roam-souvenir-card > span { font: 700 8px Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.roam-souvenir-card > strong { font: 700 13px Georgia, serif; }
.roam-souvenir-card small, .roam-free-return { font: 9.5px/1.35 Arial, sans-serif; color: rgba(91,67,46,.66); }
.roam-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #d7c3a6; box-shadow: inset 0 1px 2px rgba(76,52,32,.14); }
.roam-progress i { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8c774d,#b68a51); transition: width .25s linear; }
.bring-home-button {
  min-height: 44px;
  border: 1px solid #9f7a4b;
  border-radius: 11px;
  background: linear-gradient(145deg,#786c46,#5f623d);
  color: #fff4dd;
  font: 700 12px Georgia, serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 8px rgba(62,39,20,.14);
}
.bring-home-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.companion-actions button.is-pressed { transform: translateY(1px); filter: brightness(.98); }
.companion-response p { transition: opacity .13s ease; }
.companion-response p.is-changing { opacity: .15; }

@media (min-width: 901px) and (max-height: 700px) {
  .companion-roam-status { gap: 6px; padding: 5px 4px 4px; }
  .roam-status-heading h3 { font-size: 14px; }
  .roam-clock-row { padding: 5px 7px; }
  .roam-souvenir-card { padding: 7px; gap: 4px; }
  .bring-home-button { min-height: 34px; font-size: 10px; }
}

/* v0.10.7 TREAT INVENTORY + PICKER */
.inventory-screen {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  gap: 18px;
}
.inventory-browser,
.inventory-detail {
  min-height: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.inventory-browser {
  padding: 18px 20px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
}
.inventory-heading,
.inventory-detail-heading,
.treat-picker-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.inventory-heading h2,
.treat-picker-heading h2 {
  margin: 0;
  color: #503a28;
  font-size: 22px;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.inventory-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #795d3e;
}
.inventory-count strong { font-size: 22px; }
.inventory-count span { font: 700 9px Arial, sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.inventory-prototype-note {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(159,116,72,.28);
  border-radius: 11px;
  background: rgba(247,232,210,.54);
  color: #765d45;
}
.inventory-prototype-note > span { color: #a77a43; font-size: 17px; }
.inventory-prototype-note p { margin: 0; font: 9.5px/1.3 Arial, sans-serif; }
.treat-filter-row {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.treat-filter-row button {
  border: 1px solid #d0b087;
  border-radius: 999px;
  background: rgba(247,231,207,.75);
  color: #6d5137;
  padding: 6px 11px;
  cursor: pointer;
  font: 700 9px Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .065em;
}
.treat-filter-row button.active {
  background: #6a6041;
  color: #fff5e6;
  border-color: #6a6041;
}
.inventory-treat-grid,
.treat-picker-grid {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: #8b6846 #ead7bc;
  scrollbar-width: thin;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 2px 7px 2px 2px;
}
.treat-card {
  min-width: 0;
  border: 1px solid #d1b48e;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(252,244,231,.83), rgba(236,216,190,.62));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.28);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  grid-template-rows: minmax(82px, 1fr) auto;
  color: #5b432f;
  transition: transform .12s ease, border-color .12s ease;
}
.treat-card:hover { transform: translateY(-1px); border-color: #ad7d45; }
.treat-card.selected { outline: 3px solid rgba(174,124,59,.55); outline-offset: -3px; }
.treat-card-image {
  position: relative;
  min-height: 84px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.65), transparent 57%);
}
.treat-card-image img { width: 100%; height: 100%; max-height: 116px; object-fit: contain; padding: 4px; }
.treat-rarity-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(75,55,38,.78);
  color: #fff0d9;
  font: 700 7px Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.treat-card-copy { padding: 7px 8px 8px; border-top: 1px solid rgba(159,116,72,.18); }
.treat-card-copy strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
}
.treat-card-copy small {
  display: block;
  margin-top: 3px;
  color: #8b6d50;
  font: 8px/1.25 Arial, sans-serif;
}
.inventory-detail {
  padding: 17px 18px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 10px;
}
.inventory-rarity {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(108,83,56,.1);
  color: #76583c;
  border: 1px solid rgba(148,105,65,.24);
  font: 700 8px Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.inventory-treat-preview {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148,105,65,.22);
  border-radius: 15px;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.62), transparent 52%), rgba(247,232,210,.35);
}
.inventory-treat-preview img { width: 100%; height: 100%; max-height: 280px; object-fit: contain; padding: 8px; }
.inventory-treat-copy h3 { margin: 0 0 7px; color: #503a28; font-size: 18px; }
.inventory-treat-copy p { margin: 8px 0 0; color: #76614c; font: 10px/1.35 Arial, sans-serif; }
.treat-effect-list { display: flex; flex-wrap: wrap; gap: 5px; }
.treat-effect-chip {
  border: 1px solid rgba(166,123,77,.34);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(240,216,184,.7);
  color: #644a33;
  font: 700 8px Arial, sans-serif;
  white-space: nowrap;
}
.treat-effect-chip.negative { background: rgba(211,193,172,.65); color: #755e4c; }
.queue-treat-button {
  min-height: 46px;
  border: 1px solid #7e6947;
  border-radius: 12px;
  background: linear-gradient(#676444,#515237);
  color: #fff7e9;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 700;
}
.queue-treat-button:hover { filter: brightness(1.045); }
.inventory-treat-rule { color: #7c6752; font: 8.5px/1.35 Arial, sans-serif; }

.treat-picker {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(24,14,8,.66);
  backdrop-filter: blur(3px);
}
.treat-picker-card {
  width: min(860px, calc(100vw - 36px));
  height: min(690px, calc(100dvh - 36px));
  min-height: 0;
  border-radius: 24px;
  padding: 18px;
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
  gap: 10px;
}
.treat-picker-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #c7a77d;
  background: rgba(247,231,207,.82);
  color: #64482f;
  cursor: pointer;
  font: 24px/1 Arial, sans-serif;
}
.generic-treat-button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid #cfaf85;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(250,239,221,.95), rgba(231,205,170,.8));
  color: #533d2b;
  cursor: pointer;
  text-align: left;
}
.generic-treat-button > span { width: 30px; height: 30px; display:grid; place-items:center; border-radius:9px; background:rgba(213,179,132,.42); }
.generic-treat-button strong { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.generic-treat-button small { display:block; margin-top:2px; color:#806952; font:8.5px Arial,sans-serif; }
.generic-treat-button b { text-transform:uppercase; font:700 9px Arial,sans-serif; letter-spacing:.08em; }
.treat-picker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.treat-picker-grid .treat-card { grid-template-rows: minmax(78px,1fr) auto; }
.treat-picker-grid .treat-card-copy strong { font-size: 9.5px; }
.treat-picker-footnote { color: #806952; font: 8.5px/1.3 Arial, sans-serif; text-align:center; }

@media (min-width: 901px) {
  .inventory-screen {
    grid-row: 2;
    height: 100%;
    overflow: hidden;
  }
  .app-shell.inventory-active {
    grid-template-rows:
      clamp(58px, 7vh, 92px)
      minmax(0, 1fr)
      clamp(50px, 7vh, 84px);
  }
  .app-shell.inventory-active .inventory-screen { grid-row: 2; }
  .app-shell.inventory-active .bottom-nav { grid-row: 3; }
}

@media (min-width: 901px) and (max-height: 750px) {
  .inventory-screen { gap: 12px; grid-template-columns: minmax(0,1.5fr) minmax(250px,.5fr); }
  .inventory-browser { padding: 10px 12px; gap: 6px; }
  .inventory-detail { padding: 10px 11px; gap: 6px; }
  .inventory-heading h2, .treat-picker-heading h2 { font-size: 16px; }
  .inventory-prototype-note { padding: 5px 7px; }
  .inventory-prototype-note p { font-size: 7.5px; }
  .treat-filter-row button { padding: 4px 8px; font-size: 7px; }
  .inventory-treat-grid { gap: 6px; }
  .treat-card { grid-template-rows: minmax(60px,1fr) auto; border-radius: 9px; }
  .treat-card-image { min-height: 60px; }
  .treat-card-image img { max-height: 82px; }
  .treat-card-copy { padding: 4px 5px 5px; }
  .treat-card-copy strong { font-size: 8px; }
  .treat-card-copy small { font-size: 6.5px; }
  .inventory-treat-preview img { max-height: 185px; }
  .inventory-treat-copy h3 { font-size: 14px; margin-bottom:4px; }
  .inventory-treat-copy p { font-size: 8px; }
  .treat-effect-chip { font-size: 6.5px; padding: 3px 5px; }
  .queue-treat-button { min-height: 38px; font-size: 10px; }
  .inventory-treat-rule { font-size: 7px; }
  .treat-picker-card { height: min(610px, calc(100dvh - 24px)); padding: 12px; gap: 6px; }
  .generic-treat-button { min-height: 44px; }
  .treat-picker-grid { gap: 6px; }
}

@media (max-width: 900px) {
  .inventory-screen { grid-template-columns: 1fr; }
  .inventory-browser { min-height: 650px; }
  .inventory-detail { min-height: 520px; }
  .inventory-treat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .treat-picker-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .inventory-treat-grid, .treat-picker-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .treat-picker { padding: 8px; }
  .treat-picker-card { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 11px; }
}

/* ==========================================================================
   v0.10.8 — TREAT FEEDBACK · CHECK IN · TRUST GUIDANCE · STAT TIER TICKS
   Additive only. No existing rule is modified, so the warm cream/tan/brown
   Fox Styler identity, the LayerForge render stage and every existing layout
   rule are untouched.
   ========================================================================== */

/* --- Stats bars now match the Companion HUD scale, so they get the same
       faint tier boundary marks the mini bars already had. ---------------- */
.stat-track {
  position: relative;
}
.stat-track::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(20% - 1px),
    rgba(91, 66, 42, .24) calc(20% - 1px),
    rgba(91, 66, 42, .24) 20%
  );
}

/* --- brief highlight on a bar that actually moved ---------------------- */
.stat-just-changed .mini-stat-track,
.stat-just-changed .stat-track {
  box-shadow: inset 0 1px 2px rgba(76, 52, 32, .18), 0 0 0 2px rgba(182, 138, 81, .45);
  transition: box-shadow .2s ease;
}
.stat-just-changed .mini-stat-track i,
.stat-just-changed .stat-track span {
  background: linear-gradient(90deg, #9c8352, #caa063);
}

/* --- compact treat / play stat-change readout -------------------------- */
.stat-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  min-height: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .22s ease, max-height .22s ease, margin-top .22s ease;
}
.stat-feedback.show {
  max-height: 60px;
  opacity: 1;
}
.stat-feedback-label {
  color: #7a6144;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-right: 2px;
}
.stat-delta-chip {
  padding: 3px 8px;
  border: 1px solid rgba(159, 116, 72, .42);
  border-radius: 999px;
  background: rgba(247, 232, 210, .72);
  color: #6b5333;
  font: 700 10px/1.2 Arial, sans-serif;
  white-space: nowrap;
}
.stat-delta-chip.negative {
  border-color: rgba(150, 92, 66, .45);
  background: rgba(240, 219, 205, .72);
  color: #8a5238;
}

/* --- Check In guidance line (player-facing, never fox dialogue) --------- */
.companion-guidance {
  margin: 6px 0 0;
  padding-left: 13px;
  position: relative;
  color: #83705a;
  font: italic 11px/1.35 Arial, sans-serif;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .22s ease, max-height .22s ease, margin .22s ease;
}
.companion-guidance.show {
  max-height: 48px;
  opacity: 1;
  margin-top: 7px;
}
.companion-guidance::before {
  content: '⌇';
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  color: #a98a5f;
}

/* --- Check In control. Deliberately styled apart from the seven core
       interaction buttons so it does not read as an eighth action. ------- */
.companion-checkin {
  margin-top: 8px;
  display: grid;
  gap: 3px;
}
.companion-checkin button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed rgba(159, 116, 72, .62);
  border-radius: 10px;
  background: rgba(252, 243, 228, .72);
  color: #6b5333;
  cursor: pointer;
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .04em;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.companion-checkin button span { font-size: 12px; color: #a98a5f; }
.companion-checkin button:hover:not(:disabled) {
  background: rgba(247, 232, 210, .95);
  border-color: rgba(159, 116, 72, .9);
}
.companion-checkin button:disabled {
  cursor: default;
  opacity: .48;
  border-style: dotted;
}
.companion-checkin small {
  text-align: center;
  color: #8b7659;
  font: 9px/1.3 Arial, sans-serif;
}

/* --- subtle relationship guidance ------------------------------------- */
.relationship-hint {
  margin: 7px 0 0;
  color: #8b7659;
  font: 9.5px/1.35 Arial, sans-serif;
  text-align: center;
  opacity: .92;
}
.trust-guidance {
  margin: 9px 0 4px;
  padding: 0 0 0 15px;
  display: grid;
  gap: 3px;
  list-style: none;
}
.trust-guidance li {
  position: relative;
  color: #7a6449;
  font: 10.5px/1.3 Arial, sans-serif;
}
.trust-guidance li::before {
  content: '◇';
  position: absolute;
  left: -14px;
  color: #b08a55;
  font-size: 8px;
  top: 2px;
}
.trust-guidance-note {
  display: block;
  color: #907a5e;
  font: italic 9.5px/1.3 Arial, sans-serif;
}

@media (max-width: 620px) {
  .companion-checkin button { padding: 9px 10px; font-size: 11.5px; }
  .stat-delta-chip { font-size: 10.5px; }
}


/* v0.10.9 — explicit active style + wearable effect readout */
.saved-slot.active-style-slot {
  outline: 2px solid rgba(130, 92, 44, .42);
  outline-offset: -2px;
}
.saved-slot.active-style-slot .saved-preview strong { letter-spacing: .02em; }
.wardrobe-effects-summary { display: grid; gap: 10px; }
.wardrobe-effect-items { display: grid; gap: 8px; }
.wardrobe-effect-item { display: grid; gap: 2px; }
.wardrobe-effect-item small, .wardrobe-effect-footnote, .wardrobe-set-note { color: var(--muted, #7d6f61); line-height: 1.35; }
.wardrobe-effect-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wardrobe-effect-chip { display: inline-flex; align-items: center; border: 1px solid rgba(77,56,38,.16); border-radius: 999px; padding: 4px 8px; font-size: 12px; background: rgba(255,255,255,.52); }
.wardrobe-effect-chip.positive { font-weight: 700; }
.wardrobe-effect-chip.negative { border-style: dashed; }

.equip-current-button {
  width: 100%;
  margin-top: 7px;
  border: 1px solid rgba(77,56,38,.18);
  border-radius: 12px;
  padding: 7px 10px;
  background: rgba(255,255,255,.48);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.equip-current-button:hover { background: rgba(255,255,255,.72); }

/* ========================================================================
   v0.11.0 — HOME WORLD / DEN ROOM ENGINE PROTOTYPE
   Slot-based, persistent, local-file friendly. DEV markers are not content.
   ======================================================================== */
.home-world-screen {
  display: grid;
  gap: 16px;
  min-height: 0;
}
.home-world-intro {
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.home-world-intro h2 { margin: 3px 0 5px; font-size: 26px; }
.home-world-intro p { margin: 0; max-width: 760px; color: #765f49; font: 13px/1.45 Arial, sans-serif; }
.den-unlock-pill {
  flex: 0 0 auto;
  border: 1px solid rgba(122,87,48,.32);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,.48);
  font: 700 11px/1 Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #715431;
}
.den-world-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  min-height: 0;
}
.den-stage-card, .den-editor-card { border-radius: 22px; }
.den-stage-card { padding: 14px; min-width: 0; }
.den-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.den-stage-toolbar > div { display: grid; gap: 3px; }
.den-stage-toolbar strong { font: 700 12px/1.3 Arial, sans-serif; color: #725d47; }
.den-reset-fox { padding: 8px 10px; font-size: 10px; }
.den-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 390px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(110,75,43,.35);
  background: #e5c69d;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.23);
  cursor: crosshair;
}
.den-wall-plane {
  position: absolute;
  inset: 0 0 41% 0;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(113,75,47,.09) 50%, transparent 50.2%),
    linear-gradient(180deg, #e6d1b7, #d9bb96);
  border-bottom: 3px solid rgba(91,58,36,.34);
}
.den-wall-plane::before {
  content:'';
  position:absolute;
  inset:0;
  opacity:.25;
  background-image: repeating-linear-gradient(90deg, rgba(105,72,45,.12) 0 1px, transparent 1px 110px);
}
.den-floor-plane {
  position: absolute;
  inset: 59% 0 0;
  background:
    repeating-linear-gradient(168deg, rgba(91,61,38,.13) 0 1px, transparent 1px 52px),
    linear-gradient(180deg, #c9a578, #b68c61);
}
.den-window {
  position:absolute;
  width: 16%;
  height: 27%;
  left: 11%;
  top: 14%;
  border: 5px solid #765335;
  border-radius: 46% 46% 8px 8px;
  background:
    radial-gradient(circle at 62% 35%, #f0dd9f 0 4%, transparent 5%),
    linear-gradient(180deg, #4c4761, #77738a 65%, #a28973);
  box-shadow: inset 0 0 0 3px rgba(245,225,190,.35), 0 7px 12px rgba(72,47,30,.15);
  display:grid;
  place-items:center;
  color:#f3dfad;
  font-size:21px;
}
.den-window::before, .den-window::after { content:''; position:absolute; background:#765335; }
.den-window::before { width:4px; height:100%; left:50%; transform:translateX(-50%); }
.den-window::after { height:4px; width:100%; top:50%; transform:translateY(-50%); }
.den-window span { position:relative; z-index:1; transform: translate(18px,-17px); }
.den-slot {
  position:absolute;
  border: 1px dashed rgba(94,64,39,.48);
  background: rgba(249,236,215,.22);
  color:#6a4c32;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.den-slot:hover:not(:disabled), .den-slot.selected { border-color:#76512f; background:rgba(249,236,215,.42); }
.den-slot.selected { box-shadow:0 0 0 3px rgba(183,135,71,.18); }
.den-slot:disabled { cursor:default; opacity:.35; }
.den-slot-label {
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  padding:2px 5px;
  border-radius:999px;
  background:rgba(247,231,206,.88);
  color:#856a4d;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.05em;
  white-space:nowrap;
}
.den-slot-object { display:grid; place-items:center; width:100%; height:100%; }
.den-slot-wall { left:43%; top:16%; width:15%; height:19%; border-radius:12px; }
.den-slot-bed { left:13%; top:66%; width:24%; height:15%; transform:skewY(-4deg); border-radius:10px; }
.den-slot-rug { left:39%; top:71%; width:25%; height:14%; border-radius:50%; }
.den-slot-shelf { left:73%; top:57%; width:17%; height:18%; border-radius:8px; }
.den-slot-corner { left:76%; top:79%; width:15%; height:10%; border-radius:50%; }
.den-test-marker { display:block; width:52%; height:52%; min-width:26px; min-height:22px; border:2px solid rgba(80,52,33,.5); box-shadow:0 4px 8px rgba(63,39,24,.13); }
.den-test-marker.marker-a { border-radius:50%; background:repeating-linear-gradient(45deg,#b59168 0 8px,#e0c397 8px 16px); }
.den-test-marker.marker-b { border-radius:8px; background:linear-gradient(135deg,#7d7055,#c0ad83); transform:rotate(-5deg); }
.den-test-marker.marker-c { clip-path:polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%); background:linear-gradient(180deg,#8f6d72,#cfac9c); }
.den-fox-actor {
  position:absolute;
  left:50%;
  top:70%;
  width:112px;
  height:112px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:visible;
  background:rgba(247,230,205,.92);
  border:2px solid rgba(95,64,39,.55);
  box-shadow:0 9px 17px rgba(62,39,23,.24), inset 0 0 0 3px rgba(255,255,255,.25);
  transition:left .48s cubic-bezier(.22,.75,.25,1), top .48s cubic-bezier(.22,.75,.25,1);
  pointer-events:none;
  z-index:20;
}
.den-fox-actor::after {
  content:'';
  position:absolute;
  left:50%; bottom:-7px;
  width:70%; height:10px;
  border-radius:50%;
  background:rgba(63,39,25,.16);
  transform:translateX(-50%);
  filter:blur(2px);
  z-index:-1;
}
.den-fox-actor small {
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  white-space:nowrap;
  border-radius:999px;
  padding:3px 6px;
  background:rgba(51,31,20,.72);
  color:#f5e6ce;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.den-fox-render-stack, .den-fox-fallback { position:absolute; inset:0; overflow:hidden; border-radius:50%; }
.den-fox-render-stack img { position:absolute; user-select:none; pointer-events:none; transform-origin:center center; }
.den-fox-fallback { display:grid; place-items:center; font-size:48px; color:#ad8559; }
.den-lock-overlay {
  position:absolute;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  background:rgba(47,31,21,.52);
  backdrop-filter:blur(3px);
  cursor:default;
}
.den-lock-card {
  width:min(420px,calc(100% - 34px));
  border:1px solid rgba(113,78,47,.55);
  border-radius:18px;
  padding:22px;
  text-align:center;
  background:linear-gradient(145deg,#f8e8d0,#ead0ad);
  box-shadow:0 18px 40px rgba(35,20,11,.35), inset 0 0 0 4px rgba(255,255,255,.25);
}
.den-lock-icon { display:block; color:#b07d42; font-size:30px; margin-bottom:5px; }
.den-lock-card strong { display:block; font-size:20px; }
.den-lock-card p { margin:6px 0 14px; color:#76614c; font:13px/1.4 Arial,sans-serif; }
.den-lock-card button {
  border:1px solid #936b3f;
  border-radius:10px;
  padding:9px 12px;
  background:#795536;
  color:#fff3df;
  font:700 11px/1 Arial,sans-serif;
  cursor:pointer;
}
.den-lock-card small { display:block; margin-top:9px; color:#8b735a; font:10px/1.35 Arial,sans-serif; }
.den-unlock-banner {
  position:absolute;
  z-index:70;
  left:50%; top:8%;
  transform:translateX(-50%);
  min-width:330px;
  padding:10px 16px;
  border:1px solid #a8783f;
  border-radius:12px;
  background:#f3dfbd;
  box-shadow:0 10px 20px rgba(56,34,19,.28);
  text-align:center;
  pointer-events:none;
}
.den-unlock-banner strong, .den-unlock-banner span { display:block; }
.den-unlock-banner strong { letter-spacing:.08em; font-size:12px; }
.den-unlock-banner span { margin-top:3px; color:#7a6249; font:10px/1.3 Arial,sans-serif; }
.den-stage-status {
  margin-top:9px;
  min-height:28px;
  border:1px solid rgba(113,78,47,.18);
  border-radius:10px;
  padding:7px 10px;
  background:rgba(255,255,255,.35);
  color:#75614c;
  font:11px/1.35 Arial,sans-serif;
}
.den-editor-card { padding:17px; display:flex; flex-direction:column; gap:13px; }
.den-editor-heading h3 { margin:3px 0 0; font-size:21px; }
.den-editor-card > p { margin:0; color:#76604a; font:11.5px/1.45 Arial,sans-serif; }
.den-editor-section { display:grid; gap:7px; padding-top:12px; border-top:1px solid rgba(111,78,48,.18); }
.den-editor-label { font:700 10px/1 Arial,sans-serif; letter-spacing:.07em; color:#6f5134; }
.den-editor-section > small { color:#8a745c; font:10px/1.35 Arial,sans-serif; }
.den-test-object-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.den-test-object-grid button {
  min-height:68px;
  border:1px solid rgba(112,79,49,.28);
  border-radius:10px;
  background:rgba(255,255,255,.42);
  color:#664b33;
  display:grid;
  place-items:center;
  gap:4px;
  padding:7px;
  cursor:pointer;
}
.den-test-object-grid button:hover:not(:disabled), .den-test-object-grid button.selected { background:#f6e3c5; border-color:#9d7448; }
.den-test-object-grid button:disabled { opacity:.42; cursor:default; }
.den-test-object-grid .den-test-marker { width:34px; height:28px; min-width:0; min-height:0; }
.den-test-object-grid strong { font:700 10px/1 Arial,sans-serif; }
.den-clear-marker { font:26px/1 Arial,sans-serif; color:#9a7450; }
.den-engine-readout ul { margin:0; padding-left:17px; display:grid; gap:5px; color:#745f49; font:10.5px/1.35 Arial,sans-serif; }
.den-reset-room-button {
  margin-top:auto;
  border:1px dashed rgba(117,81,48,.44);
  border-radius:10px;
  padding:9px 10px;
  background:rgba(255,255,255,.35);
  color:#765536;
  font:700 10px/1 Arial,sans-serif;
  cursor:pointer;
}
.den-reset-room-button:hover { background:rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .den-world-layout { grid-template-columns:1fr; }
  .den-editor-card { min-height:0; }
  .den-stage { min-height:340px; }
}
@media (max-width: 620px) {
  .home-world-intro { align-items:flex-start; flex-direction:column; }
  .den-stage-toolbar { align-items:flex-start; flex-direction:column; }
  .den-stage { min-height:300px; aspect-ratio:4/3; }
  .den-fox-actor { width:86px; height:86px; }
  .den-slot-label { display:none; }
  .den-unlock-banner { min-width:0; width:calc(100% - 28px); }
}

@media (min-width: 901px) {
  .home-world-screen {
    grid-row: 2;
    height: 100%;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .app-shell.home-world-active {
    grid-template-rows:
      clamp(58px, 7vh, 92px)
      minmax(0, 1fr)
      clamp(50px, 7vh, 84px);
  }
  .app-shell.home-world-active .home-world-screen { grid-row: 2; }
  .app-shell.home-world-active .bottom-nav { grid-row: 3; }
  .den-world-layout { height: 100%; overflow: hidden; }
  .den-stage-card { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .den-stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .den-editor-card { height: 100%; min-height: 0; overflow-y: auto; }
}

@media (min-width: 901px) and (max-height: 750px) {
  .home-world-intro { padding: 9px 14px; gap: 12px; }
  .home-world-intro h2 { font-size: 18px; margin: 1px 0 2px; }
  .home-world-intro p { font-size: 9.5px; line-height: 1.3; }
  .den-unlock-pill { padding: 6px 9px; font-size: 8px; }
  .den-stage-card { padding: 9px; }
  .den-stage-toolbar { margin-bottom: 6px; }
  .den-stage-toolbar strong { font-size: 9px; }
  .den-reset-fox { padding: 5px 8px; font-size: 8px; }
  .den-stage-status { margin-top: 5px; min-height: 22px; padding: 4px 7px; font-size: 8.5px; }
  .den-editor-card { padding: 10px; gap: 8px; }
  .den-editor-heading h3 { font-size: 16px; }
  .den-editor-card > p { font-size: 9px; }
  .den-editor-section { gap: 5px; padding-top: 7px; }
  .den-editor-section > small, .den-engine-readout ul { font-size: 8px; }
  .den-test-object-grid button { min-height: 50px; padding: 4px; }
  .den-fox-actor { width: 84px; height: 84px; }
  .den-fox-actor small { font-size: 6.5px; bottom: -17px; }
}


/* ========================================================================
   v0.11.1 — DEN FIXED-SHELL VISUAL INTEGRATION
   Current decision: one fixed room angle + one fixed fox anchor. The prior
   click-to-move / geometry-marker prototype remains in history but is not
   exposed by this build.
   ======================================================================== */
.den-visual-test-layout {
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}
.den-visual-test-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.den-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.den-stage.den-stage-fixed {
  position: relative;
  flex: 0 1 auto;
  width: min(100%, calc((100dvh - 250px) * 4 / 3));
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(110,75,43,.35);
  background: #d8b786;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18), 0 12px 30px rgba(64,40,23,.12);
  cursor: default;
  isolation: isolate;
}
.den-room-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.den-fox-actor.den-fullbody-actor {
  position: absolute;
  z-index: 20;
  left: 82%;
  top: auto !important;
  bottom: 3.5%;
  width: 38%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  transition: none;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}
.den-fox-actor.den-fullbody-actor.dragging { cursor: grabbing; }
.den-fox-actor.den-fullbody-actor::after {
  display: none;
}
.den-fullbody-fox {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
/* Keep old renderer nodes present for compatibility, but do not layer the
   portrait wardrobe rig over the full-body Den shell in this visual test. */
.den-fullbody-actor .den-fox-render-stack,
.den-fullbody-actor .den-fox-fallback {
  display: none !important;
}
.den-stage-fixed .den-lock-overlay {
  border-radius: inherit;
}
.den-stage-fixed .den-unlock-banner {
  top: 4%;
}

@media (min-width: 901px) {
  .app-shell.home-world-active .den-stage-card.den-visual-test-card {
    height: 100%;
  }
  .den-stage.den-stage-fixed {
    width: auto;
    height: min(100%, calc(100dvh - 250px));
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 901px) and (max-height: 750px) {
  .den-stage.den-stage-fixed {
    height: min(100%, calc(100dvh - 190px));
  }
  .den-fox-actor.den-fullbody-actor { width: 38%; }
}

@media (max-width: 900px) {
  .den-visual-test-layout { height: auto; }
  .den-visual-test-card { overflow: visible; }
  .den-stage-wrap { overflow: visible; }
  .den-stage.den-stage-fixed {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 620px) {
  .den-stage.den-stage-fixed { min-height: 0; }
  .den-fox-actor.den-fullbody-actor { width: 40%; }
  .den-stage-toolbar strong { max-width: 100%; }
}


/* ========================================================================
   v0.11.2 — DEN PRESENTATION POLISH
   Larger fixed Den scene + cleaner premium layout.
   ======================================================================== */
.home-world-screen {
  gap: 10px;
}
.home-world-intro.home-world-intro-premium {
  padding: 12px 16px;
  align-items: flex-start;
}
.home-world-intro.home-world-intro-premium h2 {
  margin: 2px 0 4px;
  font-size: 24px;
}
.home-world-intro.home-world-intro-premium p {
  max-width: none;
  font-size: 12px;
  line-height: 1.4;
}
.den-stage-card.den-visual-test-card {
  padding: 10px 12px 8px;
  gap: 0;
}
.den-stage-toolbar.den-stage-toolbar-premium {
  align-items: flex-start;
  margin-bottom: 8px;
}
.den-stage-toolbar.den-stage-toolbar-premium strong {
  font-size: 11px;
  color: #644a31;
}
.den-stage-wrap {
  align-items: flex-start;
  justify-content: center;
}
.den-stage.den-stage-fixed {
  width: min(100%, calc((100dvh - 180px) * 4 / 3));
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18), 0 16px 36px rgba(64,40,23,.14);
}
.den-stage-status {
  margin-top: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a735b;
  font: 10px/1.35 Arial, sans-serif;
  text-align: center;
}
@media (min-width: 901px) {
  .home-world-screen {
    overflow-y: auto;
  }
  .app-shell.home-world-active {
    grid-template-rows: clamp(54px, 6.5vh, 84px) minmax(0, 1fr) clamp(48px, 6vh, 76px);
  }
  .den-world-layout {
    overflow: visible;
  }
  .den-stage-card.den-visual-test-card {
    overflow: visible;
  }
  .den-stage-wrap {
    overflow: visible;
  }
  .den-stage.den-stage-fixed {
    height: min(100%, calc(100dvh - 180px));
    max-width: 100%;
  }
}
@media (min-width: 901px) and (max-height: 750px) {
  .home-world-intro.home-world-intro-premium {
    padding: 8px 12px;
  }
  .home-world-intro.home-world-intro-premium h2 {
    font-size: 17px;
  }
  .home-world-intro.home-world-intro-premium p {
    font-size: 9px;
    line-height: 1.28;
  }
  .den-stage-card.den-visual-test-card {
    padding: 8px 10px 6px;
  }
  .den-stage-toolbar.den-stage-toolbar-premium {
    margin-bottom: 5px;
  }
  .den-stage-toolbar.den-stage-toolbar-premium strong {
    font-size: 8.5px;
  }
  .den-stage.den-stage-fixed {
    height: min(100%, calc(100dvh - 150px));
  }
  .den-stage-status {
    font-size: 8px;
    margin-top: 4px;
  }
}
@media (max-width: 620px) {
  .home-world-intro.home-world-intro-premium p {
    font-size: 11px;
  }
  .den-stage-toolbar.den-stage-toolbar-premium strong {
    font-size: 10px;
  }
}


/* ========================================================================
   v0.11.3 — DEN WIDE-SCENE CORRECTION
   Root fix: the prior 4:3 scene was height-limited, which forced a small
   room and left large side gutters. This version uses a deliberate 16:9
   crop of the approved shell (no stretching) and removes test-toolbar
   overhead so the room occupies substantially more of the Home view.
   ======================================================================== */
.home-world-screen {
  gap: 8px;
}
.home-world-intro.home-world-intro-premium {
  padding: 8px 13px;
  min-height: 0;
  align-items: center;
}
.home-world-intro.home-world-intro-premium h2 {
  margin: 1px 0 2px;
  font-size: 20px;
}
.home-world-intro.home-world-intro-premium p {
  font-size: 10px;
  line-height: 1.3;
  max-width: 900px;
}
.home-world-intro.home-world-intro-premium .section-eyebrow {
  font-size: 7px;
}
.den-stage-card.den-visual-test-card {
  padding: 8px;
  background: rgba(247, 228, 197, .94);
}
.den-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.den-stage.den-stage-fixed {
  flex: 0 0 auto !important;
  width: min(96%, calc((100dvh - 190px) * 16 / 9), 980px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: 980px;
  max-height: none !important;
  border-radius: 16px;
}
.den-room-shell {
  width: 100%;
  height: 100%;
  object-fit: fill; /* exact 16:9 crop asset; no distortion */
}
.den-fox-actor.den-fullbody-actor {
  bottom: 2.2%;
  width: 28%;
}
.den-stage-status {
  margin-top: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 8.5px;
  line-height: 1.2;
}
@media (min-width: 901px) {
  .home-world-screen {
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .den-world-layout,
  .den-stage-card.den-visual-test-card {
    min-height: 0;
    height: 100%;
  }
  .den-stage.den-stage-fixed {
    width: min(96%, calc((100dvh - 190px) * 16 / 9), 980px) !important;
    height: auto !important;
  }
}
@media (min-width: 901px) and (max-height: 650px) {
  .home-world-intro.home-world-intro-premium {
    padding: 5px 10px;
  }
  .home-world-intro.home-world-intro-premium h2 {
    font-size: 17px;
  }
  .home-world-intro.home-world-intro-premium p {
    font-size: 8px;
  }
  .den-stage-card.den-visual-test-card {
    padding: 6px;
  }
  .den-stage.den-stage-fixed {
    width: min(97%, calc((100dvh - 175px) * 16 / 9), 900px) !important;
  }
}
@media (max-width: 900px) {
  .den-stage.den-stage-fixed {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .den-fox-actor.den-fullbody-actor { width: 30%; }
}


/* ========================================================================
   v0.11.4 — DEN ROOM FINISHES
   Walls and floors are independent visual layers over the approved shell.
   Structure, window, fox, and future decor remain separate.
   ======================================================================== */
.den-finish-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}
.den-floor-finish-layer { z-index: 1; }
.den-wall-finish-layer { z-index: 2; }
.den-fox-actor.den-fullbody-actor { z-index: 20; }

/* The earned patchwork image is a 4:3 full-room floor/base asset. Wall files
   remain above it and preserve their transparent floor opening. */
.den-stage.den-stage-fixed.den-full-scene-floor {
  aspect-ratio: 4 / 3 !important;
  width: min(96%, calc((100dvh - 190px) * 4 / 3), 980px) !important;
}
.den-stage.den-stage-fixed.den-full-scene-floor .den-room-shell {
  object-fit: fill;
}

.den-finish-controls {
  width: min(100%, 980px);
  margin: 6px auto 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(112,79,49,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
}
.den-finish-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.den-finish-label {
  margin-right: 2px;
  color: #694d33;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.den-finish-choice {
  min-width: 54px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(102,71,43,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  color: #70583f;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.den-finish-choice:hover {
  background: rgba(255,255,255,.72);
  border-color: rgba(112,78,43,.42);
}
.den-finish-choice.active {
  border-color: #8f6339;
  background: #f7e5c8;
  box-shadow: 0 0 0 2px rgba(151,105,61,.13);
}
.den-finish-choice i {
  display: block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  border-radius: 50%;
  background: var(--finish-swatch);
  border: 1px solid rgba(72,49,30,.28);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35);
}
.den-finish-choice b {
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .015em;
}
.den-finish-divider {
  width: 1px;
  height: 24px;
  background: rgba(104,73,44,.18);
}
.den-finish-reset {
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-left: 1px solid rgba(104,73,44,.18);
  background: transparent;
  color: #846c53;
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.den-finish-reset:hover { color: #5e432d; }
.den-stage-status { margin-top: 3px; }

@media (max-width: 900px) {
  .den-finish-controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .den-finish-divider { display: none; }
}
@media (max-width: 620px) {
  .den-finish-controls {
    justify-content: flex-start;
    padding: 6px;
  }
  .den-finish-group {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .den-finish-choice {
    min-width: 48px;
    flex: 0 0 auto;
  }
  .den-finish-reset {
    border-left: 0;
    padding-left: 2px;
  }
}
.den-finish-choice:disabled,
.den-finish-reset:disabled {
  opacity: .42;
  cursor: default;
}

/* ========================================================================
   v0.11.6 — DEN ASSET INVENTORY RAILS
   Room customization is an earned-asset swap, not a tint/color picker.
   Desktop sizing is width-led so short screens scroll instead of shrinking
   the physical Den into a narrow center strip.
   ======================================================================== */
.den-stage-wrap {
  display: grid;
  grid-template-columns: minmax(118px, 156px) minmax(0, 1fr) minmax(118px, 156px);
  grid-template-areas: "floor stage wall";
  align-items: start;
  gap: 12px;
  overflow: visible;
}
.den-stage.den-stage-fixed {
  grid-area: stage;
  width: 100% !important;
  max-width: 1120px !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
.den-stage.den-stage-fixed.den-full-scene-floor {
  width: 100% !important;
  max-width: 1120px !important;
  aspect-ratio: 4 / 3 !important;
}
.den-asset-rail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(111,78,48,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.den-asset-rail-floor { grid-area: floor; }
.den-asset-rail-wall { grid-area: wall; }
.den-asset-rail-heading {
  display: grid;
  gap: 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(111,78,48,.16);
}
.den-asset-rail-heading span {
  color: #a1764c;
  font: 700 7px/1 Arial,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.den-asset-rail-heading strong {
  color: #684b32;
  font: 700 10px/1.2 Arial,sans-serif;
}
.den-asset-choice {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(110,76,44,.22);
  border-radius: 10px;
  background: rgba(250,239,222,.72);
  color: #62472f;
  text-align: left;
  cursor: pointer;
}
.den-asset-choice:hover:not(:disabled) {
  border-color: #a57743;
  background: #f7e3c4;
}
.den-asset-choice.active {
  border-color: #936536;
  box-shadow: 0 0 0 2px rgba(151,105,61,.14);
  background: #f2d7ac;
}
.den-asset-choice:disabled { opacity:.46; cursor:default; }
.den-asset-choice.locked {
  opacity:.7;
  background:rgba(214,199,180,.62);
}
.den-asset-choice.locked .den-asset-thumbnail {
  filter:grayscale(.72) brightness(.78);
}
.den-asset-choice.creator-preview {
  border-color:#9a743e;
  background:rgba(238,211,165,.72);
}
.den-asset-choice.creator-preview .den-asset-thumbnail { filter:none; }
.den-header-actions {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.den-creator-mode-badge {
  border:1px solid rgba(122,87,48,.38);
  border-radius:999px;
  padding:8px 11px;
  background:#5f5133;
  color:#fff1d8;
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
}
.den-creator-mode-badge:hover { background:#75613a; }
.den-boundary-preview-button {
  border:1px solid rgba(63,122,94,.46);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(234,248,238,.9);
  color:#315d48;
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.045em;
  text-transform:uppercase;
  cursor:pointer;
}
.den-boundary-preview-button:hover:not(:disabled),
.den-boundary-preview-button.active {
  background:#315d48;
  color:#f2fff7;
}
.den-boundary-preview-button:disabled { opacity:.45; cursor:default; }
.den-asset-choice > span { min-width:0; display:grid; gap:2px; }
.den-asset-choice b { overflow:hidden; text-overflow:ellipsis; font:700 9px/1.1 Arial,sans-serif; }
.den-asset-choice small { color:#8a7159; font:7px/1.15 Arial,sans-serif; }
.den-asset-thumbnail {
  display:block;
  width:42px;
  height:42px;
  border-radius:8px;
  border:1px solid rgba(91,61,37,.25);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.den-asset-thumbnail-original {
  background-image:url('assets/den/den-room-shell-wide.png');
}
.den-asset-thumbnail-patchwork {
  background-image:url('assets/den/finishes/floor-mischief-patchwork-room.png');
  background-position:center bottom;
}
[data-den-floor][data-den-creator-only] .den-asset-thumbnail {
  background-position:center bottom;
}
[data-den-wall][data-den-creator-only] .den-asset-thumbnail {
  background-position:center top;
}
.den-wall-boundary-overlay {
  position:absolute;
  inset:0;
  z-index:12;
  overflow:hidden;
  pointer-events:none;
}
.den-wall-boundary {
  position:absolute;
  box-sizing:border-box;
  border:2px solid rgba(62,235,141,.96);
  border-radius:5px;
  background:rgba(47,213,123,.13);
  box-shadow:0 0 0 1px rgba(11,63,38,.78), inset 0 0 13px rgba(42,224,127,.16);
}
.den-wall-boundary::after {
  content:'';
  position:absolute;
  inset:3px;
  border:1px dashed rgba(235,255,243,.72);
  border-radius:2px;
}
.den-wall-boundary > span {
  position:absolute;
  left:4px;
  top:4px;
  z-index:1;
  max-width:calc(100% - 8px);
  overflow:hidden;
  padding:3px 5px;
  border-radius:4px;
  background:rgba(14,67,40,.84);
  color:#effff5;
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:.025em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.den-wall-boundary-left { border-color:#54e9d0; }
.den-wall-boundary-right { border-color:#54c8e9; }
.den-wall-boundary-ceiling { border-color:#e7d456; background:rgba(231,212,86,.12); }
.den-wall-boundary.compact > span { display:none; }
.den-asset-rail-note {
  margin:2px 0 0;
  color:#8a735b;
  font:7.5px/1.35 Arial,sans-serif;
}
.den-asset-empty {
  min-height:92px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  padding:10px 5px;
  border:1px dashed rgba(110,76,44,.22);
  border-radius:10px;
  color:#9a8067;
  text-align:center;
}
.den-asset-empty > span { font-size:18px; }
.den-asset-empty b { font:700 8px/1.2 Arial,sans-serif; }
.den-asset-empty small { font:7px/1.3 Arial,sans-serif; }

@media (min-width: 901px) {
  html:has(.app-shell.home-world-active),
  body:has(.app-shell.home-world-active) {
    height:auto;
    min-height:100%;
    overflow-y:auto;
  }
  .viewport-fit:has(.app-shell.home-world-active) {
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  .app-shell.home-world-active {
    width:min(1500px,calc(100vw - 28px));
    max-width:1500px;
    height:auto;
    min-height:calc(100dvh - 16px);
    grid-template-rows:auto auto auto;
    overflow:visible;
  }
  .app-shell.home-world-active .home-world-screen,
  .app-shell.home-world-active .den-world-layout,
  .app-shell.home-world-active .den-stage-card.den-visual-test-card {
    height:auto;
    overflow:visible;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .den-stage-wrap {
    grid-template-columns: 108px minmax(0,1fr) 108px;
    gap:8px;
  }
  .den-asset-rail { padding:7px; }
  .den-asset-choice { grid-template-columns:1fr; }
  .den-asset-thumbnail { width:100%; height:auto; aspect-ratio:1; }
}

@media (max-width: 900px) {
  .den-stage-wrap {
    grid-template-columns:1fr;
    grid-template-areas:"stage" "floor" "wall";
  }
  .den-asset-rail {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .den-asset-rail-heading,
  .den-asset-rail-note,
  .den-asset-empty { grid-column:1 / -1; }
  .den-stage.den-stage-fixed,
  .den-stage.den-stage-fixed.den-full-scene-floor { width:100% !important; }
}

/* ========================================================================
   v0.11.10 — SINGLE DEN INVENTORY + CALIBRATED EXPRESSION LAYER
   The room stays visible while only the inventory list scrolls.
   ======================================================================== */
.den-stage-wrap {
  grid-template-columns:minmax(0,1fr) clamp(320px,25vw,380px);
  grid-template-areas:"stage inventory";
  align-items:start;
  gap:14px;
}
.den-asset-rail { display:none !important; }
.den-stage.den-stage-fixed,
.den-stage.den-stage-fixed.den-full-scene-floor {
  max-width:none !important;
}
.den-inventory-panel {
  grid-area:inventory;
  min-width:0;
  height:clamp(570px,calc(100dvh - 188px),760px);
  display:grid;
  grid-template-rows:auto auto auto auto auto auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(96,65,38,.28);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,249,238,.96),rgba(239,219,187,.94));
  box-shadow:0 12px 28px rgba(55,34,19,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.den-inventory-heading {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px 10px;
  border-bottom:1px solid rgba(102,70,42,.14);
}
.den-inventory-heading > div { min-width:0; display:grid; gap:3px; }
.den-inventory-heading span,
.den-inventory-selected-copy > span {
  color:#a07449;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.13em;
}
.den-inventory-heading strong {
  color:#513722;
  font:700 18px/1.05 Georgia,serif;
}
.den-inventory-heading button {
  flex:0 0 auto;
  padding:7px 9px;
  border:1px solid rgba(104,71,42,.24);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  color:#735438;
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
}
.den-inventory-heading button:hover:not(:disabled) { background:#fff5e3; border-color:#916136; }
.den-inventory-heading button:disabled { opacity:.42; cursor:default; }
.den-inventory-selected {
  min-width:0;
  display:grid;
  grid-template-columns:44% minmax(0,1fr);
  align-items:center;
  gap:10px;
  margin:10px 11px 8px;
  padding:7px;
  border:1px solid rgba(101,68,40,.18);
  border-radius:12px;
  background:rgba(255,255,255,.48);
}
.den-inventory-selected-art,
.den-inventory-card-art {
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(75,48,28,.2);
  border-radius:9px;
  background:#24170f;
}
.den-inventory-selected-art { aspect-ratio:16/9; }
.den-inventory-selected-art img,
.den-inventory-card-art img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.den-inventory-selected-copy { min-width:0; display:grid; gap:4px; }
.den-inventory-selected-copy strong {
  overflow:hidden;
  color:#543a25;
  font:700 14px/1.15 Georgia,serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.den-inventory-selected-copy small {
  color:#80684f;
  font:8.5px/1.35 Arial,sans-serif;
}
.den-inventory-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:0 10px;
  border-bottom:1px solid rgba(102,70,42,.14);
}
.den-inventory-tabs button {
  min-width:0;
  display:grid;
  justify-items:center;
  gap:3px;
  padding:9px 3px 8px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:#80674e;
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:.035em;
  cursor:pointer;
}
.den-inventory-tabs button small {
  min-width:17px;
  padding:2px 4px;
  border-radius:999px;
  background:rgba(105,73,45,.09);
  color:#967c61;
  font:700 7px/1 Arial,sans-serif;
}
.den-inventory-tabs button.active { border-bottom-color:#996739; color:#563a24; }
.den-inventory-tabs button.active small { background:#76502f; color:#fff1da; }
.den-inventory-tabs button.disabled { opacity:.42; cursor:default; }
.den-item-filters {
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding:7px 9px;
  border-bottom:1px solid rgba(102,70,42,.14);
  background:rgba(255,250,241,.64);
  scrollbar-width:thin;
}
.den-item-filters.screen-hidden { display:none; }
.den-item-filters button {
  flex:0 0 auto;
  min-height:29px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid rgba(104,71,42,.2);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:#75583d;
  font:700 8px/1 Arial,sans-serif;
  cursor:pointer;
}
.den-item-filters button small {
  min-width:17px;
  padding:2px 4px;
  border-radius:999px;
  background:rgba(105,73,45,.1);
  font:700 7px/1 Arial,sans-serif;
}
.den-item-filters button.active { border-color:#80522c; background:#76502f; color:#fff5e4; }
.den-item-filters button.active small { background:rgba(255,255,255,.18); color:#fff; }
.den-inventory-tools {
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 11px;
  border-bottom:1px solid rgba(102,70,42,.14);
  background:rgba(255,255,255,.2);
}
.den-inventory-tools p {
  margin:0;
  color:#80684f;
  font:8px/1.3 Arial,sans-serif;
}
.den-inventory-tools .den-boundary-preview-button {
  flex:0 0 auto;
  padding:6px 8px;
  font-size:7px;
}
.den-inventory-scroll {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:#a67a4f rgba(117,83,51,.08);
  scrollbar-width:thin;
  padding:10px;
}
.den-inventory-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  gap:9px;
}
.den-inventory-card {
  position:relative;
  min-width:0;
  display:grid;
  gap:7px;
  padding:6px 6px 8px;
  border:1px solid rgba(100,67,39,.2);
  border-radius:12px;
  background:rgba(255,252,245,.72);
  color:#583c27;
  text-align:left;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
.den-inventory-card:hover:not(:disabled) {
  transform:translateY(-1px);
  border-color:#9a693d;
  background:#fff7e9;
  box-shadow:0 6px 13px rgba(69,43,23,.11);
}
.den-inventory-card.active {
  border-color:#80522c;
  background:#f7dfba;
  box-shadow:0 0 0 2px rgba(134,85,42,.16);
}
.den-inventory-card.creator-preview { border-color:rgba(139,96,49,.43); }
.den-inventory-card.locked { opacity:.68; filter:saturate(.72); cursor:default; }
.den-inventory-card:disabled:not(.locked) { opacity:.48; cursor:default; }
.den-inventory-card-art { width:100%; aspect-ratio:4/3; }
.den-inventory-card-copy { min-width:0; display:grid; gap:3px; padding:0 2px; }
.den-inventory-card-copy b {
  min-height:28px;
  overflow:hidden;
  color:#553923;
  font:700 12px/1.18 Georgia,serif;
}
.den-inventory-card-copy small { color:#8a6f55; font:8px/1.1 Arial,sans-serif; }
.den-inventory-card-check {
  position:absolute;
  right:10px;
  top:10px;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(69,43,23,.86);
  color:#fff0d5;
  font:700 11px/1 Arial,sans-serif;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  pointer-events:none;
}
.den-inventory-card-check:empty { display:none; }
.den-inventory-note {
  margin:10px 2px 2px;
  color:#8b7259;
  font:8px/1.4 Arial,sans-serif;
}
.den-expression-layer {
  position:absolute;
  inset:0;
  z-index:2;
  overflow:visible;
  pointer-events:none;
}
.den-expression-image {
  position:absolute;
  max-width:none;
  height:auto;
  user-select:none;
  pointer-events:none;
}

@media (min-width:1400px) {
  .app-shell.home-world-active { max-width:1680px; }
}
@media (max-width:1100px) and (min-width:901px) {
  .den-stage-wrap {
    grid-template-columns:minmax(0,1fr) 310px;
    gap:10px;
  }
  .den-inventory-panel { height:clamp(540px,calc(100dvh - 178px),700px); }
}
@media (max-width:900px) {
  .den-stage-wrap {
    grid-template-columns:1fr;
    grid-template-areas:"stage" "inventory";
  }
  .den-inventory-panel {
    width:100%;
    height:min(620px,72dvh);
  }
  .den-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .den-inventory-panel { height:min(590px,76dvh); }
  .den-inventory-selected { grid-template-columns:40% minmax(0,1fr); }
  .den-inventory-card-copy b { font-size:11px; }
  .den-inventory-tabs button { font-size:8px; }
}

/* ========================================================================
   v0.11.12 — UNIVERSAL MOVABLE FURNITURE
   Furniture remains in authored 1448 x 1086 room coordinates. The transparent
   item buttons scale with the stage, while the PNG alpha stays untouched.
   ======================================================================== */
.den-furniture-layer {
  position:absolute;
  inset:0;
  z-index:auto;
  overflow:hidden;
  pointer-events:none;
}
.den-furniture-item {
  position:absolute;
  z-index:10;
  display:block;
  margin:0;
  padding:0;
  border:0;
  border-radius:5px;
  outline:0;
  background:transparent;
  cursor:grab;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  appearance:none;
}
.den-furniture-item > img,
.den-furniture-seat-front {
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
}
.den-furniture-item.selected {
  outline:2px solid rgba(255,247,219,.95);
  box-shadow:0 0 0 4px rgba(114,81,151,.68),0 5px 16px rgba(52,35,66,.26);
}
.den-furniture-item:focus-visible {
  outline:3px solid #fff5c8;
  box-shadow:0 0 0 6px rgba(89,64,130,.75);
}
.den-furniture-item.dragging { cursor:grabbing; }
.den-furniture-item.resizing { cursor:nwse-resize; }
.den-furniture-item.collision {
  outline-color:#ffe2dc;
  box-shadow:0 0 0 5px rgba(175,59,46,.82),0 5px 18px rgba(70,25,19,.32);
}
.den-furniture-move-label {
  position:absolute;
  left:50%;
  top:-20px;
  display:none;
  transform:translateX(-50%);
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:rgba(62,42,78,.9);
  color:#fff7dc;
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:.12em;
  box-shadow:0 2px 8px rgba(39,25,48,.25);
  pointer-events:none;
}
.den-furniture-editing .den-furniture-item.selected .den-furniture-move-label { display:block; }
.den-furniture-resize-handle {
  position:absolute;
  right:-11px;
  bottom:-11px;
  display:none;
  width:24px;
  height:24px;
  border:2px solid #fff8dc;
  border-radius:50%;
  background:#725197;
  box-shadow:0 2px 8px rgba(45,27,56,.42);
  cursor:nwse-resize;
  pointer-events:auto;
  touch-action:none;
}
.den-furniture-resize-handle::before {
  content:'';
  position:absolute;
  right:5px;
  bottom:5px;
  width:7px;
  height:7px;
  border-right:2px solid #fff8dc;
  border-bottom:2px solid #fff8dc;
}
.den-furniture-editing .den-furniture-item.selected .den-furniture-resize-handle { display:block; }
.den-furniture-seat-front {
  position:absolute;
}
.den-fox-actor.den-fullbody-actor.is-seated {
  left:var(--den-fox-seat-x) !important;
  top:var(--den-fox-seat-top) !important;
  bottom:auto !important;
  width:var(--den-fox-seat-width) !important;
}
.den-inventory-card-art-furniture,
.den-inventory-selected-art:has(.den-inventory-preview-furniture) {
  background:radial-gradient(circle at 50% 45%,#fffaf0 0,#eee1d4 58%,#cfc1cc 100%);
}
.den-inventory-card-art img.den-inventory-card-furniture,
.den-inventory-selected-art img.den-inventory-preview-furniture {
  inset:7%;
  width:86%;
  height:86%;
  object-fit:contain;
}
.den-furniture-tools {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
}
.den-furniture-scale-tools {
  display:flex;
  align-items:center;
  gap:3px;
  padding:2px;
  border:1px solid rgba(100,69,41,.2);
  border-radius:9px;
  background:rgba(255,250,239,.5);
}
.den-furniture-scale-tools output {
  min-width:34px;
  color:#5e4733;
  font:800 8px/1 Arial,sans-serif;
  text-align:center;
}
.den-furniture-scale-tools button {
  min-width:25px;
  padding-inline:5px;
  font-size:13px;
}
.den-furniture-tools button {
  min-height:26px;
  padding:6px 7px;
  border:1px solid rgba(100,69,41,.28);
  border-radius:8px;
  background:rgba(255,250,239,.76);
  color:#68472d;
  font:700 7px/1 Arial,sans-serif;
  letter-spacing:.025em;
  cursor:pointer;
}
.den-furniture-tools button:hover:not(:disabled) { background:#fff4dd; border-color:#8c5b32; }
.den-furniture-tools button:disabled { opacity:.42; cursor:default; }
#denFurnitureRemoveButton { color:#8c3f35; }

@media (max-width:520px) {
  .den-inventory-tools { align-items:flex-start; flex-direction:column; }
  .den-furniture-tools { width:100%; justify-content:flex-end; }
}

/* ========================================================================
   v0.11.13 — PHONE AND TOUCH LAYOUT
   Portrait keeps the authored 4:3 room above a scrollable inventory. Phone
   landscape places the room and inventory side by side. Controls meet a
   practical touch target and the bottom navigation respects device safe areas.
   ======================================================================== */
@media (max-width:900px) {
  html {
    min-width:320px;
    scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
  }
  body {
    min-width:320px;
    min-height:100svh;
    overflow-x:hidden;
  }
  .viewport-fit {
    width:100%;
    min-height:100svh;
    padding:0;
    overflow:visible;
  }
  .app-shell {
    width:100%;
    max-width:none;
    margin:0;
    padding:max(8px,env(safe-area-inset-top,0px)) 8px calc(78px + env(safe-area-inset-bottom,0px));
    overflow:visible;
  }
  .brand-row {
    min-height:54px;
    padding:2px 5px 8px;
    gap:8px;
  }
  .brand-lockup { gap:9px; min-width:0; }
  .fox-mark { flex:0 0 auto; width:44px; height:44px; }
  .fox-mark svg { width:30px; height:30px; }
  .brand-lockup h1 { font-size:clamp(22px,7vw,30px); }
  .brand-lockup p { font-size:12px; }
  .sparkle { font-size:20px; transform:none; }

  .home-world-screen { gap:7px; }
  .home-world-intro.home-world-intro-premium {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:14px;
  }
  .home-world-intro.home-world-intro-premium h2 { font-size:18px; }
  .home-world-intro.home-world-intro-premium p { font-size:11px; line-height:1.3; }
  .den-unlock-pill,
  .den-creator-mode-badge {
    min-height:36px;
    display:flex;
    align-items:center;
    padding:7px 9px;
    font-size:8px;
  }
  .den-world-layout { display:block; }
  .den-stage-card.den-visual-test-card {
    padding:5px;
    border-radius:14px;
    overflow:visible;
  }
  .den-stage-wrap {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"stage" "inventory";
    gap:8px;
    align-items:start;
    overflow:visible;
  }
  .den-stage.den-stage-fixed,
  .den-stage.den-stage-fixed.den-full-scene-floor {
    grid-area:stage;
    justify-self:center;
    width:100% !important;
    max-width:100% !important;
    min-height:0;
    border-radius:12px;
    touch-action:none;
  }
  .den-stage-status {
    min-height:28px;
    margin:4px 3px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#725b44;
    font-size:10px;
    line-height:1.25;
  }
  .den-inventory-panel {
    grid-area:inventory;
    width:100%;
    height:min(590px,68svh);
    min-height:430px;
    border-radius:13px;
  }
  .den-inventory-heading { padding:9px 10px 8px; }
  .den-inventory-heading strong { font-size:17px; }
  .den-inventory-heading button {
    min-width:58px;
    min-height:40px;
    padding:9px 11px;
    font-size:9px;
  }
  .den-inventory-selected { margin:8px; }
  .den-inventory-selected-copy strong { font-size:14px; }
  .den-inventory-selected-copy small { font-size:10px; }
  .den-inventory-tabs {
    position:sticky;
    top:0;
    z-index:4;
    padding:0 6px;
    background:rgba(249,235,213,.98);
  }
  .den-inventory-tabs button {
    min-height:48px;
    padding:8px 2px 7px;
    font-size:10px;
    touch-action:manipulation;
  }
  .den-inventory-tabs button small { font-size:8px; }
  .den-inventory-tools {
    min-height:48px;
    padding:7px 9px;
  }
  .den-inventory-tools p { font-size:10px; line-height:1.3; }
  .den-inventory-tools .den-boundary-preview-button,
  .den-furniture-tools button {
    min-height:40px;
    padding:9px 10px;
    font-size:9px;
    touch-action:manipulation;
  }
  .den-inventory-scroll {
    padding:9px;
    -webkit-overflow-scrolling:touch;
  }
  .den-inventory-grid { gap:8px; }
  .den-inventory-card {
    min-height:132px;
    padding:6px 6px 9px;
    touch-action:manipulation;
  }
  .den-inventory-card-copy b { min-height:0; font-size:12px; }
  .den-inventory-card-copy small,
  .den-inventory-note { font-size:9px; }
  .den-furniture-item.selected {
    outline-width:3px;
    box-shadow:0 0 0 5px rgba(114,81,151,.7),0 5px 16px rgba(52,35,66,.26);
  }
  .den-furniture-resize-handle {
    right:-15px;
    bottom:-15px;
    width:34px;
    height:34px;
    border-width:3px;
  }
  .den-furniture-resize-handle::before {
    right:7px;
    bottom:7px;
    width:10px;
    height:10px;
    border-width:0 3px 3px 0;
  }
  .den-furniture-scale-tools output { min-width:42px; font-size:10px; }

  .bottom-nav {
    position:fixed;
    z-index:100;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    margin:0;
    padding:6px max(7px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px));
    gap:3px;
    border-width:1px 0 0;
    border-radius:18px 18px 0 0;
    box-shadow:0 -8px 24px rgba(16,9,4,.34);
  }
  .bottom-nav button {
    min-width:0;
    min-height:52px;
    padding:5px 2px;
    gap:2px;
    font-size:0;
    touch-action:manipulation;
  }
  .bottom-nav button span { font-size:24px; }
  .toast {
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
    width:max-content;
    max-width:calc(100vw - 24px);
    font-size:12px;
    text-align:center;
  }
  button { -webkit-tap-highlight-color:rgba(173,122,65,.22); }
}

@media (max-width:480px) and (orientation:portrait) {
  .app-shell { padding-inline:5px; }
  .brand-lockup p,
  .sparkle,
  .home-world-intro.home-world-intro-premium p { display:none; }
  .home-world-intro.home-world-intro-premium {
    min-height:48px;
    padding:6px 8px;
  }
  .home-world-intro.home-world-intro-premium h2 { font-size:17px; }
  .den-stage-card.den-visual-test-card { padding:3px; }
  .den-stage.den-stage-fixed,
  .den-stage.den-stage-fixed.den-full-scene-floor { border-radius:9px; }
  .den-inventory-panel { height:min(560px,66svh); min-height:410px; }
  .den-inventory-selected { grid-template-columns:34% minmax(0,1fr); }
  .den-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px) and (orientation:landscape) and (max-height:520px) {
  .app-shell.home-world-active {
    min-height:100svh;
    padding:4px 5px calc(60px + env(safe-area-inset-bottom,0px));
  }
  .app-shell.home-world-active > .brand-row,
  .app-shell.home-world-active .home-world-intro { display:none; }
  .app-shell.home-world-active .home-world-screen { display:block; }
  .app-shell.home-world-active .den-stage-card.den-visual-test-card {
    padding:3px;
    border-radius:10px;
  }
  .app-shell.home-world-active .den-stage-wrap {
    height:calc(100svh - 68px - env(safe-area-inset-bottom,0px));
    grid-template-columns:minmax(0,1fr) minmax(260px,38vw);
    grid-template-areas:"stage inventory";
    gap:5px;
    align-items:center;
    overflow:hidden;
  }
  .app-shell.home-world-active .den-stage.den-stage-fixed,
  .app-shell.home-world-active .den-stage.den-stage-fixed.den-full-scene-floor {
    width:min(100%,calc((100svh - 74px) * 4 / 3)) !important;
    max-height:calc(100svh - 74px) !important;
  }
  .app-shell.home-world-active .den-inventory-panel {
    height:100%;
    min-height:0;
    border-radius:9px;
  }
  .app-shell.home-world-active .den-inventory-heading { padding:5px 7px; }
  .app-shell.home-world-active .den-inventory-heading strong { font-size:14px; }
  .app-shell.home-world-active .den-inventory-heading button { min-height:32px; padding:6px 8px; }
  .app-shell.home-world-active .den-inventory-selected { display:none; }
  .app-shell.home-world-active .den-inventory-tabs button { min-height:38px; font-size:8px; }
  .app-shell.home-world-active .den-inventory-tools { min-height:40px; padding:4px 7px; }
  .app-shell.home-world-active .den-inventory-tools p { font-size:8px; }
  .app-shell.home-world-active .den-furniture-tools button { min-height:32px; padding:6px; font-size:7px; }
  .app-shell.home-world-active .den-inventory-scroll { padding:6px; }
  .app-shell.home-world-active .den-inventory-card { min-height:104px; }
  .app-shell.home-world-active .den-stage-status { display:none; }
  .bottom-nav { padding-top:3px; padding-bottom:calc(3px + env(safe-area-inset-bottom,0px)); }
  .bottom-nav button { min-height:46px; }
  .bottom-nav button span { font-size:21px; }
}

/* Reconciled journey UI and dedicated Den companion panel. */
.companion-controls { overflow-y:auto; }
#denPortraitPreview { min-width:0; display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(102,70,42,.16); background:linear-gradient(135deg,rgba(255,250,241,.98),rgba(235,211,176,.72)); }
#denPortraitArt { position:relative; width:92px; aspect-ratio:1; overflow:hidden; border:1px solid rgba(105,73,45,.2); border-radius:11px; background:#fff8eb; box-shadow:0 3px 10px rgba(73,51,27,.12); }
#denPortraitArt img { position:absolute; transform-origin:center; }
#denPortraitArt.is-empty::after { content:'◇'; position:absolute; inset:0; display:grid; place-items:center; color:#b09272; font:30px/1 Georgia,serif; }
.den-companion-copy { min-width:0; display:grid; gap:7px; }
.den-companion-copy > span { color:#a07449; font:700 8px/1 Arial,sans-serif; letter-spacing:.13em; }
#denPortraitLine { margin:0; color:#4f3e2d; font:13px/1.4 Georgia,serif; }
.den-portrait-preview-active #denFoxActor { visibility:hidden; pointer-events:none; }

@media (max-width:900px) {
  #denPortraitPreview { grid-template-columns:76px minmax(0,1fr); }
  #denPortraitArt { width:76px; }
  .den-item-filters button { min-height:36px; font-size:9px; }
}
@media (max-width:900px) and (orientation:landscape) and (max-height:520px) {
  #denPortraitPreview { grid-template-columns:52px minmax(0,1fr); gap:7px; padding:5px 7px; }
  #denPortraitArt { width:52px; border-radius:7px; }
  #denPortraitLine { font-size:10px; line-height:1.25; }
  .den-companion-copy { gap:3px; }
  .den-item-filters { padding:4px 6px; }
  .den-item-filters button { min-height:29px; padding:5px 7px; font-size:7px; }
}

/* Supported decor stays visibly distinct while editing. */
.den-furniture-item.on-surface .den-furniture-move-label { background:#426d55; }

/* Den side-panel proportion pass — keeps the room clear while making the
   companion and inventory readable at normal desktop sizes. */
@media (min-width:901px) {
  .den-stage-wrap {
    grid-template-columns:minmax(0,1fr) clamp(400px,29vw,450px);
    align-items:stretch;
    gap:16px;
  }
  .den-inventory-panel {
    align-self:stretch;
    height:auto;
    min-height:100%;
    max-height:none;
  }
  .den-inventory-panel:has([data-den-inventory-tab="items"].active) .den-inventory-selected {
    display:none;
  }
  #denPortraitPreview {
    grid-template-columns:116px minmax(0,1fr);
    gap:14px;
    padding:13px 15px;
  }
  #denPortraitArt { width:116px; }
  .den-companion-copy > span { font-size:9px; }
  #denPortraitLine { font-size:14px; line-height:1.45; }
  .den-inventory-heading { padding:13px 15px 11px; }
  .den-inventory-heading span,
  .den-inventory-selected-copy > span { font-size:9px; }
  .den-inventory-heading strong { font-size:20px; }
  .den-inventory-heading button { min-height:31px; padding:8px 11px; font-size:8.5px; }
  .den-inventory-tabs { padding:0 12px; }
  .den-inventory-tabs button { min-height:45px; padding:10px 4px 8px; font-size:10px; }
  .den-inventory-tabs button small { font-size:8px; }
  .den-item-filters { gap:7px; padding:9px 11px; }
  .den-item-filters button { min-height:34px; padding:7px 10px; font-size:9px; }
  .den-item-filters button small { font-size:8px; }
  .den-inventory-tools { min-height:48px; padding:9px 13px; }
  .den-inventory-tools p { font-size:9.5px; line-height:1.35; }
  .den-inventory-scroll { padding:12px; }
  .den-inventory-grid { gap:11px; }
  .den-inventory-card { gap:8px; padding:7px 7px 10px; }
  .den-inventory-card-copy b { min-height:31px; font-size:13px; line-height:1.2; }
  .den-inventory-card-copy small { font-size:9px; line-height:1.25; }
  .den-inventory-note { font-size:9px; }
}

@media (min-width:901px) and (max-width:1100px) {
  .den-stage-wrap { grid-template-columns:minmax(0,1fr) minmax(350px,39vw); gap:10px; }
  #denPortraitPreview { grid-template-columns:92px minmax(0,1fr); padding:10px 11px; }
  #denPortraitArt { width:92px; }
}

/* Short desktop / laptop fit. The complete Den remains usable at 100% browser
   zoom; the room and inventory consume the available height instead of making
   the player zoom the entire page out. */
@media (min-width:901px) and (max-height:750px) {
  html:has(.app-shell.home-world-active),
  body:has(.app-shell.home-world-active) {
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .viewport-fit:has(.app-shell.home-world-active) {
    height:100dvh;
    min-height:0;
    padding:5px 10px;
    overflow:hidden;
  }
  .app-shell.home-world-active {
    width:min(1380px,calc(100vw - 20px));
    max-width:1380px;
    height:calc(100dvh - 10px);
    min-height:0;
    grid-template-rows:42px minmax(0,1fr) 48px;
    gap:6px;
    overflow:hidden;
  }
  .app-shell.home-world-active > .brand-row {
    min-height:0;
    height:42px;
    padding:0 7px;
  }
  .app-shell.home-world-active .fox-mark { width:36px; height:36px; }
  .app-shell.home-world-active .fox-mark svg { width:25px; height:25px; }
  .app-shell.home-world-active .brand-lockup { gap:8px; }
  .app-shell.home-world-active .brand-lockup h1 { font-size:21px; }
  .app-shell.home-world-active .brand-lockup p { display:none; }
  .app-shell.home-world-active .sparkle { font-size:16px; }
  .app-shell.home-world-active .wallet-pill { padding:6px 9px; font-size:8px; }
  .app-shell.home-world-active .home-world-screen {
    height:100%;
    min-height:0;
    grid-template-rows:38px minmax(0,1fr);
    gap:6px;
    overflow:hidden;
  }
  .app-shell.home-world-active .home-world-intro.home-world-intro-premium {
    min-height:0;
    height:38px;
    padding:4px 9px;
    align-items:center;
  }
  .app-shell.home-world-active .home-world-intro.home-world-intro-premium h2 {
    margin:0;
    font-size:16px;
  }
  .app-shell.home-world-active .home-world-intro.home-world-intro-premium p,
  .app-shell.home-world-active .home-world-intro.home-world-intro-premium .section-eyebrow {
    display:none;
  }
  .app-shell.home-world-active .den-header-actions { align-items:center; }
  .app-shell.home-world-active .den-creator-mode-badge,
  .app-shell.home-world-active .den-unlock-pill {
    min-height:27px;
    padding:5px 8px;
    font-size:7px;
  }
  .app-shell.home-world-active .den-world-layout,
  .app-shell.home-world-active .den-stage-card.den-visual-test-card,
  .app-shell.home-world-active .den-stage-wrap {
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .app-shell.home-world-active .den-stage-card.den-visual-test-card {
    padding:4px;
  }
  .app-shell.home-world-active .den-stage-wrap {
    grid-template-columns:minmax(0,1fr) minmax(340px,36vw);
    gap:7px;
    align-items:stretch;
  }
  .app-shell.home-world-active .den-stage.den-stage-fixed {
    justify-self:center;
    width:auto !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    aspect-ratio:16 / 9 !important;
  }
  .app-shell.home-world-active .den-stage.den-stage-fixed.den-full-scene-floor {
    aspect-ratio:4 / 3 !important;
  }
  .app-shell.home-world-active .den-stage-status { display:none; }
  .app-shell.home-world-active .den-inventory-panel {
    height:100%;
    min-height:0;
    max-height:100%;
    border-radius:11px;
  }
  .app-shell.home-world-active #denPortraitPreview {
    grid-template-columns:64px minmax(0,1fr);
    gap:8px;
    padding:6px 8px;
  }
  .app-shell.home-world-active #denPortraitArt { width:64px; border-radius:8px; }
  .app-shell.home-world-active .den-companion-copy { gap:4px; }
  .app-shell.home-world-active .den-companion-copy > span { font-size:7px; }
  .app-shell.home-world-active #denPortraitLine { font-size:11px; line-height:1.3; }
  .app-shell.home-world-active .den-inventory-heading { padding:6px 9px 5px; }
  .app-shell.home-world-active .den-inventory-heading span { font-size:7px; }
  .app-shell.home-world-active .den-inventory-heading strong { font-size:16px; }
  .app-shell.home-world-active .den-inventory-heading button {
    min-height:27px;
    padding:5px 8px;
    font-size:7px;
  }
  .app-shell.home-world-active .den-inventory-tabs { padding:0 7px; }
  .app-shell.home-world-active .den-inventory-tabs button {
    min-height:36px;
    padding:6px 2px 5px;
    font-size:8px;
  }
  .app-shell.home-world-active .den-inventory-tabs button small { font-size:7px; }
  .app-shell.home-world-active .den-item-filters { gap:4px; padding:5px 7px; }
  .app-shell.home-world-active .den-item-filters button {
    min-height:28px;
    padding:5px 7px;
    font-size:7px;
  }
  .app-shell.home-world-active .den-item-filters button small { font-size:6.5px; }
  .app-shell.home-world-active .den-inventory-tools { min-height:35px; padding:5px 8px; }
  .app-shell.home-world-active .den-inventory-tools p { font-size:7.5px; line-height:1.25; }
  .app-shell.home-world-active .den-inventory-scroll { padding:7px; }
  .app-shell.home-world-active .den-inventory-grid { gap:7px; }
  .app-shell.home-world-active .den-inventory-card {
    min-height:0;
    gap:5px;
    padding:5px 5px 7px;
  }
  .app-shell.home-world-active .den-inventory-card-copy b {
    min-height:24px;
    font-size:10.5px;
  }
  .app-shell.home-world-active .den-inventory-card-copy small,
  .app-shell.home-world-active .den-inventory-note { font-size:7px; }
  .app-shell.home-world-active .bottom-nav {
    min-height:48px;
    padding:3px 6px;
  }
  .app-shell.home-world-active .bottom-nav button { min-height:40px; padding:4px 6px; font-size:8px; }
  .app-shell.home-world-active .bottom-nav button span { font-size:15px; }
}

/* Enforce the short-desktop height budget. This second pass is intentionally
   explicit because several older Den rules use height:auto and overflow:visible. */
@media (min-width:901px) and (max-height:750px) {
  .app-shell.home-world-active .home-world-screen {
    height:calc(100dvh - 102px) !important;
    max-height:calc(100dvh - 102px) !important;
  }
  .app-shell.home-world-active .den-world-layout {
    height:calc(100dvh - 146px) !important;
    max-height:calc(100dvh - 146px) !important;
  }
  .app-shell.home-world-active .den-stage-card.den-visual-test-card,
  .app-shell.home-world-active .den-stage-wrap,
  .app-shell.home-world-active .den-inventory-panel {
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
  }
  .app-shell.home-world-active .den-stage-wrap {
    width:100%;
    max-width:calc((100dvh - 146px) * 1.3334 + 397px);
    margin-inline:auto;
    grid-template-columns:minmax(0,1fr) 390px;
  }
}

@media (min-width:901px) and (max-width:1100px) and (max-height:750px) {
  .app-shell.home-world-active .den-stage-wrap {
    max-width:100%;
    grid-template-columns:minmax(0,1fr) minmax(340px,370px);
  }
}