/* Tabletop scenes: content-related arrangements instead of repeated corner stickers. */
.play-piece-library { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.play-piece { display:block; width:100%; height:100%; color:var(--color-ink); overflow:visible; pointer-events:none; }
/* Each viewport shows one transparent quadrant, keeping cutouts independent. */
.scene-piece,.hero-token > .play-piece,.board-trail .play-piece { overflow:hidden; }
/* The adjacent ticket crosses the atlas midpoint; trim the empty right edge of the brain's cell. */
.play-piece[data-game-piece="sanity"] { clip-path:inset(0 8% 0 0); }
/* A foreground frame hides the larger rear piece; its companion crosses the rim. */
.section > .scene-anchor { position:relative; isolation:isolate; }
.scene-anchor > :not(.tabletop-scene) { position:relative; z-index:1; }
.section:has(> .scene-anchor) { padding-top:54px; }
.tabletop-scene { position:absolute; width:282px; height:130px; top:-76px; right:36px; pointer-events:none; user-select:none; z-index:auto; }
.scene-piece { position:absolute; width:128px; height:128px; left:0; top:0; rotate:-9deg; z-index:0; --piece-delay:-2s; }
.piece-slot-3 { width:112px; height:112px; left:164px; top:4px; rotate:8deg; --piece-delay:-5s; }
.piece-front { width:96px; height:96px; left:92px; top:8px; rotate:10deg; z-index:2; --piece-delay:-8s; }
.scene-calendar,.scene-community,.scene-questions { left:42px; right:auto; }
.scene-welcome { right:30px; }
.scene-community { top:-80px; }
.scene-gallery { top:-76px; right:36px; }
.scene-arrival { right:44px; }
/* The frame and the pieces stay anchored; only individual objects gently rock. */
/* Piece-specific gestures with long rests: weighted pieces feel anchored. */
.tabletop-scene [data-game-piece="branch-card"],.tabletop-scene [data-game-piece="train-ticket"] { animation:tabletop-card-rock 10s ease-in-out infinite; transform-origin:50% 85%; }
.tabletop-scene [data-game-piece$="spirit"] { animation:tabletop-player-rock 12s ease-in-out infinite; transform-origin:50% 90%; }
.tabletop-scene [data-game-piece="settlement"],.tabletop-scene [data-game-piece="city"] { animation:tabletop-gentle-lean 14s ease-in-out infinite; transform-origin:50% 88%; }
.tabletop-scene [data-game-piece="terrain"],.tabletop-scene [data-game-piece="roads"],.tabletop-scene [data-game-piece="clue"],.tabletop-scene [data-game-piece="health"],.tabletop-scene [data-game-piece="sanity"] { animation:tabletop-gentle-lean 14s ease-in-out infinite; transform-origin:50% 88%; }
.tabletop-scene .scene-piece { animation-delay:var(--piece-delay); }
@keyframes tabletop-drift { 0%,12%,100% { translate:0 0; } 55% { translate:0 -2px; } 80% { translate:0 0; } }
@keyframes tabletop-card-rock { 0%,12%,100% { transform:rotate(0); } 47% { transform:rotate(-8deg); } 67% { transform:rotate(6deg); } 85% { transform:rotate(0); } }
@keyframes tabletop-player-rock { 0%,16%,100% { transform:rotate(0); } 54% { transform:rotate(-6deg); } 68% { transform:rotate(5deg); } 82% { transform:rotate(0); } }
@keyframes tabletop-die-tip { 0%,35%,100% { transform:translateY(0) rotate(0); } 48% { transform:translateY(-2px) rotate(-5deg); } 66% { transform:translateY(0) rotate(6deg); } 83% { transform:translateY(0) rotate(0); } }
@keyframes tabletop-gentle-lean { 0%,16%,100% { transform:rotate(0); } 58% { transform:rotate(6deg); } 80% { transform:rotate(0); } }
/* Existing poster and all hero variations share this illustration family. */
body[data-hero-design="3"] .hero-token { background:transparent; border:0; border-radius:0; box-shadow:none; width:86px; height:86px; }
body[data-hero-design="3"] .token-one { left:-43px; top:24px; transform:rotate(-12deg); }
body[data-hero-design="3"] .token-two { right:-43px; bottom:45px; transform:rotate(12deg); }
.hero-token > .play-piece:not(.hero-companion) { animation:tabletop-die-tip 12s ease-in-out infinite; animation-delay:-4s; transform-origin:50% 85%; }
.hero-token .hero-companion { position:absolute; width:42%; height:42%; left:76%; top:58%; rotate:12deg; animation:tabletop-player-rock 24s ease-in-out infinite; animation-delay:-10s; transform-origin:50% 90%; }
.hero-token.token-two > .play-piece:not(.hero-companion) { animation-name:tabletop-card-rock; animation-duration:19s; }
/* Only visible scenes animate; the page remains still without scripting. */
.tabletop-scene,.tabletop-scene .scene-piece,.hero-token > .play-piece { animation-play-state:paused; }
.tabletop-scene[data-scene-visible],.tabletop-scene[data-scene-visible] .scene-piece,
.hero-token[data-scene-visible] > .play-piece { animation-play-state:running; }
html[data-playful-paused] .tabletop-scene,html[data-playful-paused] .scene-piece,
html[data-playful-paused] .hero-token > .play-piece { animation-play-state:paused; }
@media(max-width:800px) {
 .tabletop-scene { width:240px; height:112px; top:-66px; right:24px; }
 .scene-piece { width:108px; height:108px; }
 .piece-front { width:82px; height:82px; left:76px; top:5px; }
 .scene-calendar,.scene-community,.scene-questions { left:26px; right:auto; }
 .piece-slot-3 { width:96px; height:96px; left:138px; top:4px; }
 .scene-gallery { top:-66px; right:24px; }
}
@media(max-width:480px) {
 .section:has(> .scene-anchor) { padding-top:48px; }
 .tabletop-scene { width:214px; height:98px; top:-60px; right:18px; }
 .scene-piece { width:98px; height:98px; }
 .piece-front { width:74px; height:74px; left:65px; top:5px; }
 .scene-calendar,.scene-community,.scene-questions { left:22px; right:auto; }
 .piece-slot-3 { width:88px; height:88px; left:126px; top:3px; }
 .scene-gallery { top:-60px; right:18px; }
 .hero-token .hero-companion { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .tabletop-scene,.tabletop-scene .scene-piece,.hero-token > .play-piece { animation:none; }
}

/* Two hero pieces: absolute edge cutouts, never participants in layout. */
.hero-photo-anchor { position:relative; isolation:isolate; min-width:0; height:100%; margin:0; padding:0; }
body[data-hero-option="10"] #hero .hero-photo-anchor > .hero-photo { position:relative; z-index:1; }
/* Both sizes anchor to the controls without adding layout height. */
body[data-hero-option="10"] #hero .hero-copy { position:relative; }
body[data-hero-option="10"] #hero .hero-cta-group { position:relative; }
#hero .hero-border-piece { position:absolute; width:115px; height:115px; margin:0; padding:0; }
#hero .hero-border-piece .scene-piece { width:100%; height:100%; left:0; top:0; }
#hero .hero-magnifier { left:-82px; right:auto; top:-60px; }
#hero .hero-magnifier .scene-piece { rotate:-12deg; --piece-delay:-3s; }
#hero .hero-hex { display:none; }
#hero .hero-hex-desktop { left:auto; right:12px; top:56px; }
#hero .hero-hex .scene-piece, #hero .hero-hex-desktop .scene-piece { rotate:12deg; --piece-delay:-8s; }
/* Controls remain above decoration even on especially narrow phones. */
body[data-hero-option="10"] #hero .hero-cta-group > a { position:relative; z-index:3; }
/* Section alternation continues through location and FAQ. */
.scene-arrival { left:42px; right:auto; }
.scene-questions { left:auto; right:36px; }
/* The invitation is a typographic poster, with no unexplained miniature board. */
.board-invitation .postcard-invitation { justify-content:center; }
@media(max-width:800px) {
 .scene-arrival { left:26px; right:auto; }
 .scene-questions { left:auto; right:24px; }
}
@media(max-width:650px) {
 .hero-photo-anchor { width:100%; height:auto; margin:0; padding:0; }
 body[data-hero-option="10"] #hero .hero-copy { position:relative; width:100%; }
 body[data-hero-option="10"] #hero .hero-cta-group { position:relative; width:100%; }
 /* The extra 22px reaches past copy/frame padding to the outer clipping border.
    Matched offsets expose 15% more of each viewport; the outside stays clipped. */
 #hero .hero-border-piece { --hero-piece-size:clamp(128px,34vw,160px); width:var(--hero-piece-size); height:var(--hero-piece-size); top:-24px; }
 #hero .hero-hex-desktop { display:none; }
 #hero .hero-magnifier { left:calc(var(--hero-piece-size) * -.402 - 22px); right:auto; top:-12px; }
 #hero .hero-hex { display:block; right:calc(var(--hero-piece-size) * -.402 - 22px); left:auto; top:-12px; }
}
@media(max-width:480px) {
 .scene-arrival { left:22px; right:auto; }
 .scene-questions { left:auto; right:18px; }
}