/* Fox Styler v0.11.16 — authoritative desktop Den layout.
   This file intentionally loads after styles.css so the Den has one final
   viewport contract instead of another height-specific legacy override. */

@media (min-width: 901px) {
  html:has(.app-shell.home-world-active),
  body:has(.app-shell.home-world-active) {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .viewport-fit:has(.app-shell.home-world-active) {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: clamp(5px, 1vh, 10px) 12px;
    overflow: hidden;
  }

  .app-shell.home-world-active {
    width: min(1500px, calc(100vw - 24px));
    max-width: 1500px;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-rows: clamp(46px, 6.5vh, 68px) minmax(0, 1fr) clamp(46px, 6vh, 62px);
    gap: clamp(5px, 1vh, 9px);
    overflow: hidden;
  }

  .app-shell.home-world-active > .brand-row {
    grid-row: 1;
    min-height: 0;
    height: 100%;
    padding: 0 10px;
  }

  .app-shell.home-world-active .home-world-screen {
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(5px, .8vh, 8px);
    overflow: hidden;
  }

  .app-shell.home-world-active .home-world-intro.home-world-intro-premium {
    min-height: 0;
    padding: clamp(5px, .8vh, 9px) 12px;
  }

  .app-shell.home-world-active .home-world-intro.home-world-intro-premium h2 {
    margin: 0 0 2px;
    font-size: clamp(17px, 2.1vh, 21px);
  }

  .app-shell.home-world-active .home-world-intro.home-world-intro-premium p {
    font-size: clamp(8px, 1.15vh, 10px);
    line-height: 1.25;
  }

  .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 {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
  }

  .app-shell.home-world-active .den-world-layout {
    display: block;
  }

  .app-shell.home-world-active .den-stage-card.den-visual-test-card {
    padding: clamp(4px, .65vh, 7px);
    display: flex;
    flex-direction: column;
  }

  .app-shell.home-world-active .den-stage-wrap {
    flex: 1 1 auto;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(350px, 28vw, 430px);
    grid-template-areas: "stage inventory";
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(7px, .8vw, 13px);
  }

  .app-shell.home-world-active .den-stage.den-stage-fixed,
  .app-shell.home-world-active .den-stage.den-stage-fixed.den-full-scene-floor {
    grid-area: stage;
    align-self: center;
    justify-self: center;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    flex: none !important;
    /* Pixel dimensions are supplied by den-layout-guard.js. These fallbacks
       keep the room contained before the first measurement. */
    width: min(100%, calc((100dvh - 190px) * 16 / 9)) !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .app-shell.home-world-active .den-stage.den-stage-fixed.den-full-scene-floor {
    width: min(100%, calc((100dvh - 190px) * 4 / 3)) !important;
    aspect-ratio: 4 / 3 !important;
  }

  .app-shell.home-world-active .den-stage.den-stage-fixed.den-layout-sized {
    width: var(--den-stage-fit-width) !important;
    height: var(--den-stage-fit-height) !important;
  }

  .app-shell.home-world-active .den-inventory-panel {
    display: flex;
    flex-direction: column;
    grid-area: inventory;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .app-shell.home-world-active .den-inventory-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-shell.home-world-active .den-inventory-panel > :not(.den-inventory-scroll) {
    flex-shrink: 0;
  }

  .app-shell.home-world-active .den-stage-status {
    display: none;
  }

  .app-shell.home-world-active > .bottom-nav {
    grid-row: 3;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 4px 8px;
  }

  .app-shell.home-world-active > .bottom-nav button {
    min-height: 0;
    height: 100%;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .app-shell.home-world-active .den-stage-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 38vw);
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .app-shell.home-world-active .brand-lockup p,
  .app-shell.home-world-active .sparkle,
  .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 .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 .wallet-pill { padding: 6px 9px; font-size: 8px; }

  .app-shell.home-world-active .home-world-intro.home-world-intro-premium {
    height: 38px;
    padding: 4px 9px;
  }

  .app-shell.home-world-active #denPortraitPreview {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 8px;
  }

  .app-shell.home-world-active #denPortraitArt { width: 62px; }
  .app-shell.home-world-active #denPortraitLine { font-size: 10.5px; line-height: 1.25; }
  .app-shell.home-world-active .den-inventory-heading { padding: 5px 8px; }
  .app-shell.home-world-active .den-inventory-heading strong { font-size: 15px; }
  .app-shell.home-world-active .den-inventory-tabs button { min-height: 34px; padding: 5px 2px; font-size: 8px; }
  .app-shell.home-world-active .den-item-filters { gap: 4px; padding: 4px 6px; }
  .app-shell.home-world-active .den-item-filters button { min-height: 27px; padding: 4px 6px; font-size: 7px; }
  .app-shell.home-world-active .den-inventory-tools { min-height: 33px; padding: 4px 7px; }
  .app-shell.home-world-active .den-inventory-tools p { font-size: 7.5px; line-height: 1.2; }
  .app-shell.home-world-active .den-inventory-scroll { padding: 6px; }
}

#denLayoutDebug {
  white-space: pre-line;
  position: fixed;
  z-index: 10000;
  right: 10px;
  bottom: 10px;
  max-width: min(360px, calc(100vw - 20px));
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 9px;
  background: rgba(25,16,10,.92);
  color: #fff1d9;
  box-shadow: 0 7px 22px rgba(0,0,0,.35);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}

#denLayoutDebug[data-status="PASS"] { border-color: #7bc99b; }
#denLayoutDebug[data-status="FAIL"] { border-color: #ef8b80; color: #ffd4cf; }