/* v0.11.18 — Stats readability, Den portrait mode, and Wardrobe visibility. */

#denPortraitPreview { position: relative; }
#denInventoryToggle {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 8px;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(100,69,41,.25);
  border-radius: 999px;
  background: rgba(255,250,239,.88);
  color: #68472d;
  font: 700 7.5px/1 Arial,sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
#denInventoryToggle:hover { background: #fff4dd; border-color: #8c5b32; }

@media (min-width: 901px) {
  #denPortraitPreview .den-companion-copy { padding-right: 70px; }

  .den-inventory-panel.den-inventory-collapsed > :not(#denPortraitPreview) {
    display: none !important;
  }
  .den-inventory-panel.den-inventory-collapsed #denPortraitPreview {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) auto;
    align-items: center;
    justify-items: center;
    gap: 14px;
    border-bottom: 0;
  }
  .den-inventory-panel.den-inventory-collapsed #denPortraitArt {
    width: min(92%, 360px);
    max-height: 100%;
    align-self: center;
  }
  .den-inventory-panel.den-inventory-collapsed .den-companion-copy {
    width: min(100%, 360px);
    padding-right: 0;
    text-align: center;
    justify-items: center;
  }
  .den-inventory-panel.den-inventory-collapsed .den-companion-copy > span { font-size: 9px; }
  .den-inventory-panel.den-inventory-collapsed #denPortraitLine { font-size: 15px; line-height: 1.4; }
  .den-inventory-panel.den-inventory-collapsed #denInventoryToggle {
    top: 12px;
    right: 12px;
    min-height: 31px;
    padding: 7px 11px;
    font-size: 8.5px;
  }

  .stats-screen {
    grid-template-rows: minmax(230px,1.15fr) minmax(215px,.95fr);
    gap: 9px;
  }
  .stats-detail-grid {
    grid-template-columns: .92fr 1.18fr 1.18fr;
    grid-template-rows: minmax(55px,.62fr) minmax(96px,1.18fr) minmax(42px,.52fr);
    gap: 8px;
  }
  .expression-tier-card { grid-column: 1 / -1; }
  .progress-note-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(130px,.45fr) minmax(120px,.38fr) minmax(0,1.5fr);
    align-items: center;
    gap: 14px;
  }
  .progress-note-card .detail-card-heading.compact { padding: 0; border-bottom: 0; }
  .progress-note-card > strong { margin: 0; }
  .progress-note-card > p { margin: 0; padding-right: 30px; }

  .stats-card-heading h2 { font-size: 18px; }
  .section-eyebrow { font-size: 9px; }
  .condition-copy span { font-size: 8px; }
  .condition-copy strong { font-size: 14px; }
  .condition-copy small { font-size: 9px; }
  .stat-label span, .stat-label strong { font-size: 11.5px; }
  .stat-main small { font-size: 9px; line-height: 1.25; }
  .detail-card-heading h3 { font-size: 11.5px; }
  .detail-card-heading > span { font-size: 9px; }
  .expression-current span, .expression-rule span { font-size: 9px; }
  .expression-current strong, .expression-rule strong { font-size: 10.5px; }
  .expression-current small, .expression-rule small { font-size: 9px; line-height: 1.3; }
  .detail-card p { font-size: 9px; line-height: 1.3; }
  .perk-mark { width: 31px; height: 31px; font-size: 15px; }
  .perk-preview strong, .progress-note-card > strong { font-size: 10.5px; }
  .perk-preview small { font-size: 9px; line-height: 1.3; }
  .trust-guidance {
    margin: 5px 0 2px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: 12px;
    row-gap: 2px;
  }
  .trust-guidance li { font-size: 9px; line-height: 1.3; }
  .trust-guidance-note { font-size: 9px; line-height: 1.3; }
  .wardrobe-effects-summary { gap: 4px; }
  .wardrobe-effect-items { gap: 3px; }
  .wardrobe-effect-item strong { font-size: 10.5px; }
  .wardrobe-effect-item small,
  .wardrobe-effect-footnote,
  .wardrobe-set-note { font-size: 9px; line-height: 1.3; }
}

@media (min-width: 901px) and (max-height: 680px) {
  .stats-screen { grid-template-rows: minmax(215px,1.05fr) minmax(205px,.95fr); }
  .stats-detail-grid { grid-template-rows: minmax(50px,.55fr) minmax(91px,1.12fr) minmax(39px,.48fr); }
  .stats-fox-card, .stats-values-card { padding: 8px 10px; }
  .stat-list { gap: 4px; margin-top: 5px; }
  .stat-row { padding: 3px 6px; }
}

