@charset "UTF-8";
:root {
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px;
  --font-large: 28px; --font-medium: 20px; --font-small: 14px;
  --color-background: #fff0e7; --color-text: #39233f; --color-accent: #452260; --color-emphasis: #e96086;
  --color-card: #fffaf5; --color-input: rgba(255, 255, 255, .92); --color-border: #d8c2d2; --color-input-border: #cdb9cc; --color-shadow: rgba(73, 35, 63, .18);
  --color-cake-plate: #4a251f; --color-cake-side: #9d68c1; --color-cake-cream: #fff0bd; --color-cake-stripe: #e5a651; --color-cake-dots: #d7788d;
  --color-dark-background: #190d1d; --color-dark-text: #fff4db; --color-dark-flame: #ffd36b; --color-dark-emphasis: #ff8cac;
  --stage-wine: #350d25; --stage-wine-deep: #160916; --stage-gold: #efbb62; --stage-curtain: #5b194d; --stage-curtain-dark: #2c0b31; --radius: 18px;
  color-scheme: light; font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", ui-rounded, system-ui, sans-serif; color: var(--color-text); background: var(--color-background); font-synthesis: none;
}
* { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--color-background); }
body::before { position: fixed; z-index: -2; inset: 0; content: ""; background: radial-gradient(circle at 50% 4%, rgba(255,255,255,.95), transparent 28%), radial-gradient(circle at 9% 36%, rgba(239,167,183,.18) 0 2px, transparent 3px), radial-gradient(circle at 86% 23%, rgba(211,161,183,.17) 0 2px, transparent 3px), linear-gradient(160deg, #fff7ec 0%, #ffe7dc 52%, #f7d9d2 100%); background-size: auto, 74px 74px, 95px 95px, auto; }
button, input { font: inherit; -webkit-tap-highlight-color: transparent; } button { cursor: pointer; touch-action: manipulation; } button:disabled { cursor: default; } button:focus-visible, input:focus-visible { outline: 3px solid var(--color-emphasis); outline-offset: 3px; } [hidden] { display: none !important; }

.party { position: relative; width: min(100%, 430px); min-height: 100svh; margin: 0 auto; padding: max(78px, calc(env(safe-area-inset-top) + 52px)) var(--space-3) max(30px, env(safe-area-inset-bottom)); overflow: hidden; isolation: isolate; }
.party::before, .party::after { position: absolute; z-index: -1; top: 0; width: 38%; height: 176px; content: ""; opacity: .92; background: repeating-linear-gradient(79deg, rgba(255,255,255,.16) 0 2px, transparent 3px 14px), linear-gradient(115deg, #4e173f, #9b4973 58%, #47143b); box-shadow: inset -12px 0 22px rgba(41, 8, 39, .25), 0 16px 28px rgba(99, 50, 76, .14); }
.party::before { left: -16%; border-radius: 0 0 90% 10%; transform: skewY(-7deg); }.party::after { right: -16%; border-radius: 0 0 10% 90%; transform: skewY(7deg) scaleX(-1); }
.brand { position: relative; z-index: 1; margin: 0 0 30px; text-align: left; }.eyebrow { margin: 0 0 19px; color: #9f6b84; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.brand h1 { margin: 0; color: #2d1a34; font-size: clamp(31px, 8.5vw, 39px); font-weight: 900; letter-spacing: .025em; line-height: 1.38; }.brand h1 span { color: var(--color-text); }.brand-copy { margin: var(--space-3) 0 0; color: #78596b; font-size: 14px; font-weight: 600; line-height: 1.8; }
.message-card { position: relative; z-index: 1; } #setup { display: grid; gap: 20px; }.field { display: grid; gap: var(--space-1); }.field label { display: flex; justify-content: space-between; gap: var(--space-1); color: #664d5e; font-size: 13px; font-weight: 800; line-height: 1.5; }.field label span { color: #96778b; font-weight: 600; }
input { width: 100%; height: 50px; min-width: 0; padding: 0 15px; border: 1px solid var(--color-input-border); border-radius: 13px; background: var(--color-input); box-shadow: 0 5px 14px rgba(140, 92, 110, .09); color: var(--color-text); font-size: 16px; } input::placeholder { color: #b9a4b0; }
.number-field { position: relative; width: 48%; min-width: 148px; }.number-field input { padding-right: 40px; }.number-field > span { position: absolute; top: 14px; right: 15px; color: #775a70; font-size: 14px; pointer-events: none; }
.primary, .secondary { width: 100%; min-height: 50px; padding: 12px var(--space-2); border: 0; border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: .025em; line-height: 1.5; }.primary { background: var(--color-accent); box-shadow: 0 9px 16px rgba(62, 27, 78, .23); color: #fff9ed; }.secondary { background: #fff3d6; box-shadow: 0 7px 16px rgba(35, 10, 30, .26); color: var(--color-text); }
.sound-hint { margin: -8px 0 0; color: #8a6d7d; font-size: 12px; font-weight: 700; text-align: center; }.entry-footer { position: relative; z-index: 1; margin: 48px 0 0; color: #876a79; font-size: 12px; font-weight: 600; line-height: 1.75; text-align: center; }
.started { display: grid; min-height: 180px; place-items: center; }.card-copy { display: grid; gap: var(--space-2); max-width: 100%; text-align: center; }.card-heading p { margin: 0 0 var(--space-1); font-size: var(--font-small); line-height: 1.5; }.card-heading h2 { margin: 0; font-size: var(--font-medium); font-weight: 900; line-height: 1.45; }.message-slot { min-height: calc(var(--font-small) * 4.8); max-height: calc(var(--font-small) * 4.8); margin: 0; overflow: hidden; overflow-wrap: anywhere; font-size: var(--font-small); line-height: 1.6; text-wrap: pretty; }
.status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }.status.notice { z-index: 20; right: var(--space-3); bottom: calc(env(safe-area-inset-bottom) + var(--space-3)); left: var(--space-3); width: auto; height: auto; clip-path: none; margin: 0; padding: 9px 12px; border-radius: 12px; background: rgba(255,244,219,.95); box-shadow: 0 6px 18px rgba(11,0,12,.35); color: var(--color-text); font-size: 13px; font-weight: 700; line-height: 1.55; text-align: center; }

.stage { display: none; } body[data-scene="song"], body[data-scene="blackout"], body[data-scene="celebrate"] { background: var(--color-dark-background); }
body[data-scene="song"]::before, body[data-scene="blackout"]::before, body[data-scene="celebrate"]::before { background: radial-gradient(ellipse at 50% 12%, rgba(247,189,103,.35), transparent 30%), radial-gradient(ellipse at 50% 72%, rgba(142,39,71,.27), transparent 48%), linear-gradient(180deg, #35102a 0%, var(--stage-wine-deep) 76%); }
.party:not([data-scene="entry"]) { width: min(100%, 430px); min-height: 100svh; padding: 0; }.party:not([data-scene="entry"]) .brand, .party:not([data-scene="entry"]) .message-card, .party:not([data-scene="entry"]) .entry-footer { display: none; }
.party:not([data-scene="entry"])::before, .party:not([data-scene="entry"])::after { z-index: 10; top: 0; width: 29%; height: 128px; opacity: .84; background: repeating-linear-gradient(79deg, rgba(255,255,255,.14) 0 2px, transparent 3px 13px), linear-gradient(110deg, #290725, #78204c 60%, #2f092d); box-shadow: inset -10px 0 20px rgba(0,0,0,.38); }.party:not([data-scene="entry"])::before { left: -13%; }.party:not([data-scene="entry"])::after { right: -13%; }
.party:not([data-scene="entry"]) .stage { position: relative; display: block; height: 100svh; min-height: 680px; overflow: hidden; }.party:not([data-scene="entry"]) .stage::before { position: absolute; z-index: 0; top: 0; right: 17%; left: 17%; height: 69%; content: ""; opacity: .7; background: radial-gradient(ellipse at 50% 7%, rgba(255,236,182,.92) 0, rgba(255,199,100,.34) 22%, transparent 62%); filter: blur(1px); pointer-events: none; }.party:not([data-scene="entry"]) .stage::after { position: absolute; z-index: 0; right: -20%; bottom: -70px; left: -20%; height: 400px; content: ""; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 10%, rgba(222,147,70,.35), transparent 58%), repeating-linear-gradient(0deg, rgba(255,218,151,.07) 0 2px, transparent 3px 16px), #251021; box-shadow: inset 0 20px 35px rgba(0,0,0,.35); }
.scene-copy { position: absolute; z-index: 6; top: max(76px, calc(env(safe-area-inset-top) + 38px)); right: var(--space-3); left: var(--space-3); color: var(--color-dark-text); text-align: center; }.song-recipient { margin: 0 0 11px; color: #fff1d2; font-size: 16px; font-weight: 800; letter-spacing: .08em; }.song-lyrics { max-width: 350px; margin: 0 auto; color: var(--color-dark-text); font-family: "Snell Roundhand", "Apple Chancery", "Zapfino", cursive, "Hiragino Mincho ProN", "Yu Mincho"; font-size: clamp(29px, 7.7vw, 37px); font-weight: 700; font-style: italic; letter-spacing: .09em; line-height: 1.25; white-space: pre-line; text-shadow: 0 3px 12px rgba(255,195,111,.4), 0 0 18px rgba(255,149,192,.22); }.blackout-copy { color: var(--color-dark-text); font-size: var(--font-small); font-weight: 800; line-height: 1.5; }
.celebration-copy { max-height: 170px; margin: 0 auto; padding: 0 var(--space-2); overflow-x: hidden; overflow-y: auto; color: var(--color-dark-text); text-shadow: 0 3px 12px rgba(0,0,0,.35); scrollbar-width: thin; }.celebration-copy h2 { max-height: 2.4em; margin: 0 0 var(--space-1); overflow: hidden; font-size: clamp(23px, 6.4vw, 30px); font-weight: 900; letter-spacing: .04em; line-break: strict; line-height: 1.2; overflow-wrap: break-word; text-wrap: pretty; word-break: normal; }.celebration-copy > p { margin: 0; font-size: clamp(20px, 5.8vw, 26px); font-weight: 900; line-break: strict; line-height: 1.35; overflow-wrap: break-word; text-wrap: pretty; word-break: normal; }.party.long-celebration-message .celebration-copy h2 { font-size: 18px; }.party.long-celebration-message .celebration-copy > p { font-size: 20px; }.celebration-message.celebration-pop { animation: celebration-pop 520ms cubic-bezier(.19,.9,.27,1.15) both; } @keyframes celebration-pop { 0% { opacity: 0; transform: scale(.65); } 58% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
.scene-controls { position: absolute; z-index: 15; top: max(14px, env(safe-area-inset-top)); right: var(--space-2); display: flex; flex-direction: column; align-items: end; gap: var(--space-1); max-width: 78%; }.scene-controls .primary, .scene-controls .secondary { width: auto; min-width: 190px; }.party[data-mic-state="preparing"] .scene-controls, .party[data-mic-state="paused"] .scene-controls { top: auto; right: var(--space-2); bottom: max(var(--space-2), env(safe-area-inset-bottom)); left: var(--space-2); align-items: stretch; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; padding: var(--space-1); border: 1px solid rgba(255,240,212,.38); border-radius: 50%; background: rgba(38,10,35,.42); box-shadow: 0 4px 13px rgba(0,0,0,.22); color: var(--color-dark-text); backdrop-filter: blur(3px); }.icon-button svg { width: var(--space-3); height: var(--space-3); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.debug-toggle { font-size: var(--font-small); font-weight: 900; }
.cake-button { position: absolute; z-index: 3; top: clamp(210px, 29svh, 255px); left: 0; width: 100%; padding: 0; border: 0; background: transparent; }.cake-button::before { position: absolute; z-index: 0; top: 76%; left: 8%; width: 84%; height: 25%; content: ""; border: 2px solid rgba(255,191,103,.25); border-radius: 50%; background: repeating-radial-gradient(ellipse at 50% 50%, rgba(255,211,139,.16) 0 2px, transparent 3px 10px), linear-gradient(180deg, #8a4a2c, #3b191b 78%); box-shadow: 0 12px 19px rgba(0,0,0,.42), inset 0 4px 7px rgba(255,218,152,.28); transform: perspective(170px) rotateX(18deg); }.cake-button::after { position: absolute; z-index: 0; top: 86%; left: 11%; width: 78%; height: 20%; content: ""; border-radius: 50%; background: rgba(10,2,10,.54); filter: blur(8px); } #cake { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 12px rgba(0,0,0,.42)); }
.blow-cue { position: absolute; z-index: 8; top: clamp(505px, 65svh, 585px); right: var(--space-2); left: var(--space-2); display: flex; height: 50px; align-items: center; justify-content: center; gap: var(--space-3); color: var(--color-dark-text); pointer-events: none; }.bubble { --energy: 0; position: relative; padding: 7px 15px; border: 1px solid rgba(255,242,213,.72); border-radius: 999px; background: rgba(72,21,56,.78); box-shadow: 0 5px 14px rgba(0,0,0,.27); color: var(--color-dark-text); font-size: var(--font-medium); font-weight: 900; transform: rotate(-5deg) scale(calc(1 + var(--energy) * .4)); transition: transform 90ms linear; }.bubble::after { position: absolute; bottom: -6px; left: 21px; width: 10px; height: 10px; content: ""; border-right: 1px solid rgba(255,242,213,.72); border-bottom: 1px solid rgba(255,242,213,.72); background: rgba(72,21,56,.78); transform: rotate(32deg); }.bubble span { color: var(--color-dark-emphasis); }.counter { font-size: 15px; font-weight: 800; white-space: nowrap; }.counter strong { color: #ffd87e; font-size: 24px; font-variant-numeric: tabular-nums; }
.volume-area { position: absolute; z-index: 8; top: clamp(575px, 74svh, 670px); right: var(--space-3); left: var(--space-3); }.volume-label { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; color: rgba(255,242,218,.9); font-size: 12px; font-weight: 700; line-height: 1.5; }.volume-label output { color: #ffb0c1; font-variant-numeric: tabular-nums; }.meter { height: 8px; overflow: hidden; border: 1px solid rgba(255,230,172,.35); border-radius: 999px; background: rgba(255,235,192,.18); }.meter > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffdc83, #ff769d); transition: width 90ms linear; }
.flame { transform-box: fill-box; transform-origin: center bottom; animation: flicker 900ms ease-in-out infinite alternate; filter: drop-shadow(0 0 5px rgba(255,216,112,.78)); }.candle:nth-child(3n) .flame { animation-delay: -.3s; }.candle:nth-child(2n) .flame { animation-delay: -.6s; }.candle.out .flame { display: none; }.candle.out .wick { stroke: #6e5263; } @keyframes flicker { from { transform: rotate(-5deg) scaleY(.92); } to { transform: rotate(5deg) scaleY(1.06); } }
.smoke { position: absolute; z-index: 8; top: clamp(252px, 37svh, 305px); left: 0; width: 100%; display: flex; justify-content: center; gap: 29px; }.smoke span { --turn: 0deg; display: block; width: 9px; height: 26px; border-left: 2px solid var(--color-dark-text); border-radius: 50%; background: transparent; opacity: .42; animation: smoke 700ms ease-out infinite alternate; }.smoke span:nth-child(2) { --turn: -18deg; animation-delay: -350ms; }.smoke span:nth-child(3) { --turn: 16deg; animation-delay: -180ms; }.smoke span:nth-child(n + 4) { display: none; } @keyframes smoke { from { transform: rotate(var(--turn)) translateY(0); opacity: .4; } to { transform: rotate(var(--turn)) translateY(-9px); opacity: .05; } }
.party[data-scene="blackout"] .cake-button { opacity: .26; filter: saturate(.3); }.party[data-scene="blackout"] .stage::before { opacity: .13; }
.party[data-scene="celebrate"] .stage::before { height: 77%; opacity: .78; background: radial-gradient(ellipse at 50% 0, rgba(255,226,157,.7), rgba(238,94,135,.13) 28%, transparent 64%); }.party[data-scene="celebrate"] .stage::after { z-index: 1; height: 100%; bottom: 0; border-radius: 0; background-image: radial-gradient(ellipse 2px 7px at 12px 17px, #f4c455 0 88%, transparent 92%), radial-gradient(ellipse 3px 8px at 43px 41px, #ed6b99 0 88%, transparent 92%), radial-gradient(ellipse 2px 6px at 72px 23px, #ac7ae0 0 88%, transparent 92%), radial-gradient(ellipse 3px 7px at 96px 68px, #f08a65 0 88%, transparent 92%); background-size: 115px 123px, 137px 146px, 163px 109px, 187px 169px; opacity: .88; pointer-events: none; }.party[data-scene="celebrate"] .cake-button { top: clamp(215px, 30svh, 265px); z-index: 4; }.party[data-scene="celebrate"] .scene-copy { top: max(73px, calc(env(safe-area-inset-top) + 37px)); }
.mob-crowd { position: absolute; z-index: 5; top: clamp(178px, 22svh, 208px); right: 0; bottom: 48px; left: 0; overflow: hidden; pointer-events: none; }.mob { position: absolute; z-index: var(--mob-layer); bottom: var(--mob-bottom); left: var(--mob-x); display: grid; place-items: center; opacity: 0; transform: translate(calc(-50% + var(--mob-enter-x)), var(--mob-enter-y)) scale(var(--mob-scale)); transform-origin: center bottom; animation: mob-arrive var(--mob-duration, 600ms) cubic-bezier(.2,.8,.25,1) var(--mob-delay) forwards; }.mob-face { display: block; width: var(--mob-size); height: auto; filter: drop-shadow(0 5px 4px rgba(0,0,0,.3)); }.mob-shout { display: none; position: absolute; z-index: 5; bottom: calc(100% + 6px); left: var(--shout-x, 50%); padding: 6px 9px; border: 1px solid rgba(255,237,205,.55); border-radius: 12px; background: #fff3d7; box-shadow: 0 4px 11px rgba(0,0,0,.22); color: var(--color-text); font-size: 12px; font-weight: 900; line-height: 1.25; white-space: nowrap; transform: translateX(-50%) scale(calc(1 / var(--mob-scale))); transform-origin: center bottom; }.mob.is-speaking .mob-shout { display: block; } @keyframes mob-arrive { from { opacity: 0; transform: translate(calc(-50% + var(--mob-enter-x)), var(--mob-enter-y)) scale(var(--mob-scale)); } to { opacity: 1; transform: translate(-50%, 0) scale(var(--mob-scale)); } }
.audio-note { position: absolute; z-index: 7; right: var(--space-3); bottom: max(13px, env(safe-area-inset-bottom)); left: var(--space-3); margin: 0; color: rgba(255,242,219,.85); font-size: 10px; font-weight: 700; line-height: 1.35; text-align: center; }
@media (max-height: 740px) { .party { padding-top: max(58px, calc(env(safe-area-inset-top) + 36px)); }.brand { margin-bottom: 22px; }.eyebrow { margin-bottom: 12px; }.brand-copy { margin-top: 15px; } #setup { gap: 13px; }.entry-footer { margin-top: 28px; }.party:not([data-scene="entry"]) .stage { min-height: 620px; }.scene-copy { top: max(58px, calc(env(safe-area-inset-top) + 25px)); }.cake-button { top: 180px; }.blow-cue { top: 465px; }.volume-area { top: 535px; }.party[data-scene="celebrate"] .cake-button { top: 195px; }.mob-crowd { top: 165px; bottom: 44px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .mob { opacity: 1; transform: translate(-50%, 0) scale(var(--mob-scale)); } }
/* Celebration frame: image and accessible text remain separate. */
.celebration-copy { position: relative; width: min(92vw, 360px); max-height: none; margin: 0 auto; padding: 0; overflow: visible; aspect-ratio: 972 / 814; color: #4a1430; text-shadow: none; animation: frame-arrive 600ms cubic-bezier(.2,.9,.25,1.1) both; }
.frame-paper { position: absolute; z-index: 0; top: 16.5%; right: 14%; bottom: 16.5%; left: 14%; background: radial-gradient(ellipse at 50% 30%, #fffaf0, #f3e3c3 85%); box-shadow: inset 0 0 18px rgba(110,70,15,.45); }
.frame-window { position: absolute; inset: 4% 1%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 8px 9px; text-align: center; }
.frame-gold { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 16px 26px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(255,200,110,.22)); }
.frame-kicker { margin: 0 0 6px; color: #9a6a1c; font-family: "Cinzel Decorative", "Apple Chancery", serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; }.celebration-copy h2 { max-height: 2.4em; margin: 0; overflow: hidden; color: #5a1634; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(20px, 5.6vw, 27px); line-height: 1.25; }.frame-rule { display: block; width: 100px; height: 1px; margin: 8px 0; background: linear-gradient(90deg, transparent, #b88a33, transparent); }.celebration-copy > .frame-paper #celebration-message { max-height: 5.2em; margin: 0; overflow: hidden; color: #4a1430; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 17px; font-weight: 700; line-height: 1.55; }.party.long-celebration-message .celebration-copy > .frame-paper #celebration-message { font-size: 14px; line-height: 1.45; }
.party[data-scene="celebrate"] .scene-copy { z-index: 12; top: max(53px, calc(env(safe-area-inset-top) + 22px)); }.party[data-scene="celebrate"] .mob-crowd { z-index: 5; }
.celebration-copy::after { position: absolute; z-index: 3; inset: 0; content: ""; opacity: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,245,190,.8) 50%, transparent 62%); mask: url("./assets/frame-gold.webp") center / 100% 100% no-repeat; animation: frame-glint 520ms ease-out 620ms both; }
@keyframes frame-arrive { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } } @keyframes frame-glint { 0% { opacity: 0; transform: translateX(-48%); } 35% { opacity: .9; } 100% { opacity: 0; transform: translateX(48%); } }
@media (max-height: 740px) { .party[data-scene="celebrate"] .scene-copy { top: 35px; transform: scale(.82); transform-origin: top center; }.party[data-scene="celebrate"] .mob-crowd { top: 140px; } }
@media (prefers-reduced-motion: reduce) { .celebration-copy { animation: none; }.celebration-copy::after { display: none; } }
.party[data-scene="celebrate"] .cake-button { top: clamp(330px, 42svh, 355px); }
@media (max-height: 740px) { .party[data-scene="celebrate"] .cake-button { top: 285px; } }
/* Celebration frame revision: heading lives above the frame; the message owns the window. */
.celebration-copy { width: min(92vw, 360px); aspect-ratio: auto; animation: none; }.celebration-heading { margin: 0 0 8px; color: #ffe7b0; text-align: center; }.celebration-heading .frame-kicker { margin: 0 0 4px; color: #f0cf7a; font-family: "Cinzel Decorative", "Apple Chancery", serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; }.celebration-heading h2 { margin: 0; max-height: 2.5em; color: #ffe7b0; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 20px; font-weight: 700; line-height: 1.25; text-shadow: 0 0 16px rgba(255,200,110,.5); }.frame-shell { position: relative; width: 100%; aspect-ratio: 972 / 814; animation: frame-arrive 600ms cubic-bezier(.2,.9,.25,1.1) both; }.frame-shell .frame-paper { top: 16.5%; right: 14%; bottom: 16.5%; left: 14%; }.frame-shell .frame-window { inset: 1% 1%; padding: 12px 10px; }.frame-shell .frame-gold { z-index: 2; }.frame-shell::after { position: absolute; z-index: 3; inset: 0; content: ""; opacity: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,245,190,.8) 50%, transparent 62%); mask: url("./assets/frame-gold.webp") center / 100% 100% no-repeat; animation: frame-glint 520ms ease-out 620ms both; }.celebration-copy::after { display: none; }.frame-ornament { width: 56px; height: 10px; margin: 0 0 12px; fill: none; stroke: #b88a33; stroke-width: 1; }.celebration-copy > .frame-shell .frame-paper #celebration-message { max-height: 6.2em; color: #4a1430; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 800; font-size: clamp(17px, 6.15vw, 24px); line-height: 1.55; overflow-wrap: anywhere; word-break: auto-phrase; }.party.medium-celebration-message .celebration-copy > .frame-shell .frame-paper #celebration-message { font-size: clamp(15px, 4.9vw, 19px); }.party.long-celebration-message .celebration-copy > .frame-shell .frame-paper #celebration-message { font-size: clamp(14px, 4.35vw, 17px); }.party[data-scene="celebrate"] .scene-copy { top: max(25px, calc(env(safe-area-inset-top) + 12px)); }.party[data-scene="celebrate"] .cake-button { top: clamp(352px, 44svh, 374px); }@media (max-height: 740px) { .party[data-scene="celebrate"] .scene-copy { top: 13px; transform: scale(.72); }.party[data-scene="celebrate"] .cake-button { top: 290px; } }

/* Keep the complete gold frame clear of the cake at phone height. */
.party[data-scene="celebrate"] .cake-button { top: clamp(392px, 47svh, 410px); }

/* The celebration title, ornament, and wish share the frame window. */
.celebration-copy { width: min(92vw, 360px); aspect-ratio: 972 / 814; animation: none; }
.frame-shell { width: 100%; height: 100%; animation: frame-arrive 600ms cubic-bezier(.2,.9,.25,1.1) both; }
.frame-shell .frame-paper { top: 16.5%; right: 14%; bottom: 16.5%; left: 14%; }
.frame-shell .frame-window { inset: 1% 1%; gap: 8px; padding: 10px; }
.frame-shell .frame-window #celebration-title { width: 100%; max-width: 100%; max-height: none; margin: 0; overflow: hidden; color: #8a5a14; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(12px, 3.85vw, 15px); font-weight: 800; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.frame-shell .frame-ornament { flex: 0 0 auto; width: 56px; height: 10px; margin: 0; fill: none; stroke: #b88a33; stroke-width: 1; }
.frame-shell .frame-paper #celebration-message { max-height: 6.2em; margin: 0; color: #4a1430; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(17px, 6.15vw, 24px); font-weight: 800; line-height: 1.55; overflow-wrap: anywhere; word-break: auto-phrase; }
.party.medium-celebration-message .frame-shell .frame-paper #celebration-message { font-size: clamp(15px, 4.9vw, 19px); }
.party.long-celebration-message .frame-shell .frame-paper #celebration-message { font-size: clamp(14px, 4.35vw, 17px); }
.party[data-scene="celebrate"] .scene-copy { top: max(53px, calc(env(safe-area-inset-top) + 22px)); }
.party[data-scene="celebrate"] .cake-button { top: clamp(392px, 47svh, 410px); }
@media (max-height: 740px) { .party[data-scene="celebrate"] .scene-copy { top: 35px; transform: scale(.82); transform-origin: top center; }.party[data-scene="celebrate"] .cake-button { top: 275px; } }
@media (prefers-reduced-motion: reduce) { .frame-shell { animation: none; }.frame-shell::after { display: none; } }
/* Plush mode uses the same stage and lyric face, with only local Web Audio. */
.mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 3px; border: 1px solid rgba(111,55,181,.55); border-radius: 14px; background: rgba(255,255,255,.46); }.mode-switch legend { width: 100%; padding: 0 2px; color: #4b1d72; font-size: 12px; font-weight: 800; }.mode-switch label { position: relative; display: grid; min-height: 38px; place-items: center; border-radius: 10px; color: #633075; font-size: 13px; font-weight: 800; cursor: pointer; }.mode-switch input { position: absolute; opacity: 0; }.mode-switch input:checked + span { width: 100%; min-height: 38px; display: grid; place-items: center; border-radius: 10px; background: #633075; box-shadow: 0 3px 0 #3c1b62; color: #fff7e9; }.mode-switch input:focus-visible + span { outline: 3px solid #ff9cb5; outline-offset: 2px; }
.plush-prepare { width: min(84vw, 320px); margin: 0 auto; padding: 22px 20px; border: 1px solid rgba(255,226,159,.62); border-radius: 24px; background: linear-gradient(145deg, rgba(87,30,73,.94), rgba(47,16,51,.92)); box-shadow: 0 14px 32px rgba(0,0,0,.33), inset 0 1px rgba(255,255,255,.22); color: #fff2d8; text-align: center; }.plush-prepare p { margin: 0 0 16px; font-size: 18px; font-weight: 800; line-height: 1.55; }.plush-prepare .primary { min-height: 58px; border-radius: 18px; font-size: 24px; letter-spacing: .12em; }.plush-again { min-width: 142px !important; }
.plush-confetti { position: absolute; z-index: 14; inset: 0; overflow: hidden; pointer-events: none; }.plush-confetti span { position: absolute; top: 22%; left: var(--confetti-x); width: 8px; height: 13px; border-radius: 2px; background: hsl(calc((var(--confetti-x) * 3)), 86%, 68%); animation: plush-confetti .9s cubic-bezier(.18,.8,.3,1) var(--confetti-delay) both; }.plush-confetti span:nth-child(3n) { background: #ffd56d; }.plush-confetti span:nth-child(3n + 1) { background: #ff88a6; }.plush-confetti span:nth-child(3n + 2) { background: #a98aff; } @keyframes plush-confetti { from { opacity: 0; transform: translate(-50%, -26px) rotate(0); } 20% { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + var(--confetti-turn)), 210px) rotate(300deg); } }
.party[data-scene="plush-prepare"] .scene-copy { top: max(76px, calc(env(safe-area-inset-top) + 38px)); }.party[data-scene="plush-prepare"] .cake-button { top: clamp(355px, 47svh, 410px); }.party[data-scene="plush-prepare"] .scene-controls { top: max(14px, env(safe-area-inset-top)); }
@media (max-height: 740px) { .party[data-scene="plush-prepare"] .scene-copy { top: 48px; transform: scale(.9); transform-origin: top center; }.party[data-scene="plush-prepare"] .cake-button { top: 300px; } }
/* Invitation details. Keep the existing curtain bounds and top inset fixed. */
.party[data-scene="entry"] { padding-top: max(86px, calc(env(safe-area-inset-top) + 60px)); }
.party[data-scene="entry"]::before, .party[data-scene="entry"]::after { width: 28%; height: 70px; opacity: .9; }
.party[data-scene="entry"] .brand { margin-bottom: 36px; text-align: center; }
.party[data-scene="entry"] .eyebrow { margin-bottom: 18px; color: #845b72; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .26em; }
.party[data-scene="entry"] h1 { color: #39233f; font-size: clamp(30px, 8.5vw, 37px); font-weight: 800; line-height: 1.45; letter-spacing: .025em; }
.party[data-scene="entry"] .brand-copy { margin-top: 16px; color: #795d6d; font-size: 13px; font-weight: 500; line-height: 1.8; letter-spacing: .025em; }
#setup { gap: 24px; }
#setup .field { gap: 9px; }
#setup .field label { align-items: baseline; color: #593b50; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
#setup .field label span { color: #7c6574; font-size: 11px; font-weight: 400; letter-spacing: 0; }
#setup .field input { height: 52px; padding-left: 16px; border-color: #d7c5cf; border-radius: 14px; background: #fffcf9; box-shadow: 0 1px 2px rgba(73,35,63,.025); transition: border-color 160ms ease, box-shadow 160ms ease; }
#setup .field input::placeholder { color: #806b79; }
#setup .field input:focus { border-color: #896480; outline: 2px solid rgba(137,100,128,.22); outline-offset: 2px; box-shadow: none; }
#setup .number-field > span { top: 0; bottom: 0; display: flex; align-items: center; color: #7c6574; }
.mode-switch { min-width: 0; padding: 4px; border-color: #d7c5cf; border-radius: 16px; background: rgba(255,252,249,.62); }
.mode-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mode-switch label { min-height: 44px; color: #795d6d; font-weight: 500; }
.mode-switch label > span { display: grid; width: 100%; min-height: 44px; place-items: center; border-radius: 11px; }
.mode-switch input:checked + span { min-height: 44px; border-radius: 11px; background: #ebdde8; box-shadow: inset 0 0 0 1px rgba(110,71,105,.1); color: #51304e; font-weight: 700; }
.mode-switch input:focus-visible + span { outline: 2px solid #896480; outline-offset: 1px; }
#start { min-height: 56px; margin-top: 4px; border-radius: 18px; box-shadow: 0 5px 12px rgba(62,27,78,.14), inset 0 1px rgba(255,255,255,.1); font-weight: 700; letter-spacing: .045em; }
.sound-hint { margin-top: -12px; color: #7c6574; font-size: 11px; font-weight: 400; line-height: 1.6; letter-spacing: .02em; }
.primary { transition: transform 160ms ease, box-shadow 160ms ease; }
.primary:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 7px rgba(62,27,78,.2); }
/* The resume action is centered in the stage, independent of the corner controls. */
.party[data-mic-state="paused"] .scene-controls { max-width: none; align-items: end; }
.party[data-mic-state="paused"] #resume { align-self: center; width: min(100%, 280px); }
/* The preparation belongs to the same dark stage as the song. */
body[data-scene="plush-prepare"] { background: var(--color-dark-background); }
body[data-scene="plush-prepare"]::before { background: radial-gradient(ellipse at 50% 12%, rgba(247,189,103,.35), transparent 30%), radial-gradient(ellipse at 50% 72%, rgba(142,39,71,.27), transparent 48%), linear-gradient(180deg, #35102a 0%, var(--stage-wine-deep) 76%); }
.plush-prepare { width: min(100%, 320px); padding: 18px 20px 20px; border-color: rgba(255,226,159,.24); border-radius: 24px; background: rgba(56,19,48,.7); box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.plush-prepare p { margin: 0 0 18px; font-size: 17px; font-weight: 600; line-height: 1.65; letter-spacing: .03em; }
.plush-prepare p span { display: block; white-space: nowrap; }
.plush-prepare .primary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 132px; min-height: 136px; margin: 0 auto; padding: 16px; border: 1px solid rgba(255,215,135,.65); border-radius: 24px; background: linear-gradient(145deg, #78355d, #4a203f); box-shadow: 0 8px 20px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.12); font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.plush-prepare .primary img { display: block; width: 72px; height: 72px; }
.plush-prepare .primary:disabled { opacity: .5; cursor: wait; }
.party:not([data-scene="song"]) .plush-confetti { display: none; }
@media (max-height: 740px) {
  .party[data-scene="entry"] { padding-top: max(72px, calc(env(safe-area-inset-top) + 44px)); }
  .party[data-scene="entry"] .brand { margin-bottom: 24px; }
  .party[data-scene="entry"] .eyebrow { margin-bottom: 12px; }
  .party[data-scene="entry"] .brand-copy { margin-top: 12px; }
  #setup { gap: 18px; }
  .party[data-scene="plush-prepare"] .scene-copy { top: 65px; transform: none; }
  .party[data-scene="plush-prepare"] .cake-button { top: 340px; }
}
@media (prefers-reduced-motion: reduce) { .plush-confetti { display: none; } }

.party[data-play-mode="plush"][data-scene="song"] .plush-again { position: absolute; top: calc(100svh - 96px); right: 0; font-size: 13px; }

/* Keep every cheer legible above the front row. */
.mob.is-speaking { z-index: 6; }
.party[data-scene="celebrate"] .scene-copy { right: 0; left: 0; }
@media (max-height: 740px) { .party[data-scene="celebrate"] .cake-button { top: 300px; } }

/* Lyrics stay inside the open part of the curtain, including narrow phones. */
.party[data-scene="song"] .scene-copy { top: max(84px, calc(env(safe-area-inset-top) + 45px)); }
.party[data-scene="song"]::before, .party[data-scene="song"]::after { height: 80px; }
.song-lyrics { font-size: clamp(27px, 7.6vw, 34px); letter-spacing: .035em; }
/* Confetti bursts from one point below the copy, rather than forming a line over it. */
.plush-confetti { z-index: 4; }
.plush-confetti span { top: 26%; left: 50%; opacity: 0; background: #ffd56d; }
@keyframes plush-confetti {
  from { opacity: 0; transform: translate(-50%, 0) scale(.6) rotate(0); }
  18% { opacity: 1; }
  to { opacity: 0; transform: translate(calc(-50% + var(--confetti-dx)), var(--confetti-dy)) rotate(var(--confetti-turn)); }
}

.party[data-scene="celebrate"] .stage::after { bottom: 60px; height: calc(100% - 60px); }
.plush-prepare .plush-tip { margin: 14px 0 0; color: #ffe3af; font-size: 12px; font-weight: 700; line-height: 1.5; }
@media (max-height: 740px) { .party[data-scene="plush-prepare"] .cake-button { top: 380px; } }
.party[data-play-mode="plush"][data-mic-state="plush-wait"] .song-lyrics { color: #fff0cd; font-family: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(23px, 6.8vw, 28px); font-style: normal; font-weight: 800; line-height: 1.4; letter-spacing: .02em; }
.plush-blow-note { margin: 14px 0 0; color: #ead9c7; font-size: 13px; font-weight: 500; line-height: 1.7; }
.plush-blow-note span { display: block; }

/* Keep the cake fixed as the song becomes the blackout and then the celebration. */
.party:not([data-scene="entry"]) { --stage-cake-top: clamp(392px, 47svh, 410px); --stage-cake-height: calc(min(100vw, 430px) * 235 / 360); }
.party:is([data-scene="song"], [data-scene="blackout"], [data-scene="celebrate"]) .cake-button { top: var(--stage-cake-top); }
.party[data-play-mode="phone"][data-scene="song"] .blow-cue { top: calc(var(--stage-cake-top) + var(--stage-cake-height) + 6px); }
.party[data-play-mode="phone"][data-scene="song"] .volume-area { top: calc(var(--stage-cake-top) + var(--stage-cake-height) + 65px); }
@media (min-height: 741px) { .party[data-scene="song"] .scene-copy { top: clamp(145px, 20svh, 185px); } }
@media (max-height: 740px) { .party:not([data-scene="entry"]) { --stage-cake-top: 300px; } }