/* TV display — designed on a fixed 1920×1080 stage, scaled to fit any screen. */
html, body { overflow: hidden; background: #2A0F2D; }
body.hide-cursor, body.hide-cursor * { cursor: none !important; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #2A0F2D; }
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }

/* ---------- background ---------- */
.bg { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(179,90,147,.85) 0%, rgba(126,58,124,.55) 35%, rgba(90,37,96,0) 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(242,168,75,.18) 0%, rgba(242,168,75,0) 70%),
    linear-gradient(180deg, #5A2560 0%, #4A1C50 55%, #3A163E 100%); }
.bricks { position: absolute; inset: 0; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cpath d='M0 1.5H160M0 61.5H160M1.5 0V60M81.5 60V120' stroke='%231A1418' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-size: 160px 120px; }
.beam { position: absolute; top: -200px; width: 700px; height: 1500px; opacity: .22; filter: blur(30px);
  background: linear-gradient(180deg, rgba(255,214,107,.9), rgba(255,214,107,0) 75%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.beam-l { left: 80px; transform-origin: 50% 0; animation: swayL 14s ease-in-out infinite; }
.beam-r { right: 80px; transform-origin: 50% 0; animation: swayR 16s ease-in-out infinite; }
@keyframes swayL { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(-10deg); } }
@keyframes swayR { 0%,100% { transform: rotate(24deg); } 50% { transform: rotate(10deg); } }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(26,10,28,.75) 100%); pointer-events: none; }

/* ---------- neon split heart (coral / teal) ---------- */
.neon-heart { position: absolute; overflow: visible; }
.neon-heart use { fill: none; stroke-width: 9; stroke-linecap: round; }
.neon-heart .nh-l { stroke: #FFB3A3; filter: drop-shadow(0 0 6px #FF5B4F) drop-shadow(0 0 18px #FF5B4F) drop-shadow(0 0 40px rgba(255,91,79,.8)); }
.neon-heart .nh-r { stroke: #B8F1EA; filter: drop-shadow(0 0 6px #14A39A) drop-shadow(0 0 18px #14A39A) drop-shadow(0 0 40px rgba(20,163,154,.8)); }
.neon-heart { animation: neonFlicker 7s linear infinite; }
@keyframes neonFlicker { 0%, 91%, 93.5%, 100% { opacity: 1; } 92% { opacity: .55; } 93% { opacity: .9; } 92.5% { opacity: .65; } }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease-out), visibility 0s .6s; }
.mode-scores .screen-scores, .mode-idle .screen-idle, .mode-winner .screen-winner, .mode-question .screen-question, .mode-lines .screen-lines, .mode-mission .screen-mission, .mode-tiebreak .screen-tiebreak, .mode-awards .screen-awards { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-out), visibility 0s 0s; }

/* ---------- scores ---------- */
.sb-head { position: absolute; left: 0; right: 0; top: 0; height: 380px; }
.sb-head .neon-heart { width: 290px; height: 276px; left: calc(50% - 145px); top: 4px; opacity: .9; }
.sb-logo { position: absolute; height: 200px; left: 50%; top: 18px; transform: translateX(-50%); filter: drop-shadow(0 10px 24px rgba(26,10,28,.6)); }
.round { position: absolute; left: 0; right: 0; top: 226px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .4s, transform .4s var(--ease-pop); }
.round.hidden { opacity: 0; transform: translateY(-20px) scale(.9); }
.round-pill { background: var(--gradient-cta); color: #fff; box-shadow: var(--glow-cta); border-radius: 999px; padding: 4px 50px 6px;
  font-family: var(--font-condensed); font-weight: 700; font-size: 54px; line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(58,22,62,.35); white-space: nowrap; max-width: 1500px; overflow: hidden; text-overflow: ellipsis; }
.round-pill.pulse { animation: pillPop .55s var(--ease-pop); }
@keyframes pillPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.round-sub { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 34px; color: var(--mbh-honey-soft); text-shadow: 0 3px 0 rgba(50,18,54,.5), 0 0 18px rgba(50,18,54,.45); min-height: 0; }
.round-sub:empty { display: none; }

.teams { position: absolute; left: 90px; right: 90px; top: 478px; height: 560px; display: flex; justify-content: center; gap: 60px; }
.team { --tc: var(--c-honey); --rot: 0deg; position: relative; width: 540px; height: 545px; background: var(--mbh-paper); color: var(--mbh-ink);
  border: 6px solid var(--mbh-ink); border-radius: 34px; box-shadow: 12px 12px 0 var(--mbh-ink);
  transform: rotate(var(--rot)); transition: transform .5s var(--ease-pop), box-shadow .5s var(--ease-out);
  display: flex; flex-direction: column; }
