/* Kadabra Room v24 — cassette viewing composition
   A loaded or playing cassette promotes the television into the dominant
   viewport composition. This is state-driven only; hover never changes geometry. */

body.cassette-viewing-focus .hero-zone,
body.onboarding-active.cassette-viewing-focus .hero-zone {
  width: min(1710px, calc(100vw - 14px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(292px, 348px) !important;
  grid-template-areas:
    "main tapes"
    "chat chat" !important;
  align-items: start !important;
  gap: clamp(12px, 1.15vw, 20px) !important;
  perspective: none !important;
  transition: grid-template-columns .36s cubic-bezier(.2,.75,.2,1), gap .36s ease !important;
}

body.cassette-viewing-focus .hero-zone .console-column,
body.onboarding-active.cassette-viewing-focus .hero-zone .console-column {
  grid-area: main !important;
  width: 100% !important;
  max-width: 1300px !important;
  justify-self: end !important;
  align-self: start !important;
  transform: none !important;
  filter: none !important;
  transition: max-width .36s ease, filter .24s ease !important;
}

body.cassette-viewing-focus .hero-zone .tv-set,
body.onboarding-active.cassette-viewing-focus .hero-zone .tv-set {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

body.cassette-viewing-focus .hero-zone .vcr-unit,
body.onboarding-active.cassette-viewing-focus .hero-zone .vcr-unit {
  width: min(94%, 1160px) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.cassette-viewing-focus .hero-zone .instruction-plaque,
body.onboarding-active.cassette-viewing-focus .hero-zone .instruction-plaque {
  width: min(91%, 1060px) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.cassette-viewing-focus .hero-zone .tape-library,
body.onboarding-active.cassette-viewing-focus .hero-zone .tape-library {
  grid-area: tapes !important;
  width: 100% !important;
  max-width: 348px !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
  transform: none !important;
  filter: brightness(1.01) saturate(.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(218,174,88,.12),
    0 22px 34px rgba(0,0,0,.48) !important;
  transition: filter .24s ease, box-shadow .24s ease !important;
}

/* Keep Studio Chat available without allowing it to squeeze the TV. It moves
   below the viewing composition once the first tape is playing. During the
   first-visit guide it remains intentionally hidden by onboarding-v19.css. */
body.cassette-viewing-focus:not(.onboarding-active) .studio-chatroom {
  grid-area: chat !important;
  display: grid !important;
  width: min(760px, 100%) !important;
  height: 520px !important;
  min-height: 460px !important;
  margin: 30px auto 0 !important;
  justify-self: center !important;
}

body.cassette-viewing-focus .background-zone {
  margin-top: clamp(45px, 5vw, 78px) !important;
}

/* The PLAY-ready state should feel unmistakably ready without introducing
   geometry changes. */
body.cassette-viewing-focus[data-loaded-game]:not([data-loaded-game=""]) #play-button:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(128,190,118,.45), 0 0 14px rgba(100,176,91,.2), inset 0 1px rgba(255,255,255,.08) !important;
}

@media (min-width: 1500px) {
  body.cassette-viewing-focus .hero-zone,
  body.onboarding-active.cassette-viewing-focus .hero-zone {
    grid-template-columns: minmax(0, 1fr) 350px !important;
  }
}

@media (max-width: 1180px) {
  body.cassette-viewing-focus .hero-zone,
  body.onboarding-active.cassette-viewing-focus .hero-zone {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 320px) !important;
  }
  body.cassette-viewing-focus .hero-zone .console-column,
  body.onboarding-active.cassette-viewing-focus .hero-zone .console-column {
    max-width: none !important;
  }
}

@media (max-width: 870px) {
  body.cassette-viewing-focus .hero-zone,
  body.onboarding-active.cassette-viewing-focus .hero-zone {
    width: min(100%, calc(100vw - 10px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "main"
      "tapes"
      "chat" !important;
    gap: 14px !important;
  }

  body.cassette-viewing-focus .hero-zone .console-column,
  body.onboarding-active.cassette-viewing-focus .hero-zone .console-column,
  body.cassette-viewing-focus .hero-zone .tape-library,
  body.onboarding-active.cassette-viewing-focus .hero-zone .tape-library {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  body.cassette-viewing-focus .hero-zone .vcr-unit,
  body.onboarding-active.cassette-viewing-focus .hero-zone .vcr-unit {
    width: 98% !important;
  }

  body.cassette-viewing-focus:not(.onboarding-active) .studio-chatroom {
    width: min(620px, 100%) !important;
    height: 560px !important;
    margin-top: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.cassette-viewing-focus .hero-zone,
  body.cassette-viewing-focus .hero-zone .console-column,
  body.cassette-viewing-focus .hero-zone .tape-library {
    transition: none !important;
  }
}