/* ACT I places: cut-paper dioramas. Every piece casts a paper shadow; far planes are dimmed. */
.place-paper { --plane-dim: .5; transform-origin: 50% 100%; }
.place-paper .piece { filter: drop-shadow(0 3px 2px rgba(60, 40, 20, .3)); }
.place-paper .paper-tab { background: #b6452c; color: #fffaf0; font: 26px/46px 'Patrick Hand', cursive; text-align: center; border-radius: 0 0 10px 10px; }

/* The Storybook */
.place-paper .sb-table { background: repeating-linear-gradient(90deg, #a2754a 0 120px, #96693f 120px 124px); }
.place-paper .sb-book { background: linear-gradient(90deg, #fffaf0 0 49.6%, #d9ccb0 49.6% 50.4%, #fffaf0 50.4%); border-radius: 6px; box-shadow: 0 0 0 10px #8a4b2f; }
.place-paper .sb-tab { color: #fffaf0; font: 20px/40px 'Patrick Hand', cursive; text-align: center; border-radius: 0 0 8px 8px; }
.place-paper .sb-tab-1 { background: #c97d4f; }
.place-paper .sb-tab-2 { background: #7b4fb3; }
.place-paper .sb-tab-3 { background: #222; }
.place-paper .sb-tab-4 { background: #3f8f8a; }
.place-paper .sb-crane { background: #e98e7f; clip-path: polygon(0 60%, 45% 45%, 50% 0, 58% 45%, 100% 30%, 62% 70%, 40% 100%, 35% 70%); }
.place-paper .sb-edge { background: #7a5232; }

/* Handmade Hamlet */
.place-paper .hm-hill { background: #a9c09b; border-radius: 50% 50% 0 0 / 60% 60% 0 0; }
.place-paper .hm-cottage { background: linear-gradient(#f2b04a, #f2b04a) 30% 70% / 22% 30% no-repeat, linear-gradient(#fffaf0, #fffaf0) 0 100% / 100% 58% no-repeat; }
.place-paper .hm-cottage::before { content: ''; position: absolute; inset: 0 0 56% 0; background: #b6452c; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.place-paper .hm-c2::before { background: #7b4fb3; }
.place-paper .hm-c3::before { background: #3f8f8a; }
.place-paper .hm-mailbox { background: #b6452c; border-radius: 22px 22px 4px 4px; color: #fffaf0; font: 14px/16px 'Patrick Hand', cursive; text-align: center; padding-top: 10px; }
.place-paper .hm-bridge { background: #c7b48b; border-radius: 50% 50% 0 0 / 100% 100% 0 0; color: #2b2118; font: 22px/50px 'Patrick Hand', cursive; text-align: center; }
.place-paper .hm-sawhorse { background: repeating-linear-gradient(45deg, #f2b04a 0 8px, #2b2118 8px 16px) 0 0 / 100% 12px no-repeat, linear-gradient(#8a6a3e, #8a6a3e) 10% 12px / 6px 28px no-repeat, linear-gradient(#8a6a3e, #8a6a3e) 90% 12px / 6px 28px no-repeat; }
.place-paper .hm-grass { background: #8aa57e; clip-path: polygon(0 30%, 4% 0, 8% 30%, 12% 5%, 16% 30%, 20% 0, 24% 30%, 28% 8%, 32% 30%, 36% 0, 40% 30%, 44% 6%, 48% 30%, 52% 0, 56% 30%, 60% 5%, 64% 30%, 68% 0, 72% 30%, 76% 8%, 80% 30%, 84% 0, 88% 30%, 92% 6%, 96% 30%, 100% 0, 100% 100%, 0 100%); }

/* Platform City */
.place-paper .pc-tower { background: repeating-linear-gradient(transparent 0 26px, rgba(255, 250, 240, .7) 26px 40px) 20px 30px / 150px 100% no-repeat; }
.place-paper .pc-t1 { background-color: #f2b04a; }
.place-paper .pc-t2 { background-color: #b5a58a; }
.place-paper .pc-t3 { background-color: #8a8478; }
.place-paper .pc-billboard { background: #fffaf0; color: #b6452c; font: 24px/1.4 'Patrick Hand', cursive; text-align: center; padding-top: 30px; clip-path: polygon(0 0, 100% 0, 100% 86%, 70% 100%, 76% 86%, 0 86%); }
.place-paper .pc-msign { background: #2b2118; color: #fffaf0; font: 34px/46px Georgia, serif; text-align: center; transform: rotate(14deg); }
.place-paper .pc-street { background: linear-gradient(90deg, transparent 45%, #f2b04a 45% 55%, transparent 55%) 0 50% / 140px 6px repeat-x, #6b6258; }

/* Mid-World */
.place-paper .mw-dusk { background: linear-gradient(#e9a466, #f3d29a 60%, #efe4cf); }
.place-paper .mw-dunes { background: #d9a86a; border-radius: 40% 60% 0 0 / 30% 50% 0 0; }
.place-paper .mw-tower { background: #0e0a07; clip-path: polygon(34% 0, 66% 0, 70% 6%, 60% 6%, 64% 22%, 58% 24%, 62% 100%, 38% 100%, 42% 24%, 36% 22%, 40% 6%, 30% 6%); }
.place-paper .mw-ghost { background: #efe8ff; border: 0; opacity: .8; filter: drop-shadow(0 0 1.5px #2b2118) drop-shadow(0 2px 1px rgba(60, 40, 20, .4)); border-radius: 50% 50% 10% 10%; clip-path: polygon(0 40%, 10% 10%, 50% 0, 90% 10%, 100% 40%, 100% 100%, 80% 85%, 60% 100%, 40% 85%, 20% 100%, 0 85%); animation: mw-float 9s ease-in-out infinite alternate; }
.place-paper .mw-pac { background: #f2c230; border-radius: 50%; clip-path: polygon(50% 50%, 100% 18%, 100% 0, 0 0, 0 100%, 100% 100%, 100% 82%); animation-duration: 12s; }
@keyframes mw-float { to { transform: translate(60px, -24px); } }
.place-paper .mw-monorail { background: #fffaf0; border: 3px solid #2b2118; border-radius: 30px 6px 6px 30px; color: #b6452c; font: 18px/34px 'Patrick Hand', cursive; text-align: center; transform: rotate(-4deg); }
.place-paper .mw-gunslinger { background: #2b2118; clip-path: polygon(30% 0, 70% 0, 70% 20%, 100% 22%, 0 22%, 30% 20%, 30% 30%, 75% 32%, 70% 100%, 55% 100%, 50% 65%, 45% 100%, 30% 100%, 25% 32%); }
.place-paper .mw-lobster { background: #c0392b; clip-path: polygon(20% 0, 35% 25%, 50% 15%, 65% 25%, 80% 0, 75% 40%, 90% 55%, 70% 70%, 50% 100%, 30% 70%, 10% 55%, 25% 40%); }
.place-paper .mw-rose { background: radial-gradient(circle 16px at 50% 20px, #c0392b 96%, transparent) no-repeat, linear-gradient(#4f7d3a, #4f7d3a) 50% 30px / 5px 90px no-repeat, radial-gradient(ellipse 12px 6px at 38% 70px, #4f7d3a 96%, transparent) no-repeat; }
.place-paper .mw-sand { background: #c99a5e; }

/* Gallery Row */
.place-paper .gy-shops { background: repeating-linear-gradient(90deg, #b6452c 0 25px, #fffaf0 25px 50px) 0 0 / 334px 56px repeat-x, repeating-linear-gradient(90deg, #e6d6b6 0 300px, #bfae8a 300px 334px); color: #8e2f1c; font: 24px/40px 'Special Elite', monospace; padding: 62px 0 0 170px; text-align: left; white-space: pre; }
.place-paper .gy-columns { background: repeating-linear-gradient(90deg, #fffaf0 0 18px, #d9ccb0 18px 24px) 0 40px / 100% calc(100% - 60px) no-repeat, linear-gradient(#fffaf0, #fffaf0) 0 0 / 100% 36px no-repeat, linear-gradient(#d9ccb0, #d9ccb0) 0 100% / 100% 20px no-repeat; }
.place-paper .gy-lamp { background: linear-gradient(#2b2118, #2b2118) 50% 20px / 5px 90px no-repeat, radial-gradient(ellipse 20px 10px at 50% 14px, #b6452c 96%, transparent) no-repeat; }
.place-paper .gy-sidewalk { background: repeating-linear-gradient(90deg, #b5a58a 0 98px, #8a8478 98px 100px); }

/* The Companion Shop */
.place-paper .cs-window { background: linear-gradient(#f7c6d9, #fbe3ec); border: 14px solid #fffaf0; border-radius: 24px 24px 0 0; }
.place-paper .cs-shelf {
  --eye: 22px;
  background:
    radial-gradient(circle 3px at var(--eye) 18px, #2b2118 96%, transparent) 0 0 / 60px 48px,
    radial-gradient(circle 3px at calc(var(--eye) + 14px) 18px, #2b2118 96%, transparent) 0 0 / 60px 48px,
    radial-gradient(ellipse 22px 20px at 29px 22px, #fffaf0 96%, transparent) 0 0 / 60px 48px,
    linear-gradient(#b88b55, #b88b55) 0 100% / 100% 6px no-repeat;
}
#backdrop[data-watch="1"] .cs-shelf { --eye: 17px; }
.place-paper .cs-furby { background: radial-gradient(circle 7px at 35% 40%, #fff 40%, #2b2118 45% 60%, #fff 65%, transparent 70%) no-repeat, radial-gradient(circle 7px at 65% 40%, #fff 40%, #2b2118 45% 60%, #fff 65%, transparent 70%) no-repeat, radial-gradient(ellipse 28px 24px at 50% 50%, #7b4fb3 96%, transparent); }
.place-paper .cs-tamagotchi { background: radial-gradient(ellipse 14px 12px at 50% 46%, #cfe8c4 96%, transparent) no-repeat, radial-gradient(ellipse 26px 33px at 50% 50%, #e98e7f 96%, transparent); }
.place-paper .cs-yeti { background: radial-gradient(circle 4px at 36% 40px, #111 96%, transparent) no-repeat, radial-gradient(circle 4px at 64% 40px, #111 96%, transparent) no-repeat, radial-gradient(circle 8px at 14% 18px, #f4ead8 96%, transparent) no-repeat, radial-gradient(circle 8px at 86% 18px, #f4ead8 96%, transparent) no-repeat, radial-gradient(ellipse 25px 28px at 50% 36px, #f4ead8 96%, transparent) no-repeat, radial-gradient(ellipse 22px 28px at 50% 100%, #2b2b36 96%, transparent) no-repeat; }
.place-paper .cs-tag { background: #fffaf0; color: #b6452c; font: 24px/38px 'Patrick Hand', cursive; text-align: center; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); }
.cs-counter { background: linear-gradient(#e98e7f 0 12px, #fffaf0 12px); border-radius: 6px 6px 0 0; filter: drop-shadow(0 -2px 2px rgba(60, 40, 20, .3)); }

/* The Worktable */
.place-paper .wt-mat { background: linear-gradient(rgba(255, 255, 255, .25) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 255, 255, .25) 1px, transparent 1px) 0 0 / 40px 40px, #4f7d6a; border-radius: 10px; }
.place-paper .wt-scissors { background: radial-gradient(circle 15px at 30% 84%, transparent 8px, #b6452c 9px 15px, transparent 16px) no-repeat, radial-gradient(circle 15px at 70% 84%, transparent 8px, #b6452c 9px 15px, transparent 16px) no-repeat, linear-gradient(160deg, transparent 45%, #c0c0c0 46% 54%, transparent 55%) 0 0 / 100% 70% no-repeat, linear-gradient(20deg, transparent 45%, #a0a0a0 46% 54%, transparent 55%) 0 0 / 100% 70% no-repeat; }
.place-paper .wt-pattern { background: #f4ead8; border: 2px dashed #6b5a45; color: #6b5a45; font: 18px/52px 'Special Elite', monospace; text-align: center; clip-path: polygon(0 0, 92% 0, 100% 40%, 100% 100%, 6% 100%); }
.place-paper .wt-pattern-2 { transform: rotate(-3deg); }
.place-paper .wt-mousetrap { background: radial-gradient(circle 7px at 10px 25px, #b6452c 96%, transparent) no-repeat, linear-gradient(90deg, #f2b04a 0 25%, #3f8f8a 25% 50%, #7b4fb3 50% 75%, #c97d4f 75%) 0 32px / 100% 6px no-repeat, linear-gradient(#2b2118, #2b2118) 85% 0 / 4px 40px no-repeat; animation: mt-roll 4s linear infinite; }
@keyframes mt-roll { from { background-position: 0 0, 0 32px, 85% 0; } to { background-position: 280px 0, 0 32px, 85% 0; } }

/* Slide props: "this is fine" (a1-act, after KC Green's "On Fire") */
.prop-fire {
  background: linear-gradient(#f2b04a, #e0622c 70%, #b6452c);
  clip-path: polygon(0 100%, 0 55%, 3% 25%, 6% 58%, 9% 15%, 12% 50%, 15% 30%, 18% 62%, 21% 10%, 24% 48%, 27% 28%, 30% 60%, 33% 18%, 36% 52%, 39% 32%, 42% 64%, 45% 12%, 48% 50%, 51% 26%, 54% 58%, 57% 16%, 60% 54%, 63% 30%, 66% 62%, 69% 8%, 72% 46%, 75% 24%, 78% 58%, 81% 14%, 84% 50%, 87% 28%, 90% 60%, 93% 18%, 96% 52%, 100% 30%, 100% 100%);
  filter: drop-shadow(0 -2px 2px rgba(60, 40, 20, .3));
  transform-origin: 50% 100%;
  animation: fine-flicker 1.4s steps(3) infinite alternate;
}
.prop-fire::before {
  content: ''; position: absolute; inset: 40% 0 0;
  background: #f6d365;
  clip-path: polygon(0 100%, 0 70%, 4% 40%, 8% 72%, 13% 30%, 18% 68%, 24% 36%, 30% 74%, 36% 28%, 42% 70%, 48% 40%, 54% 76%, 60% 30%, 66% 70%, 72% 38%, 78% 74%, 84% 32%, 90% 70%, 95% 42%, 100% 64%, 100% 100%);
  animation: fine-flicker 1s steps(2) infinite alternate-reverse;
}
@keyframes fine-flicker { to { transform: scaleY(1.12) skewX(-2deg); } }
.prop-fine-stick { background: linear-gradient(90deg, #b88b55, #d9b07a); border-radius: 3px; transform: rotate(-4deg); transform-origin: 50% 100%; box-shadow: 2px 3px 3px rgba(0, 0, 0, .25); }
.prop-fine-sign { background: #fffaf0; border: 3px solid #2b2118; border-radius: 4px; color: #2b2118; font: 26px/30px 'Patrick Hand', cursive; text-align: center; padding-top: 6px; transform: rotate(-4deg); filter: drop-shadow(0 4px 3px rgba(60, 40, 20, .35)); }
.prop-fine-dog {
  background:
    linear-gradient(#2b2118, #2b2118) 50% 6px / 40px 26px no-repeat,
    linear-gradient(#2b2118, #2b2118) 50% 30px / 64px 7px no-repeat,
    radial-gradient(circle 5px at 41% 58px, #2b2118 96%, transparent) no-repeat,
    radial-gradient(circle 5px at 59% 58px, #2b2118 96%, transparent) no-repeat,
    radial-gradient(ellipse 9px 6px at 50% 74px, #2b2118 96%, transparent) no-repeat,
    linear-gradient(#6b4a2e, #6b4a2e) 103px 116px / 20px 5px no-repeat,
    radial-gradient(circle 8px at 125px 128px, transparent 45%, #fffaf0 50% 96%, transparent) no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 103px 116px / 20px 26px no-repeat,
    radial-gradient(ellipse 34px 30px at 50% 62px, #e2b36a 96%, transparent) no-repeat,
    radial-gradient(ellipse 11px 22px at 24% 66px, #b8823f 96%, transparent) no-repeat,
    radial-gradient(ellipse 11px 22px at 76% 66px, #b8823f 96%, transparent) no-repeat,
    radial-gradient(ellipse 44px 50px at 50% 128px, #e2b36a 96%, transparent) no-repeat;
  filter: drop-shadow(0 3px 2px rgba(60, 40, 20, .3));
}