:root {
  color-scheme: light;
  --ink: #26232d;
  --paper: #fff7e9;
  --cream: #fae6c2;
  --gold: #ffd454;
  --red: #b72829;
  --green: #237a55;
  font-family: Nunito, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #172746;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(ellipse at 50% 10%, #344568, #192844 62%, #111e35 100%) fixed;
}
#app {
  width: min(100%, 480px);
  min-height: 100svh;
  margin-inline: auto;
  background: var(--cream);
  box-shadow: 0 0 60px #071326a6;
  overflow: clip;
}
h1, h2, p { margin: 0; }
h1, h2 { line-height: 1.25; }
h2 { font-size: 20px; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #4b91bf; outline-offset: 3px; }
em { color: var(--red); font-weight: 900; font-style: normal; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .14em; }
input:not([type="radio"]), textarea {
  background: #fffdfb;
  color: var(--ink);
  border: 3px solid #eddbba;
  border-radius: 18px;
  padding: 11px 15px;
  min-height: 50px;
  width: 100%;
  box-shadow: inset 0 2px 2px #5d3b1210;
  font-weight: 750;
}
textarea { resize: vertical; }
label { display: grid; gap: 7px; font-weight: 850; }
fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
legend { margin-bottom: 8px; font-weight: 850; }
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 2px solid transparent;
  border-radius: 15px;
  padding: 7px 12px;
  color: inherit;
  font-weight: 900;
  text-decoration: none;
  text-align: center;
  background: #fffcf3;
  transition: transform .16s, box-shadow .16s, background .16s;
}
.button:not(:disabled):active { transform: translateY(3px); }
.button:disabled:not(.answer) { opacity: .66; }
.gold {
  min-height: 59px;
  border-radius: 23px;
  background: linear-gradient(#ffe480, #ffcc29 80%, #f6bf21);
  border: 3px solid #fff0af;
  box-shadow: 0 6px 0 #be9016, 0 11px 18px #704a1c38;
  font-size: 20px;
}
.green {
  min-height: 52px;
  border-radius: 18px;
  background: linear-gradient(#43a376, #257553);
  color: #fff;
  border-color: #8fd0ae;
  box-shadow: 0 4px 0 #1a543e;
}
.cream { background: #fffaf0; border-color: #e5cda6; }
.red { background: #b32e2c; color: #fff; }
.quiet {
  background: transparent;
  border: 0;
  font-weight: 750;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #705340;
}
.chip, .icon {
  min-height: 38px;
  border-radius: 12px;
  border-color: #ead7b5;
  background: #fffaf1;
  font-size: 14px;
}
.icon { min-width: 37px; padding: 3px 7px; font-size: 21px; }
.danger { margin-top: 7px; }
.center { text-align: center; }
.stack { display: grid; gap: 13px; align-content: start; min-width: 0; }
.help { color: #765e4c; font-size: 13px; line-height: 1.45; }
.lead { line-height: 1.45; font-size: 16px; }
.error { color: #a11d21; font-weight: 800; font-size: 14px; }
.error:empty { display: none; }
.loading { padding: 48px 10px; text-align: center; }
.hero, .room {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #263955;
}
.backdrop, .outside { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero > .backdrop { z-index: -2; object-position: center 60%; }
.hero::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 43%, #ffd7964d, transparent 65%);
}
.topbar {
  position: absolute;
  z-index: 15;
  inset: max(12px, env(safe-area-inset-top)) 12px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand {
  padding: 8px 12px;
  border-radius: 99px;
  color: #ab392a;
  background: #fffdf5ec;
  box-shadow: 0 3px 8px #14182d60;
  font-size: 13px;
  letter-spacing: .06em;
  text-decoration: none;
  font-weight: 950;
  min-height: 37px;
}
.sound {
  width: 39px; min-height: 39px;
  border-radius: 50%;
  background: #1b223fbd;
  color: #fff;
  border: 2px solid #fff7;
  padding: 0;
}
.snowfall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.snowfall i {
  position: absolute;
  width: var(--s);
  height: var(--s);
  left: var(--x);
  top: var(--y);
  background: #edf5ff;
  border-radius: 50%;
  opacity: .7;
  animation: snowfall var(--t) var(--d) linear infinite;
}
@keyframes snowfall { from { transform: translate(0, -300px); } to { transform: translate(28px, 350px); } }
.panel {
  position: relative;
  z-index: 3;
  padding: 23px 14px max(26px, env(safe-area-inset-bottom));
  background: linear-gradient(#fff7ea, var(--cream));
}
.snow-edge {
  position: absolute;
  z-index: -1;
  top: -32px;
  left: -2%;
  width: 104%;
  height: 43px;
  max-width: none;
  pointer-events: none;
}
.landing-hero { height: clamp(390px, 54svh, 525px); }
.logo-title {
  position: absolute;
  z-index: 4;
  top: 70px;
  inset-inline: 12px;
  color: var(--gold);
  text-align: center;
  font-weight: 1000;
  font-size: clamp(37px, 10vw, 53px);
  letter-spacing: -.045em;
  -webkit-text-stroke: 6px #30273a;
  paint-order: stroke fill;
  filter: drop-shadow(0 4px 1px #241d2c);
}
.logo-title small { display: block; color: #fff5db; font-size: .54em; letter-spacing: .03em; margin-bottom: 5px; }
.landing-box, .landing-cat { position: absolute; bottom: 22px; filter: drop-shadow(0 8px 5px #110d16a0); }
.landing-box { width: 25%; left: 8%; bottom: 26px; }
.landing-cat { width: 34%; right: 8%; animation: breathe 3s ease-in-out infinite; transform-origin: bottom center; }
.panel.center > .lead { margin: 0 0 14px; }
.steps { list-style: none; padding: 0; display: grid; gap: 8px; margin: 20px 0 0; text-align: left; }
.steps li, .saved {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 2px solid #f2e0c5;
  border-radius: 17px;
  background: #fffaf0;
  box-shadow: 0 3px 0 #dec39b66;
}
.steps li > span { font-size: 24px; }
.steps p { font-size: 13px; color: #705340; margin-top: 2px; }
.saved { flex-direction: column; margin-top: 16px; }
.profile-hero { height: 320px; }
.profile-hero .backdrop { object-position: center 55%; }
.stockings { display: flex; gap: 6%; position: absolute; inset: 145px 10% auto; align-items: flex-start; }
.stockings > div { width: 28%; position: relative; }
.stockings > div:nth-child(1) { width: 34%; }
.stocking-name {
  position: absolute;
  top: 16%;
  left: 2%;
  right: 14%;
  color: #a52725;
  font-size: clamp(11px, 4vw, 15px);
  text-align: center;
  overflow-wrap: anywhere;
  rotate: -8deg;
}
.characters, .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.character { flex-direction: column; border-color: #ead7b5; padding: 9px; box-shadow: 0 3px 0 #e6cba0; }
.character img { height: 69px; width: 100%; object-fit: contain; }
.character[aria-pressed="true"], .question-tabs [aria-current] { border-color: #e3b22c; background: #fff1c3; }
.chips, .tools, .question-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.tools { align-items: center; justify-content: space-between; }
.centered { justify-content: center; }
.question-tabs { justify-content: center; }
.question-tabs .chip { min-width: 35px; padding: 4px 7px; }
.option-edit { display: flex; align-items: center; gap: 7px; }
.option-edit input[type="radio"] { width: 23px; height: 23px; flex: none; accent-color: var(--green); }
.option-edit input[type="text"] { min-width: 0; }
.invite-hero { padding: 65px 14px 22px; }
.envelope { position: relative; padding: 0 12px 73px; overflow: hidden; border-radius: 0 0 19px 19px; }
.envelope-back, .envelope-front { position: absolute; left: 0; right: 0; bottom: 0; border: 3px solid #5c2720; }
.envelope-back { height: 130px; border-radius: 15px; background: linear-gradient(#b52a26, #8c211c); }
.envelope-front {
  z-index: 2;
  height: 91px;
  border-radius: 0 0 17px 17px;
  clip-path: polygon(0 0, 50% 49%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(#ef5550, #d43732);
}
.letter {
  position: relative;
  min-height: 329px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  padding: 17px 10px 23px;
  text-align: center;
  border-radius: 20px 20px 7px 7px;
  background: #fff8e9;
  border: 3px solid #fff;
  box-shadow: 0 6px 12px #24243258;
  animation: open-letter .82s cubic-bezier(.2,.9,.35,1) both;
}
@keyframes open-letter { from { transform: translateY(45%); } }
.letter h1 { font-size: clamp(19px, 6.15vw, 26px); overflow-wrap: anywhere; }
.polaroid {
  margin: 0 0 1px;
  padding: 8px 8px 5px;
  max-width: 100%;
  background: white;
  border-radius: 6px;
  box-shadow: 0 5px 12px #41342b55;
  rotate: -3deg;
}
.photo { position: relative; isolation: isolate; width: min(190px, 55vw); height: 128px; overflow: hidden; border-radius: 4px; }
.photo .tree-layer { width: 73px; bottom: -3px; left: 26%; }
.photo .backdrop { object-position: center 87%; }
.photo-host { position: absolute; z-index: 2; height: 105px; right: 5px; bottom: 2px; }
.polaroid b { display: block; margin: 5px 0 3px; font-size: 17px; }
.sticker {
  align-self: center;
  justify-self: center;
  display: inline-block;
  border: 2px solid #382b29;
  border-radius: 12px;
  padding: 6px 13px;
  font-weight: 900;
  background: #ffd656;
  box-shadow: 0 3px 0 #45311943;
  rotate: 2deg;
  overflow-wrap: anywhere;
}
.proof { font-size: 14px; font-weight: 850; margin-top: 2px; }
.proof small { display: block; margin-top: 3px; }
.invite-panel { padding-top: 18px; min-height: 310px; }
.ball-row { position: relative; z-index: 2; display: flex; justify-content: center; margin: -48px 0 14px; }
.bauble {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--size, 45px);
  aspect-ratio: 1;
  border-radius: 51%;
  border: 2px solid #382839;
  background: radial-gradient(circle at 28% 24%, #fff8 0%, transparent 25%), radial-gradient(circle at 75% 36%, #ffedb787 2%, transparent 6%), var(--light);
  box-shadow: inset 0 -5px 7px var(--dark), 0 3px 5px #2410246b;
}
.bauble::before {
  content: "";
  position: absolute;
  width: 28%;
  height: 11%;
  background: linear-gradient(90deg, #ba841d, #ffe496, #ad7416);
  border: 1px solid #62431b;
  border-radius: 3px 3px 1px 1px;
  bottom: 99%;
  z-index: -1;
}
.bauble::after { content: ""; position: absolute; bottom: 111%; width: 2px; height: 13%; background: #f3cc62; }
.bauble-name {
  color: #fff;
  width: 83%;
  font-weight: 950;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 3px #2b142bcb;
  overflow-wrap: anywhere;
}
.big { --size: 115px; }
.big .bauble-name { font-size: 17px; }
.mini { --size: 28px; }
.rule { margin: 0 3px 8px; font-size: 15px; text-align: center; line-height: 1.45; }
.invite-panel input { font-size: clamp(17px, 5.1vw, 22px); min-height: 57px; }
.closed-hero { height: 270px; }
.room { height: clamp(340px, 63svh, 595px); background: #ead0a1; }
.room .backdrop { object-position: center 95%; }
.tree-layer {
  position: absolute;
  width: min(100%, 412px);
  aspect-ratio: 1 / 1.875;
  left: 50%;
  bottom: -1%;
  transform: translateX(-50%);
}
.room:not(.climb-room) .tree-layer { width: auto; height: 93%; }
.pine { position: absolute; width: 100%; height: 100%; bottom: 0; object-fit: fill; }
.tree-star {
  position: absolute;
  left: 50%;
  top: -3%;
  width: 20%;
  transform: translateX(-50%);
  filter: brightness(.8);
}
.tree-star.shining { filter: drop-shadow(0 0 11px #ffea68); }
.tier {
  position: absolute;
  height: 3%;
  border-bottom: 2px solid #273a34;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
}
.tier i, .garland i {
  position: absolute;
  width: 2.9%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.4px solid #273330;
  background: #52535f;
  transform: translate(-50%, 22%);
}
.tier.lit i, .garland i.lit {
  background: var(--bulb);
  border-color: #ffefd78f;
  box-shadow: 0 0 9px var(--bulb), 0 0 14px var(--bulb);
}
.tree-decoration { position: absolute; width: 10%; max-height: 10%; object-fit: contain; transform: translate(-50%, -20%); }
.room-host, .room-elf {
  position: absolute;
  width: 30%;
  max-height: 33%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 4;
  filter: drop-shadow(0 5px 2px #32221965);
  animation: breathe 3s ease-in-out infinite;
  transform-origin: bottom center;
}
.room-host { bottom: 2%; right: 2%; }
.room-elf { bottom: 1%; left: 2%; width: 27%; }
@keyframes breathe { 50% { transform: scale(1.02, .985); } }
.crate { position: absolute; z-index: 2; width: 32%; left: 35%; bottom: 0; transform: translateX(-50%); }
.room-ball { position: absolute; transform: translate(-50%, -38%); transition: left .7s cubic-bezier(.22,1.35,.44,1), top .7s cubic-bezier(.22,1.35,.44,1); }
.active-ball { --size: clamp(47px, 15vw, 63px); z-index: 5; box-shadow: inset 0 -6px 8px var(--dark), 0 0 0 2px #fffbdf, 0 0 18px #ffe598; }
.golden { --light: #ffd958 !important; --dark: #bc7510 !important; }
.board-ball { --size: 40px; }
.board-ball.active-ball { --size: 51px; }
.climb-room { height: clamp(415px, 68svh, 590px); }
.climb-room .tree-layer { bottom: 8px; transform: translate(-50%, var(--camera, 0px)); transition: transform .7s cubic-bezier(.22,.86,.34,1); }
.garland { position: absolute; z-index: 5; left: -2%; top: -1%; width: 104%; pointer-events: none; }
.garland img { width: 100%; }
.garland i { top: 61%; width: min(4.4%, 15px); }
.speech {
  position: absolute;
  z-index: 6;
  left: 8%;
  bottom: min(27%, 142px);
  max-width: 76%;
  background: #fffbef;
  border: 2px solid #3f3029;
  border-radius: 13px 13px 13px 2px;
  box-shadow: 0 4px 8px #281a1a4a;
  padding: 8px 11px;
  font-size: 14px;
  font-weight: 800;
}
.outside { z-index: 20; pointer-events: none; animation: enter-room .8s ease-in forwards; }
@keyframes enter-room { to { transform: scale(2.3); opacity: 0; visibility: hidden; } }
.ribbon {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(255px, 82%);
  min-height: 62px;
  margin: -44px auto 0;
  isolation: isolate;
  padding: 4px 24px 10px;
  font-size: clamp(15px, 4.3vw, 19px);
  text-align: center;
  color: #fff8ec;
  line-height: 1.2;
  text-shadow: 0 1px 2px #531d1b;
  overflow-wrap: anywhere;
}
.ribbon img { position: absolute; z-index: -1; width: 100%; height: 100%; object-fit: fill; }
.round-panel { min-height: 224px; }
.question-title { text-align: center; font-size: clamp(20px, 5.4vw, 25px); overflow-wrap: anywhere; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.answer {
  position: relative;
  color: #2b2532;
  border: 3px solid #fffefa;
  box-shadow: 0 4px 0 #e0caab, 0 7px 12px #7d512523;
  background: #fffaf0;
  min-height: 89px;
  padding: 10px;
  flex-direction: column;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.answer::before { content: ""; position: absolute; top: -8px; left: -5px; width: 25px; height: 22px; background: url('/art/ui-holly-1x.webp') center / contain no-repeat; pointer-events: none; }
.choice-letter { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 13px; border-radius: 50%; background: #f7e6c7; }
.answer.correct { background: #ccf0d7; box-shadow: 0 4px 0 #72a87e; border-color: #4b9d70; }
.answer.incorrect { background: #f9d6d1; box-shadow: 0 4px 0 #cc8a7e; border-color: #ca6259; }
.edit-room { height: 280px; }
.result-room { height: clamp(368px, 55svh, 545px); }
.result-score { font-size: 17px; line-height: 1.5; margin-bottom: 3px; }
.result-score b { white-space: nowrap; font-size: 22px; }
.board-panel .lead { text-align: center; font-size: 14px; color: #70513f; }
.board-panel input { font-size: 13px; }
.board-panel .two .button { font-size: 14px; min-height: 46px; border-radius: 15px; }
.board-list { display: grid; list-style: none; padding: 0; margin: 0; gap: 9px; }
.board-list li {
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fffaf0;
  border: 2px solid #ead7b7;
  border-radius: 13px;
  min-height: 57px;
}
.board-list .is-you { border-color: #ddad2d; }
.rank { flex: none; min-width: 18px; text-align: center; font-weight: 900; color: #8c5c28; font-size: 13px; }
.board-name { flex: 1; overflow-wrap: anywhere; line-height: 1.2; }
.board-name small { display: block; font-size: 11px; color: #755741; margin-top: 3px; }
.board-score { flex: none; white-space: nowrap; }
.board-list .button { padding: 2px 6px; }
dialog {
  max-height: 82svh;
  width: min(calc(100% - 25px), 450px);
  border: 0;
  border-radius: 21px;
  color: var(--ink);
  background: var(--paper);
  padding: 15px;
  box-shadow: 0 15px 50px #0f122e77;
}
dialog::backdrop { background: #12162caf; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 9px; margin-bottom: 13px; }
.answer-review { padding: 10px; border: 2px solid #ead7b7; border-radius: 13px; background: white; overflow-wrap: anywhere; }
.answer-review p { margin-top: 4px; }
.right-text { color: #237a55; }
.wrong-text { color: #ab2927; }
#toast { position: fixed; z-index: 30; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; background: #172746; padding: 9px 19px; border-radius: 99px; box-shadow: 0 3px 10px #0005; font-weight: 800; }
@media (min-width: 550px) {
  #app { min-height: calc(100svh - 32px); margin-block: 16px; border-radius: 22px; }
}
@media (max-width: 360px) {
  .panel { padding-inline: 11px; }
  .climb-room { height: 57svh; min-height: 365px; }
  .board-list .mini { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}