:root {
  --option-card-border-width: 5px;
  --option-card-border-color: #fffef9;
  --option-card-radius: 28px;
  --option-card-inner-radius: 23px;
  --option-card-shadow: 0 6px 13px rgba(65, 58, 44, .17);
  --ink: #343a33;
  --moss: #3d5644;
  --paper: #ebe8df;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: #e5e9e1;
  color: var(--ink);
  font-family: "Hiragino Sans GB", "Noto Sans SC", sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
.phone {
  width: min(390px, 100vw);
  min-height: min(844px, 100vh);
  overflow: hidden;
  position: relative;
  background: var(--paper) url("https://img.zhwedding.cn/assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.r8.54731722dd30d7ab.webp") center top / cover no-repeat;
  box-shadow: 0 18px 45px rgba(48, 60, 50, .22);
}
.question-frame { display: none; width: 100%; height: 844px; border: 0; position: relative; z-index: 20; }
.live-question .question-frame { display: block; }
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("https://img.zhwedding.cn/assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.r8.54731722dd30d7ab.webp") center top / cover no-repeat;
  filter: contrast(1.32) brightness(.98);
  mix-blend-mode: multiply;
  opacity: .34;
}
.entry, .wait-card, .screen, .sent-layer, .reveal-layer { position: absolute; inset: 0; z-index: 1; }
.entry, .wait-card { display: none; place-items: center; padding: 28px; text-align: center; }
.needs-entry .entry { display: grid; }
.waiting:not(.needs-entry) .wait-card { display: grid; }
.entry-panel {
  width: min(100%, 300px);
  transform: translateY(-45px);
}
.entry-panel h1 {
  margin: 0 0 28px;
  color: var(--moss);
  font: 800 31px/1.18 "STKaiti", "Kaiti SC", serif;
}
form { display: grid; gap: 15px; text-align: left; }
label { display: grid; gap: 7px; color: #526457; font-weight: 800; }
input {
  width: 100%;
  height: 44px;
  border: 1.5px solid rgba(59, 89, 70, .56);
  border-radius: 9px 11px 10px 12px / 11px 9px 12px 10px;
  background: rgba(255, 254, 249, .82);
  outline: none;
  padding: 0 12px;
  color: var(--ink);
  font-size: 19px;
}
.entry-panel form button {
  width: 178px;
  justify-self: center;
  margin-top: 12px;
  border: 0;
  border-radius: 9px;
  padding: 12px 18px;
  background: #314d3b;
  color: #fffef9;
  font-weight: 900;
  transform: rotate(-.4deg);
}
.entry-error { position: absolute; top: 720px; left: 0; right: 0; z-index: 8; color: #9c3535; text-align: center; font-size: 14px; }
.entry-error:empty { display: none; }
.load-error { display: none; position: absolute; inset: 0; z-index: 20; margin: 0; padding: 28px; color: #617366; text-align: center; font-size: 16px; }
.result-frame { display: none; width: 100%; height: min(844px, 100vh); border: 0; position: relative; z-index: 20; }
.completed .result-frame { display: block; }
.completed.result-error .load-error:not(:empty) { display: grid; place-items: center; }
.completed.result-error .result-frame { display: none; }
.dots { display: flex; height: 28px; align-items: flex-end; justify-content: center; gap: 5px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--moss); animation: dot-hop .72s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: .12s; }
.dots span:nth-child(3) { animation-delay: .24s; }
@keyframes dot-hop { 50% { transform: translateY(-9px); } }
.wait-card p { margin: 8px 0 0; color: #617366; font-weight: 900; }
.screen { display: none; z-index: 2; padding-bottom: 15px; }
.quiz-open .screen, .locked .screen, .submitted .screen { display: block; }
.status {
  height: 40px;
  padding: 13px 19px 0;
  display: flex;
  justify-content: space-between;
  font: 700 12px Arial, sans-serif;
  color: #565a51;
}
.question-title-art {
  display: block;
  width: calc(100% - 48px);
  height: auto;
  margin: 3px auto 18px;
}
.options {
  position: absolute;
  top: 178px;
  left: 0;
  right: 0;
  height: 468px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 18px;
  container-type: inline-size;
}
.option {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  border: var(--option-card-border-width) solid var(--option-card-border-color);
  padding: 0;
  background: transparent;
  border-radius: var(--option-card-radius);
  position: relative;
  text-align: left;
  box-shadow: var(--option-card-shadow);
}
.option:disabled { cursor: default; }
.option-visual {
  display: block;
  height: calc(56.25cqw + 6.875px);
  overflow: hidden;
  border-radius: var(--option-card-inner-radius);
  background: var(--option-card-border-color);
}
.option img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.option[data-option="b"] img { object-position: center top; }
.option.selected {
  box-shadow: 0 0 0 2px rgba(101, 103, 97, .52), 0 10px 19px rgba(74, 76, 70, .31);
}
.answer-strip {
  position: absolute;
  top: 662px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.submit {
  width: 178px;
  border: 0;
  padding: 0;
  background: transparent;
  transform: rotate(-.4deg);
}
.submit img { display: block; width: 100%; height: auto; }
.submit:disabled {
  opacity: .42;
  filter: grayscale(.88) brightness(1.2) contrast(.78);
  cursor: default;
}
.sent-layer {
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(67, 70, 68, .48);
  padding: 25px;
}
.submitted .sent-layer { display: flex; }
.sent-material { display: block; width: min(292px, 100%); height: auto; }
.reveal-layer {
  z-index: 12;
  display: none;
  overflow: hidden;
  background: var(--paper) url("https://img.zhwedding.cn/assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.r8.54731722dd30d7ab.webp") center top / cover no-repeat;
}
.reveal-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("https://img.zhwedding.cn/assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.r8.54731722dd30d7ab.webp") center top / cover no-repeat;
  filter: contrast(1.28) brightness(1.02);
  mix-blend-mode: multiply;
  opacity: .32;
}
.revealed .reveal-layer, .result-correct .reveal-layer, .result-wrong .reveal-layer { display: block; }
.reveal-answer-label {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 2;
  display: block;
  width: 218px;
  height: auto;
  transform: translateX(-50%) rotate(-1.4deg);
}
.reveal-mountains {
  position: absolute;
  z-index: 0;
  width: 290%;
  max-width: none;
  right: -49%;
  bottom: 10px;
  opacity: .98;
  transform: rotate(-.6deg);
  pointer-events: none;
}
.reveal-skier {
  position: absolute;
  z-index: 1;
  top: 188px;
  right: 8px;
  width: 326px;
  margin: 0;
  transform: translate(120%, -122%) rotate(-19deg);
  animation: skier-slide-in 1.35s cubic-bezier(.18, .83, .18, 1) 120ms both;
}
.reveal-skier img { display: block; width: 100%; height: auto; }
@keyframes skier-slide-in {
  0% { transform: translate(120%, -122%) rotate(-19deg); }
  78% { transform: translate(-3%, 3%) rotate(-9deg); }
  100% { transform: translate(0, 0) rotate(-7deg); }
}
.reveal-result-layer {
  position: absolute;
  bottom: 105px;
  left: 50%;
  z-index: 4;
  display: none;
  width: min(292px, calc(100% - 36px));
  transform: translateX(-50%);
  opacity: 0;
}
.reveal-result-layer img { display: block; width: 100%; height: auto; }
.result-correct .reveal-result-layer.correct,
.result-wrong .reveal-result-layer.wrong {
  display: block;
  animation: result-appear .32s ease-out 1.48s both;
}
@keyframes result-appear {
  from { opacity: 0; transform: translate(-50%, 10px) rotate(1deg); }
  to { opacity: 1; transform: translate(-50%, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-skier, .reveal-result-layer { animation-duration: 1ms !important; animation-delay: 1ms !important; }
}

.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; }

.table-choice[data-table="\4e3b "] .table-number{width:26px;height:26px}
.table-choice[data-table="10"] .table-number,.table-choice[data-table="12"] .table-number{height:18.140625px;width:auto}

*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, [role="button"]:focus, [tabindex]:focus { outline: none; }
html[data-keyboard-navigation] :focus { outline: 2px solid #3b5946; outline-offset: 3px; }
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus:not(:focus-visible) { outline: none; }
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid #3b5946;
  outline-offset: 3px;
}

#screen { padding-top: 16px; }
.two-card-question .screen { padding-top: 16px; }
.question-canvas { position: absolute !important; top: 0; left: 50%; height: 844px; padding-top: inherit; transform-origin: center top; }
.question-canvas > * { z-index: 1; }
.question-canvas > .question-title-art { position: relative; }
.sent-layer { padding: 25px; }
.sent-layer > img { width: min(292px, 100%); height: auto; transform: translateY(-24px); }
.mobile-reveal-content { position: absolute; top: 0; left: 50%; transform-origin: center top; }
.phone.loading-question .question-frame { display: block; visibility: hidden; }
.phone.loading-question #screen { display: block; visibility: hidden; }
.question-canvas .option-visual { height: var(--option-visual-height, 206px); }

.question-canvas > .question-title-art,
.question-canvas > .title-art {
  position: absolute !important; top: 16px !important; left: 0;
  width: 390px; height: 128px; margin: 0 !important;
  object-fit: contain; transform: none !important;
}
.question-region { position: absolute; top: 174px; left: 0; width: 390px; height: 447px; }
.question-region > .options { top: 0 !important; height: 447px !important; }
.question-region > .options.q1 { justify-content: flex-start; }
.three-card-question .question-region > .options { gap: 25.125px; }
.question-region > .question-collage { top: 0 !important; transform: none !important; }
.question-region.collage-options > .question-collage { top: -4px !important; }
.question-region.photo-options { padding-top: 17.875px; }
.question-region.photo-options > .dormitory-card { margin-top: 0; transform: none; }
.question-region.photo-options > .options { position: relative; height: auto !important; margin-top: 10px; transform: none; }
.question-canvas > .answer-strip { top: 651px !important; }
.mobile-reveal-content .reveal-result,
.mobile-reveal-content .reveal-result-layer { bottom: 105px; width: 292px; max-width: none; }
.mobile-reveal-content .reveal-result > img,
.mobile-reveal-content .reveal-result-layer > img {
  width: 100%; height: auto;
}
.entry-layer > .entry-inner {
  position: absolute; top: 0; left: 50%; width: 316px; min-height: 728px;
  padding-top: 70px; transform-origin: center top;
}
.phone.loading-question .load-error:not(:empty) { display: grid; place-items: center; }
.phone.loading-question.connection-error .boot-layer { display: none; }

.load-error button { display:block; margin:16px auto 0; padding:10px 24px; font:inherit; color:#fff; background:#26684c; border:0; border-radius:4px; cursor:pointer; }
.entry-error button { display:block; margin:8px auto; padding:8px 20px; font:inherit; color:#fff; background:#26684c; border:0; border-radius:4px; cursor:pointer; }
.phone:is(.booting,.welcoming,.needs-entry,.waiting) { background-image:var(--entry-background,none); }
.phone:is(.booting,.welcoming,.needs-entry,.waiting)::before { background-image:none; }
.entry-art { position:relative; display:block; aspect-ratio:var(--entry-aspect); }
.entry-art > .entry-art-image { display:block; width:100%; height:100%; margin:0; object-fit:contain; visibility:hidden; }
.entry-art > .entry-art-label { position:absolute; inset:0; display:grid; place-items:center; color:var(--moss); font:700 22px/1.25 STKaiti,"Kaiti SC",serif; }
.entry-art.art-ready > .entry-art-image { visibility:visible; }
.entry-art.art-ready > .entry-art-label { visibility:hidden; }
.entry-title-art { width:270px; margin:0 auto; }
.entry-title-art > .entry-art-label { font-size:26px; white-space:pre-line; }
.entry-prompt > .entry-art-label { font-size:14px; }
.table-number > .entry-art-label { font-size:25px; }
.table-choice.selected .entry-art-label { color:#fff; }
.enter-activity { height:60px; }
.entry-submit-art { width:100%; height:100%; }
.entry-submit-art > .entry-art-label { color:#fff; background:#3b5946; border-radius:4px; font-size:22px; }
.welcome-ready.welcome-art-ready .welcome-copy img,.welcome-ready.welcome-art-ready .welcome-decoration { animation-duration:2s; }
.welcome-hold .welcome-copy img,.welcome-hold .welcome-decoration { animation-play-state:paused; }
.welcoming.welcome-hold .boot-layer { display:grid; inset:auto 0 28px; height:26px; pointer-events:none; }
.welcoming .entry-error { display:block; z-index:10; }
.phone.reveal-pending .question-frame,.phone.reveal-pending #screen { visibility:visible; }
.phone.reveal-pending .boot-layer { inset:auto 0 16px; height:26px; pointer-events:none; }
.phone.reveal-pending .load-error { z-index:12; }
.phone.loading-waiting { background-image:var(--entry-background,none); }
.loading-waiting .waiting-layer { display:grid; }
.loading-waiting .waiting-copy { visibility:hidden; }
.loading-waiting .load-error:not(:empty) { display:grid; place-items:center; }
.reveal-feedback-unused { display:none !important; }