:root{--ink:#47251d;--cream:#fff2d2;--gold:#f2ce8e;--forest:#193c42;--red:#a7373e;--shadow:0 15px 35px #0a1c2790}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Georgia,'DejaVu Serif',serif;color:var(--cream)}body{background:radial-gradient(ellipse at 50% 0%,#48757b 0%,#153c48 60%,#0a2838 100%);overflow-x:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:4px solid #fff6bb;outline-offset:4px}img{max-width:100%;pointer-events:none}main{position:relative;min-height:90vh}.is-hidden{display:none!important}.screen{width:min(100%,1050px);margin:auto;padding:18px 16px 8px}.storybook{width:100%;position:relative;isolation:isolate;overflow:hidden;border-radius:30px;background:#173b44;box-shadow:0 14px 0 #5b2b2a,0 22px 0 #332022,0 36px 55px #081825b9;border:7px solid #68322e}.magic-sky{position:absolute;inset:0;background:url('assets/dekorace/zimni-vesnicka.png') center center/cover no-repeat;z-index:0}.cabin-wood{position:absolute;inset:18% 5% 6%;border:12px solid #4c261f;border-radius:20px;background:#703d35 url('assets/dekorace/drevo-domku.png') center/480px auto repeat;box-shadow:inset 0 0 35px #210c0bca,0 0 0 7px #a76b46,0 6px 40px #071d2a6e;z-index:1}.cabin-wood:after{content:"";position:absolute;inset:8px;border:3px solid #e1a96a88;border-radius:14px;pointer-events:none}.roof{position:absolute;top:-2%;left:-5%;width:110%;height:auto;z-index:8;filter:drop-shadow(0 16px 8px #31150c80)}.logo-wrap{position:absolute;top:5%;left:37%;width:26%;height:13%;z-index:13;display:grid;place-items:center;filter:drop-shadow(0 2px 2px #271a17a6)}.logo-wrap img{width:100%;height:100%;object-fit:contain}.sign{position:absolute;z-index:10;filter:drop-shadow(0 13px 5px #1c0c0c89)}.sign>img{width:100%;height:100%}.sign-copy{position:absolute;inset:15% 11%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;text-shadow:0 3px 2px #3d1114bf}.sign-copy h1,.sign-copy h2{font-family:Georgia,'DejaVu Serif',serif;font-weight:900;font-style:italic;line-height:1.14;letter-spacing:.02em;margin:0;color:#ffe9bb}.sign-copy p{font-weight:700;color:#ffe5ad;margin:3px 0 0}.garland{position:absolute;z-index:11;filter:drop-shadow(0 8px 5px #082a2192)}.lantern{position:absolute;z-index:14;filter:drop-shadow(0 0 16px #ffc15388)}.present{position:absolute;z-index:15;filter:drop-shadow(0 11px 4px #1c1011a0)}.ground-snow{position:absolute;z-index:12;bottom:-18px;left:-10%;width:120%;height:13%;border-radius:55% 50% 0 0;background:linear-gradient(#f8ffff 0%,#daeeee 45%,#c5e0e2 100%);box-shadow:0 -10px 0 #f5ffffb8,0 -20px 30px #bad5db77}.wood-button{border:0;background:url('assets/dekorace/tlacitko.png') center/100% 100% no-repeat;color:#fff5d7;min-height:59px;font-size:clamp(14px,2vw,22px);font-weight:900;text-shadow:0 2px 2px #3d1815;letter-spacing:1.1px;filter:drop-shadow(0 7px 2px #1d16126b);transition:transform .2s,filter .2s;padding:15px 34px}.wood-button:hover{transform:translateY(-3px);filter:brightness(1.15) drop-shadow(0 9px 5px #1d161280)}.wood-button:active{transform:translateY(2px)}.btn-sparkle{padding-left:12px;color:#f8cf78}
/* Introduction is a vertically staged cottage like the approved poster */
.intro-storybook{aspect-ratio: 0.93;max-height:1060px;min-height:600px}.intro-storybook .cabin-wood{inset:24% 5% 6%}.intro-storybook .roof{top:0}.intro-storybook .logo-wrap{top:7%}.sign-intro{top:23%;left:7%;width:86%;height:28%}.sign-intro .sign-copy h1{font-size:clamp(32px,6.3vw,71px)}.sign-intro .sign-copy p{font-size:clamp(11px,1.9vw,23px)}.intro-garland{top:45%;width:105%;left:-2.5%}.welcome-quote{position:absolute;top:56%;left:25%;width:50%;text-align:center;color:#ffe9b8;font-size:clamp(13px,2.2vw,25px);line-height:1.6;font-style:italic;text-shadow:0 3px 3px #331a20;z-index:7}.elf-intro{position:absolute;height:39%;width:auto;object-fit:contain;z-index:16;filter:drop-shadow(0 13px 8px #142021bf)}.elf-intro-girl{bottom:9%;left:5%}.elf-intro-boy{bottom:9%;right:5%}.intro-lantern-left{left:-1%;bottom:14%;width:19%}.intro-lantern-right{right:-1%;bottom:15%;width:19%}.present-left{bottom:6%;left:2%;width:18%}.present-right{bottom:6%;right:0;width:17%}.enter-button{position:absolute;z-index:23;bottom:11%;left:34%;width:32%;min-width:190px}.below-note{text-align:center;font-size:13px;color:#cde4de;font-style:italic;padding:14px;margin:0}
/* Calendar real separate 24 panels six across, four down */
.calendar-storybook{min-height:820px;aspect-ratio:1.07}.calendar-storybook .roof{top:-7%;height:31%;object-fit:fill}.calendar-storybook .cabin-wood{inset:22% 4% 4%}.cal-logo{top:2%;left:37%;width:26%;height:15%}.sign-calendar{top:12%;width:76%;height:19%;left:12%}.sign-calendar .sign-copy h2{font-size:clamp(25px,4vw,47px)}.sign-calendar .sign-copy p{font-size:clamp(11px,1.5vw,16px)}.cal-elf{position:absolute;height:20%;object-fit:contain;z-index:12;filter:drop-shadow(0 9px 8px #08191b93)}.cal-elf-girl{top:15.5%;left:0}.cal-elf-boy{top:15.5%;right:0}.hung-board{position:absolute;top:29%;right:4%;color:#f5dfae;background:linear-gradient(#8e573c,#70402b);border:5px ridge #c79256;padding:10px 12px;border-radius:6px;transform:rotate(6deg);box-shadow:0 6px 6px #1b1511a1;z-index:18;text-align:center;font-style:italic;font-size:clamp(9px,1.5vw,17px);text-shadow:0 2px 2px #241510}.hung-board:before,.hung-board:after{content:"";position:absolute;bottom:100%;height:46px;width:2px;background:#d6bc8a}.hung-board:before{left:18%}.hung-board:after{right:18%}.cal-garland{top:31%;left:-1%;width:102%;height:12%}.calendar-sill{position:absolute;top:38.5%;bottom:11%;left:8%;right:8%;border:13px ridge #9b563a;border-radius:16px;background:linear-gradient(90deg,#4e241d,#713829 3%,#371717 98%);box-shadow:inset 0 0 17px #170909,0 14px 12px #180f0fbd;z-index:13;padding:12px}.door-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;height:100%;perspective:900px}.door-slot{position:relative;min-width:0;min-height:0;border-radius:8px;background:radial-gradient(#c7a96e,#503526 80%);box-shadow:inset 0 0 14px #160b0a;border:2px solid #47201d;perspective:700px;isolation:isolate}.door-slot:before{content:'✦';font-size:20px;color:#ffe49eab;position:absolute;left:42%;top:40%}.door-leaf{position:absolute;inset:0;border:0;padding:0;background:transparent;transform-origin:4% 50%;transform-style:preserve-3d;transition:transform .82s cubic-bezier(.2,.55,.2,1),filter .2s;z-index:3;backface-visibility:visible;width:100%;height:100%;display:block}.door-leaf img{width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 2px 3px #100503ad)}.door-number{position:absolute;top:59%;left:50%;transform:translate(-50%,-50%);font-family:Georgia,serif;color:#fff0ca;text-shadow:2px 3px 1px #44221c,-1px -1px #c28a4a;font-weight:900;font-size:clamp(14px,2.2vw,32px);-webkit-text-stroke:.2px #542c22}.door-slot.is-open .door-leaf{transform:rotateY(-112deg)}.door-slot .open-again{position:absolute;bottom:6px;left:0;right:0;color:#ffe4ac;font-size:11px;text-shadow:0 1px 2px #140e0e;z-index:2;pointer-events:none}.door-slot:focus-within{outline:2px solid #ffe9b2}.cal-lantern-left{width:16%;left:-3%;bottom:5%}.cal-lantern-right{width:16%;right:-3%;bottom:5%}.cal-gift{width:12%;bottom:2%;right:11%}.bottom-sign{position:absolute;bottom:3%;left:27%;width:46%;z-index:15;text-align:center;padding:10px 0;color:#653525;font-size:clamp(11px,1.7vw,17px);font-weight:bold;text-shadow:0 1px 1px white}.bottom-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:25px auto 4px}.small-button{min-height:48px;font-size:14px;padding:12px 27px}.tester-note{text-align:center;color:#d7ede7;font-size:12px;margin:8px 0 15px}
footer{text-align:center;font:12px Georgia,serif;color:#dee7d9;padding:12px 20px 28px}.sound-controls{position:fixed;right:14px;top:max(11px,env(safe-area-inset-top));z-index:100;display:flex;gap:7px}.sound-btn{background:linear-gradient(#e6bf75,#8f583c);border:2px solid #fff0be;border-radius:50%;width:41px;height:41px;display:grid;place-items:center;box-shadow:0 4px 12px #102832aa;padding:10px}.sound-btn svg{width:20px;height:20px;fill:none;stroke:#452a23;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sound-btn.muted{opacity:.5;filter:grayscale(1)}.sound-btn.muted:after{content:'';position:absolute;width:26px;height:2px;background:#781f25;transform:rotate(-35deg)}.snowflakes{pointer-events:none;position:fixed;inset:0;z-index:50;background-image:radial-gradient(2px 2px at 10px 14px,#ffffffb8 99%,transparent),radial-gradient(1px 1px at 95px 83px,#ffffff8f 99%,transparent),radial-gradient(2px 2px at 130px 38px,#ffffff98 99%,transparent);background-size:190px 190px;opacity:.42;animation:snowfall 23s linear infinite}@keyframes snowfall{to{background-position:0 340px}}
/* OPEN SURPRISE */
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,790px);width:100%;max-height:90dvh;overflow:visible;color:var(--ink)}dialog::backdrop{background:#0b1b25bd;backdrop-filter:blur(5px)}.popup-wood{position:relative;isolation:isolate;border:11px ridge #be8958;border-radius:27px;box-shadow:0 22px 45px #0009, inset 0 0 12px #683123;background:#814837 url('assets/dekorace/drevo-domku.png') center/550px auto;min-height:410px;padding:76px 28px 28px}.popup-garland{position:absolute;top:-34px;left:-8%;width:116%;height:135px;z-index:3;object-fit:fill}.popup-heading{position:absolute;top:49px;left:17%;width:66%;text-align:center;color:#ffedb9;letter-spacing:2px;text-shadow:0 2px 5px #351715;font-size:clamp(13px,2vw,20px);font-weight:900}.popup-close{position:absolute;right:8px;top:8px;z-index:10;border:3px solid #fff2c3;color:#fff1cb;border-radius:50%;width:43px;height:43px;background:#a13f3a;font-size:32px;line-height:27px;box-shadow:0 4px 6px #401717}.popup-split{display:grid;grid-template-columns:42% 58%;align-items:stretch;gap:5px}.popup-door-scene{position:relative;display:grid;align-items:center;justify-items:center;padding:20px}.popup-portal{position:relative;background:linear-gradient(#faeec5,#bd935d);border:12px ridge #a56841;border-radius:16px;box-shadow:inset 0 0 20px #7e4029;height:310px;width:205px;perspective:850px}.popup-elf{position:absolute;max-width:90%;height:92%;object-fit:contain;left:5%;bottom:0}.popup-door-leaf{position:absolute;inset:0;transform:perspective(500px) rotateY(-78deg);transform-origin:0 50%;filter:drop-shadow(4px 10px 5px #331410);pointer-events:none}.popup-door-leaf img{width:100%;height:100%}.sparkles{position:absolute;top:10px;right:15px;color:#ffe49f;font-size:22px}.popup-paper{background:linear-gradient(145deg,#fff9e8,#f2dfba);border:5px double #bd9162;border-radius:20px;box-shadow:inset 0 0 22px #cfad7799;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:325px}.popup-day{font-size:14px;color:#95633e;font-weight:bold}.popup-paper h2{margin:9px 0;color:#823e32;font-size:clamp(20px,2.7vw,28px);font-style:italic}.popup-paper p{font:16px/1.55 Georgia,serif;margin:4px auto 14px;max-width:400px;color:#492d29}.sample-text{font-size:11px!important;color:#8b7867!important}.popup-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}.popup-actions .small-button{min-height:48px;padding:10px 20px;font-size:12px}.code-example{padding:10px;border:2px dashed #b6875a;background:#f6e8cd;letter-spacing:2px;font-weight:bold;border-radius:9px}.coloring-download{display:block;background:#8b3b38;color:#fff9e5;border-radius:10px;padding:12px 20px;text-decoration:none;margin:6px auto;font:bold 14px Georgia,serif}
@media(max-width:680px){.screen{padding:8px 8px 5px}.storybook{border-radius:22px;border-width:5px}.intro-storybook{aspect-ratio:.72;min-height:0;max-height:none}.intro-storybook .roof{top:0}.intro-storybook .logo-wrap{top:8%;width:43%;left:28.5%;height:13%}.sign-intro{top:25%;left:1%;width:98%;height:27%}.sign-intro .sign-copy h1{font-size:clamp(31px,7.4vw,51px)}.sign-intro .sign-copy p{font-size:clamp(10px,2.5vw,16px)}.intro-garland{top:46%}.welcome-quote{top:55%;font-size:clamp(12px,3vw,18px);left:29%;width:42%}.elf-intro{height:35%;bottom:10%}.elf-intro-girl{left:0}.elf-intro-boy{right:0}.enter-button{left:26%;width:48%;bottom:10%;font-size:17px;min-width:0;min-height:55px}.intro-lantern-left,.intro-lantern-right{width:26%;bottom:12%}.present{width:20%}.calendar-storybook{aspect-ratio:.67;min-height:800px}.calendar-storybook .roof{height:25%;top:-2%}.calendar-storybook .cabin-wood{inset:19% 2% 3%}.cal-logo{top:5%;left:32%;width:36%;height:14%}.sign-calendar{top:18%;left:2%;width:96%;height:15%}.sign-calendar .sign-copy h2{font-size:clamp(19px,4.8vw,31px)}.sign-calendar .sign-copy p{font-size:clamp(9px,2.3vw,15px)}.cal-elf{top:22%;height:15%}.cal-elf-girl{left:-1%}.cal-elf-boy{right:-1%}.hung-board{top:32%;font-size:9px;right:4%;padding:5px}.hung-board:before,.hung-board:after{height:15px}.cal-garland{top:35%;height:8%}.calendar-sill{top:41%;bottom:11%;left:5%;right:5%;border-width:8px;padding:6px}.door-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:5px}.door-number{font-size:clamp(14px,4.1vw,24px)}.cal-lantern-left,.cal-lantern-right{width:20%}.bottom-sign{width:64%;left:18%;bottom:3%;font-size:11px}.popup-wood{padding:58px 13px 13px;border-width:8px;min-height:0}.popup-garland{height:106px;top:-29px}.popup-heading{top:31px;font-size:12px}.popup-split{grid-template-columns:1fr;gap:8px}.popup-door-scene{height:190px;padding:7px}.popup-portal{width:132px;height:181px}.popup-paper{min-height:220px;padding:12px}.popup-paper h2{margin:4px 0}.popup-paper p{font-size:14px;margin-bottom:7px}.popup-door-leaf{transform:perspective(500px) rotateY(-77deg)}dialog{max-height:95dvh;overflow:auto}.bottom-controls{margin:19px auto 5px}.small-button{font-size:12px;padding:11px 17px}.sound-btn{width:35px;height:35px;padding:7px}.sound-controls{right:6px;top:6px}}
@media(prefers-reduced-motion:reduce){.snowflakes{animation:none}.door-leaf,.wood-button{transition:none}}
/* Original Avamary logotype mounted on a carved crest; artwork itself remains unchanged. */
.logo-wrap{top:11%;left:35%;width:30%;height:13%;padding:3px 12px;background:linear-gradient(135deg,#773435,#a24f44 48%,#6e2a2e);border:4px ridge #dfaf70;border-radius:35% 35% 25% 25%;box-shadow:0 5px 12px #2b1012b8, inset 0 0 10px #3d141b}
.cal-logo{top:3%;left:37%;width:26%;height:11%}
@media(max-width:680px){.intro-storybook .logo-wrap{top:12%;left:30%;width:40%;height:12%}.cal-logo{top:7%;left:34%;width:32%;height:10%}}