@font-face{font-family:"Mountains of Christmas";font-weight:700;font-display:swap;src:url(assets/fonts/mountains.woff2) format("woff2")}
[hidden]{display:none!important}
@font-face{font-family:"Fredoka";font-weight:300 700;font-display:swap;src:url(assets/fonts/fredoka.woff2) format("woff2")}
:root{
  --red:#d62839;--red-d:#9e1424;--green:#1f8a4c;--green-d:#13623a;--gold:#ffd166;--cream:#fff8ec;
  --ink:#2b1d14;--snow:#f4f9ff;--night:#0e1b3d;
  --title:"Mountains of Christmas","Comic Sans MS","Chalkboard SE",cursive;
  --body:"Fredoka","Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--body);color:var(--ink);background:var(--night);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
#bg{position:fixed;inset:0;background:linear-gradient(180deg,rgba(10,20,55,.35),rgba(10,20,55,.15) 40%,rgba(10,20,55,.55)),url(assets/bg-village.jpg?v=20261101-pixar) center/cover no-repeat;z-index:-3}
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
button{font-family:inherit;cursor:pointer}
img{user-select:none;-webkit-user-drag:none}

/* header */
.top{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:14px 10px 0;max-width:1100px;margin:0 auto;position:relative;z-index:6}
.hdr-santa-btn{background:none;border:0;padding:0;line-height:0}
.hdr-santa{height:150px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));animation:sway 3.2s ease-in-out infinite;transform-origin:50% 100%}
.hdr-santa-btn.poked .hdr-santa{animation:belly .7s cubic-bezier(.3,1.8,.5,1)}
.hdr-elf{height:130px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45));animation:hop 2.4s ease-in-out infinite;transform-origin:50% 100%}
.hdr-elf.cheer{animation:cheer .45s ease-in-out 4}
.title-wrap{text-align:center;padding-bottom:12px}
h1{font-family:var(--title);font-weight:700;margin:0;font-size:clamp(2.2rem,7vw,4.6rem);line-height:.9;color:#fff;
  text-shadow:0 3px 0 var(--red-d),0 6px 0 #5a0b14,0 10px 18px rgba(0,0,0,.55);letter-spacing:1px}
h1 span{display:block;color:var(--gold);text-shadow:0 3px 0 #b07a12,0 6px 0 #6b4806,0 10px 18px rgba(0,0,0,.55)}
h1 span{animation:wobble 4s ease-in-out infinite}
.tag{margin:.4rem 0 0;color:#fff;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.7)}

/* toolbar & tabs */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px;max-width:1100px;margin:0 auto;position:relative;z-index:6}
.chip,.year-pick{border:2px solid rgba(255,255,255,.8);background:rgba(14,27,61,.65);color:#fff;border-radius:999px;padding:8px 14px;font-size:.95rem;font-weight:600;backdrop-filter:blur(4px);min-height:42px;display:inline-flex;align-items:center;gap:6px;transition:transform .15s}
.chip:hover{transform:translateY(-2px) scale(1.04)}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--green);border-color:#c9ffd9}
.year-pick select{font:inherit;font-weight:700;border-radius:999px;border:0;padding:4px 8px;background:var(--gold);color:var(--ink)}
.tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:4px 10px 0;max-width:1100px;margin:0 auto;position:relative;z-index:6}
.tab{font-family:var(--title);font-weight:700;font-size:1.45rem;border:0;border-radius:18px 18px 0 0;padding:10px 18px 8px;background:rgba(255,248,236,.7);color:var(--red-d);transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.tab:hover{transform:translateY(-4px)}
.tab.active{background:var(--cream);color:var(--red);box-shadow:0 -4px 0 var(--red) inset}

main{max-width:1100px;margin:0 auto;padding:0 10px 30px;position:relative;z-index:5}
.panel{display:none;background:var(--cream);border-radius:22px;padding:18px clamp(12px,3vw,28px) 24px;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.35);
  background-image:radial-gradient(circle at 10% 0,rgba(214,40,57,.08),transparent 40%),radial-gradient(circle at 100% 100%,rgba(31,138,76,.1),transparent 40%)}
.panel.active{display:block;animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.panel-head h2{font-family:var(--title);font-size:clamp(1.8rem,5vw,2.6rem);margin:.1rem 0 .2rem;color:var(--red)}
.panel-head p{margin:0 0 14px;color:#5a4636}

/* buttons */
.btn{border:0;border-radius:16px;padding:12px 20px;font-size:1.05rem;font-weight:700;min-height:48px;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .15s cubic-bezier(.3,1.8,.5,1),box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.big{font-size:1.25rem;padding:14px 26px;min-height:58px}
.btn-red{background:linear-gradient(#ef4255,var(--red-d))}
.btn-green{background:linear-gradient(#2fb367,var(--green-d))}
.btn-ghost{background:#fff;color:var(--red-d);border:2px dashed #e8b3b9;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.btn-sm{padding:6px 12px;min-height:38px;font-size:.92rem;border-radius:12px}
.file-btn{cursor:pointer}
.row-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.add-family{display:flex;gap:10px;flex-wrap:wrap}
.add-family input,.member-add input{flex:1;min-width:180px;font:inherit;font-size:1.1rem;padding:12px 16px;border-radius:14px;border:3px solid #f0d8c2;background:#fff;outline:none}
.add-family input:focus,.member-add input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,209,102,.4)}

/* family cards (themes) */
.family-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin-top:18px}
.fam{--c1:#c8102e;--c2:#fff;--ac:#fff;--tx:#fff;position:relative;border-radius:20px;padding:16px 14px 14px;color:var(--tx);overflow:hidden;
  box-shadow:0 10px 0 rgba(0,0,0,.15),0 14px 26px rgba(0,0,0,.25);border:5px solid var(--ac);animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;background:var(--c1)}
.fam::before{content:"";position:absolute;inset:0;opacity:.95;z-index:0;background:var(--pat)}
.fam>*{position:relative;z-index:1}
.fam .deco{position:absolute;right:8px;top:8px;width:66px;height:66px;object-fit:contain;z-index:1;transform:rotate(10deg);filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.fam:hover .deco{transform:rotate(-8deg) scale(1.08)}
.fam h3{font-family:var(--title);font-size:2rem;margin:0 70px 6px 0;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.fam .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.fam select{font:inherit;font-size:.9rem;border-radius:10px;border:0;padding:6px 8px;background:rgba(255,255,255,.92);color:#2b1d14;font-weight:600}
.fam .mini{border:0;border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.92);color:#2b1d14;font-weight:600;font-size:.9rem;min-height:34px}
.fam .photo{width:100%;height:120px;object-fit:cover;border-radius:12px;border:3px solid var(--ac);margin-bottom:8px;display:block}
.members{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0;list-style:none}
.members li{background:rgba(255,255,255,.95);color:#2b1d14;border-radius:999px;padding:6px 6px 6px 12px;font-weight:600;display:flex;align-items:center;gap:4px;box-shadow:0 3px 0 rgba(0,0,0,.15);animation:pop .35s cubic-bezier(.3,1.8,.5,1) both}
.members li button{border:0;background:#ffe1e4;color:var(--red-d);border-radius:50%;width:26px;height:26px;font-weight:800;line-height:1}
.member-add{display:flex;gap:6px}
.member-add input{min-width:0;padding:9px 12px;font-size:1rem;border-width:2px}
.member-add button{border:0;border-radius:12px;background:var(--gold);color:#2b1d14;font-weight:800;padding:0 14px;font-size:1.3rem}
.empty{text-align:center;padding:24px;color:#7a6250;font-size:1.1rem}
.empty img{height:120px;display:block;margin:0 auto 6px;animation:hop 2s ease-in-out infinite}

/* theme patterns */
.t-candycane{--c1:#c8102e;--ac:#fff;--tx:#fff;--pat:repeating-linear-gradient(45deg,#d7192f 0 22px,#fff 22px 34px,#d7192f 34px 56px,#ffe6e6 56px 60px);}
.t-candycane::before{opacity:.35!important}
.t-gingerbread{--c1:#9a5b2b;--ac:#fff3df;--tx:#fff8ec;--pat:radial-gradient(circle at 20px 20px,#fff3df 3px,transparent 4px) 0 0/40px 40px,repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,243,223,.35) 38px 41px),#9a5b2b}
.t-holly{--c1:#1d6b3b;--ac:#e0323f;--tx:#fff;--pat:radial-gradient(circle at 12px 12px,#e0323f 4px,transparent 5px) 0 0/48px 48px,radial-gradient(circle at 36px 36px,rgba(255,255,255,.18) 6px,transparent 7px) 0 0/48px 48px,#1d6b3b}
.t-snowflake{--c1:#3d7cc9;--ac:#e8f4ff;--tx:#fff;--pat:radial-gradient(circle at 10px 10px,rgba(255,255,255,.9) 2px,transparent 3px) 0 0/34px 34px,radial-gradient(circle at 27px 22px,rgba(255,255,255,.55) 3px,transparent 4px) 0 0/34px 34px,linear-gradient(#5b9be0,#2c5fa8)}
.t-ornament{--c1:#6d1b47;--ac:#ffd166;--tx:#fff;--pat:radial-gradient(circle at 50% 0,rgba(255,209,102,.4),transparent 60%),repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,209,102,.18) 30px 32px),#6d1b47}
.t-plaid{--c1:#b3121f;--ac:#1a1a1a;--tx:#fff;--pat:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0 24px,transparent 24px 48px),repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 24px,transparent 24px 48px),#b3121f}
.t-starlight{--c1:#13224f;--ac:#ffd166;--tx:#fff;--pat:radial-gradient(circle at 14px 18px,#ffd166 1.6px,transparent 2.6px) 0 0/44px 44px,radial-gradient(circle at 34px 6px,#fff 1px,transparent 2px) 0 0/44px 44px,linear-gradient(#1b2f6b,#0b1533)}

/* draw stage */
.draw-stage{display:flex;align-items:flex-end;justify-content:center;gap:clamp(4px,2vw,24px);padding:10px 0 4px;min-height:260px}
.ds-elf,.ds-santa{height:clamp(140px,26vw,240px);filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));animation:hop 2.2s ease-in-out infinite;transform-origin:50% 100%}
.ds-santa{animation:sway 3s ease-in-out infinite}
.sack-btn{border:0;background:none;padding:0;position:relative;z-index:3;line-height:0;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.sack-btn img{height:clamp(170px,30vw,270px);filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));animation:breathe 1.6s ease-in-out infinite}
.sack-btn:hover{transform:scale(1.06) rotate(-3deg)}
.sack-btn:active{transform:scale(.92)}
.sack-btn.shake img{animation:shake .12s linear infinite}
.sack-label{position:absolute;left:50%;bottom:16%;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;font-family:var(--title);font-weight:700;font-size:clamp(1.4rem,4vw,2rem);line-height:1;color:#fff;background:var(--green);padding:8px 16px;border-radius:14px;border:3px solid #fff;box-shadow:0 5px 0 var(--green-d);animation:wobble 2s ease-in-out infinite}
.notice{background:#fff3cd;border:2px solid #f3c969;border-radius:14px;padding:12px 14px;margin:10px 0;font-weight:600}
.notice.ok{background:#e3f8ea;border-color:#86d3a2}
.pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:14px}
.pair{border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;box-shadow:0 5px 0 rgba(0,0,0,.15);position:relative;overflow:hidden;animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}
.pair::before{content:"";position:absolute;inset:0;background:var(--pat);opacity:.5}
.pair.t-candycane::before{opacity:.25}
.pair>*{position:relative}
.pair .who{flex:1;min-width:0}
.pair .who small{display:block;opacity:.85;font-size:.8rem}
.pair .gets{font-size:1.15rem;background:rgba(255,255,255,.95);color:#2b1d14;padding:4px 10px;border-radius:10px;display:inline-block;margin-top:3px}
.pair .gets.hidden{filter:blur(6px);user-select:none}
.pair button{border:0;border-radius:10px;padding:6px 10px;background:var(--gold);font-weight:700;color:#2b1d14}

/* cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:12px}
.card-tile{background:#fff;border-radius:18px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.15);text-align:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.card-tile img{width:100%;border-radius:12px;display:block;margin-bottom:8px;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.card-tile img:hover{transform:rotate(-2deg) scale(1.03)}

/* history */
.year-block{background:#fff;border-radius:18px;padding:12px 16px;margin:12px 0;box-shadow:0 6px 16px rgba(0,0,0,.1)}
.year-block h3{font-family:var(--title);font-size:1.9rem;margin:0;color:var(--green)}
.year-block .yb-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:space-between}
.year-block table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.98rem}
.year-block td,.year-block th{padding:6px 8px;border-bottom:1px dashed #eadbcc;text-align:left}
.year-block th{color:#7a6250;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}

/* footer */
.foot{text-align:center;color:#fff;padding:10px clamp(10px,9vw,96px) 150px;text-shadow:0 2px 4px rgba(0,0,0,.8);position:relative;z-index:5}
.foot p{margin:.3rem 0}
.foot .pp{font-size:1.1rem;font-weight:600}
.foot a{color:var(--gold);font-weight:700}

/* flyer (sleigh + Rudolph) */
#flyer{position:fixed;left:0;top:8vh;z-index:3;pointer-events:none;transform:translateX(-120vw);will-change:transform}
#flyer.go{animation:fly var(--dur,9s) linear forwards}
.flyer-inner{display:flex;align-items:center;animation:bob 1.1s ease-in-out infinite}
.fl-sleigh{width:clamp(160px,24vw,300px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.fl-reins{width:clamp(30px,4vw,60px);height:3px;background:#7a4a1c;margin:0 -12px;transform:translateY(-10px) rotate(-6deg)}
.fl-rudolph{position:relative;width:clamp(120px,17vw,210px);transform:translateY(-20px)}
.fl-rudolph img{width:100%;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));animation:gallop .5s ease-in-out infinite;transform-origin:30% 60%}
.nose-glow{position:absolute;left:90%;top:50.5%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:0;padding:0;pointer-events:auto;cursor:pointer;
  background:radial-gradient(circle,#ff6b6b 0,#ff2020 30%,rgba(255,30,30,.55) 50%,rgba(255,0,0,0) 72%);box-shadow:0 0 30px 14px rgba(255,40,40,.55);animation:glow .8s ease-in-out infinite alternate}
.nose-glow.boop{animation:boop .6s cubic-bezier(.3,1.8,.5,1)}

/* modal */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:12px;background:radial-gradient(circle at 50% 40%,rgba(30,50,110,.78),rgba(5,10,30,.92))}
.modal[hidden]{display:none}
#sparkles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.modal-box,.finale-box{position:relative;z-index:2;width:min(560px,100%);max-height:96vh;overflow:auto;background:var(--cream);border-radius:26px;padding:18px 16px 18px;text-align:center;box-shadow:0 0 0 6px var(--gold),0 0 0 12px var(--red),0 30px 60px rgba(0,0,0,.6);animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.x{position:absolute;right:10px;top:10px;border:0;background:#ffe1e4;color:var(--red-d);border-radius:50%;width:40px;height:40px;font-size:1.1rem;font-weight:800;z-index:5}
.rv-count{font-weight:700;color:#7a6250;font-size:.95rem}
.modal-box h3{font-family:var(--title);font-size:clamp(1.8rem,6vw,2.5rem);margin:.2rem 0;color:var(--red);line-height:1.05}
.rv-stage{position:relative;height:clamp(240px,46vw,290px);margin:4px auto 0;max-width:460px}
.rv-elf{position:absolute;left:0;bottom:0;height:78%;transform-origin:50% 100%;animation:hop 1.6s ease-in-out infinite;z-index:3}
.rv-elf2{position:absolute;right:0;bottom:-30%;height:66%;transform-origin:50% 100%;z-index:3;opacity:0;visibility:hidden;transition:bottom .4s cubic-bezier(.3,1.8,.5,1),opacity .3s}
.rv-stage.suspense .rv-elf2,.rv-stage.cheer .rv-elf2,.rv-stage.juggle .rv-elf2{opacity:1;visibility:visible}
.rv-sack{position:absolute;left:50%;bottom:0;height:70%;transform:translateX(-50%);z-index:2;transition:opacity .4s}
.rv-stage.digging .rv-sack{animation:shake .12s linear infinite}
.rv-stage.digging .rv-elf{animation:dig .35s ease-in-out infinite}
.rv-stage.suspense .rv-elf2{bottom:0;animation:peek 1s ease-in-out infinite}
.rv-stage.cheer .rv-elf,.rv-stage.cheer .rv-elf2{animation:cheer .4s ease-in-out 5;bottom:0}
.rv-stage.juggle .rv-elf2{bottom:0}
.drumroll{position:absolute;left:50%;top:0;transform:translateX(-50%) scale(0);font-size:2.6rem;z-index:6;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.rv-stage.suspense .drumroll{transform:translateX(-50%) scale(1);animation:drum .12s linear infinite}
.juggle-ball{position:absolute;font-size:1.6rem;z-index:6;pointer-events:none}

.envelope{position:absolute;left:50%;bottom:16%;width:min(240px,62%);aspect-ratio:1.5;transform:translateX(-50%) scale(.95);z-index:4;perspective:700px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.envelope.hidden-in-sack{transform:translateX(-50%) translateY(40%) scale(.2);opacity:0}
.envelope.rise{animation:riseOut .9s cubic-bezier(.3,1.5,.5,1) forwards}
.env-back,.env-front,.env-flap{position:absolute;inset:0;border-radius:8px}
.env-back{background:#c9302c}
.env-front{background:linear-gradient(135deg,transparent 49.5%,#e14a44 50%) left/50% 100% no-repeat,linear-gradient(225deg,transparent 49.5%,#e14a44 50%) right/50% 100% no-repeat,linear-gradient(0deg,#d63c37 0,#d63c37 52%,transparent 52%);z-index:3}
.env-flap{z-index:4;clip-path:polygon(0 0,100% 0,50% 58%);background:#b72622;transform-origin:50% 0;transition:transform .6s ease .1s,z-index 0s .4s}
.env-seal{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:1.7rem;width:46px;height:46px;border-radius:50%;background:var(--gold);display:grid;place-items:center;z-index:5;box-shadow:0 3px 0 #b07a12;transition:opacity .3s,transform .3s}
.env-card{position:absolute;left:6%;right:6%;top:8%;bottom:6%;border-radius:10px;background:#fff;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;transition:transform .8s cubic-bezier(.3,1.5,.5,1) .45s;box-shadow:0 6px 16px rgba(0,0,0,.3);border:4px solid var(--ac,#ffd166);color:var(--tx,#2b1d14)}
.env-card::before{content:"";position:absolute;inset:0;border-radius:6px;background:var(--pat,none);opacity:.95;z-index:-1}
.env-card.t-candycane::before{opacity:.3}
.env-card small{font-weight:700;font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.env-card b{font-family:var(--title);font-size:clamp(1.7rem,6vw,2.4rem);line-height:1;background:rgba(255,255,255,.95);color:#2b1d14;padding:4px 12px;border-radius:12px;margin:4px 0;word-break:break-word}
.env-card em{font-style:normal;font-weight:600;font-size:.85rem;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1}
.envelope.open .env-seal{opacity:0;transform:translate(-50%,-50%) scale(2)}
.envelope.open .env-card{transform:translateY(-62%) scale(1.12) rotate(-2deg);z-index:6}
.rv-hint{font-weight:600;color:#5a4636;min-height:1.3em;margin:.4rem 0}
.rv-elfline{font-weight:700;color:var(--green-d);min-height:1.3em;margin:.2rem 0 .6rem;font-size:1.05rem}
.rv-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.finale-box{width:min(620px,100%)}
.finale-box h3{font-family:var(--title);font-size:clamp(2.2rem,8vw,3.4rem);margin:.2rem 0;color:var(--red);animation:wobble 1.6s ease-in-out infinite}
.finale-cast{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:clamp(150px,34vw,220px)}
.finale-cast img{height:100%;transform-origin:50% 100%}
.fc-elf1,.fc-elf2{height:80%!important;animation:cheer .5s ease-in-out infinite}
.fc-elf2{animation-delay:.25s}
.fc-santa{animation:belly 1s ease-in-out infinite}

/* elf buddy + snowman */
#elfBuddy{position:fixed;left:8px;bottom:6px;z-index:60;border:0;background:none;padding:0;line-height:0;transform:translateY(55%);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
#elfBuddy img{height:clamp(110px,18vw,160px);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
#elfBuddy:hover,#elfBuddy.talk{transform:translateY(8%)}
#elfBuddy.talk img{animation:cheer .4s ease-in-out 3}
#elfBubble{position:fixed;left:clamp(90px,15vw,140px);bottom:clamp(90px,14vw,130px);z-index:72;max-width:min(300px,62vw);background:#fff;border:3px solid var(--green);border-radius:18px 18px 18px 4px;padding:10px 14px;font-weight:600;font-size:1rem;box-shadow:0 8px 18px rgba(0,0,0,.35);transform:scale(0);transform-origin:0 100%;transition:transform .35s cubic-bezier(.3,1.8,.5,1);pointer-events:none}
#elfBubble.show{transform:scale(1)}
#snowman{position:fixed;right:8px;bottom:4px;z-index:60;border:0;background:none;padding:0;width:84px;height:126px;display:block;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite;cursor:pointer}
#snowman.poked{animation:jelly .7s cubic-bezier(.3,1.8,.5,1)}
#snowman img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
#snowman .sm-hat{transform-origin:60% 16%;z-index:2}
#snowman.poked .sm-hat{animation:hatflip .7s ease}

#toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-150%);z-index:100;background:var(--green);color:#fff;font-weight:700;padding:12px 18px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.3,1.6,.5,1);max-width:92vw;text-align:center}
#toast.show{transform:translate(-50%,0)}
#toast.err{background:var(--red)}

/* keyframes */
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hop{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-14px) scaleY(1.03)}55%{transform:translateY(0) scaleY(.94)}70%{transform:scaleY(1.02)}}
@keyframes cheer{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-26px) rotate(-8deg)}60%{transform:translateY(-26px) rotate(8deg)}}
@keyframes wobble{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.04)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04,.97)}}
@keyframes shake{0%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(4deg)}100%{transform:translateX(-50%) rotate(-4deg)}}
.sack-btn.shake img{animation:shake2 .12s linear infinite}
@keyframes shake2{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes dig{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(30px) rotate(14deg)}}
@keyframes peek{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
@keyframes drum{0%{transform:translateX(-50%) rotate(-10deg) scale(1)}50%{transform:translateX(-50%) rotate(10deg) scale(1.1)}100%{transform:translateX(-50%) rotate(-10deg) scale(1)}}
@keyframes riseOut{0%{transform:translateX(-50%) translateY(40%) scale(.2) rotate(-30deg);opacity:0}60%{transform:translateX(-50%) translateY(-30%) scale(1.1) rotate(8deg);opacity:1}100%{transform:translateX(-50%) translateY(0) scale(1) rotate(0);opacity:1}}
@keyframes belly{0%,100%{transform:scale(1)}25%{transform:scale(1.12,.9)}50%{transform:scale(.94,1.08)}75%{transform:scale(1.05,.97)}}
@keyframes jelly{0%,100%{transform:scale(1)}30%{transform:scale(1.25,.75)}50%{transform:scale(.85,1.15)}70%{transform:scale(1.08,.94)}}
@keyframes hatflip{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-40px) rotate(360deg)}}
@keyframes fly{0%{transform:translateX(-60vw) translateY(0)}25%{transform:translateX(15vw) translateY(4vh)}50%{transform:translateX(45vw) translateY(-2vh)}75%{transform:translateX(80vw) translateY(5vh)}100%{transform:translateX(130vw) translateY(-6vh)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes gallop{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes glow{from{transform:scale(.85);opacity:.8}to{transform:scale(1.25);opacity:1}}
@keyframes boop{0%{transform:scale(1)}40%{transform:scale(2.4)}100%{transform:scale(1)}}

@media (max-width:640px){
  .hdr-santa{height:96px}.hdr-elf{height:84px}
  .tabs{gap:3px;flex-wrap:nowrap}.tab{font-size:1rem;padding:8px 8px 6px;white-space:nowrap}
  .fam .meta{gap:4px}.fam select,.fam .mini{font-size:.82rem;padding:5px 6px}
  .chip{font-size:.85rem;padding:6px 10px;min-height:38px}
  .draw-stage{min-height:200px}
  #snowman{width:68px;height:102px;right:2px}
  .foot{padding-bottom:110px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---- "need more names" helper ---- */
.fixer-slot:empty{display:none}
.fixer-slot{margin:14px 0}
.fixer{position:relative;display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,#fff3c4,#ffe5ea);border:3px dashed var(--red);border-radius:20px;padding:14px 16px;box-shadow:0 6px 0 rgba(0,0,0,.08);animation:pop .4s cubic-bezier(.3,1.8,.5,1) both}
.fixer.ok{background:linear-gradient(135deg,#e2ffe9,#fff8ec);border-color:var(--green)}
.fixer.nudge{animation:jelly .7s cubic-bezier(.3,1.8,.5,1)}
.fixer-elf{height:96px;flex:none;animation:hop 2.2s ease-in-out infinite}
.fixer-body{flex:1;min-width:0}
.fixer h3{font-family:var(--title);font-size:clamp(1.5rem,4vw,2rem);color:var(--red);margin:0 0 4px;line-height:1.05}
.fixer.ok h3{color:var(--green)}
.fixer p{margin:0 0 8px;font-size:1.05rem;line-height:1.4}
.need-dots{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px;font-size:1.5rem}
.need-dots span{animation:hop 1.6s ease-in-out infinite}
.need-dots span:nth-child(2n){animation-delay:.2s}.need-dots span:nth-child(3n){animation-delay:.4s}
.fixer-form{display:flex;flex-direction:column;gap:10px}
.fixer-row{display:flex;gap:8px;flex-wrap:wrap}
.fixer-name{flex:2 1 180px;min-width:0;font:inherit;font-size:1.1rem;padding:11px 14px;border-radius:14px;border:3px solid #f0d8c2;background:#fff;outline:none}
.fixer-name:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,209,102,.4)}
.fixer-group{flex:1 1 200px;min-width:0;font:inherit;font-weight:600;padding:10px;border-radius:14px;border:3px solid #f0d8c2;background:#fff}
.sugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sugg>span{font-weight:700;color:#7a6250}
.extra-chip{border:2px solid #f0c5cb;background:#fff;color:#2b1d14;border-radius:999px;padding:6px 12px;font-weight:600;min-height:38px;transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.extra-chip:hover{transform:translateY(-2px) rotate(-2deg);background:#fff3c4}
.linkish{align-self:flex-start;border:0;background:none;color:var(--red-d);text-decoration:underline;font-weight:600;padding:4px 0}
.tap-sack{font-weight:700;color:var(--green-d)}
.wild-note{margin:-2px 70px 8px 0;font-weight:600;font-size:.95rem;opacity:.95}
.ready-pulse{animation:readyPulse .8s ease-in-out 3!important}
@keyframes readyPulse{50%{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 0 18px #ffd166)}}
.t-extraelves{--c1:#1f9e5a;--ac:#ffd166;--tx:#fff;--pat:radial-gradient(circle at 16px 16px,#ffd166 2.5px,transparent 3.5px) 0 0/46px 46px,repeating-linear-gradient(135deg,transparent 0 22px,rgba(214,40,57,.45) 22px 32px,transparent 32px 44px,rgba(255,209,102,.4) 44px 50px),radial-gradient(circle at 20% 20%,#2fbf73,#1f9e5a 55%,#0d5c33)}
@media (max-width:640px){
  .fixer{flex-direction:column;align-items:center;text-align:center;padding:12px}
  .fixer-elf{height:72px}
  .fixer-body{width:100%}
  .fixer p{font-size:1rem}
  .need-dots,.sugg{justify-content:center}
  .fixer .add-name-btn{width:100%}
  .linkish{align-self:center}
  .foot{padding-left:70px;padding-right:70px}
}
#elfBubble.alt{border-radius:18px;transform-origin:50% 50%}

/* Narrower than the side margins can hold: Jingles + the snowman live in the footer gap at the end of the page,
   in front of everything (never hidden behind the panel) but never covering a button. */
@media (max-width:1279px){
  body{position:relative}
  #snowman,#elfBuddy{position:absolute}
  #elfBuddy,#elfBuddy:hover,#elfBuddy.talk{transform:none}
  .foot{padding-bottom:calc(clamp(110px,18vw,160px) + 14px)!important;padding-left:clamp(70px,13vw,106px)!important;padding-right:clamp(70px,13vw,106px)!important}
}