body:has(.key-scene) .play-tools { display: none; }
.key-scene {
  min-height: calc(100svh - 94px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr);
  align-content: center;
  align-items: center;
  gap: 20px 8%;
  padding: clamp(35px, 7vh, 90px) max(28px, calc((100vw - 1150px) / 2));
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 70% 47%, #4c493d77, transparent 52%), #191c23;
  color: #fff0cc;
}
.key-copy, .key-stage, .key-actions { position: relative; z-index: 1; }
.key-eyebrow { margin: 0 0 28px; font: 11px/1.6 Arial, sans-serif; letter-spacing: .19em; color: #c9c1ab; }
.key-recipient { margin: 0 0 14px; color: #e6c98f; font-size: 13px; }
.key-copy h1 { margin: 0 0 22px; font: 800 clamp(36px, 5vw, 68px)/1.2 var(--play-display, sans-serif); letter-spacing: -.04em; }
[data-key-message] { max-width: 360px; margin: 0; font-size: 14px; line-height: 1.9; color: #d1c9b6; }
.key-stage { min-height: 295px; display: grid; place-items: center; }
.key-art { width: 100%; max-width: 570px; height: auto; filter: drop-shadow(0 13px 18px #080a12aa); transform: rotate(-14deg); }
.key-spark { position: absolute; top: 0; right: 14%; color: #ffe8b1; font-size: 36px; }
.key-companion { position: absolute; width: 95px; height: 95px; bottom: -8px; left: 6%; transform: rotate(-7deg); }
.key-actions { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.key-claim { background: #ecd09a; color: #29241d; border-color: #ecd09a; min-height: 52px; }
.key-claim:hover { background: #ffe9b7; color: #29241d; border-color: #ffe9b7; }
.key-claim:disabled { cursor: default; opacity: .4; transform: none; }
.key-back { font-size: 12px; color: #d5c6a5; text-decoration: underline; text-underline-offset: 5px; }
.key-orbit { position: absolute; width: min(750px, 80vw); aspect-ratio: 1; border: 1px solid #c8a86c20; border-radius: 50%; top: 50%; left: 68%; transform: translate(-50%, -50%); }
.key-orbit::before, .key-orbit::after { content: ''; position: absolute; inset: 13%; border: inherit; border-radius: inherit; }
.key-orbit::after { inset: 30%; }
.key-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e0bc73; top: 30%; left: 4%; box-shadow: 0 0 14px #efce91; }
.key-orbit i:nth-child(2) { left: auto; right: 12%; top: 17%; }
.key-orbit i:nth-child(3) { left: 75%; top: 90%; }
.key-scene.is-locked .key-art { filter: grayscale(.9) brightness(.6); }
.key-scene.is-locked .key-companion { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .key-scene:not(.is-locked) .key-art { animation: key-float 4s ease-in-out infinite alternate; }
  .key-spark { animation: key-glimmer 2.2s ease-in-out infinite alternate; }
  @keyframes key-float { to { transform: translateY(-10px) rotate(-10deg); } }
  @keyframes key-glimmer { to { opacity: .35; transform: scale(.75); } }
}
@media (max-width: 740px) {
  .key-scene { min-height: calc(100svh - 75px); grid-template-columns: 1fr; gap: 15px; padding: 35px 26px 55px; }
  .key-eyebrow { margin-bottom: 15px; font-size: 9px; }
  .key-copy h1 { font-size: 42px; margin-bottom: 15px; }
  .key-stage { min-height: 210px; }
  .key-art { max-width: 390px; }
  .key-companion { width: 74px; height: 74px; bottom: 0; }
  .key-actions { gap: 15px; }
  .key-claim { font-size: 12px; gap: 18px; padding-inline: 15px; }
}