.scene-lights{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.scene-light{position:absolute;width:66px;height:80px;margin:-40px 0 0 -33px;border-radius:50%;background:radial-gradient(ellipse,#ffe3a985 0%,#ffc05b35 26%,#ffaa3210 48%,transparent 72%);opacity:.48;animation:candle-glow var(--duration) ease-in-out var(--delay) infinite alternate;transform-origin:50% 65%}
.scene-light.candle::after{content:'';position:absolute;left:30px;top:31px;width:6px;height:15px;border-radius:55% 45% 48% 48%;background:linear-gradient(#fffce8,#ffe9afaa,transparent);transform-origin:50% 100%;animation:flame-drift calc(var(--duration) * .7) ease-in-out var(--delay) infinite alternate}
.scene-light.chandelier{width:280px;height:180px;margin:-90px 0 0 -140px;background:radial-gradient(ellipse,#fff0bd50,#ffd48520 42%,transparent 72%);animation-duration:6s}
.scene-light.floor-lamp{width:120px;height:100px;margin:-50px 0 0 -60px;animation-duration:5.5s}
@keyframes candle-glow{0%{opacity:.30;transform:scale(.94)}35%{opacity:.6}70%{opacity:.42}100%{opacity:.76;transform:scale(1.08)}}
@keyframes flame-drift{0%{transform:rotate(-5deg) scaleY(.9);opacity:.65}55%{transform:rotate(2deg) scaleY(1.08);opacity:.9}100%{transform:rotate(6deg) scaleY(.98);opacity:.72}}
body.paused .scene-light,body.paused .scene-light::after,body.scene-hidden .scene-light,body.scene-hidden .scene-light::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.scene-light,.scene-light::after{animation:none!important}}
#game .floating-actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(142px,calc(env(safe-area-inset-bottom) + 114px));display:flex;align-items:center;gap:8px}
#game .floating-actions .write-action,#game .invitation-action{position:static;display:flex;align-items:center;justify-content:center;gap:8px;width:auto;height:46px;min-height:44px;padding:0 15px;border-radius:24px;font:500 12px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif}
#game .invitation-action{background:#24232bdd;border:1px solid #ffffff25;color:#eeeaf4;backdrop-filter:blur(16px);box-shadow:0 4px 18px #0002}
#game .invitation-action .ui-icon{width:18px;height:18px}
#game .invitation-action:focus-visible,#game .floating-actions .write-action:focus-visible{outline:2px solid #eee4ff;outline-offset:4px}
.living-scenery{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.scenery-part{position:absolute;display:block;background-image:url('/assets/grace-no-glasses.png');background-size:1024px 1536px;background-repeat:no-repeat;transform-origin:50% 100%;animation:character-breathe var(--duration) ease-in-out var(--delay) infinite}
.scenery-part.bride{animation-name:bride-breathe}
.scenery-part.flowers{transform-origin:50% 80%;animation-name:flower-sway}
@keyframes character-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.055,1.075)}}
@keyframes bride-breathe{0%,100%{transform:scale(1)}55%{transform:scale(1.05,1.065)}}
@keyframes flower-sway{0%,100%{transform:scale(1.055) rotate(-2deg)}50%{transform:scale(1.11) rotate(2deg)}}
.drifting-petal{position:absolute;display:block;width:13px;height:9px;border-radius:70% 20% 65% 35%;background:#e5b8cb;opacity:0;animation:petal-drift var(--duration) linear var(--delay) infinite}
@keyframes petal-drift{0%{opacity:0;transform:translate(0,-20px) rotate(0deg)}15%{opacity:.72}75%{opacity:.55}100%{opacity:0;transform:translate(var(--drift),170px) rotate(230deg)}}
/* A physical projection screen in the hall, on the artwork coordinate system. */
#stage .world-title{top:var(--screen-top,48px);left:50%;width:570px;height:244px;transform:translateX(-50%);padding:24px 16px 22px;background:radial-gradient(ellipse at 50% 20%,#fffcf3 0%,#eee7df 70%,#d7cbd0 100%);border:3px solid #b6a6a0;border-top:8px solid #363039;border-bottom:8px solid #363039;border-radius:3px;box-shadow:0 10px 30px #0006,0 0 38px #f4e6cf22;text-shadow:none;color:#49404c}
#stage .world-title::before{content:'';position:absolute;left:50%;bottom:100%;width:530px;height:120px;transform:translateX(-50%);clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(#fff6d725,#fff6d70a);pointer-events:none;animation:projection-glow 7s ease-in-out infinite alternate}
#stage .world-title::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#493b4b04 3px 4px);box-shadow:inset 0 0 35px #6f536b12}
#stage .world-title h1{font-size:48px;line-height:1.4;font-weight:600;letter-spacing:-1px;margin:0 0 8px}
#stage .world-title h1 i{font-size:27px;color:#a78c95}
#stage .world-title p{font-size:30px;line-height:1.5;letter-spacing:2px;margin:0 0 17px;color:#72616d}
#stage .world-title small{font-size:23px;color:#766b75;white-space:nowrap}
@keyframes projection-glow{from{opacity:.5}to{opacity:.85}}
body.paused .scenery-part,body.paused .drifting-petal,body.paused #stage .world-title::before,body.scene-hidden .scenery-part,body.scene-hidden .drifting-petal,body.scene-hidden #stage .world-title::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.scenery-part,.drifting-petal,#stage .world-title::before{animation:none!important}.drifting-petal{display:none}}
/* One navigation row owns participation; it never overlaps the floating actions. */
#game .dock .my-participation{position:relative;inset:auto;display:flex;flex-direction:column;transform:none;border:0;border-radius:15px;background:none;backdrop-filter:none;padding:8px 4px;gap:7px;font-size:11px;min-height:61px;color:var(--ui-muted)}
#game .dock #participation-dot{position:absolute;top:7px;right:calc(50% - 16px)}
#game .dock .my-participation>span:not(#participation-dot):not(#participation-badge){font:inherit;color:inherit;white-space:nowrap}
#game .dock #participation-badge{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#game .coach{bottom:200px;padding:10px 42px 10px 12px;width:auto;max-width:calc(100% - 32px);white-space:nowrap}
#game .coach>b,#game .coach>p{display:none}
#game .coach>div{gap:8px}
#game .coach>div>button{min-height:40px;padding:8px 10px}
#game #coach-dismiss{top:14px;right:5px}
@media(max-height:700px){
  #game .event-badge{display:none}
  #stage .world-title{height:176px;padding:13px 16px 12px}
  #stage .world-title h1{font-size:39px;margin:0 0 3px;line-height:1.25}
  #stage .world-title p{font-size:25px;line-height:1.3;margin:0 0 9px}
  #stage .world-title small{font-size:22px}
  #game .dock{bottom:max(16px,env(safe-area-inset-bottom));padding:4px;border-radius:18px}
  #game .dock button,#game .dock .my-participation{min-height:52px;gap:5px;font-size:10px;padding:6px 2px}
  #game .floating-actions{bottom:max(110px,calc(env(safe-area-inset-bottom) + 90px));right:12px;gap:7px}
  #game .floating-actions .write-action,#game .invitation-action{padding-inline:13px;height:44px;font-size:11px}
  #game .floating-actions .write-action b{font-size:12px}
  #game .game-hint{bottom:85px;font-size:9px}
  #game .coach{bottom:166px}
  #game .demo-label{display:none}
}
/* Invitation typography is distinct from controls; each menu uses the same label. */
#stage .world-title,#stage .world-title h1,#stage .world-title h1 i,#stage .world-title p,#stage .world-title small{font-family:'Wedding Serif','Noto Serif KR','Batang',serif;font-synthesis:none}
#stage .world-title{height:276px;padding:22px 16px 18px}
#stage .world-title h1{font-size:50px;font-weight:600;letter-spacing:3px;margin:0 0 8px}
#stage .world-title p{font-size:30px;font-weight:400;letter-spacing:4px;margin:0 0 15px}
#stage .world-title small{display:block;font-size:29px;font-weight:400;line-height:1.4;letter-spacing:.5px;color:#655863}
#stage .world-title time>span{display:block}
#game .dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
#game .dock button,#game .dock .my-participation{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-width:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:0}
#game .dock button .menu-label,#game .dock .my-participation>span.menu-label{display:block;font:inherit;color:inherit;white-space:nowrap;line-height:1.3;letter-spacing:0}
#game .dock .ui-icon{width:21px;height:21px;margin:0}
#game .dock .my-participation{color:var(--ui-muted)}
@media(max-height:700px){
  #stage .world-title{height:210px;padding:11px 14px 10px}
  #stage .world-title h1{font-size:44px;line-height:1.25;margin-bottom:4px;letter-spacing:2px}
  #stage .world-title p{font-size:27px;line-height:1.3;margin-bottom:9px;letter-spacing:3px}
  #stage .world-title small{font-size:28px;line-height:1.25;letter-spacing:0}
  #game .dock button,#game .dock .my-participation{font-size:10px;gap:5px}
}
/* Glass surfaces remain screen-space controls, separate from the illustrated hall. */
#game .plain-link,#game .icon-button,#game .event-badge,#game .dock,#game .coach,#game .invitation-action,#game .floating-actions .write-action{
  background:linear-gradient(145deg,#ffffff25,#ffffff05 45%,#b7a9d91c),#24212b75;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border:1px solid #ffffff38;box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff09,0 7px 24px #0b071d30;color:#f3effa;
}
#game .floating-actions .write-action{background:linear-gradient(145deg,#f3eaff65,#dec9fd23),#69577c85;border-color:#eee3ff75;color:#fff}
#game .dock button,#game .dock .my-participation{color:#eee8f6}
#game .dock button:active,#game .invitation-action:active,#game .floating-actions .write-action:active{background-color:#ffffff30;transform:scale(.97)}
#game .top-hud{justify-content:flex-end;pointer-events:none}
#game .top-hud>*{pointer-events:auto;min-height:44px}
#game .bottom-navigation{position:absolute;left:50%;transform:translateX(-50%);bottom:max(6px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:420px;display:flex;flex-direction:column;gap:4px}
#game .bottom-navigation .dock{position:relative;inset:auto;transform:none;margin:0;width:100%;max-width:none}
#game .bottom-navigation .demo-label{display:block;position:static;inset:auto;transform:none;margin:0;padding:0;text-align:center;font:400 9px/13px -apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;color:#d0c6dc;text-shadow:0 1px 3px #000;white-space:nowrap}
#game .game-hint{display:none}
#stage .world-title{height:318px}
#stage .world-title .screen-venue{font-family:'Wedding Serif','Batang',serif;font-size:25px;line-height:1.4;font-weight:400;color:#6a5a64;margin-top:9px;letter-spacing:.5px}
@media(max-height:700px){#stage .world-title{height:246px}#stage .world-title .screen-venue{font-size:25px;margin-top:6px;line-height:1.25}}
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#game img,#game svg,#game canvas,#game a{-webkit-user-drag:none;-webkit-touch-callout:none}
body:has(#game){overscroll-behavior:none}
dialog{overscroll-behavior:contain}
.drifting-petal{width:16px;height:11px;background:linear-gradient(120deg,#ffedf0,#e6a6c8);box-shadow:0 0 6px #ffe3ef30}
.drifting-petal:nth-child(3n){width:11px;height:8px;background:#f8dfb7}
@keyframes petal-drift{0%{opacity:0;transform:translate(0,-70px) rotate(0deg)}10%{opacity:.8}50%{transform:translate(calc(var(--drift) * -.4),170px) rotate(140deg);opacity:.65}85%{opacity:.7}100%{opacity:0;transform:translate(var(--drift),440px) rotate(340deg)}}
@keyframes character-breathe{0%,100%{transform:scale(1.01)}35%{transform:scale(1.07,1.12)}60%{transform:scale(1.03,1.045)}80%{transform:scale(1.05,1.08)}}
@keyframes bride-breathe{0%,100%{transform:scale(1.015)}45%{transform:scale(1.065,1.1)}72%{transform:scale(1.025,1.04)}}
@keyframes flower-sway{0%,100%{transform:scale(1.07) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}}
@media(prefers-reduced-transparency:reduce){#game .plain-link,#game .icon-button,#game .event-badge,#game .dock,#game .coach,#game .invitation-action,#game .floating-actions .write-action{background:#302936}}