.entry-layer, .waiting-layer, .welcome-layer { position: absolute; inset: 0px; z-index: 5; display: grid; place-items: center; padding: 28px; text-align: center; }
.welcome-layer { z-index: 6; pointer-events: none; }
.welcome-decoration { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; transform: translateY(-45px); animation: 2s ease-in-out 0s 1 normal both running welcome-decoration; }
.welcome-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 7px; margin: 0px; transform: translateY(-73px); }
.welcome-copy img { display: block; height: auto; filter: drop-shadow(0 0 .35px var(--moss)); }
.welcome-copy .welcome-intro-art { width: 168px; animation: 2s ease-in-out 0s 1 normal both running welcome-copy; }
.welcome-copy .wedding-title-art { width: 310px; filter: drop-shadow(0 0 .52px var(--moss)); animation: 2s ease-in-out 0s 1 normal both running welcome-title; }
@keyframes welcome-copy { 
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}
@keyframes welcome-title { 
  0%, 25% { opacity: 0; }
  50%, 75% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes welcome-decoration { 
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}
.entry-layer { display: none; align-content: start; padding: 70px 28px 28px; }
.entry-inner { position: relative; width: min(100%, 316px); min-height: 702px; }
.entry-title { margin: 0px; }
.entry-title img { display: block; width: 270px; height: auto; margin: 0px auto; filter: drop-shadow(0 0 .52px var(--moss)); }
.entry-prompt { display: block; width: 156px; height: auto; margin: 8px auto; opacity: 0.66; }
.entry-form { display: grid; width: 238px; margin: 0px auto; justify-items: start; gap: 14px; }
.entry-field-label { display: block; width: 50px; height: auto; filter: drop-shadow(0 0 .35px var(--moss)); }
.name-line { width: 238px; height: 43px; margin-top: -4px; padding: 0px 12px; border: 1.5px solid rgba(59, 89, 70, 0.56); border-radius: 9px 11px 10px 12px / 11px 9px 12px 10px; outline: none; background: rgba(255, 254, 249, 0.82); color: var(--ink); font: 700 21px / 1 STKaiti, "Kaiti SC", serif; text-align: left; transform: rotate(-0.16deg); }
.name-line:focus { border-color: var(--moss); box-shadow: rgba(59, 89, 70, 0.18) 2px 1px 0px, rgba(59, 89, 70, 0.1) 0px 0px 0px 3px; }
.table-picker { display: grid; grid-template-columns: repeat(3, 1fr); width: 238px; margin-top: -2px; gap: 9px; }
.table-choice { display: grid; min-height: 42px; padding: 5px; place-items: center; border: 1.5px solid rgba(59, 89, 70, 0.54); border-radius: 10px 12px 9px 11px / 12px 9px 11px 10px; background: rgba(255, 254, 249, 0.82); cursor: pointer; }
.table-number { display: block; width: 27px; height: auto; }
.table-choice:nth-child(3n+2) { border-radius: 12px 9px 11px 10px / 10px 12px 9px 11px; transform: rotate(0.22deg); }
.table-choice:nth-child(3n) { border-radius: 9px 11px 12px 10px / 11px 10px 12px 9px; transform: rotate(-0.18deg); }
.table-choice.selected { border-color: rgb(49, 77, 59); background: rgb(49, 77, 59); color: rgb(255, 254, 249); box-shadow: rgba(33, 57, 42, 0.18) 1px 1px 0px; }
.table-choice.selected .table-number { filter: brightness(0) invert(1); }
.table-choice { -webkit-tap-highlight-color: transparent; }
.table-choice:focus:not(:focus-visible) { outline: none; }
.table-choice:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.enter-activity { position: absolute; top: 552px; left: 50%; width: 178px; padding: 0px; border: 0px; background: transparent; cursor: pointer; transform: translateX(-50%) rotate(-0.4deg); }
.enter-activity img { display: block; width: 100%; height: auto; }
.enter-activity:disabled { cursor: default; filter: grayscale(1) brightness(0.9) contrast(0.82); opacity: 0.42; }
.waiting-layer { display: none; z-index: 4; }
.waiting-inner { display: grid; justify-items: center; gap: 9px; transform: translateY(-73px); }
.waiting-dots { display: flex; height: 26px; align-items: flex-end; gap: 5px; }
.waiting-dots span { display: block; width: 5px; height: 5px; background: var(--moss); border-radius: 52% 45% 49% 48%; --dot-turn: -9deg; animation: 0.72s ease-in-out 0s infinite normal none running dot-hop; }
.waiting-dots span:nth-child(2) { width: 6px; height: 5px; border-radius: 46% 54% 48% 52%; --dot-turn: 7deg; }
.waiting-dots span:nth-child(3) { width: 5px; height: 6px; border-radius: 49% 47% 54% 46%; --dot-turn: -4deg; }
.waiting-dots span:nth-child(2) { animation-delay: 0.12s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.24s; }
.waiting-copy { display: block; width: 193px; height: auto; filter: drop-shadow(0 0 .28px var(--moss)); }
@keyframes dot-hop { 
  0%, 100% { transform: translateY(0) rotate(var(--dot-turn)); }
  50% { transform: translateY(-9px) rotate(var(--dot-turn)); }
}
.registered .entry-layer { display: none; }
.registered:not(.quiz-open) .waiting-layer { display: grid; }
.registration-ready:not(.registered) .entry-layer { display: grid; animation: 0.35s ease-out 0s 1 normal both running entry-appear; }
@keyframes entry-appear { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.registered .welcome-layer, .registration-ready .welcome-layer { display: none; }
.welcome-layer,.entry-layer,.waiting-layer{display:none}
.welcoming .welcome-layer{display:grid}
.welcoming:not(.welcome-ready) .welcome-layer{visibility:hidden}
.welcoming:not(.welcome-ready) .welcome-copy img,.welcoming:not(.welcome-ready) .welcome-decoration{animation:none}
.needs-entry .entry-layer{display:grid}
.waiting .waiting-layer{display:grid}
.phone.welcoming,.phone.needs-entry,.phone.waiting{background-color:#f7f4eb}
.phone.welcoming::before,.phone.needs-entry::before,.phone.waiting::before{background:rgba(248,246,238,.35);filter:none;mix-blend-mode:normal;opacity:1}
.boot-layer { display: none; position: absolute; inset: 0; z-index: 6; place-items: center; }
.booting .boot-layer,.loading-question .boot-layer { display: grid; }
.welcoming:not(.welcome-ready) .boot-layer,.welcoming.entry-loading .boot-layer { display: grid; }
.welcoming.entry-loading .welcome-layer { visibility: hidden; }
.booting .waiting-layer,.loading-question .waiting-layer { display: none; }
.booting.connection-error .boot-layer { display: none; }
.booting.connection-error .load-error { display: grid; place-items: center; }