/* Rayna's Valley keeps the stage large and the controls outside the play ground. */
.play-stage {
  --stage-ink: #4a3b34;
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--stage-ink);
  background: linear-gradient(180deg, #dff4ff 0%, #f6f1c9 58%, #d8eeb4 100%);
}

.play-stage-surface {
  position: absolute;
  left: 80px;
  right: 80px;
  top: 8px;
  bottom: 8px;
  overflow: hidden;
  isolation: isolate;
  border: 4px solid rgba(255,255,255,.78);
  border-radius: 28px;
  background: linear-gradient(180deg, #bfe3ff 0 43%, #f4dfa4 43% 58%, #acd88e 58%);
  box-shadow: inset 0 0 0 2px rgba(92,67,47,.11), 0 7px 20px rgba(67,55,40,.15);
  touch-action: none;
  user-select: none;
}

.play-stage-backdrop,
.play-stage-booth,
.play-stage-hidden,
.play-stage-pieces,
.play-stage-foreground,
.play-stage-context {
  position: absolute;
  pointer-events: none;
}

.play-stage-backdrop,
.play-stage-pieces,
.play-stage-foreground,
.play-stage-context { inset: 0; }

.play-stage-fill {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.play-stage-booth .play-stage-fill { object-fit: contain; }
.play-stage-curtains .play-stage-fill { position: absolute; inset: 0; }
.play-stage-booth.is-fallback svg,
.play-stage-fill.is-fallback svg { display: block; width: 100%; height: 100%; }

.play-stage-hidden {
  overflow: hidden;
  border-radius: 12px;
  pointer-events: auto;
}

.play-stage-actor,
.play-stage-prop {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  touch-action: none;
  pointer-events: auto;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 3px rgba(78,54,40,.18));
}

.play-stage-actor { overflow: hidden; }

.play-stage-actor img {
  position: absolute;
  display: block;
  object-fit: fill;
  transform: scaleX(var(--face, 1));
  transform-origin: center bottom;
  pointer-events: none;
}

.play-stage-actor.is-selected::after {
  content: "";
  position: absolute;
  inset: 4% 9% 1%;
  border: 4px solid rgba(255,233,138,.96);
  border-radius: 48% 52% 42% 45%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.72);
  pointer-events: none;
}

.play-stage-actor.is-hopping {
  animation: play-stage-hop .52s cubic-bezier(.25,.75,.35,1);
}

.play-stage-prop {
  min-width: 56px;
  min-height: 56px;
  border-radius: 18px;
  transition: filter .15s ease;
}

