:root{--primary:#7c3aed;--primary-dark:#5b21b6;--pink:#fb7185;--yellow:#facc15;--mint:#5eead4;--blue:#38bdf8;--green:#22c55e;--ink:#332257;--muted:#6b5f83;--paper:#fff;--soft:#fff7ed;--line:#ffffffb8;--shadow:0 18px 40px #33225722;--safe-bottom:env(safe-area-inset-bottom,0px)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;overflow-x:hidden}
body{margin:0;font-family:Arial,"Tahoma",sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 8%,#fde68a 0 100px,transparent 210px),radial-gradient(circle at 95% 12%,#bae6fd 0 90px,transparent 200px),radial-gradient(circle at 50% 100%,#fecdd3 0 130px,transparent 280px),linear-gradient(180deg,#fff7ed,#f5f3ff 55%,#ecfeff);user-select:none}
.app-shell{width:min(1120px,100%);margin:0 auto;padding:12px 14px calc(20px + var(--safe-bottom))}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding:10px;border-radius:0 0 28px 28px;background:#ffffffd9;backdrop-filter:blur(14px);box-shadow:0 8px 28px #33225714}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:18px;background:linear-gradient(135deg,var(--yellow),var(--pink));box-shadow:inset 0 0 0 3px #fff}
.brand strong{display:block;font-size:18px;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-weight:800}
.back-link,.icon-button,.back-screen,button,.mode-card{font-family:inherit;font-weight:1000;cursor:pointer}
.back-link{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:10px 14px;border-radius:18px;background:#f5f3ff;color:var(--primary-dark);text-decoration:none;border:2px solid #ede9fe}
.icon-button{width:50px;min-height:50px;border:0;border-radius:18px;background:#ede9fe;font-size:22px}
.screen{display:none;animation:popIn .18s ease}
.screen.active{display:block}

@keyframes popIn{from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}
}
.hero-card,.panel{border:3px solid var(--line);border-radius:34px;background:#ffffffd9;box-shadow:var(--shadow);padding:clamp(16px,4vw,30px)}
.hero-card{min-height:calc(100svh - 132px);display:grid;place-items:center;text-align:center;overflow:hidden}
.floating-icons{font-size:clamp(26px,7vw,54px);letter-spacing:10px;animation:float 3s ease-in-out infinite}

@keyframes float{50%{transform:translateY(-8px)}
}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#ede9fe;color:var(--primary-dark);padding:8px 14px;font-weight:1000}
.hero-card h1,.setup-card h2,.section-head h2{margin:10px 0;color:var(--primary);font-size:clamp(28px,7vw,48px);line-height:1.15}
.hero-card p,.hint,.section-head p,.feedback{color:var(--muted);font-weight:900;line-height:1.7}
.hero-actions,.game-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}
.primary-btn,.soft-btn,.danger-btn,.jump-big-btn,.answer-btn,.difficulty-btn,.avatar-btn{min-height:54px;border:0;border-radius:22px;padding:12px 18px;font-size:16px;box-shadow:0 8px 0 #33225718}
.primary-btn{background:linear-gradient(135deg,var(--primary),#ec4899);color:#fff}
.soft-btn{background:#fff;color:var(--primary-dark);border:2px solid #ede9fe}
.danger-btn{background:#fff1f2;color:#be123c;border:2px solid #fecdd3}
.big{font-size:clamp(18px,5vw,24px);min-height:64px}
.wide{width:100%;margin-top:12px}
.setup-card{max-width:680px;margin:0 auto}
.field-label{display:block;margin:14px 0 6px;font-weight:1000}
.text-input{width:100%;min-height:58px;border:3px solid #ede9fe;border-radius:22px;padding:12px 14px;background:#fff;font-size:18px;color:var(--ink);font-weight:900}
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.avatar-btn{background:#fff;font-size:32px;border:3px solid #ede9fe}
.avatar-btn.active{border-color:var(--primary);background:#f5f3ff}
.welcome-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}
.player-badge{display:flex;align-items:center;gap:12px}
.player-badge>span,.big-avatar{display:grid;place-items:center;width:76px;height:76px;border-radius:28px;background:#fff3c4;font-size:42px}
.player-badge h2{margin:0;color:var(--primary);font-size:clamp(24px,5vw,36px)}
.player-badge p{margin:4px 0 0;color:var(--muted);font-weight:900}
.progress-strip{display:grid;grid-template-columns:repeat(3,minmax(76px,1fr));gap:8px;width:min(390px,100%)}
.progress-strip div{background:#fff;border-radius:22px;padding:10px;text-align:center}
.progress-strip strong{display:block;color:var(--primary);font-size:24px}
.progress-strip span{color:var(--muted);font-weight:1000}
.mode-grid,.world-grid,.badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mode-card,.world-card,.badge-card{display:block;color:inherit;text-decoration:none;min-height:146px;border-radius:28px;background:linear-gradient(180deg,#ffffff,#fff7fb);border:2px solid var(--line);padding:14px;box-shadow:0 10px 0 #7c3aed14;text-align:center;transition:.15s}
.mode-card:hover,.world-card:hover{transform:translateY(-2px)}
.mode-card b,.world-card b,.badge-card b{display:block;font-size:40px;line-height:1}
.mode-card strong,.world-card strong,.badge-card strong{display:block;font-size:18px;margin:8px 0 5px}
.mode-card span,.world-card span,.badge-card span{display:block;color:var(--muted);font-size:13px;font-weight:900;line-height:1.5}
.section-head{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.back-screen{min-height:52px;border:0;border-radius:20px;background:#fff;color:var(--primary-dark);padding:10px 16px;box-shadow:0 8px 0 #33225712}
.difficulty-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px}
.difficulty-btn{background:#fff;color:var(--primary-dark);border:2px solid #ede9fe;white-space:nowrap}
.difficulty-btn.active{background:var(--primary);color:#fff}
.quiz-panel{margin-top:14px;text-align:center}
.quiz-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-weight:1000}
.question-card{margin:14px auto;padding:20px;min-height:120px;border-radius:28px;background:linear-gradient(135deg,#fff7ed,#ecfeff);font-size:clamp(34px,10vw,78px);font-weight:1000}
.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.answer-btn{min-height:74px;background:#fff;border:3px solid #ede9fe;color:var(--ink);font-size:clamp(18px,5vw,28px)}
.answer-btn.correct{border-color:#86efac;background:#dcfce7}
.answer-btn.wrong{border-color:#fecdd3;background:#fff1f2}
.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:14px auto}
.memory-card{aspect-ratio:1;border:0;border-radius:24px;background:linear-gradient(135deg,#7c3aed,#ec4899);color:#fff;font-size:0;box-shadow:0 9px 0 #33225718;display:grid;place-items:center}
.memory-card::before{content:"؟";font-size:34px;font-weight:1000}
.memory-card.open,.memory-card.done{background:#fff;border:3px solid #fecdd3;font-size:38px;transform:rotateY(180deg)}
.memory-card.open::before,.memory-card.done::before{content:""}
.memory-card.done{background:#dcfce7;border-color:#86efac}
.shape-card,.daily-card,.profile-card,.settings-card,.parents-card,.piano-card,.draw-card,.runner-card,.builder-card{max-width:760px;margin:0 auto;text-align:center}
.shape-target{font-size:clamp(80px,22vw,160px);line-height:1.1;padding:10px}
.draw-tools{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px}
.color-btn{width:54px;height:54px;border-radius:20px;border:4px solid #fff;box-shadow:0 7px 0 #33225718}
.color-btn.active{outline:4px solid var(--primary)}
#drawCanvas,.runner-canvas{display:block;width:100%;max-width:100%;border-radius:28px;background:#fff;border:3px solid #fff;box-shadow:inset 0 0 0 2px #ede9fe;touch-action:none}
.runner-canvas{background:linear-gradient(#bae6fd 0 58%,#86efac 58%)}
.runner-hud{display:flex;justify-content:space-between;font-weight:1000;color:var(--muted);margin-bottom:8px}
.runner-actions{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(190px,1.25fr);gap:12px;margin-top:14px}
.jump-big-btn{display:inline-flex;align-items:center;justify-content:center;min-height:68px;border:4px solid #fff;background:linear-gradient(135deg,var(--mint),var(--yellow) 58%,var(--pink));color:var(--ink);font-size:clamp(22px,5.5vw,34px);font-weight:1000}
.piano-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;min-height:260px}
.piano-key{min-height:210px;border:3px solid #fff;border-radius:24px;font-size:28px;color:#fff;text-shadow:0 2px 4px #0005}
.piano-key:nth-child(even){min-height:170px}
.daily-icon{font-size:80px}
.badge-card{opacity:.55}
.badge-card.unlocked{opacity:1;background:linear-gradient(135deg,#fff7ed,#dcfce7)}
.big-avatar{margin:0 auto 8px;width:96px;height:96px;font-size:56px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;margin:10px 0;padding:12px 14px;border-radius:22px;background:#fff;border:2px solid #ede9fe;font-weight:1000}
.switch-row input{width:30px;height:30px;accent-color:var(--primary)}
.toast-zone{position:fixed;left:12px;right:12px;bottom:calc(14px + var(--safe-bottom));z-index:99;display:grid;place-items:center;pointer-events:none}
.toast{max-width:min(520px,100%);background:var(--ink);color:#fff;border-radius:999px;padding:12px 18px;font-weight:1000;box-shadow:0 12px 28px #0004;animation:toast .3s ease}
.confetti{position:fixed;top:-20px;z-index:80;font-size:24px;animation:fall 1.3s linear forwards;pointer-events:none}

@keyframes toast{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}

@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.2}
}


@media (max-width:900px){.mode-grid,.world-grid{grid-template-columns:repeat(3,1fr)}
.badge-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:700px){.welcome-card{display:block}
.progress-strip{margin-top:12px;width:100%}
.mode-grid,.world-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:560px){.app-shell{padding-left:10px;padding-right:10px}
.topbar{gap:6px}
.brand small{display:none}
.back-link{min-height:44px;padding:9px 11px;font-size:13px;white-space:nowrap}
.brand{min-width:0}
.brand strong{font-size:14px;white-space:nowrap}
.brand-mark{width:40px;height:40px;border-radius:14px}
.icon-button{width:44px;min-height:44px}
.hero-card,.panel{border-radius:26px;padding:14px}
.hero-actions .big{width:100%}
.avatar-grid{grid-template-columns:repeat(4,1fr)}
.mode-grid,.world-grid{grid-template-columns:1fr;gap:10px}
.mode-card,.world-card{display:grid;grid-template-columns:auto 1fr;align-items:center;min-height:92px;text-align:right;padding:12px 14px;column-gap:12px}
.mode-card b,.world-card b{grid-row:1 / span 2;font-size:36px}
.mode-card strong,.world-card strong{margin:0 0 4px;font-size:17px}
.mode-card span,.world-card span{font-size:13px}
.section-head{align-items:flex-start;gap:8px}
.section-head h2{font-size:clamp(24px,7vw,34px)}
.answer-grid{grid-template-columns:1fr}
.memory-grid{gap:8px}
.memory-card{border-radius:18px}
.runner-actions{grid-template-columns:1fr;position:sticky;bottom:calc(10px + var(--safe-bottom));z-index:18;background:linear-gradient(180deg,#ffffff00,#ffffffee 24%,#ffffff);padding-top:8px;border-radius:24px}
.jump-big-btn{min-height:86px}
.piano-keys{grid-template-columns:repeat(4,1fr);min-height:auto}
.piano-key,.piano-key:nth-child(even){min-height:110px}
.color-btn{width:50px;height:50px}
.progress-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:380px){.app-shell{padding-left:8px;padding-right:8px}
.brand-mark{display:none}
.mode-card,.world-card{grid-template-columns:40px 1fr}
.mode-card b,.world-card b{font-size:32px}
.piano-keys{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
}



.builder-section-head{margin-bottom:10px}
.builder-card{
  width:min(100%,820px);
  max-width:820px;
  margin:0 auto;
  text-align:start;
  background:linear-gradient(180deg,#ffffffee,#fff7fbf2);
  border-color:#ffffffd9;
  border-radius:28px;
  padding:clamp(12px,3.5vw,22px);
  overflow:hidden;
  display:grid;
  gap:12px;
  justify-items:stretch;
  box-shadow:0 18px 44px #7c3aed18;
}
.builder-title{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:24px;
  background:linear-gradient(135deg,#f5f3ff,#ecfeff 58%,#fff7ed);
  border:2px solid #ffffffd9;
}
.builder-rawabi{
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border-radius:22px;
  background:linear-gradient(135deg,#fde68a,#fbcfe8);
  box-shadow:inset 0 0 0 4px #fff,0 8px 18px #33225714;
  font-size:36px;
}
.builder-title h3{margin:0;color:var(--primary);font-size:clamp(25px,7vw,40px);line-height:1.08;text-shadow:0 3px 0 #eadcff}
.builder-title p{margin:5px 0 0;color:var(--muted);font-size:clamp(13px,3.6vw,16px);font-weight:1000;line-height:1.55}
.builder-panel{
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:22px;
  background:#ffffffc9;
  border:2px solid #ffffffd9;
  box-shadow:0 8px 24px #3322570f;
}
.builder-panel h4{
  margin:0;
  color:var(--primary-dark);
  font-size:clamp(14px,3.6vw,17px);
  font-weight:1000;
}
.builder-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  width:100%;
}
#builderEraseBtn,
#builderBucketBtn,
#builderSoundBtn,
#builderClearBtn,
#builderSaveBtn,
.builder-size,
.builder-block,
.builder-tab,
.builder-tool{
  min-height:48px;
  border-radius:20px;
  font-family:inherit;
  font-weight:1000;
  font-size:clamp(15px,4vw,17px);
  touch-action:manipulation;
}
.builder-tool,
.builder-size{
  width:100%;
  padding:11px 12px;
  border:2px solid #eadcff;
  background:#fff;
  color:var(--ink);
  box-shadow:0 5px 0 #33225714;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  transition:transform .1s,box-shadow .1s,border-color .12s,background .12s;
}
.builder-tool:active,.builder-size:active,.builder-tab:active,.builder-block:active{transform:translateY(2px);box-shadow:0 2px 0 #33225712}
.builder-erase{border-color:#fecaca;color:#ef4444}.builder-erase[aria-pressed="true"]{background:#fff1f2;border-color:#ef4444;box-shadow:0 0 0 4px #ef444420,0 5px 0 #ef444414}
.builder-fill{border-color:#a7f3d0;color:#059669}.builder-fill[aria-pressed="true"]{background:#ecfdf5;border-color:#059669;box-shadow:0 0 0 4px #05966922,0 5px 0 #05966914}
.builder-clear{border-color:#fecdd3;color:#be123c;background:#fff1f2}
.builder-save{border-color:#c4b5fd;color:#fff;background:linear-gradient(135deg,var(--primary),#ec4899)}
.builder-tabs{
  display:flex;
  gap:8px;
  margin:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:2px 2px 8px;
  scrollbar-width:none;
  width:100%;
  max-width:100%;
}
.builder-tabs::-webkit-scrollbar{display:none}
.builder-tab{
  flex:0 0 auto;
  padding:10px 16px;
  border:2px solid #eadcff;
  background:#fff;
  color:var(--ink);
  box-shadow:0 5px 0 #33225712;
  white-space:nowrap;
  min-width:118px;
}
.builder-tab.active{color:#fff;border-color:transparent;box-shadow:0 5px 0 rgba(0,0,0,.12),0 0 0 3px rgba(255,255,255,.42) inset}
.builder-blocks-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.builder-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:76px;
  padding:9px 5px;
  border:2.5px solid #e5e7eb;
  background:linear-gradient(180deg,#fff,#fff7fb);
  color:var(--ink);
  box-shadow:0 5px 0 #33225712;
  font-size:30px;
  line-height:1;
  transition:transform .12s,border-color .12s,box-shadow .12s,background .12s;
}
.builder-block span{font-size:11px;font-weight:1000;color:var(--muted);line-height:1.15}
.builder-block.selected{border-color:var(--primary);box-shadow:0 0 0 4px #7c3aed30,0 5px 0 #7c3aed30;transform:scale(1.03);background:#f5f3ff;animation:builderSelectedPulse 1.4s ease-in-out infinite}
.builder-size-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.builder-size.active{background:#f5f3ff;border-color:var(--primary);color:var(--primary-dark);box-shadow:0 0 0 4px #7c3aed22,0 5px 0 #7c3aed20}
.builder-canvas-wrap{
  position:relative;
  width:100%;
  height:clamp(260px,45svh,420px);
  margin-inline:auto;
  border-radius:24px;
  overflow:hidden;
  border:3px solid #ffffff;
  touch-action:none;
  box-shadow:inset 0 0 0 2px rgba(124,58,237,.16),0 12px 28px #33225718;
  background:linear-gradient(180deg,#bae6fd 0 48%,#dcfce7 48% 64%,#86efac 64% 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.builder-sky{position:absolute;top:0;left:0;right:0;height:45%;background:linear-gradient(180deg,#bae6fd,#e0f7ff);pointer-events:none;overflow:hidden}.builder-sun{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:28px;animation:builderSun 8s linear infinite;filter:drop-shadow(0 0 8px #fde68a)}
@keyframes builderSun{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.15)}}
.builder-cloud{position:absolute;font-size:22px;animation:builderCloudDrift linear infinite;top:12px;opacity:.75}.builder-cloud:nth-child(2){animation-duration:12s;top:4px}.builder-cloud:nth-child(3){animation-duration:18s;top:18px;animation-delay:-6s}.builder-cloud:nth-child(4){animation-duration:14s;top:8px;animation-delay:-9s}
@keyframes builderCloudDrift{from{transform:translateX(110vw)}to{transform:translateX(-120px)}}
.builder-ground{position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(180deg,#86efac,#4ade80 50%,#22c55e);pointer-events:none}.builder-bird{position:absolute;font-size:16px;animation:builderBirdFly linear infinite;opacity:.7}.builder-bird:nth-child(5){top:14%;animation-duration:7s}.builder-bird:nth-child(6){top:22%;animation-duration:10s;animation-delay:-4s}
@keyframes builderBirdFly{from{transform:translateX(110vw)}to{transform:translateX(-60px)}}
.builder-canvas{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  image-rendering:auto;
  cursor:crosshair;
  touch-action:none;
  position:relative;
  z-index:2;
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.72);
  border-radius:18px;
  box-shadow:0 8px 22px #33225718;
}
.builder-flash{position:absolute;inset:8px;border-radius:18px;pointer-events:none;z-index:5;opacity:0;transition:opacity .06s}.builder-flash.green{background:#bbf7d0;opacity:.5;animation:builderFlashOut .35s ease forwards}.builder-flash.red{background:#fecaca;opacity:.5;animation:builderFlashOut .35s ease forwards}@keyframes builderFlashOut{to{opacity:0}}
.builder-score-pop{position:absolute;z-index:8;font-size:20px;font-weight:1000;color:var(--primary);pointer-events:none;animation:builderPopUp .9s ease forwards}@keyframes builderPopUp{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(-50px) scale(1.3);opacity:0}}
.builder-celebrate{position:absolute;inset:8px;border-radius:18px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(124,58,237,.65);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s;padding:18px}.builder-celebrate.show{opacity:1;pointer-events:auto}.builder-celebrate h3{color:#fff;font-size:clamp(20px,5vw,30px);text-align:center;line-height:1.2;margin:0}.builder-celebrate p{color:#e9d5ff;font-size:14px;font-weight:1000;text-align:center;margin:0}.builder-continue{padding:12px 28px;border-radius:999px;background:linear-gradient(135deg,#facc15,#fb7185);border:3px solid #fff;color:#fff;font-family:inherit;font-weight:1000;font-size:16px;box-shadow:0 5px 0 rgba(0,0,0,.15);transition:transform .1s}.builder-continue:active{transform:translateY(3px)}
.builder-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.builder-stats span{background:linear-gradient(135deg,#f5f3ff,#ecfeff);border:2px solid #ffffff;border-radius:20px;padding:9px 8px;font-size:14px;font-weight:1000;color:var(--primary);display:grid;place-items:center;gap:2px;min-height:70px;text-align:center;box-shadow:0 6px 18px #33225710}
.builder-stats em{font-style:normal;font-size:22px;line-height:1}.builder-stats small{font-size:11px;color:var(--muted);font-weight:1000}.builder-stats b{font-size:21px;line-height:1;color:var(--primary-dark)}
.builder-confetti{position:fixed;top:-28px;z-index:98;font-size:22px;pointer-events:none;animation:builderCfFall linear forwards}@keyframes builderCfFall{to{transform:translateY(110vh) rotate(400deg);opacity:.04}}@keyframes builderSelectedPulse{0%,100%{box-shadow:0 0 0 4px #7c3aed30,0 5px 0 #7c3aed30}50%{box-shadow:0 0 0 7px #7c3aed20,0 5px 0 #7c3aed30}}
@media (min-width:560px){
  .builder-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .builder-save{grid-column:auto}
  .builder-blocks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:760px){
  .builder-card{gap:14px;border-radius:34px}
  .builder-tools{grid-template-columns:repeat(5,minmax(0,1fr))}
  .builder-blocks-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .builder-block{min-height:86px;font-size:34px}
  .builder-title{grid-template-columns:auto 1fr;padding:16px}
  .builder-rawabi{width:76px;height:76px;border-radius:28px;font-size:44px}
}
@media (max-width:380px){
  .builder-card{padding:10px;border-radius:22px;gap:10px}
  .builder-title{grid-template-columns:1fr;text-align:center;justify-items:center}
  .builder-tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .builder-blocks-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .builder-size-grid{grid-template-columns:1fr;gap:7px}
  .builder-tab{min-width:108px;padding-inline:12px}
}

.builder-tab.active[data-world="nature"]{background:linear-gradient(135deg,#16a34a,#4ade80)}
.builder-tab.active[data-world="house"]{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.builder-tab.active[data-world="food"]{background:linear-gradient(135deg,#ea580c,#facc15)}
.builder-tab.active[data-world="animals"]{background:linear-gradient(135deg,#0ea5e9,#5eead4)}

/* Rawabi Blocks */
#screen-blocks{align-content:start}
.blocks-card{
  --blocks-gap:4px;
  --blocks-cell:clamp(31px,min(calc((100vw - 58px) / 8),calc((100svh - 370px) / 8)),50px);
  max-width:620px;
  margin:0 auto;
  text-align:center;
  display:grid;
  gap:clamp(8px,1.5svh,12px);
  overflow:hidden;
  padding:clamp(12px,2.2vw,20px);
}
.blocks-title{display:grid;gap:4px;margin:0}
.blocks-title h2{margin:0;font-size:clamp(25px,7vw,42px);line-height:1.1;background:linear-gradient(135deg,var(--primary),var(--pink),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.blocks-title p{margin:0;color:var(--muted);font-weight:1000;line-height:1.45;font-size:clamp(13px,3.5vw,16px)}
.blocks-hud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}
.blocks-hud span{display:grid;gap:2px;place-items:center;min-height:clamp(56px,9svh,68px);border-radius:20px;background:linear-gradient(135deg,#fff7fb,#ecfeff);border:2px solid #fff;box-shadow:0 8px 22px #33225712}
.blocks-hud small{font-size:clamp(11px,3vw,12px);color:var(--muted);font-weight:1000}.blocks-hud strong{font-size:clamp(22px,6.2vw,30px);line-height:1;color:var(--primary-dark)}
.blocks-help{margin:0;color:var(--muted);font-weight:1000;line-height:1.45;font-size:clamp(12px,3.2vw,15px)}
.blocks-board-wrap{position:relative;width:calc(var(--blocks-cell) * 8 + var(--blocks-gap) * 7 + 14px);max-width:100%;margin:0 auto;padding:7px;border-radius:26px;background:linear-gradient(135deg,#f5f3ff,#ecfeff);box-shadow:inset 0 0 0 3px #fff,0 14px 32px #33225718;touch-action:none;overflow:hidden}
.blocks-board{direction:ltr;display:grid;grid-template-columns:repeat(8,var(--blocks-cell));grid-template-rows:repeat(8,var(--blocks-cell));gap:var(--blocks-gap);justify-content:center;width:max-content;max-width:100%;aspect-ratio:1/1;touch-action:none}
.blocks-cell{border:0;border-radius:10px;background:#ffffffcc;box-shadow:inset 0 0 0 2px #ede9fe,0 4px 0 #3322570f;min-width:0;min-height:0;transition:transform .12s,background .12s,box-shadow .12s;position:relative}
.blocks-cell.filled{background-color:var(--block-color,#38bdf8);background-image:var(--block-image,none),linear-gradient(135deg,#ffffff55,#ffffff00 55%);background-size:cover;background-position:center;box-shadow:inset 0 0 0 3px #ffffff9c,0 5px 0 #33225718}.blocks-cell.falling{animation:blocksFallingPulse .75s ease-in-out infinite;box-shadow:inset 0 0 0 3px #fff,0 0 0 3px #facc1555,0 6px 0 #3322571a}
.blocks-cell.clear{animation:blocksClear .34s ease forwards}@keyframes blocksFallingPulse{50%{transform:translateY(1px) scale(1.03)}}@keyframes blocksClear{50%{transform:scale(1.08);background:#fde68a;box-shadow:0 0 0 7px #facc1544}100%{transform:scale(.18);opacity:.25}}
.blocks-star-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:26px}.blocks-star{position:absolute;font-size:22px;animation:blocksStar .85s ease-out forwards;filter:drop-shadow(0 3px 2px #33225724)}@keyframes blocksStar{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-130%) scale(1.35) rotate(18deg);opacity:0}}
.blocks-controls{display:grid;gap:8px;margin-top:0;width:100%}.blocks-controls-row{display:grid;gap:8px;width:100%}.blocks-move-row{grid-template-columns:repeat(4,minmax(0,1fr))}.blocks-menu-row{grid-template-columns:repeat(3,minmax(0,1fr))}.blocks-control,.blocks-back-control{min-height:56px;font-size:clamp(12px,3.1vw,15px);padding:10px 7px;border-radius:18px;white-space:normal;line-height:1.15}.blocks-feedback{min-height:30px;margin:0;font-size:clamp(13px,3.4vw,16px)}
@media (min-width:700px){.blocks-card{--blocks-cell:50px}.blocks-control,.blocks-back-control{min-height:60px}.blocks-menu-row{grid-template-columns:1fr 1fr 1.35fr}}
@media (max-width:560px){#screen-blocks{padding-inline:8px}.blocks-card{--blocks-gap:3px;border-radius:24px}.blocks-board-wrap{padding:6px;border-radius:22px;width:calc(var(--blocks-cell) * 8 + var(--blocks-gap) * 7 + 12px)}.blocks-cell{border-radius:8px}.blocks-star-layer{border-radius:22px}.blocks-controls{padding-top:2px}.blocks-hud span{min-height:56px}}
@media (max-width:390px){.blocks-card{--blocks-cell:clamp(28px,min(calc((100vw - 48px) / 8),calc((100svh - 355px) / 8)),42px);padding:10px;gap:7px}.blocks-control,.blocks-back-control{min-height:52px;font-size:12px;padding:8px 4px}.blocks-menu-row{grid-template-columns:1fr 1fr}.blocks-back-control{grid-column:1/-1}.blocks-help{line-height:1.35}}

/* Unified Rawabi Pro cleanup */
.dashboard-groups{display:grid;gap:16px;min-width:0}
.game-group{min-width:0;border:3px solid var(--line);border-radius:30px;background:#ffffffb8;box-shadow:var(--shadow);padding:clamp(12px,3vw,18px)}
.game-group h3{margin:0 0 12px;color:var(--primary-dark);font-size:clamp(20px,5vw,28px)}
.mode-grid.compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mode-grid.compact .mode-card{min-height:132px;width:100%}
.game-screen{padding-bottom:calc(10px + var(--safe-bottom))}
.game-frame{position:relative;display:grid;grid-template-areas:"back" "title" "stats" "play" "controls" "status";gap:clamp(10px,2vw,16px);width:100%;max-width:980px;margin:0 auto;overflow:hidden}
.game-back{grid-area:back;justify-self:start;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 0 #33225712}
.game-header{grid-area:title;display:grid;gap:5px;margin:0;text-align:center}
.game-header h2,.builder-title h2{margin:0;color:var(--primary);font-size:clamp(28px,7vw,44px);line-height:1.12}
.game-header p{margin:0;color:var(--muted);font-weight:1000;line-height:1.55}
.game-stats,.quiz-meta,.runner-hud,.builder-stats{grid-area:stats;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;width:100%}
.game-stats>span,.quiz-meta>span,.runner-hud>span,.builder-stats>span{display:grid;place-items:center;min-height:54px;border-radius:20px;background:#fff;border:2px solid #ede9fe;color:var(--primary-dark);font-weight:1000;text-align:center;padding:8px}
.game-play{grid-area:play;min-width:0;width:100%;overflow:hidden}
.game-controls{grid-area:controls;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:100%}
.feedback{grid-area:status;min-height:32px;margin:0;text-align:center}
.quiz-panel{display:grid;gap:12px;margin-top:12px;padding:clamp(12px,3vw,18px);border-radius:26px;background:#fff;border:2px solid #ede9fe}
.draw-card #drawCanvas,.runner-canvas{display:block;width:100%;max-width:100%;height:auto;border-radius:24px}
.draw-tools{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.piano-keys,.answer-grid,.world-grid,.memory-grid{min-width:0;max-width:100%}
.builder-card .builder-title{grid-template-columns:auto 1fr;text-align:start;align-items:center}
.builder-card .builder-panel{min-width:0;overflow:hidden}
.builder-card .builder-world-panel,.builder-card .builder-block-panel,.builder-card .builder-size-panel{grid-area:auto}
.builder-canvas-wrap.game-play{overflow:hidden;width:100%;max-width:100%}
.blocks-card.game-frame{max-width:620px}
.blocks-hud{grid-area:stats}
.blocks-controls.game-controls{display:grid}
@media (max-width:760px){
  .app-shell{padding-inline:10px;max-width:100%;overflow:hidden}
  .topbar{gap:6px;padding:8px;border-radius:0 0 22px 22px}
  .back-link span,.brand small{display:none}
  .brand-mark{width:42px;height:42px;border-radius:16px}
  .icon-button{width:44px;min-height:44px;border-radius:16px}
  .welcome-card{display:grid;text-align:center;justify-items:center}
  .player-badge{display:grid;justify-items:center}
  .progress-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mode-grid,.world-grid,.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mode-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mode-card,.world-card,.badge-card{min-height:126px;padding:11px;border-radius:24px}
  .game-frame{border-radius:26px;padding:12px}
  .game-controls>*{flex:1 1 140px;min-width:0}
  .memory-grid{gap:7px}
}
@media (max-width:420px){
  .mode-grid,.world-grid,.badge-grid,.mode-grid.compact{grid-template-columns:1fr}
  .progress-strip strong{font-size:20px}
  .game-stats,.quiz-meta,.runner-hud,.builder-stats{grid-template-columns:1fr}
  .blocks-hud{grid-template-columns:repeat(3,minmax(0,1fr))}
  .question-card{font-size:clamp(42px,18vw,78px)}
}
.builder-play{display:grid;gap:12px;overflow:hidden}
.builder-play .builder-canvas-wrap{width:100%;max-width:100%;overflow:hidden}