/* One continuous curtain: extended cream centre and a pale trailing accent. Native
   snapshots keep all page mounting outside the animation's shared timeline. */
.page-scene{display:contents}
.page-ribbon{position:fixed;top:0;left:0;width:500vw;height:100vh;height:100lvh;pointer-events:none;view-transition-name:page-ribbon;transform:translate3d(-100%,0,0);background-size:100% 100%;background-repeat:no-repeat;background-image:none}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none;z-index:0}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:1020ms;animation-timing-function:linear;animation-fill-mode:both}
::view-transition-old(root){animation-name:page-old-hold}
::view-transition-new(root){animation-name:page-new-show}
/* Draw the vector on the transition layer itself: an oversized offscreen
   element snapshot can crop its trailing curve into a vertical edge. */
::view-transition-group(page-ribbon){width:500vw;height:100vh;height:100lvh;background-size:100% 100%;background-repeat:no-repeat;background-image:var(--page-curtain-art,url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 500 100' preserveAspectRatio='none'%3E%3Cpath fill='%23bb9982' d='M60 0 C40 30 20 70 0 100 H440 C460 70 480 30 500 0Z'/%3E%3Cpath fill='%23e6b69d' d='M60 0 C40 30 20 70 0 100 H430 C450 70 470 30 490 0Z'/%3E%3Cpath fill='%23f3e2d1' d='M60 0 C40 30 20 70 0 100 H420 C440 70 460 30 480 0Z'/%3E%3Cpath fill='%23ead7c2' d='M60 0 C40 30 20 70 0 100 H12 C32 70 52 30 72 0Z'/%3E%3C/svg%3E"));z-index:1;animation:page-ribbon-pass 1020ms cubic-bezier(.25,.08,.75,.92) both}
::view-transition-image-pair(page-ribbon),::view-transition-new(page-ribbon){animation:none;mix-blend-mode:normal;opacity:1}
::view-transition-old(page-ribbon),::view-transition-new(page-ribbon){display:none}
@keyframes page-old-hold{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes page-new-show{0%,49.99%{opacity:0}50%,100%{opacity:1}}
@keyframes page-ribbon-pass{from{transform:translate3d(-500vw,0,0)}to{transform:translate3d(100vw,0,0)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.page-ribbon{display:none}}

/* Profile structure: one centered visual axis, three deliberate groups. */
.profile-page:not(.setup-page) .topbar{justify-content:center;max-width:none;width:100%}
.profile-page:not(.setup-page) .topbar .header-actions:empty{display:none}
.profile-page:not(.setup-page) .profile-welcome{padding:10px 22px 34px;align-items:center}
.profile-page:not(.setup-page) .profile-panel{width:414px;height:auto;max-height:100%;display:flex;flex-direction:column;align-items:stretch;padding:24px 32px 28px;border-radius:32px;gap:0;background:linear-gradient(170deg,#fbf0e4 0%,#fffaf3 62%,#fff8ef);box-shadow:0 16px 48px #8e624909,0 1px 0 #ffffffb3 inset}
.profile-page:not(.setup-page) .profile-intro{flex:none;text-align:center;min-width:0}
.profile-page:not(.setup-page) .profile-illustration{width:184px;height:103px;max-height:none;margin:0 auto;flex:none}
.profile-page:not(.setup-page) .profile-panel h1{margin:10px 0 0;font-size:29px;line-height:1.2;letter-spacing:-1px}
.profile-page:not(.setup-page) .profile-panel h1::after{display:none}
.profile-page:not(.setup-page) .profile-form{margin-top:26px;min-width:0}
.profile-page:not(.setup-page) .profile-photo-row{flex-direction:column;gap:10px;margin:0 0 25px}
.profile-page:not(.setup-page) .profile-photo-actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;min-height:24px}
.profile-page:not(.setup-page) .profile-photo-button{width:94px;height:94px;min-width:94px;min-height:94px;flex:0 0 94px;padding:6px;border-width:1.5px;transition:border-color 180ms,box-shadow 180ms,transform 180ms}
.profile-page:not(.setup-page) .profile-photo-crop{width:78px;height:78px;min-width:78px;min-height:78px}
.profile-page:not(.setup-page) .profile-photo-crop>.avatar{width:78px!important;height:78px!important}
.profile-page:not(.setup-page) .profile-photo-button:hover{border-color:#ac8063;box-shadow:0 0 0 5px #f2dec833}
.profile-page:not(.setup-page) .profile-text-button{font-size:12px;line-height:1.4;padding:4px 2px}
.profile-page:not(.setup-page) .profile-field-label{margin-bottom:9px}
.profile-page:not(.setup-page) .profile-name-field .text-input{height:50px;border-radius:15px;padding-inline:16px;font-size:16px}
.profile-page:not(.setup-page) .profile-continue{width:100%;height:50px!important;min-height:50px!important;margin-top:18px;border-radius:15px;font-size:14px;gap:10px}
.profile-page:not(.setup-page) .profile-invite{align-self:center;margin:16px 0 0}
.profile-edit-close{position:absolute;top:16px;left:16px;width:32px;height:32px;border:1px solid #e5d2bf;border-radius:50%;display:grid;place-items:center;background:#fff9f0;color:#947158}
.profile-page:not(.setup-page) .returning-panel{gap:26px;padding-top:28px;padding-bottom:28px}
.returning-identity{display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0;text-align:center}
.returning-avatar{display:grid;place-items:center;cursor:default;flex-shrink:0}
.returning-name{font-size:19px;line-height:1.25;font-weight:650;letter-spacing:-.3px;margin:0;max-width:100%;overflow-wrap:anywhere}
.returning-identity .profile-invite{margin:0!important}
.returning-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0}
.profile-page:not(.setup-page) .returning-actions .profile-continue{margin:0}
.returning-actions .profile-continue span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-page:not(.setup-page) .returning-edit{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;min-height:42px;border:1px solid #e7d6c5;border-radius:14px;background:#fffaf25c;color:#8b6c57;font-size:12px}
.returning-edit:hover{background:#f4e7d8}
.returning-actions .profile-error{margin:0}

@container (max-height:650px){
 .profile-page:not(.setup-page) .profile-welcome{padding:4px 18px 16px}
 .profile-page:not(.setup-page) .profile-panel{padding:16px 26px 20px}
 .profile-page:not(.setup-page) .profile-illustration{width:146px;height:82px}
 .profile-page:not(.setup-page) .profile-panel h1{font-size:25px;margin-top:6px}
 .profile-page:not(.setup-page) .profile-form{margin-top:18px}
 .profile-page:not(.setup-page) .profile-photo-row{gap:7px;margin-bottom:18px}
 .profile-page:not(.setup-page) .profile-photo-button{width:78px;height:78px;min-width:78px;min-height:78px;flex-basis:78px}
 .profile-page:not(.setup-page) .profile-photo-crop{width:62px;height:62px;min-width:62px;min-height:62px}
 .profile-page:not(.setup-page) .profile-photo-crop>.avatar{width:62px!important;height:62px!important}
 .profile-page:not(.setup-page) .profile-name-field .text-input{height:46px}
 .profile-page:not(.setup-page) .profile-continue{height:46px!important;min-height:46px!important;margin-top:14px}
 .profile-page:not(.setup-page) .returning-panel{gap:20px}
 .returning-name{font-size:18px}.returning-identity{gap:10px}
}
/* Preserve the stable landscape layout when a phone keyboard opens. */
.profile-page:not(.setup-page)[data-wide="true"] .profile-panel{display:grid;width:700px;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);grid-template-rows:1fr;gap:28px;padding:22px 30px;align-items:center}
.profile-page:not(.setup-page)[data-wide="true"] .profile-intro{grid-column:1;grid-row:1}
.profile-page:not(.setup-page)[data-wide="true"] .profile-illustration{width:182px;height:102px}
.profile-page:not(.setup-page)[data-wide="true"] .profile-form{grid-column:2;grid-row:1;margin:0}
.profile-page:not(.setup-page)[data-wide="true"] .profile-photo-row{flex-direction:row;gap:12px;margin-bottom:13px}
.profile-page:not(.setup-page)[data-wide="true"] .profile-photo-actions{flex-direction:column;gap:0}
.profile-page:not(.setup-page)[data-wide="true"] .profile-photo-button{width:64px;height:64px;min-width:64px;min-height:64px;flex-basis:64px;padding:5px}
.profile-page:not(.setup-page)[data-wide="true"] .profile-photo-crop{width:50px;height:50px;min-width:50px;min-height:50px}
.profile-page:not(.setup-page)[data-wide="true"] .profile-photo-crop>.avatar{width:50px!important;height:50px!important}
.profile-page:not(.setup-page)[data-wide="true"] .profile-invite{position:absolute;left:30px;bottom:20px;width:calc(44% - 30px);justify-content:center;margin:0;font-size:10px}
@media(orientation:landscape) and (max-height:500px){
 .profile-page.returning-page .profile-panel{width:680px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:15px 28px;padding:18px 28px}
 .returning-panel .profile-intro{grid-column:1;grid-row:1/3}
 .returning-identity{grid-column:2;grid-row:1;flex-direction:row;justify-content:center;gap:14px;text-align:left}
 .returning-actions{grid-column:2;grid-row:2;gap:8px}
 .profile-page.returning-page .returning-avatar{display:grid;width:64px;height:64px;min-width:64px;min-height:64px;flex-basis:64px;padding:5px}
 .profile-page.returning-page .returning-avatar .profile-photo-crop,.profile-page.returning-page .returning-avatar .avatar{width:50px!important;height:50px!important;min-width:50px;min-height:50px}
 .returning-identity .profile-invite{display:none}
 .returning-name{font-size:17px}
}
.profile-page.profile-keyboard-open:not(.setup-page) .profile-entry-controls{border-radius:19px}
.profile-page.profile-keyboard-open:not(.setup-page) .profile-entry-controls .profile-continue{margin-top:12px;height:44px!important;min-height:44px!important}
@media(prefers-reduced-motion:reduce){.page-scene *{animation:none!important;translate:none!important}}

/* Keep the wordmark attached to the profile rather than the viewport edge. */
.profile-page:not(.setup-page) .profile-welcome{flex-direction:column;justify-content:center;gap:18px}
.profile-page:not(.setup-page) .profile-welcome>.topbar{flex:0 0 24px;width:414px;max-width:100%;height:24px;min-height:24px;margin:0;padding:0 32px;justify-content:flex-start}
.profile-page:not(.setup-page) .profile-welcome>.topbar .brand{font-size:18px;letter-spacing:-.6px}
.profile-page:not(.setup-page) .profile-panel{flex-shrink:1;max-height:calc(100% - 42px)}
.profile-page:not(.setup-page)[data-wide="true"] .profile-welcome{gap:10px}
.profile-page:not(.setup-page)[data-wide="true"] .profile-welcome>.topbar{width:700px;padding-inline:30px;height:22px;min-height:22px;flex-basis:22px}
@media(orientation:landscape) and (max-height:500px){.profile-page.returning-page .profile-welcome{gap:10px}.profile-page.returning-page .profile-welcome>.topbar{width:680px;padding-inline:28px;height:22px;min-height:22px;flex-basis:22px}}

/* Small entry-screen refinements. */
.profile-page:not(.setup-page) .profile-welcome{gap:24px}
.profile-page:not(.setup-page) .profile-welcome>.topbar{padding-inline:12px}
.profile-page:not(.setup-page) .profile-welcome>.topbar .brand{font-size:21px}
.profile-page:not(.setup-page) .profile-panel{max-height:calc(100% - 48px)}
.setup-profile{background:transparent;border-color:transparent;box-shadow:none;padding:4px;gap:5px;min-width:40px;min-height:40px;transition:background 140ms}
.setup-profile:hover{background:#ebd7c744}
.setup-profile-name{display:none}
.setup-profile-avatar{border:0;padding:0}
.setup-profile>svg{width:10px;height:10px;color:#aa8d78}
.setup-form{animation:setup-content-in 160ms ease-out backwards}
.setup-password-arrive{animation:setup-content-in 160ms ease-out backwards}
@keyframes setup-content-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@container(max-height:650px){.profile-page:not(.setup-page) .profile-welcome{gap:16px}.profile-page:not(.setup-page) .profile-panel{max-height:calc(100% - 40px)}}
.profile-page:not(.setup-page)[data-wide="true"] .profile-welcome{gap:10px}
@media(orientation:landscape) and (max-height:500px){.profile-page.returning-page .profile-welcome{gap:10px}}
@media(min-width:1100px) and (min-height:600px){
 .profile-page{background-image:radial-gradient(ellipse at 12% 35%,#efd6c344,transparent 32%),radial-gradient(ellipse at 88% 75%,#e8d1b944,transparent 34%),radial-gradient(ellipse at 50% 30%,#f6e3d3,transparent 65%)}
 .profile-page::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('/assets/profile-surround.svg') center/cover no-repeat}
 .profile-page>.topbar,.profile-page>.profile-welcome,.profile-page>.setup-main{position:relative;z-index:1}
}
@media(prefers-reduced-motion:reduce){.setup-form,.setup-password-arrive{animation:none}}

.app-launch{display:contents}
.page-scene[data-transition="launch"]>*{animation:launch-arrive 180ms ease-out both}
@keyframes launch-arrive{from{opacity:0}to{opacity:1}}
.profile-text-button{text-decoration:none!important;border-radius:9px;transition:background 140ms,opacity 140ms,transform 140ms}
.profile-text-button:hover,.profile-text-button:focus-visible{background:#ead3be44}
button{transition:background 140ms ease,color 140ms ease,box-shadow 140ms ease,opacity 140ms ease,transform 140ms ease}
button:not(:disabled):active{scale:.97}
button{transition-property:background,color,box-shadow,opacity,transform,scale;transition-duration:140ms}
.setup-reveal{flex-shrink:0;min-height:0}
.room-creation-screen{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#f8eee4;animation:launch-arrive 140ms ease-out}
.track-backdrop{backdrop-filter:none;background:#3d2c2345}
.track-dialog{animation:setup-content-in 120ms ease-out backwards;box-shadow:0 12px 40px #2f1a1720}
.person-row>div:not(.avatar){min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.person-row>.avatar{flex:0 0 auto;min-width:38px;max-width:38px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%}
.stage>.seek-frame-hold{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2;background:#111;display:none}
.media-buffer-status{animation:buffer-reveal 1ms 2500ms both}
@keyframes buffer-reveal{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@media(prefers-reduced-motion:reduce){.app-launch>.page-scene>*,.room-creation-screen,.track-dialog{animation:none}button{transition:none!important}.media-buffer-status{animation:buffer-reveal 1ms 2500ms both!important}}

/* Dedicated decoration columns keep tickets and the star apart at every size. */
.setup-page .setup-heading,.setup-page[data-wide="true"] .setup-heading{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;align-content:center;gap:0;padding:0;text-align:center}
.setup-page .setup-heading::after{display:none!important}
.setup-page .setup-heading .setup-art,.setup-page[data-wide="true"] .setup-heading .setup-art{position:static;grid-column:1;grid-row:1;order:0;justify-self:center;inset:auto;transform:none;width:36px!important;height:32px!important;margin:0!important}
.setup-page .setup-heading h1{grid-column:2;grid-row:1;min-width:0;white-space:nowrap;font-size:clamp(21px,6.2vw,26px)}
.setup-page .setup-heading .setup-star{display:block;grid-column:3;grid-row:1;justify-self:center;width:18px;height:23px;opacity:.6;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24' fill='none'%3E%3Cpath d='M10 2C9 8 7 10 2 12c5 2 7 4 8 10 1-6 3-8 8-10-5-2-7-4-8-10Z' stroke='%23cfa184' stroke-width='1.1'/%3E%3C/svg%3E")}
@media(max-width:360px){.setup-page .setup-heading,.setup-page[data-wide="true"] .setup-heading{grid-template-columns:36px minmax(0,1fr) 36px}.setup-page .setup-heading h1{font-size:21px}}