:root{--pink: #ec4899;--pink-dark: #be2c73;--violet: #8b5cf6;--violet-dark: #6d3fd4;--amber: #f59e0b;--amber-dark: #b97309;--mint: #0ea5a5;--bg: #fdf2f8;--card: #ffffff;--ink: #0f172a;--ink-soft: #6b5a72;--line: #fce9f2;--danger: #dc2626;--shadow-clay: 0 10px 0 rgba(236, 72, 153, .13), 0 18px 34px -14px rgba(15, 23, 42, .28), inset 0 -7px 14px rgba(236, 72, 153, .1), inset 0 7px 14px #ffffff;--shadow-soft: 0 8px 20px -10px rgba(15, 23, 42, .35);--radius: 26px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;font-family:Tajawal,Segoe UI,system-ui,sans-serif;color:var(--ink);background:var(--bg);overscroll-behavior:none;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none}h1,h2,h3,h4{font-family:"Baloo Bhaijaan 2",Tajawal,sans-serif;margin:0;line-height:1.15;font-weight:800}.app{position:relative;min-height:100dvh;display:flex;justify-content:center;background:radial-gradient(1000px 520px at 82% -8%,#ffe0f0 0%,transparent 62%),radial-gradient(760px 460px at 8% 8%,#ede4ff 0%,transparent 60%),radial-gradient(900px 620px at 50% 108%,#fff0d6 0%,transparent 62%),var(--bg);overflow:hidden}.screen{position:relative;z-index:1;width:100%;max-width:480px;padding:max(14px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.blob{position:fixed;border-radius:50%;filter:blur(2px);opacity:.55;pointer-events:none;animation:floaty 9s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.06)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:"Baloo Bhaijaan 2",Tajawal,sans-serif;font-weight:700;font-size:1.06rem;padding:15px 22px;border-radius:20px;color:#fff;background:linear-gradient(180deg,#f472b6,var(--pink));box-shadow:0 7px 0 var(--pink-dark),0 16px 24px -12px #be2c73b3,inset 0 4px 10px #ffffff73;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;-webkit-user-select:none;user-select:none}.btn:hover{transform:translateY(-2px);filter:saturate(1.08)}.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--pink-dark),0 6px 14px -10px #be2c73b3,inset 0 4px 10px #ffffff4d}.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}.btn--violet{background:linear-gradient(180deg,#a78bfa,var(--violet));box-shadow:0 7px 0 var(--violet-dark),0 16px 24px -12px #6d3fd4a6,inset 0 4px 10px #fff6}.btn--violet:active{box-shadow:0 2px 0 var(--violet-dark),inset 0 4px 10px #ffffff4d}.btn--amber{background:linear-gradient(180deg,#fbbf24,var(--amber));box-shadow:0 7px 0 var(--amber-dark),0 16px 24px -12px #b9730999,inset 0 4px 10px #ffffff73;color:#40270a}.btn--amber:active{box-shadow:0 2px 0 var(--amber-dark),inset 0 4px 10px #ffffff4d}.btn--ghost{background:#fff;color:var(--ink);box-shadow:0 6px #f3dbe9,0 14px 22px -14px #0f172a66,inset 0 4px 10px #fff}.btn--ghost:active{box-shadow:0 2px #f3dbe9,inset 0 4px 10px #fff}.btn--sm{font-size:.95rem;padding:10px 16px;border-radius:16px;box-shadow:0 5px 0 var(--pink-dark),0 12px 18px -14px #be2c73b3}.btn--block{width:100%}.home{display:flex;flex-direction:column;gap:18px;flex:1}.home__badge{align-self:center;display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:7px 15px;font-weight:700;font-size:.86rem;color:var(--pink-dark);box-shadow:var(--shadow-soft),inset 0 0 0 2px var(--line)}.home__title{text-align:center;font-size:clamp(2.5rem,12vw,3.4rem);letter-spacing:-.5px;background:linear-gradient(160deg,#f472b6 0%,var(--pink) 42%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(255,255,255,.9))}.home__sub{text-align:center;color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin:0}.tower-art{position:relative;height:190px;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:5px;padding-bottom:12px}.tower-art__row{height:27px;border-radius:9px;background:linear-gradient(180deg,#ffffffb3,#ffffff0d),var(--c);box-shadow:0 6px #0f172a1f,inset 0 4px 8px #ffffff8c;animation:popIn .52s cubic-bezier(.34,1.56,.64,1) backwards}@keyframes popIn{0%{transform:translateY(-26px) scaleY(.6);opacity:0}to{transform:none;opacity:1}}.tower-art__ball{position:absolute;top:6px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,var(--amber) 62%,var(--amber-dark));box-shadow:0 8px 14px -6px #b97309cc;animation:bounceBall 2.4s ease-in-out infinite}@keyframes bounceBall{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:#fff;border-radius:20px;padding:12px 14px;box-shadow:var(--shadow-soft),inset 0 0 0 2px var(--line);display:flex;align-items:center;gap:10px}.stat__icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#fdf2f8;color:var(--pink);flex:0 0 auto}.stat__label{font-size:.78rem;color:var(--ink-soft);font-weight:700}.stat__value{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:1.15rem}.home__actions{display:flex;flex-direction:column;gap:11px;margin-top:auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px}.topbar__title{font-size:1.5rem}.icon-btn{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 5px #f3dbe9,0 10px 18px -12px #0f172a80;transition:transform .15s ease,box-shadow .15s ease}.icon-btn:hover{transform:translateY(-2px)}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px #f3dbe9}.icon-btn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}.world{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-soft),inset 0 0 0 2px var(--line)}.world__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}.world__dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}.world__name{font-size:1.06rem}.world__tag{font-size:.76rem;color:var(--ink-soft);font-weight:500}.grid-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.tile{position:relative;aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:1.05rem;color:#fff;background:linear-gradient(180deg,#f9a8d4,var(--pink));box-shadow:0 5px #be2c738c,0 10px 14px -10px #0f172a99;transition:transform .15s ease}.tile:hover{transform:translateY(-2px)}.tile:active{transform:translateY(3px)}.tile:focus-visible{outline:3px solid var(--violet);outline-offset:2px}.tile--locked{background:#f4ecf3;color:#b8a7bb;box-shadow:inset 0 0 0 2px #efe4ee,0 4px #e8dde8;cursor:not-allowed}.tile--locked:hover,.tile--locked:active{transform:none}.tile--done{background:linear-gradient(180deg,#b39dfb,var(--violet));box-shadow:0 5px #6d3fd48c,0 10px 14px -10px #0f172a99}.tile__stars{display:flex;gap:1px;margin-top:-2px}.play{display:flex;flex-direction:column;gap:10px;height:100dvh;padding-top:max(12px,env(safe-area-inset-top))}.hud{display:flex;align-items:center;gap:8px}.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:8px 14px;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.95rem;box-shadow:var(--shadow-soft),inset 0 0 0 2px var(--line);color:var(--ink)}.hearts{display:flex;gap:3px}.heart{color:var(--pink);transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s}.heart--lost{color:#e7d8e4;transform:scale(.82)}.progress{height:14px;border-radius:999px;background:#fff;box-shadow:inset 0 2px 5px #be2c7324,0 0 0 2px var(--line);overflow:hidden;position:relative}.progress__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--amber),var(--pink),var(--violet));background-size:200% 100%;transition:width .3s cubic-bezier(.34,1.4,.64,1);animation:slideGradient 2.6s linear infinite}@keyframes slideGradient{to{background-position:200% 0}}.progress__label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:700;color:var(--ink-soft)}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}.canvas-wrap{position:relative;border-radius:30px;overflow:hidden;box-shadow:0 18px 0 -6px #ec489929,0 26px 44px -18px #0f172a73,0 0 0 4px #fff;background:#fff}canvas{display:block;touch-action:none}.hint{position:absolute;inset-inline:0;bottom:14px;text-align:center;font-weight:700;font-size:.86rem;color:#0f172a8c;background:#ffffffd1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:7px 12px;border-radius:999px;width:fit-content;margin:0 auto;animation:pulseHint 1.8s ease-in-out infinite;pointer-events:none}@keyframes pulseHint{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.05);opacity:1}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:20px;background:#260c226b;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:370px;background:#fff;border-radius:30px;padding:24px 22px 20px;text-align:center;box-shadow:0 24px 0 -10px #ec489933,0 40px 60px -24px #0f172a99;animation:popUp .34s cubic-bezier(.34,1.56,.64,1)}@keyframes popUp{0%{transform:translateY(28px) scale(.9);opacity:0}to{transform:none;opacity:1}}.modal__icon{width:72px;height:72px;margin:0 auto 12px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(160deg,#fde68a,var(--amber));color:#7c4a03;box-shadow:0 8px #c98b12,inset 0 5px 10px #ffffff80;animation:trophy 1.6s ease-in-out infinite}.modal__icon--bad{background:linear-gradient(160deg,#fecaca,#f87171);color:#7f1d1d;box-shadow:0 8px #b91c1c,inset 0 5px 10px #fff6}@keyframes trophy{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg) scale(1.05)}}.modal h2{font-size:1.7rem;margin-bottom:6px}.modal p{margin:0 0 14px;color:var(--ink-soft);font-size:.98rem;line-height:1.6}.modal__stars{display:flex;justify-content:center;gap:8px;margin:4px 0 16px}.modal__stars .star{animation:starPop .5s cubic-bezier(.34,1.56,.64,1) backwards}@keyframes starPop{0%{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}.modal__actions{display:flex;flex-direction:column;gap:10px}.modal__row{display:flex;gap:10px}.modal__row>*{flex:1}.scoreline{display:flex;justify-content:space-between;gap:8px;background:#fdf2f8;border-radius:16px;padding:10px 14px;margin-bottom:16px;font-weight:700;font-size:.9rem}.scoreline span{color:var(--ink-soft);font-weight:500}.howto{text-align:right;display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.howto__item{display:flex;gap:11px;align-items:flex-start}.howto__num{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#fdf2f8;color:var(--pink);font-weight:800;font-family:"Baloo Bhaijaan 2",sans-serif}.howto__item p{margin:0;font-size:.93rem;line-height:1.55;color:var(--ink)}.howto__item strong{color:var(--pink-dark)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media (max-height: 640px){.tower-art{height:130px}.home__title{font-size:2.2rem}.home__sub{font-size:.92rem}}@media (min-width: 560px){.screen{max-width:460px}.btn{font-size:1.1rem}}.canvas-wrap canvas{width:100%;height:100%}.modal{position:relative}