:root{--aero-blue:#00B5E2;--process-blue:#008BCC;--dark-slate:#273C4E;--light-grey:#E9EAE8;--sunshine:#FCC254;--coral:#E57357;--brand-red:#A1262B;--keppel:#49C5B1;--racing-green:#004225;--sof-green:#004225;--sof-green-dark:#273C4E;--sof-slate:#273C4E;--sof-cream:#F6F7F7;--christmas-red:#A1262B;--gold:#FCC254;--white:#fff;--shadow:0 24px 70px rgba(0,0,0,.28);--radius:26px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Poppins","Century Gothic",Tahoma,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#061e1e;color:#173234}body{overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}.app-shell{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 75% 8%,rgba(0,181,226,.20),transparent 26%),linear-gradient(155deg,#273C4E 0%,#203546 50%,#142938 100%)}#three-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}#snow-layer,#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}.brand-bar{position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,54px)}.brand{display:flex;align-items:center;text-decoration:none;background:rgba(255,255,255,.97);padding:11px 16px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.16)}.brand-logo{display:block;width:min(300px,42vw);height:auto;object-fit:contain}.audio-controls{display:flex;gap:8px}.icon-btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;width:42px;height:42px;border-radius:50%;backdrop-filter:blur(10px)}.icon-btn.off{opacity:.45}.screen{position:relative;z-index:5;display:none;min-height:calc(100vh - 130px);padding:30px 18px 86px;align-items:center;justify-content:center}.screen-active{display:flex}.glass{background:rgba(255,255,255,.93);border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.hero-card,.result-card{width:min(760px,100%);padding:clamp(26px,5vw,54px);border-radius:var(--radius);border-top:6px solid var(--aero-blue)}.hero-card{margin-top:min(20vh,180px)}.hero-card.center{text-align:center}.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:900;color:var(--process-blue);margin:0 0 12px}h1,h2,h3{margin-top:0}h1{font-size:clamp(36px,6vw,68px);line-height:.98;letter-spacing:-.045em;color:#173336;margin-bottom:24px}.lead{font-size:clamp(19px,2.6vw,25px);line-height:1.35}.hero-card p,.result-card p{line-height:1.55}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}.rules span{background:#edf4ef;border-radius:14px;padding:13px;text-align:center;font-size:13px;color:var(--sof-slate)}.primary-btn,.secondary-btn,.ghost-btn,.linkedin-btn,.link-btn{border:0;border-radius:14px;padding:14px 20px;font-weight:800;transition:.2s transform,.2s opacity,.2s box-shadow;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary-btn{background:var(--aero-blue);color:#fff;box-shadow:0 10px 24px rgba(0,181,226,.26)}.secondary-btn{background:var(--dark-slate);color:#fff}.ghost-btn{background:#eef3ef;color:var(--sof-slate)}.linkedin-btn{background:#0a66c2;color:white}.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover,.linkedin-btn:hover{transform:translateY(-2px)}.micro{font-size:12px;color:#64777a;text-align:center;margin-bottom:0}.quiz-wrap{width:min(820px,100%);margin-top:min(18vh,140px)}.status-row.thin{border-radius:18px;padding:14px 18px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-bottom:14px}#question-number{font-size:13px;font-weight:800;color:var(--sof-slate)}.progress-track{height:6px;background:#dce8e3;border-radius:99px;overflow:hidden;margin-top:8px}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--aero-blue),var(--keppel));transition:width .35s ease}.score-pill{background:var(--dark-slate);color:white;padding:10px 14px;border-radius:99px;font-weight:900}.question-card{position:relative;padding:clamp(22px,4vw,40px);border-radius:var(--radius)}.question-card h2{font-size:clamp(25px,4vw,40px);line-height:1.08;letter-spacing:-.035em;color:#173336}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-btn{border:1px solid #d7e2dd;background:#f4f7f5;text-align:left;padding:16px;border-radius:15px;font-weight:750;color:#1d3a3a;min-height:68px;display:flex;align-items:center;gap:12px}.answer-btn .letter{display:grid;place-items:center;min-width:31px;height:31px;border-radius:50%;background:white;color:var(--sof-green);box-shadow:0 3px 12px rgba(0,0,0,.07)}.answer-btn:hover:not(:disabled){border-color:var(--sof-green);background:#edf6f2}.answer-btn.wrong{opacity:.46;text-decoration:line-through;background:#f7e8e8}.answer-btn.correct{background:#e1f4e9;border-color:#64a77a;color:#185830}.answer-btn:disabled{cursor:default}.wrong-panel,.answer-panel{margin-top:18px;padding:18px;border-radius:16px}.wrong-panel{background:#faeeee;border-left:5px solid var(--christmas-red)}.answer-panel{background:#ecf6ef;border-left:5px solid var(--aero-blue)}.answer-heading{font-weight:900;color:var(--process-blue);font-size:20px;margin:0 0 8px}.button-row{display:flex;gap:10px;align-items:center}.button-row.wrap{flex-wrap:wrap}.speech-bubble{position:absolute;right:24px;top:-76px;background:white;color:var(--dark-slate);padding:12px 18px;border-radius:20px;font-size:18px;font-weight:900;box-shadow:0 10px 35px rgba(0,0,0,.2);animation:pop .32s ease}.speech-bubble:after{content:"";position:absolute;right:25px;bottom:-12px;border:7px solid transparent;border-top-color:white}@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.result-card{margin-top:min(16vh,120px);text-align:center}.score-big{font-size:clamp(78px,14vw,150px);line-height:.9;font-weight:950;letter-spacing:-.06em;color:var(--sunshine);text-shadow:0 4px 0 #9a7720;margin:14px 0 22px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}.stats-grid div{background:#eef4f0;padding:18px 10px;border-radius:16px}.stats-grid strong{display:block;font-size:23px;color:var(--process-blue)}.stats-grid span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#6a7c7e}.cta-area{margin:20px 0}.cta-panel{padding:20px;border-radius:18px;background:#f5f1df;text-align:left}.cta-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.share-box{padding:20px;border-radius:18px;background:#edf3f4;text-align:left;margin:20px 0}.game-footer{position:absolute;z-index:7;bottom:0;left:0;right:0;padding:18px clamp(18px,4vw,54px);display:flex;justify-content:space-between;color:rgba(255,255,255,.6);font-size:11px}.game-footer a{color:rgba(255,255,255,.82)}.snowflake{position:absolute;top:-20px;color:#fff;opacity:.78;animation:snowfall linear infinite}@keyframes snowfall{to{transform:translate3d(var(--drift),110vh,0) rotate(420deg)}}.firework{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:firework 1.2s ease-out forwards}@keyframes firework{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}.present-fx{position:absolute;font-size:54px;animation:presentPop 1.5s ease-out forwards}@keyframes presentPop{0%{transform:scale(.2) rotate(-12deg);opacity:0}35%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:translateY(-80px) scale(.8);opacity:0}}.star-fx{position:absolute;font-size:32px;animation:starBurst 1.3s ease-out forwards}@keyframes starBurst{to{transform:translate(var(--x),var(--y)) rotate(300deg) scale(.2);opacity:0}}@media(max-width:680px){.brand-logo{width:min(245px,58vw)}.hero-card{margin-top:190px}.quiz-wrap{margin-top:165px}.result-card{margin-top:165px}.answers{grid-template-columns:1fr}.rules{grid-template-columns:1fr}.status-row.thin{grid-template-columns:1fr auto}.button-row{align-items:stretch}.button-row.wrap>*{flex:1 1 180px}.speech-bubble{right:14px;top:-66px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* State of Flux brand motif: repeating crossroads/X marque, used subtly */
.app-shell::before{content:"";position:fixed;z-index:1;right:-40px;top:90px;width:420px;height:420px;opacity:.12;pointer-events:none;background-image:linear-gradient(45deg,transparent 44%,#fff 44%,#fff 49%,transparent 49%,transparent 51%,#fff 51%,#fff 56%,transparent 56%);background-size:34px 34px;mask-image:linear-gradient(to left,black,transparent)}
.question-card::after,.hero-card::after,.result-card::after{content:"";position:absolute;width:88px;height:8px;left:28px;top:0;background:var(--aero-blue);border-radius:0 0 8px 8px}
.hero-card,.result-card,.question-card{position:relative}
.primary-btn:hover{background:var(--process-blue)}
@media(max-width:680px){.brand-logo{width:min(245px,58vw)}}

/* V3 CINEMATIC POLISH */
body{background:#0b1d2b;color:var(--dark-slate)}
.app-shell{background:linear-gradient(180deg,rgba(15,39,56,.02),rgba(7,20,31,.14) 56%,rgba(7,20,31,.65));}
.app-shell::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(2,10,18,.18) 76%,rgba(2,10,18,.42) 100%);box-shadow:inset 0 -130px 150px rgba(2,11,19,.24)}
.brand-bar{padding-top:22px}.brand{padding:12px 19px;border:1px solid rgba(255,255,255,.92);box-shadow:0 14px 45px rgba(0,0,0,.22),0 0 0 1px rgba(0,181,226,.08);backdrop-filter:blur(20px)}
.icon-btn{background:rgba(39,60,78,.62);border-color:rgba(255,255,255,.34);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.glass{background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,250,251,.87));border:1px solid rgba(255,255,255,.84);box-shadow:0 34px 90px rgba(2,14,24,.36),0 1px 0 rgba(255,255,255,.9) inset;backdrop-filter:blur(24px) saturate(1.12)}
.hero-card,.result-card,.question-card{border-radius:30px;overflow:visible}
.hero-card{margin-top:min(29vh,270px)}
.quiz-wrap{margin-top:min(27vh,245px)}
.result-card{margin-top:min(26vh,230px)}
.hero-card h1{color:var(--dark-slate);text-wrap:balance}
.hero-card .lead{color:#31546a}
.eyebrow{color:var(--process-blue);letter-spacing:.21em}
.rules span{background:linear-gradient(180deg,#f5f9fa,#eaf2f4);border:1px solid #dce8ec;box-shadow:0 5px 14px rgba(39,60,78,.06)}
.primary-btn{background:linear-gradient(135deg,var(--aero-blue),var(--process-blue));box-shadow:0 12px 30px rgba(0,139,204,.26),inset 0 1px rgba(255,255,255,.3)}
.primary-btn:hover{box-shadow:0 17px 35px rgba(0,139,204,.32)}
.secondary-btn{background:linear-gradient(135deg,#334f64,var(--dark-slate))}
.status-row.thin{background:rgba(255,255,255,.91)}
.question-card{border-top:0}
.question-card h2{font-weight:800;letter-spacing:-.035em}
.answer-btn{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8faf9,#edf3f2);border:1px solid #d9e5e7;box-shadow:0 5px 14px rgba(39,60,78,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.answer-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.7) 50%,transparent 80%);transform:translateX(-140%);transition:transform .6s ease}
.answer-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 11px 22px rgba(39,60,78,.12);border-color:rgba(0,181,226,.5)}
.answer-btn:hover:not(:disabled)::after{transform:translateX(140%)}
.answer-btn .letter{background:var(--dark-slate);color:#fff;box-shadow:none}
.answer-btn.correct{background:linear-gradient(180deg,#e8f9f1,#d8f1e5);border-color:#58a879}
.answer-btn.correct .letter{background:#27875b}.answer-btn.wrong .letter{background:var(--brand-red)}
.score-pill{background:linear-gradient(135deg,var(--dark-slate),#36566d);box-shadow:0 7px 18px rgba(39,60,78,.18)}
.speech-bubble{font-size:20px;border:1px solid rgba(0,181,226,.2);box-shadow:0 16px 38px rgba(0,0,0,.24)}
.answer-panel{background:linear-gradient(135deg,#eef9f2,#e5f5ef)}
.wrong-panel{background:linear-gradient(135deg,#fff2f1,#f9e7e5)}
.score-big{filter:drop-shadow(0 8px 20px rgba(252,194,84,.22))}
.stats-grid div{background:linear-gradient(180deg,#f6f9f8,#eaf1f2);border:1px solid #dfe9eb}
.cta-panel{background:linear-gradient(135deg,#fff8df,#f6efd5);border:1px solid rgba(252,194,84,.38)}
.share-box{background:linear-gradient(135deg,#edf6f8,#e7eef2);border:1px solid #d6e4e8}
.game-footer{z-index:8;text-shadow:0 2px 6px rgba(0,0,0,.4)}
@media(max-width:680px){.hero-card{margin-top:250px}.quiz-wrap{margin-top:225px}.result-card{margin-top:225px}.hero-card,.result-card,.question-card{border-radius:24px}.glass{backdrop-filter:blur(18px)}}
@media(min-width:1280px){.hero-card{margin-left:-11vw}.quiz-wrap{margin-left:-7vw}.result-card{margin-left:-8vw}}


/* Version 14: welcome narration and surprise State of Flux Christmas present */
.welcome-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.welcome-actions>*{flex:1 1 220px}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
#gift-layer{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.falling-prize{
  position:absolute;
  top:7vh;
  right:6vw;
  width:122px;
  height:122px;
  border:0;
  background:transparent;
  padding:0;
  pointer-events:auto;
  cursor:pointer;
  animation:giftFall 5.8s cubic-bezier(.22,.72,.29,1) forwards;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.32));
}
.falling-prize::after{
  content:"";position:absolute;inset:0;background:url("./assets/state-of-flux-present-3d.png") center/contain no-repeat;z-index:3;
}
.falling-prize:hover{filter:drop-shadow(0 0 18px rgba(250,197,28,.95)) drop-shadow(0 14px 16px rgba(0,0,0,.32))}
.gift-wrap-box,.gift-ribbon{display:none}
.gift-glow{
  position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(250,197,28,.34),transparent 68%);
  animation:giftGlow 1.25s ease-in-out infinite alternate;z-index:1
}
@keyframes giftFall{
  0%{transform:translate3d(0,-130px,0) rotate(-24deg) scale(.7);opacity:0}
  12%{opacity:1}
  68%{transform:translate3d(-7vw,63vh,0) rotate(330deg) scale(1)}
  80%{transform:translate3d(-7vw,69vh,0) rotate(350deg) scale(1)}
  89%{transform:translate3d(-7vw,65vh,0) rotate(365deg) scale(1)}
  100%{transform:translate3d(-7vw,69vh,0) rotate(360deg) scale(1)}
}
@keyframes giftGlow{from{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
.prize-modal{
  position:fixed;inset:0;z-index:30;background:rgba(20,41,56,.72);
  display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(10px)
}
.prize-modal[hidden]{display:none}
.prize-card{width:min(620px,100%);padding:34px;border-radius:30px;text-align:center;border-top:6px solid var(--sunshine)}
.prize-card h2{font-size:clamp(28px,5vw,44px);color:var(--dark-slate);margin-bottom:12px}
.prize-card #prize-message{font-size:17px;line-height:1.58;color:#31546a}
.prize-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.prize-actions>*{flex:1 1 220px}
.opened-gift{position:relative;width:160px;height:118px;margin:0 auto 18px}
.opened-gift-box{
  position:absolute;left:27px;bottom:0;width:106px;height:76px;border:4px solid var(--aero-blue);border-radius:8px;
  background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden
}
.opened-gift-box img{width:88px;height:auto}
.opened-gift-lid{
  position:absolute;left:14px;top:5px;width:130px;height:28px;background:var(--aero-blue);border-radius:7px;
  transform:rotate(-12deg) translateY(-12px);box-shadow:0 7px 18px rgba(0,0,0,.16)
}
.gift-stars{position:absolute;left:0;right:0;top:-12px;color:var(--sunshine);font-size:23px;letter-spacing:8px;animation:starFloat 1.4s ease-in-out infinite alternate}
@keyframes starFloat{to{transform:translateY(-9px) scale(1.06)}}
@media(max-width:680px){
  .falling-prize{right:2vw;width:98px;height:98px}
  .prize-card{padding:26px 20px}
}

/* Version 21 share card */
.share-modal{position:fixed;inset:0;z-index:50;background:rgba(7,25,38,.82);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(10px)}
.share-modal[hidden]{display:none}
.share-modal-panel{position:relative;width:min(980px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:26px;padding:24px;box-shadow:0 28px 90px rgba(0,0,0,.45)}
.share-modal-panel h2{color:var(--dark-slate);margin:0 45px 18px 0}
.share-close{position:absolute;right:16px;top:12px;border:0;background:#edf3f4;color:var(--dark-slate);width:40px;height:40px;border-radius:50%;font-size:27px;line-height:1}
.interactive-share-card{position:relative;aspect-ratio:1200/627;overflow:hidden;border-radius:20px;background:#061f33}
.share-tree-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.share-card-overlay{position:absolute;inset:0;padding:5.3% 48% 4.5% 5.3%;background:linear-gradient(90deg,rgba(3,27,45,.99) 0%,rgba(3,27,45,.96) 48%,rgba(3,27,45,.18) 72%,transparent 100%);color:#fff}
.share-card-logo{width:170px;max-width:36%;background:rgba(255,255,255,.96);padding:8px 11px;border-radius:9px;margin-bottom:6%}
.share-kicker{font-size:clamp(9px,1.4vw,18px);font-weight:850;color:#00B5E2;letter-spacing:.02em;margin-bottom:5%}
.share-score{font-size:clamp(34px,7.2vw,86px);font-weight:950;line-height:.94;letter-spacing:-.045em;margin-bottom:5%}
.share-question{font-size:clamp(18px,3.2vw,39px);font-weight:800;line-height:1.1;margin-bottom:7%}
.share-card-buttons{display:grid;gap:10px;width:min(450px,100%)}
.share-action{height:58px;background:#00B5E2;color:#fff;border-radius:11px;text-decoration:none;padding:0 22px;display:flex;align-items:center;justify-content:space-between;font-weight:850;font-size:clamp(14px,1.8vw,21px)}
.share-action span{font-size:28px}
.share-modal-actions{justify-content:center;margin-top:16px}
.cta-links .secondary-btn{min-width:260px;min-height:52px;text-align:center;flex:1 1 260px}
@media(max-width:680px){.share-modal-panel{padding:14px}.share-card-overlay{padding:5% 37% 4% 5%}.share-card-logo{width:115px}.share-card-buttons{gap:6px}.share-action{height:42px;padding:0 12px}}

/* Version 22 corrected dual share flow */
.share-frame-wrap{
  position:relative;width:100%;aspect-ratio:1200/627;border-radius:18px;overflow:hidden;
  background:#061f33;border:1px solid rgba(6,31,51,.14)
}
#interactive-share-frame{width:100%;height:100%;border:0;display:block}
.linkedin-share-separator{height:1px;background:#dbe5e9;margin:22px 0}
.share-modal-panel h3{margin:0 0 5px;color:var(--dark-slate)}
@media(max-width:680px){
  .share-frame-wrap{aspect-ratio:9/12;min-height:560px}
}

/* Version 24 share fixes */
.share-modal-panel{
  width:min(1040px,100%);
  max-height:96vh;
  overflow:auto;
  padding:24px
}
.share-frame-wrap{
  width:100%;
  height:min(650px,70vh);
  min-height:590px;
  border-radius:18px;
  overflow:hidden;
  background:#061f33;
  border:1px solid rgba(6,31,51,.14)
}
#interactive-share-frame{width:100%;height:100%;border:0;display:block}
.linkedin-preview-wrap{
  width:100%;
  aspect-ratio:1200/627;
  background:#061f33;
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(6,31,51,.14);
  margin:12px 0 16px
}
#linkedin-card-preview{width:100%;height:100%;object-fit:contain;display:block}
#linkedin-preview-placeholder{color:#d8e6ec;padding:24px;text-align:center}
#download-linkedin-card:disabled,#share-linkedin-from-modal:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){
  .share-modal{padding:8px}
  .share-modal-panel{padding:14px;border-radius:18px}
  .share-frame-wrap{height:72vh;min-height:620px}
}

/* Version 28 finish screen */
#finish-screen{padding:24px 18px 50px}
.finish-card{position:relative;width:min(1080px,96vw);min-height:560px;overflow:hidden;border-radius:34px;background:linear-gradient(135deg,#fff 0%,#f7fbfe 58%,#eaf5fb 100%);border:2px solid rgba(255,255,255,.88);box-shadow:0 28px 90px rgba(0,0,0,.30)}
.finish-card::before{content:"";position:absolute;top:0;left:42px;width:150px;height:10px;background:var(--aero-blue);border-radius:0 0 10px 10px}
.finish-copy{position:relative;z-index:3;width:68%;padding:62px 38px 38px 68px;text-align:center}
.finish-kicker{color:#008BCC;font-weight:900;letter-spacing:.22em;font-size:18px;margin-bottom:18px}
.finish-copy h1{margin:0;color:#0b2841;font-size:clamp(64px,8.2vw,112px);line-height:.82;letter-spacing:-.055em;font-weight:950}
.finish-dot{color:#008BCC}
.finish-message{color:#173a54;font-size:clamp(20px,2.4vw,31px);line-height:1.25;margin:30px auto 24px}
.finish-seasons{color:#008BCC;font-weight:900;letter-spacing:.16em;font-size:clamp(16px,2vw,24px);line-height:1.4;margin-bottom:30px}
.finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(610px,100%);margin:0 auto}
.finish-btn{min-height:64px;border:0;border-radius:13px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;font-weight:900;font-size:20px;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.finish-btn-dark{background:#203f58}.finish-btn-blue{background:linear-gradient(135deg,#00B5E2,#008BCC)}.finish-btn span{font-size:28px;font-weight:400}
.finish-decor{position:absolute;right:-8px;top:0;bottom:0;width:37%;z-index:2;background:radial-gradient(circle at 78% 18%,rgba(255,217,135,.62),transparent 4%),linear-gradient(155deg,transparent 0 45%,rgba(208,231,240,.16) 45% 100%)}
.finish-branch{position:absolute;right:-40px;top:48px;width:300px;height:295px;transform:rotate(-8deg);background:repeating-linear-gradient(115deg,transparent 0 14px,rgba(125,154,154,.62) 15px 18px,transparent 19px 30px)}
.finish-bauble{position:absolute;border-radius:50%;box-shadow:inset -14px -16px 30px rgba(0,0,0,.16),0 12px 24px rgba(0,0,0,.14)}
.finish-bauble::before{content:"";position:absolute;width:24px;height:18px;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(#d8e2e7,#8fa4af);border-radius:4px 4px 1px 1px}
.finish-bauble-blue{width:128px;height:128px;right:140px;top:210px;background:radial-gradient(circle at 32% 24%,#6bd1ff,transparent 18%),repeating-linear-gradient(45deg,#008BCC 0 10px,#006ea0 10px 20px)}
.finish-bauble-white{width:154px;height:154px;right:12px;top:300px;background:radial-gradient(circle at 32% 25%,#fff,transparent 20%),radial-gradient(circle at center,#fefefe,#eaf4f8 72%);border:2px solid #dbe9ef}
.finish-bauble-white::after{content:"❄";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#008BCC;font-size:68px}
.finish-bauble-small{width:58px;height:58px;right:150px;bottom:78px;background:radial-gradient(circle at 30% 25%,#87ddff,#008BCC 70%)}
.finish-star{position:absolute;right:45px;top:120px;color:#fff;font-size:94px;text-shadow:0 8px 18px rgba(0,0,0,.12);transform:rotate(13deg)}
.finish-snowflake{position:absolute;color:#fff;text-shadow:0 5px 15px rgba(0,0,0,.10)}
.finish-snowflake-one{right:8px;bottom:36px;font-size:94px}.finish-snowflake-two{right:230px;bottom:42px;font-size:38px;color:#c7dbe4}
.finish-ribbon{position:absolute;right:-30px;bottom:-12px;width:290px;height:78px;border:24px solid #008BCC;border-left-color:transparent;border-top-color:transparent;border-radius:50%;transform:rotate(-11deg);opacity:.95}
@media(max-width:850px){.finish-card{min-height:700px}.finish-copy{width:100%;padding:54px 28px 320px}.finish-decor{width:100%;height:290px;top:auto;bottom:0}.finish-actions{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.finish-copy{padding-left:18px;padding-right:18px}.finish-copy h1{font-size:58px}.finish-message{font-size:19px}.finish-actions{grid-template-columns:1fr}.finish-btn{min-height:58px}}


/* Version 29: finish screen matched directly to approved artwork */
#finish-screen{
  padding:18px;
  align-items:center;
  justify-content:center;
}
.finish-v29-card{
  position:relative;
  width:min(1180px,97vw);
  aspect-ratio: 1648 / 928;
  overflow:hidden;
  border-radius:34px;
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  background:#f5fbff;
}
.finish-v29-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.finish-v29-hotspot{
  position:absolute;
  z-index:4;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:20px;
  color:transparent;
  font-size:0;
  padding:0;
}
.finish-v29-hotspot:focus-visible{
  outline:4px solid #00B5E2;
  outline-offset:4px;
}
/* Hotspots align with the two visible buttons in the supplied artwork. */
.finish-v29-stateofflux{
  left:6.2%;
  bottom:7.7%;
  width:28.5%;
  height:10.3%;
}
.finish-v29-restart{
  left:36.0%;
  bottom:7.7%;
  width:25.9%;
  height:10.3%;
}
@media(max-width:720px){
  #finish-screen{padding:8px}
  .finish-v29-card{
    width:100%;
    border-radius:20px;
  }
}


/* ===============================================================
   Version 30 — Finish screen aligned to the Share Card
   =============================================================== */
#finish-screen{
  padding:20px;
  align-items:center;
  justify-content:center;
}

.finish-share-style{
  position:relative;
  width:min(1180px,97vw);
  min-height:620px;
  overflow:hidden;
  border-radius:30px;
  background:#273C4E;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.16);
  display:grid;
  grid-template-columns:56% 44%;
}

.finish-share-left{
  position:relative;
  z-index:3;
  padding:42px 42px 40px 54px;
  background:
    radial-gradient(circle at 18% 10%,rgba(0,181,226,.10),transparent 27%),
    linear-gradient(135deg,#273C4E 0%,#203546 62%,#182e3e 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.finish-share-logo{
  width:190px;
  max-width:42%;
  height:auto;
  padding:8px 12px;
  margin-bottom:30px;
  border-radius:10px;
  background:rgba(255,255,255,.98);
}

.finish-share-kicker{
  color:#00B5E2;
  font-weight:900;
  font-size:17px;
  letter-spacing:.025em;
  margin-bottom:28px;
}

.finish-share-christmas{
  color:#00B5E2;
  font-size:20px;
  font-weight:900;
  letter-spacing:.18em;
  margin-bottom:18px;
}

.finish-share-left h1{
  margin:0;
  color:#fff;
  font-size:clamp(66px,7vw,100px);
  line-height:.88;
  letter-spacing:-.055em;
  font-weight:950;
}

.finish-share-left h1 span{
  color:#00B5E2;
}

.finish-share-message{
  color:#fff;
  font-size:clamp(20px,2vw,27px);
  line-height:1.28;
  margin:28px 0 24px;
}

.finish-share-greeting{
  color:#00B5E2;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.35;
  font-size:clamp(17px,1.7vw,22px);
  margin-bottom:28px;
}

.finish-share-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:min(600px,100%);
}

.finish-share-btn{
  min-height:62px;
  padding:0 22px;
  border-radius:12px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  font-size:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.finish-share-btn-dark{
  background:#1d3447;
  border:1px solid rgba(255,255,255,.16);
}

.finish-share-btn-blue{
  background:linear-gradient(135deg,#00B5E2,#008BCC);
}

.finish-share-btn span:last-child{
  font-size:27px;
  font-weight:400;
}

.finish-share-right{
  position:relative;
  min-height:620px;
  background:#091d2c;
  overflow:hidden;
}

.finish-share-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:72% center;
  display:block;
}

.finish-share-image-fade{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(32,53,70,.94) 0%,
    rgba(32,53,70,.62) 18%,
    rgba(32,53,70,.12) 42%,
    rgba(32,53,70,0) 62%
  );
}

@media(max-width:850px){
  .finish-share-style{
    grid-template-columns:1fr;
    min-height:840px;
  }

  .finish-share-left{
    padding:34px 28px 32px;
  }

  .finish-share-right{
    min-height:320px;
  }

  .finish-share-image{
    object-position:70% center;
  }

  .finish-share-image-fade{
    background:linear-gradient(
      180deg,
      rgba(32,53,70,.95) 0%,
      rgba(32,53,70,.30) 28%,
      rgba(32,53,70,0) 62%
    );
  }
}

@media(max-width:600px){
  #finish-screen{padding:8px}

  .finish-share-style{
    border-radius:20px;
    min-height:900px;
  }

  .finish-share-logo{width:155px}

  .finish-share-left h1{font-size:58px}

  .finish-share-actions{
    grid-template-columns:1fr;
  }

  .finish-share-right{
    min-height:300px;
  }
}


/* ===============================================================
   Version 32 — Finish screen modal treatment
   Grey/dim the underlying game exactly like the Share pop-up.
   =============================================================== */
#finish-screen.screen-active{
  position:fixed;
  inset:0;
  z-index:45;
  width:100%;
  min-height:100vh;
  height:100vh;
  overflow:auto;
  padding:20px;
  background:rgba(7,25,38,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  align-items:center;
  justify-content:center;
}
#finish-screen.screen-active .finish-share-style{
  position:relative;
  z-index:46;
}
@media(max-width:680px){
  #finish-screen.screen-active{
    padding:8px;
    align-items:flex-start;
  }
}


/* ===============================================================
   Version 33 — approved seamless Finish artwork
   =============================================================== */
#finish-screen.screen-active{
  position:fixed;
  inset:0;
  z-index:45;
  width:100%;
  min-height:100vh;
  height:100vh;
  overflow:auto;
  padding:18px;
  background:rgba(7,25,38,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  align-items:center;
  justify-content:center;
}

.finish-v33-card{
  position:relative;
  z-index:46;
  width:min(1180px,97vw);
  aspect-ratio:1600 / 960;
  overflow:hidden;
  border-radius:30px;
  box-shadow:0 28px 90px rgba(0,0,0,.38);
  background:#20394b;
}

.finish-v33-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* Invisible functional hotspots aligned with the visible artwork buttons. */
.finish-v33-hotspot{
  position:absolute;
  z-index:48;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:14px;
  color:transparent;
  font-size:0;
}

.finish-v33-hotspot:focus-visible{
  outline:4px solid #00B5E2;
  outline-offset:4px;
}

.finish-v33-stateofflux{
  left:4.7%;
  bottom:6.9%;
  width:22.1%;
  height:8.7%;
}

.finish-v33-restart{
  left:28.3%;
  bottom:6.9%;
  width:22.1%;
  height:8.7%;
}

@media(max-width:720px){
  #finish-screen.screen-active{
    padding:8px;
    align-items:flex-start;
  }

  .finish-v33-card{
    width:100%;
    border-radius:20px;
  }
}


/* Version 34 custom emoji assets */
.inline-custom-emoji{width:30px;height:30px;object-fit:contain;vertical-align:-8px;margin:0 2px}
.button-emoji-seq{display:inline-flex;align-items:center;gap:3px;margin-left:8px}
.button-emoji-seq img{width:27px;height:27px;object-fit:contain}
.start-challenge-btn{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}

/* Version 34 Finish — responsive like the Share pop-up */
#finish-screen.screen-active{
  position:fixed;inset:0;z-index:45;width:100%;min-height:100vh;height:100vh;overflow:auto;
  padding:20px;background:rgba(7,25,38,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  align-items:center;justify-content:center
}
.finish-responsive-card{
  position:relative;z-index:46;width:min(1100px,100%);min-height:590px;overflow:hidden;border-radius:24px;
  display:grid;grid-template-columns:56% 44%;background:#061f33;box-shadow:0 22px 70px rgba(0,0,0,.38)
}
.finish-responsive-left{
  position:relative;z-index:2;padding:42px 44px 36px;color:#fff;
  background:linear-gradient(135deg,#273C4E,#203546 65%,#162c3c);
  display:flex;flex-direction:column;justify-content:center
}
.finish-responsive-logo{width:170px;max-width:38%;height:auto;padding:8px 11px;border-radius:9px;background:rgba(255,255,255,.98);margin-bottom:24px}
.finish-responsive-kicker{color:#00B5E2;font-size:16px;font-weight:900;letter-spacing:.02em;margin-bottom:22px}
.finish-responsive-xmas{color:#00B5E2;font-size:19px;font-weight:900;letter-spacing:.17em;margin-bottom:18px}
.finish-responsive-left h1{color:#fff;font-size:clamp(62px,7vw,94px);line-height:.88;letter-spacing:-.055em;margin:0 0 24px;font-weight:950}
.finish-responsive-left h1 span{color:#00B5E2}
.finish-responsive-left p{color:#fff;font-size:clamp(20px,2vw,27px);line-height:1.28;margin:0 0 24px}
.finish-responsive-greeting{color:#00B5E2;font-size:clamp(17px,1.7vw,22px);font-weight:900;letter-spacing:.14em;line-height:1.35;margin-bottom:28px}
.finish-responsive-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.finish-responsive-btn{min-height:60px;padding:0 20px;border-radius:11px;border:0;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#fff;font-weight:900;font-size:18px}
.finish-responsive-dark{background:#1d3447;border:1px solid rgba(255,255,255,.16)}
.finish-responsive-blue{background:#00B5E2}
.finish-responsive-btn span:last-child{font-size:27px;font-weight:400}
.finish-responsive-right{position:relative;min-height:590px;overflow:hidden;background:#061f33}
.finish-responsive-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}
.finish-responsive-fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(32,53,70,.94),rgba(32,53,70,.55) 18%,rgba(32,53,70,.08) 42%,transparent 62%)}

@media(max-width:760px){
  #finish-screen.screen-active{padding:0;align-items:flex-start}
  .finish-responsive-card{width:100%;min-height:100vh;border-radius:0;grid-template-columns:1fr}
  .finish-responsive-left{padding:34px 28px 34px;min-height:520px;justify-content:flex-start}
  .finish-responsive-logo{width:145px;max-width:48%;margin-top:8px}
  .finish-responsive-left h1{font-size:58px}
  .finish-responsive-actions{grid-template-columns:1fr}
  .finish-responsive-right{min-height:360px}
  .finish-responsive-right img{object-position:72% center}
  .finish-responsive-fade{background:linear-gradient(180deg,rgba(32,53,70,.96),rgba(32,53,70,.30) 28%,transparent 62%)}
}


/* ===============================================================
   Version 36 — seamless Share/Finish image blending
   =============================================================== */
.finish-responsive-card{
  position:relative;
  overflow:hidden;
  background:#263d50;
}

/* The Christmas image now fills the full card behind the content.
   The slate panel is an overlay rather than a separate hard-edged column. */
.finish-responsive-right{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-height:100% !important;
  z-index:0 !important;
  background:#10283a !important;
}

.finish-responsive-right img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:73% center;
  transform:scale(1.015);
}

.finish-responsive-left{
  position:relative;
  z-index:2;
  width:60%;
  min-height:590px;
  background:transparent !important;
}

/* Very wide fade eliminates the visible vertical joining line. */
.finish-responsive-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(38,61,80,1) 0%,
      rgba(38,61,80,1) 36%,
      rgba(38,61,80,.99) 46%,
      rgba(38,61,80,.90) 55%,
      rgba(38,61,80,.68) 64%,
      rgba(38,61,80,.40) 73%,
      rgba(38,61,80,.14) 82%,
      rgba(38,61,80,0) 91%
    );
}

.finish-responsive-fade{
  display:none !important;
}

@media(max-width:760px){
  .finish-responsive-card{
    display:block !important;
    min-height:100vh;
  }

  .finish-responsive-left{
    width:100%;
    min-height:100vh;
    padding-bottom:390px;
  }

  .finish-responsive-right{
    position:absolute !important;
    inset:0 !important;
  }

  .finish-responsive-right img{
    object-position:72% center;
  }

  .finish-responsive-card::before{
    background:
      linear-gradient(
        180deg,
        rgba(38,61,80,1) 0%,
        rgba(38,61,80,.99) 48%,
        rgba(38,61,80,.86) 60%,
        rgba(38,61,80,.56) 72%,
        rgba(38,61,80,.18) 86%,
        rgba(38,61,80,0) 100%
      );
  }
}


/* ===============================================================
   Version 37 — Restore approved Version 33 Finish artwork.
   Desktop uses the exact approved artwork.
   Mobile scales the complete artwork to the available viewport
   and enlarges the invisible tap targets without altering artwork.
   =============================================================== */
#finish-screen.screen-active{
  position:fixed !important;
  inset:0 !important;
  z-index:45 !important;
  width:100% !important;
  min-height:100vh !important;
  height:100vh !important;
  overflow:auto !important;
  padding:18px !important;
  background:rgba(7,25,38,.82) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  align-items:center !important;
  justify-content:center !important;
}
.finish-v33-card{
  position:relative !important;
  z-index:46 !important;
  width:min(1180px,97vw) !important;
  aspect-ratio:1600 / 960 !important;
  overflow:hidden !important;
  border-radius:30px !important;
  box-shadow:0 28px 90px rgba(0,0,0,.38) !important;
  background:#20394b !important;
  flex:none !important;
}
.finish-v33-art{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}
.finish-v33-hotspot{
  position:absolute !important;
  z-index:48 !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  border-radius:14px !important;
  color:transparent !important;
  font-size:0 !important;
}
.finish-v33-hotspot:focus-visible{
  outline:4px solid #00B5E2 !important;
  outline-offset:4px !important;
}
.finish-v33-stateofflux{left:4.7% !important;bottom:6.9% !important;width:22.1% !important;height:8.7% !important}
.finish-v33-restart{left:28.3% !important;bottom:6.9% !important;width:22.1% !important;height:8.7% !important}

@media(max-width:720px){
  #finish-screen.screen-active{
    padding:8px !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .finish-v33-card{
    width:calc(100vw - 16px) !important;
    max-width:none !important;
    border-radius:18px !important;
  }
  /* Make the two artwork buttons easier to tap on small screens
     while preserving their visual positions. */
  .finish-v33-stateofflux{
    left:3.8% !important;
    bottom:5.4% !important;
    width:23.8% !important;
    height:11.5% !important;
  }
  .finish-v33-restart{
    left:27.4% !important;
    bottom:5.4% !important;
    width:23.8% !important;
    height:11.5% !important;
  }
}

/* Introduction mobile check: keep the new four-icon sequence readable. */
@media(max-width:620px){
  .welcome-actions{display:grid !important;grid-template-columns:1fr !important}
  .welcome-actions>*{width:100% !important;min-width:0 !important}
  .start-challenge-btn{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }
  .button-emoji-seq{
    display:inline-flex !important;
    flex:none !important;
    gap:3px !important;
  }
  .button-emoji-seq img{
    width:25px !important;
    height:25px !important;
  }
}

/* V38: exact V33 Finish artwork scaled as one unit on mobile */
.prize-continue-button{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;flex-wrap:wrap!important}
.prize-continue-button .button-emoji-seq{display:inline-flex!important;gap:3px!important}
.prize-continue-button .button-emoji-seq img{width:25px!important;height:25px!important;object-fit:contain!important}
@media(max-width:720px){
 #finish-screen.screen-active{padding:6px!important;overflow:hidden!important;align-items:center!important;justify-content:center!important}
 .finish-v33-card{width:min(calc(100vw - 12px),calc((100vh - 12px)*1.6666667))!important;height:auto!important;aspect-ratio:5/3!important;max-width:none!important;max-height:none!important;flex:0 0 auto!important;border-radius:14px!important}
 .finish-v33-art{inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
 .finish-v33-stateofflux{left:3.8%!important;bottom:4.4%!important;width:24%!important;height:14%!important}
 .finish-v33-restart{left:27.3%!important;bottom:4.4%!important;width:24%!important;height:14%!important}
}

/* V39 Finish rebuilt to behave like Share */
#finish-screen.screen-active{position:fixed!important;inset:0!important;z-index:45!important;width:100%!important;min-height:100vh!important;height:100vh!important;overflow:auto!important;padding:20px!important;background:rgba(7,25,38,.82)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.finish-modal-card{position:relative;width:min(1100px,100%);min-height:590px;overflow:hidden;border-radius:24px;background:#061f33;box-shadow:0 22px 70px rgba(0,0,0,.38)}
.finish-modal-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:73% center;transform:scale(1.015)}
.finish-modal-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(38,61,80,1) 0%,rgba(38,61,80,1) 37%,rgba(38,61,80,.98) 47%,rgba(38,61,80,.86) 56%,rgba(38,61,80,.58) 66%,rgba(38,61,80,.24) 76%,rgba(38,61,80,0) 88%)}
.finish-modal-overlay{position:relative;z-index:2;width:60%;min-height:590px;padding:42px 40px 34px 46px;display:flex;flex-direction:column;justify-content:center;color:#fff}
.finish-modal-logo{width:158px;max-width:38%;background:rgba(255,255,255,.98);border-radius:9px;padding:7px 10px;margin-bottom:22px}
.finish-modal-kicker{color:#00B5E2;font-weight:900;font-size:clamp(12px,1.4vw,18px);letter-spacing:.02em;margin-bottom:18px}
.finish-modal-christmas{color:#00B5E2;font-size:18px;font-weight:900;letter-spacing:.14em;margin-bottom:16px}
.finish-modal-title{font-size:clamp(48px,7.1vw,82px);font-weight:950;letter-spacing:-.045em;line-height:.95;margin-bottom:24px}
.finish-modal-title span{color:#00B5E2}
.finish-modal-copy{font-size:clamp(22px,2.5vw,34px);font-weight:800;line-height:1.12;max-width:570px;margin-bottom:24px}
.finish-modal-greeting{color:#00B5E2;font-size:clamp(16px,1.7vw,21px);font-weight:900;line-height:1.3;letter-spacing:.12em;margin-bottom:30px}
.finish-modal-actions{display:grid;gap:12px;width:min(500px,100%)}
.finish-modal-action{width:100%;min-height:58px;border-radius:10px;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border:0;font-weight:900;font-size:clamp(16px,1.8vw,21px);cursor:pointer}
.finish-modal-action-dark{background:#1d3447;border:1px solid rgba(255,255,255,.16)}
.finish-modal-action-blue{background:#00B5E2}
.finish-modal-action .button-emoji-seq{display:inline-flex!important;align-items:center!important;gap:3px!important;margin:0 8px!important}
.finish-modal-action .button-emoji-seq img{width:25px!important;height:25px!important;object-fit:contain!important}
@media(max-width:760px){
 #finish-screen.screen-active{padding:0!important;align-items:flex-start!important;justify-content:center!important}
 .finish-modal-card{width:100%;min-height:100vh;border-radius:0}
 .finish-modal-bg{object-position:72% center}
 .finish-modal-card::before{background:linear-gradient(180deg,rgba(38,61,80,.99) 0%,rgba(38,61,80,.98) 45%,rgba(38,61,80,.78) 58%,rgba(38,61,80,.30) 76%,rgba(38,61,80,0) 100%)}
 .finish-modal-overlay{width:100%;min-height:100vh;padding:34px 28px 92px;justify-content:flex-start}
 .finish-modal-logo{width:140px;max-width:48%;margin-top:14px;margin-bottom:20px}
 .finish-modal-title{font-size:58px;margin-bottom:22px}
 .finish-modal-copy{font-size:24px;max-width:520px}
 .finish-modal-actions{width:100%;max-width:520px}
 .finish-modal-action{min-height:58px;flex-wrap:wrap;justify-content:center;gap:8px}
 .finish-modal-action .button-emoji-seq img{width:23px!important;height:23px!important}
}


/* V42 score history + subscribe */
.finish-history{width:min(500px,100%);margin:0 0 22px;padding:13px 15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(8,30,45,.38);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.finish-history-heading{color:#fff;font-size:16px;font-weight:900;margin-bottom:9px}
.finish-history-scores{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.finish-history-chip{min-width:52px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.10);color:#fff;text-align:center;font-weight:900;font-size:15px}
.finish-history-chip.current{background:#00B5E2;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.finish-history-stats{display:flex;flex-wrap:wrap;gap:18px;color:#dceaf0;font-size:14px}
.finish-history-stats strong{color:#fff}
.finish-history-best-message{margin-top:8px;color:#ffd45c;font-size:14px;font-weight:900}
.finish-modal-action-subscribe{background:#006f9f;border:1px solid rgba(255,255,255,.14)}
@media(max-width:760px){
 .finish-history{width:100%;margin-bottom:18px;padding:11px 12px}
 .finish-history-heading{font-size:15px}
 .finish-history-chip{min-width:46px;padding:6px 8px;font-size:14px}
 .finish-history-stats{gap:12px;font-size:13px}
 .finish-modal-actions{padding-bottom:28px}
}

/* V43: score history and subscription on round results */
.result-history,.result-subscribe{margin-top:24px;padding:24px;border:1px solid #d6e4e9;border-radius:20px;background:rgba(240,248,250,.78)}
.result-history h3,.result-subscribe h3{margin:0 0 12px;color:#263f53;font-size:24px;font-weight:900}
.result-history-scores{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.result-history-chip{min-width:64px;padding:10px 14px;border-radius:999px;background:#fff;color:#263f53;text-align:center;font-size:18px;font-weight:900;border:1px solid #d6e4e9}
.result-history-chip.current{background:#00b5e2;color:#fff;border-color:#00b5e2}
.result-history-stats{display:flex;gap:28px;flex-wrap:wrap;color:#526977;font-size:16px}
.result-history-stats strong{color:#008dcc;margin-left:5px}
.result-history-best-message{margin-top:12px;color:#9c7200;font-size:16px;font-weight:900}
.result-subscribe{display:flex;align-items:center;justify-content:space-between;gap:24px}
.result-subscribe p{margin:0;color:#314c61;font-size:17px}
.result-subscribe a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:14px;background:#00aee0;color:#fff;text-decoration:none;font-weight:900}
@media(max-width:760px){.result-history,.result-subscribe{margin-top:18px;padding:18px;border-radius:16px}.result-history h3,.result-subscribe h3{font-size:20px}.result-history-chip{min-width:54px;padding:8px 11px;font-size:16px}.result-history-stats{gap:12px 20px;font-size:14px}.result-subscribe{display:block}.result-subscribe p{font-size:15px;margin-bottom:14px}.result-subscribe a{width:100%;min-height:52px;padding:0 14px;text-align:center}}

/* V44 compact result controls */
.result-main-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.72fr);
  gap:12px!important;
  align-items:stretch;
  margin-top:24px;
}
.result-main-actions > *{
  width:100%;
  min-height:66px;
  margin:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
  box-sizing:border-box;
}
.result-play-more{
  flex-direction:column;
  gap:4px;
}
.result-play-emojis{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  height:18px;
}
.result-play-emojis img{
  width:17px;
  height:17px;
  object-fit:contain;
}
.result-subscribe-inline{
  background:#0876d1!important;
  color:#fff!important;
}
.result-finish-inline{
  background:#f4f6f2!important;
}
.result-history{
  margin-top:18px!important;
  margin-bottom:0!important;
  padding:18px 22px!important;
}
.result-history h3{
  margin:0 0 12px!important;
}
.result-history-chip{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.history-best-santa{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}
@media(max-width:760px){
  .result-main-actions{
    grid-template-columns:1.15fr .95fr .7fr;
    gap:7px!important;
    margin-top:18px;
  }
  .result-main-actions > *{
    min-height:58px;
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:14px!important;
  }
  .result-play-emojis{gap:2px;height:15px}
  .result-play-emojis img{width:14px;height:14px}
  .result-history{margin-top:14px!important;padding:15px!important}
  .history-best-santa{width:18px;height:18px}
}


/* ===============================================================
   Version 45 — align result action rows and heading hierarchy
   =============================================================== */

/* Same three-column proportions as the share row */
.result-main-actions{
  grid-template-columns:1.22fr 1.12fr .72fr !important;
  gap:12px !important;
}

/* Play More mirrors Create share card */
.result-play-more{
  background:#2f4d64 !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* Subscribe mirrors Share on LinkedIn */
.result-subscribe-inline{
  background:#0b70d1 !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* Finish mirrors Copy text */
.result-finish-inline{
  background:#f1f4ef !important;
  color:#263f53 !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Match heights across both button rows */
.result-main-actions > *{
  min-height:64px !important;
  border-radius:16px !important;
}

/* Make the three major result headings the same size */
#result-screen .result-band h3,
#result-screen .share-block h3,
#result-screen .result-history h3{
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  margin-top:0 !important;
}

/* If the "You know Santa very well." heading is not inside result-band h3,
   catch the common result heading classes as well. */
#result-screen .result-message-title,
#result-screen .result-recommendation h3,
#result-screen .result-history-title{
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

@media(max-width:760px){
  .result-main-actions{
    grid-template-columns:1.22fr 1.12fr .72fr !important;
    gap:7px !important;
  }

  .result-main-actions > *{
    min-height:58px !important;
    border-radius:13px !important;
  }

  #result-screen .result-band h3,
  #result-screen .share-block h3,
  #result-screen .result-history h3,
  #result-screen .result-message-title,
  #result-screen .result-recommendation h3,
  #result-screen .result-history-title{
    font-size:20px !important;
  }
}


/* ===============================================================
   Version 45 final — mirrored action widths/colours + heading alignment
   =============================================================== */
#result-screen .share-box > .button-row,
#result-screen .result-main-actions{
  display:grid !important;
  grid-template-columns:1.22fr 1.12fr .72fr !important;
  gap:12px !important;
  align-items:stretch !important;
}

#result-screen .share-box > .button-row > *,
#result-screen .result-main-actions > *{
  width:100% !important;
  min-width:0 !important;
  min-height:64px !important;
  margin:0 !important;
  border-radius:16px !important;
  box-sizing:border-box !important;
}

#result-screen .result-play-more{
  background:#2f4d64 !important;
  color:#fff !important;
}
#result-screen .result-subscribe-inline{
  background:#0b70d1 !important;
  color:#fff !important;
}
#result-screen .result-finish-inline{
  background:#f1f4ef !important;
  color:#263f53 !important;
}

#result-screen #result-headline,
#result-screen #cta-area h3,
#result-screen .share-box h3,
#result-screen .result-history h3{
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
}

#result-screen .result-history{
  margin-top:24px !important;
  margin-bottom:20px !important;
}

@media(max-width:760px){
  #result-screen .share-box > .button-row,
  #result-screen .result-main-actions{
    grid-template-columns:1.22fr 1.12fr .72fr !important;
    gap:7px !important;
  }

  #result-screen .share-box > .button-row > *,
  #result-screen .result-main-actions > *{
    min-height:58px !important;
    border-radius:13px !important;
    padding-left:7px !important;
    padding-right:7px !important;
    font-size:14px !important;
  }

  #result-screen #result-headline,
  #result-screen #cta-area h3,
  #result-screen .share-box h3,
  #result-screen .result-history h3{
    font-size:20px !important;
  }
}


/* ===============================================================
   Version 46 — result heading alignment/size
   =============================================================== */

/* Match the yellow recommendation-box heading size, not the top result headline. */
#result-screen #cta-area h3,
#result-screen .share-box h3,
#result-screen .result-history h3{
  font-size:20px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
}

/* Explicit left alignment for Share and History headings. */
#result-screen .share-box h3,
#result-screen .result-history h3{
  text-align:left !important;
}

/* Preserve the score-page headline at its existing larger size. */
#result-screen #result-headline{
  text-align:center !important;
}

@media(max-width:760px){
  #result-screen #cta-area h3,
  #result-screen .share-box h3,
  #result-screen .result-history h3{
    font-size:18px !important;
  }
}

.bonus-indicator{display:inline-block;margin:0 0 10px;padding:7px 12px;border-radius:999px;background:#FCC425;color:#273C4E;font-weight:900;letter-spacing:.06em;font-size:13px}
.prize-icon{font-size:52px;line-height:1;margin:4px auto 12px}
.prize-extra{margin:16px 0}
.reward-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 4px}
.reward-choice-grid button{min-height:58px;border:1px solid rgba(0,139,204,.28);background:#fff;border-radius:14px;padding:10px;color:#273C4E;font-weight:800;cursor:pointer}
.reward-choice-grid button:hover{border-color:#008BCC;box-shadow:0 6px 18px rgba(0,139,204,.14)}
.reward-note{font-size:13px;color:#587184;margin-top:10px}
.prize-actions .is-disabled{opacity:.55;pointer-events:none}
@media(max-width:600px){.reward-choice-grid{grid-template-columns:1fr}.prize-icon{font-size:44px}}

.bonus-indicator[hidden]{display:none !important;}

.prize-icon .prize-custom-emoji{
  width:64px;
  height:64px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
@media (max-width:600px){
  .prize-icon .prize-custom-emoji{width:54px;height:54px}
}

.button-emoji-row{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:10px;
  vertical-align:middle;
}
.button-emoji-row img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:0 0 auto;
}
@media(max-width:600px){
  .button-emoji-row{
    display:flex;
    justify-content:center;
    margin:5px 0 0;
  }
  .button-emoji-row img{width:20px;height:20px}
}

/* Version 68 — four-choice Christmas screen saver prize */
.background-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:18px 0 6px;
}
.background-choice-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #d8e5e9;
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 22px rgba(39,60,78,.08);
}
.background-choice-preview{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#0a2134;
}
.background-choice-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
}
.background-choice-body strong{
  min-width:0;
  color:#273C4E;
  font-size:13px;
  line-height:1.25;
  text-align:left;
}
.background-download-btn{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:10px;
  font-size:12px;
}
@media(max-width:680px){
  .background-choice-grid{grid-template-columns:1fr;gap:12px}
  .background-choice-body{padding:11px}
}
.prize-card{
  max-height:calc(100vh - 44px);
  overflow:auto;
}


/* Version 76: single static illustrated background behind transparent Three.js foreground */
.app-shell{
  background-image:
    linear-gradient(180deg,rgba(5,20,40,.02) 0%,rgba(5,20,40,.04) 58%,rgba(4,16,30,.10) 100%),
    url("./assets/static-backdrop-v85.png?v=85");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
#three-canvas{background:transparent!important}

.app-shell::before{display:none!important}