/* A short desktop viewport used to leave less than one complete asset tile
   visible. Reclaim height from decorative chrome while keeping Saved Styles,
   the fox preview, category tabs, and collection progress intact. */
@media (min-width: 901px) and (max-height: 750px) {
  .app-shell.wardrobe-active {
    grid-template-rows:
      clamp(46px, 6vh, 58px)
      minmax(0, 1fr)
      clamp(88px, 16vh, 112px)
      clamp(44px, 6vh, 50px);
    gap: clamp(5px, .8vh, 8px);
  }

  .app-shell.wardrobe-active .asset-card {
    padding: clamp(42px, 5.5vh, 54px) 14px 8px;
  }
  .app-shell.wardrobe-active .asset-title-tab {
    height: clamp(42px, 5.5vh, 54px);
  }
  .app-shell.wardrobe-active .category-tabs {
    margin-bottom: 5px;
  }
  .app-shell.wardrobe-active .category-tab {
    min-height: 34px;
  }
  .app-shell.wardrobe-active .asset-section-heading {
    margin-bottom: 4px;
  }
  .app-shell.wardrobe-active .asset-scroll {
    min-height: 78px;
  }
  .app-shell.wardrobe-active .asset-tile {
    aspect-ratio: auto;
    min-height: clamp(72px, 13vh, 98px);
  }
  .app-shell.wardrobe-active .collection-progress {
    min-height: 28px;
    margin-top: 4px;
  }
}

@media (max-width: 900px) {
  #denInventoryToggle { display: none; }
}

