: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("assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.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("assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.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("assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.webp") center top / cover no-repeat;
}
.reveal-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/quiz/quiz-newsprint-background-v2-q96.png.10e53b0dd7c9.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; }
}