:root {
  --szv-home-yellow: #fef019;
}

html,
body,
#app,
.app,
.site-shell,
.views,
.view,
.entry,
.gate-scroll,
.gate-canvas {
  background-color: var(--szv-home-yellow) !important;
}

/* Page canvases: keep cards, media, controls, and stickers in their own colors. */
.vrownnnn-view,
.vrownnnn-view .vrown-supari,
.vrownnnn-view .vrown-analogue-stage,
.vrownnnn-view .va-main,
.vrownnnn-view .va-main > section,
.zungk-view,
.zungk-view .wf-clone,
.zungk-view .wf-board-shell,
.zungk-view .wf-board,
.zungk-view .zungk-impact,
.zungk-view .zi-scroll,
.zungk-view .zi-report,
.zungk-view .zi-section,
.zungk-view .zungk-readymag,
.zungk-view .zrm-scroll-canvas,
.zungk-view .zrm-rm-page,
.zungk-view .zrm-rm-stage,
.zungk-view .zungk-world,
.zungk-view .zw-scene,
.zungk-view .analogue-studio,
.zungk-view .as-main,
.zungk-view .as-main > section,
.zungk-view .zungk-page,
.zungk-view .zungk-page > section,
.itsy-bitzy-view,
.itsy-bitzy-view .itsy-bitzy-gallery,
.itsy-bitzy-view .itsy-bitzy-shorts,
.letter-view,
.letter-view .letter-unsent-shell,
.letter-view .letter-panel,
.letter-view .letter-id-panel,
.game-view,
.game-view .trends-page,
.game-view .trends-main,
.game-view .trends-posts,
.game-view .trends-membership {
  background-color: var(--szv-home-yellow) !important;
  background-image: none !important;
}

/* Prevent a previous view color from showing around the active page. */
body[data-view="vrown"],
body[data-view="zungk"],
body[data-view="itsy-bitzy"],
body[data-view="letter"] {
  background-color: var(--szv-home-yellow) !important;
}

/* ZUNGK keeps its own former black canvas, overriding the shared yellow shell. */
body[data-view="zungk"],
body[data-view="zungk"] .zungk-view,
body[data-view="zungk"] .zungk-view .wf-clone,
body[data-view="zungk"] .zungk-view .wf-board-shell,
body[data-view="zungk"] .zungk-view .wf-board,
body[data-view="zungk"] .zungk-view .zungk-impact,
body[data-view="zungk"] .zungk-view .zi-scroll,
body[data-view="zungk"] .zungk-view .zi-report,
body[data-view="zungk"] .zungk-view .zi-section,
body[data-view="zungk"] .zungk-view .zungk-readymag,
body[data-view="zungk"] .zungk-view .zrm-scroll-canvas,
body[data-view="zungk"] .zungk-view .zrm-rm-page,
body[data-view="zungk"] .zungk-view .zrm-rm-stage,
body[data-view="zungk"] .zungk-view .zungk-world,
body[data-view="zungk"] .zungk-view .zw-scene,
body[data-view="zungk"] .zungk-view .analogue-studio,
body[data-view="zungk"] .zungk-view .as-main,
body[data-view="zungk"] .zungk-view .as-main > section,
body[data-view="zungk"] .zungk-view .zungk-page,
body[data-view="zungk"] .zungk-view .zungk-page > section {
  background-color: #050505 !important;
  background-image: none !important;
}

body[data-view="zungk"] .zungk-view .wf-board-shell,
body[data-view="zungk"] .zungk-view .wf-board {
  background-color: transparent !important;
}

/* ITSY BITZY is a full-bleed film view, so the shared yellow canvas must not show. */
html:has(body[data-view="itsy-bitzy"]),
body[data-view="itsy-bitzy"] {
  background-color: #000 !important;
}

body[data-view="itsy-bitzy"] {
  --happly-banner-height: 0px;
  overflow: hidden;
}

body[data-view="itsy-bitzy"] .happly-top-banner {
  display: none !important;
  height: 0;
}

body[data-view="itsy-bitzy"] .itsy-bitzy-view {
  inset: 0 !important;
  width: 100vw;
  height: auto;
  min-height: 0;
  background-color: #000 !important;
}