/* Match Snowman Magic's regular and bold Comic Neue; locally supplied font files take precedence. */
@font-face{font-family:'Comic Neue';src:local('Comic Neue'),url('../ComicNeue-Regular.ttf') format('truetype'),url('https://www.primarygames.co.uk/snowman-magic/ComicNeue-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Comic Neue';src:local('Comic Neue Bold'),url('../ComicNeue-Bold.ttf') format('truetype'),url('https://www.primarygames.co.uk/snowman-magic/ComicNeue-Bold.ttf') format('truetype');font-style:normal;font-weight:700 900;font-display:swap}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#07172d;color:#fff;font-family:'Comic Neue','Trebuchet MS',sans-serif;touch-action:none}
button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:5px solid #ffd76d;outline-offset:5px}
[hidden]{display:none!important}
#viewport{position:fixed;inset:0;overflow:hidden;background:#07172d}
#app{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;isolation:isolate;overflow:hidden;background:#143661}
#scene{position:absolute;inset:0;background:url('present-panic-workshop-background-clear.webp') center/100% 100% no-repeat;z-index:0}
#scene::before{content:'';position:absolute;left:78px;bottom:463px;width:148px;height:164px;pointer-events:none;opacity:.76;mix-blend-mode:screen;background:
radial-gradient(ellipse at 50% 88%,rgba(255,191,92,.60) 0 22%,rgba(255,191,92,.20) 40%,transparent 66%),
radial-gradient(ellipse at 46% 67%,rgba(255,249,202,.96) 0 11%,rgba(255,213,113,.95) 20%,rgba(255,159,45,.90) 36%,rgba(255,103,21,.54) 53%,transparent 68%),
radial-gradient(ellipse at 33% 77%,rgba(255,239,184,.82) 0 8%,rgba(255,173,72,.66) 24%,transparent 44%),
radial-gradient(ellipse at 66% 76%,rgba(255,232,167,.84) 0 7%,rgba(255,155,56,.68) 23%,transparent 44%),
radial-gradient(ellipse at 50% 62%,rgba(255,124,33,.40) 0 14%,transparent 34%);filter:drop-shadow(0 0 10px rgba(255,191,97,.48)) drop-shadow(0 0 26px rgba(255,136,45,.34));transform-origin:50% 100%;animation:fireFlicker 1.95s ease-in-out infinite}
#scene::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 148px 568px,rgba(255,206,120,.13),rgba(255,174,68,.08) 72px,transparent 170px),linear-gradient(180deg,rgba(5,24,47,.21),rgba(5,25,51,.08) 42%,rgba(7,28,62,.04) 72%,rgba(7,34,55,.14));pointer-events:none;animation:fireGlow 2.4s ease-in-out infinite}
#topbar{position:absolute;inset:0;pointer-events:none;z-index:1100}
#topbar>*{pointer-events:auto}
#backBtn,#fullscreenBtn{position:absolute;top:24px;z-index:100;min-height:52px;padding:9px 21px;border:3px solid rgba(230,247,255,.9);border-radius:999px;background:rgba(248,253,255,.97);color:#3e647f;font-size:21px;font-weight:900;text-decoration:none;box-shadow:0 6px 17px #0b264c57}
#backBtn{left:28px}#backBtn::before{content:'←';margin-right:9px}
#fullscreenBtn{right:28px;min-width:190px;display:flex;align-items:center;justify-content:center;gap:9px}
#fullscreenBtn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#fullscreenBtn .fs-exit{display:none}#fullscreenBtn[data-active='true'] .fs-enter{display:none}#fullscreenBtn[data-active='true'] .fs-exit{display:block}
#backBtn:hover,#fullscreenBtn:hover{background:#fff}
#resetBtn{position:absolute;left:28px;bottom:25px;width:73px;height:73px;border:4px solid #c7dce7;border-radius:50%;background:#739bb0;box-shadow:inset 0 3px #ffffff45,inset 0 -6px #18445b29,0 7px 16px #22454429;display:grid;place-items:center}
#resetBtn svg{width:34px;height:34px;stroke:white;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
#resetBtn:hover{filter:brightness(1.08)}
#irLogo{position:absolute;right:88px;bottom:46px;width:120px;height:auto;z-index:1300;pointer-events:none;filter:drop-shadow(0 6px 12px #021c3733)}
#brand{position:absolute;right:32px;bottom:14px;width:234px;text-align:center;text-decoration:none;color:#fff7df;font-size:18px;font-weight:900;text-shadow:0 2px 7px #000d}
#intro{position:absolute;inset:0;z-index:80;display:flex;align-items:center;flex-direction:column;pointer-events:none}
#intro>*{pointer-events:auto}
#introShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,25,52,.44),rgba(10,39,76,.38) 44%,rgba(10,39,76,.54) 86%);pointer-events:none}

