:root {
  --ink: #232323; --cream: #f3e6c8; --mustard: #e3a92b; --orange: #d9622b; --teal: #2f6f73; --tealD: #163638;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b1819; overflow: hidden; font-family: Nunito, system-ui, sans-serif; color: var(--cream); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; background: #0b1819; container-type: inline-size; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scene text { font-family: Righteous, Nunito, sans-serif; pointer-events: none; }

/* hotspots */
.hs { cursor: pointer; }
@media (hover: hover) { .hs:hover { filter: brightness(1.15); } }
.sel-mode .hs { cursor: crosshair; }

/* transitions & fx */
#view.fade { animation: fade .35s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.swing { transform-box: fill-box; transform-origin: left center; animation: swing 1s ease-in-out forwards; }
@keyframes swing { from { transform: scaleX(1); } to { transform: scaleX(.17); } }
.slid { transform: translateX(310px); }
.slide-anim { animation: slide 1.6s cubic-bezier(.5,0,.3,1); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(310px); } }
.wiggle { transform-box: fill-box; transform-origin: 50% 100%; animation: wiggle .45s ease-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } }
.pop { transform-box: fill-box; transform-origin: 50% 50%; animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }
.reveal { animation: reveal 1.4s ease-out; }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* HUD */
#topbar { position: absolute; top: 1.6cqw; left: 1.6cqw; right: 1.6cqw; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
#topbar .right { display: flex; gap: .8cqw; align-items: center; }
.chip { background: rgba(20,30,30,.72); border: .15cqw solid rgba(227,169,43,.6); color: var(--mustard); border-radius: 99px; padding: .5cqw 1.4cqw; font-family: Righteous, sans-serif; font-size: 1.35cqw; letter-spacing: .12em; }
.chip span { color: var(--cream); opacity: .8; letter-spacing: .04em; }
.btn { pointer-events: auto; width: 4cqw; height: 4cqw; border-radius: 50%; border: .15cqw solid rgba(227,169,43,.6); background: rgba(20,30,30,.72); font-size: 1.9cqw; cursor: pointer; display: grid; place-items: center; padding: 0; }
.btn:active { transform: scale(.92); }

#caption { position: absolute; bottom: 11.5cqw; left: 50%; transform: translateX(-50%); max-width: 62cqw; background: var(--cream); color: var(--ink); padding: 1cqw 2cqw; border-radius: 1.2cqw; font-size: 1.65cqw; font-weight: 800; line-height: 1.35; box-shadow: 0 .6cqw 0 rgba(0,0,0,.25); border-left: .7cqw solid var(--orange); opacity: 0; transition: opacity .25s; pointer-events: none; text-align: left; }
#caption.show { opacity: 1; pointer-events: auto; cursor: pointer; }
#caption { padding-right: 4.2cqw !important; }
#caption .x { position: absolute; top: 50%; right: 1.3cqw; transform: translateY(-50%); width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: rgba(35,35,35,.12); display: grid; place-items: center; font-size: 1.2cqw; }
#caption.hint { border-left-color: var(--mustard); background: #fff4d6; }

