/* App destinations fill the display. Transient purchase/help/reward dialogs
   retain their own presentation; the casino floor never shows through a page. */
.sheet.destination-screen {
  align-items: stretch;
  background: var(--bg-deep);
  transition: none;
}

.sheet.destination-screen > .sheet-panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: calc(var(--safe-top) + 82px) max(20px, env(safe-area-inset-right, 0px)) calc(var(--safe-bottom) + 8px) max(20px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--bg-deep);
  box-shadow: none;
  transform: none;
  transition: none;
  visibility: inherit;
  isolation: isolate;
}

.destination-screen .sheet-title {
  top: calc(var(--safe-top) + 20px);
  left: max(20px, env(safe-area-inset-left, 0px));
  right: max(76px, calc(env(safe-area-inset-right, 0px) + 60px));
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  transform: none;
  clip-path: none;
  background-color: transparent;
  background-image: var(--gold-bevel);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: var(--display);
  font-size: 1.8rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: left;
  filter: drop-shadow(0 2px 0 var(--gold-deep));
  z-index: 2;
}

.destination-screen .screen-close {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 11px;
  border: 2px solid var(--gold-light);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--violet), var(--sheet-base));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 var(--bg-deep);
  transform: none;
  transition: transform 100ms ease;
}

.destination-screen .screen-close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.destination-screen .screen-close:active { transform: translateY(2px); }
.destination-screen button:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 3px;
}

/* A quiet return remains in thumb reach; the upper-right X is always
   available, even while a page's contents scroll. */
.destination-screen > .sheet-panel > .sheet-close {
  flex: none;
  width: min(100%, 240px);
  min-height: 44px;
  margin-top: 6px;
  padding: 8px 16px;
  border: 0;
  background: none;
  color: var(--muted);
  box-shadow: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.destination-screen .inbox-head { position: static; }

/* Preserve dimensions for cabinet fitting and balance updates, while
   removing the originating screen from painting and keyboard navigation. */
body.destination-active #lobby,
body.destination-active #app { visibility: hidden; }

/* Preserve the floor's layout without spending frames on its unseen loops.
   Removing the destination class resumes each animation at its held frame. */
body.destination-active > :is(#lobby, #app) *,
body.destination-active > :is(#lobby, #app) *::before,
body.destination-active > :is(#lobby, #app) *::after {
  /* Individual dock keys have more specific animation shorthands. */
  animation-play-state: paused !important;
}

@media (min-width: 760px) {
  .sheet.destination-screen > .sheet-panel {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
  .destination-screen .sheet-title { left: max(32px, env(safe-area-inset-left, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .destination-screen .screen-close { transition: none; }
}