:root {
  color-scheme: dark;
  background: #020b08;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020b08 url("../assets/pleasure-theme/forest-vines-portrait-v1.png") center / cover fixed;
}

body {
  display: grid;
  place-items: center;
}

/* The prototype deliberately presents one phone-shaped portrait stage. */
#context,
#logo {
  width: min(100vw, 56.25vh) !important;
  height: min(100vh, 177.7778vw) !important;
  max-width: 100vw;
  max-height: 100vh;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

#context {
  position: fixed !important;
  /* Both axes are queryable so overlays can follow the visible portrait shell
     instead of the recovered runtime's larger hidden coordinate system. */
  container-type: size;
  isolation: isolate;
  overflow: hidden;
  background: #061b13 url("../assets/pleasure-theme/forest-vines-portrait-v1.png") center / cover no-repeat;
}

/* Splash and landing share the exact same closed portrait frame. Keeping the
   frame on the splash container prevents the loader from showing partial vines. */
#logo {
  z-index: 1000;
  overflow: hidden;
  background:
    url("../assets/pleasure-theme/forest-vines-closed-frame-hq.png?v=2") center / 100% 100% no-repeat,
    #061b13 url("../assets/pleasure-theme/forest-vines-portrait-v1.png") center / cover no-repeat;
}

/* The company splash covers the runtime's internal loader and hands off
   directly to landing; after that handoff it stays hidden for all game scenes. */
body.pleasure-splash-active #logo {
  display: block !important;
}

body:not(.pleasure-splash-active) #logo {
  display: none !important;
}

/* Replace the inherited template mark with the transparent studio wordmark. */
#logo .logo.logo-icon {
  inset: 20% 14% 34%;
  width: auto;
  height: auto;
  background-image: url("../assets/pleasure-theme/arkforge-games-logo.png");
  background-size: contain;
  animation: none;
  opacity: 1;
}

#logo .pre-loading-tips-mod {
  --splash-progress: 0%;
  bottom: 15%;
  left: 50%;
  width: min(78%, 492px);
  height: auto;
  aspect-ratio: 492 / 64;
  border: 0;
  border-radius: 0;
  animation: none;
  transform: translateX(-50%);
  background: url("../assets/pleasure-theme/splash-load-container.webp") center / 100% 100% no-repeat;
}

/* The original LoadMeter artwork remains full-width and is progressively
   clipped, preserving its authored texture instead of stretching each update. */
#logo .splash-progress-meter {
  position: absolute;
  left: 1.4%;
  /* The atlas container's painted track occupies y=5..27 of its 64px frame. */
  top: 7.8%;
  width: 97.2%;
  height: 34.4%;
  background: url("../assets/pleasure-theme/splash-load-meter.webp") center / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--splash-progress)) 0 0);
}

#logo .splash-progress-label {
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 clamp(11px, 2.2vw, 18px) / 1 sans-serif;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
}

/* Pixi paints an opaque canvas, so the shared frame must render above it to
   remain visible. Gameplay clips the controller zone from this non-interactive
   overlay, keeping the top/side vines visible without covering controls. */
#context::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  clip-path: inset(0 0 13% 0);
  background: url("../assets/pleasure-theme/forest-vines-closed-frame-hq.png?v=3") center / 100% 100% no-repeat;
}

/* The shared frame normally sits over Pixi, but an open menu must occupy the
   lower shell without side-vine fragments drawing over its black surface. */
body.pleasure-menu-open #context::after {
  clip-path: inset(0 0 36% 0);
}

/* Three independent copies of the same plaque share ninety percent of the
   portrait shell. Their authored 1000:409 ratio derives height from the actual
   cell width, so a wide desktop viewport cannot make the portrait HUD fat. */
.pleasure-top-value-hud {
  position: absolute;
  top: 1%;
  left: 50%;
  z-index: 30;
  width: 90%;
  height: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.8%;
  pointer-events: none;
  transform: translateX(-50%);
}

.pleasure-top-value-cell {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1000 / 409;
  box-sizing: border-box;
  padding-block: 6%;
  /* The usable text well begins inside the ornate gold end caps. */
  padding-inline: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.45vw, 7px);
  overflow: hidden;
  color: #f5f5f5;
  font: 600 clamp(8px, 2.4cqw, 18px) / 1 sans-serif;
  white-space: nowrap;
  text-shadow: 0 2px 3px #000, 0 0 4px #000;
  background: url("../assets/pleasure-theme/ui-hud/value-plaque.png?v=1") center / 100% 100% no-repeat;
}

