/* Kadabra Games room v19 — guided first-visit experience
   The initial view is deliberately centered on the main television, VCR, and
   cassette library. Other room systems return after the first tape begins. */

:root {
  --guide-red: #b52e25;
  --guide-red-bright: #ef5547;
  --guide-cream: #f3dfad;
  --guide-ink: #150b08;
}

body.onboarding-pending .studio-chatroom,
body.onboarding-pending .background-zone {
  visibility: hidden;
}

body.onboarding-active .room-layout-v4 {
  padding-top: clamp(18px, 2.4vw, 34px) !important;
}

body.onboarding-active .hero-zone {
  position: relative;
  isolation: isolate;
  width: min(1510px, calc(100vw - 20px)) !important;
  min-height: calc(100vh - 104px);
  margin-inline: auto;
  display: grid !important;
  grid-template-columns: minmax(650px, 1fr) minmax(290px, 350px) !important;
  grid-template-areas: "main tapes" !important;
  align-items: center !important;
  gap: clamp(18px, 2vw, 34px) !important;
  perspective: 1500px;
  transition: grid-template-columns .48s cubic-bezier(.2,.75,.2,1), gap .48s ease;
}

body.onboarding-active .studio-chatroom {
  display: none !important;
}

body.onboarding-active .hero-zone .console-column {
  grid-area: main;
  width: 100% !important;
  max-width: 1120px !important;
  justify-self: center;
  align-self: center !important;
  transform: translateX(0);
  transform-origin: center;
  transition: transform .48s cubic-bezier(.2,.75,.2,1), max-width .48s ease, filter .35s ease;
}

body.onboarding-active .hero-zone .tv-set {
  width: min(100%, 1080px) !important;
}

body.onboarding-active .hero-zone .vcr-unit {
  width: min(92%, 900px) !important;
}

body.onboarding-active .hero-zone .instruction-plaque {
  width: min(88%, 810px) !important;
}

body.onboarding-active .hero-zone .tape-library {
  grid-area: tapes;
  width: 100% !important;
  max-width: 350px;
  justify-self: end;
  align-self: center !important;
  transform: translateX(0) rotateY(-1deg);
  transform-origin: center left;
  transition: transform .48s cubic-bezier(.2,.75,.2,1), max-width .48s ease, filter .35s ease, box-shadow .35s ease;
}

/* Hovering, focusing, or tapping the library shifts the room's viewpoint toward
   the shelf without scaling the TV into a blurry bitmap. */
body.onboarding-active.cassette-focus .hero-zone {
  grid-template-columns: minmax(570px, .88fr) minmax(365px, 430px) !important;
  gap: clamp(12px, 1.35vw, 22px) !important;
}

body.onboarding-active.cassette-focus .hero-zone .console-column {
  max-width: 1030px !important;
  transform: translateX(-28px);
  filter: brightness(.92) saturate(.9);
}

body.onboarding-active.cassette-focus .hero-zone .tape-library {
  max-width: 430px;
  transform: translateX(-4px) rotateY(0deg);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 0 0 2px rgba(113, 23, 18, .32),
    0 28px 42px rgba(0,0,0,.58),
    0 0 30px rgba(181,46,37,.18) !important;
}

body.onboarding-active .background-zone {
  margin-top: clamp(95px, 10vw, 160px) !important;
  opacity: .26;
  filter: saturate(.55) brightness(.64);
  transition: opacity .5s ease, filter .5s ease;
}

body.onboarding-active .archive-footer {
  opacity: .34;
}

body.onboarding-complete .background-zone,
body.onboarding-complete .archive-footer {
  transition: opacity .55s ease, filter .55s ease;
}

/* ---------- Large live instruction ---------- */
.guided-instruction {
  --guide-left: 0px;
  --guide-top: 0px;
  position: absolute;
  z-index: 120;
  left: var(--guide-left);
  top: var(--guide-top);
  width: min(450px, 38vw);
  padding: 10px 15px 12px;
  border: 3px solid rgba(71,17,12,.84);
  border-radius: 3px;
  background:
    repeating-linear-gradient(-7deg, rgba(255,255,255,.045) 0 3px, transparent 3px 7px),
    linear-gradient(180deg, rgba(205,68,53,.98), rgba(131,27,22,.98));
  color: #fff0c8;
  box-shadow:
    inset 0 0 0 2px rgba(255,221,170,.1),
    0 9px 0 rgba(25,8,5,.36),
    0 16px 25px rgba(0,0,0,.44);
  transform: rotate(-1deg);
  transform-origin: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, left .42s cubic-bezier(.2,.75,.2,1), top .42s cubic-bezier(.2,.75,.2,1), transform .25s ease;
}

