*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
html,body{touch-action:none}body{font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;background:radial-gradient(circle at 50% 0%,#24357a,#0b1026 70%);color:#fff;display:flex;flex-direction:column;touch-action:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;cursor:pointer}
#sky,#party{position:fixed;inset:0;pointer-events:none}
#party{z-index:50}

#start{position:fixed;inset:0;z-index:99;background:rgba(11,16,38,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px}
#start img{width:200px;border-radius:50%;background:#fff;animation:hop 1.6s infinite}
#start h1{margin:0;font-size:46px;color:#ffd23f}
#start p{margin:0;font-size:22px;opacity:.85}
#start button,.big{font-size:30px;border:0;border-radius:999px;padding:18px 44px;background:#ffd23f;color:#1d2b64;box-shadow:0 7px 0 #c99a00}
#start button:active,.big:active{transform:translateY(5px);box-shadow:0 2px 0 #c99a00}

#top{display:flex;align-items:center;gap:12px;padding:10px 16px 4px;z-index:2;position:relative}
#home{width:62px;height:62px;border-radius:50%;border:0;background:#ffd23f;font-size:32px;box-shadow:0 5px 0 #c99a00;flex:none}
#home.hide{visibility:hidden}
#bubble{flex:1;background:#fff;color:#1d2b64;border-radius:22px;padding:12px 18px;font-size:22px;min-height:54px;display:flex;align-items:center}
#fazik{width:70px;height:70px;border-radius:50%;background:#fff;flex:none}
.hop{animation:hop .5s}
@keyframes hop{30%{transform:translateY(-16px) rotate(-8deg)}60%{transform:translateY(0) rotate(6deg)}}

#stage{flex:1;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 14px 14px;min-height:0}
#stage svg{width:100%;height:100%;max-height:100%;touch-action:none}

/* menu */
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;width:100%;max-width:1100px;align-content:center}
.tile{position:relative;border:0;border-radius:28px;padding:20px 10px;color:#fff;font-size:24px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 8px 0 rgba(0,0,0,.35);min-height:150px;justify-content:center}
.tile b{font-size:64px;line-height:1}
.tile:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.tile .st{position:absolute;top:8px;right:12px;font-size:30px}
.shelf{margin-top:18px;font-size:22px;text-align:center}
.shelf span{font-size:40px;margin:0 3px;filter:grayscale(1) opacity(.3)}
.shelf span.on{filter:none;animation:pop .7s}

/* wspólne */
.bar{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.btn{border:0;border-radius:999px;padding:12px 22px;font-size:22px;background:#ffd23f;color:#1d2b64;box-shadow:0 5px 0 #c99a00}
.btn.off{background:#3a4a8a;color:#fff;box-shadow:0 5px 0 #222c57}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #c99a00}
.stars{font-size:28px;margin-bottom:6px}
@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes shake{20%,60%{transform:translateX(-14px)}40%,80%{transform:translateX(14px)}}

/* dom */
.room{cursor:pointer}
.room .dark{transition:opacity .6s}
.room.lit .dark{opacity:0;pointer-events:none}
.thing{font-size:62px;transform-box:fill-box;transform-origin:center}
.room.lit .thing{animation:pop .7s}
.thing.jump{animation:jump .6s!important}
@keyframes jump{40%{transform:translateY(-30px) scale(1.2)}}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 3.5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.cone{opacity:0;transition:opacity .6s}
.room.lit .cone{opacity:.35}

/* choinka */
.lamp{transition:fill .3s}
.lamp.on{animation:tw 1.2s infinite alternate}
@keyframes tw{from{opacity:1}to{opacity:.55}}
.drag{cursor:grab}

/* żarówki */
.bulbs{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;max-width:900px}
.bulb{width:96px;cursor:pointer}
.bulbs.simon .bulb{width:150px}
.bulb .glass{aspect-ratio:1;border-radius:50%;background:#2b3466;transition:background .12s,box-shadow .12s;border:5px solid #8ea0e0}
.bulb .base{width:46%;height:34px;margin:-5px auto 0;background:repeating-linear-gradient(#bbb 0 7px,#777 7px 12px);border-radius:0 0 12px 12px}
.bulb.on .glass{box-shadow:0 0 50px 18px var(--c);background:var(--c);border-color:#fff}

/* memory */
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:min(100%,calc((100vh - 200px) * 1.4));max-width:860px}
.card{aspect-ratio:1;perspective:800px;cursor:pointer}
.card .in{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.card.up .in{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;border-radius:22px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-size:min(9vw,11vh)}
.card .b{background:linear-gradient(135deg,#ffd23f,#ff9f1a);box-shadow:0 6px 0 #b86d00}
.card .f{background:#fff;transform:rotateY(180deg);box-shadow:0 6px 0 #9aa}
.card.ok .f{background:#d6ffe4}

/* bezpieczny */
.safe{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;max-width:760px}
.scard{background:#fff;color:#1d2b64;border-radius:32px;padding:28px 24px;width:100%;text-align:center;box-shadow:0 10px 0 rgba(0,0,0,.3)}
.scard .em{font-size:110px;line-height:1.1}
.scard .tx{font-size:28px;margin-top:12px}
.scard.shake{animation:shake .5s}
.scard.in{animation:pop .5s}
.yn{display:flex;gap:40px}
.yn button{width:150px;height:150px;border-radius:50%;border:0;font-size:80px;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.yn .y{background:#3ddc84}.yn .n{background:#ff4d4d}
.yn button:active{transform:translateY(6px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.dots{font-size:26px;letter-spacing:4px}

/* kolorowanka */
.pal{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.pal button{width:58px;height:58px;border-radius:50%;border:5px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.pal button.sel{transform:scale(1.25);border-color:#ffd23f}
.f{cursor:pointer;transition:fill .2s}

/* salon Kasi */
.sal-top{display:flex;gap:18px;align-items:center;font-size:22px;margin-bottom:6px;flex-wrap:wrap;justify-content:center}
.sal-coins{background:#ffd23f;color:#1d2b64;border-radius:999px;padding:6px 16px;font-weight:bold}
.sal-tabs .btn{font-size:19px;padding:10px 16px}
.sal-main{flex:1;min-height:0;width:100%;display:flex;gap:16px;align-items:stretch}
.sal-view{flex:1.1;min-width:0;background:radial-gradient(circle at 50% 40%,#ffe3f1,#ffb6d9);border-radius:30px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:inset 0 0 0 8px #fff}
.sal-view svg{width:100%;height:100%}
.sal-tools{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:flex-start;padding-top:4px;touch-action:pan-y}
.sal-lab{font-size:19px;opacity:.9;text-align:center}
.sal-items{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sal-it{width:66px;height:66px;border-radius:18px;border:4px solid #fff;background:#fff;font-size:34px;position:relative;box-shadow:0 4px 0 rgba(0,0,0,.3);padding:0}
.sal-it.sel{border-color:#ffd23f;transform:scale(1.12)}
.sal-it small{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#1d2b64;color:#ffd23f;font-size:13px;border-radius:999px;padding:1px 6px;white-space:nowrap}
.sal-uv{font-size:24px;padding:14px 26px;margin-top:6px}
.sal-view.uv{box-shadow:inset 0 0 0 8px #fff,inset 0 0 120px 40px #8a3cff}
.sal-view.uv svg{filter:drop-shadow(0 0 30px #b14dff)}
.sal-view.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:fl .6s forwards;pointer-events:none}
@keyframes fl{from{opacity:1}to{opacity:0}}
.sal-view.sparkle svg{filter:drop-shadow(0 0 25px #fff) brightness(1.08)}
.sal-view.wind svg{animation:wind 1.2s}
@keyframes wind{20%{transform:rotate(-2deg) translateX(-6px)}40%{transform:rotate(2deg) translateX(6px)}60%{transform:rotate(-1.5deg)}80%{transform:rotate(1deg)}}
.sal-card{background:#fff;color:#1d2b64;border-radius:22px;padding:16px 22px;font-size:21px;text-align:center;animation:pop .5s}
.sal-stars{font-size:38px}
.sal-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;width:100%}
.sal-pol{background:#fff;border-radius:10px;padding:8px 8px 4px;color:#1d2b64;text-align:center;transform:rotate(-2deg)}
.sal-pol:nth-child(even){transform:rotate(2deg)}
.sal-pol svg{width:100%;background:#ffd6ea;border-radius:6px}
@media (orientation:portrait){.sal-main{flex-direction:column}.sal-view{flex:1.3}}

/* klocki */
.kl-wrap{flex:1;min-height:0;width:100%;position:relative;border-radius:24px;overflow:hidden}
.kl-wrap canvas{position:absolute;inset:0;width:100%!important;height:100%!important;touch-action:none}
.kl-bar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px}
.kl-b{border:0;border-radius:16px;min-width:64px;height:64px;font-size:28px;background:#fff;color:#1d2b64;box-shadow:0 4px 0 rgba(0,0,0,.3);padding:0 10px}
.kl-b.sel{outline:5px solid #ffd23f;transform:scale(1.08)}
.kl-b svg{width:46px;height:36px}
.kl-c{width:48px;height:48px;border-radius:12px;border:4px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.kl-c.sel{border-color:#ffd23f;transform:scale(1.15)}
.kl-models{position:absolute;inset:0;background:rgba(11,16,38,.85);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;z-index:3}
.kl-models button{width:180px;height:160px;border:0;border-radius:26px;font-size:24px;background:#ffd23f;color:#1d2b64;box-shadow:0 6px 0 #c99a00;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.kl-models b{font-size:64px}
.kl-step{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#fff;color:#1d2b64;border-radius:999px;padding:6px 18px;font-size:22px;z-index:2}