.play-stage-prop img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.play-stage-prop-picture { padding: var(--prop-padding, 5px); border: var(--prop-border, 5px) solid #fffdf8; background: #fffdf8; box-shadow: 0 0 0 var(--prop-ring, 3px) #8c6449, 0 5px 9px rgba(65,45,34,.18); }
.play-stage-prop.is-framed { border-color: #ffe98a; box-shadow: 0 0 0 var(--prop-ring, 7px) #a86643, 0 6px 12px rgba(65,45,34,.2); }
.play-stage-prop.is-held { filter: drop-shadow(0 3px 2px rgba(78,54,40,.22)); }
.play-stage-prop.is-selected { outline: 4px solid #ffe98a; outline-offset: 3px; }
.play-stage-pouch-layer { position: absolute; pointer-events: none; }
.play-stage-pouch-layer .play-stage-fill { object-fit: contain; }
.play-stage-prop.is-pouch-item { padding: 0; border: 0; background: transparent; box-shadow: none; filter: none; }
.play-stage-prop.is-pouch-item img { position: absolute; left: 50%; top: 50%; width: var(--pouch-item-width); height: var(--pouch-item-height); transform: translate(-50%, -50%); }

.play-stage-context { pointer-events: none; }
.play-stage-expression { position: absolute; pointer-events: auto; }
.play-stage-button.play-stage-context-action {
  position: absolute;
  width: 76px;
  height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px;
  background: #fff2b6;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.05;
  pointer-events: auto;
}
.play-stage-button.play-stage-context-action svg { width: 40px; height: 40px; flex: none; }
.play-stage-context-action span { display: block; white-space: nowrap; }
.play-stage-button.play-stage-hide { background: #ffd3e1; }

.play-stage-controls { position: absolute; inset: 0; pointer-events: none; z-index: 120; }
.play-stage-button,
.play-stage-cast-chip,
.play-stage-picker-choice {
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid rgba(74,59,52,.26);
  color: var(--stage-ink);
  background: rgba(255,253,248,.97);
  box-shadow: 0 4px 0 rgba(74,59,52,.17);
}

.play-stage-button {
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 20px;
  pointer-events: auto;
}
.play-stage-button svg { width: 100%; height: 100%; display: block; }
.play-stage-button:disabled { opacity: .38; box-shadow: none; }
.play-stage-button.is-down,
.play-stage-cast-chip.is-down,
.play-stage-picker-choice.is-down { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 rgba(74,59,52,.15); }
.play-stage-home { position: absolute; left: 8px; top: 8px; background: #b8f0d2; }
.play-stage-undo { position: absolute; left: 8px; top: 80px; background: #d9c7ff; }
.play-stage-mute { position: absolute; left: 8px; top: 152px; }
.play-stage-talk { position: absolute; left: 8px; bottom: 8px; background: #fff2b6; }
.play-stage-help { position: absolute; right: 8px; bottom: 8px; width: 48px; height: 48px; padding: 5px; background: #fff2b6; border-radius: 16px; }
.play-stage-keep { position: absolute; right: 8px; top: 8px; background: #b8f0d2; }
.play-stage-basket { position: absolute; right: 8px; top: 80px; background: #ffd3ab; }
.play-stage-people { position: absolute; right: 8px; top: 152px; background: #bfe3ff; }

.play-stage-cast-dock { position: absolute; inset: 0; z-index: 121; pointer-events: none; }
.play-stage-cast-chip {
  position: absolute;
  width: 64px;
  height: 64px;
  padding: 3px;
  border-radius: 22px;
  overflow: hidden;
  pointer-events: auto;
}
.play-stage-cast-chip img { width: 100%; height: 100%; object-fit: contain; display: block; }
.play-stage-cast-chip.is-selected { border-color: #f2a565; box-shadow: 0 0 0 3px #ffe98a, 0 4px 0 rgba(74,59,52,.17); }
.play-stage-cast-chip.is-peeking { background: #fff2b6; }
.play-stage-cast-chip.is-peeking img { height: 40px; }
.play-stage-cast-chip.is-peeking span { display: block; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }
.play-stage-cast-chip:nth-child(1) { left: 8px; top: 224px; }
.play-stage-cast-chip:nth-child(2) { right: 8px; top: 224px; }
.play-stage-cast-chip:nth-child(3) { right: 8px; top: 296px; }

.play-stage-together-dock { position: absolute; inset: 0; z-index: 110; pointer-events: none; }
.play-stage-together-mode {
  position: absolute; left: 8px; top: 8px; width: 72px; height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 5px; background: #e2d5ff; font-size: 11px; font-weight: 800; line-height: 1;
}
.play-stage-together-mode svg { width: 38px; height: 38px; flex: none; }
.play-stage-turn-token {
  position: absolute; top: 8px; width: 76px; height: 86px; padding: 2px 4px 4px;
  appearance: none; border: 3px solid rgba(74,59,52,.28); border-radius: 20px;
  background: rgba(255,253,248,.97); color: var(--stage-ink);
  box-shadow: 0 4px 0 rgba(74,59,52,.17); pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1.05;
}
.play-stage-turn-token img { width: 54px; height: 55px; object-fit: contain; display: block; pointer-events: none; }
.play-stage-turn-token.is-active { background: #fff0a8; border-color: #ef9c59; box-shadow: 0 0 0 3px #ffe98a, 0 4px 0 rgba(74,59,52,.17); }
.play-stage-turn-token:disabled { opacity: .5; }
.play-stage-turn-rayna { left: 92px; }
.play-stage-turn-partner { left: 176px; }

.play-stage-guide {
  position: absolute; z-index: 115; display: flex; align-items: center; gap: 7px;
  box-sizing: border-box; padding: 7px 8px; border: 3px solid rgba(107,76,54,.4);
  border-radius: 18px; background: rgba(255,250,218,.97);
  box-shadow: 0 5px 10px rgba(69,47,34,.2); pointer-events: none;
}
.play-stage-guide-hand { width: 42px; height: 42px; flex: none; animation: play-stage-guide-move 1.2s ease-in-out 2; }
.play-stage-guide-hand svg { width: 100%; height: 100%; display: block; }
.play-stage-guide-words { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.2; }
.play-stage-button.play-stage-guide-close { width: 44px; height: 44px; flex: none; border-radius: 13px; padding: 6px; pointer-events: auto; }
.play-stage.is-opening .play-stage-curtains .play-stage-fill:first-child { animation: play-stage-curtain-left .58s ease-out both; }
.play-stage.is-opening .play-stage-curtains .play-stage-fill:nth-child(2) { animation: play-stage-curtain-right .58s ease-out both; }
@keyframes play-stage-curtain-left { from { transform: translateX(7%); } to { transform: translateX(0); } }
@keyframes play-stage-curtain-right { from { transform: translateX(-7%); } to { transform: translateX(0); } }
@keyframes play-stage-guide-move { 0%,100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

.play-stage-overlay-host { position: absolute; inset: 0; z-index: 200; pointer-events: none; }
.play-stage-overlay {
  position: absolute;
  inset: 8px 80px;
  display: grid;
  grid-template-columns: 70px 1fr;
  grid-template-rows: 1fr 64px;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 30px;
  background: rgba(255,247,221,.98);
  box-shadow: 0 12px 40px rgba(70,48,38,.25);
  pointer-events: auto;
}
.play-stage-overlay-back { grid-row: 1 / 3; align-self: center; background: #bfe3ff; }
.play-stage-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(84px, 1fr)); gap: 12px; place-items: center; }
.play-stage-picker-choice { position: relative; width: min(112px, 100%); aspect-ratio: 1; border-radius: 24px; padding: 8px; overflow: hidden; }
.play-stage-picker-choice img { width: 100%; height: 100%; display: block; object-fit: contain; }
.play-stage-picker-stored { position: absolute; left: 5px; right: 5px; bottom: 4px; padding: 2px 3px; border-radius: 9px; background: #fff2b6; font-size: 11px; font-weight: 800; line-height: 1.1; }
.play-stage-picker-stored.is-on-stage { background: #b8f0d2; }
.play-stage-picker-retry { display: grid; place-items: center; width: 100%; height: 100%; padding: 6px; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.1; }
.play-stage-picker-nav { grid-column: 2; display: flex; justify-content: center; gap: 12px; }
.play-stage-picker-nav:empty { display: none; }
.play-stage-picker-nav .play-stage-button { width: 58px; height: 58px; }

.play-stage-kept { grid-template-columns: minmax(0,1fr) 76px; grid-template-rows: minmax(0,1fr) 76px; }
.play-stage-kept > img { grid-row: 1 / 3; width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; justify-self: center; object-fit: contain; border: 8px solid #fffdf8; border-radius: 24px; box-shadow: 0 0 0 5px #a86643; }
.play-stage-kept .play-stage-button { justify-self: center; }
.play-stage-keep-playing { background: #b8f0d2; }

.play-stage-error {
  grid-template-columns: 1fr 70px 70px;
  grid-template-rows: 1fr;
  justify-items: center;
  text-align: center;
}
.play-stage-error p { font-size: clamp(20px, 3vw, 30px); font-weight: 700; line-height: 1.3; }
.play-stage-error .play-stage-button:last-child { background: #b8f0d2; }

@keyframes play-stage-hop {
  0%,100% { transform: translateY(0); }
  45% { transform: translateY(-22px); }
}

@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  .play-stage-surface { left: 8px; right: 8px; top: 84px; bottom: 84px; }
  .play-stage-home { left: 8px; top: 8px; }
  .play-stage-undo { left: 80px; top: 8px; }
  .play-stage-keep { left: 152px; right: auto; top: 8px; }
  .play-stage-mute { left: 224px; top: 8px; }
  .play-stage-talk { left: 296px; top: 8px; bottom: auto; }
  .play-stage-help { right: 4px; top: 16px; bottom: auto; width: 44px; height: 44px; }
  .play-stage-basket { left: 8px; right: auto; top: auto; bottom: 8px; }
  .play-stage-people { left: 80px; right: auto; top: auto; bottom: 8px; }
  .play-stage-cast-chip:nth-child(1) { left: 152px; right: auto; top: auto; bottom: 8px; }
  .play-stage-cast-chip:nth-child(2) { left: 224px; right: auto; top: auto; bottom: 8px; }
  .play-stage-cast-chip:nth-child(3) { left: 296px; right: auto; top: auto; bottom: 8px; }
  .play-stage-turn-token { top: 88px; }
  .play-stage-turn-rayna { left: 8px; }
  .play-stage-turn-partner { left: auto; right: 8px; }
  .play-stage-overlay { inset: 84px 8px; grid-template-columns: 1fr; grid-template-rows: 68px 1fr 64px; }
  .play-stage-overlay-back { grid-row: 1; justify-self: start; }
  .play-stage-picker-grid { grid-column: 1; grid-template-columns: repeat(2, minmax(112px, 148px)); align-self: center; justify-content: center; }
  .play-stage-picker-choice { width: min(140px, 100%); }
  .play-stage-picker-nav { grid-column: 1; }
  .play-stage-kept { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: minmax(0,1fr) 76px; justify-content: center; }
  .play-stage-kept > img { grid-column: 1 / 3; grid-row: 1; }
  .play-stage-error { grid-template-columns: repeat(2, 76px); grid-template-rows: 1fr 76px; }
  .play-stage-error p { grid-column: 1 / 3; }
}

@media (max-width: 389px) and (max-aspect-ratio: 1/1) {
  .play-stage-help { top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .play-stage *, .play-stage *::before, .play-stage *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.reduced-motion .play-stage *,
.reduced-motion .play-stage *::before,
.reduced-motion .play-stage *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }