/* Final layout rules: screen-space UI sizes never inherit the map's scale. */
html:has(#game),body:has(#game){height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto}
#game{position:relative;inset:auto;transform:none;width:100%;height:calc(var(--hall-height,600px) + 254px);min-height:100dvh;overflow:hidden;touch-action:pan-y pinch-zoom}
#game>.ambient{position:fixed;inset:0;pointer-events:none}
#stage{top:144px;left:50%;transform:translateX(-50%) scale(var(--scene-scale));transform-origin:50% 0}
#game .top-hud{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;left:auto;z-index:12}
#game .floating-actions{position:fixed;top:calc(max(12px,env(safe-area-inset-top)) + 54px);bottom:auto;right:12px;left:auto;display:flex;flex-direction:row;gap:7px;z-index:12;max-width:calc(100vw - 24px)}
#game .floating-actions>button{position:static;inset:auto;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;height:44px;width:auto;padding:0 clamp(9px,2.6vw,15px);border-radius:24px;white-space:nowrap;flex-shrink:1;font:500 clamp(11px,2.8vw,13px)/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif}
#game .floating-actions>button b,#game .floating-actions>button span{font:inherit;color:inherit;letter-spacing:0}
#game .floating-actions>button .ui-icon{width:18px;height:18px;flex-shrink:0}
#game .bottom-navigation{position:fixed;z-index:12;bottom:max(6px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:440px;gap:4px}
#game .bottom-navigation .dock{padding:5px;gap:2px;border-radius:22px;grid-template-columns:repeat(5,minmax(0,1fr))}
#game .bottom-navigation .dock>button{height:58px;min-height:58px;max-height:58px;width:100%;min-width:0;padding:6px 0;gap:5px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;font-size:clamp(10px,2.65vw,12px);font-weight:500;line-height:1.2;letter-spacing:0}
#game .bottom-navigation .dock>button>.menu-label{font:inherit!important;color:inherit!important;line-height:1.2!important;white-space:nowrap!important;letter-spacing:0!important;margin:0;padding:0}
#game .bottom-navigation .dock .ui-icon{width:21px;height:21px;flex-shrink:0;margin:0}
#game .bottom-navigation #participation-badge{display:none}
#game .bottom-navigation #participation-dot{width:4px;height:4px;top:7px;right:calc(50% - 15px)}
#game .bottom-navigation .demo-label{font-size:clamp(9px,2.3vw,11px);line-height:14px}
#game .coach{position:fixed;bottom:108px;z-index:11}
#stage .world-title{height:318px;padding:22px 16px 18px}
#stage .world-title h1{font-size:50px;line-height:1.4;letter-spacing:3px;margin-bottom:8px}
#stage .world-title p{font-size:30px;line-height:1.5;margin-bottom:15px}
#stage .world-title small{font-size:29px;line-height:1.4}
#stage .world-title .screen-venue{font-size:25px;line-height:1.4;margin-top:9px}
.smile-face{display:block;position:absolute;inset:0;background-image:url('/assets/grace-smiling.png');background-size:1024px 1536px;background-repeat:no-repeat;opacity:0;pointer-events:none}
.groom .smile-face{clip-path:polygon(18% 32%,82% 32%,86% 45%,72% 53%,31% 53%,14% 43%)}
.bride .smile-face{clip-path:polygon(17% 29%,58% 29%,63% 43%,51% 50%,22% 48%,14% 40%)}
.scenery-part.smiling .smile-face{opacity:1}
/* Keep expression changes readable, without stretching the faces. */
.scenery-part.groom,.scenery-part.bride{animation:none;transform:none}
.photo-stop{position:absolute;z-index:4;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:9px;width:200px;padding:12px 8px;border:0;background:none;color:#fff4df;cursor:pointer;touch-action:manipulation}
.photo-stop .photo-object{display:grid;place-items:center;width:100px;height:86px;border:3px solid #e8d5b6;background:linear-gradient(145deg,#776754,#2b252a);border-radius:14px;box-shadow:0 6px 0 #18151c,0 10px 18px #0008}
.photo-stop svg{width:61px;height:61px;fill:none;stroke:#fff0d7;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.photo-stop .stop-label{font:500 25px/1.4 -apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;white-space:nowrap;background:#211a27d9;border:1px solid #ffffff35;border-radius:14px;padding:5px 12px}
.photo-stop:focus-visible{outline:4px solid #f1d9ff;border-radius:20px}
.photo-stop:active .photo-object{transform:translateY(4px);box-shadow:0 2px 0 #18151c}
#photo-album{width:min(540px,calc(100% - 24px));max-height:calc(100dvh - 28px);overflow:auto;padding:22px;background:#28232ded;color:#f2ecf6;border:1px solid #ffffff35;border-radius:22px}
#photo-album .album-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#photo-album h2{margin:0;font-size:22px}
#photo-album button{min-width:44px;min-height:44px;border:1px solid #ffffff35;border-radius:12px;background:#ffffff12;color:inherit;font:inherit}
#photo-album .album-image{width:100%;height:min(58dvh,570px);object-fit:contain;display:block;margin:16px 0;border-radius:12px;background:#151219}
#photo-album .album-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
#photo-album .album-empty{padding:35px 12px;line-height:1.9;text-align:center;color:#d3c6dc}
#photo-album .album-status{font-size:13px;color:#d0c5db}
@media(max-width:350px){#game .floating-actions{gap:5px}#game .floating-actions>button{padding-inline:9px;font-size:11px}}

#photo-album .album-controls[hidden]{display:none}

#game .floating-actions>button{animation:none;transform:none}
/* Stacked actions and a short, unified participation flow. */
#game .floating-actions{flex-direction:column;align-items:stretch;gap:6px;width:116px}
#game .floating-actions>button{box-sizing:border-box;margin:0;min-height:40px;height:40px;font-size:11px}
#game .floating-actions .write-action{height:44px}
#stage{top:0}
#game{height:calc(var(--hall-height,600px) + 110px)}
#game .bottom-navigation{max-width:360px;flex-direction:column-reverse;gap:6px}
#game .bottom-navigation .dock{grid-template-columns:repeat(3,minmax(0,1fr))}
.optional-avatar{border:1px solid #ffffff25;border-radius:14px;padding:12px;margin:12px 0}
.optional-avatar summary{cursor:pointer;font-size:14px}
#game .coach{display:none}
.scenery-part.groom,.scenery-part.bride{animation:none!important;transform:none!important}
#stage .world-title{top:calc(60px / var(--scene-scale));width:780px;height:260px;padding:0;background:none;border:0;overflow:visible}
#stage .world-title .wedding-title-art{display:block;width:100%;height:100%;object-fit:contain;box-shadow:0 5px 24px #0007}
#stage .world-title::after{display:none}
#game .floating-actions{top:clamp(153px,calc(72px + 25.4vw),255px);width:clamp(108px,28vw,132px)}
#game .floating-actions>button{padding-inline:8px;gap:5px}
/* The hall itself is longer; the altar/characters are never stretched. */
#stage>.map{clip-path:inset(0 0 532px 0)}
.aisle-extension{position:absolute;inset:0;pointer-events:none}
.aisle-bay,.aisle-entrance{position:absolute;left:0;width:1024px;background-image:url('/assets/grace-no-glasses.png');background-size:1024px 1536px;background-repeat:no-repeat}
.aisle-bay{height:294px;background-position:0 -710px}
.aisle-entrance{top:2474px;height:532px;background-position:0 -1004px}
#stage .photo-stop{width:210px;height:230px;padding:0;gap:0;background:none;border:0;box-shadow:none;z-index:4}
.physical-prop{display:block;width:210px;height:210px;background-image:url('/assets/wedding-props.png');background-size:630px 210px;background-position:calc(var(--prop-index) * -210px) 0;background-repeat:no-repeat;filter:drop-shadow(0 5px 4px #0004)}
#stage .photo-stop .stop-label{position:absolute;bottom:-12px;opacity:0;font-size:23px;transition:opacity .15s;pointer-events:none}
#stage .photo-stop:focus-visible .stop-label,#stage .photo-stop:hover .stop-label{opacity:1}
#stage .photo-stop:focus-visible{outline:3px solid #fff0c7;outline-offset:0}
#stage .photo-stop:active .physical-prop{filter:brightness(1.2)}
/* Status is above the glass dock; nothing is placed below the dock. */
#game .bottom-navigation .demo-label{min-height:14px;overflow:hidden;text-overflow:ellipsis}
#game .bottom-navigation .dock{background:linear-gradient(135deg,#ffffff35,#ffffff08 44%,#c8b5e322),#2a23354d;border:1px solid #ffffff55;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #ffffff15,0 8px 26px #08050f38}
@media(prefers-reduced-transparency:reduce){#game .bottom-navigation .dock{background:#302936}}