@keyframes fireFlicker{0%{transform:translateY(1px) scale(.98,1.02) rotate(-1deg);opacity:.90}20%{transform:translateY(-2px) scale(1.03,.97) rotate(1deg);opacity:1}48%{transform:translateY(0) scale(.97,1.04) rotate(-.7deg);opacity:.92}72%{transform:translateY(-3px) scale(1.05,.95) rotate(1.2deg);opacity:1}100%{transform:translateY(1px) scale(.99,1.01) rotate(-.4deg);opacity:.94}}
@keyframes fireGlow{0%,100%{filter:none;opacity:1}50%{filter:brightness(1.04);opacity:.92}}
/* Optimised transparent title asset, sized for the 1920×1080 stage. */
#introTitle{position:relative;z-index:2;width:1040px;margin:65px 0 0;line-height:0;filter:drop-shadow(0 9px 11px rgba(4,22,52,.65))}
#introTitle img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
#introSubtitle{font-size:43px;font-weight:900;color:#ffffff;margin:5px 0 10px;text-shadow:0 4px 12px #061833}
#introText{text-align:center;max-width:1450px;font-size:35px;line-height:1.35;font-weight:700;margin:50px 0 14px;color:#ffffff;text-shadow:0 4px 8px #07192b}
#playBtn{position:relative;display:block;margin:10px auto 0;width:435px;height:145px}
.image-btn{font-size:0;color:transparent;border:0;background:transparent center/contain no-repeat;filter:drop-shadow(0 9px 5px #08233b70);transition:filter .15s;touch-action:manipulation}
.image-btn:hover{filter:drop-shadow(0 0 11px #ffebad9e) brightness(1.07)}
.image-btn:active{filter:brightness(.96)}
#playBtn{background-image:url('decorate-the-tree-btn-play.webp')}
#changeObjective{position:absolute;bottom:37px;left:50%;transform:translateX(-50%);width:322px;height:59px;border-radius:19px;border:3px solid #b7e2fa;background:linear-gradient(180deg,#fffefa,#d9f1ff);color:#285c83;font-size:24px;font-weight:900;box-shadow:0 5px 0 #37688c99,0 9px 17px #071c3555}
#changeObjective:hover{filter:brightness(1.08)}
#objectiveSummary{position:relative;margin:0;text-align:center;width:1180px;font-size:23px;line-height:1.3;font-weight:900;color:#ffffff;text-shadow:0 3px 7px #082140}
#game{position:absolute;inset:0;z-index:30;pointer-events:none}
#game>*{pointer-events:auto}
#questionPanel{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:980px;height:110px;border:5px solid #886146;border-radius:31px;background:linear-gradient(180deg,#fffaf0 0%,#f7edda 65%,#efe0c3 100%);box-shadow:0 8px 0 #5037248c,0 16px 24px #08233a64,inset 0 3px 0 #ffffffb5;display:flex;align-items:center;justify-content:center;z-index:40;padding:6px 34px 10px}
#equation{position:relative;z-index:2;color:#1b3953;font-size:73px;font-weight:900;letter-spacing:-1px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #fff}
#slotStage{position:absolute;inset:0;z-index:20;pointer-events:none}
.elf-slot{position:absolute;top:272px;width:348px;height:548px;padding:0;border:none;background:transparent;color:inherit;pointer-events:auto;transition:filter .14s;touch-action:manipulation;-webkit-user-select:none;user-select:none;outline-offset:7px}
.elf-slot{transform:scale(var(--slot-scale,1));transform-origin:center top}
.elf-slot.depth-back{z-index:10}
.elf-slot.depth-front{z-index:20}
.elf-slot:disabled{cursor:default}.elf-slot:hover:not(:disabled){filter:brightness(1.10)}
.elf-slot:focus-visible{border-radius:26px;outline:5px solid #ffd76d}
.elf-shadow{position:absolute;bottom:8px;left:38px;right:38px;height:33px;border-radius:50%;background:#113a6094;filter:blur(14px)}
/* Stationary clipping well: elves cannot show through the floor below a closed box. */
.elf-well{position:absolute;left:0;right:0;top:-90px;bottom:24px;overflow:hidden;z-index:2;pointer-events:none}
.elf-pop{position:absolute;top:94px;left:3px;width:342px;height:448px;z-index:2;transform:translateY(270px);transition:transform .53s cubic-bezier(.22,1.15,.39,1),opacity .35s;opacity:0;pointer-events:none;will-change:transform}
.elf-slot.ready .elf-pop{transform:translateY(0);opacity:1}
.elf-slot.duck .elf-pop{transform:translateY(96px)}
.elf-slot.mischief .elf-pop{animation:elfWiggle .56s ease-in-out}
@keyframes elfWiggle{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(8px) rotate(-3deg)}58%{transform:translateY(-8px) rotate(4deg)}85%{transform:translateY(2px) rotate(-2deg)}}
.elf-art{position:absolute;left:21px;top:-23px;width:300px;height:401px;overflow:visible;filter:drop-shadow(0 10px 8px #203a4870)}
.elf-art img{display:block;width:100%;height:100%;object-fit:contain}
.gift{position:absolute;left:64px;top:-61px;width:215px;height:220px;display:block;z-index:5;transform:rotate(var(--gift-tilt,0deg));transform-origin:center}
.gift-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 12px #0c203966)}
.gift-answer{position:absolute;left:50%;top:92px;z-index:4;display:flex;align-items:center;justify-content:center;width:132px;height:82px;padding:2px 8px;transform:translateX(-50%);border-radius:18px;color:#294158;font-size:40px;line-height:1;font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #fff}
.elf-box{position:absolute;bottom:24px;left:14px;width:320px;height:286px;z-index:3;filter:drop-shadow(0 12px 11px #07264b69)}
.elf-box img{display:block;width:100%;height:100%;object-fit:contain}
.elf-box-back{z-index:1}
.elf-box-front{z-index:3;pointer-events:none}
.elf-box-front img{clip-path:inset(22% 0 0 0)}
.elf-slot.in-flight .gift{visibility:hidden}
.elf-slot.wrong .elf-box{animation:wrongJolt .32s ease}
@keyframes wrongJolt{20%{transform:translateX(-8px)}45%{transform:translateX(9px)}70%{transform:translateX(-3px)}100%{transform:none}}
.elf-slot.correct .elf-pop{transform:translateY(-20px)}
.elf-slot.retreat{pointer-events:none}
.elf-slot.retreat .elf-pop,.elf-slot.ready.retreat .elf-pop,.elf-slot.correct.retreat .elf-pop{transform:translateY(270px);opacity:0;transition:transform .35s cubic-bezier(.55,.04,.82,.46),opacity .11s linear .25s}

.elf-slot.wrong .elf-box{animation:wrongJolt .32s ease}
@keyframes wrongJolt{20%{transform:translateX(-8px)}45%{transform:translateX(9px)}70%{transform:translateX(-3px)}100%{transform:none}}
/* Rear-workshop placement: sack fits in the gap between the two back pop-up boxes. */
#sackWrap{position:absolute;left:50%;transform:translateX(-50%);bottom:338px;width:260px;height:232px;z-index:14;pointer-events:none;filter:drop-shadow(0 8px 7px #0c2e4d70)}
#sackImage{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#sackWrap.is-full{animation:sackCelebrate .7s cubic-bezier(.22,1.2,.36,1) both}
@keyframes sackCelebrate{0%{transform:translateX(-50%) scale(.96)}35%{transform:translateX(-50%) scale(1.10)}65%{transform:translateX(-50%) scale(.99)}100%{transform:translateX(-50%) scale(1)}}
#bagTag{position:absolute;top:83px;left:50%;transform:translateX(-50%);padding:0;display:flex;align-items:center;justify-content:center;color:#efd7a6;font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:1px;white-space:nowrap;z-index:42;pointer-events:none;text-shadow:0 2px 3px rgba(58,34,17,.18)}
#bagTag.pop{animation:bagBump .42s ease-out}@keyframes bagBump{25%{transform:translateX(-50%) scale(1.16)}100%{transform:translateX(-50%) scale(1)}}
#feedback{position:absolute;bottom:177px;left:50%;transform:translateX(-50%);min-width:330px;text-align:center;font-size:30px;font-weight:900;color:#fff7df;text-shadow:0 2px 6px #123452;z-index:37;opacity:0;transition:opacity .15s;pointer-events:none}
#feedback.show{opacity:1}
#fxLayer{position:absolute;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.snowball{position:absolute;left:0;top:0;width:53px;height:53px;border:3px solid #cfe8f5;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff 0%,#faffff 40%,#c5e3f2 72%,#9dc2d6);box-shadow:inset -4px -5px 8px #8abbcf7a,0 4px 13px #072b4b72;will-change:transform}
.snow-puff{position:absolute;width:12px;height:12px;left:0;top:0;background:radial-gradient(circle,#fff,#d0edff 74%,transparent);border:1px solid #fff9;border-radius:50%;opacity:0;animation:snowPuff .57s ease-out both}
@keyframes snowPuff{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}35%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.7)}}
.fly-gift{position:absolute;z-index:1000;pointer-events:none;will-change:transform;transform-origin:center center}
.fly-gift .gift{left:0;top:0;transform:none;position:relative}
#end{position:absolute;inset:0;z-index:65;pointer-events:none}
#end>*{pointer-events:auto}
#endShade{position:absolute;left:50%;top:132px;width:870px;height:265px;transform:translateX(-50%);border-radius:48px;background:linear-gradient(180deg,#fffef5e9,#f8f0d6e8);border:6px solid #af7e49;box-shadow:0 15px 20px #08264891}
#endTitle{position:absolute;left:50%;top:164px;transform:translateX(-50%);margin:0;color:#163954;text-align:center;font-size:76px;font-weight:900;text-shadow:0 3px #fff;white-space:nowrap}
#endText{position:absolute;left:50%;top:270px;transform:translateX(-50%);margin:0;color:#435e66;font-size:33px;font-weight:900;white-space:nowrap}
#endButtons{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);display:flex;gap:28px;align-items:center;justify-content:center}
#end[data-outcome="santa"] #endButtons{gap:32px}
#mainBtn,#againBtn{width:355px;height:133px}#mainBtn{background-image:url('decorate-the-tree-btn-main.webp')}#againBtn{background-image:url('decorate-the-tree-btn-play-again.webp')}
@media (prefers-reduced-motion:reduce){#scene::before,#scene::after{animation:none}.elf-pop{transition-duration:.2s}}

#livesPanel{position:absolute;top:31px;left:50%;transform:translateX(-50%);z-index:43;display:flex;align-items:center;justify-content:center;pointer-events:none;background:none;border:0;box-shadow:none;width:auto;height:auto;padding:0}
#lifeIcons{display:flex;align-items:center;gap:16px}
.life-snowball{width:44px;height:44px;display:block;flex:none;border:3px solid #eef8ff;border-radius:50%;background:radial-gradient(circle at 32% 27%,#fff 0%,#fbffff 32%,#d8edf8 67%,#95bdd4 100%);box-shadow:inset -4px -5px 7px #95bdd08c,0 3px 5px rgba(34,63,80,.23),0 0 8px #d0f3ff55;transition:filter .22s,opacity .22s,transform .22s}
.life-snowball.spent{filter:grayscale(1) brightness(.58);opacity:.26;box-shadow:inset -3px -4px 6px #627e89;transform:scale(.78)}
.life-snowball.losing{animation:lifePop .46s ease-out both}
@keyframes lifePop{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(.78)}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#slotStage.elves-victory .elf-slot.ready .elf-pop{animation:elfVictoryHop .7s ease-in-out infinite alternate}
#slotStage.elves-victory .elf-slot:nth-child(2) .elf-pop{animation-delay:.19s}
#slotStage.elves-victory .elf-slot:nth-child(3) .elf-pop{animation-delay:.37s}
#slotStage.elves-victory .elf-slot:nth-child(4) .elf-pop{animation-delay:.55s}
@keyframes elfVictoryHop{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-17px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.life-snowball.losing,#slotStage.elves-victory .elf-slot.ready .elf-pop{animation:none}}


.elf-slot.depth-back .elf-art{top:20px}
.elf-slot.depth-back .gift{top:-18px}
.elf-slot.depth-back .elf-box{left:39px;width:270px;height:240px}

@media (prefers-reduced-motion:reduce){.elf-slot.retreat .elf-pop,.elf-slot.ready.retreat .elf-pop,.elf-slot.correct.retreat .elf-pop{transition-duration:.14s,.08s;transition-delay:0s, .05s}}

@media (prefers-reduced-motion:reduce){#sackWrap.is-full{animation:none}}

/* Victory reveal: no banner, just an enchanted sack rising out of a soft cloud. */
#end[data-outcome="santa"] #endShade,
#end[data-outcome="santa"] #endTitle,
#end[data-outcome="santa"] #endText{display:none}
#end[data-outcome="santa"] #endButtons{gap:450px;z-index:12}
#slotStage.victory-clearing{opacity:0;transition:opacity .7s ease-in;pointer-events:none}

/* Starts at the normal rear-workshop position; grows towards the viewer. */
#sackWrap.victory-reveal{z-index:49;transform-origin:50% 100%;animation:sackForward 1.72s cubic-bezier(.24,.78,.27,1) both}
@keyframes sackForward{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  100%{transform:translateX(-50%) translateY(150px) scale(1.56)}
}

/* Feathered mist blends with the workshop; no added image asset or heavy canvas. */
#victoryMist{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);width:860px;height:640px;z-index:60;pointer-events:none;opacity:0;overflow:visible;isolation:isolate}
#victoryMist.active{animation:mistVeil 2.52s ease-in-out both}
#victoryMist .mist-glow{position:absolute;left:16%;top:25%;width:68%;height:57%;border-radius:50%;filter:blur(30px);background:radial-gradient(ellipse at center,rgba(249,253,255,.94) 0%,rgba(230,249,255,.78) 28%,rgba(212,238,255,.40) 55%,transparent 78%)}
#victoryMist .mist-cloud{position:absolute;border-radius:50%;filter:blur(20px);background:radial-gradient(ellipse at 48% 47%,rgba(255,255,255,.94) 0%,rgba(237,251,255,.86) 31%,rgba(213,232,245,.57) 53%,rgba(214,242,255,.12) 70%,transparent 79%);animation:mistDrift 2.52s ease-out both;will-change:transform}
#victoryMist .m1{left:8%;top:26%;width:47%;height:43%;--dx:-100px;--dy:-82px}
#victoryMist .m2{left:36%;top:15%;width:45%;height:42%;--dx:80px;--dy:-102px}
#victoryMist .m3{left:22%;top:37%;width:54%;height:47%;--dx:16px;--dy:55px}
#victoryMist .m4{left:54%;top:35%;width:44%;height:45%;--dx:106px;--dy:-26px}
#victoryMist .m5{left:5%;top:50%;width:46%;height:34%;--dx:-94px;--dy:62px}
#victoryMist .m6{left:34%;top:54%;width:44%;height:39%;--dx:10px;--dy:83px}
#victoryMist .m7{left:15%;top:12%;width:40%;height:32%;--dx:-58px;--dy:-89px}
#victoryMist .m8{left:45%;top:46%;width:43%;height:38%;--dx:83px;--dy:52px}
@keyframes mistVeil{0%{opacity:0}16%{opacity:1}40%{opacity:1}57%{opacity:.93}76%{opacity:.55}100%{opacity:0}}
@keyframes mistDrift{0%{transform:translate(0,0) scale(.77)}24%{transform:translate(calc(var(--dx)*.16),calc(var(--dy)*.12)) scale(1)}100%{transform:translate(var(--dx),var(--dy)) scale(1.23)}}
@media (prefers-reduced-motion:reduce){
 #victoryMist.active{animation:none;opacity:0}
 #victoryMist .mist-cloud{animation:none}
 #sackWrap.victory-reveal{animation:none;transform:translateX(-50%) translateY(150px) scale(1.56)}
 #slotStage.victory-clearing{transition:none}
}

/* Snow falls OUTSIDE only after the sack has finished its victory slide.
   A small clipped canvas uses the exact 1920×1080 game coordinates; no snow is
   rendered over the workshop, window woodwork, or while answering questions. */
#windowSnow{position:absolute;left:750px;top:208px;width:420px;height:315px;display:block;opacity:0;z-index:4;pointer-events:none;transition:opacity 1.15s ease-in;contain:layout paint}
#windowSnow.active{opacity:1}
@media (prefers-reduced-motion:reduce){#windowSnow{transition:none}}


/* Quiet completion-time keeps the victory sack as the visual focus. */
#endTime{
 position:absolute;left:50%;bottom:48px;z-index:12;
 transform:translateX(-50%);margin:0;width:max-content;max-width:1280px;
 color:#fff6dc;font-size:32px;font-weight:900;line-height:1.28;
 text-align:center;white-space:nowrap;pointer-events:none;
 text-shadow:0 2px 6px #082744,0 0 12px #08274488;
 animation:completionTimeIn .6s ease-out both;
}
@keyframes completionTimeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#endTime{animation:none}}

/* Intro shading must stay behind the lettering. */
#introShade{z-index:1}
#introSubtitle,#introText,#objectiveSummary{position:relative;z-index:2}
#playBtn,#changeObjective{z-index:2}


/* Gentle elves ending. Keep the workshop and elves fully visible.
   Both lines sit beneath the buttons rather than obscuring the characters.
   Santa's success ending retains its own established layout. */
#end[data-outcome="elves"] #endShade{display:none}
#end[data-outcome="elves"] #endTitle,
#end[data-outcome="elves"] #endText{
  left:50%;top:auto;transform:translateX(-50%);
  margin:0;padding:0;z-index:12;white-space:nowrap;
  width:max-content;max-width:1600px;text-align:center;
  color:#fff;font-family:'Comic Neue','Trebuchet MS',sans-serif;
  font-weight:900;letter-spacing:0;
  text-shadow:0 3px 6px rgba(9,26,45,.95),0 0 13px rgba(9,26,45,.75);
  pointer-events:none;
}
/* Consistent typography across both lines of the elves' ending. */
#end[data-outcome="elves"] #endTitle{bottom:66px;font-size:35px;line-height:1.15}
#end[data-outcome="elves"] #endText{bottom:19px;font-size:35px;line-height:1.15}
#end[data-outcome="elves"] #endButtons{z-index:12}

/* Let the elves dance through their entire cheeky jingle before the
   finishing words and the two action buttons fade into view together. */
#end[data-outcome="elves"] #endTitle,
#end[data-outcome="elves"] #endText,
#end[data-outcome="elves"] #endButtons{
 opacity:0;
 visibility:hidden;
 pointer-events:none;
 transition:opacity .46s ease-out,visibility .46s;
}
#end[data-outcome="elves"].elves-reveal #endTitle,
#end[data-outcome="elves"].elves-reveal #endText,
#end[data-outcome="elves"].elves-reveal #endButtons{
 opacity:1;
 visibility:visible;
}
#end[data-outcome="elves"].elves-reveal #endButtons{pointer-events:auto}
@media (prefers-reduced-motion:reduce){
 #end[data-outcome="elves"] #endTitle,
 #end[data-outcome="elves"] #endText,
 #end[data-outcome="elves"] #endButtons{transition:none}
}