.pleasure-top-value-cell:nth-child(2) {
  color: #fff109;
  font-size: clamp(11px, 3.2cqw, 24px);
}

.pleasure-bet-plaque {
  pointer-events: auto;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

.pleasure-bet-plaque:hover,
.pleasure-bet-plaque:focus-visible {
  outline: none;
  filter: brightness(1.18) drop-shadow(0 0 8px #f8d65b);
  transform: translateY(2px);
}

.pleasure-bet-plaque:active {
  filter: brightness(1.3) drop-shadow(0 0 10px #fff09a);
  transform: translateY(4px) scale(0.98);
}

/* The recovered bet picker is rendered by Pixi. Hide only the independent HUD
   while it is open; the non-interactive complete vine frame remains visible. */
body.pleasure-bet-modal-open .pleasure-top-value-hud {
  visibility: hidden;
}

.pleasure-top-value-cell span {
  min-width: 0;
  flex: none;
}

.pleasure-top-value-cell img {
  width: 11%;
  max-height: 48%;
  height: auto;
  object-fit: contain;
  flex: none;
}

/* The recovered menu used large rem units intended for a different stage,
   producing a half-screen black duplicate over the reels. Keep the transition
   backdrop full-stage, but constrain the actual controls to a compact bottom
   sheet whose measurements follow the portrait shell at every viewport. */
.menu-mod.pleasure-menu-sheet {
  position: fixed !important;
  left: var(--pleasure-overlay-left, 0px) !important;
  right: auto !important;
  bottom: var(--pleasure-overlay-bottom-gap, 0px) !important;
  /* This node is portaled under body, outside every recovered stage transform
     and clip. Viewport units therefore represent the actual visible screen. */
  width: var(--pleasure-overlay-width, 100vw) !important;
  height: calc(var(--pleasure-overlay-height, 100vh) * 0.36) !important;
  min-height: 0 !important;
  max-height: none;
  box-sizing: border-box;
  container-type: size;
  padding: 0 !important;
  overflow: hidden;
  transform: none !important;
  z-index: 2147483000;
  border-top: max(1px, 0.35cqw) solid #f0c52e;
  border-bottom: 0;
  /* Opaque paint prevents the controller orbs and cabinet from reading as an
     uncovered gap underneath the full-height menu surface. */
  background: linear-gradient(180deg, #01110d, #000504);
}

/* Paytable is a sibling portal of the menu, so it is never clipped or scaled
   by the recovered Pixi scene. All three recovered layers use the same live
   portrait-shell bounds: edge-to-edge on phones and portrait-aligned on
   desktop. The original five-rem header/page relationship is preserved. */
.pleasure-rule-bg,
.pleasure-rule-head,
.pleasure-rule-page {
  position: fixed !important;
  left: var(--pleasure-overlay-left, 0px) !important;
  width: var(--pleasure-overlay-width, 100vw) !important;
  max-width: none !important;
  box-sizing: border-box;
  z-index: 2147483100;
}

.pleasure-rule-bg {
  top: var(--pleasure-overlay-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  height: var(--pleasure-overlay-height, 100vh) !important;
}

.pleasure-rule-head {
  top: var(--pleasure-overlay-top, 0px) !important;
}

.pleasure-rule-page {
  top: calc(var(--pleasure-overlay-top, 0px) + 5rem) !important;
  bottom: auto !important;
  height: calc(var(--pleasure-overlay-height, 100vh) - 5rem) !important;
  transform: none !important;
}

.pleasure-rule-head ~ .close-icon {
  position: fixed !important;
  left: calc(
    var(--pleasure-overlay-left, 0px) + var(--pleasure-overlay-width, 100vw) - 3rem
  ) !important;
  right: auto !important;
  top: calc(var(--pleasure-overlay-top, 0px) + 1.4rem) !important;
  z-index: 2147483200;
}

/* The recovered runtime derives rem from the full browser, which makes every
   rule-screen measurement too large when a wide desktop contains our narrow
   portrait shell. Mobile's authored ratio is one rem per 27 shell pixels.
   Reapply that same ratio while the portaled rule screen exists so its header,
   title, symbols, payouts, descriptions, and paylines all retain the identical
   composition at every shell size. !important intentionally beats the
   runtime's inline root font-size until the rule portal closes. */
html:has(.pleasure-rule-head) {
  font-size: calc(var(--pleasure-overlay-width, 100vw) * 0.037037) !important;
}

.menu-mod.pleasure-menu-sheet .list {
  box-sizing: border-box;
  display: flex;
  /* The sheet occupies the lower 36% of the portrait shell. Center its single
     control row within that complete panel on phones and desktop shells rather
     than pinning the controls beneath the top divider. */
  align-items: center;
  gap: 1.5cqw;
  width: 100%;
  height: 100%;
  padding: 0 4cqw !important;
}

.menu-mod.pleasure-menu-sheet .list .cell,
.menu-mod.pleasure-menu-sheet .list .cell:first-child,
.menu-mod.pleasure-menu-sheet .list .cell.fun-play {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: auto;
  margin: 0 !important;
}

.menu-mod.pleasure-menu-sheet .list .cell.hidden {
  display: none;
}

.menu-mod.pleasure-menu-sheet .list .item {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  padding: 0;
}

.menu-mod.pleasure-menu-sheet .list .item .icon {
  width: clamp(28px, 9cqw, 54px);
  height: clamp(28px, 9cqw, 54px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.menu-mod.pleasure-menu-sheet .list .item .title {
  max-width: 100%;
  margin-top: 1cqw;
  overflow: hidden;
  color: #fff;
  font-size: clamp(10px, 3.2cqw, 18px);
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 3px #000;
}

/* Keep the landing selector explicit so future scene-specific styling cannot
   silently restore the old separated vine layers. */
body.pleasure-landing #context::after {
  background-image: url("../assets/pleasure-theme/forest-vines-closed-frame-hq.png?v=3");
  clip-path: none;
}

#context .blur-bg,
#context .blur-bg.jpg,
#context .blur-bg.webp,
#context .blur-bg.avif {
  background-image: url("../assets/pleasure-theme/forest-vines-portrait-v1.png") !important;
  background-position: center !important;
  background-size: cover !important;
}

#root {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* The recovered runtime sizes #App from the full browser viewport. Center that
   unscaled coordinate system inside our narrower portrait stage. */
#App {
  left: 50% !important;
  transform: translateX(-50%);
}

/* Keep the runtime's oversized square canvas; its portrait layout is designed
   to be cropped by the phone-shaped stage. */
#root canvas {
  max-width: none !important;
  max-height: none !important;
}

/* On a landscape desktop the recovered runtime keeps its native 540x960
   portrait safe area. Scale the entire scene uniformly to the height-limited
   562.5x1000 shell; center-origin scaling maps x=315..855 to the shell edges
   without changing the aspect ratio of any child. */
@media (orientation: landscape) {
  #context {
    overflow: hidden;
    background: transparent;
  }

  #root {
    overflow: hidden;
    clip-path: none;
  }

  #context > #blur-bg {
    display: none;
  }

  .client-final-collector-row {
    top: 0 !important;
    height: 4% !important;
  }

  #App {
    top: 0 !important;
    transform-origin: 50% 0;
    transform: translateX(-50%) scale(calc(100vh / 1170px)) !important;
  }
}

/* Near-square browser windows need the complete native gameplay stack rather
   than the shorter 540x960 art safe area. Fit its 1800px interactive height
   uniformly so Spin and the bottom HUD cannot fall below the physical screen. */
@media (orientation: landscape) and (max-aspect-ratio: 6 / 5) {
  #App {
    transform: translateX(-50%) scale(calc(100vh / 1800px)) !important;
  }
}

@media (orientation: portrait) {
  /* The shell must own the complete browser viewport. The native runtime
     already fits its 540x960 safe area inside tall phones and centers it;
     clipping the shell to that fitted rectangle discarded the HUD. */
  #context,
  #logo {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none;
    max-height: none;
  }
}

/* Large portrait displays otherwise leave the recovered 1170px square App
   vertically centered with hard seam bands. Fit that whole native stage to the
   physical height with one scalar and anchor it at y=0; the portrait shell
   performs the symmetric horizontal crop while preserving every proportion. */
@media (orientation: portrait) and (min-width: 700px) {
  #root {
    overflow: hidden;
  }

  #App {
    top: 0 !important;
    transform-origin: 50% 0 !important;
    transform: translateX(-50%) scale(calc(100vh / 1170px)) !important;
  }
}