/* Story Treehouse — the episode player.
 *
 * Its own file rather than games.css: this is not a game, and a game should not load it.
 * Same reasoning that split forest.css out.
 */

.story-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bottom padding keeps the player clear of the "back" control. */
  padding: 1rem 1rem calc(var(--tap-min) + 2rem);
  background: #000;                /* letterbox in black, like a screen, not a page */
}

/* Shrinks to the video, so the play button can be centred on the picture rather than on
   the black around it. */
.story-player {
  position: relative;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

/* Fits the space in both directions, so the episode never needs scrolling and never
   crops. The video's own 848:478 drives the box. */
.story-video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 0 48px rgba(255, 217, 138, 0.22);
  background: #000;
}

/* --- The big play button -------------------------------------------------
 * The browser's own play control is a ~20px triangle in a corner. That is fine for an
 * adult and hopeless for a three-year-old, so this sits in the middle of the picture at
 * roughly ten times the area.
 *
 * It wears the same warm gold as "Enter the Forest" and the open hotspot in the hub —
 * one colour means "you can go here" across the whole site.
 *
 * It does NOT replace the native controls; those stay on for scrubbing, volume and
 * fullscreen, and they are already accessible. This is an additional, larger way in.
 */

.story-play {
  position: absolute;
  left: 50%;
  top: 50%;
  /* The translate lives in the keyframes too — a transform here would be overwritten by
     the animation and the button would jump to the corner. */
  transform: translate(-50%, -50%);
  width: clamp(96px, 20vmin, 168px);
  height: clamp(96px, 20vmin, 168px);
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  background: var(--warm-gold);
  color: var(--wood-dark);
  animation: play-breathe 2.8s ease-in-out infinite;
}

/* Without this the `display: grid` above would defeat the `hidden` attribute, and the
   button would show even when JavaScript never revealed it. */
.story-play[hidden] { display: none; }

.story-play svg {
  width: 40%;
  height: 40%;
  fill: currentColor;
  margin-left: 8%;                 /* optical centring — a triangle's mass sits left */
}

@keyframes play-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 26px rgba(255, 217, 138, 0.5); }
  50%      { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 54px rgba(255, 217, 138, 0.9); }
}