/* Clean website embed — UI floats on quiet stage, no extra chrome */
html, body {
  background: transparent !important;
  background-color: transparent !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/*
  Fixed cell size (style.css uses vmin — tiny inside iframes).
  Slightly compact so full dual-panel reads cleanly.
*/
:root {
  --inv-cell-scale: 1 !important;
  --inv-ui-scale: 1 !important;
  --inv-pad-scale: 0.95 !important;
  --inv-font-scale: 0.96 !important;
  --inv-gap-scale: 1 !important;
  --cell: 50px !important;
  --gap: 5px !important;
  --panel-gap: 12px !important;
  --panel-pad: 14px !important;
  --equip-frame: 72px !important;
  --zone-spacer: 11px !important;
  --inv-shadow: 0.85;
}

#app {
  position: fixed !important;
  inset: 0 !important;
  /* Fully transparent — parent stage provides the canvas */
  background: transparent !important;
  background-color: transparent !important;
}

/* No dim scrim / no world-blur simulation on site */
#app:not(.hidden)::before,
#app.is-open::before,
#app.is-closing::before {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.inv-wrap {
  max-width: min(96vw, 1280px) !important;
  max-height: min(94vh, 900px) !important;
  padding: 2.5vh 1.5vw !important;
  gap: var(--panel-gap) !important;
  opacity: 1 !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
/* Flat demo stage */
#app.is-open .inv-wrap,
#app .inv-wrap {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

/* Hide fold chrome that only adds noise on marketing page */
.bag-side-fold,
.panel-fold-tab {
  display: none !important;
}

/* Softer panel elevation for product shot look */
.panel {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* No floating “demo” badge */
.web-demo-badge {
  display: none !important;
}

/* Homepage world-loot card: only the loot container, looping reveal */
html.loot-embed .equip,
html.loot-embed #equipPanel,
html.loot-embed #bagPanel,
html.loot-embed #caseFloat,
html.loot-embed #themePop,
html.loot-embed #themeValuePop,
html.loot-embed #helpLayer,
html.loot-embed #ctxMenu,
html.loot-embed .web-demo-badge {
  display: none !important;
}
html.loot-embed,
html.loot-embed body,
html.loot-embed #app {
  background: #090909 !important;
  background-color: #090909 !important;
}
html.loot-embed .inv-wrap {
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  max-width: 100% !important;
  gap: 0 !important;
}
html.loot-embed #rightPanel,
html.loot-embed #rightPanel.is-folded {
  display: flex !important;
  width: 360px !important;
  max-width: 360px !important;
  opacity: 1 !important;
  transform: none !important;
}
html.loot-embed #rightPanel.is-folded .panel-fold-body,
html.loot-embed #rightBody {
  display: block !important;
  max-width: none !important;
  opacity: 1 !important;
}
html.loot-embed #rightHint,
html.loot-embed #rightFoldTab,
html.loot-embed .panel-hint {
  display: none !important;
}
html.loot-embed #rightPanel .panel-head {
  padding-bottom: 6px !important;
}
html.loot-embed #rightBoard {
  margin-bottom: 0 !important;
}

/* Homepage portable-cases card: only the empty case window */
html.case-embed .equip,
html.case-embed #equipPanel,
html.case-embed #bagPanel,
html.case-embed #rightPanel,
html.case-embed #themePop,
html.case-embed #themeValuePop,
html.case-embed #helpLayer,
html.case-embed #ctxMenu,
html.case-embed #itemTip,
html.case-embed #toast,
html.case-embed #caseRoulette,
html.case-embed .web-demo-badge,
html.case-embed .inv-wrap {
  display: none !important;
}
html.case-embed,
html.case-embed body,
html.case-embed #app {
  background: #090909 !important;
  background-color: #090909 !important;
}
html.case-embed #app {
  visibility: visible !important;
  pointer-events: none !important;
}
html.case-embed #caseFloat,
html.case-embed #caseFloat:not(.hidden) {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  max-width: none !important;
  pointer-events: none !important;
  animation: none !important;
}
html.case-embed .case-float-close,
html.case-embed .case-hint {
  display: none !important;
}
html.case-embed .case-float-head {
  cursor: default !important;
}

/* Website previews: HUD only on the dedicated HUD card */
html:not(.hud-embed) #needHud,
body:not(.hud-embed) #needHud {
  display: none !important;
}

