:root{--sky-top:#bfe9ff;--sky-bottom:#fff3d6;--ink:#332a55;--ink-soft:#5b4e85;--paper:#fffdf7;--coral:#ff6b6a;--sun:#ffc93c;--grass:#6bcb77;--teal:#3ec6c0;--blueberry:#4d8dff;--grape:#b983ff;--pink:#ff8fc7;--white:#fff;--shadow:#332a5547;--panel:#ffffffd9;--fs-heading:min(3.25rem, 6.5vh);--fs-card-heading:min(1.625rem, 3.25vh);--fs-card-sub:min(1.125rem, 2.25vh);--card-min:140px;--card-pref:28vh;--card-max:210px}@media (width>=750px){:root{--fs-heading:min(4.25rem, 8.5vh);--fs-card-heading:min(1.625rem, 3.25vh);--fs-card-sub:min(1.375rem, 2.75vh);--card-min:150px;--card-pref:27vh;--card-max:230px}}@media (width>=1200px){:root{--fs-heading:min(5.5rem, 11vh);--fs-card-heading:min(1.7rem, 3.4vh);--fs-card-sub:min(1.5rem, 3vh);--card-min:170px;--card-pref:30vh;--card-max:270px}}@media (width>=1600px){:root{--fs-heading:min(7rem, 14vh);--fs-card-heading:min(2rem, 4vh);--fs-card-sub:min(1.8rem, 3.6vh);--card-min:190px;--card-pref:31vh;--card-max:320px}}*{box-sizing:border-box}html,body{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:var(--sky-bottom);height:100%;margin:0;overflow:hidden}body{width:100vw;height:100dvh;color:var(--ink);background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);font-family:Fredoka,system-ui,-apple-system,sans-serif;position:relative}button{color:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit}button:focus-visible{outline:4px solid var(--blueberry);outline-offset:3px}#app{width:100%;height:100%;position:relative;overflow:hidden}.screen{flex-direction:column;width:100%;height:100%;display:none;position:absolute;inset:0}.screen.active{display:flex!important}#home,#homeScreen{z-index:1;text-align:center;justify-content:center;align-items:center;padding:clamp(8px,2.5vh,28px) clamp(12px,3vw,40px);position:relative;overflow:hidden}.home-bg{z-index:0;background-color:var(--sky-top);background-image:url(/images/bg-landscape.jpg);background-position:50%;background-size:cover;position:absolute;inset:0}.home-overlay{z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(4px);background:#332a5540;position:absolute;inset:0}.home-inner{z-index:2;flex-direction:column;align-items:center;gap:clamp(6px,1.6vh,16px);width:100%;max-width:1440px;max-height:100%;margin:0 auto;display:flex;position:relative}.heading-logo-slot,.logo-block{flex-direction:column;align-items:center;display:flex}.mb-logo{font-family:Fredoka,Comic Sans MS,sans-serif;font-size:var(--fs-heading);letter-spacing:2px;flex-wrap:wrap;justify-content:center;gap:2px;margin:0;font-weight:800;line-height:1.1;display:flex}.mb-logo .lt{-webkit-text-stroke:4px #fff;paint-order:stroke fill;filter:drop-shadow(0 5px #332a5547)drop-shadow(0 10px 14px #332a552e);display:inline-block}.mb-logo .lt:nth-child(odd){transform:rotate(-4deg)translateY(-2px)}.mb-logo .lt:nth-child(2n){transform:rotate(4deg)translateY(2px)}.home-subtitle{background:var(--white);color:var(--ink-soft);border-radius:999px;margin-top:4px;padding:8px 22px;font-size:clamp(13px,1.8vw,18px);font-weight:700;display:inline-block}.tiles{width:100%}.tiles-landscape{grid-template-columns:repeat(3,minmax(210px,clamp(220px,22vw,290px)));justify-content:center;align-items:stretch;gap:clamp(16px,2.5vw,32px);max-width:1100px;margin:clamp(14px,2vh,26px) auto 0;display:grid}.tile-card{text-align:center;color:var(--white);aspect-ratio:1/1.15;touch-action:manipulation;border:2px solid #fff6;border-radius:36px;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:clamp(18px,3vh,28px) clamp(16px,2vw,24px);transition:transform .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden;box-shadow:0 14px 28px -4px #332a5538,0 6px 12px -2px #332a551f,inset 0 2px 4px #ffffff73,inset 0 -4px 6px #0000001a}.tile-card:active{transform:translateY(4px);box-shadow:0 6px 14px -2px #332a5540,inset 0 1px 2px #ffffff4d}.tile-card .card-image{flex:none;justify-content:center;align-items:center;width:clamp(75px,9vw,110px);height:clamp(75px,9vw,110px);margin-bottom:clamp(6px,1.2vh,12px);display:flex}.tile-card .card-image img,.tile-card .card-image svg{object-fit:contain;filter:drop-shadow(0 6px 10px #00000029);width:100%;height:100%}.tile-card .card-heading{font-size:var(--fs-card-heading);text-shadow:0 2px 4px #332a5540;margin-bottom:4px;font-weight:800;line-height:1.15}.tile-card .card-sub{font-size:var(--fs-card-sub);color:#fffffff0;text-shadow:0 1px 3px #332a5533;max-width:90%;margin-top:0;font-weight:600;line-height:1.25}.tile-card.tile-draw{background:linear-gradient(165deg,#ff7b79 0%,#ffa874 100%)}.tile-card.tile-maze{background:linear-gradient(165deg,#448fff 0%,#30c5bc 100%)}.tile-card.tile-color{background:linear-gradient(165deg,#be85ff 0%,#ff8fc7 100%)}.tiles-portrait{flex-direction:column;gap:clamp(10px,1.8vh,16px);width:85%;max-width:380px;margin:clamp(10px,2vh,24px) auto 0;display:none}.tile-row{color:var(--white);text-align:left;touch-action:manipulation;border:2px solid #fff6;border-radius:26px;align-items:center;gap:16px;padding:14px 20px;display:flex;box-shadow:0 8px 18px -2px #332a5533,inset 0 2px 3px #fff6}.tile-row:active{transform:translateY(3px)}.tile-row .card-image{flex:none;justify-content:center;align-items:center;width:58px;height:58px;display:flex}.tile-row .card-image img,.tile-row .card-image svg{object-fit:contain;filter:drop-shadow(0 4px 6px #00000026);width:100%;height:100%}.tile-row .row-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.tile-row .card-heading{font-size:var(--fs-card-heading);text-shadow:0 1px 3px #332a5533;font-weight:800}.tile-row .card-sub{font-size:var(--fs-card-sub);opacity:.92;font-weight:500}.tile-row.tile-draw{background:linear-gradient(135deg,#ff7b79,#ffa874)}.tile-row.tile-maze{background:linear-gradient(135deg,#448fff,#30c5bc)}.tile-row.tile-color{background:linear-gradient(135deg,#be85ff,#ff8fc7)}@media (orientation:portrait){.home-bg{background-image:url(/images/bg-portrait.jpg)}.tiles-landscape{display:none}.tiles-portrait{display:flex}}.toolbar{z-index:10;-webkit-backdrop-filter:blur(12px);background:#ffffffe0;border-bottom:1px solid #332a5514;align-items:center;gap:12px;padding:10px 20px;display:flex;position:relative;box-shadow:0 4px 20px #332a550d}.toolbar-divider{background:#332a551f;width:1px;height:28px;margin:0 4px}.tool-group,.action-group{align-items:center;gap:8px;display:flex}.tool-btn{width:46px;min-width:46px;height:46px;color:var(--ink);touch-action:manipulation;background:#fff;border:1px solid #332a551a;border-radius:14px;justify-content:center;align-items:center;transition:all .15s;display:inline-flex;box-shadow:0 2px 5px #332a550f}.tool-btn:hover{background:#fbfbfa;border-color:#332a5533}.tool-btn:active{transform:translateY(1px);box-shadow:0 1px 2px #332a5514}.tool-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 3px 8px #332a5540}.tool-btn.btn-home{color:var(--ink);background:#f4f6fa}.tool-btn.btn-action-surprise{color:#d946ef;background:#fdf4ff;border-color:#f5d0fe}.tool-btn.btn-action-danger{color:#ef4444;background:#fef2f2;border-color:#fecaca}.tool-btn.btn-action-pdf{color:#fff;background:#10b981;border-color:#059669}.palette{align-items:center;gap:8px;display:flex}.palette-dot{touch-action:manipulation;cursor:pointer;border:2.5px solid #fff;border-radius:50%;width:32px;height:32px;transition:transform .15s,box-shadow .15s;box-shadow:0 2px 6px #332a5526}.palette-dot.active{box-shadow:0 0 0 2.5px var(--ink), 0 3px 8px #332a5540;transform:scale(1.25)}.spacer{flex:auto}.canvas-wrap{flex:1;justify-content:center;align-items:center;min-height:0;padding:clamp(14px,2.5vh,28px) clamp(16px,2.5vw,32px);display:flex;position:relative}.paper-stack{aspect-ratio:16/9;touch-action:none;background:#fff;border:1px solid #332a5514;border-radius:20px;width:100%;max-width:100%;height:100%;max-height:100%;position:relative;overflow:hidden;box-shadow:0 8px 30px #332a5514}.paper-stack canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}@media (orientation:portrait){.paper-stack{aspect-ratio:9/16}}#colorGallery .grid-wrap{min-height:80vh;justify-content:center!important;align-items:center!important;display:flex!important}.template-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;max-width:1000px;margin:0 auto;display:grid}.tpl-card{background:var(--white);touch-action:manipulation;border-radius:24px;flex-direction:column;align-items:center;gap:8px;padding:12px;display:flex;box-shadow:0 6px 18px #332a551f}.tpl-card canvas{background:var(--paper);border-radius:16px;width:100%;height:auto}.tpl-actions{gap:8px;width:100%;display:flex}.tpl-actions button{border-radius:14px;flex:1;justify-content:center;align-items:center;padding:10px 4px;font-size:20px;display:flex}.tpl-go{background:var(--grape);color:var(--white);width:100%!important}.tpl-print{display:none!important}.maze-wrap{flex:1;justify-content:center;align-items:center;min-height:0;padding:clamp(14px,2.5vh,28px);display:flex;position:relative}.maze-stack{aspect-ratio:16/9;background:#ebf8ec;border:5px solid #fff;border-radius:36px;width:100%;max-width:1100px;height:100%;position:relative;overflow:hidden;box-shadow:0 16px 36px -6px #2d6a4f33,0 4px 12px #2d6a4f14}.maze-stack canvas{width:100%;height:100%;position:absolute;inset:0}.token{filter:drop-shadow(0 6px 8px #00000038);pointer-events:none;z-index:5;width:60px;height:60px;transition:left .12s,top .12s;position:absolute;transform:translate(-50%,-50%)}.token img{object-fit:contain;width:100%;height:100%}.maze-goal{pointer-events:none;z-index:4;filter:drop-shadow(0 6px 8px #0003);width:92px;height:92px;position:absolute;transform:translate(-50%,-50%)}.maze-goal img{object-fit:contain;width:100%;height:100%}.toolbar .tool-btn svg{display:block}.btn-home{color:#574b90}.btn-action-pdf{color:#fff!important;background:#2ed573!important;border-color:#2ed57366!important}.win-banner{backdrop-filter:blur(8px);z-index:100;background:#332a5573;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.win-banner.hidden{display:none}.win-card{background:#fff;border-radius:32px;flex-direction:column;align-items:center;gap:20px;padding:32px 48px;display:flex;box-shadow:0 20px 40px #0003}.win-trophy{font-size:56px}.win-btn-replay{color:#574b90;cursor:pointer;background:#ffc93c;border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;display:flex;box-shadow:0 6px 14px #ffc93c66}.win-banner{-webkit-backdrop-filter:blur(8px);z-index:20;background:#332a5573;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.win-card{background:#fff;border-radius:36px;flex-direction:column;align-items:center;gap:18px;max-width:90vw;padding:26px 36px;animation:.4s cubic-bezier(.34,1.56,.64,1) winPop;display:flex;box-shadow:0 24px 50px #332a554d}.win-celebration{justify-content:center;align-items:center;display:flex}.win-gif{object-fit:contain;border-radius:20px;width:min(240px,55vw);height:auto;max-height:220px}.win-btn-replay{background:var(--grass);color:#fff;touch-action:manipulation;border-radius:50%;justify-content:center;align-items:center;width:68px;height:68px;transition:transform .15s;display:flex;box-shadow:0 8px 22px #6bcb7773}.win-btn-replay:active{transform:scale(.9)}@keyframes winPop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}#toastContainer{z-index:999;pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{background:var(--ink);color:var(--white);opacity:0;border-radius:30px;padding:10px 20px;font-size:15px;font-weight:700;transition:opacity .25s,transform .25s;transform:translateY(16px);box-shadow:0 8px 20px #00000040}.toast.show{opacity:1;transform:translateY(0)}.modal-overlay{z-index:60;background:#332a5573;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.modal-overlay.show{display:flex}.modal-card{background:var(--white);text-align:center;border-radius:28px;width:100%;max-width:280px;padding:24px;box-shadow:0 16px 30px #00000040}.modal-card .em{margin-bottom:8px;font-size:56px}.modal-actions{gap:12px;margin-top:14px;display:flex}.modal-actions button{border-radius:16px;flex:1;justify-content:center;align-items:center;padding:12px 0;font-size:26px;display:flex}.modal-yes{background:var(--coral);color:var(--white)}.modal-no{background:var(--grass);color:var(--white)}@media (prefers-reduced-motion:reduce){.goal-bone-img,.goal-glow,.goal-sparkle,.win-card{animation:none!important}}.hidden{display:none!important}