body.onboarding-active .guided-instruction {
  opacity: 1;
}

.guided-instruction > span,
.guided-instruction > strong,
.guided-instruction > small {
  display: block;
}

.guided-instruction > span {
  margin-bottom: 4px;
  color: rgba(255,226,173,.82);
  font: 900 9px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.guided-instruction > strong {
  color: #fff3ce;
  font: 1000 clamp(25px, 3vw, 51px)/.96 var(--ui);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px #681913, 0 0 12px rgba(255,218,164,.11);
}

.guided-instruction > small {
  margin-top: 7px;
  color: rgba(255,235,198,.86);
  font: 800 9px/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.guided-mobile-arrow {
  display: none;
  margin-top: 5px;
  color: #fff1c6;
  font: 900 23px/1 var(--ui);
  letter-spacing: .24em;
}

.guided-arrow-layer {
  position: absolute;
  z-index: 110;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

body.onboarding-active .guided-arrow-layer { opacity: 1; }
.guided-arrow-layer path {
  fill: none;
  stroke: var(--guide-red-bright);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 0 #4d110d) drop-shadow(0 6px 7px rgba(0,0,0,.36));
}
.guided-arrow-layer .arrow-head { fill: var(--guide-red-bright); filter: drop-shadow(0 3px 0 #4d110d); }

/* The active physical target receives a clear but short, film-era cue. */
body.onboarding-active[data-onboarding-step="choose"] #tape-library,
body.onboarding-active[data-onboarding-step="return"] #tape-library {
  animation: guide-target-library 1.75s ease-in-out infinite;
}
body.onboarding-active[data-onboarding-step="insert"] #vcr-slot,
body.onboarding-active[data-onboarding-step="play"] #play-button {
  animation: guide-target-control 1.2s ease-in-out infinite;
}

@keyframes guide-target-library {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.14) drop-shadow(0 0 12px rgba(204,60,45,.34)); }
}
@keyframes guide-target-control {
  0%,100% { box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 0 rgba(213,63,47,0); }
  50% { box-shadow: inset 0 1px rgba(255,255,255,.18), 0 0 0 4px rgba(213,63,47,.45), 0 0 20px rgba(213,63,47,.55); }
}

/* Demo-ready stickers are deliberately newer, red rental-store tags applied to
   older cassette labels. */
.tape-demo-sticker {
  top: 3px !important;
  left: 31px !important;
  min-width: 53px !important;
  padding: 3px 5px 2px !important;
  border: 1px solid #4e0e0a !important;
  border-radius: 1px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 35%),
    #b42f25 !important;
  color: #fff0c4 !important;
  box-shadow: 0 2px 3px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,226,175,.12) !important;
  transform: rotate(-2.2deg) !important;
}
.tape-demo-sticker strong {
  font-size: 5.8px !important;
  letter-spacing: .07em !important;
}
.tape-demo-sticker small {
  margin-top: 2px !important;
  background: #efd071 !important;
  color: #5b160e !important;
}

/* ---------- Intro film inside the main CRT ---------- */
body.intro-film-playing .screen-content {
  inset: 0 !important;
  overflow: hidden !important;
  scrollbar-gutter: auto;
  text-shadow: none !important;
  animation: none !important;
}
body.intro-film-playing #static-canvas { opacity: .035 !important; }
body.intro-film-playing .screen-osd { opacity: .68 !important; }

.kadabra-intro-film {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: #0d0b08;
}
.kadabra-intro-film video,
.kadabra-intro-film .intro-film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #17130d;
}
.kadabra-intro-film video { z-index: 1; }
.kadabra-intro-film .intro-film-poster { z-index: 0; }
.kadabra-intro-film.is-static video { display: none; }

