.blGame{
  --ink:#3f3a2d;
  --honey:#ffc83d;
  --honey-dark:#d99613;
  --green:#42b86f;
  --green-dark:#267e4d;
  --pink:#ff7192;
  --purple:#8468df;
  --sky:#bdeaff;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 16% 7%,rgba(255,255,255,.95),transparent 17%),
    linear-gradient(180deg,#bdeaff 0 33%,#eaf8c9 33% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(40,97,111,.23);
  isolation:isolate
}
.blGame *{box-sizing:border-box}
.blGame button{font:inherit}
.blSky,.blPollen{position:absolute;inset:0;pointer-events:none}
.blSun{position:absolute;left:6%;top:45px;font-size:68px;filter:drop-shadow(0 9px 12px rgba(255,184,33,.28));animation:blSun 5s ease-in-out infinite}
.blCloud{position:absolute;width:125px;height:38px;border-radius:999px;background:rgba(255,255,255,.82);filter:drop-shadow(0 7px 8px rgba(50,115,142,.12));animation:blCloud 20s linear infinite}
.blCloud:before,.blCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.blCloud:before{width:58px;height:58px;right:20px;bottom:7px}
.blCloud:after{width:43px;height:43px;left:20px;bottom:8px}
.blCloudOne{top:70px;right:-150px}
.blCloudTwo{top:155px;left:-140px;animation-duration:27s;animation-delay:-12s;transform:scale(.78)}
.blCloudThree{top:26px;right:42%;animation-duration:32s;animation-delay:-19s;transform:scale(.55)}
.blButterfly{position:absolute;font-size:27px;animation:blButterfly 11s ease-in-out infinite}
.blButterflyOne{right:12%;top:190px}
.blButterflyTwo{left:15%;top:225px;animation-delay:-5s}
.blPollen i{position:absolute;width:7px;height:7px;border-radius:50%;background:#ffe772;box-shadow:0 0 10px #fff6a7;animation:blPollen 5s linear infinite}
.blPollen i:nth-child(1){right:8%;top:34%}
.blPollen i:nth-child(2){right:24%;top:51%;animation-delay:-2s}
.blPollen i:nth-child(3){right:45%;top:40%;animation-delay:-4s}
.blPollen i:nth-child(4){left:13%;top:45%;animation-delay:-1s}
.blPollen i:nth-child(5){left:28%;top:60%;animation-delay:-3s}
.blPollen i:nth-child(6){left:44%;top:30%;animation-delay:-4.5s}
.blPollen i:nth-child(7){right:61%;top:67%;animation-delay:-2.8s}
.blPollen i:nth-child(8){left:7%;top:72%;animation-delay:-.8s}

.blHeader{position:relative;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:2px 3px 16px}
.blTitleBlock{max-width:730px}
.blKicker{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(38,95,120,.1)}
.blHeader h1{margin:8px 0 3px;font-size:clamp(31px,5vw,52px);line-height:1;color:#79551b;text-shadow:0 3px 0 rgba(255,255,255,.72)}
.blHeader h1 span{display:inline-block;animation:blTitleBee 1.9s ease-in-out infinite}
.blHeader p{margin:0;font-weight:800;color:#477481}
.blSound,.blReplay{border:0;border-radius:999px;background:#fff;cursor:pointer;font-weight:900;box-shadow:0 8px 19px rgba(28,74,92,.16)}
.blSound{padding:11px 16px;white-space:nowrap}

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

.blStats{position:relative;z-index:4;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}
.blStats>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(33,82,98,.1)}
.blStats>div>span{grid-row:1/3;font-size:23px}
.blStats small{font-size:10px;color:#6d777a;font-weight:900}
.blStats b{font-size:19px}
.blStats em{font-style:normal}

.blMeadow{position:relative;z-index:2;min-height:675px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#95dcff 0 45%,#91db67 45% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.34),inset 0 -25px 45px rgba(52,103,30,.14),0 15px 35px rgba(36,100,73,.16)}
.blMeadow:before{content:"";position:absolute;left:-5%;right:-5%;bottom:-100px;height:300px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#70ca51,#3ca34e);box-shadow:inset 0 17px 0 rgba(255,255,255,.1)}
.blFarHills:before,.blFarHills:after{content:"";position:absolute;bottom:225px;width:520px;height:240px;border-radius:50% 50% 0 0}
.blFarHills:before{right:-170px;background:#68bb54;transform:rotate(7deg)}
.blFarHills:after{left:-185px;background:#59af4e;transform:rotate(-7deg)}
.blGrass{position:absolute;z-index:2;left:0;right:0;bottom:0;height:95px;background:repeating-linear-gradient(74deg,transparent 0 17px,rgba(27,117,57,.35) 18px 21px,transparent 22px 34px)}

.blHiveArea{position:absolute;z-index:5;right:22px;top:32px;width:145px;text-align:center}
.blBranch{position:absolute;right:-40px;top:8px;width:180px;height:19px;border-radius:20px;background:linear-gradient(90deg,#784623,#a96c3c,#68401f);transform:rotate(-7deg);box-shadow:0 8px 13px rgba(63,66,38,.2)}
.blHive{position:relative;width:91px;height:108px;margin:18px auto 5px;border-radius:47% 47% 39% 39%;background:repeating-linear-gradient(180deg,#ffdb54 0 18px,#eeb42c 19px 24px);box-shadow:inset 9px 0 rgba(255,255,255,.16),0 13px 18px rgba(90,80,25,.2);animation:blHive 4s ease-in-out infinite}
.blHiveTop{position:absolute;top:-15px;left:21px;width:50px;height:24px;border-radius:50%;background:#f1bd37}
.blHiveDoor{position:absolute;left:34px;bottom:15px;width:25px;height:31px;border-radius:50% 50% 42% 42%;background:#6f481a;box-shadow:inset 0 5px #432c11}
.blHoneyDrop{position:absolute;right:-18px;bottom:8px;font-size:27px;animation:blHoneyDrop 2.3s ease-in-out infinite}
.blHoneyMeter{height:12px;border-radius:999px;background:rgba(80,76,29,.28);overflow:hidden;box-shadow:inset 0 2px 4px rgba(50,47,13,.22)}
.blHoneyMeter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f2a816,#ffe772);transition:.45s}
.blHiveArea small{display:block;margin-top:4px;color:#4c633f;font-size:9px;font-weight:900}

.blBee{position:absolute;z-index:18;left:50%;top:103px;width:76px;height:64px;transform:translate(-50%,0);transition:transform .7s cubic-bezier(.22,.8,.25,1),filter .25s;pointer-events:none;filter:drop-shadow(0 12px 10px rgba(64,75,37,.24))}
.blBeeBody{position:relative;z-index:2;display:block;font-size:55px;animation:blBeeHover 1.1s ease-in-out infinite alternate}
.blBeeWings{position:absolute;z-index:1;left:1px;top:-12px;color:rgba(255,255,255,.9);font-size:64px;line-height:1;animation:blWings .16s linear infinite}
.blBeeTrail{position:absolute;right:57px;top:32px;width:82px;height:35px;border-top:3px dashed rgba(255,248,151,.8);border-radius:50%;opacity:.78}
.blBee.is-wrong{animation:blBeeWrong .45s}
.blBee.is-happy{filter:drop-shadow(0 0 17px #fff177) drop-shadow(0 12px 10px rgba(64,75,37,.24))}

.blMissionCard{position:absolute;z-index:9;top:70px;left:50%;transform:translateX(-50%);width:245px;min-height:245px;padding:24px 16px 15px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#fff7ce);border:5px solid rgba(255,255,255,.88);box-shadow:0 17px 0 rgba(101,115,44,.21),0 26px 34px rgba(36,83,62,.2);transition:.28s}
.blMissionCard.is-correct{animation:blCardCorrect .65s}
.blMissionCard.is-wrong{animation:blCardWrong .5s}
.blLevelTitle{position:absolute;top:-15px;left:50%;transform:translateX(-50%);min-width:139px;padding:6px 12px;border-radius:999px;background:#ffc83d;color:#6a4710;font-size:11px;font-weight:1000;box-shadow:0 5px 0 #d69e20}
.blMediaFrame{width:113px;height:113px;margin:3px auto 7px;display:flex;align-items:center;justify-content:center;border-radius:27px;background:linear-gradient(145deg,#ebfaff,#fff);box-shadow:inset 0 0 0 3px #d2eef9}
.blMediaFrame img{width:98px;height:98px;object-fit:contain}
.blImageFallback{display:none;font-size:57px}
.blWord{font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:35px;line-height:1.08;font-weight:900;color:#714b27;min-height:38px}
.blCategory{margin-top:3px;color:#788481;font-size:10px;font-weight:900}
.blReplay{padding:7px 12px;margin-top:8px;font-size:11px}

.blQuestion{position:absolute;z-index:8;left:19%;right:19%;top:338px;min-height:45px;padding:10px 14px;text-align:center;border-radius:18px;background:rgba(255,255,255,.9);color:#47614d;font-weight:900;box-shadow:0 8px 18px rgba(47,91,66,.14)}
.blFlowers{position:absolute;z-index:10;left:7%;right:7%;bottom:83px;display:grid;grid-template-columns:repeat(6,minmax(76px,1fr));gap:12px;align-items:end}
.blFlower{position:relative;min-height:138px;border:0;background:transparent;cursor:pointer;padding:0;color:#fff;transition:.2s}
.blFlowerStem{position:absolute;left:50%;bottom:0;width:10px;height:77px;border-radius:10px;background:linear-gradient(90deg,#207c46,#55be66,#207c46);transform:translateX(-50%);box-shadow:0 6px 7px rgba(34,92,45,.16)}
.blFlowerLeaf{position:absolute;left:50%;bottom:36px;width:38px;height:20px;border-radius:90% 10% 90% 10%;background:#43a95c;transform:translateX(-4px) rotate(-19deg)}
.blFlowerLeaf:after{content:"";position:absolute;right:29px;top:11px;width:35px;height:19px;border-radius:10% 90% 10% 90%;background:#37a153;transform:rotate(42deg)}
.blFlowerHead{position:absolute;z-index:3;left:50%;top:0;width:94px;height:94px;transform:translateX(-50%);transition:.2s}
.blPetal{position:absolute;left:31px;top:1px;width:33px;height:48px;border-radius:65% 65% 48% 48%;background:var(--petal,#ff7d9f);transform-origin:50% 46px;box-shadow:inset 4px 5px rgba(255,255,255,.2),0 5px 8px rgba(74,54,48,.12)}
.blPetal:nth-child(1){transform:rotate(0deg)}
.blPetal:nth-child(2){transform:rotate(60deg)}
.blPetal:nth-child(3){transform:rotate(120deg)}
.blPetal:nth-child(4){transform:rotate(180deg)}
.blPetal:nth-child(5){transform:rotate(240deg)}
.blPetal:nth-child(6){transform:rotate(300deg)}
.blFlowerLetter{position:absolute;z-index:4;left:50%;top:29px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:50%;background:linear-gradient(145deg,#ffe77f,#f3b62c);color:#634310;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:30px;font-weight:900;line-height:1;box-shadow:inset 0 0 0 3px rgba(255,255,255,.4),0 4px 7px rgba(95,67,22,.18)}
.blFlower:hover .blFlowerHead{transform:translateX(-50%) translateY(-8px) rotate(4deg) scale(1.05)}
.blFlower[disabled]{cursor:default;opacity:.68}
.blFlower.is-correct .blFlowerHead{animation:blFlowerCorrect .7s}
.blFlower.is-correct .blFlowerLetter{background:linear-gradient(145deg,#e9ff9c,#64d572);box-shadow:0 0 20px #fff690}
.blFlower.is-wrong .blFlowerHead{animation:blFlowerWrong .55s;filter:grayscale(.35)}
.blFlower:nth-child(6n+1){--petal:#ff7899}
.blFlower:nth-child(6n+2){--petal:#8b77e8}
.blFlower:nth-child(6n+3){--petal:#ff9f54}
.blFlower:nth-child(6n+4){--petal:#55bde4}
.blFlower:nth-child(6n+5){--petal:#f66fd1}
.blFlower:nth-child(6n+6){--petal:#f3cd4c}

.blMessage{position:absolute;z-index:12;left:17%;right:17%;bottom:24px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.9);color:#45604c;font-weight:900;box-shadow:0 8px 19px rgba(46,90,72,.14)}
.blBankStatus{position:absolute;z-index:12;left:18%;right:18%;bottom:7px;text-align:center;color:#eaffdf;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(33,83,43,.5)}
.blCombo{position:absolute;z-index:25;top:48%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff569;font-size:38px;font-weight:1000;text-shadow:0 4px 0 #997017}

.blHoneycomb{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:14px 4px 13px}
.blHoneyCell{width:27px;height:31px;display:flex;align-items:center;justify-content:center;background:#e4d3a6;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);font-size:14px;transition:.3s;filter:drop-shadow(0 4px 3px rgba(78,59,23,.15))}
.blHoneyCell.is-filled{background:linear-gradient(145deg,#ffe770,#f0a914);transform:scale(1.1);animation:blCellFill .45s}

.blControls,.blShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.blControls button,.blShare button,.blEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.blPrimary{background:linear-gradient(145deg,#ffd653,#efa71e);color:#593b0d}
.blSecondary{background:#fff;color:#365b68}
.blShare{margin-top:11px}
.blShare button{padding:8px 14px;background:rgba(255,255,255,.8);font-size:12px;color:#3f5d67}

.blEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(36,56,54,.77);backdrop-filter:blur(5px)}
.blEnd.is-visible{display:flex}
.blEndCard{width:min(460px,100%);padding:29px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#fff3bd);box-shadow:0 28px 80px rgba(0,0,0,.35);animation:blEndIn .38s}
.blEndHive{font-size:26px}
.blCup{font-size:72px}
.blStars{font-size:37px}
.blEndCard h2{margin:6px;font-size:30px;color:#71501f}
.blEndStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.blEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.blEndStats b,.blEndStats small{display:block}
.blEndStats b{font-size:21px}
.blEndStats small{font-size:10px;color:#77766b}
.blBest{font-weight:900;color:#a26f18}
.blEndCard button{background:linear-gradient(145deg,#ffd653,#eba61e);color:#57390c}

.blPaused .blSky *,.blPaused .blPollen i,.blPaused .blBeeBody,.blPaused .blBeeWings,.blPaused .blHive,.blPaused .blHoneyDrop{animation-play-state:paused!important}
.blPaused .blFlowers{pointer-events:none;filter:grayscale(.25)}

@keyframes blSun{50%{transform:translateY(8px) rotate(6deg)}}
@keyframes blCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes blButterfly{25%{transform:translate(35px,-18px) rotate(12deg)}50%{transform:translate(70px,5px) rotate(-7deg)}75%{transform:translate(25px,22px) rotate(8deg)}}
@keyframes blPollen{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-120px) translateX(35px);opacity:0}}
@keyframes blTitleBee{50%{transform:translateY(-7px) rotate(9deg)}}
@keyframes blHive{50%{transform:rotate(2deg) translateY(4px)}}
@keyframes blHoneyDrop{50%{transform:translateY(7px) rotate(7deg)}}
@keyframes blBeeHover{to{transform:translateY(-10px) rotate(7deg)}}
@keyframes blWings{50%{transform:scaleX(.65) rotate(10deg)}}
@keyframes blBeeWrong{20%,60%{margin-left:-9px}40%,80%{margin-left:9px}}
@keyframes blCardCorrect{45%{transform:translateX(-50%) translateY(-12px) scale(1.055);filter:brightness(1.12)}}
@keyframes blCardWrong{20%,60%{transform:translateX(calc(-50% - 9px))}40%,80%{transform:translateX(calc(-50% + 9px))}}
@keyframes blFlowerCorrect{45%{transform:translateX(-50%) translateY(-13px) rotate(10deg) scale(1.12);filter:brightness(1.18)}}
@keyframes blFlowerWrong{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
@keyframes blCellFill{50%{transform:scale(1.3) rotate(8deg)}}
@keyframes blEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:900px){
  .blGame{padding:13px;border-radius:20px}
  .blHeader{align-items:flex-start}
  .blHeader p{font-size:12px}
  .blLevels{gap:6px}
  .blLevels button{padding:8px 4px}
  .blLevels button small{display:none}
  .blStats{gap:4px}
  .blStats>div{display:block;text-align:center;padding:6px 2px}
  .blStats>div>span{font-size:18px}
  .blStats small{display:block;font-size:8px}
  .blStats b{font-size:15px}
  .blMeadow{min-height:740px}
  .blHiveArea{right:5px;top:28px;transform:scale(.72);transform-origin:right top}
  .blMissionCard{top:74px;width:220px;min-height:235px}
  .blMediaFrame{width:103px;height:103px}
  .blMediaFrame img{width:90px;height:90px}
  .blQuestion{top:326px;left:8%;right:8%;font-size:12px}
  .blFlowers{left:5%;right:5%;bottom:93px;grid-template-columns:repeat(3,1fr);gap:4px 11px}
  .blFlower{min-height:112px}
  .blFlowerHead{transform:translateX(-50%) scale(.78);transform-origin:center bottom}
  .blFlower:hover .blFlowerHead{transform:translateX(-50%) translateY(-5px) scale(.84)}
  .blFlowerStem{height:59px}
  .blFlowerLeaf{bottom:24px}
  .blMessage{left:6%;right:6%;bottom:25px;font-size:12px}
  .blBankStatus{left:6%;right:6%;bottom:8px}
}
@media(max-width:540px){
  .blHeader h1{font-size:31px}
  .blKicker{font-size:9px}
  .blSound{padding:9px 10px;font-size:11px}
  .blMeadow{min-height:790px}
  .blMissionCard{top:80px;width:198px}
  .blHiveArea{opacity:.75;transform:scale(.58)}
  .blBee{top:116px}
  .blQuestion{top:329px}
  .blFlowers{bottom:95px}
  .blFlower{min-height:119px}
  .blHoneyCell{width:23px;height:27px;font-size:11px}
  .blEndStats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .blGame *{animation:none!important;transition:none!important}
}


/* Native V4 review patch */
.blLevels button{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
}
.blControls button:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
@media(max-width:520px){
  .blGame{padding:13px;border-radius:23px}
  .blHeader{align-items:center}
  .blSound{padding:9px 11px;font-size:12px}
}