/* ===========================================================================
   SCENES — finale tableau props (chair / popcorn / laptop), zoom + terminal.
   Props reuse Jason's pixel language: flat green fills, dark outline, top-left
   highlight, blocky clip-path corners. Tint via the same --mc/--mc-dark vars.
   =========================================================================== */

/* the playfield inside the screen */
.stage {
  position: relative;
  z-index: 2;
  width: 100%; height: 100%;
  overflow: hidden;
}
.scene {
  position: absolute; inset: 0;
  display: none;
  pointer-events: none;
}
.scene.show { display: flex; pointer-events: auto; animation: scene-in 460ms ease both; }
@keyframes scene-in { from { transform: translateY(10px); } to { transform: translateY(0); } }

/* ---- INTRO scene (hero) -------------------------------------------------- */
.scene-intro {
  flex-direction: row; align-items: center; gap: clamp(16px,3vw,40px);
  padding: clamp(20px,3.2vw,48px);
}
.intro-copy { flex: 1; display: flex; flex-direction: column; gap: clamp(14px,2.2vw,26px); min-width: 0; }
.scene-intro .mascot { --u: clamp(6px,1.05vw,9px); }

/* ---- FINALE tableau ------------------------------------------------------ */
.scene-finale { align-items: flex-end; justify-content: center; padding-bottom: 6%; }
.tableau {
  position: relative;
  width: clamp(420px, 64vw, 760px);
  height: clamp(300px, 56vh, 460px);
}
.tableau > * { position: absolute; }

/* Jason sits centered on the chair */
.tableau .seat-anchor { left: 50%; bottom: 8%; transform: translateX(-50%); display: none; }
.tableau .seat-anchor.sit { display: block; animation: jason-sit 560ms cubic-bezier(.2,1.4,.4,1) both; }
@keyframes jason-sit {
  from { transform: translateX(-50%) translateY(-46px); }
  to   { transform: translateX(-50%) translateY(0); }
}
.tableau .mascot { --u: clamp(4.5px, 0.82vw, 7px); }

/* === COOL CHAIR (matches Jason) ========================================== */
.chair {
  --cu: clamp(7px, 1.3vw, 11px);
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: calc(30 * var(--cu)); height: calc(40 * var(--cu));
  --mc:#19d35a; --mc-dark:#073d1b; --mc-lite:#57ff97;
  display: none;
}
.chair.in { display: block; animation: prop-pop 380ms cubic-bezier(.2,1.3,.4,1) both; }
@keyframes prop-pop {
  from { transform: translateX(-50%) translateY(14px) scale(.92); }
  to   { transform: translateX(-50%) translateY(0) scale(1); }
}
/* tall winged backrest */
.chair-back {
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width: calc(22 * var(--cu)); height: calc(26 * var(--cu));
  background: var(--mc); border: var(--cu) solid var(--mc-dark);
  clip-path: polygon(
    calc(2*var(--cu)) 0, calc(100% - 2*var(--cu)) 0, 100% calc(2*var(--cu)),
    100% calc(100% - var(--cu)), calc(100% - var(--cu)) 100%,
    var(--cu) 100%, 0 calc(100% - var(--cu)), 0 calc(2*var(--cu)));
  box-shadow: inset calc(2*var(--cu)) calc(2*var(--cu)) 0 0 var(--mc-lite),
              inset calc(-2*var(--cu)) 0 0 0 rgba(0,0,0,0.16);
}
/* a stitched center panel for the 'gamer chair' look */
.chair-back::after {
  content:""; position:absolute; left:50%; top:14%; transform:translateX(-50%);
  width: 52%; height: 70%;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent calc(2.4*var(--cu)),
    var(--mc-dark) calc(2.4*var(--cu)), var(--mc-dark) calc(2.8*var(--cu)));
  opacity:.5;
}
.chair-seat {
  position:absolute; left:50%; bottom: calc(8*var(--cu)); transform:translateX(-50%);
  width: calc(26 * var(--cu)); height: calc(7 * var(--cu));
  background: var(--mc); border: var(--cu) solid var(--mc-dark);
  clip-path: polygon(var(--cu) 0,calc(100% - var(--cu)) 0,100% var(--cu),100% 100%,0 100%,0 var(--cu));
  box-shadow: inset var(--cu) var(--cu) 0 0 var(--mc-lite);
}
.chair-arm { position:absolute; bottom: calc(7*var(--cu)); width: calc(4*var(--cu)); height: calc(10*var(--cu));
  background: var(--mc-dark); }