#invbar { position: absolute; left: 0; right: 0; bottom: 0; height: 10.5cqw; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 1cqw; pointer-events: none; background: linear-gradient(transparent, rgba(5,15,15,.55)); }
#itemname { font-family: Righteous, sans-serif; font-size: 1.3cqw; color: var(--mustard); letter-spacing: .1em; height: 1.9cqw; text-shadow: 0 .15cqw 0 #000; }
#slots { display: flex; gap: .8cqw; pointer-events: auto; }
.slot { width: 6.4cqw; height: 6.4cqw; border-radius: 1.1cqw; background: rgba(243,230,200,.12); border: .18cqw solid rgba(243,230,200,.25); display: grid; place-items: center; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.slot.empty { cursor: default; opacity: .45; }
.slot svg { width: 82%; height: 82%; pointer-events: none; }
.slot.sel { border-color: var(--mustard); background: rgba(227,169,43,.3); transform: translateY(-.6cqw) scale(1.06); box-shadow: 0 0 1.2cqw rgba(227,169,43,.6); }
.slot.new { animation: pop .6s ease-out; }

#ripples { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ripple { position: absolute; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-radius: 50%; border: .3cqw solid var(--mustard); animation: ripple .45s ease-out forwards; }
@keyframes ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* overlays */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,22,23,.82); z-index: 5; }
.overlay.hidden { display: none; }
.poster { width: 46cqw; background: var(--cream); color: var(--ink); border-radius: 1.5cqw; padding: 2.6cqw 3cqw; text-align: center; box-shadow: 1cqw 1cqw 0 var(--orange), 0 0 0 .4cqw var(--ink) inset; }
.kicker { font-family: Righteous, sans-serif; letter-spacing: .3em; font-size: 1.1cqw; color: var(--orange); }
.poster h1 { font-family: Righteous, sans-serif; font-size: 5.2cqw; line-height: .95; margin: .8cqw 0 .4cqw; letter-spacing: .04em; color: var(--tealD); }
.poster h1 em { font-style: normal; color: var(--orange); }
.poster p { font-size: 1.45cqw; font-weight: 600; margin: .8cqw 0; line-height: 1.4; }
.poster .small { font-size: 1.1cqw; opacity: .75; margin-top: 1.2cqw; line-height: 1.45; }
.bird { width: 14cqw; margin: .4cqw auto 0; display: block; }
.big { margin-top: 1cqw; font-family: Righteous, sans-serif; font-size: 1.8cqw; letter-spacing: .12em; padding: 1cqw 3cqw; border-radius: 99px; border: .3cqw solid var(--ink); background: var(--mustard); color: var(--ink); cursor: pointer; box-shadow: 0 .5cqw 0 var(--ink); }
.big:active { transform: translateY(.4cqw); box-shadow: 0 .1cqw 0 var(--ink); }
#stars { font-size: 4cqw; color: var(--mustard); letter-spacing: .3em; text-shadow: .2cqw .2cqw 0 var(--ink); }

/* ---------- Papa's House additions ---------- */
:root { --tealD: #1f2346; }
html, body { background: #0f1126; }
#wrap { height: 100dvh; }
#stage { width: min(100vw, calc(100dvh * 16 / 9)); background: #0f1126; }
@supports not (height: 100dvh) { #stage { width: min(100vw, calc(100vh * 16 / 9)); } }
.overlay { background: rgba(10,12,32,.84); }
.poster { box-shadow: 1cqw 1cqw 0 var(--orange), 0 0 0 .4cqw var(--ink) inset; }
#scene text.hand { font-family: Caveat, 'Comic Sans MS', cursive; }
.twinkle { animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .55; } }
.blink { animation: blink 4s infinite; }
@keyframes blink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: 0; } }
.rollup { transform-box: fill-box; transform-origin: 50% 0; animation: rollup 1.8s ease-in-out forwards; }
@keyframes rollup { to { transform: scaleY(.04); } }

/* video ending */
.screen { width: 72cqw; text-align: center; }
.screen .kicker { font-size: 1.6cqw; color: var(--mustard); margin-bottom: 1cqw; }
#video { width: 100%; max-height: 40.5cqw; border-radius: 1.2cqw; background: #000; box-shadow: 0 0 0 .3cqw var(--mustard), 1cqw 1cqw 0 var(--orange); }
.screen .row { margin-top: 1.4cqw; display: flex; gap: 1cqw; justify-content: center; }
.pill { font: 800 1.4cqw Nunito, sans-serif; color: var(--cream); background: rgba(243,230,200,.12); border: .15cqw solid rgba(243,230,200,.4); border-radius: 99px; padding: .7cqw 1.8cqw; cursor: pointer; }

/* portrait phones: ask to rotate */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: #14162e; color: #f3e6c8; font: 800 clamp(17px, 5.5vw, 22px) Nunito, sans-serif; box-sizing: border-box;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; }
#rotate small { font-weight: 600; font-size: 15px; opacity: .75; }
#rotate .phone { font-size: 64px; animation: turn 2.2s ease-in-out infinite; }
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: flex; } }

/* small screens: slightly bigger text */
@media (max-height: 500px) {
  #caption { font-size: 2cqw; max-width: 70cqw; }
  .chip { font-size: 1.6cqw; }
}

#vidstatus { margin-top: 1cqw; font: 800 1.15cqw Nunito, sans-serif; color: #7a6a4a; }
#vidstatus.ready { color: #3d7a52; }
#resetRow { margin-top: .8cqw; }
.pill.dark { color: var(--ink); background: rgba(35,35,35,.06); border-color: rgba(35,35,35,.25); font-size: 1.1cqw; padding: .45cqw 1.3cqw; }
.madestat { font: 600 1.2cqw Nunito, sans-serif; color: var(--cream); opacity: .8; margin-top: .9cqw; }