.wgGame{
  --ink:#3b2448;
  --gold:#ffd166;
  --cream:#fff8e8;
  --purple:#6d28d9;
  --green:#22a960;
  --red:#d94b59;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 7%,rgba(255,255,255,.94),transparent 18%),
    linear-gradient(180deg,#342064 0 29%,#f5edff 29% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(45,28,75,.25);
  isolation:isolate
}
.wgGame *{box-sizing:border-box}
.wgGame button{font:inherit}
.wgSky{position:absolute;inset:0 0 auto;height:330px;pointer-events:none;overflow:hidden}
.wgStar{position:absolute;color:#fff8bf;font-size:38px;text-shadow:0 0 18px rgba(255,244,163,.8);animation:wgTwinkle 2.4s ease-in-out infinite}
.wgStarOne{right:9%;top:55px}.wgStarTwo{left:15%;top:125px;animation-delay:-1.2s}
.wgMoon{position:absolute;top:24px;left:38px;font-size:74px;color:#fff3b0;filter:drop-shadow(0 0 18px rgba(255,243,176,.6));animation:wgFloat 4s ease-in-out infinite}
.wgCloud{position:absolute;width:120px;height:36px;border-radius:999px;background:rgba(255,255,255,.18);animation:wgCloudMove 26s linear infinite}
.wgCloud:before,.wgCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.wgCloud:before{width:54px;height:54px;right:18px;bottom:7px}
.wgCloud:after{width:41px;height:41px;left:17px;bottom:7px}
.wgCloudOne{top:90px;right:-150px}.wgCloudTwo{top:170px;left:-140px;animation-duration:32s;animation-delay:-14s}

.wgHeader{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;color:#fff;padding:4px 4px 18px}
.wgKicker{display:inline-flex;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.15);font-size:12px;font-weight:900}
.wgHeader h1{margin:8px 0 3px;font-size:clamp(31px,5vw,52px);line-height:1;text-shadow:0 4px 12px rgba(0,0,0,.25)}
.wgHeader h1 span{display:inline-block;animation:wgTitle 2.3s ease-in-out infinite}
.wgHeader p{margin:0;font-weight:800;opacity:.94}
.wgSound{border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;font-weight:900;padding:11px 16px;white-space:nowrap}

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

.wgStats{position:relative;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0}
.wgStats>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,.94);box-shadow:0 6px 15px rgba(33,31,52,.1)}
.wgStats>div>span{grid-row:1/3;font-size:23px}
.wgStats small{font-size:10px;color:#6d6674;font-weight:900}
.wgStats b{font-size:18px}.wgStats em{font-style:normal}

.wgScene{position:relative;z-index:3;min-height:500px;overflow:hidden;border-radius:30px;background:linear-gradient(180deg,#482082 0 63%,#3f6212 63% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.17),0 18px 40px rgba(42,25,69,.26)}
.wgCastle{position:absolute;inset:0;pointer-events:none}
.wgWall{position:absolute;bottom:62px;left:7%;right:7%;height:205px;border-radius:12px 12px 0 0;background:
  linear-gradient(rgba(255,255,255,.09) 2px,transparent 2px),
  linear-gradient(90deg,rgba(255,255,255,.08) 2px,transparent 2px),
  linear-gradient(180deg,#a78bfa,#7654c8);
  background-size:50px 40px,50px 40px,auto;
  box-shadow:inset 0 8px rgba(255,255,255,.12),0 12px 20px rgba(0,0,0,.18)}
.wgTower{position:absolute;bottom:58px;width:160px;height:280px;background:linear-gradient(90deg,#6d28d9,#a78bfa,#5b21b6);border-radius:14px 14px 3px 3px;box-shadow:inset 0 8px rgba(255,255,255,.12)}
.wgTower:before{content:"";position:absolute;top:-26px;left:-8px;right:-8px;height:42px;background:repeating-linear-gradient(90deg,#8b5cf6 0 28px,transparent 29px 40px)}
.wgTower i{position:absolute;width:24px;height:42px;border-radius:12px 12px 2px 2px;background:#25104d;box-shadow:inset 0 0 12px rgba(255,209,102,.42)}
.wgTower i:nth-child(1){top:42px;left:28px}.wgTower i:nth-child(2){top:42px;right:28px}.wgTower i:nth-child(3){top:132px;left:68px}
.wgTowerLeft{left:3%}.wgTowerRight{right:3%}
.wgGateFrame{position:absolute;bottom:58px;left:50%;width:250px;height:270px;transform:translateX(-50%);border:16px solid #fbbf24;border-bottom:0;border-radius:130px 130px 0 0;background:#241044;overflow:hidden;box-shadow:0 0 0 8px rgba(120,53,15,.35),0 0 32px rgba(255,209,102,.25)}
.wgDoor{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,#7c2d12 0 22px,#92400e 23px 25px);border:2px solid #4a1d0a;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wgDoorLeft{left:0;transform-origin:left}.wgDoorRight{right:0;transform-origin:right}
.wgLock{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-size:48px;z-index:4;transition:.35s}
.wgGlow{position:absolute;inset:0;background:radial-gradient(circle,#fff7ae 0,#f59e0b 34%,transparent 70%);opacity:0;transform:scale(.5);transition:.7s}
.wgScene.is-open .wgDoorLeft{transform:perspective(400px) rotateY(-100deg)}
.wgScene.is-open .wgDoorRight{transform:perspective(400px) rotateY(100deg)}
.wgScene.is-open .wgLock{opacity:0;transform:translate(-50%,-50%) scale(2)}
.wgScene.is-open .wgGlow{opacity:1;transform:scale(1.25)}
.wgScene.is-wrong{animation:wgShake .38s}

.wgMission{position:absolute;z-index:7;top:18px;left:50%;transform:translateX(-50%);width:min(92%,560px);padding:13px 18px;text-align:center;border-radius:25px;background:rgba(35,13,70,.72);color:#fff;backdrop-filter:blur(5px);box-shadow:0 12px 25px rgba(0,0,0,.18)}
.wgMission>span{display:block;font-size:15px;font-weight:900}
.wgMission>strong#wgLetter{display:block;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:clamp(60px,9vw,96px);line-height:.95;color:#fff7b2;text-shadow:0 7px 15px rgba(0,0,0,.24)}
.wgMissionActions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.wgMissionActions button{border:0;border-radius:999px;padding:8px 13px;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;font-size:11px;font-weight:900}
.wgAudioFallback{display:block;min-height:24px;margin-top:5px;color:#fff0a5;font-size:17px}
.wgKeys{display:flex;justify-content:center;gap:7px;min-height:34px;margin-top:5px}
.wgKey{font-size:29px;animation:wgKeyIn .35s ease}
.wgQuestionTimer{height:10px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.wgQuestionTimer span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#35b96f,#ffcb56,#e64c57);transition:width .08s linear}

.wgMessage{position:absolute;z-index:11;left:14%;right:14%;bottom:35px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(30,10,60,.82);color:#fff;font-weight:900;backdrop-filter:blur(5px)}
.wgBankStatus{position:absolute;z-index:11;left:15%;right:15%;bottom:10px;text-align:center;color:#fff2be;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.wgComboBurst{position:absolute;z-index:25;left:50%;top:57%;transform:translate(-50%,-50%);font-size:clamp(34px,7vw,70px);font-weight:1000;color:#fff56d;text-shadow:0 5px 0 #d14a67,0 12px 25px rgba(0,0,0,.25);pointer-events:none}

.wgProgress{height:14px;margin:13px 4px;border-radius:999px;background:#ded2eb;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.wgProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7655c5,#3d83cf,#ffca5c,#32b878);transition:.35s}

.wgWords{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-height:220px}
.wgWord{position:relative;min-height:165px;border:2px solid transparent;border-radius:22px;padding:10px;background:#fff;box-shadow:0 10px 24px rgba(59,36,72,.1);color:var(--ink);cursor:pointer;transition:.18s;overflow:hidden}
.wgWord:hover{transform:translateY(-4px) scale(1.01)}
.wgWordMedia{height:92px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#fff8e8;overflow:hidden}
.wgWordMedia img{width:100%;height:100%;display:none;object-fit:contain}
.wgWordFallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;padding:8px;font-size:16px;text-align:center;color:#724a64;font-weight:900}
.wgWordText{display:block;margin-top:7px;font-size:18px;font-weight:900}
.wgWordAudio{position:absolute;top:7px;left:7px;width:33px;height:33px;border:0;border-radius:50%;background:#6d28d9;color:#fff;cursor:pointer;font-size:15px;z-index:3}
.wgWord.correct{background:#dcfce7;border-color:#22c55e;animation:wgPulse .38s}
.wgWord.wrong{background:#fee2e2;border-color:#ef4444;animation:wgShake .36s}
.wgWord.disabled{pointer-events:none;opacity:.55}
.wgWord.reveal{box-shadow:0 0 0 5px rgba(34,197,94,.24)}
.wgWord.is-hint{box-shadow:0 0 0 6px rgba(250,204,21,.25);animation:wgHintPulse .75s ease 2}
.wgWord[disabled]{cursor:default}

.wgSummary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:11px 0}
.wgSummary>div{padding:10px;border-radius:16px;background:rgba(255,255,255,.9);text-align:center;box-shadow:0 7px 18px rgba(0,0,0,.055)}
.wgSummary small,.wgSummary b{display:block}.wgSummary small{font-size:10px;color:#6b7280}.wgSummary b{font-size:19px}
.wgControls,.wgShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.wgControls button,.wgShare button,.wgEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.wgPrimary{background:linear-gradient(145deg,#7c3aed,#5530a2);color:#fff}
.wgSecondary{background:#fff;color:#405c6b}
.wgShare{margin-top:11px}.wgShare button{padding:8px 14px;background:rgba(255,255,255,.84);font-size:12px;color:#3f5d67}

.wgEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(30,15,43,.82);backdrop-filter:blur(5px)}
.wgEnd.is-visible{display:flex}
.wgEndCard{width:min(520px,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:wgEndIn .38s}
.wgEndBadge{font-size:27px}.wgCup{font-size:72px}.wgStars{font-size:37px}
.wgEndCard h2{margin:6px;font-size:30px;color:#66418f}
.wgEndStats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0}
.wgEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.wgEndStats b,.wgEndStats small{display:block}.wgEndStats b{font-size:19px}.wgEndStats small{font-size:9px;color:#77766b}
.wgBest{font-weight:900;color:#9b671a}.wgEndCard button{background:linear-gradient(145deg,#7c3aed,#5530a2);color:#fff}

.wgPaused .wgSky *{animation-play-state:paused!important}
.wgPaused .wgWords{pointer-events:none;filter:grayscale(.3)}

@keyframes wgTwinkle{50%{opacity:.35;transform:scale(.7)}}
@keyframes wgFloat{50%{transform:translateY(8px) rotate(-4deg)}}
@keyframes wgCloudMove{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes wgTitle{50%{transform:scale(1.08) rotate(5deg)}}
@keyframes wgShake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
@keyframes wgPulse{50%{transform:scale(1.06)}}
@keyframes wgKeyIn{0%{transform:translateY(-15px) scale(.2) rotate(-40deg);opacity:0}}
@keyframes wgHintPulse{50%{transform:translateY(-6px) scale(1.04)}}
@keyframes wgEndIn{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}

@media(max-width:900px){
  .wgGame{padding:13px;border-radius:20px}
  .wgHeader p{font-size:12px}
  .wgLevels{gap:6px}.wgLevels button{padding:8px 4px}.wgLevels button small{display:none}
  .wgStats{grid-template-columns:repeat(3,1fr);gap:4px}
  .wgStats>div{display:block;text-align:center;padding:6px 2px}
  .wgStats>div>span{font-size:18px}.wgStats small{display:block;font-size:8px}.wgStats b{font-size:15px}
  .wgWords{grid-template-columns:repeat(3,1fr)}
  .wgTower{width:115px}
}
@media(max-width:620px){
  .wgHeader{display:block}.wgHeader h1{font-size:29px}.wgKicker{font-size:9px}.wgSound{margin-top:9px;padding:9px 10px;font-size:11px}
  .wgLevels{grid-template-columns:1fr}
  .wgLevels button{display:grid;grid-template-columns:auto 1fr;column-gap:9px;text-align:right}
  .wgLevels button span{grid-row:1/3}
  .wgScene{min-height:570px}
  .wgTower{width:78px}.wgTowerLeft{left:-5px}.wgTowerRight{right:-5px}
  .wgGateFrame{width:195px;height:235px}
  .wgMission{top:17px;width:88%}
  .wgWords{grid-template-columns:repeat(2,1fr);gap:8px}
  .wgWord{min-height:145px}.wgWordMedia{height:76px}.wgWordText{font-size:16px}
  .wgMessage{left:5%;right:5%;bottom:44px;font-size:12px}
  .wgBankStatus{left:5%;right:5%;bottom:14px}
  .wgSummary,.wgEndStats{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.wgGame *{animation:none!important;transition:none!important}}