/* 3D pop-up card: a horizontal fold. The lower half is the floor, the upper half stands up as the back wall,
   and die-cut layers hinged on the floor rise with it. Everything is driven by --o (0 closed, 1 open) from popup.js. */
.pc{overflow-x:clip;--paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .3  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");container-type:inline-size;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;user-select:none;-webkit-user-select:none}
.pc-stage{--w:min(560px,72cqw);margin-bottom:calc(var(--d)*.24);--d:calc(var(--w)/1.45);position:relative;width:var(--w);height:calc(var(--d)*1.78);perspective:calc(var(--w)*2.6);perspective-origin:50% 40%;cursor:grab;touch-action:none}
.pc-stage.dragging{cursor:grabbing}
.pc-tilt{position:absolute;left:0;top:calc(var(--d)*.06);width:var(--w);height:calc(var(--d)*2);transform-style:preserve-3d;transform-origin:50% 50%;
  transform:rotateX(var(--view,50deg)) rotateY(var(--yaw,0deg))}
.pc-floor,.pc-panel{position:absolute;left:0;width:var(--w);height:var(--d);transform-style:preserve-3d}
.pc-floor{top:var(--d);background:var(--paper),#fffaf0;background-size:160px,auto;border-radius:0 0 12px 12px;box-shadow:0 calc(var(--d)*.04) calc(var(--d)*.08) rgba(29,42,68,.28)}
.pc-floor::before{content:"";position:absolute;inset:4%;border:2px dashed rgba(29,42,68,.18);border-radius:8px}
.pc-floor::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(rgba(29,42,68,calc(var(--o,0)*.28)),transparent 38%)}
.pc-edge{position:absolute;inset:0;border:calc(var(--w)*.012) solid var(--pc-edge,#f4b829);border-radius:inherit;pointer-events:none}
.pc-msg{position:absolute;left:8%;right:8%;bottom:7%;text-align:center;font-family:var(--f-hand,"Caveat",cursive);font-size:calc(var(--w)*.046);line-height:1.1;color:#1d2a44;transform:translateZ(.5px)}
.pc-panel{top:0;transform-origin:50% 100%;transform:rotateX(calc(-180deg + var(--o,0)*90deg))}
.pc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px 12px 0 0;overflow:hidden}
.pc-face::after{content:"";position:absolute;inset:0;background:var(--paper);background-size:160px;opacity:.5;mix-blend-mode:multiply;pointer-events:none}
.pc-inside{background:#dce8f2 center/cover no-repeat;border:calc(var(--w)*.012) solid var(--pc-edge,#f4b829);border-bottom:0}
.pc-bunting{position:absolute;left:2%;right:2%;top:3%;height:26%}.pc-bunting svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 2px rgba(29,42,68,.3))}
.pc-inside.flat{background-size:cover;background-position:center}
.pc-outside{transform:rotateX(180deg) translateZ(4px);border-radius:0 0 12px 12px;background:#b9a7e8 center/cover no-repeat;
  box-shadow:inset 0 0 0 calc(var(--w)*.012) var(--pc-edge,#f4b829);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;text-align:center}
.pc-title{position:absolute;left:14%;right:14%;top:44.5%;font-family:var(--f-display,"Young Serif",Georgia,serif);font-size:calc(var(--w)*.06);line-height:1.2;color:#1d2a44;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-sub{position:absolute;bottom:7%;font:800 calc(var(--w)*.026)/1 var(--f-body,system-ui);letter-spacing:.06em;text-transform:uppercase;background:#1d2a44;color:#fff;padding:1.6% 4%;border-radius:999px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* die-cut layers: hinged at their bottom edge on the floor, lying face-down at --a:-180deg, upright at -90deg */
.pc-layer{position:absolute;transform-origin:50% 100%;transform-style:preserve-3d;transform:translateZ(var(--lz,1px)) rotateX(var(--a,-180deg));pointer-events:none}
.pc-layer>*{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc-layer img,.pc-layer svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block}
.pc-layer img{filter:drop-shadow(0 calc(var(--w)*.012) calc(var(--w)*.012) rgba(29,42,68,.28))}
.pc-banner{position:absolute;left:0;right:0;bottom:0;margin:0 auto;width:100%;background:#f4b829;border:3px solid #1d2a44;color:#1d2a44;text-align:center;
  font-family:var(--f-display,"Young Serif",Georgia,serif);font-size:calc(var(--w)*.058);line-height:1.15;padding:3.5% 2%;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%)}

.pc-bubble{position:absolute;left:50%;top:0;transform:translate(-50%,-10%);z-index:10;background:#fffaf0;color:#1d2a44;border:3px solid #1d2a44;border-radius:14px;padding:8px 14px;
  font-family:var(--f-hand,"Caveat",cursive);font-size:clamp(20px,calc(var(--w)*.05),30px);line-height:1.1;text-align:center;max-width:90%;box-shadow:0 5px 0 #1d2a44;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.pc-bubble b{display:block;font:800 11px var(--f-body,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#d6457f}
.pc-bubble.show{opacity:1;transform:translate(-50%,0)}
.pc>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:9}
.pc-controls,.pc-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pc-chip{font:700 14px var(--f-body,system-ui);padding:7px 15px;border-radius:999px;border:2px solid #1d2a44;background:#fffaf0;color:#1d2a44;cursor:pointer}
.pc-chip[aria-pressed="true"]{background:#f4b829}
.pc-hint{min-height:2.6em;font:600 13px var(--f-body,system-ui);color:var(--muted,#53627c);margin:0;text-align:center}