.team:nth-child(1) { --rot: -1.6deg; } .team:nth-child(2) { --rot: .8deg; } .team:nth-child(3) { --rot: -.9deg; }
.team[data-color="honey"] { --tc: var(--c-honey); } .team[data-color="teal"] { --tc: var(--c-teal); } .team[data-color="coral"] { --tc: var(--c-coral); }
.team[data-color="silver"] { --tc: var(--c-silver); } .team[data-color="plum"] { --tc: var(--c-plum); }
.team-head { background: var(--tc); border-bottom: 6px solid var(--mbh-ink); border-radius: 27px 27px 0 0; height: 124px; padding: 0 30px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.team-name { display: inline-block; font-family: var(--font-condensed); font-weight: 700; font-size: 70px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.team-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.team-score { font-family: var(--font-condensed); font-weight: 700; font-size: 280px; line-height: .9; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.team-score.bump { animation: bump .45s var(--ease-pop); }
@keyframes bump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.team-pts { font-family: var(--font-serif); font-style: italic; font-size: 34px; color: var(--mbh-gray-500); margin-top: 6px; }
.team-heart { position: absolute; width: 64px; height: 60px; right: 26px; bottom: 22px; opacity: .9; }
.team-heart path { fill: var(--tc); stroke: var(--mbh-ink); stroke-width: 22; }

.crown { position: absolute; left: 50%; top: -100px; width: 150px; height: 110px; margin-left: -75px; opacity: 0; transform: translateY(30px) scale(.4) rotate(-12deg); transition: opacity .35s, transform .55s var(--ease-pop); pointer-events: none; z-index: 3; }
.crown svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 22px rgba(255,214,107,.9)); }
.leaders-on .team.leader { transform: translateY(-16px) rotate(var(--rot)) scale(1.04); box-shadow: 12px 12px 0 var(--mbh-ink), 0 0 0 10px var(--mbh-honey-soft), 0 0 90px 28px rgba(245,169,28,.6); }
.leaders-on .team.leader .crown { opacity: 1; transform: translateY(0) scale(1) rotate(-6deg); animation: crownBob 2.4s ease-in-out .6s infinite; }
@keyframes crownBob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

.pop { position: absolute; left: 50%; top: 52%; z-index: 4; font-family: var(--font-condensed); font-weight: 700; font-size: 110px; line-height: 1;
  padding: 6px 34px 12px; border-radius: 999px; border: 6px solid var(--mbh-ink); background: var(--tc); color: var(--mbh-ink); box-shadow: 8px 8px 0 var(--mbh-ink);
  transform: translate(-50%, -50%); animation: popUp 1.5s var(--ease-out) forwards; white-space: nowrap; }
.pop.neg { background: var(--mbh-ink); color: var(--mbh-paper); border-color: var(--mbh-paper); box-shadow: 8px 8px 0 rgba(0,0,0,.4); }
@keyframes popUp {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  18% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; }
  30% { transform: translate(-50%, -80%) scale(1); }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(.9); opacity: 0; } }