/* Persistent 3D need HUD */
.need-hud {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 8;
  pointer-events: none;
  perspective: 720px;
  perspective-origin: 108% 86%;
}
.need-hud.hidden { display: none !important; }
.need-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: rotateY(-42deg) rotateX(18deg) translateZ(0);
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
}
.need-hotbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  transform-style: preserve-3d;
}
.need-wep {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), rgba(8, 10, 14, 0.72));
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateZ(18px);
  overflow: hidden;
}
.need-wep em {
  position: absolute;
  left: 6px;
  top: 4px;
  z-index: 2;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #f4f7fb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}
.need-wep-art {
  display: block;
  position: absolute;
  inset: 10px 7px 7px;
  background: center / contain no-repeat;
}
.need-wep.is-empty { opacity: 0.7; }
.need-wep.is-on {
  border-color: rgba(255, 214, 110, 0.98);
  background: linear-gradient(160deg, rgba(255, 224, 140, 0.38), rgba(24, 18, 8, 0.78));
  box-shadow:
    0 0 0 2px rgba(255, 210, 90, 0.42),
    0 0 22px rgba(255, 196, 64, 0.5);
}
.need-wep.is-on em { color: #ffe7a8; }
.need-rail {
  display: flex;
  align-items: center;
  gap: 12px;
  transform-style: preserve-3d;
}
.need-lab {
  min-width: 52px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  transform: translateZ(16px);
}
.need-rail[data-k="hunger"] .need-lab { color: #ffd56a; }
.need-rail[data-k="thirst"] .need-lab { color: #9fd4ff; }
.need-beam {
  position: relative;
  width: 240px;
  height: 20px;
}
.need-track {
  position: absolute;
  inset: 0;
  border-radius: 3px 7px 3px 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.need-fill {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  width: calc((100% - 4px) * var(--p, 1));
  border-radius: 2px 5px 2px 1px;
  transform: translateZ(5px);
  transition: width 0.45s ease;
}
.need-rail[data-k="hunger"] .need-fill {
  background: linear-gradient(90deg, #f3c45a, #c48412 78%, #8a5a08);
  box-shadow: 0 0 10px rgba(232, 160, 32, 0.28);
}
.need-rail[data-k="thirst"] .need-fill {
  background: linear-gradient(90deg, #8ec5ff, #3d7fd4 78%, #1e4e8c);
  box-shadow: 0 0 10px rgba(80, 150, 255, 0.26);
}

/* Homepage HUD card: only food / thirst + weapon 1/2 */
html.hud-embed #app,
html.hud-embed .inv-wrap,
html.hud-embed .web-demo-badge,
html.hud-embed #lootProgress,
html.hud-embed #helpLayer,
html.hud-embed #ctxMenu,
html.hud-embed #themePop {
  display: none !important;
}
html.hud-embed,
html.hud-embed body {
  background:
    radial-gradient(ellipse 55% 45% at 50% 55%, rgba(232, 160, 32, 0.07), transparent 62%),
    #090909 !important;
}
html.hud-embed #needHud,
html.hud-embed #needHud.hidden {
  display: flex !important;
  align-items: center;
  justify-content: center;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  perspective: 760px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}
html.hud-embed .need-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  transform: rotateY(-6deg) rotateX(3deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
html.hud-embed .need-hotbar,
html.hud-embed .need-rail,
html.hud-embed .need-wep,
html.hud-embed .need-lab,
html.hud-embed .need-beam,
html.hud-embed .need-fill,
html.hud-embed .need-track {
  transform: none !important;
  transform-style: flat;
}
html.hud-embed .need-hotbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0;
  margin: 0 0 2px;
}
html.hud-embed .need-wep {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}
html.hud-embed .need-wep-art {
  inset: 8px 6px 6px;
}
html.hud-embed .need-rail {
  display: flex;
  align-items: center;
  gap: 10px;
}
html.hud-embed .need-beam {
  width: 188px;
  height: 15px;
}
html.hud-embed .need-beam::after {
  display: none;
}
html.hud-embed .need-lab {
  min-width: 42px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

html.editor-preview body,
body.editor-preview {
  background: #0a0a0a !important;
}
body.editor-preview .inv-wrap,
html.editor-preview .inv-wrap {
  padding: 10px 8px !important;
  max-width: 1280px !important;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
body.editor-preview #btnClose {
  display: none !important;
}
body.editor-preview .item.item-enter,
body.editor-preview .equip-frame.item-enter-frame,
html.editor-preview .item.item-enter {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
body.editor-preview #rightPanel.is-loot-searching .board::before,
body.editor-preview #rightPanel.is-loot-searching .board.loot-sweeping::after,
body.editor-preview .board::after {
  display: none !important;
  animation: none !important;
}
body.editor-preview .panel,
body.editor-preview .item,
body.editor-preview .board {
  transition: none !important;
}

/* Floating case: visible and framed in iframe showcase */
.web-demo .case-float:not(.hidden) {
  left: 52% !important;
  top: 14% !important;
  right: auto !important;
  max-width: min(90vw, 480px) !important;
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(240, 160, 32, 0.25),
    0 0 40px rgba(240, 160, 32, 0.12) !important;
}

/* Hide bottom hint clutter a bit on bag when very tight — keep controls */
.panel.bag > .hint {
  opacity: 0.75;
}

/* Items sit above cells; never bleed/stack visually on marketing demo */
.board > .item {
  z-index: 2 !important;
  position: relative !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}
.board > .cell {
  z-index: 0 !important;
}
/* Multi-cell items: keep label readable, clip overflow */
.board > .item .label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Case float board: same isolation */
.case-float .board > .item {
  z-index: 3 !important;
}

@media (min-width: 1200px) {
  :root {
    --cell: 52px !important;
    --equip-frame: 76px !important;
  }
}
@media (min-width: 1400px) {
  :root {
    --cell: 54px !important;
    --equip-frame: 78px !important;
  }
}
@media (max-width: 900px) {
  :root {
    --cell: 42px !important;
    --equip-frame: 60px !important;
    --panel-pad: 11px !important;
    --panel-gap: 8px !important;
  }
  .inv-wrap {
    padding: 1.5vh 1vw !important;
  }
}

/* Newest UI: keep ghost buttons, hide leftover fold tabs only */
.bag-side-fold,
.panel-fold-tab { display: none !important; }
.ghost-row { display: flex !important; }

html.loot-embed #wearPop,
html.loot-embed #craftPop,
html.loot-embed #clothShop,
html.loot-embed #customizeStage,
html.case-embed #wearPop,
html.case-embed #craftPop,
html.case-embed #clothShop,
html.case-embed #customizeStage,
html.hud-embed #wearPop,
html.hud-embed #craftPop,
html.hud-embed #clothShop,
html.hud-embed #customizeStage {
  display: none !important;
}