/* Santa's Toy Factory (/santa-toy-factory-game). Desktop and iPad landscape: Pip the elf, the workbench and the parts
   bins side by side above the belt. Phones and iPad portrait: one column, the parts below the workbench, everything
   centred. Movement is transform and opacity only, pauses off screen and stops for reduced motion. */
@font-face{font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/05bc7ace4c5c942d.woff') format('woff')}
.tf-page{--gold:#f5b731;--gold-soft:#ffda77;--red:#d6202a;--navy:#0b1120;--card:#111a2d;--line:#26314d;--muted:#c3cad8;--cream:#fff6e6;--ink:#4a2c1d}

/* Toy art (apps/booking/toyfactory/toys.js) */
.tf-svg{display:block;width:100%;height:100%;overflow:visible}
.tf-svg .o{stroke:#4a2c1d;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.tf-svg .p{fill:var(--paint,#c98a4b)}
.tf-svg .ps{stroke:var(--paint,#c98a4b)}
.tf-svg .sh{fill:#2b1408;fill-opacity:.16}
.tf-svg .hl{fill:#fff;fill-opacity:.5}
.tf-svg .lt{fill:#fff;fill-opacity:.36}
.tf-svg .dk{fill:#3b2417}
.tf-svg .wh{fill:#fff}
.tf-svg .ck{fill:#ff6f8e;fill-opacity:.55}
.tf-svg .mt{fill:#c9d1dc}
.tf-svg .rb{fill:#3a3d48}
.tf-svg .ln{fill:none;stroke:#3b2417;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
/* The dotted outline of each part on the workbench, glowing gold where the chosen part can go. */
.tf-ghost :is(path,circle,ellipse,rect,line,polygon):not(.base):not(.bline){display:none}
.tf-ghost .base{fill:#fff;fill-opacity:.13;stroke:#fff;stroke-opacity:.7;stroke-width:4;stroke-dasharray:10 8}
.tf-ghost .bline{fill:none;stroke:#fff;stroke-opacity:.35;stroke-dasharray:14 10}
.tf-slot.is-target .tf-ghost .base{fill:#ffd34d;fill-opacity:.32;stroke:#ffe27a;stroke-opacity:1}
.tf-slot.is-target .tf-ghost .bline{stroke:#ffe27a;stroke-opacity:.75}
.tf-slot.is-target .tf-ghost{animation:tf-glow 1.1s ease-in-out infinite}
.tf-slot.is-near .tf-ghost{transform:scale(1.08)}
.tf-slot.is-near .tf-ghost .base{fill-opacity:.6}
.tf-slot.is-hint .tf-ghost{animation:tf-hint .55s ease-in-out infinite}
@keyframes tf-glow{50%{opacity:.55}}
@keyframes tf-hint{50%{transform:scale(1.12)}}
.tf-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Page */
.tf-hero{max-width:1280px;margin:0 auto;padding:22px 20px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.tf-eyebrow{margin:0;font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.tf-title{margin:0;font-family:'Titan One','Nunito Sans',sans-serif;font-weight:400;font-size:clamp(36px,5.6vw,64px);line-height:1.04;color:#fff;text-shadow:0 4px 0 #8c0e15,0 10px 24px rgba(0,0,0,.35)}
.tf-title span{color:var(--gold-soft)}
.tf-lead{margin:0;max-width:640px;font-size:18px;line-height:1.55;color:var(--muted)}
.tf-game{max-width:1280px;margin:0 auto;padding:0 20px 22px}
.tf-kid-title{margin:0;font-family:'Titan One','Nunito Sans',sans-serif;font-weight:400;font-size:clamp(26px,3.4vw,36px);line-height:1.1;color:var(--gold-soft)}
.tf-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The stage: a warm wooden workshop wall */
.tf-stage{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr) minmax(290px,370px);grid-template-rows:auto minmax(0,1fr) 140px;grid-template-areas:"bar bar bar" "helper bench tray" "belt belt belt";height:clamp(600px,84vh,740px);border-radius:28px;overflow:hidden;border:3px solid #2a3554;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 8px var(--card);background:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 3px,transparent 3px 110px),linear-gradient(180deg,#93502f 0%,#74391f 100%);color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.tf-stage:not(.is-live){display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.tf-stage:not(.is-live) p{margin:0;font-size:18px;font-weight:700;color:#ffe9b5}
.tf-lights{position:absolute;left:0;right:0;top:0;height:30px;display:flex;justify-content:space-around;padding:0 14px;border-top:4px solid #1f3d2a;pointer-events:none;z-index:1}
.tf-lights i{position:relative;width:11px;height:16px;margin-top:5px;border-radius:50% 50% 46% 46%;background:var(--c);box-shadow:0 0 12px 2px var(--c);animation:tf-twinkle 2.4s ease-in-out infinite}
.tf-lights i::before{content:"";position:absolute;left:2px;top:-5px;width:7px;height:6px;border-radius:2px;background:#1f3d2a}
.tf-lights i:nth-child(4n+1){--c:#ff5a5f}.tf-lights i:nth-child(4n+2){--c:#ffd34d;animation-delay:.6s}.tf-lights i:nth-child(4n+3){--c:#5fe08a;animation-delay:1.2s}.tf-lights i:nth-child(4n){--c:#6cc4ff;animation-delay:1.8s}
@keyframes tf-twinkle{50%{opacity:.45}}

/* The bar */
.tf-bar{grid-area:bar;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:28px 18px 6px}
.tf-steps{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.tf-steps li{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;background:rgba(0,0,0,.28);color:#f3d9b1;font-weight:800;font-size:14px}
.tf-steps li[aria-current]{background:var(--gold);color:#3b2417;box-shadow:0 3px 0 #a76a00}
.tf-bar-end{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
.tf-made{margin:0;display:flex;align-items:center;gap:6px;height:44px;padding:0 16px 0 12px;border-radius:999px;background:rgba(0,0,0,.3);font-weight:800;font-size:14px;color:#ffe9b5}
.tf-made>span:first-child{font-size:20px}
.tf-made strong{font-weight:900;font-size:21px;line-height:1;color:#fff}
.tf-chip{height:44px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;border:0;font:inherit;font-size:14px;font-weight:800;color:var(--ink);background:var(--cream);box-shadow:0 3px 0 #c8a77a;cursor:pointer}
.tf-chip[aria-pressed=true]{background:var(--red);color:#fff;box-shadow:0 3px 0 #8c0e15}
.tf-chip:disabled{opacity:.5;cursor:not-allowed}
.tf-round{width:44px;height:44px;border-radius:50%;border:0;background:var(--cream);box-shadow:0 3px 0 #c8a77a;font-size:20px;line-height:1;cursor:pointer}
.tf-stage :is(button,[tabindex]):focus-visible{outline:4px solid #fff;outline-offset:3px}
.tf-timer{position:relative;flex:1 1 220px;max-width:420px;height:30px;border-radius:999px;overflow:hidden;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 3px #fff6e6}
.tf-timer-fill{position:absolute;inset:3px;border-radius:999px;transform-origin:left center;background:repeating-linear-gradient(45deg,#e53935 0 12px,#fff 12px 24px)}
.tf-timer-text{position:relative;display:flex;align-items:center;justify-content:center;height:100%;font-family:'Titan One','Nunito Sans',sans-serif;font-size:18px;color:#fff;text-shadow:0 2px 0 #4a2c1d,0 0 6px #4a2c1d}
.tf-timer.is-ending{animation:tf-hint .5s ease-in-out infinite}
.tf-stage.is-rush .tf-steps{display:none}

/* Pip the elf */
.tf-helper{grid-area:helper;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;min-height:0;padding:4px 0 8px 14px}
.tf-window{width:min(124px,100%);margin-bottom:auto}
.tf-window svg{display:block;width:100%;height:auto}
.tf-aurora{animation:tf-aurora 6s ease-in-out infinite}.tf-aurora-2{animation-delay:-3s}
@keyframes tf-aurora{50%{opacity:.4}}
.tf-say{position:relative;margin:0;width:100%;padding:14px 14px;border-radius:20px;background:#fff;color:#2b1a10;font-family:'Titan One','Nunito Sans',sans-serif;font-weight:400;font-size:20px;line-height:1.2;letter-spacing:.01em;text-align:center;box-shadow:0 0 0 4px #ffe27a,0 10px 22px rgba(0,0,0,.3)}
.tf-say:empty{visibility:hidden}
.tf-say::after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-10px;border:10px solid transparent;border-bottom:0;border-top-color:#fff}
.tf-elf{width:118px;flex:0 0 auto;aspect-ratio:160/220;transform-origin:50% 100%;animation:tf-bob 2.8s ease-in-out infinite}
.tf-elf svg{display:block;width:100%;height:100%}
.tf-elf-eyes{transform-box:fill-box;transform-origin:center;animation:tf-blink 4.6s infinite}
.tf-elf-arm{transform-box:fill-box;transform-origin:0 100%;animation:tf-wave 3.4s ease-in-out infinite}
.tf-elf.is-cheer{animation:tf-cheer .9s ease}
.tf-elf.is-cheer .tf-elf-arm{animation:tf-wave .3s ease-in-out 3}
@keyframes tf-bob{50%{transform:translateY(-6px)}}
@keyframes tf-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes tf-wave{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-14deg)}80%{transform:rotate(8deg)}90%{transform:rotate(-10deg)}}
@keyframes tf-cheer{30%{transform:translateY(-24px) rotate(-5deg)}60%{transform:none}78%{transform:translateY(-9px)}}

/* The workbench */
.tf-bench{grid-area:bench;position:relative;min-width:0;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.tf-mat{position:relative;width:calc(min(100cqw,100cqh) - 20px);height:calc(min(100cqw,100cqh) - 20px);border-radius:26px;background:radial-gradient(circle at 50% 38%,#3d9c66 0%,#2b7a4b 70%,#25693f 100%);box-shadow:inset 0 0 0 7px #23633d,0 10px 0 #4f2615,0 22px 30px rgba(0,0,0,.35)}
.tf-mat::after{content:"";position:absolute;inset:14px;border:3px dashed rgba(255,255,255,.28);border-radius:18px;pointer-events:none}
.tf-toy{position:absolute;inset:5%;z-index:1}
.tf-slot,.tf-part{position:absolute;margin:0;padding:0;border:0;background:none;transform-origin:50% 50%}
.tf-slot{pointer-events:none;border-radius:18px;color:inherit;font:inherit}
.tf-slot.is-filled .tf-ghost{display:none}
.tf-part{pointer-events:none}
.tf-part svg :is(path,circle,ellipse,rect){pointer-events:visiblePainted}
.tf-stage[data-step=paint] .tf-part{cursor:pointer}
.tf-part>svg,.tf-slot>svg{transform-origin:50% 50%}
.tf-toy.is-wrapped .tf-part,.tf-toy.is-wrapped .tf-slot{opacity:0;transition:opacity .3s ease .2s}
.tf-toy.is-done{animation:tf-hop .7s ease}
@keyframes tf-hop{30%{transform:translateY(-16px) scale(1.03)}60%{transform:none}80%{transform:translateY(-6px)}}
.tf-gift{position:absolute;z-index:60;pointer-events:none}
.tf-gift>svg,.tf-rider>svg{display:block;width:100%;height:100%}
.tf-bow{position:absolute;left:25%;top:3%;width:50%;aspect-ratio:120/76;transform-origin:50% 80%}
.tf-bow svg{display:block;width:100%;height:100%}
.tf-burst{position:absolute;z-index:70;width:0;height:0;pointer-events:none}
.tf-burst i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:tf-spark .7s ease-out forwards}
@keyframes tf-spark{0%{transform:translate(0,0) scale(.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}}

/* Parts bins, paint pots, paper and bows */
.tf-tray{grid-area:tray;position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;padding:6px 18px 14px 6px;overscroll-behavior:contain}
.tf-tray-title{margin:0;font-family:'Titan One','Nunito Sans',sans-serif;font-weight:400;font-size:28px;line-height:1.1;color:#ffe27a;text-shadow:0 3px 0 #4a2c1d}
.tf-tray-tip,.tf-tray-text{margin:0;font-family:'Titan One','Nunito Sans',sans-serif;font-weight:400;font-size:17px;line-height:1.3;color:#fff6e6;text-shadow:0 2px 0 rgba(74,44,29,.6)}
.tf-tray-text{font-size:22px;text-align:center}
.tf-tray-big{margin:auto 0 0;font-family:'Titan One','Nunito Sans',sans-serif;font-size:26px;text-align:center;color:#ffe27a;text-shadow:0 3px 0 #4a2c1d}
.tf-tray-star{width:72px;height:72px;margin:0 auto auto;animation:tf-bob 1.2s ease-in-out infinite}
.tf-tray-star svg{width:100%;height:100%}
.tf-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-bin{position:relative;aspect-ratio:1;padding:13% 13% 20%;border:0;border-radius:18px;background:linear-gradient(180deg,#fffaf0 0%,#f6e3c4 74%,var(--bin,#e53935) 74%);box-shadow:inset 0 0 0 3px rgba(74,44,29,.18),0 4px 0 rgba(0,0,0,.28);cursor:grab;touch-action:none;transition:transform .15s ease}
.tf-bin:nth-child(3n+2){--bin:#2e9d4f}.tf-bin:nth-child(3n){--bin:#3fa7f5}
.tf-bin svg{width:100%;height:100%;pointer-events:none}
.tf-bin:hover:not(:disabled){transform:translateY(-3px)}
.tf-bin.is-picked{transform:translateY(-4px) scale(1.04);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--gold),0 8px 0 rgba(0,0,0,.25)}
.tf-bin.is-out svg,.tf-bin.is-used svg{visibility:hidden}
.tf-bin.is-used{background:rgba(0,0,0,.2);box-shadow:inset 0 3px 8px rgba(0,0,0,.3);cursor:default}
.tf-bin.is-used::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:rgba(255,233,181,.55)}
.tf-pots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tf-pot{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--cream);box-shadow:0 4px 0 #c8a77a;cursor:pointer;transition:transform .15s ease}
.tf-pot-paint{width:72%;height:72%;border-radius:50%;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),inset 0 4px 0 rgba(255,255,255,.35)}
.tf-pot.is-rainbow .tf-pot-paint{background:conic-gradient(#e53935,#ff8a2b,#ffc12e,#2e9d4f,#3fa7f5,#8e5bd8,#e53935)}
.tf-pot[aria-pressed=true]{transform:translateY(-3px);box-shadow:0 0 0 4px #fff,0 0 0 8px var(--gold)}
.tf-label{margin:4px 0 0;font-family:'Titan One','Nunito Sans',sans-serif;font-size:18px;color:#fff6e6}
.tf-papers,.tf-bows{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tf-swatch{aspect-ratio:1;padding:8%;border:0;border-radius:14px;background:var(--cream);box-shadow:0 3px 0 #c8a77a;cursor:pointer}
.tf-swatch svg{display:block;width:100%;height:100%}
.tf-swatch[aria-pressed=true]{box-shadow:0 0 0 4px #fff,0 0 0 8px var(--gold)}
.tf-go{align-self:center;min-height:56px;margin-top:4px;padding:0 30px;border:0;border-radius:999px;font-family:'Titan One','Nunito Sans',sans-serif;font-size:22px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);background:linear-gradient(180deg,#4ee495,#1f9d5a);box-shadow:0 5px 0 #11613a,0 12px 22px rgba(0,0,0,.3);cursor:pointer}
.tf-go:active{transform:translateY(3px);box-shadow:0 2px 0 #11613a}
.tf-go:disabled{filter:grayscale(.8);opacity:.55;cursor:not-allowed}
.tf-text-button{align-self:center;min-height:44px;padding:0 12px;border:0;background:none;color:#ffe9b5;font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}
.tf-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tf-pick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:0;border-radius:16px;background:var(--cream);color:var(--ink);font:inherit;font-size:12px;font-weight:800;line-height:1.15;cursor:pointer}
.tf-pick svg{width:100%;height:auto;aspect-ratio:1}
.tf-pick[aria-current=true]{box-shadow:0 0 0 3px var(--gold)}

/* The belt and Santa's sleigh */
.tf-belt{grid-area:belt;position:relative;z-index:1;overflow:hidden;background:linear-gradient(180deg,transparent 0 40%,#4f2615 40%,#3d1d10 100%)}
.tf-belt-track{position:absolute;left:0;right:0;bottom:30px;height:42px;overflow:hidden;background:#3a3f4b;box-shadow:0 6px 0 #23262e}
.tf-belt-track::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:8px;background:repeating-linear-gradient(-45deg,#e53935 0 10px,#fff 10px 20px)}
.tf-belt-surface{position:absolute;left:-40px;right:0;top:8px;bottom:0;background:repeating-linear-gradient(90deg,#4a505e 0 20px,#3a3f4b 20px 40px)}
.tf-belt.is-running .tf-belt-surface{animation:tf-belt .45s linear infinite}
@keyframes tf-belt{to{transform:translateX(40px)}}
.tf-rollers{position:absolute;left:0;right:0;bottom:4px;height:24px;display:flex;justify-content:space-around}
.tf-rollers i{position:relative;width:24px;height:24px;border-radius:50%;border:3px solid #23262e;background:radial-gradient(circle,#dfe5ee 0 28%,#8a94a6 30% 62%,#5b6475 64%)}
.tf-rollers i::after{content:"";position:absolute;left:50%;top:1px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#23262e}
.tf-belt.is-running .tf-rollers i{animation:tf-spin .6s linear infinite}
@keyframes tf-spin{to{transform:rotate(360deg)}}
.tf-order{position:absolute;left:18px;bottom:64px;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:14px;background:var(--cream);color:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.25)}
.tf-order::before{content:"";position:absolute;left:50%;top:-7px;width:34px;height:12px;margin-left:-17px;border-radius:4px;background:#b5783f;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.tf-order-pic{width:62px;height:62px;flex:0 0 auto}
.tf-order-text{display:flex;flex-direction:column;font-family:'Titan One','Nunito Sans',sans-serif;font-size:18px;line-height:1.1;white-space:nowrap}
.tf-order-text small{font-family:'Nunito Sans',system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;color:#c0392b}
.tf-sleigh{position:absolute;right:14px;bottom:4px;z-index:2;width:176px;aspect-ratio:220/150}
.tf-sleigh svg{display:block;width:100%;height:100%}
.tf-sack{transform-box:fill-box;transform-origin:50% 100%}
.tf-sleigh.is-catch .tf-sack{animation:tf-catch .5s ease}
@keyframes tf-catch{40%{transform:scale(1.14,.88)}70%{transform:scale(.96,1.06)}}

/* Things in flight: a dragged part, a present on its way, confetti and the Rush hour result */
.tf-fly{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}
.tf-flying,.tf-rider{position:absolute;left:0;top:0;will-change:transform}
.tf-flying{filter:drop-shadow(0 12px 10px rgba(0,0,0,.35))}
.tf-rider{transform-origin:0 0}
.tf-hand{position:absolute;left:0;top:0;z-index:75;font-size:44px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.tf-confetti{position:absolute;inset:0;z-index:70;overflow:hidden;pointer-events:none}
.tf-confetti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:2px;animation:tf-confetti 1.9s ease-in forwards}
@keyframes tf-confetti{to{transform:translate(var(--x),780px) rotate(560deg);opacity:.25}}
.tf-pop{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(11,17,32,.62)}
.tf-pop-card{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px;padding:26px 24px;border-radius:26px;background:var(--cream);color:var(--ink);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.tf-pop-card p{margin:0;font-family:'Titan One','Nunito Sans',sans-serif;font-size:24px;line-height:1.25}
.tf-pop-card .tf-pop-small{font-size:19px;color:#c0392b}
.tf-pop-title{margin:0;font-family:'Titan One','Nunito Sans',sans-serif;font-weight:400;font-size:34px;line-height:1.1;color:#2e9d4f}
.tf-pop-star{width:64px;height:64px}
.tf-pop-star svg{width:100%;height:100%}
.tf-pop-actions{display:flex;flex-direction:column;align-items:center;gap:4px}
.tf-pop .tf-text-button{color:var(--ink)}

/* The toy shelf */
.tf-shelf{max-width:1280px;margin:0 auto;padding:4px 20px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.tf-shelf-stats{margin:0 0 6px;font-family:'Titan One','Nunito Sans',sans-serif;font-size:19px;color:#ffe9b5}
.tf-shelf-list{display:flex;flex-wrap:wrap;justify-content:center;row-gap:12px;max-width:100%;margin:0;padding:0;list-style:none}
.tf-shelf-toy{width:92px;height:96px;padding:6px 8px 16px;background:linear-gradient(180deg,transparent 0 82%,#a35b35 82% 90%,#74391f 90%)}
.tf-shelf-toy svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}

/* Toys you can build: big picture cards; tapping one starts that toy. (How to play uses the kids' zone cards.) */
.tf-how{max-width:1180px;margin:0 auto;padding:22px 20px 34px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.tf-toys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;margin:0;padding:0;list-style:none;font-family:'Titan One','Nunito Sans',sans-serif;font-size:20px}
.tf-toy-card{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:14px 10px 16px;border:0;border-radius:24px;background:linear-gradient(180deg,#fffaf0,#f6e3c4);color:#4a2c1d;font:inherit;cursor:pointer;box-shadow:inset 0 0 0 4px #fff,0 6px 0 #c8a77a,0 14px 26px rgba(0,0,0,.3);transition:transform .15s ease}
.tf-toy-card:hover{transform:translateY(-4px) rotate(-1deg)}
.tf-toy-card:focus-visible{outline:4px solid var(--gold);outline-offset:4px}
.tf-toy-pic{width:min(150px,100%);aspect-ratio:1}
.tf-toy-name{font-size:20px;line-height:1.1}

/* Grown-ups' section and questions */
.tf-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tf-guide article{position:relative;padding:22px 20px 20px;border-radius:22px;background:#111a2d;border:1px solid #22304b;border-top:6px solid var(--top,#f5b731);box-shadow:0 12px 26px rgba(0,0,0,.25)}
.tf-guide-red{--top:#e53935}.tf-guide-green{--top:#2e9d4f}.tf-guide-blue{--top:#3fa7f5}.tf-guide-gold{--top:#ffc12e}
.tf-guide-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:10px;border-radius:50%;font-size:28px;background:#fff6e6}
.tf-guide h3{margin:0 0 8px;font-size:19px;color:#fff}
.tf-guide p{margin:0;font-size:16px;line-height:1.65;color:#c3cad8}
.tf-faq{display:flex;flex-direction:column;gap:10px}

/* Phones and iPad portrait: one column. Pip, the workbench and the parts come first so they share the screen; the
   buttons and the belt follow. */
@media (max-width:1023px){
 .tf-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto 112px;grid-template-areas:"helper" "bench" "tray" "bar" "belt";height:auto}
 .tf-bar{justify-content:center;padding:2px 12px 14px}
 .tf-bar-end{justify-content:center;margin:0}
 .tf-helper{flex-direction:row;justify-content:center;gap:12px;padding:38px 14px 4px}
 .tf-window{display:none}
 .tf-elf{width:62px}
 .tf-say{width:auto;flex:0 1 560px;min-height:0;padding:10px 16px;font-size:19px}
 .tf-elf{order:-1}
 .tf-toys{grid-template-columns:repeat(4,minmax(0,1fr))}
 .tf-say::after{left:-9px;top:50%;bottom:auto;margin:-9px 0 0;border:9px solid transparent;border-left:0;border-right-color:#fff}
 .tf-bench{height:max(290px,min(calc(100vw - 40px),calc(100svh - 330px),640px))}
 .tf-belt{background:linear-gradient(180deg,transparent 0 30%,#4f2615 30%,#3d1d10 100%)}
 .tf-belt-track{bottom:24px;height:36px}
 .tf-rollers{height:20px}.tf-rollers i{width:20px;height:20px}
 .tf-order{bottom:46px;left:12px;padding:4px 12px 4px 4px}
 .tf-order-pic{width:44px;height:44px}
 .tf-order-text{font-size:15px}
 .tf-sleigh{width:118px;right:8px}
 .tf-tray{overflow:visible;align-items:center;padding:14px 14px 18px;text-align:center}
 .tf-bins{width:100%;max-width:640px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
 .tf-pots,.tf-papers,.tf-bows,.tf-picker{width:100%;max-width:560px}
}
@media (max-width:760px){
 .tf-hero{padding:16px 16px 12px;gap:6px}
 .tf-lead{font-size:16px}
 .tf-game{padding:0 10px 18px}
 .tf-stage{border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 4px var(--card)}
 .tf-steps{display:none}
 .tf-bar-end{gap:6px}
 .tf-bar{padding:2px 8px 14px}
 .tf-made,.tf-chip{height:42px;gap:4px;padding:0 9px;font-size:13px}
 .tf-made>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .tf-round{width:40px;height:40px;font-size:18px}
 .tf-tray-title{font-size:22px}
 .tf-tray-tip{display:none}
 .tf-bins{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 .tf-bin{border-radius:14px}
 .tf-papers,.tf-bows{gap:6px}
 .tf-toys{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .tf-say{font-size:17px}
 .tf-shelf-toy{width:76px;height:80px}
}
@media (max-width:380px){.tf-chip{padding:0 7px;font-size:12px}.tf-bins{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Still mode: no moving scenery; parts, presents and orders simply appear. */
@media (prefers-reduced-motion:reduce){.tf-lights i,.tf-elf,.tf-elf-eyes,.tf-elf-arm,.tf-aurora,.tf-slot .tf-ghost,.tf-toy.is-done,.tf-tray-star,.tf-timer.is-ending,.tf-belt-surface,.tf-rollers i,.tf-sleigh .tf-sack{animation:none!important}.tf-bin,.tf-pot{transition:none}}
.tf-stage.is-away :is(.tf-lights i,.tf-elf,.tf-elf-eyes,.tf-elf-arm,.tf-aurora,.tf-ghost){animation-play-state:paused}