/* Shared chrome for every full-screen game. Keep the play field below this
   frame so the navigation never competes with keyboard or touch input. */
.play-frame-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
  margin-bottom: .55rem;
}

.play-frame-nav a,
.play-frame-exits a {
  color: inherit;
}

.play-frame-wordmark {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.play-frame-wordmark:hover,
.play-frame-wordmark:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.play-frame-back {
  border-left: 1px solid currentColor;
  font-size: .8rem;
  opacity: .78;
  padding-left: .8rem;
  text-underline-offset: .2em;
}

.play-frame-header > .play-frame-heading,
.play-frame-header > div:first-child {
  min-width: 0;
}

.play-frame-header {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  justify-content: space-between;
}

.play-frame-header h1 { margin: 0; }

.play-frame-header .scoreboard {
  flex-shrink: 0;
}

.play-frame-exits {
  border-top: 1px solid currentColor;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  justify-content: center;
  margin-top: 1.25rem;
  padding-top: .9rem;
}

.play-frame-exits a {
  font-size: .85rem;
  text-underline-offset: .2em;
}

.play-frame-exits .play-frame-catalog {
  font-weight: 600;
}

.play-frame-exits a:focus-visible,
.play-frame-back:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.play-frame .status-card {
  z-index: 2;
}

.play-frame .status-card .play-frame-exits {
  text-align: left;
}

/* Emberline uses the portal shell's full-height stage, but shares this exact
   header and completion-card contract with the catalog games. */
.frame.play-frame .scoreboard {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  text-align: right;
}

.frame.play-frame .scoreboard p {
  font-size: .85rem;
  font-weight: 600;
  margin: 0;
}

.frame.play-frame .stage-frame { position: relative; width: 100%; }

.frame.play-frame .status-card {
  background: rgba(9, 17, 25, .94);
  border: 2px solid var(--cn-color-amber);
  color: var(--cn-color-canvas);
  left: 50%;
  max-width: 31rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
}

.frame.play-frame .status-card h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  margin: 0 0 .75rem;
}

.frame.play-frame .status-card p:not(.eyebrow) {
  color: var(--cn-color-canvas);
  line-height: 1.5;
  margin: 0 auto 1.5rem;
  max-width: 34ch;
}

.frame.play-frame .status-card .play-frame-exits { color: var(--cn-color-canvas); }

@media (max-width: 38rem) {
  .play-frame-nav { gap: .4rem .65rem; }
  .play-frame-back { padding-left: .65rem; }
  .play-frame-exits { gap: .55rem .75rem; }
  .play-frame .status-card { top: .5rem; transform: translateX(-50%); }
  .frame.play-frame .play-frame-header { align-items: flex-start; flex-direction: column; }
  .frame.play-frame .scoreboard { text-align: left; width: 100%; }
  .frame.play-frame .status-card { top: .5rem; transform: translateX(-50%); }
}