/* ==========================================================================
   SHOWROOM — controlled chaos for the themed pages (js/showroom.js)
   Everything has a fixed home: side TOWERS in the gutters, CONTRAPTION
   strips between sections, and sales moments inside the price, gallery,
   steps and order sections. Chain reactions always end at a price or the
   order button.
   ========================================================================== */

/* No more loose perched creatures: they live in the towers now */
.perch { display: none !important; }
.has-perches .page-main { gap: 30px; }
.page-main { gap: 30px; }

/* ---------- Gutter towers ---------- */
.tower {
  position: fixed; top: 74px; bottom: 16px; z-index: 1; pointer-events: none;
  width: clamp(110px, calc((100vw - 1080px) / 2 - 24px), 230px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 10px 0;
}
.tower--left  { left: 8px; }
.tower--right { right: 8px; }
.tower::before { /* the structure the gadgets are mounted on */
  content: ''; position: absolute; inset: 0 auto 0 50%; width: 22px; translate: -50% 0; z-index: -1;
  border-radius: 10px; box-shadow: 0 0 0 3px #0d0418, 6px 0 12px rgba(0,0,0,.4);
  background: var(--tower-bg, #6b3d14);
}
.tower__slot {
  position: relative; display: grid; place-items: center;
  width: 100%; min-height: 64px;
}
.tower__slot::before { /* little bracket bolting the gadget to the structure */
  content: ''; position: absolute; left: 50%; top: 50%; width: 70%; height: 10px; translate: -50% -50%; z-index: -1;
  background: var(--bracket, #c99a2e); border: 2px solid #0d0418; border-radius: 4px;
}
.tower__slot img { max-width: 78%; max-height: 110px; width: auto; filter: drop-shadow(3px 5px 0 rgba(0,0,0,.45)); }
.tower__slot .emo { font-size: clamp(2.2rem, 3.2vw, 3.4rem); line-height: 1; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 4px 0 rgba(0,0,0,.4)); }
.tower__slot > * { animation: sr-idle var(--idle, 3s) ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes sr-idle { from { rotate: -3deg; } to { rotate: 3deg; } }
@media (max-width: 1239px) { .tower, .tower-chain { display: none; } }

/* themed structures */
.theme-jungle .tower { --tower-bg: repeating-linear-gradient(170deg, #5a3a1a 0 14px, #3d2410 14px 22px); --bracket: #2f9d3a; }
.theme-pirate .tower { --tower-bg: linear-gradient(90deg, #5a2e0a, #8a5523, #5a2e0a); --bracket: #f5c542; }
.theme-pirate .tower::after { /* rope ladder */
  content: ''; position: absolute; inset: 0 22%; z-index: -2; opacity: .7;
  background: repeating-linear-gradient(transparent 0 26px, #c9a46b 26px 30px), linear-gradient(90deg, #c9a46b 3px, transparent 3px calc(100% - 3px), #c9a46b 0);
}
.theme-space .tower { --tower-bg: repeating-linear-gradient(45deg, #8aa0c0 0 6px, #2b2b4f 6px 12px); --bracket: #00e5ff; }
.theme-arcade .tower { --tower-bg: repeating-linear-gradient(#ff2d7a 0 40px, #0d0221 40px 46px, #00e5ff 46px 86px, #0d0221 86px 92px); --bracket: #ffe94a; }
.theme-playground .tower { --tower-bg: repeating-linear-gradient(-30deg, #d9142b 0 16px, #fff3dc 16px 32px); --bracket: #ffd400; }

/* ---------- Hype meter (top of the left tower) ---------- */
.hype {
  position: relative; width: 86%; padding: 6px 8px 8px; text-align: center;
  background: #0d0418; border: 3px solid #f2ead3; border-radius: 8px; box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  font: 400 .8rem/1 'Anton', sans-serif; letter-spacing: .1em; color: #f2ead3; text-transform: uppercase;
}
.hype__bar { margin-top: 5px; height: 14px; border: 2px solid #f2ead3; border-radius: 7px; overflow: hidden; background: #2a1840; }
.hype__fill {
  height: 100%; width: var(--hype, 0%);
  background: repeating-linear-gradient(-45deg, var(--hype-a, #39ff6a) 0 8px, var(--hype-b, #ffd400) 8px 16px);
  transition: width .3s; animation: belt-run .6s linear infinite;
}
.hype__pct { display: block; margin-top: 4px; font-size: 1rem; color: var(--hype-a, #39ff6a); }
.hype.is-full { animation: rg-neon .12s steps(2) 10; }

/* ---------- Contraption strips between sections ---------- */
.contraption {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) auto; align-items: end; gap: 8px;
  min-height: 118px; padding: 10px 14px 12px;
}
.contraption::after { /* the shelf/bench everything sits on */
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 12px; z-index: -1; border-radius: 6px;
  background: var(--bench, #6b3d14); border: 3px solid #0d0418; box-shadow: 0 6px 10px rgba(0,0,0,.35);
}
.theme-jungle .contraption { --bench: repeating-linear-gradient(90deg, #5a3a1a 0 30px, #3d2410 30px 34px); }
.theme-pirate .contraption { --bench: linear-gradient(#8a5523, #5a2e0a); }
.theme-space .contraption { --bench: repeating-linear-gradient(90deg, #8aa0c0 0 14px, #2b2b4f 14px 18px); }
.theme-arcade .contraption { --bench: repeating-linear-gradient(90deg, #ff2d7a 0 20px, #00e5ff 20px 40px); }
.theme-playground .contraption { --bench: repeating-linear-gradient(90deg, #d9142b 0 20px, #fff3dc 20px 40px); }
.contraption__gadget { display: grid; place-items: end center; min-height: 90px; }
.contraption__gadget > * { transform-origin: 50% 100%; }
.contraption__gadget img { max-height: 92px; max-width: 100%; width: auto; filter: drop-shadow(3px 5px 0 rgba(0,0,0,.45)); }
.contraption__gadget .emo { font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(3px 4px 0 rgba(0,0,0,.4)); }
.contraption__sign {
  align-self: center; justify-self: end; white-space: nowrap;
  font: 400 clamp(.95rem, 2.4vw, 1.35rem)/1 'Anton', sans-serif; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  color: #0d0418; background: var(--sign, #ffd400); padding: .45em .8em;
  border: 3px solid #0d0418; box-shadow: 4px 4px 0 #0d0418; rotate: -2deg; cursor: pointer;
}
.contraption__sign.is-lit { animation: sr-sign .15s steps(2) 8; }
@keyframes sr-sign { 50% { background: #fff; scale: 1.08; } }
.contraption .golden-ticket { --u: clamp(7px, .8vw, 10px); }
.contraption__ticket { align-self: center; justify-self: end; filter: drop-shadow(4px 5px 0 rgba(0,0,0,.5)); }
.contraption svg.sr-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
@media (max-width: 600px) {
  .contraption { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .contraption__sign, .contraption__ticket { grid-column: 1 / -1; justify-self: center; }
}

/* fuse wires (towers + strips) */
.sr-wire path { fill: none; stroke: #f2ead3; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .8; }
.sr-wire path.is-burnt { stroke: var(--burn, #39ff6a); stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 5px var(--burn, #39ff6a)); }
.sr-wire .sr-carrier { font-size: 26px; filter: drop-shadow(2px 2px 0 #0d0418); }
.tower-chain { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tower-chain svg { width: 100%; height: 100%; overflow: visible; }

/* gadget actions */
.sr-pop    { animation: rg-pop .7s cubic-bezier(.3,1.8,.5,1) !important; }
.sr-swing  { animation: rg-swing 1.1s ease-out !important; transform-origin: 50% 0 !important; }
.sr-spin   { animation: sb-spin .35s linear 3 !important; }
.sr-boing  { animation: rg-boing .9s cubic-bezier(.3,1.6,.5,1) !important; }
.sr-shake  { animation: rg-shake .35s steps(4) 2 !important; }
.sr-flip   { animation: rg-flip .6s cubic-bezier(.3,1.6,.5,1) !important; }
.sr-hop    { animation: sr-hop .6s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes sr-hop { 40% { translate: 0 -30px; rotate: -12deg; } 100% { translate: 0 0; rotate: 0deg; } }

/* ---------- Sales moments ---------- */
.price-list li { position: relative; }
.price-list li.sr-hit { animation: sr-stub .7s cubic-bezier(.3,1.8,.5,1); }
@keyframes sr-stub { 0% { scale: 1; } 30% { scale: 1.12; rotate: -2deg; } 100% { scale: 1; rotate: 0deg; } }
.sr-badge {
  position: absolute; top: -13px; right: 10px; z-index: 2;
  font: 400 .72rem/1 'Anton', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: #ff2d7a; padding: .3em .55em; border: 2px solid #0d0418; rotate: 4deg;
  box-shadow: 2px 2px 0 #0d0418;
}
.sr-badge--go { background: #0d0418; color: #ffd400; rotate: -4deg; }
.sr-mini-cta {
  display: block; margin: 18px auto 0; cursor: pointer;
  font: 400 1.15rem/1 'Anton', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: #0d0418; background: #ffd400; padding: .6em 1.2em;
  border: 3px solid #0d0418; box-shadow: 5px 5px 0 #0d0418; rotate: -1deg;
  transition: scale .2s cubic-bezier(.3,1.8,.5,1);
}
.sr-mini-cta:hover { scale: 1.06; background: #39ff6a; }
.sr-mini-cta.is-lit { animation: sr-sign .15s steps(2) 8; }

.card.sr-flip-in { animation: sr-card .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes sr-card { from { transform: perspective(600px) rotateY(85deg); opacity: .2; } to { transform: perspective(600px) rotateY(0); opacity: 1; } }
.steps li.sr-stamp::before { animation: sr-stampnum .5s cubic-bezier(.3,1.8,.5,1); }
@keyframes sr-stampnum { 0% { scale: 2.6; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.cta-ticket.sr-party .golden-ticket { animation: rg-jolt .8s cubic-bezier(.3,1.8,.5,1), ticket-shine 1s linear infinite !important; }
.cta-ticket.sr-party .chase { animation-duration: .12s; }

/* price launched by the tower chain's finale */
.sr-launch {
  position: fixed; z-index: 880; pointer-events: none; translate: -50% -50%;
  font: 400 clamp(1.1rem, 2.4vw, 1.8rem)/1.05 'Anton', sans-serif; text-transform: uppercase; text-align: center;
  color: #0d0418; background: #ffd400; padding: .5em .8em; border: 3px solid #0d0418; box-shadow: 5px 5px 0 #0d0418;
  transition: left 1s cubic-bezier(.3,1.2,.5,1), top 1s cubic-bezier(.3,1.2,.5,1), scale 1s, opacity .4s;
}
.sr-launch small { display: block; font-size: .55em; letter-spacing: .1em; }

/* ---------- Floating order pill ---------- */
.order-pill {
  position: fixed; left: 50%; bottom: 14px; z-index: 870; translate: -50% 140%;
  display: flex; align-items: center; gap: .5em; cursor: pointer; white-space: nowrap;
  font: 400 1.05rem/1 'Anton', sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: #3b2300; padding: .65em 1.2em; border: 3px solid #3b2300; border-radius: 999px;
  background: linear-gradient(105deg, #a8770a, #ffe27a 20%, #fff6c4 28%, #d4a017 45%, #ffe27a 65%, #9c6b05 85%);
  background-size: 220% 100%; animation: ticket-shine 4s linear infinite;
  box-shadow: 4px 5px 0 #0d0418, 0 0 20px rgba(255,214,0,.5);
  transition: translate .4s cubic-bezier(.3,1.5,.5,1);
}
.order-pill.is-shown { translate: -50% 0; }
.order-pill.is-lit { animation: ticket-shine 4s linear infinite, rg-jolt .8s cubic-bezier(.3,1.8,.5,1); }
.order-pill b { font-weight: 400; color: #7a1d12; }
@media (max-width: 600px) { .order-pill { bottom: 62px; font-size: .9rem; } }

html[data-motion="calm"] .tower__slot > * { animation: none; }

/* gadget keyframes (the hub defines its own copies in hub.css) */
@keyframes rg-pop { 0% { scale: 1; } 35% { scale: 1.45; translate: 0 -14px; } 100% { scale: 1; translate: 0 0; } }
@keyframes rg-swing { 0% { rotate: 0deg; } 25% { rotate: 38deg; } 55% { rotate: -24deg; } 80% { rotate: 10deg; } 100% { rotate: 0deg; } }
@keyframes rg-boing { 0% { scale: 1 1; } 25% { scale: 1.2 .45; } 55% { scale: .85 1.45; translate: 0 -18px; } 100% { scale: 1 1; translate: 0 0; } }
@keyframes rg-shake { 25% { translate: -4px 2px; } 50% { translate: 4px -2px; } 75% { translate: -2px -3px; } }
@keyframes rg-flip { to { rotate: 540deg; } }
@keyframes rg-jolt { 0% { scale: 1; } 30% { scale: 1.18; rotate: 4deg; } 60% { scale: .94; rotate: -6deg; } 100% { scale: 1; } }
@keyframes rg-neon { 50% { filter: hue-rotate(160deg) brightness(1.8); scale: 1.06; } }

/* comic POW words + particles (same look as the hub) */
.pow {
  position: absolute; z-index: 9; pointer-events: none; translate: -50% -50%;
  font: 400 clamp(1rem, 2vw, 1.7rem)/1 'Bangers', 'Anton', sans-serif; letter-spacing: .04em; white-space: nowrap;
  color: #0d0418; background: var(--pow); padding: .2em .5em;
  clip-path: polygon(0 18%, 12% 0, 30% 12%, 50% 0, 68% 12%, 88% 0, 100% 20%, 92% 50%, 100% 80%, 86% 100%, 66% 88%, 48% 100%, 30% 88%, 12% 100%, 0 82%, 8% 50%);
  filter: drop-shadow(3px 4px 0 #0d0418);
  animation: pow 1s cubic-bezier(.3,1.8,.5,1) forwards;
}
.pow--fixed { position: fixed; z-index: 875; }
@keyframes pow {
  0% { scale: 0; rotate: calc(var(--tilt) - 30deg); opacity: 1; }
  25% { scale: 1.25; rotate: var(--tilt); }
  70% { scale: 1; opacity: 1; translate: -50% -70%; }
  100% { scale: .8; opacity: 0; translate: -50% -110%; }
}
.rg-particle { position: absolute; z-index: 8; pointer-events: none; width: 10px; height: 10px; margin: -5px; animation: particle 1s ease-out forwards; background: var(--c); }
.rg-particle--fixed { position: fixed; z-index: 874; }
.rg-particle--leaf { border-radius: 0 100% 0 100%; width: 14px; height: 9px; }
.rg-particle--coin { border-radius: 50%; border: 2px solid #7a4a00; background: #ffd400; }
.rg-particle--star { clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 16px; height: 16px; }
.rg-particle--pixel { width: 9px; height: 9px; }
.rg-particle--confetti { width: 7px; height: 13px; }
@keyframes particle { to { translate: var(--dx) var(--dy); rotate: 540deg; opacity: 0; } }

/* Wide screens: the order pill lives at the foot of the left tower, clear of the content */
@media (min-width: 1240px) {
  .order-pill {
    left: calc((100vw - 1080px) / 4 + 6px); bottom: 54px;
    flex-direction: column; gap: .25em; white-space: normal; text-align: center;
    width: clamp(110px, calc((100vw - 1080px) / 2 - 36px), 200px);
    border-radius: 16px; padding: .6em .7em;
  }
}

/* headroom so the START HERE / GO BIG badges never touch the section heading */
.price-list { padding-top: 16px; }

/* Phones: motion switch moves up beside the back sticker, so the order pill owns the bottom */
@media (max-width: 600px) {
  .motion-toggle { top: 14px; right: 10px; bottom: auto; left: auto; font-size: .72rem; }
  .order-pill { bottom: 10px; }
  .page-main { padding-bottom: 120px; }
}