.bwGame{
  --ink:#2f4658;
  --violet:#7754c7;
  --blue:#387bc8;
  --gold:#ffc75a;
  --green:#31b978;
  --red:#d64b57;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.92),transparent 18%),
    linear-gradient(180deg,#d7f0ff 0 34%,#e8d1a1 34% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(50,72,98,.24);
  isolation:isolate
}
.bwGame *{box-sizing:border-box}
.bwGame button{font:inherit}
.bwWorld{position:absolute;inset:0;pointer-events:none}
.bwCloud{position:absolute;width:130px;height:40px;border-radius:999px;background:rgba(255,255,255,.82);filter:drop-shadow(0 7px 8px rgba(66,95,117,.12));animation:bwCloud 25s linear infinite}
.bwCloud:before,.bwCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.bwCloud:before{width:60px;height:60px;right:19px;bottom:7px}
.bwCloud:after{width:45px;height:45px;left:18px;bottom:8px}
.bwCloudOne{top:73px;right:-160px}
.bwCloudTwo{top:150px;left:-150px;animation-duration:31s;animation-delay:-14s;transform:scale(.78)}
.bwBird{position:absolute;right:-70px;top:190px;font-size:34px;animation:bwBird 19s linear infinite}

.bwHeader{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:2px 3px 16px}
.bwTitleBlock{max-width:760px}
.bwKicker{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.84);font-size:12px;font-weight:900;box-shadow:0 7px 17px rgba(50,85,112,.1)}
.bwHeader h1{margin:8px 0 3px;font-size:clamp(31px,5vw,52px);line-height:1;color:#684296;text-shadow:0 3px 0 rgba(255,255,255,.72)}
.bwHeader h1 span{display:inline-block;animation:bwTitle 2.2s ease-in-out infinite}
.bwHeader p{margin:0;font-weight:800;color:#527483}
.bwSound{border:0;border-radius:999px;background:#fff;cursor:pointer;font-weight:900;padding:11px 16px;white-space:nowrap;box-shadow:0 8px 19px rgba(32,75,103,.14)}

.bwLevels{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bwLevels button{appearance:none;border:2px solid transparent;border-radius:20px;padding:11px 8px;background:rgba(255,255,255,.89);cursor:pointer;box-shadow:0 8px 18px rgba(40,78,102,.1);transition:.22s}
.bwLevels button span,.bwLevels button b,.bwLevels button small{display:block}
.bwLevels button span{font-size:26px}
.bwLevels button b{font-size:17px}
.bwLevels button small{margin-top:3px;color:#687b82;font-size:11px}
.bwLevels button:hover{transform:translateY(-3px)}
.bwLevels button.is-active{transform:translateY(-4px);border-color:var(--gold);background:#fff2bf;box-shadow:0 12px 26px rgba(221,157,24,.25)}

.bwStats{position:relative;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0}
.bwStats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:0 7px;padding:8px 10px;border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 6px 15px rgba(31,74,97,.09)}
.bwStats>div>span{grid-row:1/3;font-size:23px}
.bwStats small{font-size:10px;color:#6d777a;font-weight:900}
.bwStats b{font-size:18px}
.bwStats em{font-style:normal}

.bwWorkshop{position:relative;z-index:2;min-height:850px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#a6daf0 0 33%,#c49a62 33% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.3),inset 0 -25px 45px rgba(72,45,20,.17),0 15px 35px rgba(55,74,67,.17)}
.bwWorkshop:before{content:"";position:absolute;left:-4%;right:-4%;bottom:-90px;height:255px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#8d643a,#50331f);box-shadow:inset 0 18px 0 rgba(255,255,255,.05)}
.bwBackWall{position:absolute;left:0;right:0;top:0;height:33%;background:
  linear-gradient(rgba(67,87,102,.08) 2px,transparent 2px),
  linear-gradient(90deg,rgba(67,87,102,.08) 2px,transparent 2px),
  linear-gradient(180deg,#acdff3,#87c5df);
  background-size:42px 42px,42px 42px,auto}
.bwWindow{position:absolute;left:4%;top:32px;width:140px;height:150px;border:12px solid #3d4d58;background:linear-gradient(145deg,#d6f3ff,#7db9dc);box-shadow:0 10px 18px rgba(38,68,81,.18)}
.bwWindow:before,.bwWindow:after{content:"";position:absolute;background:#3d4d58}
.bwWindow:before{left:50%;top:0;bottom:0;width:6px}
.bwWindow:after{left:0;right:0;top:49%;height:6px}
.bwShelf{position:absolute;right:4%;top:70px;width:260px;height:85px;border-bottom:14px solid #6a4325;background:
  repeating-linear-gradient(90deg,#8b2e3c 0 22px,#d1a641 23px 42px,#395c84 43px 65px,#6f4f8b 66px 88px,#4e854c 89px 110px);
  box-shadow:0 10px 17px rgba(53,41,26,.17)}
.bwGear{position:absolute;font-size:64px;color:#5b6e79;opacity:.38;filter:drop-shadow(0 8px 7px rgba(44,55,61,.15));animation:bwGear 9s linear infinite}
.bwGearOne{right:38%;top:36px}
.bwGearTwo{right:45%;top:118px;font-size:48px;animation-direction:reverse;animation-duration:7s}

.bwMachine{position:absolute;z-index:6;right:30px;top:235px;width:180px;height:300px;filter:drop-shadow(0 18px 12px rgba(50,38,24,.24))}
.bwMachineTop{position:absolute;right:15px;top:0;width:150px;height:55px;border-radius:25px 25px 9px 9px;background:linear-gradient(145deg,#5b7387,#334654);border:7px solid #263844}
.bwMachineBody{position:absolute;right:0;top:51px;width:180px;height:205px;border-radius:17px;background:linear-gradient(90deg,#586f7e,#8ba1ac,#465c69);border:8px solid #344854}
.bwMachineBody:before{content:"";position:absolute;left:24px;right:24px;top:28px;height:80px;border-radius:14px;background:#17252d;box-shadow:inset 0 0 0 6px #516774}
.bwMachineBody:after{content:"أ ب ت";position:absolute;left:32px;right:32px;top:47px;text-align:center;color:#8df2b8;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:28px;font-weight:900;text-shadow:0 0 10px #62d594}
.bwMachineLight{position:absolute;z-index:4;right:76px;top:20px;width:27px;height:27px;border-radius:50%;background:#6cff9b;box-shadow:0 0 18px #6cff9b;animation:bwLight 1.5s ease-in-out infinite}
.bwMachinePipe{position:absolute;right:59px;bottom:0;width:62px;height:76px;border-radius:0 0 15px 15px;background:linear-gradient(90deg,#374c58,#7d929c,#354953);border:7px solid #2d414d}

.bwWorker{position:absolute;z-index:7;left:28px;top:295px;font-size:96px;filter:drop-shadow(0 14px 8px rgba(59,43,24,.22));animation:bwWorker 3s ease-in-out infinite}

.bwTaskCard{position:absolute;z-index:14;left:50%;top:32px;transform:translateX(-50%);width:310px;min-height:252px;padding:28px 18px 16px;text-align:center;border-radius:30px;background:linear-gradient(160deg,#fff,#fff0c0);border:5px solid rgba(255,255,255,.9);box-shadow:0 15px 0 rgba(94,69,42,.18),0 25px 34px rgba(53,67,61,.19)}
.bwTaskCard.is-correct{animation:bwCardCorrect .65s}
.bwTaskCard.is-wrong{animation:bwCardWrong .52s}
.bwCategory{position:absolute;top:-14px;left:50%;transform:translateX(-50%);min-width:125px;padding:6px 12px;border-radius:999px;background:#7754c7;color:#fff;font-size:10px;font-weight:1000;box-shadow:0 5px 0 #55369e}
.bwTaskCard>small{display:block;color:#866844;font-weight:900}
.bwPicture{display:flex;width:102px;height:102px;margin:7px auto;border-radius:23px;background:#fff;box-shadow:0 8px 18px rgba(59,57,45,.14);overflow:hidden;align-items:center;justify-content:center}
.bwPicture img{width:100%;height:100%;object-fit:contain}
.bwPicture span{font-size:42px}
.bwReplay{border:0;border-radius:999px;padding:7px 12px;background:#fff;color:#65428c;cursor:pointer;font-size:10px;font-weight:900;box-shadow:0 5px 0 rgba(86,62,36,.15)}
.bwPrompt{margin-top:7px;font-size:11px;font-weight:900;color:#6a5a43}
.bwWordPreview{display:block;min-height:31px;margin-top:4px;color:#7b2f3d;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:26px;letter-spacing:2px}

.bwAssembly{position:absolute;z-index:14;left:15%;right:15%;top:325px;padding:18px 14px;border-radius:25px;background:linear-gradient(145deg,#72502f,#4c301d);border:7px solid #c89854;box-shadow:0 12px 0 rgba(63,42,25,.26),0 22px 28px rgba(60,48,30,.19)}
.bwAssemblyLabel{display:flex;justify-content:space-between;gap:10px;color:#fff6d8;font-weight:900}
.bwAssemblyLabel small{color:#e5cda2;font-size:9px}
.bwSlots{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;direction:rtl;margin-top:12px}
.bwSlot{position:relative;width:66px;height:66px;border:3px dashed rgba(255,255,255,.5);border-radius:18px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:38px;font-weight:900;transition:.18s}
.bwSlot.is-filled{border-style:solid;background:linear-gradient(145deg,#fff7cc,#f3cf73);color:#713742;box-shadow:0 7px 0 rgba(71,39,23,.22)}
.bwSlot.is-fixed{cursor:default;background:linear-gradient(145deg,#d7ffd5,#75d98b);color:#22633a}
.bwSlot.is-error{animation:bwSlotError .45s;background:#f4a0a6;color:#741f29}
.bwSlot.is-next{box-shadow:0 0 0 6px rgba(255,216,91,.22)}

.bwConveyor{position:absolute;z-index:8;left:8%;right:8%;bottom:170px;height:92px;border-radius:25px;background:linear-gradient(180deg,#4b5d67,#293b45);border:8px solid #243640;box-shadow:0 17px 0 rgba(54,38,23,.22),0 24px 28px rgba(61,51,35,.18);overflow:hidden}
.bwConveyor:before,.bwConveyor:after{content:"";position:absolute;bottom:10px;width:55px;height:55px;border-radius:50%;border:8px solid #1c2b33;background:#738792}
.bwConveyor:before{left:25px}.bwConveyor:after{right:25px}
.bwConveyor span{position:relative;display:inline-block;width:18%;height:100%;border-left:5px solid rgba(255,255,255,.1);animation:bwBelt 2.3s linear infinite}

.bwBank{position:absolute;z-index:16;left:10%;right:10%;bottom:205px;display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;direction:rtl}
.bwLetter{position:relative;width:64px;height:64px;border:0;border-radius:18px;background:linear-gradient(145deg,#518ee0,#275ca9);color:#fff;cursor:pointer;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:39px;font-weight:900;box-shadow:0 8px 0 #1d477f,0 13px 17px rgba(31,51,62,.22);transition:.18s}
.bwLetter:hover{transform:translateY(-5px)}
.bwLetter.is-used{opacity:.2;pointer-events:none;transform:translateY(15px) scale(.82)}
.bwLetter.is-hint{animation:bwHintGlow .8s ease 2;background:linear-gradient(145deg,#55d47c,#218e4a)}
.bwLetter[disabled]{cursor:default}

.bwHintMeter{position:absolute;z-index:11;left:20px;top:340px;width:112px;padding:13px 8px;text-align:center;border-radius:20px;background:linear-gradient(145deg,#70451f,#4b2e18);border:5px solid #d6a04e;box-shadow:0 10px 0 rgba(69,45,23,.25),0 17px 22px rgba(70,61,31,.18);color:#fff}
.bwHintMeter span,.bwHintMeter b,.bwHintMeter small{display:block}
.bwHintMeter span{font-size:32px}
.bwHintMeter b{font-size:28px}
.bwHintMeter small{font-size:9px}
.bwMessage{position:absolute;z-index:17;left:17%;right:17%;bottom:28px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.92);color:#465d68;font-weight:900;box-shadow:0 8px 19px rgba(72,70,51,.14)}
.bwBankStatus{position:absolute;z-index:17;left:18%;right:18%;bottom:8px;text-align:center;color:#fff1ce;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(83,58,29,.5)}
.bwComboBurst{position:absolute;z-index:31;top:52%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff36e;font-size:38px;font-weight:1000;text-shadow:0 4px 0 #8a401a}

.bwProgress{height:14px;margin:13px 4px;border-radius:999px;background:#d8c69e;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.bwProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7754c7,#4284d4,#ffc957,#3fb579);transition:.35s}
.bwActions,.bwShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.bwActions button,.bwShare button,.bwEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.bwPrimary{background:linear-gradient(145deg,#7754c7,#53359e);color:#fff}
.bwSecondary{background:#fff;color:#365b68}
.bwGold{background:linear-gradient(145deg,#ffd56d,#eab442);color:#5a3b0b}
.bwShare{margin-top:11px}
.bwShare button{padding:8px 14px;background:rgba(255,255,255,.83);font-size:12px;color:#3f5d67}

.bwEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(35,48,58,.8);backdrop-filter:blur(5px)}
.bwEnd.is-visible{display:flex}
.bwEndCard{width:min(460px,100%);padding:29px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#fff0c5);box-shadow:0 28px 80px rgba(0,0,0,.35);animation:bwEndIn .38s}
.bwEndBadge{font-size:26px}
.bwCup{font-size:72px}
.bwStars{font-size:37px}
.bwEndCard h2{margin:6px;font-size:30px;color:#65418f}
.bwEndStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.bwEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.bwEndStats b,.bwEndStats small{display:block}
.bwEndStats b{font-size:21px}
.bwEndStats small{font-size:10px;color:#77766b}
.bwBest{font-weight:900;color:#9b671a}
.bwEndCard button{background:linear-gradient(145deg,#7754c7,#53359e);color:#fff}

.bwPaused .bwWorld *,.bwPaused .bwGear,.bwPaused .bwWorker,.bwPaused .bwConveyor span{animation-play-state:paused!important}
.bwPaused .bwBank,.bwPaused .bwSlots{pointer-events:none;filter:grayscale(.25)}

@keyframes bwCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes bwBird{from{transform:translateX(0)}to{transform:translateX(-125vw)}}
@keyframes bwTitle{50%{transform:rotate(6deg) scale(1.08)}}
@keyframes bwGear{to{transform:rotate(360deg)}}
@keyframes bwLight{50%{opacity:.35;box-shadow:0 0 5px #6cff9b}}
@keyframes bwWorker{50%{transform:translateY(-7px) rotate(-2deg)}}
@keyframes bwBelt{to{transform:translateX(-40px)}}
@keyframes bwCardCorrect{45%{transform:translateX(-50%) translateY(-11px) scale(1.05);filter:brightness(1.12)}}
@keyframes bwCardWrong{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
@keyframes bwSlotError{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes bwHintGlow{50%{transform:translateY(-8px) scale(1.1);box-shadow:0 0 0 8px rgba(81,218,117,.25),0 8px 0 #21693b}}
@keyframes bwEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:990px){
  .bwGame{padding:13px;border-radius:20px}
  .bwHeader p{font-size:12px}
  .bwLevels{gap:6px}
  .bwLevels button{padding:8px 4px}
  .bwLevels button small{display:none}
  .bwStats{grid-template-columns:repeat(3,1fr);gap:4px}
  .bwStats>div{display:block;text-align:center;padding:6px 2px}
  .bwStats>div>span{font-size:18px}
  .bwStats small{display:block;font-size:8px}
  .bwStats b{font-size:15px}
  .bwWorkshop{min-height:970px}
  .bwWindow{transform:scale(.75);transform-origin:left top;opacity:.55}
  .bwShelf{transform:scale(.7);transform-origin:right top;opacity:.62}
  .bwMachine{right:-26px;top:255px;transform:scale(.7);transform-origin:right top}
  .bwWorker{left:-7px;top:300px;font-size:70px;opacity:.72}
  .bwTaskCard{top:48px;width:235px}
  .bwAssembly{left:5%;right:5%;top:335px}
  .bwHintMeter{left:3px;top:545px;transform:scale(.72);transform-origin:left top}
  .bwConveyor{left:4%;right:4%;bottom:180px}
  .bwBank{left:4%;right:4%;bottom:225px}
  .bwMessage{left:5%;right:5%;bottom:27px;font-size:12px}
  .bwBankStatus{left:5%;right:5%;bottom:8px}
}
@media(max-width:600px){
  .bwHeader h1{font-size:30px}
  .bwKicker{font-size:9px}
  .bwSound{padding:9px 10px;font-size:11px}
  .bwWorkshop{min-height:1060px}
  .bwMachine,.bwWorker{opacity:.45}
  .bwTaskCard{top:55px;width:215px}
  .bwAssembly{top:340px}
  .bwAssemblyLabel{display:block;text-align:center}
  .bwAssemblyLabel small{display:block;margin-top:3px}
  .bwSlots{gap:6px}
  .bwSlot,.bwLetter{width:51px;height:51px;border-radius:14px;font-size:31px}
  .bwConveyor{bottom:184px}
  .bwBank{bottom:226px;gap:6px}
  .bwHintMeter{display:none}
  .bwEndStats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bwGame *{animation:none!important;transition:none!important}}