@font-face { font-family: 'Clock Fredoka'; src: url('../fonts/fredoka-bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Georgia, 'Times New Roman', serif; color: #fff4d7; background: #081d2c; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button, .utility a { min-height: 44px; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff2ac; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: fixed; left: 12px; top: -100px; z-index: 100; background: #fff4d7; color: #143d31; padding: 14px; }
.skip:focus { top: 8px; }
.utility { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px max(14px, env(safe-area-inset-left)); max-width: 1700px; margin: auto; font: 14px Arial, sans-serif; }
.utility div { display: flex; gap: 8px; }
.utility a, .utility button { color: #e9eedf; border: 0; background: transparent; padding: 12px; border-radius: 24px; text-decoration: none; display: inline-flex; align-items: center; }
.utility button:hover, .utility a:hover { background: #244442; }
main { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.stage { position: relative; width: min(100%, 1700px); aspect-ratio: 1672 / 941; margin: auto; isolation: isolate; container-type: inline-size; }
.backdrop { display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: -2; }
.heading { position: absolute; top: 3.3%; left: 19%; width: 62%; text-align: center; text-shadow: 0 3px 15px #04131f; }
.heading p { margin: 0 0 5px; font: 12px Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #eddbac; }
h1 { font-size: clamp(28px, 4cqw, 66px); font-weight: normal; line-height: 1.04; margin: 0; }
.unit { position: absolute; top: 41%; height: 17%; width: 7.9%; text-align: center; color: #fff0bd; text-shadow: 0 2px 2px #000b; }
.unit span { position: absolute; top: 10%; left: 0; width: 100%; font: bold clamp(28px, 5.6cqw, 94px)/1 Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -.06em; padding-right: .06em; white-space: nowrap; }
/* All four values share a scale that comfortably fits three-digit days. */
.unit span { font-size: clamp(18px, 4.2cqw, 71px); top: 18%; letter-spacing: -.04em; }
.unit small { position: absolute; bottom: .3%; left: 0; width: 100%; color: #291c0a; text-shadow: none; font-size: clamp(11px, 1.3cqw, 22px); text-transform: uppercase; font-weight: bold; }
.days { left: 20.3%; }.hours { left: 31.25%; }.minutes { left: 43.15%; }.seconds { left: 55.35%; }
.story { position: absolute; top: 40.1%; left: 66.4%; width: 10.5%; height: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #513018; }
.story h2 { font-weight: normal; font-size: clamp(15px, 1.65cqw, 27px); line-height: 1.05; text-align: center; margin: 0; }
.story-art { display: flex; width: 85%; height: 40%; align-items: center; justify-content: center; }
.story-art .sprite { width: 45%; margin: 0 -5%; }
.sprite { display: inline-block; background-image: url('../img/christmas-clock/decorations.webp'); background-size: 300% 100%; background-repeat: no-repeat; aspect-ratio: 1; width: 64px; vertical-align: middle; }
.sprite.ribbon { background-position: 0 0; }.sprite.star { background-position: 50% 0; }.sprite.bell { background-position: 100% 0; }
.gold-button { color: #fff4d2; border: 2px solid #dcb46d; border-radius: 40px; background: linear-gradient(#245b40, #0a352d); box-shadow: inset 0 0 0 2px #132f24, 0 3px 7px #0005; font-weight: bold; padding: 10px 20px; }
.gold-button:hover { background: linear-gradient(#397553, #194f3c); }
.story .gold-button { white-space: nowrap; font-size: clamp(12px, 1.25cqw, 21px); padding: 6px 10px; max-width: 100%; }
.friend { position: absolute; border: 0; background: transparent; border-radius: 45%; min-width: 48px; min-height: 48px; }
.friend span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; padding: 6px 10px; border-radius: 12px; white-space: nowrap; background: #0c352eee; color: #fff0c5; font: 13px Arial, sans-serif; }
.friend:hover, .friend:focus-visible, .friend.greeting { box-shadow: 0 0 25px 7px #fff0a544; background: #fff3bc0a; }
.friend:hover span, .friend:focus-visible span { opacity: 1; }
.friend.santa { left: 59%; top: 59%; width: 10%; height: 26%; }
.friend.elf { left: 19%; top: 18%; width: 13%; height: 10%; }
.friend.snowman { left: 7%; top: 61%; width: 7%; height: 21%; }
.friend.reindeer { left: 72%; top: 67%; width: 13%; height: 18%; }
.friend.presents { left: 34%; top: 69%; width: 15%; height: 13%; }
.collect { position: absolute; width: max(48px, 4.3%); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; filter: drop-shadow(0 3px 3px #071b2caa); z-index: 3; transform: translate(-50%, -50%); }
.collect .sprite { width: 100%; }
.collect:hover { background: #fff2c036; }
.collect.ribbon { left: 28%; top: 87%; }.collect.star { left: 53%; top: 76%; }.collect.bell { left: 87%; top: 76%; }
.collect.hinted { outline: 3px solid #fff6bd; outline-offset: 5px; box-shadow: 0 0 26px 10px #ffeabc88; }
.tree-reward { position: absolute; left: 92.4%; top: 10.5%; width: max(48px, 5.5%); min-width: 48px; aspect-ratio: 1; border: none; background: none; padding: 0; filter: drop-shadow(0 0 10px #ffdf85); }
.tree-reward .sprite { width: 100%; }
.scene-message { width: min(840px, calc(100% - 28px)); margin: 0 auto 12px; padding: 12px 18px; border: 1px solid #cfb27b; border-radius: 16px; background: #fff4dc; color: #193f31; font: 700 clamp(18px,2vw,22px)/1.4 'Clock Fredoka','Arial Rounded MT Bold','Trebuchet MS',sans-serif; text-wrap: balance; overflow-wrap: anywhere; text-align: center; }
.rail { position: absolute; left: 10%; right: 8%; bottom: 1.6%; min-height: 9.6%; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 8px 20px; background: linear-gradient(100deg, #103e33ee, #062e2cf5); border: 1px solid #cfb375; border-radius: 24px; box-shadow: 0 4px 15px #06152155; }
.rail p { margin: 0 auto 0 0; font-size: clamp(15px, 1.65cqw, 28px); }
.rail button { font-size: clamp(15px, 1.5cqw, 25px); }
.mission-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 22px; max-width: 1100px; margin: 10px auto; color: #fff1cd; border: 1px solid #486961; border-radius: 18px; background: #0f3637; }
.mission-strip strong { font-size: 20px; }.mission-strip p { margin: 5px 0 0; font: 14px/1.4 Arial, sans-serif; }
.mission-actions { display: flex; gap: 10px; }.mission-actions button { border: 1px solid #baa374; border-radius: 25px; color: #fff1cf; background: #204b3a; padding: 10px 16px; white-space: nowrap; }
.save-note, .fallback { text-align: center; font: 14px/1.5 Arial, sans-serif; padding: 12px; color: #efe7ce; }.fallback a { color: inherit; }
dialog { color-scheme: light; color: #294434; border: 2px solid #c9a362; border-radius: 26px; background: radial-gradient(ellipse at top, #fff9ed, #f0dfb8); padding: 36px; width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 30px); box-shadow: 0 16px 70px #0009; }
dialog::backdrop { background: #031923b8; backdrop-filter: blur(4px); }
dialog .close { position: absolute; top: 4px; right: 8px; border: none; background: transparent; color: #244b38; width: 44px; font-size: 30px; }
dialog h2 { font-weight: normal; font-size: 34px; line-height: 1.08; margin: 14px 0; }
dialog p { font: 16px/1.65 Arial, sans-serif; }
dialog .eyebrow { color: #93602a; font: bold 11px/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; margin-top: 8px; }
dialog .gold-button, dialog .plain { display: block; width: 100%; margin-top: 10px; min-height: 48px; font-size: 17px; }
dialog .plain { background: transparent; border: 1px solid #9caa8d; border-radius: 30px; color: #294d3b; padding: 10px; }
dialog button:focus-visible { outline-color: #174c3c; }
.basket { display: flex; justify-content: center; gap: 15px; margin: 20px 0; }.basket div { text-align: center; font: 13px Arial, sans-serif; }.basket .sprite { width: 75px; display: block; }.basket .found { opacity: .45; }
.keepsake { padding: 20px; text-align: center; background: #dee6ce; border: 1px solid #a5af8a; border-radius: 18px; }.keepsake .sprite { width: 100px; }.keepsake strong { display: block; font-size: 23px; }
.friend-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.friend-list button { border: 1px solid #8ca28a; border-radius: 14px; background: #e4ead7; color: #234832; padding: 10px; min-height: 48px; }
@media (max-width: 950px) and (min-aspect-ratio: 1001/1000) { .heading p { display: none; }.story-art { display: none; }.story { gap: 8px; }.rail p { display: none; }.rail { left: 22%; right: 22%; justify-content: center; padding: 5px 10px; }.rail button { padding: 8px 14px; }.mission-strip { margin: 8px 12px; }.tree-reward { left: auto; right: 8px; } }
@media (max-aspect-ratio: 1/1) {
  .utility { padding: 3px 6px; font-size: 12px; }.utility div { gap: 0; }.utility a, .utility button { padding: 10px; }
  .stage { aspect-ratio: 941 / 1672; width: min(100%, 700px, max(360px, calc((100dvh - 60px) * .5628))); }
  .heading { top: 3.5%; left: 12%; width: 76%; }.heading p { font-size: 9px; letter-spacing: .08em; margin-bottom: 9px; }h1 { font-size: clamp(29px, 7.2cqw, 49px); }
  .unit { top: 28.8%; height: 9%; width: 14.2%; }.unit span { top: 8%; font-size: clamp(27px, 8cqw, 56px); }.unit small { bottom: 1.5%; font-size: clamp(10px, 2.5cqw, 17px); }
  .unit span { font-size: clamp(20px, 6.7cqw, 47px); top: 14%; }
  .days { left: 13.3%; }.hours { left: 33%; }.minutes { left: 52.8%; }.seconds { left: 72.6%; }
  .story { top: 74.2%; left: 7%; width: 86%; height: 10%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 8px 10px; }.story-art { display: none; }.story h2 { font-size: clamp(20px, 5cqw, 32px); }.story .gold-button { font-size: clamp(15px, 3.8cqw, 23px); min-height: 44px; padding: 8px; }
  .friend.santa { left: 39%; top: 48%; width: 28%; height: 23%; }.friend.elf { left: 12%; top: 16%; width: 26%; height: 7%; }.friend.snowman { left: 16%; top: 49%; width: 20%; height: 12%; }.friend.reindeer { left: 72%; top: 54%; width: 20%; height: 17%; }.friend.presents { left: 21%; top: 63%; width: 22%; height: 7%; }
  .friend span { font-size: 12px; }.collect { width: max(48px, 10%); }.collect.ribbon { left: 8%; top: 67%; }.collect.star { left: 35%; top: 59%; }.collect.bell { left: 91%; top: 42%; }.tree-reward { left: auto; right: 0; top: 28%; width: max(44px,8%); min-width: 44px; }.tree-reward .sprite { width: 70%; margin-left: auto; display: block; }
  .rail { bottom: 3.5%; left: 5%; right: 5%; min-height: 7%; gap: 8px; padding: 6px; border-radius: 26px; }.rail p { display: none; }.rail button { flex: 1; padding: 9px 6px; font-size: clamp(16px, 4cqw, 25px); }

  .mission-strip { margin: 0 12px 10px; padding: 14px; flex-direction: column; text-align: center; gap: 10px; }.mission-strip strong { font-size: 20px; }.mission-actions { width: 100%; }.mission-actions button { flex: 1; padding: 10px 8px; }
  dialog { padding: 30px 22px 24px; }dialog h2 { font-size: 29px; }.basket { gap: 10px; }.basket .sprite { width: 65px; }
}
@media (prefers-reduced-motion: no-preference) { .tree-reward { animation: ornament-glow 4s ease-in-out infinite alternate; }@keyframes ornament-glow { to { filter: drop-shadow(0 0 15px #fff5b6); } } }

/* Optional favors and permanent scene keepsakes. */
.parcel-card { padding: 18px; border: 2px solid #b58948; border-radius: 18px; text-align: center; background: #e8d3a4; }
.parcel-card > span { display: block; font-size: 55px; color: #365a41; }
.delivery-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.delivery-choices span { display: block; font-size: 26px; }
.light-pattern { display:flex; flex-wrap:wrap; gap:8px 22px; padding-left:25px; font: 16px/1.6 Arial,sans-serif; }
.light-pattern li { padding:4px; }.light-pattern .checked { background:#d3e2be; border-radius:8px; }
.light-choices { display:grid; grid-template-columns:1fr; gap:10px; }
.light-key { min-height:52px; border:2px solid #76502b; border-radius:16px; color:#172e29; font-weight:bold; padding:12px; }
.light-0 { background:#ffe39a; }.light-1 { background:#f6bbbb; }.light-2 { background:#bfdef2; }
.keepsake + .keepsake { margin-top:14px; }
.gift-reward { position:absolute; left:38%; top:73%; width:max(48px,4%); aspect-ratio:1; padding:0; background:none; border:0; }
.gift-reward .sprite { width:100%; }
.light-reward { position:absolute; left:39%; top:62%; width:14%; height:3.5%; display:flex; justify-content:space-around; align-items:center; border:0; border-top:2px solid #d9ba75; border-radius:50%; background:transparent; color:#ffe39a; font-size:clamp(12px,1.6cqw,25px); text-shadow:0 0 9px #ffe59c; }
.light-reward span:nth-child(2){color:#ffc0b8}.light-reward span:nth-child(3){color:#bfe9ff}
@media(max-aspect-ratio:1/1){
.gift-reward{left:25%;top:64%;width:12%}
.light-reward{left:38%;top:39.5%;width:24%;height:3%;font-size:clamp(12px,3.5cqw,21px)}
.delivery-choices{grid-template-columns:1fr}.delivery-choices span{display:inline;margin-right:12px}
}

/* Calm, user-paced feedback: animation never controls mission progress. */
.delivery-scene { text-align:center; padding:14px; margin:12px 0; background:#e0e8d2; border:1px solid #8b9e76; border-radius:18px; }
.delivery-scene p { margin:8px 0 0; font-size:14px; }
.delivery-route { height:52px; max-width:210px; margin:0 auto 8px; position:relative; border-bottom:2px dotted #a28b55; }
.travel-parcel { position:absolute; left:calc(100% - 75px); top:2px; font-size:34px; }
.delivery-friend { position:absolute; right:0; top:3px; font-size:34px; color:#35533b; }
.light-key.is-lit { outline:3px solid #9b6a20; outline-offset:2px; box-shadow:0 0 18px #e8c25c99,inset 0 0 16px #fff9d8; }
.light-key.is-lit::after { content:' ✓'; }
.reward-reveal { outline:2px solid #fff0b1; outline-offset:5px; border-radius:24px; }
@media(prefers-reduced-motion:no-preference){
.travel-parcel { animation:parcel-delivery 1.2s ease-out both; }
.reward-reveal { animation:reward-arrival 1.8s ease-out; }
@keyframes parcel-delivery { from { left:0; transform:rotate(-8deg); opacity:.4; } to { left:calc(100% - 75px); transform:rotate(0); opacity:1; } }
@keyframes reward-arrival { 0% { opacity:.25; transform:scale(.85); } 40% { opacity:1; transform:scale(1.12); } 100% { transform:scale(1); } }
}

.gift-reward, .light-reward { pointer-events:none; }

/* Approved elf stays on the ledge in both independent compositions. */
.elf-layer{position:absolute;left:16.1%;top:12%;width:18.5%;aspect-ratio:1916/1080;pointer-events:none;z-index:-1}.elf-layer img,.elf-layer video{position:absolute;inset:0;width:100%;height:100%}
@media(max-aspect-ratio:1/1){.elf-layer{left:7%;top:12.6%;width:32%}}

@media(max-width:360px) and (max-aspect-ratio:1/1){.heading{top:2.5%}.heading p{display:none}.heading h1{font-size:25px}}

/* Approved reindeer greeting, registered to both scene compositions. */
.reindeer-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.reindeer-layer img,.reindeer-layer video{position:absolute;left:61.2%;top:58.6%;width:29.3%;height:auto;aspect-ratio:1916/1080}
@media(max-aspect-ratio:1/1){.reindeer-layer img,.reindeer-layer video{left:40%;top:47%;width:83.5%}}

/* Santa greeting uses the approved desktop and portrait registration. */
.santa-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.santa-layer img,.santa-layer video{position:absolute;left:48.9%;top:56.5%;width:30.4%;height:auto;aspect-ratio:1916/1080}
@media(max-aspect-ratio:1/1){.santa-layer img,.santa-layer video{left:9.3%;top:43.5%;width:91.5%}}

.snowman-thanks { text-align:center; }
.snowman-media { width:100%; max-width:380px; margin:0 auto; aspect-ratio:1916/1080; position:relative; }
.snowman-media img, .snowman-media video { width:100%; height:100%; object-fit:contain; }
.snowman-media [hidden] { display:none; }

/* Scrapbook celebrations sit in the dialog's top layer without blocking controls. */
.keepsake-celebrate { display:inline-grid; place-items:center; min-width:112px; min-height:112px; border:2px solid #b18a43; border-radius:50%; background:radial-gradient(circle,#fff8d6,#dce8c9); cursor:pointer; box-shadow:0 5px 12px #244b3820; }
.keepsake-celebrate:hover { box-shadow:0 0 22px #d7a82d99; }
.keepsake-tap { display:block; font:13px/1.5 Arial,sans-serif; color:#36553c; margin:7px 0 10px; }
.keepsake-celebration { position:fixed; inset:0; width:100vw; height:100dvh; pointer-events:none; z-index:100; overflow:hidden; }
.celebration-message { position:absolute; top:9%; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; padding:15px 24px; border:2px solid #efd184; border-radius:24px; background:#194b3a; color:#fff1c8; text-align:center; font:700 clamp(24px,4vw,36px)/1.2 'Clock Fredoka','Arial Rounded MT Bold','Trebuchet MS',sans-serif; text-wrap:balance; text-shadow:0 2px 0 #082d24; box-shadow:0 8px 30px #0004; z-index:2; }
.celebration-piece { position:absolute; top:50%; left:50%; font-size:clamp(20px,4vw,42px); opacity:0; animation:keepsake-burst 2.6s var(--delay) cubic-bezier(.15,.6,.35,1) both; text-shadow:0 2px 4px #1236; }
.celebration-piece.penguin { font-size:clamp(42px,7vw,76px); }
@keyframes keepsake-burst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.25)} 12%{opacity:1} 70%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--spin)) scale(1.15)} }
.keepsake-firework { position:absolute; width:8px; height:8px; color:#ffda79; animation:keepsake-firework 2.3s ease-out both; }
.keepsake-firework:nth-last-child(even){color:#a2e5ff}
.keepsake-firework i { position:absolute; width:clamp(42px,8vw,110px); height:4px; border-radius:50%; background:linear-gradient(90deg,transparent,currentColor); transform-origin:0 50%; transform:rotate(var(--angle)) translateX(12px); box-shadow:0 0 7px currentColor; }
@keyframes keepsake-firework { 0%{opacity:0;transform:scale(.05)} 20%{opacity:1} 100%{opacity:0;transform:scale(1.7)} }
.celebration-parade { position:absolute; top:24%; width:100%; text-align:center; font-size:clamp(34px,7vw,64px); }
@media(prefers-reduced-motion:reduce){.celebration-piece,.keepsake-firework{display:none}}

/* Santa's simple, picture-led reindeer light check. */
.light-welcome { display:flex; align-items:center; gap:8px; margin:8px 0 14px; padding:10px; background:#e1e8d3; border:1px solid #b6bd92; border-radius:18px; }
.light-welcome img { width:96px; height:96px; object-fit:contain; flex:none; }
.light-welcome p { margin:0; font-size:15px; line-height:1.5; }
.festive-light { display:block; width:58px; height:70px; margin:0 auto 5px; filter:drop-shadow(0 3px 2px #392a1920); }
.light-pattern { gap:6px; }
.light-pattern li { flex:1; min-width:0; padding:7px 3px; text-align:center; font-size:13px; }
.light-pattern .festive-light { width:42px; height:50px; }
.light-key { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:9px 4px; font-size:14px; min-width:0; }
.light-key.is-lit .festive-light { filter:drop-shadow(0 0 8px #ffed94); }
@media(max-width:380px){.light-welcome img{width:72px;height:82px}.light-welcome p{font-size:14px}.light-key{font-size:13px}.light-pattern li{font-size:12px}}

.light-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.light-choices .light-key { width:100%; min-height:108px; margin:0; }

/* Picture-led matching: one clear target directly above the choices. */
.light-game .eyebrow { display:none; }
.light-game h2 { font-size:32px; margin:8px 0 12px; text-align:center; }
.light-game .light-welcome { margin:0 0 10px; padding:6px 12px; }
.light-game .light-welcome img { width:86px; height:74px; }
.light-game .light-welcome p { font-size:20px; font-weight:bold; line-height:1.25; }
.light-match-cue { display:grid; justify-items:center; width:max-content; max-width:100%; margin:auto; padding:8px 26px 0; border:3px solid #a57b34; border-radius:22px; background:#fff5d8; }
.light-match-cue strong { font: bold 23px/1.2 Georgia,serif; }
.light-match-cue .festive-light { width:70px; height:84px; margin:0; }
.light-match-cue span { font:bold 20px/1.3 Arial,sans-serif; }
.light-match-cue b { color:#285c3e; font: bold 38px/1 Arial,sans-serif; }
.light-game .light-tap-instruction { font:bold 21px/1.25 Arial,sans-serif; text-align:center; margin:10px 0; }
.light-game .light-choices { gap:8px; }
.light-game .light-key { font-size:18px; min-height:120px; border-width:3px; line-height:1.15; }
.light-game .light-key .festive-light { width:62px; height:74px; }
.light-game .light-feedback { font-size:19px; text-align:center; line-height:1.3; margin:10px 0; }
.light-journey { display:flex; align-items:center; justify-content:center; gap:14px; padding:8px; font-size:28px; }
.light-journey span:not(:first-child):not(:last-child) { color:#7d735e; border:2px solid #bbb293; border-radius:50%; width:36px; text-align:center; }
.light-journey .done { background:#285c3e; color:#fff6cd!important; }
.light-journey .current { background:#ffe393; border-color:#947025!important; }
.light-extra summary { font:18px/1.4 Arial,sans-serif; min-height:44px; padding:10px 0; cursor:pointer; }
@media(max-width:380px){.light-game h2{font-size:27px}.light-game .light-key{font-size:16px;min-height:112px}.light-game .light-welcome p{font-size:18px}.light-game .light-tap-instruction{font-size:19px}.light-game .light-welcome img{width:66px}.light-game .light-key .festive-light{width:54px;height:65px}}

/* One-shot light-check finale. Sky effects stay clear of the clock windows. */
.north-pole-light-show { position:absolute; inset:0; pointer-events:none; z-index:-1; overflow:hidden; border-radius:inherit; }
.celebration-aurora { position:absolute; inset:0 0 auto; height:19%; overflow:hidden; mask-image:linear-gradient(#000 50%,transparent); }
.celebration-aurora i { position:absolute; left:-25%; top:-40%; width:150%; height:120%; border-radius:45%; border-bottom:26px solid #69ffc4; box-shadow:0 12px 32px #39e7be, inset 0 -10px 28px #51ecc2; filter:blur(10px); opacity:0; transform:rotate(-8deg); animation:aurora-celebrate 5s .65s ease-in-out both; }
.celebration-aurora i:nth-child(2){border-color:#81bdff;box-shadow:0 10px 28px #409dff;top:-24%;animation-delay:.95s;transform:rotate(9deg)}
.celebration-aurora i:nth-child(3){border-color:#cd9bff;box-shadow:0 10px 28px #bd71ff;top:-60%;animation-delay:1.2s;transform:rotate(-14deg)}
@keyframes aurora-celebrate {0%,100%{opacity:0;translate:-8% 0}25%,65%{opacity:.8}80%{translate:8% -5%}}
.rising-light-sparks { position:absolute; left:39%; top:62%; width:14%; height:4%; }
.rising-light-sparks i { position:absolute; left:calc(var(--n)*4%); color:#ffe7a0; font-size:clamp(12px,1.8cqw,26px); font-style:normal; text-shadow:0 0 12px #ffd877; opacity:0; animation:light-spark-rise 3.2s calc(.45s + var(--n)*.05s) ease-out both; }
@keyframes light-spark-rise {0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-220px) scale(.3)}}
.north-pole-lit .light-reward span { animation:earned-light-flourish 5.5s ease-out both; }
.north-pole-lit .light-reward span:nth-child(2){animation-delay:.35s}
.north-pole-lit .light-reward span:nth-child(3){animation-delay:.7s}
@keyframes earned-light-flourish {0%{filter:brightness(1);scale:1}15%,45%{filter:brightness(1.8) drop-shadow(0 0 10px #fff2af);scale:1.65}100%{filter:brightness(1);scale:1}}
.light-reward span { filter:drop-shadow(0 0 5px #ffdf83); }
@media(max-aspect-ratio:1/1){.celebration-aurora{height:14%}.rising-light-sparks{left:38%;top:39.5%;width:24%}}
.north-pole-light-show.still .rising-light-sparks{display:none}
.north-pole-light-show.still .celebration-aurora i { animation:none;opacity:.4; }
@media(prefers-reduced-motion:reduce){.north-pole-lit .light-reward span{animation:none;filter:drop-shadow(0 0 12px #fff2af)}.rising-light-sparks{display:none}.celebration-aurora i{animation:none;opacity:.4}}

/* Earned lights are a brief celebration, not a permanent overlay on the artwork. */
.light-reward, .light-reward.reward-reveal { border:0; outline:0; animation:none; opacity:0; visibility:hidden; transition:opacity .8s ease,visibility 0s .8s; }
.north-pole-lit .light-reward { opacity:1; visibility:visible; transition:opacity .25s ease; }
@media(prefers-reduced-motion:reduce){.light-reward,.north-pole-lit .light-reward{transition:none}}

/* Recognizable character portraits for picture-led parcel deliveries. */
.parcel-card.friend-parcel { position:relative; width:min(250px,100%); margin:12px auto; padding:16px; background:linear-gradient(90deg,transparent 43%,#d9b760 43% 57%,transparent 57%),linear-gradient(0deg,transparent 39%,#d9b760 39% 53%,transparent 53%),#933b35; border:3px solid #c6a254; box-shadow:0 7px 15px #4b271f25; }
.friend-parcel .parcel-tag { position:relative; margin:0 auto; background:#fff3d5; border:2px solid #ad8848; border-radius:14px; width:155px; max-width:100%; padding:8px; color:#284b37; transform:rotate(-3deg); }
.friend-parcel .parcel-tag strong { display:block; font-size:20px; }
.friend-portrait { position:relative; display:block; height:110px; width:100%; overflow:hidden; }
.friend-portrait img { position:absolute; width:200%; max-width:none; height:100%; left:-50%; object-fit:contain; }
.friend-portrait.elf img { width:115%;left:-7.5%; }
.delivery-choices { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.delivery-choices .friend-choice { padding:8px 4px 12px; margin:0; border:2px solid #b18b49; border-radius:20px; background:radial-gradient(ellipse at 50% 35%,#fff9e6,#e5d5b1); box-shadow:0 4px 8px #15382b20; min-height:158px; color:#244b38; }
.delivery-choices .friend-choice span { display:block; margin:0; }
.delivery-choices .friend-choice .friend-name { font-size:18px; line-height:1.2; font-weight:bold; }
.friend-choice:hover,.friend-choice:focus-visible { background:#fff4ca; border-color:#557647; box-shadow:0 0 16px #d8b76066; }
@media(prefers-reduced-motion:no-preference){.friend-choice img{transition:transform .35s ease}.friend-choice:hover img,.friend-choice:focus-visible img{transform:translateY(-4px) rotate(2deg)}}
@media(max-width:380px){.delivery-choices .friend-choice .friend-name{font-size:16px}.friend-portrait{height:94px}.delivery-choices .friend-choice{min-height:142px}.parcel-card.friend-parcel{padding:12px;margin:10px auto}}

/* Slightly larger, friendlier lettering for the children's activity cards. */
dialog { font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', Arial, sans-serif; }
dialog h2 { font-family: inherit; font-size: 35px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
dialog p { font-family: 'Trebuchet MS', Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.55; }
dialog .gold-button, dialog .plain, dialog .friend-list button { font-size: 19px; font-weight: 700; }
dialog .delivery-choices .friend-choice .friend-name { font-size: 19px; font-weight: 800; }
dialog .parcel-tag strong { font-size: 21px; font-weight: 800; }
@media(max-width:380px) {
  dialog h2 { font-size: 30px; }
  dialog .delivery-choices .friend-choice .friend-name { font-size: 17px; }
}

.mrs-claus-success { text-align:center; margin:12px auto; }
.mrs-claus-success video,.mrs-claus-success img { display:block; width:auto; height:250px; max-width:100%; object-fit:contain; margin:auto; border-radius:20px; background:#fff3de; }
@media(max-width:480px){.mrs-claus-success video,.mrs-claus-success img{height:210px;}}

dialog:has(.mrs-claus-success) { width:min(560px,calc(100% - 28px)); }
dialog:has(.mrs-claus-success) .keepsake { margin-top:12px; padding:12px; }
dialog:has(.mrs-claus-success) .keepsake .sprite { width:55px; }
dialog:has(.mrs-claus-success) .keepsake p { margin:6px 0 0; font-size:16px; }

/* A small character companion and a dimensional storybook reward card. */
dialog:has(.friendship-greeting) {
  width:min(580px,calc(100% - 28px));
  background:radial-gradient(circle at 12% 4%,#fffdf1 0,transparent 35%),radial-gradient(circle at 90% 90%,#e7bf7255,transparent 45%),linear-gradient(135deg,#fff1d2,#f5dfb4);
  border:3px solid #cda45f;
  box-shadow:inset 0 0 0 4px #fff4d0,0 18px 65px #02171ecc;
}
dialog:has(.friendship-greeting) h2 { color:#23513e; text-shadow:0 2px 0 #fffcdf; }
.friendship-greeting { display:grid;grid-template-columns:108px minmax(0,1fr);gap:14px;align-items:center;margin:18px 0; }
.friendship-greeting .mrs-claus-success { margin:0;align-self:center; }
.friendship-greeting .mrs-claus-success video,.friendship-greeting .mrs-claus-success img {
  height:144px;width:108px;max-width:100%;border-radius:0;background:transparent;object-fit:contain;filter:drop-shadow(0 5px 3px #60421a25);
}
.mrs-message { position:relative;background:linear-gradient(#fffaf0,#fff0cf);border:1px solid #ddbe83;border-radius:22px;padding:15px;box-shadow:0 5px 12px #69421c14,inset 0 2px 0 #fff; }
.mrs-signature { color:#93612d;font-size:13px;font-weight:700; }
.mrs-message p { margin:7px 0; }
dialog .mrs-message .plain { font-size:16px;min-height:44px;background:#f0dfb5;border-color:#c6a566;box-shadow:inset 0 2px 0 #fff6d9; }
dialog:has(.friendship-greeting) .keepsake { background:radial-gradient(ellipse at top,#467d52,#204c39);color:#fff3cb;border:2px solid #d5b66c;box-shadow:inset 0 0 0 3px #163c3044,0 6px 12px #38271620;padding:17px; }
dialog:has(.friendship-greeting) .keepsake .sprite { width:75px;filter:drop-shadow(0 3px 7px #ffdc6977); }
dialog:has(.friendship-greeting) .gold-button { box-shadow:inset 0 2px 0 #91b37a66,0 4px 0 #082c25,0 6px 12px #153b3533; }
@media(max-width:420px) {
 .friendship-greeting { grid-template-columns:76px minmax(0,1fr);gap:8px; }
 .friendship-greeting .mrs-claus-success video,.friendship-greeting .mrs-claus-success img { width:76px;height:110px; }
 .mrs-message { padding:11px; }
 .mrs-message p { font-size:17px; }
}

/* A lantern-lit storybook visit, scoped to the snowman's greeting. */
dialog:has(.snowy-visit) { width:min(620px,calc(100% - 24px)); padding:0; border:3px solid #d7b977; border-radius:30px; background:#fff0d2; box-shadow:0 20px 80px #00121fe6,inset 0 0 0 3px #fff7dc; }
dialog:has(.snowy-visit) .close { z-index:5; top:10px; right:10px; color:#fff7da; background:#123d4bd9; border:1px solid #e8d29888; border-radius:50%; }
.snowy-scene { position:relative; height:420px; isolation:isolate; overflow:hidden; border-radius:26px 26px 0 0; background:#163e59 url('../img/christmas-clock/snowman-clearing.webp') center/cover no-repeat; }
.snowy-heading { position:relative; z-index:2; text-align:center; padding:46px 44px 0; color:#fff3ce; text-shadow:0 3px 5px #092c48; }
.snowy-heading .eyebrow { color:#fff0c4; font-size:12px; letter-spacing:.1em; }
dialog .snowy-heading h2 { font-family:'Clock Fredoka','Trebuchet MS',sans-serif; font-size:clamp(32px,6vw,44px); letter-spacing:0; margin:8px 0; line-height:1.08; text-shadow:0 3px 0 #163f55,0 0 22px #a8eeea66; }
.snowy-scene #snowmanSlot, .snowy-scene #santaSlot { position:absolute; bottom:16px; width:100%; z-index:2; }
.snowy-scene .snowman-media { height:265px; width:100%; max-width:none; aspect-ratio:auto; filter:drop-shadow(0 9px 5px #213d6244); }
.snowy-scene::after { content:''; position:absolute; width:28%; height:17px; bottom:21px; left:36%; border-radius:50%; background:#294d6866; filter:blur(7px); z-index:1; }
.snowy-flurries { position:absolute; inset:0; z-index:1; pointer-events:none; background-image:radial-gradient(circle,#fff9 1.5px,transparent 2.5px),radial-gradient(circle,#fff6 1px,transparent 2px); background-size:91px 109px,137px 151px; animation:snowy-drift 18s linear infinite; }
.snowy-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 10% 74%,#ffcf7138,transparent 24%),radial-gradient(ellipse at 90% 74%,#ffcf7138,transparent 24%); animation:snowy-lantern 4s ease-in-out infinite alternate; }
.snowy-note { position:relative; text-align:center; padding:20px 26px 26px; background:radial-gradient(ellipse at top,#fffaf0,#f4dfb2); border-top:2px solid #f8e7bd; box-shadow:0 -6px 20px #fff1c733; }
dialog .snowy-note p { font-family:'Clock Fredoka','Trebuchet MS',sans-serif; font-size:23px; line-height:1.3; margin:0 auto 16px; max-width:440px; color:#284e40; }
.snowy-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:12px; }
dialog .snowy-actions button { margin:0; font-family:'Clock Fredoka','Trebuchet MS',sans-serif; font-size:20px; line-height:1.15; min-height:54px; padding:12px; border:2px solid #cba665; box-shadow:inset 0 2px 0 #fff4,0 4px 0 #89733e44; }
dialog .snowy-actions .plain { background:linear-gradient(#fff8df,#f1d28e); color:#3b513b; }
@keyframes snowy-drift { to {background-position:36px 218px,-24px 302px;} }
@keyframes snowy-lantern { to {opacity:.5;} }
@media(max-width:420px) {
 .snowy-scene { height:340px; }
 .snowy-heading { padding:52px 20px 0; }
 .snowy-heading .eyebrow { font-size:10px; }
 .snowy-scene .snowman-media { height:215px; }
 .snowy-scene #snowmanSlot, .snowy-scene #santaSlot { bottom:12px; }
 .snowy-note { padding:17px 16px 20px; }
 dialog .snowy-note p { font-size:20px; }
 .snowy-actions { gap:8px; }
 dialog .snowy-actions button { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) { .snowy-flurries,.snowy-glow { animation:none; } }

/* Picture-first reward reveal: accomplishment, keepsake, then one clear next step. */
dialog:has(.star-victory) { width:min(560px,calc(100% - 24px)); padding:0; border:3px solid #e3bd65; border-radius:30px; background:#113e48; color:#fff5d4; }
dialog:has(.star-victory) .close { color:#fff5d4; z-index:4; border-radius:50%; background:#072b3bcc; top:8px; right:8px; }
.star-victory { text-align:center; overflow:hidden; border-radius:26px; background:radial-gradient(ellipse at 50% 40%,#37766c,#123b4d 65%); }
.star-victory header { position:relative; padding:35px 40px 0; z-index:2; }
dialog .star-victory h2 { font:700 clamp(32px,6vw,44px)/1.1 'Clock Fredoka','Trebuchet MS',sans-serif; margin:0 0 12px; color:#fff2b9; text-shadow:0 3px 0 #062c3d; }
.found-decorations { display:flex; justify-content:center; gap:14px; }
.found-decorations span { position:relative; display:block; width:52px; height:52px; background:#fff4d9; border:2px solid #e3bd65; border-radius:16px; box-shadow:0 4px 0 #072f36; }
.found-decorations .sprite { width:42px; }
.found-decorations b { position:absolute; right:-5px; bottom:-3px; width:21px; height:21px; border-radius:50%; background:#387343; color:#fff; border:2px solid #e3f4cf; font:700 14px/17px Arial,sans-serif; }
.star-prize { position:relative; height:235px; display:grid; place-items:center; isolation:isolate; }
.star-prize::before { content:''; position:absolute; width:290px; height:290px; border-radius:50%; background:repeating-conic-gradient(from 0deg,#ffdf8433 0deg 12deg,transparent 12deg 30deg); mask-image:radial-gradient(#000 15%,transparent 69%); animation:prize-rays 3s ease-out both; z-index:-1; }
.star-prize::after { content:'✦'; position:absolute; top:42px; left:23%; color:#ffe7a3; font-size:27px; text-shadow:230px 18px #ffe7a3,15px 125px #ffe7a3; pointer-events:none; animation:prize-sparks 1.4s ease-out both; }
.star-prize > .sprite { width:195px; filter:drop-shadow(0 8px 0 #052d4244) drop-shadow(0 0 24px #ffdf7080); animation:prize-pop .85s cubic-bezier(.2,.8,.3,1.2) both; }
.star-prize-label { display:block; font:700 27px/1.15 'Clock Fredoka','Trebuchet MS',sans-serif; color:#fff1bd; margin:-8px 12px 18px; }
.star-victory-footer { position:relative; padding:20px 28px 23px; background:linear-gradient(#fff7df,#f3dfb1); color:#254d3b; border-top:3px solid #dbb363; }
dialog .star-victory-footer p { font-size:19px; line-height:1.35; margin:0 0 14px; }
dialog .star-victory-footer .gold-button { font:700 23px/1.2 'Clock Fredoka','Trebuchet MS',sans-serif; min-height:56px; box-shadow:inset 0 2px 0 #a0ce7b66,0 4px 0 #153b2a; }
dialog .star-victory-footer .plain { font-size:16px; min-height:44px; border:0; text-decoration:underline; text-underline-offset:4px; box-shadow:none; margin-top:12px; }
@keyframes prize-pop { from {transform:scale(.4) rotate(-18deg);opacity:0;} 65% {transform:scale(1.1) rotate(5deg);opacity:1;} to {transform:scale(1) rotate(0);} }
@keyframes prize-rays { from {transform:rotate(-30deg) scale(.6);opacity:0;} to {transform:rotate(15deg) scale(1);opacity:1;} }
@keyframes prize-sparks { from {transform:scale(.4);opacity:0;} to {transform:scale(1);opacity:1;} }
@media(max-width:400px) { .star-victory header{padding:48px 20px 0;} .star-prize{height:200px;} .star-prize>.sprite{width:170px;} .star-prize-label{font-size:24px;} .star-victory-footer{padding:16px 18px 18px;} .star-prize::after{left:16%;text-shadow:190px 18px #ffe7a3,15px 115px #ffe7a3;} }
@media(prefers-reduced-motion:reduce) { .star-prize>.sprite,.star-prize::before,.star-prize::after{animation:none;} }

.snowy-sound { display:block; margin:14px auto 0; min-height:44px; border:1px solid #ad915a; border-radius:24px; padding:8px 16px; background:#fff4d7; color:#294d3b; font:700 15px/1.2 'Trebuchet MS',sans-serif; }

/* A compact, picture-led Christmas keepsake collection. */
dialog:has(.scrapbook-world) { width:min(760px,calc(100% - 24px)); padding:0; border:3px solid #dcb972; border-radius:30px; background:#103b44; color:#fff2cb; }
dialog:has(.scrapbook-world) .close { top:10px; right:10px; z-index:3; border-radius:50%; color:#fff3d3; background:#123947ed; border:1px solid #dbc27a; }
.scrapbook-world { border-radius:26px; overflow:hidden; }
.scrapbook-heading { text-align:center; padding:45px 45px 24px; background:linear-gradient(#10364955,#103b44),url('../img/christmas-clock/snowman-clearing.webp') center 8%/cover; }
dialog .scrapbook-heading .eyebrow { color:#ffe5a0; font-size:11px; }
dialog .scrapbook-heading h2 { font:700 clamp(30px,5vw,40px)/1.08 'Clock Fredoka','Trebuchet MS',sans-serif; color:#fff2c9; margin:10px 0; text-shadow:0 3px 0 #062c3b; letter-spacing:0; }
dialog .scrapbook-heading p { margin:8px 0 0; color:#edf9ec; font-size:17px; }
.scrapbook-shelf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:6px 22px 22px; }
.scrapbook-shelf .keepsake { position:relative; margin:0; padding:18px 12px 16px; border:2px solid #e0bd70; border-radius:24px; background:radial-gradient(circle at 50% 25%,#fff8d7,#f5d68e); color:#32503b; box-shadow:inset 0 2px 0 #fff,0 7px 0 #042c34; }
.scrapbook-shelf .keepsake:has(.ribbon) { background:radial-gradient(circle at 50% 25%,#fff6e0,#f2bdb0); border-color:#e4ab7c; }
.scrapbook-shelf .keepsake:has(.bell) { background:radial-gradient(circle at 50% 25%,#f8ffe4,#a6d7c1); border-color:#cbe9b3; }
.scrapbook-shelf .keepsake-celebrate { width:132px; height:132px; min-width:0; min-height:0; max-width:100%; background:radial-gradient(circle,#fff9e3,#fff1c366); border:2px solid #fff9db; box-shadow:0 5px 0 #83683733,0 0 18px #fff5c988; }
.scrapbook-shelf .keepsake-celebrate .sprite { width:110px; max-width:95%; filter:drop-shadow(0 5px 3px #75582533); }
.scrapbook-shelf .keepsake-tap { display:block; width:max-content; max-width:100%; margin:10px auto; padding:5px 9px; border-radius:12px; background:#345c45; color:#fff7d8; font:700 13px/1.15 'Trebuchet MS',sans-serif; }
.scrapbook-shelf .keepsake strong { font:700 23px/1.08 'Clock Fredoka','Trebuchet MS',sans-serif; }
dialog .scrapbook-shelf .keepsake p { font-size:16px; line-height:1.3; margin:10px 0 0; font-weight:600; }
.scrapbook-footer { padding:0 22px 22px; }
dialog .scrapbook-footer .gold-button { margin:0; min-height:52px; font:700 22px/1.2 'Clock Fredoka','Trebuchet MS',sans-serif; }
.scrapbook-empty { grid-column:1/-1; text-align:center; padding:22px; color:#fff6d7; }
@media(prefers-reduced-motion:no-preference) { .scrapbook-shelf .keepsake-celebrate { transition:transform .18s ease,box-shadow .18s ease; } .scrapbook-shelf .keepsake-celebrate:hover,.scrapbook-shelf .keepsake-celebrate:focus-visible { transform:translateY(-4px) rotate(-4deg); box-shadow:0 8px 0 #83683722,0 0 24px #ffed9d; } .scrapbook-shelf .keepsake-celebrate:active { transform:scale(.94); } }
@media(max-width:580px) {
 .scrapbook-heading { padding:48px 24px 20px; }
 .scrapbook-shelf { grid-template-columns:1fr; gap:12px; padding:0 16px 18px; }
 .scrapbook-shelf .keepsake { display:grid; grid-template-columns:105px minmax(0,1fr); column-gap:16px; padding:14px; align-items:center; text-align:left; }
 .scrapbook-shelf .keepsake-celebrate { grid-row:1/3; width:105px;height:105px; }
 .scrapbook-shelf .keepsake-celebrate .sprite { width:88px; }
 .scrapbook-shelf .keepsake strong { grid-column:2; grid-row:1; font-size:23px; align-self:end; }
 dialog .scrapbook-shelf .keepsake p { grid-column:2; grid-row:2; align-self:start; margin-top:6px; font-size:15px; }
 .scrapbook-shelf .keepsake-tap { grid-column:1; grid-row:3; margin:7px 0 0; font-size:11px; padding:4px 6px; }
 .scrapbook-footer { padding:0 16px 18px; }
}

.lights-ready .scrapbook-shelf { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); max-width:620px; margin:auto; }
.lights-ready .keepsake > .sprite { display:block; width:132px; margin:0 auto 16px; filter:drop-shadow(0 7px 5px #71522a33); }
.lights-ready .keepsake { padding-top:24px; }
.lights-ready .scrapbook-heading p { max-width:490px; margin:10px auto 0; }
@media(max-width:580px) {
 .lights-ready .scrapbook-shelf { grid-template-columns:1fr; }
 .lights-ready .keepsake > .sprite { grid-column:1;grid-row:1/3;width:105px;margin:0; }
 .lights-ready .keepsake { padding:16px 14px; }
}

/* Helping Star festival: finite fireworks, character bursts and toy-train parade. */
body:has(dialog[open] .star-victory) { overflow:hidden; }
dialog:has(.star-victory) { max-width:none; }
.star-victory { container-type:inline-size; }
.star-prize > .sprite { position:relative; z-index:2; }
.star-festival { position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-firework { position:absolute; left:var(--burst-left); top:var(--burst-top); width:1px; height:1px; color:var(--tint); }
.hero-firework i { position:absolute; width:5px; height:25px; border-radius:99px; background:currentColor; box-shadow:0 0 7px currentColor; transform-origin:center 0; opacity:0; animation:hero-firework 1.7s var(--delay) ease-out both; --reach:70px; }
@keyframes hero-firework { 0%{opacity:0;transform:rotate(var(--ray)) translateY(0) scaleY(.1)} 18%{opacity:1} 60%{opacity:1;transform:rotate(var(--ray)) translateY(var(--reach)) scaleY(.7)} 100%{opacity:0;transform:rotate(var(--ray)) translateY(calc(var(--reach) + 22px)) scaleY(.1)} }
.star-flyer { position:absolute; left:50%; top:48%; width:38px; height:43px; overflow:hidden; opacity:0; filter:drop-shadow(0 3px 3px #04233155); animation:hero-character-launch 2s var(--delay) cubic-bezier(.2,.6,.4,1) both; }
.star-flyer img { position:absolute; width:200%; height:200%; max-width:none; object-fit:contain; left:-50%; top:-50%; }
.star-flyer.train { width:60px; height:27px; }
.star-flyer.train img { width:100%; height:100%; left:0; top:0; }
@keyframes hero-character-launch { 0%{opacity:0;transform:translate(-50%,0) scale(.25)} 12%{opacity:1} 52%{opacity:1;transform:translate(calc(-50% + var(--launch-x) * .7),calc(var(--launch-y) * .7)) rotate(var(--spin)) scale(1)} 100%{opacity:0;transform:translate(calc(-50% + var(--launch-x)),var(--launch-y)) rotate(calc(var(--spin) * 1.3)) scale(.65)} }
.star-parade { height:64px; display:flex; align-items:center; justify-content:center; gap:15px; margin:-8px 0 4px; overflow:hidden; position:relative; }
.star-parade::after { content:''; position:absolute; left:12%; right:12%; bottom:6px; height:4px; border-radius:50%; background:#e8cf8177; box-shadow:0 3px 0 #041f3640; }
.parade-train { width:175px; height:64px; object-fit:contain; z-index:1; }
.parading .parade-train { animation:hero-train 6s ease-in-out both; }
@keyframes hero-train { 0%{transform:translateX(260px)} 28%,66%{transform:translateX(0)} 100%{transform:translateX(-290px)} }
.hero-controls { display:flex; gap:10px; justify-content:center; padding:0 18px 14px; }
dialog .hero-controls .plain { color:#fff4cc; border-color:#bfd2b477; background:#123a48; font:700 14px/1.2 'Trebuchet MS',sans-serif; width:auto; min-height:44px; padding:9px 14px; margin:0; }
.star-still-sparkles { color:#ffe398; font-size:34px; letter-spacing:22px; display:flex; justify-content:space-around; align-items:center; height:100%; }
.star-still-sparkles span { align-self:start; }
@media(max-width:400px){.star-flyer{width:29px;height:34px}.star-flyer.train{width:48px;height:22px}.hero-firework i{--reach:45px;width:4px;height:18px}.star-parade{gap:6px;height:54px}.parade-train{width:140px;height:54px}dialog .hero-controls .plain{font-size:12px;padding:8px 10px}.hero-controls{gap:8px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.hero-firework,.star-flyer{display:none}.parading .parade-train{animation:none}}

/* Dimensional Christmas light workshop; shape and text accompany every color. */
body:has(dialog[open] .light-game) { overflow:hidden; }
dialog:has(.light-game) { max-width:none; width:min(680px,calc(100% - 24px)); padding:0; border:3px solid #dbc18a; border-radius:30px; background:#fff6e4; color:#214a45; }
dialog:has(.light-game) .close { z-index:3; top:8px; right:8px; border-radius:50%; background:#092f40e8; color:#fff9e7; border:1px solid #e1cc99; }
.light-workshop-header { padding:24px 58px 22px; text-align:center; color:#fff7dc; background:linear-gradient(#082e42b8,#0d3f49e8),url('../img/christmas-clock/snowman-clearing.webp') center 43%/cover; border-bottom:3px solid #dbc18a; }
.light-game .light-workshop-header .eyebrow { display:block; color:#ffe1a2; margin:0; font-size:10px; letter-spacing:.16em; }
.light-game .light-workshop-header h2 { font:700 clamp(26px,4.5vw,37px)/1.08 'Clock Fredoka','Trebuchet MS',sans-serif; letter-spacing:0; margin:8px 0; color:#fff6d9; text-shadow:0 3px 0 #123345; }
.light-game .light-workshop-header p { margin:0; color:#e5f3e8; font-size:15px; line-height:1.3; }
.light-workshop-body { padding:16px 24px 20px; background:radial-gradient(ellipse at 50% 20%,#fffdf5,#f7e9ce); }
.light-game .light-journey { display:flex; justify-content:space-between; gap:10px; padding:0 0 14px; font:700 14px/1.2 'Trebuchet MS',sans-serif; }
.light-game .light-journey>div { display:flex; gap:6px; }
.light-game .light-journey>div span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e5ddca; border:1px solid #b0a78e; color:#4d6256; }
.light-game .light-journey>div .current { background:linear-gradient(#ffe9a3,#edb94a); border-color:#ba8430; color:#5e421a; box-shadow:inset 0 2px 0 #fff9dc,0 2px 3px #59412426; }
.light-game .light-journey>div .done { background:#23634e; color:#fff; border-color:#23634e; }
.light-game .light-journey>.light-step { font-size:13px; width:auto; border:0; color:#506457; }
.light-matching-stage { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:168px; border-radius:24px; border:1px solid #d7c29b; background:radial-gradient(ellipse at 70% 30%,#fffef7,#f0dbac); box-shadow:inset 0 2px 0 #fffdf4,0 4px 10px #6f533019; overflow:hidden; }
.light-game .light-welcome { align-self:stretch; display:flex; flex-direction:row; align-items:center; gap:0; border:0; margin:0; padding:8px 0 0 12px; background:none; }
.light-guide-portrait { display:block; width:100px; height:155px; flex:none; overflow:hidden; }
.light-game .light-guide-portrait img { transform:scale(2.1); transform-origin:50% 60%; }
.light-game .light-welcome img { width:100px; height:155px; object-fit:contain; filter:drop-shadow(0 7px 4px #74572d26); }
.light-game .light-welcome p { font:700 18px/1.25 'Clock Fredoka','Trebuchet MS',sans-serif; margin:0; max-width:126px; padding:0 6px; }
.light-game .light-match-cue { width:100%; max-width:none; border:0; border-left:1px solid #bf9c6355; border-radius:0; background:transparent; padding:10px 8px; margin:0; }
.light-game .light-match-cue strong { font:700 16px/1.2 'Trebuchet MS',sans-serif; color:#4e6556; }
.light-game .light-match-cue .festive-light { width:100px; height:106px; margin:0; filter:drop-shadow(0 0 13px #ffe4a280); }
.light-game .light-match-cue span { font:700 18px/1.2 'Clock Fredoka','Trebuchet MS',sans-serif; color:#264d44; }
.light-game .light-tap-instruction { font:700 18px/1.25 'Clock Fredoka','Trebuchet MS',sans-serif; margin:15px 0 10px; color:#345748; }
.light-game .light-choices { gap:12px; }
.light-game .light-key { position:relative; min-height:136px; padding:4px 8px 12px; border:2px solid #b5c3ab; border-radius:22px; color:#204d43; background:linear-gradient(155deg,#fffef4,#e4eddf); box-shadow:inset 0 2px 0 #fff,0 5px 0 #96aa94,0 8px 12px #304a3820; font:700 18px/1.1 'Clock Fredoka','Trebuchet MS',sans-serif; transition:transform .15s ease,box-shadow .15s ease; }
.light-game .light-key .festive-light { width:94px; height:100px; margin:0 auto 2px; }
.light-game .light-key .light-selected { position:absolute; top:7px; right:7px; font:700 15px/24px Arial,sans-serif; width:24px; height:24px; border-radius:50%; }
.light-game .light-key.is-lit { border-color:#287456; background:linear-gradient(#f7ffea,#cae8bd); box-shadow:inset 0 2px 0 #fff,0 5px 0 #397953,0 8px 12px #304a3820; }
.light-game .light-key.is-lit .light-selected { color:#fff; background:#206345; }
.light-game .light-key:active { transform:translateY(4px); box-shadow:inset 0 2px 0 #fff,0 1px 0 #96aa94; }
.light-game button:focus-visible,.light-game summary:focus-visible { outline:3px solid #165668; outline-offset:4px; }
@media(hover:hover){.light-game .light-key:hover{transform:translateY(-2px);background:linear-gradient(#fff,#eef7e8);}}
.light-game .light-feedback { min-height:42px; display:grid; place-items:center; margin:12px 0 0; color:#355b4b; font-size:16px; line-height:1.3; }
.light-game .light-extra { border-top:1px solid #c4b899; margin-top:4px; }
.light-game .light-extra summary { font:700 14px/1.4 'Trebuchet MS',sans-serif; min-height:44px; padding:12px 2px; }
.light-game .light-extra p { font-size:14px; }
.light-game .light-pattern { gap:6px; padding:0; list-style:none; }
.light-game .light-pattern li { font-size:12px; }
.light-game .light-pattern .festive-light { width:46px; height:50px; }
.light-workshop-footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.light-game .light-workshop-footer .plain { min-height:46px; margin:0; padding:10px 8px; font:700 16px/1.15 'Trebuchet MS',sans-serif; background:#fff9ec; border:1px solid #b4ac8e; box-shadow:0 2px 0 #cabe9d; }
.reindeer-narrator { display:block; margin-bottom:8px; font:700 13px/1.2 'Trebuchet MS',sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#6b603e; }
@media(max-width:580px){
 .light-workshop-header{padding:23px 46px 16px}
 .light-game .light-workshop-header h2{font-size:28px}
 .light-game .light-workshop-header p{font-size:13px}
 .light-workshop-body{padding:12px 14px 16px}
 .light-game .light-journey{font-size:12px;gap:6px;padding-bottom:10px}
 .light-game .light-journey>.light-step{font-size:11px}
 .light-game .light-journey>div{gap:4px}
 .light-game .light-journey>div span{width:24px;height:24px}
 .light-matching-stage{min-height:145px;grid-template-columns:1fr 1fr}
 .light-game .light-welcome{padding:6px 0 0 2px;flex-direction:column;justify-content:end;position:relative}
 .light-guide-portrait{width:72px;height:95px}
 .light-game .light-welcome img{width:72px;height:95px}
 .light-game .light-welcome p{font-size:14px;max-width:145px;text-align:center;padding:0 6px 8px}
 .light-game .light-match-cue{padding:8px 4px}
 .light-game .light-match-cue .festive-light{width:82px;height:88px}
 .light-game .light-match-cue strong{font-size:14px}
 .light-game .light-match-cue span{font-size:16px}
 .light-game .light-tap-instruction{font-size:16px;margin:12px 0 8px}
 .light-game .light-choices{gap:8px}
 .light-game .light-key{min-height:112px;padding:2px 2px 10px;border-radius:17px;font-size:14px}
 .light-game .light-key .festive-light{width:72px;max-width:100%;height:80px}
 .light-game .light-key .light-selected{top:4px;right:4px;width:19px;height:19px;font-size:12px;line-height:19px}
 .light-game .light-feedback{font-size:14px;min-height:40px}
 .light-game .light-workshop-footer .plain{font-size:14px}
}
@media(max-width:350px){
 .light-game .light-workshop-header h2{font-size:25px}
 .light-workshop-header{padding-inline:34px}
 .light-workshop-body{padding-inline:10px}
 .light-game .light-journey>div span{width:22px;height:22px}
 .light-game .light-key{font-size:13px}
 .light-game .light-key .festive-light{width:65px;height:76px}
}
@media(prefers-reduced-motion:reduce){.light-game .light-key{transition:none}.light-game .light-key:hover,.light-game .light-key:active{transform:none}}

/* Quiet audio controls with full-size touch areas. */
.hero-audio-controls { display:flex; align-items:center; gap:3px; }
.hero-mute { display:grid; place-items:center; width:44px; height:44px; min-width:44px; padding:10px; border:0; background:transparent; color:#e4e9d3; border-radius:50%; }
.hero-mute:hover { background:#ffffff12; }
.hero-mute svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero-speaker-slash,.hero-mute.is-muted .hero-speaker-wave { display:none; }
.hero-mute.is-muted .hero-speaker-slash { display:block; }
.hero-volume { appearance:none; -webkit-appearance:none; width:84px; height:44px; margin:0; background:transparent; cursor:pointer; border-radius:12px; accent-color:#b9cdb4; }
.hero-volume::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:#abc3b76b; }
.hero-volume::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#e3e8cc; margin-top:-4.5px; box-shadow:0 1px 3px #0005; }
.hero-volume::-moz-range-track { height:3px; border-radius:3px; background:#abc3b76b; }
.hero-volume::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:#e3e8cc; }
.hero-volume:focus-visible { outline:2px solid #fff0b5; outline-offset:2px; }
@media(max-width:350px){.hero-volume{width:64px}}

/* Santa shares the snowy hero layout, with the greeting below the portrait. */
.friend-audio-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; }
dialog .friend-audio-controls .hero-mute { color:#214c3d; background:#fff7df; border:2px solid #54705a; box-shadow:0 2px 0 #ad915a44; }
dialog .friend-audio-controls .hero-mute:hover { background:#f1dfb6; }
.friend-audio-controls .hero-volume { width:80px; accent-color:#28533f; }
.friend-audio-controls .hero-volume::-webkit-slider-runnable-track { background:#809478; }
.friend-audio-controls .hero-volume::-moz-range-track { background:#809478; }
.friend-audio-controls .hero-volume::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5.5px; background:#28533f; box-shadow:0 0 0 2px #fff7df; }
.friend-audio-controls .hero-volume::-moz-range-thumb { width:14px; height:14px; background:#28533f; box-shadow:0 0 0 2px #fff7df; }
.friend-audio-controls :focus-visible { outline:3px solid #28533f; outline-offset:3px; }
.santa-visit .snowy-glow { background:radial-gradient(ellipse at 50% 74%,#ffd98755,transparent 52%); }

/* Santa's workshop is distinct from the snowman's outdoor clearing. */
.santa-visit .snowy-scene { background-image:url('../img/christmas-clock/santa-workshop.webp'); background-color:#33271b; }
.santa-visit .snowy-flurries { display:none; }
.santa-visit .snowy-heading { text-shadow:0 3px 5px #211407; }
dialog .santa-visit .snowy-heading h2 { text-shadow:0 3px 0 #332818,0 0 22px #ffce7c44; }
.santa-visit .snowy-scene::after { background:#33200e66; }