.festive-experience.card-wall{height:100dvh;min-height:0;width:100%;padding:0;overflow:hidden}
/* Shade moving cards behind the fixed corner controls, leaving the centre clear. */
.card-wall::after{content:'';position:absolute;inset:0;z-index:10;pointer-events:none;--corner-width:350px;--corner-height:190px;background:radial-gradient(ellipse var(--corner-width) var(--corner-height) at top left,#19082ddd 0%,#19082dbb 45%,#19082d00 100%),radial-gradient(ellipse var(--corner-width) var(--corner-height) at top right,#19082ddd 0%,#19082dbb 45%,#19082d00 100%),radial-gradient(ellipse var(--corner-width) var(--corner-height) at bottom left,#19082dcc 0%,#19082d88 45%,#19082d00 100%),radial-gradient(ellipse var(--corner-width) var(--corner-height) at bottom right,#19082dcc 0%,#19082d88 45%,#19082d00 100%)}
@media(max-width:720px){.card-wall::after{--corner-width:230px;--corner-height:150px}}
.card-wall .tree-display{position:absolute;inset:-4% auto -4% 50%;width:min(900px,85vw);height:auto;margin:0;transform:translateX(-50%);opacity:1;filter:brightness(.8) saturate(.85);pointer-events:none;z-index:100}
.card-wall .dimensional-tree{inset:0;pointer-events:none}
.card-wall-viewport{position:absolute;inset:0;z-index:3;overflow:hidden;touch-action:none;cursor:grab;outline:0}
.card-wall-viewport.dragging{cursor:grabbing}
.card-wall-viewport:focus-visible{box-shadow:inset 0 0 0 2px #f1cb7670}
.card-wall-world{position:absolute;inset:0;user-select:none;pointer-events:none}
/* No stacking context here: individual cards pass either side of the tree at z=100. */
.card-wall-world{z-index:auto}
.postcard.card-wall-card{position:absolute;width:290px;height:200px;min-height:0;padding:14px 17px;border-radius:11px;transform:translate(-50%,-50%) perspective(900px) rotateY(var(--orbit-turn,0deg)) rotate(var(--card-tilt,0deg)) scale(var(--orbit-scale,1));transition:box-shadow .2s;touch-action:none;box-shadow:0 18px 32px #14032960,inset 0 1px 0 #fff9}
.card-wall-card:hover{box-shadow:0 22px 40px #14032980,inset 0 1px 0 #fff9}
.card-wall-card:focus-visible{outline:3px solid #f4d383;outline-offset:5px}
.card-wall-card .postcard-top{min-height:25px;flex-shrink:0;gap:7px}
.card-wall-card .postcard-logo{width:55px;padding:3px 5px;border-radius:3px}
.card-wall-card .postmark{right:78px;top:19px;width:33px;height:13px}
.card-wall-card .postcard-copy{flex:1;min-height:0;margin:0;padding:9px 2px 7px}
.postcard.card-wall-card .recipient{font-size:26px;line-height:1.12;margin-bottom:7px}
.postcard.card-wall-card .message{font-size:11px;line-height:1.35;-webkit-line-clamp:4}
.card-wall-card .postcard-signature{width:70%;min-width:0;max-width:80%;flex-shrink:0;padding:6px 9px;gap:3px;margin-top:0;border-radius:3px;font-size:7px}
.card-wall-card .postcard-signature span:last-child{font-size:6px}
.card-wall-card .postcard-photo{width:48px;height:55px;border-width:3px;margin:1px 9px 4px 0}
.postcard.card-wall-card .with-photo .recipient{font-size:21px}
.postcard.card-wall-card .with-photo .message{font-size:10px}
.card-wall-actions{position:absolute;right:32px;bottom:24px;z-index:20}
.card-wall-actions .button{min-height:54px;font-size:12px;padding:14px 20px;letter-spacing:1.4px}
@media(max-width:720px){
 .card-wall .tree-display{width:calc(100% + 100px);opacity:1}
 .postcard.card-wall-card{width:260px;height:calc(260px / 1.45);padding:12px 15px}
 .card-wall-card .postcard-top{min-height:23px}.card-wall-card .postcard-logo{width:50px}
 .card-wall-card .postmark{right:70px;top:17px;width:30px}
 .postcard.card-wall-card .recipient{font-size:24px;margin-bottom:6px}
 .postcard.card-wall-card .message{font-size:10px}
 .card-wall-card .postcard-copy{padding:7px 1px 6px}
 .card-wall-card .postcard-signature{font-size:6px;padding:5px 8px;gap:2px}
 .card-wall-card .postcard-signature span:last-child{font-size:5.5px}
 .card-wall-actions{right:16px;bottom:18px}.card-wall-actions .button{min-height:48px;width:145px;font-size:10px;padding:10px 12px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){.card-wall-card{transition:none}}