/* ---------- idle ---------- */
.screen-idle { display: flex; flex-direction: column; align-items: center; }
.idle-kicker { margin-top: 70px; font-family: var(--font-condensed); font-weight: 700; font-size: 46px; letter-spacing: .05em; text-transform: uppercase; color: var(--mbh-cream); text-shadow: 0 3px 0 rgba(50,18,54,.4), 0 6px 22px rgba(50,18,54,.6); }
.idle-art { position: relative; width: 900px; height: 680px; margin-top: 10px; display: grid; place-items: center; }
.idle-art .neon-heart { width: 800px; height: 760px; left: 50px; top: -40px; }
.idle-logo { position: relative; height: 560px; filter: drop-shadow(0 18px 40px rgba(26,10,28,.7)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.idle-tag { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 66px; color: var(--mbh-cream); text-shadow: 0 3px 0 rgba(50,18,54,.4), 0 6px 22px rgba(50,18,54,.6); margin-top: 8px; }
.idle-note { font-family: var(--font-script); font-size: 54px; color: var(--mbh-coral-soft); margin-top: 6px; transform: rotate(-2deg); text-shadow: 0 3px 0 rgba(50,18,54,.5); }
.idle-tag:empty, .idle-note:empty, .idle-kicker:empty { display: none; }

/* ---------- winner ---------- */
#confetti { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; z-index: 5; }
.win-logo { position: absolute; height: 190px; left: 50%; top: 30px; transform: translateX(-50%); }
.win-title { position: absolute; left: 0; right: 0; top: 215px; text-align: center; font-family: var(--font-marker); font-size: 170px; line-height: 1; color: var(--mbh-honey-soft);
  -webkit-text-stroke: 12px var(--mbh-ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--mbh-ink), 0 0 60px rgba(255,214,107,.6); transform: rotate(-3deg); }
.mode-winner .win-title { animation: winIn .9s var(--ease-pop) both; }
@keyframes winIn { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
.win-teams { position: absolute; left: 0; right: 0; top: 470px; display: flex; justify-content: center; gap: 70px; }
.win-card { --tc: var(--c-honey); width: 760px; background: var(--mbh-paper); color: var(--mbh-ink); border: 7px solid var(--mbh-ink); border-radius: 38px; box-shadow: 14px 14px 0 var(--mbh-ink), 0 0 0 12px var(--mbh-honey-soft), 0 0 120px 40px rgba(245,169,28,.55); text-align: center; overflow: hidden; position: relative; }
.win-teams.multi .win-card { width: 560px; }
.win-card[data-color="teal"] { --tc: var(--c-teal); } .win-card[data-color="coral"] { --tc: var(--c-coral); } .win-card[data-color="silver"] { --tc: var(--c-silver); } .win-card[data-color="plum"] { --tc: var(--c-plum); }
.win-card .wc-name span { display: inline-block; }
.win-card .wc-name { background: var(--tc); border-bottom: 7px solid var(--mbh-ink); font-family: var(--font-condensed); font-weight: 700; font-size: 92px; line-height: 1; padding: 30px 30px 34px; text-transform: uppercase; white-space: nowrap; }
.win-card .wc-score { font-family: var(--font-condensed); font-weight: 700; font-size: 220px; line-height: 1; padding: 20px 0 6px; }
.win-card .wc-pts { font-family: var(--font-serif); font-style: italic; font-size: 38px; color: var(--mbh-gray-500); padding-bottom: 30px; }
.mode-winner .win-card { animation: cardIn .8s var(--ease-pop) .35s both; }
@keyframes cardIn { 0% { transform: translateY(120px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- reactions ---------- */
.reactions { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.reaction { position: absolute; inset: 0; display: grid; place-items: center; }
.reaction .scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(26,10,28,.55) 0%, rgba(26,10,28,0) 60%); animation: scrim 1.9s ease forwards; }
@keyframes scrim { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.reaction .burst-wrap { position: relative; width: 1000px; height: 1000px; display: grid; place-items: center; animation: reactIn 1.9s var(--ease-out) forwards; }
@keyframes reactIn {
  0% { transform: scale(0) rotate(-25deg); opacity: 0; }
  14% { transform: scale(1.12) rotate(4deg); opacity: 1; }
  24% { transform: scale(.97) rotate(-2deg); }
  32% { transform: scale(1) rotate(0); }
  78% { transform: scale(1.02) rotate(1deg); opacity: 1; }
  100% { transform: scale(1.25) rotate(3deg); opacity: 0; } }
.reaction .burst { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 8s linear infinite; }
.reaction .burst path { stroke: var(--mbh-ink); stroke-width: 14; stroke-linejoin: round; }
@keyframes spin { to { transform: rotate(360deg); } }
.reaction .r-text { position: relative; max-width: 820px; text-align: center; font-family: var(--font-marker); font-size: 170px; line-height: .95; color: var(--mbh-paper);
  -webkit-text-stroke: 14px var(--mbh-ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--mbh-ink); transform: rotate(-5deg); overflow-wrap: break-word; }
.reaction[data-cat="cute"] .burst path { fill: var(--mbh-coral); }
.reaction[data-cat="bad"] .burst path { fill: var(--mbh-silver); }
.reaction[data-cat="bad"] .r-text { color: var(--mbh-ink); -webkit-text-stroke: 14px var(--mbh-paper); text-shadow: 10px 10px 0 rgba(26,20,24,.6); }
.reaction[data-cat="oddball"] .burst path { fill: var(--mbh-teal); }
.reaction[data-cat="big"] .burst path { fill: var(--mbh-honey); }
.particle { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; animation: fly 1.6s var(--ease-out) forwards; }
.particle svg { width: 100%; height: 100%; }
@keyframes fly { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--dr)); opacity: 0; } }

/* ---------- dark scoreboard (finals) ---------- */
.team-sub { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 32px; color: var(--mbh-gray-500); margin-top: -6px; margin-bottom: 4px; white-space: nowrap; max-width: 470px; overflow: hidden; text-overflow: ellipsis; }
.team-sub:empty { display: none; }
.is-dark .team { background: #241027; color: var(--mbh-cream); }
.is-dark .team-score { color: transparent; -webkit-text-stroke: 6px rgba(255,214,107,.75); }
.is-dark .team-pts { color: rgba(255,244,223,.55); }
.is-dark .team-sub { color: rgba(255,244,223,.55); }

/* ---------- shared small header ---------- */
.mini-head { position: absolute; left: 0; right: 0; top: 0; height: 170px; }
.mini-logo { position: absolute; left: 56px; top: 30px; height: 120px; filter: drop-shadow(0 8px 20px rgba(26,10,28,.6)); }
.mini-pill { position: absolute; right: 60px; top: 52px; font-size: 44px; padding: 4px 40px 6px; }
.mini-pill:empty { display: none; }

/* ---------- question ---------- */
.q-wrap { position: absolute; left: 150px; right: 150px; top: 168px; bottom: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
.no-strip .q-wrap { bottom: 60px; }
.q-kicker { font-family: var(--font-condensed); font-weight: 700; font-size: 40px; letter-spacing: .1em; text-transform: uppercase; color: var(--mbh-honey-soft); text-shadow: 0 3px 0 rgba(50,18,54,.5); }
.q-card { position: relative; width: 100%; background: var(--mbh-paper); color: var(--mbh-ink); border: 7px solid var(--mbh-ink); border-radius: 40px; box-shadow: 14px 14px 0 var(--mbh-ink); padding: 74px 80px 60px; transform: rotate(-.6deg); text-align: center; }
.q-who { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) rotate(.6deg); background: var(--gradient-cta); color: #fff; border: 5px solid var(--mbh-ink); border-radius: 999px; padding: 6px 36px 8px; white-space: nowrap; font-family: var(--font-condensed); font-weight: 700; font-size: 36px; letter-spacing: .06em; text-transform: uppercase; box-shadow: 6px 6px 0 var(--mbh-ink); }
.q-who:empty { display: none; }
.q-big { font-family: var(--font-condensed); font-weight: 700; line-height: 1.12; letter-spacing: .005em; overflow-wrap: break-word; }
.q-big.placeholder { font-family: var(--font-marker); font-weight: 400; color: var(--mbh-stage-glow); }
.mode-question .q-card { animation: qIn .6s var(--ease-pop) both; }
@keyframes qIn { 0% { transform: translateY(60px) scale(.92) rotate(-2deg); opacity: 0; } 100% { transform: rotate(-.6deg); opacity: 1; } }
.q-options { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 34px; }
.q-options:empty { display: none; }
.q-options.two { grid-template-columns: 1fr 1fr; max-width: 1200px; }
.q-opt { --tc: var(--mbh-honey); display: flex; align-items: center; gap: 24px; background: rgba(255,250,240,.96); color: var(--mbh-ink); border: 5px solid var(--mbh-ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--mbh-ink); padding: 16px 26px; min-height: 120px; }
.q-opt:nth-child(1) { --tc: var(--mbh-coral); } .q-opt:nth-child(2) { --tc: var(--mbh-teal); } .q-opt:nth-child(3) { --tc: var(--mbh-honey); } .q-opt:nth-child(4) { --tc: var(--mbh-silver); }
.q-opt .ol { flex: none; width: 82px; height: 82px; border-radius: 50%; background: var(--tc); border: 5px solid var(--mbh-ink); display: grid; place-items: center; font-family: var(--font-condensed); font-weight: 700; font-size: 50px; }
.q-opt .ot { font-family: var(--font-condensed); font-weight: 700; font-size: 44px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.q-opt .od { font-family: var(--font-serif); font-style: italic; font-size: 29px; line-height: 1.2; color: var(--mbh-ink-2); margin-top: 4px; }
.q-opt.big { justify-content: center; min-height: 140px; }
.q-opt.big .ot { font-size: 70px; }
.mode-question .q-opt { animation: cardIn .6s var(--ease-pop) both; }
.mode-question .q-opt:nth-child(2) { animation-delay: .08s; } .mode-question .q-opt:nth-child(3) { animation-delay: .16s; } .mode-question .q-opt:nth-child(4) { animation-delay: .24s; }

/* ---------- strip ---------- */
.strip { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 36px; opacity: 0; transform: translateY(40px); transition: opacity .4s, transform .5s var(--ease-pop); z-index: 6; pointer-events: none; }
.strip-on .strip { opacity: 1; transform: none; }
.chipt { --tc: var(--mbh-honey); display: flex; align-items: stretch; border: 5px solid var(--mbh-ink); border-radius: 22px; overflow: hidden; box-shadow: 6px 6px 0 var(--mbh-ink); background: var(--mbh-paper); height: 86px; }
.chipt[data-color="teal"] { --tc: var(--c-teal); } .chipt[data-color="coral"] { --tc: var(--c-coral); } .chipt[data-color="silver"] { --tc: var(--c-silver); } .chipt[data-color="plum"] { --tc: var(--c-plum); }
.chipt .cn { background: var(--tc); border-right: 5px solid var(--mbh-ink); padding: 0 26px; display: flex; align-items: center; font-family: var(--font-condensed); font-weight: 700; font-size: 36px; text-transform: uppercase; color: var(--mbh-ink); max-width: 420px; white-space: nowrap; overflow: hidden; }
.chipt .cs { min-width: 110px; padding: 0 20px; display: grid; place-items: center; font-family: var(--font-condensed); font-weight: 700; font-size: 56px; color: var(--mbh-ink); font-variant-numeric: tabular-nums; }
.chipt .cs.bump { animation: bump .45s var(--ease-pop); }
.is-dark .chipt .cs { background: #241027; color: var(--mbh-honey-soft); }

/* ---------- slide / lines ---------- */
.ln-wrap { position: absolute; left: 140px; right: 140px; top: 150px; bottom: 70px; display: flex; flex-direction: column; align-items: center; }
.ln-title { font-size: 64px; }
.ln-sub { margin-top: 22px; max-width: 1500px; text-align: center; font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 38px; line-height: 1.3; color: var(--mbh-honey-soft); text-shadow: 0 3px 0 rgba(50,18,54,.5); }
.ln-sub:empty { display: none; }
.ln-stage { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.ln-one { max-width: 1560px; background: var(--mbh-paper); color: var(--mbh-ink); border: 7px solid var(--mbh-ink); border-radius: 40px; box-shadow: 14px 14px 0 var(--mbh-ink); padding: 60px 80px; transform: rotate(-1deg); text-align: center; font-family: var(--font-condensed); font-weight: 700; line-height: 1.15; animation: lnIn .55s var(--ease-pop) both; }
@keyframes lnIn { 0% { transform: translateX(120px) rotate(3deg); opacity: 0; } 100% { transform: rotate(-1deg); opacity: 1; } }
.ln-all { list-style: none; margin: 0; padding: 50px 70px; width: 100%; max-width: 1560px; background: var(--mbh-paper); color: var(--mbh-ink); border: 7px solid var(--mbh-ink); border-radius: 40px; box-shadow: 14px 14px 0 var(--mbh-ink); display: flex; flex-direction: column; gap: 28px; transform: rotate(-.6deg); }
.ln-all li { display: flex; gap: 26px; align-items: center; font-family: var(--font-condensed); font-weight: 700; font-size: 54px; line-height: 1.12; }
.ln-all li::before { content: ""; flex: none; width: 50px; height: 47px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 380'%3E%3Cpath d='M200 352 C 80 270, 14 200, 14 124 C 14 64, 60 22, 116 22 C 156 22, 186 44, 200 78 C 214 44, 244 22, 284 22 C 340 22, 386 64, 386 124 C 386 200, 320 270, 200 352 Z' fill='%23FF5B4F' stroke='%231A1418' stroke-width='30'/%3E%3C/svg%3E"); }
.ln-dots { display: flex; gap: 16px; height: 26px; }
.ln-dots i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,244,223,.25); border: 3px solid rgba(26,10,28,.6); }
.ln-dots i.on { background: var(--mbh-honey); }

/* ---------- mission ---------- */
.ms-wrap { position: absolute; left: 160px; right: 160px; top: 180px; bottom: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; }
.ms-kicker { font-family: var(--font-condensed); font-weight: 700; font-size: 44px; letter-spacing: .16em; text-transform: uppercase; color: var(--mbh-teal-soft); text-shadow: 0 0 22px rgba(20,163,154,.8); }
.ms-name { font-family: var(--font-marker); font-size: 150px; line-height: 1; color: var(--mbh-honey-soft); -webkit-text-stroke: 12px var(--mbh-ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--mbh-ink), 0 0 60px rgba(255,214,107,.5); transform: rotate(-3deg); }
.mode-mission .ms-name { animation: winIn .8s var(--ease-pop) both; }
.ms-card { margin-top: 26px; max-width: 1500px; background: var(--mbh-paper); color: var(--mbh-ink); border: 6px solid var(--mbh-ink); border-radius: 34px; box-shadow: 12px 12px 0 var(--mbh-ink); padding: 34px 56px; font-family: var(--font-sans); font-weight: 600; font-size: 38px; line-height: 1.35; }
.ms-scoring { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 40px; color: var(--mbh-cream); text-shadow: 0 3px 0 rgba(50,18,54,.5); }

/* ---------- tiebreak ---------- */
.tb-wrap { position: absolute; left: 140px; right: 140px; top: 150px; bottom: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; }
.tb-title { font-family: var(--font-marker); font-size: 170px; line-height: 1; color: var(--mbh-coral-soft); -webkit-text-stroke: 12px var(--mbh-ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--mbh-ink); transform: rotate(-3deg); }
.mode-tiebreak .tb-title { animation: winIn .8s var(--ease-pop) both; }
.tb-text { max-width: 1400px; font-family: var(--font-condensed); font-weight: 700; font-size: 60px; line-height: 1.15; color: var(--mbh-cream); text-shadow: 0 4px 0 rgba(50,18,54,.5); }
.tb-teams { display: flex; gap: 60px; margin-top: 20px; }
.tb-team { --tc: var(--c-honey); width: 520px; background: var(--mbh-paper); color: var(--mbh-ink); border: 6px solid var(--mbh-ink); border-radius: 30px; box-shadow: 12px 12px 0 var(--mbh-ink); overflow: hidden; }
.tb-team[data-color="teal"] { --tc: var(--c-teal); } .tb-team[data-color="coral"] { --tc: var(--c-coral); } .tb-team[data-color="silver"] { --tc: var(--c-silver); } .tb-team[data-color="plum"] { --tc: var(--c-plum); }
.tb-team .tn { background: var(--tc); border-bottom: 6px solid var(--mbh-ink); padding: 22px 26px; font-family: var(--font-condensed); font-weight: 700; font-size: 60px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.tb-team .tp { font-family: var(--font-condensed); font-weight: 700; font-size: 140px; line-height: 1; padding: 20px 0 6px; }
.tb-team .tl { font-family: var(--font-serif); font-style: italic; font-size: 32px; color: var(--mbh-gray-500); padding-bottom: 22px; }

/* ---------- awards podium ---------- */
#confetti2 { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; z-index: 5; }
.podium { position: absolute; left: 80px; right: 80px; top: 190px; bottom: 60px; display: flex; justify-content: center; align-items: flex-end; gap: 56px; perspective: 2400px; }
.pod { position: relative; width: 520px; height: 640px; transform-style: preserve-3d; transition: transform .9s var(--ease-pop); }
.pod.p1 { width: 600px; height: 780px; }
.pod.p2 { height: 690px; }
.pod.flip { transform: rotateY(180deg); }
.pod .face { position: absolute; inset: 0; backface-visibility: hidden; border: 7px solid var(--mbh-ink); border-radius: 38px; box-shadow: 14px 14px 0 var(--mbh-ink); overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.pod .back { background: linear-gradient(180deg, #5A2560, #3A163E); color: var(--mbh-cream); justify-content: center; gap: 20px; }
.pod .back .pl { font-family: var(--font-condensed); font-weight: 700; font-size: 56px; letter-spacing: .08em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.pod .back .q { font-family: var(--font-marker); font-size: 260px; line-height: 1; color: var(--mbh-paper); -webkit-text-stroke: 10px var(--mbh-ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--mbh-ink); }
.pod .front { --tc: var(--c-honey); transform: rotateY(180deg); background: var(--mbh-paper); color: var(--mbh-ink); }
.pod .front[data-color="teal"] { --tc: var(--c-teal); } .pod .front[data-color="coral"] { --tc: var(--c-coral); } .pod .front[data-color="silver"] { --tc: var(--c-silver); } .pod .front[data-color="plum"] { --tc: var(--c-plum); }
.pod .front .pl { align-self: stretch; text-align: center; background: var(--mbh-ink); color: var(--mbh-honey-soft); font-family: var(--font-condensed); font-weight: 700; font-size: 46px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 0 14px; }
.pod .front .pn span { display: inline-block; }
.pod .front .pn { align-self: stretch; text-align: center; background: var(--tc); border-bottom: 7px solid var(--mbh-ink); font-family: var(--font-condensed); font-weight: 700; font-size: 70px; line-height: 1.05; text-transform: uppercase; padding: 28px 24px 30px; white-space: nowrap; overflow: hidden; }
.pod .front .pp { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 36px; color: var(--mbh-gray-500); margin-top: 22px; text-align: center; padding: 0 20px; }
.pod .front .ps { flex: 1; display: grid; place-items: center; font-family: var(--font-condensed); font-weight: 700; font-size: 200px; line-height: 1; }
.pod .front .ps small { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 34px; color: var(--mbh-gray-500); text-align: center; }
.pod .front .heartbig { flex: 1; display: grid; place-items: center; }
.pod .front .heartbig svg { width: 220px; height: 210px; }
.pod.p1 .front { box-shadow: 14px 14px 0 var(--mbh-ink), 0 0 0 12px var(--mbh-honey-soft), 0 0 120px 40px rgba(245,169,28,.55); }
.pod.p1 .front .pn { font-size: 84px; }
.podwrap { position: relative; }
.podwrap .crown { top: -120px; width: 190px; height: 140px; margin-left: -95px; }
.podwrap.won .crown { opacity: 1; transform: translateY(0) scale(1) rotate(-6deg); animation: crownBob 2.4s ease-in-out 1s infinite; transition-delay: .6s; }

/* hint shown before going full screen */
.hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; background: rgba(26,20,24,.82); color: var(--mbh-cream); font: 600 14px var(--font-sans);
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,244,223,.25); transition: opacity .6s; }
.hint.gone { opacity: 0; pointer-events: none; }

/* live preview inside the control window: lighter on the GPU */
.preview .beam, .preview .bricks { display: none; }
.preview .neon-heart use { filter: none; }
.preview .pod { transition: none; }

/* ---------- 2.1: infographic cards ---------- */
.mode-deck .screen-deck { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-out), visibility 0s 0s; }
.screen-deck { background: #1A0A1C; z-index: 3; }
.deck-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s var(--ease-out); }
.deck-img.on { opacity: 1; }

/* ---------- 2.1: card image questions ---------- */
.q-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #1A0A1C; opacity: 0; visibility: hidden; z-index: 4; transition: opacity .5s var(--ease-out); }
.q-image.on { opacity: 1; visibility: visible; }
.q-has-image .q-wrap, .q-has-image .screen-question .mini-head { visibility: hidden; }

/* ---------- 2.1: mission prompts / checklist on the TV ---------- */
.ms-items { margin: 6px 0 0; padding: 26px 56px 26px 96px; max-width: 1500px; text-align: left; background: rgba(255,250,240,.94); color: var(--mbh-ink); border: 6px solid var(--mbh-ink); border-radius: 30px; box-shadow: 10px 10px 0 var(--mbh-ink); font-family: var(--font-condensed); font-weight: 700; font-size: 34px; line-height: 1.3; list-style: none; counter-reset: ms; }
.ms-items li { position: relative; counter-increment: ms; }
.ms-items li::before { content: "♥"; position: absolute; left: -48px; color: var(--mbh-coral); }
.ms-items.numbered li::before { content: counter(ms); width: 36px; height: 36px; top: 4px; border-radius: 50%; background: var(--mbh-honey); border: 3px solid var(--mbh-ink); display: grid; place-items: center; font-size: 22px; color: var(--mbh-ink); }
.ms-wrap.has-items { gap: 10px; top: 160px; bottom: 120px; }
.ms-wrap.has-items .ms-kicker { font-size: 36px; }
.ms-wrap.has-items .ms-name { font-size: 104px; -webkit-text-stroke-width: 9px; text-shadow: 8px 8px 0 var(--mbh-ink); }
.ms-wrap.has-items .ms-card { margin-top: 10px; padding: 22px 46px; }
.ms-wrap.has-items .ms-scoring { font-size: 32px; }
.ms-wrap.has-items .ms-name.long { font-size: 84px; margin-bottom: 8px; }

/* 2.2: full-screen slide images (Rules, Bee Breath) */
.ln-image { background: #140F1C; }

/* ---------- animated Welcome / Goodbye (2.3) ---------- */
.mode-title .screen-title { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-out), visibility 0s 0s; }
.screen-title { z-index: 2; }
.ttl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.ttl-hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ttl-heart { position: absolute; bottom: -90px; fill: currentColor; opacity: 0; filter: drop-shadow(0 0 12px currentColor); animation: heartRise linear infinite; }
@keyframes heartRise { 0% { transform: translateY(0) rotate(-12deg) scale(.7); opacity: 0; } 10% { opacity: .75; } 50% { transform: translateY(-620px) rotate(10deg) scale(1); } 85% { opacity: .55; } 100% { transform: translateY(-1250px) rotate(-8deg) scale(1.1); opacity: 0; } }

/* welcome */
.ttl-kicker { position: relative; margin-top: 60px; font-family: var(--font-script); font-size: 118px; line-height: 1; color: var(--mbh-honey-soft); transform: rotate(-4deg);
  text-shadow: 0 5px 0 var(--mbh-ink), 0 0 50px rgba(255,214,107,.55); animation: ttlDrop .9s var(--ease-pop) .25s both; }
@keyframes ttlDrop { 0% { transform: translateY(-260px) rotate(-14deg); opacity: 0; } 100% { transform: translateY(0) rotate(-4deg); opacity: 1; } }
.ttl-art { position: relative; width: 900px; height: 690px; margin-top: -6px; display: grid; place-items: center; }
.ttl-art .ttl-neon { width: 820px; height: 780px; left: 40px; top: -48px; }
.ttl-neon use { stroke-dasharray: 1180; stroke-dashoffset: 1180; animation: neonDraw 1.6s cubic-bezier(.6,0,.3,1) .5s forwards; }
@keyframes neonDraw { to { stroke-dashoffset: 0; } }
.ttl-logo { position: relative; height: 560px; filter: drop-shadow(0 18px 40px rgba(26,10,28,.7)); animation: ttlPop 1s var(--ease-pop) .9s both, float 6s ease-in-out 2s infinite; }
@keyframes ttlPop { 0% { transform: scale(.1) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.ttl-rays { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ttl-rays i { position: absolute; left: -7px; top: -420px; width: 14px; height: 150px; border-radius: 7px; transform-origin: 7px 420px;
  background: linear-gradient(180deg, rgba(255,214,107,0), #FFD66B); opacity: 0; animation: rayBurst 1.3s ease-out 1.15s both; }
.ttl-rays i:nth-child(odd) { background: linear-gradient(180deg, rgba(255,143,177,0), #FF8FB1); }
@keyframes rayBurst { 0% { opacity: 0; height: 30px; top: -170px; } 35% { opacity: 1; } 100% { opacity: 0; height: 190px; top: -470px; } }
.ttl-sub { position: relative; font-family: var(--font-condensed); font-weight: 700; font-size: 46px; letter-spacing: .05em; text-transform: uppercase; color: var(--mbh-cream);
  text-shadow: 0 3px 0 rgba(50,18,54,.4), 0 6px 22px rgba(50,18,54,.6); animation: ttlUp .8s var(--ease-out) 1.8s both; }
@keyframes ttlUp { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ttl-lines { position: relative; display: flex; gap: 40px; margin-top: 12px; }
.ttl-lines span { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 44px; color: var(--mbh-coral-soft); animation: ttlUp .7s var(--ease-out) both; }

/* goodbye */
.bye-logo { position: relative; height: 300px; margin-top: 40px; filter: drop-shadow(0 14px 30px rgba(26,10,28,.7)); animation: ttlDrop .9s var(--ease-pop) .2s both, float 6s ease-in-out 1.2s infinite; }
.bye-title { position: relative; margin-top: 10px; font-family: var(--font-marker); font-size: 150px; line-height: 1.02; text-align: center; color: var(--mbh-honey-soft); max-width: 1700px;
  -webkit-text-stroke: 11px var(--mbh-ink); paint-order: stroke fill; text-shadow: 9px 9px 0 var(--mbh-ink), 0 0 60px rgba(255,214,107,.55); animation: winIn .9s var(--ease-pop) .7s both; }
.bye-sub { margin-top: 18px; animation-delay: 1.3s; }
.bye-cards { position: relative; display: flex; flex-direction: column; gap: 26px; margin-top: 46px; }
.bye-card { display: flex; align-items: center; gap: 26px; padding: 22px 46px 24px 30px; min-width: 1150px; background: var(--mbh-paper); color: var(--mbh-ink); border: 6px solid var(--mbh-ink); border-radius: 30px;
  box-shadow: 10px 10px 0 var(--mbh-ink); font-family: var(--font-condensed); font-weight: 700; font-size: 52px; letter-spacing: .01em; animation: cardIn .8s var(--ease-pop) both; }
.bye-card svg { width: 62px; flex: none; fill: var(--c-coral, #FF5B4F); stroke: var(--mbh-ink); stroke-width: 18px; }
.bye-card:nth-child(2) svg { fill: var(--c-teal, #14A39A); }
.bye-card:nth-child(3) svg { fill: var(--c-honey, #F5A91C); }

/* section title cards (2.3.1) */
.card-logo { position: relative; height: 230px; margin-top: 46px; filter: drop-shadow(0 14px 30px rgba(26,10,28,.7)); animation: ttlDrop .8s var(--ease-pop) .1s both, float 6s ease-in-out 1s infinite; }
.card-art { position: relative; width: 1700px; height: 560px; display: grid; place-items: center; margin-top: -10px; }
.card-art .ttl-neon { width: 640px; height: 610px; left: 530px; top: -20px; opacity: .85; }
.card-art .ttl-neon use { animation-delay: .2s; }
.card-art .ttl-rays i { animation-delay: .55s; }
.card-title { position: relative; font-family: var(--font-marker); font-size: 210px; line-height: 1; white-space: nowrap; text-align: center; color: var(--mbh-honey-soft);
  -webkit-text-stroke: 13px var(--mbh-ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--mbh-ink), 0 0 70px rgba(255,214,107,.6); animation: winIn .9s var(--ease-pop) .35s both; }
.card-sub { margin-top: -20px; font-size: 58px; animation-delay: .95s; }

/* Lite visuals (Options → This Computer): drops the GPU-heavy blurs and glows on slower Chromebooks */
.lite .beam { display: none; }
.lite .neon-heart .nh-l, .lite .neon-heart .nh-r, .lite .sb-logo, .lite .idle-logo, .lite .mini-logo, .lite .crown svg,
.lite .ttl-heart, .lite .ttl-logo, .lite .bye-logo, .lite .card-logo, .lite .win-logo { filter: none !important; }
.lite .idle-logo { animation: none; }
.lite .ttl-logo { animation: ttlPop 1s var(--ease-pop) .9s both; }
.lite .bye-logo { animation: ttlDrop .9s var(--ease-pop) .2s both; }
.lite .card-logo { animation: ttlDrop .8s var(--ease-pop) .1s both; }

/* 3.1: answers revealed one at a time */
.q-opt.hide { visibility: hidden; animation: none !important; }
.mode-question .q-opt.rv { animation-delay: 0s !important; }