: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; }

/* ================= full-screen, mobile-first layout ================= */
html, body { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-text-size-adjust: 100%; }
#wrap { position: fixed; inset: 0; height: auto; }
#stage { width: 100vw !important; height: 100vh; height: 100dvh; aspect-ratio: auto; }
#scene { touch-action: none; cursor: grab; }
#scene.dragging { cursor: grabbing; }
#scene.dragging .hs { pointer-events: none; }
.hidden { display: none !important; }

/* back button + look-around arrows (HTML, so they stay put while the scene pans) */
.backbtn { position: absolute; left: max(1.6cqw, env(safe-area-inset-left)); bottom: 1.4cqw; width: 6.2cqw; height: 6.2cqw; flex-direction: column; gap: 0;
  color: var(--cream); background: rgba(10,14,30,.72); border: .25cqw solid var(--mustard); line-height: 1; z-index: 3; }
.backbtn span { font: 800 3cqw/0.8 Nunito, sans-serif; transform: rotate(-90deg); display: block; }
.backbtn small { font: 800 .9cqw Nunito, sans-serif; letter-spacing: .15em; margin-top: .2cqw; }
.pan { position: absolute; z-index: 2; width: 3.4cqw; height: 5.4cqw; border-radius: 99px; border: .15cqw solid rgba(227,169,43,.55);
  background: rgba(10,14,30,.45); color: var(--cream); font: 800 2.6cqw/1 Nunito, sans-serif; display: grid; place-items: center; padding: 0 0 .3cqw; cursor: pointer;
  animation: nudge 1.8s ease-in-out infinite; }
#panL { left: max(1cqw, env(safe-area-inset-left)); top: 50%; margin-top: -2.7cqw; }
#panR { right: max(1cqw, env(safe-area-inset-right)); top: 50%; margin-top: -2.7cqw; }
#panU { top: 7cqw; right: max(1cqw, env(safe-area-inset-right)); transform: rotate(90deg); }
#panD { bottom: 12cqw; right: max(1cqw, env(safe-area-inset-right)); transform: rotate(-90deg); }
@keyframes nudge { 50% { opacity: .55; } }

.a2hs { display: none; margin-top: 1cqw; font: 600 1.1cqw Nunito, sans-serif; background: rgba(35,35,35,.06); border-radius: 1cqw; padding: .6cqw 1cqw; line-height: 1.4; }
.a2hs.show { display: block; }
.a2hs .share { display: inline-block; border: 1.5px solid currentColor; border-radius: 4px; padding: 0 4px; font-size: .9em; }
.touchonly { display: none; }
@media (pointer: coarse) { .touchonly { display: inline; } }

/* ================= phones (landscape) ================= */
@media (pointer: coarse) and (max-height: 600px) {
  #topbar { top: max(8px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  #topbar .right { gap: 8px; }
  .chip { font-size: 12px; padding: 5px 12px; border-width: 1.5px; }
  .btn { width: 40px; height: 40px; font-size: 19px; border-width: 1.5px; }
  #caption { bottom: 84px; font-size: 15px; max-width: min(74vw, 620px); padding: 10px 44px 10px 16px !important; border-radius: 12px; border-left-width: 6px; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
  #caption .x { width: 24px; height: 24px; right: 10px; font-size: 12px; }
  #invbar { height: 82px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #itemname { font-size: 12px; height: 16px; }
  #slots { gap: 8px; }
  .slot { width: 54px; height: 54px; border-radius: 12px; border-width: 2px; }
  .slot.sel { transform: translateY(-5px) scale(1.06); }
  .backbtn { width: 58px; height: 58px; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); border-width: 2px; }
  .backbtn span { font-size: 30px; }
  .backbtn small { font-size: 9px; margin-top: 2px; }
  .pan { width: 34px; height: 52px; font-size: 26px; border-width: 1.5px; }
  #panL, #panR { margin-top: -26px; }
  #panU { top: 58px; right: max(14px, env(safe-area-inset-right)); }
  #panD { bottom: 92px; right: max(14px, env(safe-area-inset-right)); }
  #caption { top: calc(max(8px, env(safe-area-inset-top)) + 50px); bottom: auto; }
  .ripple { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-width: 3px; }

  .overlay { align-items: center; }
  .poster { width: min(88vw, 600px); max-height: calc(100dvh - 20px); overflow: auto; padding: 14px 22px 16px; border-radius: 16px; box-shadow: 8px 8px 0 var(--orange), 0 0 0 3px var(--ink) inset; }
  .kicker { font-size: 11px; letter-spacing: .25em; }
  .poster h1 { font-size: clamp(30px, 11dvh, 46px); margin: 4px 0 2px; }
  .poster p { font-size: 15px; margin: 6px 0; }
  .big { font-size: 18px; padding: 10px 30px; margin-top: 6px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
  .poster .small { font-size: 12px; margin-top: 8px; }
  #vidstatus { font-size: 12px; margin-top: 8px; }
  .pill { font-size: 14px; padding: 8px 16px; border-width: 1.5px; }
  .pill.dark { font-size: 13px; padding: 6px 14px; }
  .a2hs { font-size: 12px; padding: 6px 10px; margin-top: 8px; border-radius: 10px; }

  .screen { width: min(94vw, 1000px); }
  .screen .kicker { font-size: 12px; margin-bottom: 6px; }
  #video { max-height: calc(100dvh - 110px); width: auto; max-width: 100%; border-radius: 12px; box-shadow: 0 0 0 3px var(--mustard), 6px 6px 0 var(--orange); }
  .madestat { font-size: 12px; margin-top: 6px; }
  .screen .row { margin-top: 8px; gap: 8px; }
}

