/* WAKU WAKU · sticker play */
.story-section.has-play{grid-template-columns:minmax(260px,.62fr) 1.38fr;column-gap:4vw;padding:80px 6vw 70px 9vw;align-items:center}
.story-section.has-play .story-content{max-width:420px}
.story-section.has-play .story-content h2{font-size:clamp(52px,6.2vw,96px)}
#waku-play-mount{position:relative;z-index:1;min-width:0}

.wp{--wp-paper:#f6ede1;--wp-line:rgba(91,17,25,.14);color:var(--wine);font-family:var(--sans)}
.wp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
.wp-try{margin:0 0 4px;color:var(--cream);font:500 13px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.wp-try span{display:inline-block;margin-left:6px;animation:wpNudge 1.8s ease-in-out infinite}
.wp-sample{display:flex;align-items:center;gap:14px;padding:8px 18px 8px 8px;border:0;border-radius:10px;color:var(--wine);background:var(--wp-paper);box-shadow:0 10px 24px #2007094d;cursor:pointer;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:transform .2s}
.wp-sample:hover{transform:translateY(-2px) rotate(-1deg)}
.wp-sample-img{width:84px;height:auto;display:block}
.wp-sample-label i{font-style:normal;margin-left:6px}

.wp-panel{position:relative;display:grid;grid-template-columns:1fr 1.06fr;border-radius:14px;background:var(--wp-paper);box-shadow:0 24px 50px #2007095c,inset 0 0 0 1px #ffffff80;overflow:hidden}
.wp-col{position:relative;padding:22px 22px 24px;min-width:0}
.wp-col-board{border-right:1px solid var(--wp-line)}
.wp-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wp-label{margin:0 0 16px;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.wp-col-head .wp-label{margin:0}
.wp-tools{display:flex;align-items:center;gap:8px}
.wp-tool{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;color:var(--wine);background:transparent;cursor:pointer;transition:background .2s,opacity .2s}
.wp-tool:hover:not(:disabled){background:#5b11191a}
.wp-tool:disabled{opacity:.3;cursor:default}
.wp-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wp-tool-sep{width:1px;height:18px;background:var(--wp-line)}

.wp-board{position:relative;width:100%;border-radius:8px;overflow:hidden;box-shadow:0 6px 16px #3b0a1024,0 0 0 1px #3b0a100f}
.wp-board-bg,.wp-room-bg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.wp-slot{position:absolute;display:block;cursor:pointer;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 2px #3b0a1033);transition:transform .18s ease,filter .18s ease,opacity .15s}
.wp-slot:hover{transform:translateY(-3px) rotate(-1.5deg);filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 8px 6px #3b0a1033)}
.wp-slot.is-gone{opacity:0;pointer-events:none}

.wp-room-box{display:grid;place-items:center;height:calc(100% - 46px);margin-top:16px}
.wp-room{position:relative;width:100%;max-width:440px}
.wp-piece{position:absolute;display:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.wp-piece.is-on{display:block}
.wp-piece.is-free{pointer-events:auto;cursor:pointer;filter:drop-shadow(0 4px 3px #3b0a1033)}
.wp-piece.is-free:hover{transform:translateY(-3px)}
.wp-piece.is-pop{animation:wpPop .32s ease-out}
.wp-ghost{position:absolute;display:none;opacity:.38;pointer-events:none;z-index:60;filter:brightness(1.6) saturate(.4);animation:wpGhost 1s ease-in-out infinite alternate}

.wp-hint{margin:18px 0 0;text-align:center;color:#ecd2c7;font:13px var(--mono);letter-spacing:.04em}

.wp-done{position:absolute;z-index:90;left:50%;top:62px;display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;border-radius:999px;color:var(--cream);background:var(--wine);font:12px var(--mono);letter-spacing:.05em;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-10px);transition:opacity .35s .25s,transform .35s .25s}
.wp-done p{margin:0}
.wp-done-star{color:#e15150;font-size:16px}
.wp-again{padding:5px 10px;border:0;border-radius:999px;color:var(--wine);background:var(--cream);cursor:pointer;font:inherit}
.is-complete .wp-done{opacity:1;pointer-events:auto;transform:translate(-50%,0)}

/* floating layer */
.wp-layer{position:fixed;inset:0;z-index:9999;pointer-events:none}
.wp-layer>*{position:absolute;left:0;top:0;pointer-events:none}
.wp-held,.wp-fly{display:none;transform-origin:0 0;will-change:transform;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 6px 6px #20070933)}
.wp-fly{display:block}
.wp-held-shadow{display:none;height:14px;border-radius:50%;background:#20070940;filter:blur(5px)}
.wp-tweezers{display:none;z-index:3;transform-origin:0 0;will-change:transform;filter:drop-shadow(2px 5px 4px #2007094d)}
.wp-tweezers.is-squeeze{animation:wpSqueeze .22s ease-out}
.wp-tip{display:none;z-index:2;padding:6px 9px;border-radius:5px;color:var(--wine);background:#fffaf2;box-shadow:0 4px 10px #2007092e;font:11px var(--mono);white-space:nowrap}
.wp-tip.is-near{color:var(--cream);background:var(--red)}

@media (pointer:fine){
  .wp-panel,.wp-panel *{cursor:none!important}
  html.wp-holding,html.wp-holding *{cursor:none!important}
}

.wp-burst{position:absolute;inset:0;z-index:80;pointer-events:none}
.wp-burst span{position:absolute;left:50%;top:50%;color:var(--red);font-size:20px;opacity:0;animation:wpBurst 1.1s ease-out forwards}
.wp-burst span:nth-child(2n){color:#2f6b45;font-size:15px}
.wp-burst span:nth-child(3n){color:#d49b3b}

.wp-lightbox{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:5vw;background:#200709b3;opacity:0;pointer-events:none;transition:opacity .25s;cursor:zoom-out}
.wp-lightbox.is-open{opacity:1;pointer-events:auto}
.wp-lightbox-card{max-width:min(560px,90vw);padding:26px 26px 16px;border-radius:14px;background:#f6ede1;text-align:center;transform:scale(.96);transition:transform .25s}
.wp-lightbox.is-open .wp-lightbox-card{transform:none}
.wp-lightbox-card img{display:block;width:100%;height:auto}
.wp-lightbox-card p{margin:12px 0 0;color:var(--wine);font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase}

@keyframes wpNudge{0%,100%{transform:none}50%{transform:translateY(3px)}}
@keyframes wpPop{0%{transform:scale(1.06)}60%{transform:scale(.98)}100%{transform:none}}
@keyframes wpGhost{from{opacity:.22}to{opacity:.45}}
@keyframes wpSqueeze{0%{rotate:0deg;scale:1}40%{rotate:-6deg;scale:.94}100%{rotate:0deg;scale:1}}
@keyframes wpBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)*3),calc(-50% + var(--ty)*3)) scale(1)}}

@media (max-width:1100px){
  .story-section.has-play{grid-template-columns:1fr;padding:70px 7vw;row-gap:50px}
  .story-section.has-play .story-content{max-width:540px}
}
@media (max-width:620px){
  .story-section.has-play{padding:60px 5vw}
  .wp-top{align-items:center}
  .wp-try{font-size:11px}
  .wp-sample{padding:6px 12px 6px 6px;font-size:10px;gap:8px}
  .wp-sample-img{width:58px}
  .wp-panel{grid-template-columns:1fr}
  .wp-col{padding:16px}
  .wp-col-board{border-right:0;border-bottom:1px solid var(--wp-line)}
  .wp-room-box{height:auto}
  .wp-room{max-width:340px}
  .wp-hint{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .wp-try span,.wp-ghost{animation:none}
}