/* The adventure owns the viewport. Do not inherit the library's main padding. */
body.circuit-wilds-page {
  --cw-header-height: 54px;
  margin: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #102c35;
}
.circuit-wilds-page .play-header {
  flex: 0 0 var(--cw-header-height);
  height: var(--cw-header-height);
  min-height: 0;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  gap: 10px;
  background: #0b222b;
  border-bottom: 1px solid #9de7dc22;
}
.circuit-wilds-page .play-title strong { color: #fff5dd; font-size: 15px; letter-spacing: .025em; }
.circuit-wilds-page .play-title small { display: none; }
.circuit-wilds-page .back-button,
.circuit-wilds-page .icon-button {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  color: #e1fff7;
  border-color: #a4e0d326;
}
.circuit-wilds-page .back-button:focus-visible,
.circuit-wilds-page .icon-button:focus-visible,
.circuit-wilds-page .play-status button:focus-visible { outline: 3px solid #ffd26b; outline-offset: 2px; }
.circuit-wilds-page main.game-stage {
  flex: 1 1 0;
  height: auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #133b44;
}
.circuit-wilds-page .game-stage iframe { width: 100%; height: 100%; transform: none; background: #133b44; }
.circuit-wilds-page .game-stage:fullscreen { width: 100vw; height: 100dvh; }
.circuit-wilds-page .play-status {
  top: calc(var(--cw-header-height) + 18px);
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 13px 20px;
  border-radius: 16px;
  background: #102b36f5;
  border: 1px solid #92d9c942;
  color: #fff5dd;
  font-size: 14px;
  box-shadow: 0 8px 32px #0004;
  text-align: center;
}
.circuit-wilds-page .play-status[hidden] { display: none; }
.circuit-wilds-page .play-status button {
  display: block;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  background: #ffd26b;
  color: #24302d;
  cursor: pointer;
}
@media (max-width: 600px), (max-height: 500px) {
  body.circuit-wilds-page { --cw-header-height: 48px; }
  .circuit-wilds-page .play-header { gap: 6px; }
  .circuit-wilds-page .play-title strong { font-size: 13px; }
  .circuit-wilds-page #newTabButton { display: none; }
}
@media (prefers-reduced-motion: reduce) { .circuit-wilds-page .play-status { transition: none; } }