#mirror-room{position:relative;aspect-ratio:16/9;max-width:960px;margin:auto;overflow:hidden;background:#090807}
#mirror-world{position:absolute;width:100%;left:0;aspect-ratio:16/9;top:50%;transform:translateY(-50%);transition:width 2.5s ease-in-out,left 2.5s ease-in-out,top 2.5s ease-in-out;background:center/100% 100% no-repeat;--outside-dim:0}
#mirror-world::before{content:'';position:absolute;inset:0;background:#000;opacity:var(--outside-dim);z-index:1;pointer-events:none}
#mirror-room #player{width:12%;height:34%;z-index:4}
#mirror-shadow{position:absolute;bottom:22%;height:54%;width:22%;object-fit:contain;object-position:center bottom;transform:translateX(-50%);transform-origin:50% 100%;opacity:.96;pointer-events:none;z-index:3;filter:drop-shadow(0 1px 1px #ad98711c)}
#mirror-room.mirror-focused #mirror-world{width:130%;left:-28.8%;top:43.4%}
#mirror-glass{position:absolute;left:82%;top:17%;width:10%;height:53%;overflow:hidden;clip-path:polygon(0 10%,10% 4%,30% 0,60% 0,85% 5%,100% 10%,100% 100%,0 96%);pointer-events:none;z-index:2;--reveal:0;--sheen:0;--gesture:0;--contact:0;--contact-scale:0;--mirror-white:0}
#mirror-glass::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(110deg,#d8c69c14,transparent 45%,#b5aa9610);opacity:0;transition:opacity .6s}
#mirror-glass.reflecting::after{opacity:1}
.reflection-pair{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.reflecting .reflection-pair{visibility:visible}
.mirror-role{position:absolute;inset:0;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}
.player-before,.player-after{z-index:2}
.shadow-before,.shadow-after{z-index:1}
.reflection-pair img{position:absolute;object-fit:contain;object-position:center bottom;transform:translateX(-50%);pointer-events:none}
#reflection-shadow,#reflection-luminous,#reflection-touch{left:35%;bottom:5%;width:94%;height:85%;z-index:0}
#reflection-player{left:70%;bottom:3%;width:66%;height:62%;z-index:1;filter:grayscale(1) brightness(.9)}
#reflection-boy{left:70%;bottom:6%;width:70%;height:44%;z-index:1;filter:drop-shadow(0 0 2px #f8dfad44)}
#reflection-luminous,#reflection-touch{transform-origin:50% 90%;filter:drop-shadow(0 0 3px #fbe9bd55)}
#reflection-luminous{opacity:1;transform:translateX(-50%) rotate(calc(var(--gesture) * 1.3deg))}
#reflection-touch{opacity:var(--gesture)}
.mirror-inner-light{position:absolute;inset:0;background:radial-gradient(ellipse at 43% 63%,#f5daa944,#dbbe8917 55%,transparent 90%);opacity:var(--reveal);z-index:-1}
.mirror-sheen{position:absolute;inset:-10% -40%;background:linear-gradient(180deg,transparent calc(var(--sheen-y) - 15%),#fff4d594 var(--sheen-y),transparent calc(var(--sheen-y) + 15%));opacity:var(--sheen);z-index:5;transform:rotate(-7deg);pointer-events:none}
.mirror-contact{position:absolute;left:65%;top:65%;width:48%;aspect-ratio:1;border:1px solid #fff6da55;border-radius:47% 53% 48% 52%;transform:translate(-50%,-50%) scale(var(--contact-scale));filter:blur(.6px);opacity:var(--contact);z-index:6;box-shadow:0 0 8px #ffefd766,inset 0 0 8px #ffefd722}
.mirror-bloom{position:absolute;inset:0;background:transparent;z-index:7}
#mirror-glass.reflecting{background:rgba(22,21,20,.12)}
#mirror-white{position:fixed;inset:0;background:transparent;z-index:9999;pointer-events:none}
@media(max-width:650px){#mirror-room{aspect-ratio:1.2}#mirror-room.mirror-focused #mirror-world{width:160%;left:-60%;top:44%}}
@media(prefers-reduced-motion:reduce){#mirror-world{transition:none}.mirror-sheen,.mirror-contact{display:none}}
/* Contact shadows, charcoal grain and reflected light; original assets unchanged. */
#mirror-shadow{filter:url(#presence-grain) contrast(1.02) drop-shadow(1px 2px 2px #0009)}
.presence-foot{position:absolute;width:11%;height:2.4%;border-radius:50%;background:radial-gradient(ellipse,#000c,transparent 72%);transform:translate(-50%,35%);filter:blur(2px);z-index:2;pointer-events:none}
.presence-cast{position:absolute;width:22%;height:54%;object-fit:contain;object-position:center bottom;transform-origin:50% 100%;transform:translateX(-50%) skewX(-38deg) scaleY(.18);filter:brightness(0) blur(3px);opacity:.24;z-index:2;pointer-events:none}
#reflection-boy{filter:brightness(1.12) saturate(.8) drop-shadow(0 1px 1px #342c2180) drop-shadow(0 0 4px #fff0c994)}
#reflection-luminous{filter:brightness(1.06) drop-shadow(0 0 5px #fff1ce77)}
.player-after::after{content:'';position:absolute;left:53%;bottom:4%;width:36%;height:4%;background:radial-gradient(ellipse,#edddb280,transparent 75%);filter:blur(2px);opacity:var(--reveal)}
.mirror-inner-light{opacity:calc(var(--reveal) * .8 + var(--glimmer,0) * .2);background:radial-gradient(ellipse at 61% 69%,#f9e4b94a,#dbbe8920 55%,transparent 90%)}
#mirror-glass.reflecting::after{background:linear-gradient(115deg,transparent 20%,#fff5d520 38%,transparent 49%,#fff1c917 70%,transparent 80%);opacity:calc(.45 + var(--glimmer,0))}
.mirror-invitation{position:absolute;left:0;width:100%;margin:0;text-align:center;font:italic clamp(11px,1.12vw,15px)/1.3 Georgia,serif;color:#f4e9ce;text-shadow:0 0 6px #f0db9e66;opacity:0;transition:opacity .5s ease;z-index:6;pointer-events:none}
.mirror-invitation.visible{opacity:.9}
.mirror-invitation{box-sizing:border-box;padding:0 4%;top:10%}
.mirror-invitation-line{display:block;white-space:nowrap}
.mirror-invitation-character{display:inline-block;transform:translateY(var(--curve-y)) rotate(var(--curve-r));transform-origin:50% 100%}
@media(max-width:650px){.mirror-invitation{top:14%;padding:0 1%;font-size:7px;line-height:1.2}}