.intro-film-controls {
  position: absolute;
  z-index: 4;
  right: 5.5%;
  bottom: 5%;
  display: flex;
  gap: 6px;
}
.intro-film-controls button {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(243,223,173,.72);
  border-radius: 2px;
  background: rgba(17,12,8,.82);
  color: #f1ddb0;
  font: 900 7px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,.38);
}
.intro-film-controls button:hover,
.intro-film-controls button:focus-visible {
  background: #8f261f;
  color: #fff2ca;
  outline: 2px solid rgba(247,223,165,.75);
  outline-offset: 2px;
}
.intro-film-controls button[aria-pressed="true"] { background: #6f1d18; }

.intro-film-badge {
  position: absolute;
  z-index: 3;
  left: 5.5%;
  bottom: 5.4%;
  padding: 5px 7px;
  border: 1px solid rgba(237,220,179,.34);
  background: rgba(15,11,8,.68);
  color: rgba(241,224,186,.78);
  font: 800 6px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 1240px) and (min-width: 871px) {
  body.onboarding-active .hero-zone {
    grid-template-columns: minmax(520px, 1fr) minmax(280px, 345px) !important;
    grid-template-areas: "main tapes" !important;
  }
  body.onboarding-active.cassette-focus .hero-zone {
    grid-template-columns: minmax(480px, .86fr) minmax(340px, 390px) !important;
  }
  body.onboarding-active .hero-zone .console-column { max-width: 920px !important; }
  body.onboarding-active.cassette-focus .hero-zone .console-column { transform: translateX(-14px); }
}

@media (max-width: 870px) {
  body.onboarding-active .room-layout-v4 { padding-top: 78px !important; }
  body.onboarding-active .hero-zone,
  body.onboarding-active.cassette-focus .hero-zone {
    width: min(100% - 10px, 720px) !important;
    min-height: 0;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: "main" "tapes" !important;
    align-items: start !important;
    gap: 16px !important;
  }
  body.onboarding-active .hero-zone .console-column,
  body.onboarding-active.cassette-focus .hero-zone .console-column {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    filter: none !important;
  }
  body.onboarding-active .hero-zone .tape-library,
  body.onboarding-active.cassette-focus .hero-zone .tape-library {
    width: min(100%, 620px) !important;
    max-width: none !important;
    justify-self: center;
    transform: none !important;
  }
  .guided-instruction,
  body.onboarding-active .guided-instruction {
    position: fixed;
    z-index: 3900;
    left: 50% !important;
    top: 68px !important;
    width: min(560px, calc(100vw - 20px));
    padding: 8px 12px 9px;
    transform: translateX(-50%) rotate(-.4deg) !important;
  }
  .guided-instruction > span { font-size: 7px; }
  .guided-instruction > strong { font-size: clamp(22px, 7vw, 34px); }
  .guided-instruction > small { font-size: 7px; }
  .guided-mobile-arrow { display: block; }
  .guided-arrow-layer { display: none; }
  body.onboarding-active .background-zone { margin-top: 90px !important; }
  .intro-film-controls button { min-height: 44px; padding: 9px 10px; }
}

@media (max-width: 560px) {
  body.onboarding-active .archive-shell { width: calc(100% - 8px); }
  body.onboarding-active .site-header { margin-bottom: 4px; }
  body.onboarding-active .room-layout-v4 { padding-top: 82px !important; }
  body.onboarding-active .hero-zone .vcr-unit { width: 98% !important; }
  body.onboarding-active .hero-zone .instruction-plaque { width: 98% !important; }
  .guided-instruction { top: 64px !important; }
  .guided-instruction > strong { font-size: 25px; }
  .intro-film-badge { display: none; }
  .intro-film-controls { right: 4%; bottom: 4%; }
  .intro-film-controls button { font-size: 6px; }
  .tape-demo-sticker { left: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.onboarding-active .hero-zone,
  body.onboarding-active .hero-zone .console-column,
  body.onboarding-active .hero-zone .tape-library,
  .guided-instruction,
  .guided-arrow-layer { transition: none !important; }
  body.onboarding-active[data-onboarding-step] #tape-library,
  body.onboarding-active[data-onboarding-step] #vcr-slot,
  body.onboarding-active[data-onboarding-step] #play-button { animation: none !important; }
}