/*
  Player and audience screens.
  Everything is sized in rem, and 1rem is 1% of a 16:9 stage, so the whole
  picture scales to any projector, TV or laptop without reflowing.
*/

html { font-size: min(1vw, 1.7778vh); }

.stage-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% -10%, var(--spruce-soft) 0%, var(--spruce) 42%, var(--spruce-deep) 100%);
}

#snow, #confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#snow { z-index: 0; }
#confetti { z-index: 5; }

.frame {
  position: relative;
  z-index: 1;
  width: 100rem;
  height: 56.25rem;
  display: grid;
  grid-template-rows: 9rem minmax(0, 1fr) 12rem;
}
.frame[data-phase="idle"],
.frame[data-phase="loading"] { grid-template-rows: 8rem minmax(0, 1fr) 3rem; }
.frame[data-phase="finale"] { grid-template-rows: 9rem minmax(0, 1fr) 3rem; }

/* ───────── top: string of lights, one bulb per question ───────── */

.top { position: relative; }
.lights { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
.lights .wire { fill: none; stroke: #04130f; stroke-width: 1.4; }
.bulb .cap { fill: #04130f; }
.bulb .glass { fill: #2f5248; transition: fill .5s ease; }
.bulb.is-deco-0 .glass { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(233, 187, 82, .75)); }
.bulb.is-deco-1 .glass { fill: #e4505e; filter: drop-shadow(0 0 5px rgba(228, 80, 94, .7)); }
.bulb.is-deco-2 .glass { fill: var(--snow); filter: drop-shadow(0 0 5px rgba(251, 246, 234, .7)); }
.bulb.is-now .glass { fill: var(--gold); filter: drop-shadow(0 0 7px rgba(233, 187, 82, .95)); animation: bulb-pulse 1.3s ease-in-out infinite; }
.bulb.is-right .glass { fill: #56e39a; filter: drop-shadow(0 0 7px rgba(86, 227, 154, .9)); }
.bulb.is-wrong .glass { fill: #ff5566; filter: drop-shadow(0 0 7px rgba(255, 85, 102, .85)); }
@keyframes bulb-pulse { 50% { opacity: .45; } }

.brand {
  position: absolute; left: 3.5rem; top: 5.4rem;
  font-family: var(--display); font-weight: 650; font-size: 2rem; color: var(--kraft);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.frame[data-phase="idle"] .brand,
.frame[data-phase="loading"] .brand { visibility: hidden; }

.nametag {
  position: absolute; right: 3.5rem; top: 4.9rem;
  max-width: 34rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--kraft); color: var(--ink);
  padding: .55rem 1.8rem .55rem 3rem;
  font-weight: 700; font-size: 1.9rem;
  clip-path: polygon(1.6rem 0, 100% 0, 100% 100%, 1.6rem 100%, 0 50%);
}

/* ───────── scenes ───────── */

.main { position: relative; min-height: 0; }
.scene {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 5rem;
}
.frame[data-phase="idle"] .lobby,
.frame[data-phase="intro"] .intro,
.frame[data-phase="question"] .question,
.frame[data-phase="finale"] .finale { display: flex; }

/* lobby */
.lobby-title {
  font-family: var(--display); font-weight: 820; font-size: 11.5rem; line-height: .95; letter-spacing: -.02em;
  color: var(--snow); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  text-shadow: 0 .45rem 0 rgba(0, 0, 0, .28);
}
.lobby-sub { font-size: 2.5rem; color: var(--kraft); margin-top: 1.8rem; }
.lobby-gifts { display: flex; align-items: flex-end; justify-content: center; gap: 1.1rem; margin-top: 3.2rem; }
.lobby-gifts .gift-svg { height: auto; display: block; }
.lobby-played { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2rem; max-width: 84rem; }
.lobby-played span {
  background: rgba(234, 215, 176, .13); color: var(--kraft);
  padding: .3rem 1.1rem; border-radius: 99rem; font-size: 1.45rem;
}

/* intro */
.intro-lead { font-family: var(--display); font-size: 3rem; font-weight: 500; color: var(--gold); }
.intro-name {
  font-family: var(--display); font-weight: 820; font-size: var(--name-size, 12rem); line-height: 1; letter-spacing: -.02em;
  margin-top: 1rem; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  text-shadow: 0 .45rem 0 rgba(0, 0, 0, .28);
  animation: rise .7s cubic-bezier(.2, .9, .3, 1) both;
}
.intro-rules { font-size: 2.3rem; line-height: 1.4; color: var(--kraft); margin-top: 2.6rem; max-width: 62rem; }

/* question */
.question { justify-content: flex-start; padding-top: .4rem; }
.q-count {
  position: absolute; left: 50%; top: 5.5rem; transform: translateX(-50%); white-space: nowrap;
  font-size: 1.9rem; font-weight: 700; color: var(--gold); display: none;
}
.frame[data-phase="question"] .q-count { display: block; }
.q-text {
  font-family: var(--display); font-weight: 600; font-size: var(--q-size, 4.4rem); line-height: 1.13;
  color: var(--snow); max-width: 86rem; min-height: 9.6rem;
  display: flex; align-items: center; justify-content: center;
  font-variation-settings: "SOFT" 60, "opsz" 72; text-wrap: balance;
}
.options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.4rem;
  width: 100%; max-width: 88rem; margin-top: 1.4rem;
}

/* each answer is a kraft-paper gift tag */
.tag {
  position: relative; display: flex; align-items: center; gap: 1.4rem;
  min-height: 7.2rem; padding: .9rem 2rem .9rem 5rem;
  background: var(--kraft); color: var(--ink); border: 0; border-radius: 0;
  text-align: left; font-weight: 700; font-size: var(--o-size, 2.5rem); line-height: 1.15;
  clip-path: polygon(3rem 0, 100% 0, 100% 100%, 3rem 100%, 0 50%);
  transition: background-color .25s ease, transform .2s ease, opacity .35s ease, color .25s ease;
}
.tag::before {
  content: ""; position: absolute; left: 2.2rem; top: 50%;
  width: 1.2rem; height: 1.2rem; margin-top: -.6rem; border-radius: 50%;
  background: var(--spruce-deep); box-shadow: 0 0 0 .22rem rgba(0, 0, 0, .13);
}
.tag .letter {
  flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  border: .24rem solid var(--cranberry); color: var(--cranberry);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 2.1rem; line-height: 1;
  transition: border-color .25s ease, color .25s ease;
}
.tag .txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tag .pct { flex: none; font-family: var(--display); font-weight: 800; font-size: 2.2rem; color: var(--spruce); }
.tag .bar {
  position: absolute; left: 3rem; bottom: 0; height: .75rem; width: 0;
  background: var(--spruce-soft); transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
}
.tag:not(:disabled):hover { background: #f4e6c6; }
.tag:focus-visible { outline: none; box-shadow: inset 0 0 0 .4rem var(--spruce); }

.tag.is-selected { background: #f7dc8c; transform: scale(1.025); }
.tag.is-locked { background: var(--gold); animation: locked-pulse 1.1s ease-in-out infinite; }
.tag.is-correct { background: var(--holly); color: #fff; animation: correct-flash .45s ease-in-out 3; }
.tag.is-wrong { background: var(--cranberry); color: #fff; }
.tag.is-correct .letter, .tag.is-wrong .letter { border-color: #fff; color: #fff; }
.tag.is-correct .pct, .tag.is-wrong .pct { color: #fff; }
.tag.is-correct .bar, .tag.is-wrong .bar { background: rgba(255, 255, 255, .55); }
.tag.is-dim { opacity: .5; }
.tag.is-hidden { opacity: .1; }
.tag.is-hidden .txt, .tag.is-hidden .letter, .tag.is-hidden .pct, .tag.is-hidden .bar { visibility: hidden; }

@keyframes locked-pulse { 50% { background: #f6d98a; } }
@keyframes correct-flash { 50% { background: #7ff0b3; } }

.question.enter .q-text { animation: rise .6s cubic-bezier(.2, .9, .3, 1) both; }
.question.enter .tag { animation: tag-in .45s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(.9s + var(--i) * .45s); }
@keyframes rise { from { opacity: 0; transform: translateY(1.6rem); } }
@keyframes tag-in { from { opacity: 0; transform: translateX(-2.4rem); } }

.q-foot { min-height: 5rem; margin-top: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 2rem; }
.verdict { font-family: var(--display); font-size: 2.6rem; font-weight: 600; color: var(--kraft); }
.verdict.is-good { color: #7ff0b3; }
.verdict.is-bad { color: #ff9aa4; }
.lock-btn {
  background: var(--cranberry); color: #fff; border: 0; border-radius: 99rem;
  padding: .9rem 3.2rem; font-size: 2.3rem; font-weight: 700;
  box-shadow: 0 .45rem 0 var(--cranberry-deep);
}
.lock-btn:hover { background: #cc2a3a; }
.lock-btn:active { transform: translateY(.3rem); box-shadow: 0 .15rem 0 var(--cranberry-deep); }
.lock-btn:focus-visible, .ll:focus-visible, .gift:focus-visible, .corner button:focus-visible {
  outline: .3rem solid var(--gold); outline-offset: .3rem;
}

/* ───────── lifeline panel (audience vote, phone a friend) ───────── */

.side {
  position: absolute; right: 3rem; top: 0; bottom: 0; width: 25rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--kraft); color: var(--ink); border-radius: 1.2rem; padding: 1.6rem 1.8rem;
  animation: side-in .45s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes side-in { from { opacity: 0; transform: translateX(3rem); } }
.side h3 { font-family: var(--display); font-size: 2.35rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.side p { font-size: 1.55rem; line-height: 1.3; margin-top: .4rem; }
.side img { width: 17.5rem; height: 17.5rem; margin: .9rem 0 .3rem; border-radius: .6rem; background: #fff; }
.side .url { font-size: 1.25rem; font-weight: 700; overflow-wrap: anywhere; }
.side .count { font-family: var(--display); font-size: 2.2rem; font-weight: 700; color: var(--cranberry-deep); margin-top: .6rem; }
.side .clock { font-family: var(--display); font-size: 12rem; font-weight: 820; line-height: 1; color: var(--cranberry-deep); font-variant-numeric: tabular-nums; margin-top: 1rem; }

.frame.has-side .question { right: 28rem; padding: .6rem 1.5rem 0 3.5rem; }
.frame.has-side .q-text { font-size: calc(var(--q-size, 4.4rem) * .8); }
.frame.has-side .options { gap: 1.2rem 1.4rem; }
.frame.has-side .tag { font-size: calc(var(--o-size, 2.5rem) * .78); min-height: 6.4rem; padding-left: 4.4rem; gap: 1rem; }
.frame.has-side .tag .letter { width: 3rem; height: 3rem; font-size: 1.7rem; }

/* ───────── bottom: lifelines, clock, gifts earned ───────── */

.dock {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  padding: 0 3.5rem 3.2rem;
}
.lifelines { grid-column: 1; }
.timer { grid-column: 2; }
.pile { grid-column: 3; }
.frame[data-phase="idle"] .dock,
.frame[data-phase="loading"] .dock,
.frame[data-phase="finale"] .dock { visibility: hidden; }

.lifelines { display: flex; gap: 1.5rem; }
.ll {
  width: 6.6rem; display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: 0; padding: 0; color: var(--kraft); border-radius: .6rem;
}
.ll .bauble {
  position: relative; width: 5rem; height: 5rem; margin-top: .8rem; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #e85462, var(--cranberry) 55%, var(--cranberry-deep));
  display: grid; place-items: center; color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ll .bauble::before {
  content: ""; position: absolute; top: -.75rem; left: 50%; width: 1.5rem; height: .95rem; margin-left: -.75rem;
  background: var(--gold); border-radius: .25rem .25rem 0 0;
}
.ll svg { width: 2.8rem; height: 2.8rem; }
.ll .ll-5050 { font-family: var(--display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; }
.ll .ll-name { font-size: 1.08rem; line-height: 1.12; min-height: 2.42rem; }
.ll:not(:disabled):hover .bauble { transform: translateY(-.35rem); }
.ll.is-active .bauble { box-shadow: 0 0 0 .35rem var(--gold); }
.ll.is-used { opacity: .5; }
.ll.is-used .bauble { background: #27463d; color: rgba(255, 255, 255, .55); }
.ll.is-used .bauble::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: .28rem; margin-top: -.14rem;
  background: var(--snow); transform: rotate(-38deg); border-radius: 1rem;
}
.ll.is-used .bauble::before { background: #6c7f78; }

.timer { display: flex; align-items: center; gap: 1.2rem; padding-bottom: 2.2rem; }
.timer-track { width: 19rem; height: 1.5rem; border-radius: 99rem; background: rgba(0, 0, 0, .38); overflow: hidden; }
.timer-bar {
  height: 100%; width: 100%; border-radius: 99rem; transform-origin: left center;
  background: repeating-linear-gradient(-45deg, var(--cranberry) 0 1.2rem, var(--snow) 1.2rem 2.4rem);
}
.timer-num { font-family: var(--display); font-weight: 800; font-size: 2.8rem; line-height: 1; min-width: 4.2rem; text-align: left; font-variant-numeric: tabular-nums; }
.timer.is-low .timer-num { color: #ff9aa4; }

.pile { justify-self: end; display: flex; align-items: flex-end; gap: .35rem; }
.pile-label { font-size: 1.3rem; line-height: 1.2; color: var(--kraft); margin-right: .9rem; margin-bottom: 1.6rem; align-self: flex-end; text-align: right; }
.pile .gift-svg { width: 4rem; height: auto; display: block; margin-bottom: 1.2rem; }
.pile .gift-svg.pop { animation: pop .7s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-3rem) scale(.4); } }

/* ───────── gift finale ───────── */

.finale { gap: 1.2rem; }
.bell {
  position: absolute; top: .2rem; left: 50%; white-space: nowrap;
  background: var(--cranberry); color: #fff; padding: .7rem 2.4rem; border-radius: 99rem;
  font-size: 2rem; font-weight: 700;
  animation: bell-in 7s ease both;
}
@keyframes bell-in {
  0% { opacity: 0; transform: translate(-50%, -2rem); }
  6%, 86% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}
.finale-title { font-family: var(--display); font-weight: 700; font-size: 5rem; line-height: 1.05; font-variation-settings: "SOFT" 100, "WONK" 1; }

.gift-row { display: flex; align-items: flex-end; justify-content: center; gap: 2rem; min-height: 15rem; margin-top: 1rem; }
.gift {
  background: none; border: 0; padding: 0; border-radius: .8rem;
  width: var(--gift-size, 13rem);
  transition: width .6s cubic-bezier(.2, .9, .3, 1), opacity .45s ease, transform .3s ease, margin .6s ease;
}
.gift .gift-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gift:not(:disabled):hover { transform: translateY(-.9rem) rotate(-2deg); }

.finale[data-step="picked"] .gift:not(.is-chosen),
.finale[data-step="open"] .gift:not(.is-chosen) { width: 0; opacity: 0; margin: 0 -1rem; pointer-events: none; }
.finale[data-step="picked"] .gift.is-chosen { width: 21rem; animation: wobble .55s ease-in-out infinite; }
.finale[data-step="open"] .gift.is-chosen { width: 10.5rem; }
.finale[data-step="open"] .gift-row { min-height: 0; margin-top: 3.6rem; }
@keyframes wobble { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

.gift-svg .g-lid {
  transition: transform .9s cubic-bezier(.2, 1.5, .4, 1);
  transform-box: fill-box; transform-origin: 50% 100%;
}
.gift-svg .g-glow { opacity: 0; transition: opacity .7s ease .15s; }
.finale[data-step="open"] .is-chosen .g-lid { transform: translate(-14px, -26px) rotate(-16deg); }
.finale[data-step="open"] .is-chosen .g-glow { opacity: 1; }

.prize { display: none; }
.finale[data-step="open"] .prize { display: block; }
.prize-amount {
  font-family: var(--display); font-weight: 820; font-size: var(--prize-size, 15rem); line-height: 1; letter-spacing: -.02em;
  color: var(--gold); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  text-shadow: 0 .5rem 0 rgba(0, 0, 0, .3); font-variant-numeric: tabular-nums;
}
.prize-note { font-size: 2.7rem; color: var(--snow); margin-top: .8rem; }

/* ───────── small helpers ───────── */

.offline, .toast {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 7;
  padding: .6rem 1.6rem; border-radius: 99rem; font-size: max(13px, 1.4rem); font-weight: 700; white-space: nowrap;
}
.offline { background: var(--gold); color: var(--ink); }
.toast { background: var(--snow); color: var(--ink); bottom: 4.5rem; }

/* Sound and full-screen buttons: tucked away until someone moves the mouse or taps. */
.corner { position: fixed; left: .9rem; bottom: .6rem; z-index: 6; display: flex; gap: .5rem; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
body.show-corner .corner, .corner:focus-within { opacity: .9; pointer-events: auto; }
.corner button {
  font-size: max(11px, 1rem); background: rgba(0, 0, 0, .5); color: var(--snow);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 99rem; padding: .35em 1em;
}
body.is-preview .corner, body.is-preview #snow { display: none; }

.gate {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px;
  background: rgba(6, 22, 18, .88);
}
.gate-card {
  width: min(420px, 100%); background: var(--kraft); color: var(--ink); border-radius: 14px; padding: 28px;
  font-size: 17px; line-height: 1.45; display: grid; gap: 10px;
}
.gate-card h2 { font-family: var(--display); font-size: 30px; font-weight: 700; }
.gate-card label { font-weight: 700; margin-top: 6px; }
.gate-card input {
  font-size: 26px; font-weight: 700; letter-spacing: .18em; text-align: center; padding: 10px;
  border: 2px solid var(--ink); border-radius: 8px; background: #fffaf0; color: var(--ink);
}
.gate-card input:focus-visible { outline: 3px solid var(--cranberry); outline-offset: 2px; }
.gate-card button {
  background: var(--cranberry); color: #fff; border: 0; border-radius: 99px; padding: 12px; font-weight: 700; font-size: 18px;
}
.gate-card a { color: var(--ink); text-align: center; font-size: 15px; }
.gate-error { color: var(--cranberry-deep); font-weight: 700; min-height: 1.4em; }

/* ───────── tall screens (a phone or tablet held upright) ───────── */

@media (max-aspect-ratio: 1/1) {
  html { font-size: 2.15vw; }
  .stage-body { place-items: start center; overflow-x: hidden; overflow-y: auto; }
  .frame,
  .frame[data-phase="idle"],
  .frame[data-phase="loading"],
  .frame[data-phase="finale"] { width: 100vw; height: auto; min-height: 100vh; grid-template-rows: 9rem 1fr auto; }
  .frame[data-phase="question"] { grid-template-rows: 12.5rem 1fr auto; }
  .brand { top: 4.6rem; left: 2rem; }
  .nametag { top: 4.2rem; right: 2rem; max-width: 22rem; }
  .q-count { top: 9.4rem; font-size: 2.3rem; }
  .scene { position: relative; inset: auto; padding: 1.5rem 2.2rem; }
  .lobby-title, .intro-name { font-size: 7rem; }
  .q-text { font-size: calc(var(--q-size, 4.4rem) * .78); min-height: 0; }
  .options { grid-template-columns: 1fr; }
  .tag { min-height: 6.4rem; }
  .side { position: relative; right: auto; top: auto; bottom: auto; width: auto; margin: 1rem 2.2rem; }
  .frame.has-side .question { right: auto; padding: 1.5rem 2.2rem; }
  .dock { grid-template-columns: 1fr; justify-items: center; gap: 1.4rem; padding: 1.5rem 2rem 5rem; }
  .pile { justify-self: center; }
  .gift-row { flex-wrap: wrap; }
  .finale-title { font-size: 3.6rem; }
  .prize-amount { font-size: calc(var(--prize-size, 15rem) * .55); }
  .bell { position: relative; left: auto; white-space: normal; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bell { animation: none !important; transform: translateX(-50%); }
}