.chair-arm.l { left: calc(0*var(--cu)); }
.chair-arm.r { right: calc(0*var(--cu)); }
.chair-arm::before { content:""; position:absolute; top:0; left:-10%; width:120%; height: calc(2.4*var(--cu));
  background: var(--mc); border: calc(0.6*var(--cu)) solid var(--mc-dark); }
/* pedestal + star base */
.chair-stem { position:absolute; left:50%; bottom: calc(3*var(--cu)); transform:translateX(-50%);
  width: calc(3*var(--cu)); height: calc(6*var(--cu)); background: var(--mc-dark); }
.chair-base { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width: calc(20*var(--cu)); height: calc(3.2*var(--cu)); background: var(--mc-dark);
  clip-path: polygon(0 0,100% 0,86% 100%,14% 100%); }

/* === POPCORN BUCKET ====================================================== */
.popcorn {
  --pu: clamp(5px, 0.85vw, 7px);
  right: -2%; bottom: 2%;
  width: calc(16*var(--pu)); height: calc(20*var(--pu));
  display: none;
}
.popcorn.in { display: block; animation: pop-bounce 340ms cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop-bounce {
  from { transform: translateY(12px) scale(.8); }
  to   { transform: translateY(0) scale(1); }
}
.pop-bucket {
  position:absolute; left:0; bottom:0;
  width: calc(16*var(--pu)); height: calc(12*var(--pu));
  /* tapered tub */
  clip-path: polygon(8% 0, 92% 0, 82% 100%, 18% 100%);
  background: repeating-linear-gradient(90deg,
     #e3322a 0, #e3322a calc(2.4*var(--pu)),
     #f6f2ee calc(2.4*var(--pu)), #f6f2ee calc(4.8*var(--pu)));
  border-top: calc(1.4*var(--pu)) solid #b3231d;
  box-shadow: inset 0 calc(-2*var(--pu)) 0 rgba(0,0,0,0.12);
}
.pop-tops { position:absolute; left:50%; top:0; transform:translateX(-50%);
  width: calc(18*var(--pu)); height: calc(9*var(--pu)); }
.pop-tops i {
  position:absolute; width: calc(4*var(--pu)); height: calc(4*var(--pu));
  background:#ffe7a6; box-shadow: inset 0 0 0 calc(0.6*var(--pu)) #f4cf76;
  clip-path: polygon(25% 0,75% 0,100% 30%,80% 70%,100% 100%,55% 85%,15% 100%,0 60%,10% 25%);
}
.pop-tops i:nth-child(1){ left:5%;  top:42%; }
.pop-tops i:nth-child(2){ left:26%; top:14%; background:#fff4d2; }
.pop-tops i:nth-child(3){ left:48%; top:2%; }
.pop-tops i:nth-child(4){ left:66%; top:18%; background:#fff4d2; }
.pop-tops i:nth-child(5){ left:80%; top:46%; }
.pop-tops i:nth-child(6){ left:40%; top:38%; background:#ffe7a6; }
/* a kernel that flies into Jason's mouth */
.kernel {
  position:absolute; width: calc(3.4*var(--pu)); height: calc(3.4*var(--pu));
  background:#fff4d2; box-shadow: inset 0 0 0 2px #f4cf76;
  clip-path: polygon(25% 0,75% 0,100% 30%,80% 70%,100% 100%,55% 85%,15% 100%,0 60%,10% 25%);
  left: calc(6*var(--pu)); top: calc(2*var(--pu)); opacity:0;
}
.popcorn.toss .kernel { animation: kernel-fly 1.1s ease-in 1 forwards; }
@keyframes kernel-fly {
  0%{ opacity:0; transform: translate(0,0) scale(1); }
  10%{ opacity:1; }
  100%{ opacity:0; transform: translate(calc(-14*var(--pu)), calc(-9*var(--pu))) scale(.5); }
}

/* === LAPTOP ============================================================== */
.laptop {
  --lu: clamp(5px, 0.95vw, 8px);
  left: 50%; bottom: calc(2*var(--lu)); transform: translateX(-50%);
  width: calc(30*var(--lu)); height: calc(22*var(--lu));
  display: none;
}
.laptop.up { display: block; animation: laptop-up 560ms cubic-bezier(.2,1.3,.4,1) both; }
@keyframes laptop-up {
  from { transform: translateX(-50%) translateY(18px) scale(.5); }
  to   { transform: translateX(-50%) translateY(0) scale(1); }
}
.lap-lid {
  position:absolute; left:50%; bottom: calc(3*var(--lu)); transform:translateX(-50%);
  width: calc(26*var(--lu)); height: calc(17*var(--lu));
  background:#0c1411; border: var(--lu) solid var(--mc-dark, #073d1b);
  box-shadow: inset 0 0 0 calc(0.6*var(--lu)) #0a3;
  transform-origin: bottom center;
}
.lap-screen {
  position:absolute; inset: calc(1.4*var(--lu));
  background: radial-gradient(120% 120% at 50% 30%, #073 0%, #021c0e 70%);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-term); color: var(--fg-bright);
  font-size: calc(2.2*var(--lu)); text-align:center; overflow:hidden;
}
.lap-screen .miniprompt { color: var(--accent); }
.lap-base {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width: calc(30*var(--lu)); height: calc(3.4*var(--lu));
  background:#16341f; border: calc(0.6*var(--lu)) solid var(--mc-dark,#073d1b);
  clip-path: polygon(3% 0,97% 0,100% 100%,0 100%);
  box-shadow: inset 0 calc(1*var(--lu)) 0 #1f5a32;
}
.lap-base::after{ content:""; position:absolute; left:50%; top:18%; transform:translateX(-50%);
  width:22%; height: calc(1*var(--lu)); background:#0c1411; }

/* === ZOOM transition ===================================================== */
.scene-finale.zooming .tableau {
  transform-origin: 50% 64%;
  animation: zoom-into-laptop 1500ms cubic-bezier(.6,0,.4,1) both;
}
@keyframes zoom-into-laptop {
  from { transform: scale(1); }
  to   { transform: scale(8); }
}

/* === TERMINAL scene (read-only ASCII playback) =========================== */
.scene-terminal { background:#000; }
.term-wrap {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding: clamp(14px,2.4vw,30px);
  font-family: var(--font-term);
  color: var(--fg);
  background: linear-gradient(180deg, rgba(5, 12, 8, 0.8) 0%, rgba(0, 0, 0, 0.88) 100%);
}
.term-head { font-size:18px; color: var(--accent-dim); display:flex; justify-content:space-between;
  border-bottom:1px solid rgba(110, 224, 110, 0.45); padding-bottom:8px; margin-bottom:10px; }
.term-head .ro { color: var(--accent); }
#term-cmd { font-size: clamp(18px,2vw,24px); margin-bottom: 8px; min-height: 1.4em; }
#term-status {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #7adf7a;
  letter-spacing: 0.04em;
  opacity: 0.92;
}
#term-status[data-kind="connecting"] { color: #8cff8c; }
#term-status[data-kind="live"] { color: #a8ff7e; }
#term-status[data-kind="ended"] { color: #79d9ff; }
#term-status[data-kind="error"] { color: #ff8f8f; }
#term-status[data-kind="idle"] { color: var(--accent-dim); }
.stream-debug #term-status {
  font-size: 12px;
  color: #ffe08a;
  opacity: 1;
}
#term-out {
  flex: 1;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(72, 179, 72, 0.45);
  background: rgba(0, 0, 0, 0.84);
  box-shadow: inset 0 0 14px rgba(0, 255, 65, 0.12);
}
#term-out .xterm {
  height: 100%;
  padding: 8px 10px;
}
#term-out .xterm-viewport {
  overflow-y: auto !important;
  scrollbar-color: rgba(122, 255, 122, 0.6) rgba(0, 0, 0, 0.2);
}
.term-foot { font-size:13px; color: var(--accent-dim); margin-top:8px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.term-head, .term-foot { text-shadow: 0 0 6px rgba(0, 255, 65, 0.22); }
.term-foot .pix-btn { font-size:9px; padding:8px 12px; }

/* speech caption for finale beats */
.finale-cap {
  position:absolute; left:50%; bottom: 4%; transform:translateX(-50%);
  z-index:5; max-width: 80%;
}