/* The production player always runs inside one phone-portrait coordinate space. */
:root {
  --okey-stage-width: min(100vw, 480px);
  --okey-stage-height: min(100dvh, 1000px);
  --okey-stage-scale: 1;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: clip;
  background:
    radial-gradient(circle at 50% 40%, rgba(82, 48, 25, 0.28), transparent 44%),
    #090705;
}

.okey-portrait-stage {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: var(--okey-stage-width);
  height: var(--okey-stage-height);
  /* `hidden` creates a programmatically scrollable box. Tutorial focus and
     scrollIntoView could then shift every direct stage child out of alignment. */
  overflow: clip;
  container-name: okey-stage;
  container-type: size;
  isolation: isolate;
  background: #03130e;
  box-shadow:
    0 0 0 2px rgba(214, 155, 53, 0.18),
    0 0 44px rgba(0, 0, 0, 0.78);
  transform: translate(-50%, -50%) scale(var(--okey-stage-scale));
  transform-origin: center;
}

.okey-portrait-stage .okey-app-root,
.okey-portrait-stage .game-container,
.okey-portrait-stage .title-screen,
.okey-portrait-stage .loading-screen,
.okey-portrait-stage .home-screen-content,
.okey-portrait-stage .mode-selection-content,
.okey-portrait-stage .battle-map-content {
  width: 100%;
  max-width: 100%;
  height: 100cqh;
  min-height: 100cqh;
  overflow-x: hidden;
}

.okey-portrait-stage .modal-overlay,
.okey-portrait-stage .okey-game-modal-overlay,
.okey-portrait-stage .age1-onboarding-root,
.okey-portrait-stage #fx-canvas,
.okey-portrait-stage .fx-sparkle-field,
.okey-portrait-stage .dragging {
  max-width: 100cqw;
  max-height: 100cqh;
}

@media (prefers-reduced-motion: reduce) {
  .okey-portrait-stage {
    box-shadow: 0 0 0 2px rgba(214, 155, 53, 0.18);
  }
}