/* ================= single fixed view ================= */
#scene { cursor: default; }
.qbtn { font: 900 2.1cqw/1 Nunito, sans-serif; color: var(--mustard); }
.qinline { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ink); color: var(--mustard); font-size: .9em; }

/* phones in landscape: HUD moves to side columns so the scene gets the full height */
@media (pointer: coarse) and (max-height: 600px) {
  #topbar { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: auto; bottom: auto;
    flex-direction: column; align-items: center; gap: 8px; }
  #topbar > .chip { display: none; }
  #topbar .right { flex-direction: column; gap: 8px; }
  #timer { font-size: 11px; padding: 4px 7px; letter-spacing: .04em; }
  .btn { width: 44px; height: 44px; }
  .qbtn { font-size: 24px; }
  .backbtn { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); width: 50px; height: 50px; }
  #invbar { left: auto; top: 0; bottom: 0; right: 0; width: calc(74px + env(safe-area-inset-right)); height: auto;
    padding: 0 env(safe-area-inset-right) 0 0; justify-content: center; background: linear-gradient(to left, rgba(5,10,25,.6), rgba(5,10,25,0)); }
  #itemname { display: none; }
  #slots { flex-direction: column; gap: 8px; }
  .slot.sel { transform: translateX(-5px) scale(1.06); }
  #caption { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); max-width: calc(100vw - 170px); }
}
@media (pointer: coarse) and (max-height: 600px) {
  #stage.closeup #caption { top: max(8px, env(safe-area-inset-top)); bottom: auto; }
}

/* phones: captions always at the top, so they never sit over things you need to tap */
@media (pointer: coarse) and (max-height: 600px) {
  #caption, #stage.closeup #caption { top: max(8px, env(safe-area-inset-top)); bottom: auto; }
}

/* "item selected, now tap something" banner */
#usehint { position: absolute; left: 50%; bottom: 8.3cqw; transform: translate(-50%, 0.6cqw); z-index: 4; pointer-events: none;
  display: flex; align-items: center; gap: .7cqw; white-space: nowrap; background: var(--mustard); color: var(--ink);
  font: 800 1.35cqw Nunito, sans-serif; padding: .45cqw 1.4cqw .45cqw .6cqw; border-radius: 99px; border: .2cqw solid var(--ink);
  box-shadow: 0 .4cqw 0 rgba(0,0,0,.3); opacity: 0; transition: opacity .2s, transform .2s; }
#usehint.show { opacity: 1; transform: translate(-50%, 0); animation: usepulse 1.6s ease-in-out .3s infinite; }
#usehint .ic { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: rgba(35,35,35,.15); display: grid; place-items: center; }
#usehint .ic svg { width: 85%; height: 85%; }
@keyframes usepulse { 50% { box-shadow: 0 .4cqw 0 rgba(0,0,0,.3), 0 0 0 .5cqw rgba(227,169,43,.35); } }
@media (pointer: coarse) and (max-height: 600px) {
  #usehint { bottom: max(10px, env(safe-area-inset-bottom)); font-size: 14px; padding: 6px 16px 6px 6px; gap: 8px; border-width: 2px; max-width: calc(100vw - 170px); white-space: normal; text-align: left; }
  #usehint .ic { width: 28px; height: 28px; flex: none; }
}

@media (pointer: coarse) and (max-height: 600px) {
  #usehint { bottom: auto; top: max(8px, env(safe-area-inset-top)); }
  #stage.selecting #caption { top: calc(max(8px, env(safe-area-inset-top)) + 52px); }
}