/* v0.11.19 — read-only Pre-Reveal Beta access. */
.wallet-stack {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.beta-mode-badge {
  color: #dcb77e;
  font: 700 8px/1.1 Arial,sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.beta-access-gate {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(31,18,11,.78);
  backdrop-filter: blur(8px);
}
.beta-access-card {
  width: min(520px,100%);
  padding: clamp(22px,4vw,38px);
  border: 2px solid rgba(126,88,49,.62);
  border-radius: 24px;
  background: linear-gradient(145deg,#fff4df,#ecd3ad);
  color: #4e3724;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.38),0 28px 70px rgba(18,9,4,.44);
  text-align: center;
}
.beta-access-card h2 {
  margin: 7px 0 10px;
  font-size: clamp(24px,5vw,34px);
}
.beta-access-card > p {
  margin: 0 auto 14px;
  max-width: 430px;
  font: 14px/1.5 Arial,sans-serif;
}
.beta-access-note {
  margin: 17px 0;
  padding: 13px 15px;
  border: 1px solid rgba(121,83,46,.25);
  border-radius: 14px;
  background: rgba(255,249,237,.58);
  display: grid;
  gap: 4px;
  font: 12px/1.4 Arial,sans-serif;
}
.beta-access-status {
  min-height: 21px;
  color: #74563b;
  font-weight: 700 !important;
}
.beta-access-status[data-state="error"] { color: #93473c; }
.beta-access-status[data-state="working"] { color: #756126; }
.beta-connect-button {
  width: 100%;
  min-height: 48px;
  margin: 2px 0 12px;
  border: 1px solid #665e3c;
  border-radius: 13px;
  background: linear-gradient(#656443,#4c5032);
  color: #fff7e8;
  font: 700 13px/1 Arial,sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
}
.beta-connect-button:hover { filter: brightness(1.06); }
.beta-connect-button:disabled,.wallet-pill:disabled { opacity: .65; cursor: wait; }
.beta-access-card > small {
  display: block;
  color: #796148;
  font: 10px/1.4 Arial,sans-serif;
}

@media (max-width: 620px) {
  .wallet-stack { display: none; }
  .beta-access-card { border-radius: 18px; }
}

/* v0.11.20 — visible wallet diagnostics and usable Saved Style cards. */
.wallet-feedback {
  position: fixed;
  z-index: 21000;
  top: 16px;
  left: 50%;
  width: min(560px,calc(100% - 28px));
  padding: 11px 16px;
  border: 1px solid rgba(230,195,146,.48);
  border-radius: 14px;
  background: #2e2017;
  color: #f8e5c8;
  box-shadow: 0 10px 28px rgba(0,0,0,.34);
  font: 700 12px/1.45 Arial,sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-12px);
  transition: opacity .18s ease,transform .18s ease;
}
.wallet-feedback.is-visible { opacity: 1; transform: translate(-50%,0); }
.wallet-feedback[data-state="error"] { border-color: rgba(236,143,124,.72); }
.wallet-feedback[data-state="working"] { border-color: rgba(226,197,96,.65); }

@media (min-width: 901px) {
  .app-shell.wardrobe-active {
    grid-template-rows:
      clamp(50px,6vh,72px)
      minmax(0,1fr)
      clamp(150px,21vh,210px)
      clamp(44px,6vh,58px);
  }
  .app-shell.wardrobe-active .saved-panel {
    padding: 8px 14px 0;
  }
  .app-shell.wardrobe-active .saved-content {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
    padding: 5px 0 7px;
  }
  .app-shell.wardrobe-active .saved-slots { gap: 9px; }
  .app-shell.wardrobe-active .saved-slot {
    min-height: 92px;
    display: grid;
    grid-template-rows: minmax(0,1fr) auto;
    justify-content: stretch;
  }
  .app-shell.wardrobe-active .saved-slot .saved-preview {
    min-height: 54px;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
  }
  .app-shell.wardrobe-active .saved-slot .saved-preview br + br { display: none; }
  .app-shell.wardrobe-active .saved-slot .load-button,
  .app-shell.wardrobe-active .saved-slot .clear-style-button {
    min-height: 28px;
    padding: 5px 7px;
    font-size: 10px;
  }
  .app-shell.wardrobe-active .saved-slot .clear-style-button { min-width: 58px; }
  .app-shell.wardrobe-active .note-card { display: none; }
  .app-shell.wardrobe-active .wallet-history-note {
    min-height: 24px;
    font-size: 9px;
  }
}

@media (min-width: 901px) and (max-height: 750px) {
  .app-shell.wardrobe-active {
    grid-template-rows:
      clamp(46px,6vh,58px)
      minmax(0,1fr)
      clamp(138px,20vh,154px)
      clamp(44px,6vh,50px);
  }
  .app-shell.wardrobe-active .saved-heading h2 { font-size: 13px; }
  .app-shell.wardrobe-active .saved-slot { min-height: 84px; }
  .app-shell.wardrobe-active .saved-slot .saved-preview { min-height: 48px; }
}

/* v0.11.22: compact invitation; choices use their own accessible modal. */
#seedMomentInvite {width:100%;padding:10px 14px;margin:6px 0;border:1px solid #ad8960;border-radius:12px;background:#f7e9cc;color:#49331f;font:inherit;cursor:pointer;}
#seedMomentInvite[hidden] {display:none!important;}
#seedMomentDialog {box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px;border:2px solid #bca27b;border-radius:18px;background:#fff8eb;color:#49331f;box-shadow:0 18px 70px #24190e55;font-size:17px;line-height:1.5;}
#seedMomentDialog::backdrop {background:#24190e88;}
#seedMomentDialog h2 {margin:8px 28px 14px 0;font-size:25px;}
#seedMomentDialog small {font-size:12px;letter-spacing:.12em;}
#seedMomentDialog button {font:inherit;color:inherit;cursor:pointer;padding:10px 14px;border:1px solid #baa17b;border-radius:10px;background:#f4e5c9;}
#seedMomentChoices {display:grid;gap:8px;}
#seedMomentChoices[hidden],#seedMomentQuestion[hidden] {display:none;}
#seedMomentChoices button {text-align:left;}
#seedMomentLater {margin-top:18px;background:transparent!important;}
#seedMomentDialog .moment-close {position:absolute;right:14px;top:10px;padding:0 9px;font-size:25px;background:transparent;}
#seedMomentDialog button:focus-visible,#seedMomentInvite:focus-visible {outline:3px solid #86623e;outline-offset:3px;}
/* Optional moments add rows: size every control by its content, never collapse the summary. */
.companion-controls {grid-template-rows:none;grid-auto-rows:max-content;align-content:start;}
#personalitySummary {margin:2px 0 6px;font-size:12px;line-height:1.4;color:#684f36;}
#seedMomentInvite {font-weight:700;box-shadow:0 2px 0 #ac8e6144;}
#seedMomentInvite:hover {background:#ecd5ae;border-color:#765b36;}