.msGame{
  --ink:#30495a;
  --violet:#7351bd;
  --blue:#3c83ce;
  --gold:#ffcb5a;
  --green:#31b778;
  --red:#d64b57;
  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,#d7f1ff 0 32%,#ead3a3 32% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(48,75,96,.24);
  isolation:isolate
}
.msGame *{box-sizing:border-box}
.msGame button{font:inherit}
.msWorld{position:absolute;inset:0;pointer-events:none}
.msCloud{position:absolute;width:125px;height:39px;border-radius:999px;background:rgba(255,255,255,.83);filter:drop-shadow(0 7px 8px rgba(50,115,142,.12));animation:msCloud 24s linear infinite}
.msCloud:before,.msCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.msCloud:before{width:58px;height:58px;right:20px;bottom:7px}
.msCloud:after{width:43px;height:43px;left:20px;bottom:8px}
.msCloudOne{top:72px;right:-150px}
.msCloudTwo{top:155px;left:-140px;animation-duration:30s;animation-delay:-13s;transform:scale(.78)}
.msPrint{position:absolute;color:#7351bd;font-size:46px;text-shadow:0 4px 0 rgba(255,255,255,.7);animation:msPrint 4s ease-in-out infinite}
.msPrintOne{left:7%;top:49px}.msPrintTwo{right:8%;top:141px;animation-delay:-2s}

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

.msLevels{position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.msLevels 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(31,82,102,.1);transition:.22s}
.msLevels button span,.msLevels button b,.msLevels button small{display:block}
.msLevels button span{font-size:26px}.msLevels button b{font-size:17px}
.msLevels button small{margin-top:3px;color:#687b82;font-size:11px}
.msLevels button:hover{transform:translateY(-3px)}
.msLevels button.is-active{transform:translateY(-4px);border-color:var(--gold);background:#fff2bf;box-shadow:0 12px 26px rgba(221,157,24,.25)}

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

.msAcademy{position:relative;z-index:2;min-height:900px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#b6dce9 0 30%,#9a795b 30% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.28),inset 0 -25px 45px rgba(48,30,17,.2),0 15px 35px rgba(58,80,72,.16)}
.msAcademy:before{content:"";position:absolute;left:-5%;right:-5%;bottom:-105px;height:285px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#654432,#30211b);box-shadow:inset 0 18px 0 rgba(255,255,255,.04)}
.msWall{position:absolute;inset:0 0 auto;height:30%;background:
  linear-gradient(rgba(65,78,86,.1) 2px,transparent 2px),
  linear-gradient(90deg,rgba(65,78,86,.1) 2px,transparent 2px),
  linear-gradient(180deg,#bedee9,#8db9c8);
  background-size:42px 42px,42px 42px,auto}
.msEvidenceBoard{position:absolute;left:4%;top:35px;width:245px;height:155px;border:13px solid #6c472d;background:
  linear-gradient(24deg,transparent 48%,#b8454e 49% 51%,transparent 52%),
  linear-gradient(-18deg,transparent 48%,#b8454e 49% 51%,transparent 52%),
  #d8ba8c;
  box-shadow:0 13px 20px rgba(48,43,31,.2)}
.msEvidenceBoard:before{content:"أ  ؟  ب";position:absolute;inset:0;display:grid;place-items:center;color:#6c3344;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:37px;font-weight:900}
.msShelf{position:absolute;right:4%;top:67px;width:240px;height:82px;border-bottom:13px solid #694528;background:repeating-linear-gradient(90deg,#77394c 0 22px,#d2a444 23px 43px,#3e6288 44px 65px,#6d5189 66px 88px,#4b824c 89px 111px);box-shadow:0 10px 17px rgba(53,41,26,.17)}
.msLamp{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:115px;height:62px;border-radius:55px 55px 8px 8px;background:#5a6670;box-shadow:0 45px 60px rgba(255,239,168,.55)}
.msLamp:after{content:"";position:absolute;left:50%;top:51px;transform:translateX(-50%);width:245px;height:170px;clip-path:polygon(39% 0,61% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,242,172,.42),transparent)}

.msDetective{position:absolute;z-index:10;left:21px;top:310px;font-size:92px;filter:drop-shadow(0 14px 8px rgba(56,42,27,.24));animation:msDetective 3s ease-in-out infinite}
.msMagnifier{position:absolute;z-index:10;right:27px;top:330px;font-size:77px;filter:drop-shadow(0 14px 8px rgba(56,42,27,.22));animation:msMagnifier 3.2s ease-in-out infinite}

.msCaseCard{position:absolute;z-index:18;left:50%;top:35px;transform:translateX(-50%);width:395px;min-height:385px;padding:31px 20px 18px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#fff0c3);border:5px solid rgba(255,255,255,.9);box-shadow:0 16px 0 rgba(87,64,40,.19),0 25px 34px rgba(44,64,61,.2)}
.msCaseCard.is-correct{animation:msCardCorrect .62s}
.msCaseCard.is-wrong{animation:msCardWrong .5s}
.msCategory{position:absolute;top:-15px;left:50%;transform:translateX(-50%);min-width:135px;padding:6px 12px;border-radius:999px;background:#7351bd;color:#fff;font-size:10px;font-weight:1000;box-shadow:0 5px 0 #50348f}
.msCaseCard>small{display:block;color:#866844;font-weight:900}
.msPicture{display:flex;width:105px;height:105px;margin:8px auto;border-radius:23px;background:#fff;box-shadow:0 8px 18px rgba(59,57,45,.14);overflow:hidden;align-items:center;justify-content:center}
.msPicture.is-hidden{display:none}
.msPicture img{width:100%;height:100%;object-fit:contain}
.msPicture span{display:none;font-size:42px;color:#6d3e72;font-weight:900}
.msClue{margin:5px 0;color:#685745;font-size:11px;font-weight:900}
.msPosition{display:inline-flex;padding:6px 12px;border-radius:999px;background:#e9ddff;color:#5d3c8a;font-size:10px;font-weight:900}
.msWordTiles{display:flex;direction:rtl;justify-content:center;gap:8px;flex-wrap:wrap;margin:15px 0 12px}
.msWordTile{display:grid;place-items:center;width:59px;height:67px;border-radius:17px;background:linear-gradient(145deg,#fff7cf,#efce79);color:#713651;border:4px solid #d5a54e;box-shadow:0 7px 0 #a87635;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:38px;font-weight:900}
.msWordTile.is-missing{background:linear-gradient(145deg,#efe7ff,#cbb4ff);border-style:dashed;border-color:#7654c5;color:#7654c5;animation:msMissing 1.1s ease-in-out infinite}
.msWordTile.is-revealed{background:linear-gradient(145deg,#e4ffd5,#72d98b);border-color:#45a65e;color:#215f35}
.msReplay{border:0;border-radius:999px;padding:8px 13px;background:#fff;color:#684696;cursor:pointer;font-size:10px;font-weight:900;box-shadow:0 5px 0 rgba(77,56,32,.14)}
.msAudioFallback{display:block;min-height:27px;margin-top:5px;color:#7c386c;font-size:20px}
.msQuestionTimer{height:11px;margin-top:8px;border-radius:999px;background:#e4e7ea;overflow:hidden}
.msQuestionTimer span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#35b96f,#ffcb56,#e64c57);transition:width .08s linear}

.msSuspects{position:absolute;z-index:20;left:8%;right:8%;top:470px;padding:17px;border-radius:27px;background:linear-gradient(145deg,#5c3e2b,#33251f);border:8px solid #b8824e;box-shadow:0 15px 0 rgba(47,31,22,.26),0 24px 31px rgba(45,42,34,.2)}
.msSuspectsTitle{display:flex;justify-content:space-between;gap:10px;color:#fff3d2;font-weight:900}
.msSuspectsTitle small{color:#ddc39d;font-size:9px}
.msOptions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:13px}
.msOption{min-height:83px;border:0;border-radius:20px;background:linear-gradient(145deg,#488adb,#235ba7);color:#fff;cursor:pointer;box-shadow:0 8px 0 #1a447d,0 13px 18px rgba(24,32,39,.25);font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:43px;font-weight:900;transition:.17s}
.msOption:hover{transform:translateY(-5px)}
.msOption.is-correct{animation:msOptionCorrect .65s;background:linear-gradient(145deg,#e8ffd8,#72d88b);color:#235f36;box-shadow:0 8px 0 #3b9956}
.msOption.is-wrong{animation:msOptionWrong .48s;background:linear-gradient(145deg,#ffd6d8,#ee858e);color:#7b2430;box-shadow:0 8px 0 #a33a44}
.msOption.is-hint{opacity:.17;filter:grayscale(1);pointer-events:none}
.msOption[disabled]{cursor:default}

.msMessage{position:absolute;z-index:24;left:17%;right:17%;bottom:29px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.94);color:#465d68;font-weight:900;box-shadow:0 8px 19px rgba(72,70,51,.14)}
.msBankStatus{position:absolute;z-index:24;left:18%;right:18%;bottom:8px;text-align:center;color:#fff1ce;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(65,43,27,.6)}
.msComboBurst{position:absolute;z-index:34;left:50%;top:55%;transform:translate(-50%,-50%);pointer-events:none;color:#fff56d;font-size:clamp(32px,6vw,66px);font-weight:1000;text-shadow:0 5px 0 #d52c67,0 13px 25px rgba(0,0,0,.25)}

.msProgress{height:14px;margin:13px 4px;border-radius:999px;background:#d8c69e;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.msProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7351bd,#3d83cf,#ffca5c,#32b878);transition:.35s}
.msActions,.msShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.msActions button,.msShare button,.msEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.msPrimary{background:linear-gradient(145deg,#7351bd,#4f328f);color:#fff}
.msSecondary{background:#fff;color:#365b68}
.msGold{background:linear-gradient(145deg,#ffd56d,#eab442);color:#5a3b0b}
.msShare{margin-top:11px}.msShare button{padding:8px 14px;background:rgba(255,255,255,.83);font-size:12px;color:#3f5d67}

.msEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(34,47,57,.81);backdrop-filter:blur(5px)}
.msEnd.is-visible{display:flex}
.msEndCard{width:min(500px,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:msEndIn .38s}
.msEndBadge{font-size:26px}.msCup{font-size:72px}.msStars{font-size:37px}
.msEndCard h2{margin:6px;font-size:30px;color:#66418f}
.msEndStats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0}
.msEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.msEndStats b,.msEndStats small{display:block}.msEndStats b{font-size:19px}.msEndStats small{font-size:9px;color:#77766b}
.msBest{font-weight:900;color:#9b671a}.msEndCard button{background:linear-gradient(145deg,#7351bd,#4f328f);color:#fff}

.msPaused .msWorld *,.msPaused .msDetective,.msPaused .msMagnifier,.msPaused .msWordTile.is-missing{animation-play-state:paused!important}
.msPaused .msOptions{pointer-events:none;filter:grayscale(.25)}

@keyframes msCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes msPrint{50%{transform:translateY(12px) rotate(12deg) scale(1.1)}}
@keyframes msTitle{50%{transform:scale(1.08) rotate(6deg)}}
@keyframes msDetective{50%{transform:translateY(-7px) rotate(-2deg)}}
@keyframes msMagnifier{50%{transform:translateY(-7px) rotate(8deg)}}
@keyframes msMissing{50%{transform:translateY(-4px);box-shadow:0 0 0 7px rgba(117,82,196,.15)}}
@keyframes msCardCorrect{45%{transform:translateX(-50%) translateY(-11px) scale(1.05);filter:brightness(1.12)}}
@keyframes msCardWrong{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
@keyframes msOptionCorrect{45%{transform:translateY(-8px) scale(1.07);filter:brightness(1.14)}}
@keyframes msOptionWrong{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
@keyframes msEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:1040px){
  .msGame{padding:13px;border-radius:20px}
  .msHeader p{font-size:12px}
  .msLevels{gap:6px}.msLevels button{padding:8px 4px}.msLevels button small{display:none}
  .msStats{grid-template-columns:repeat(4,1fr);gap:4px}
  .msStats>div{display:block;text-align:center;padding:6px 2px}
  .msStats>div>span{font-size:18px}.msStats small{display:block;font-size:8px}.msStats b{font-size:15px}
  .msAcademy{min-height:1050px}
  .msEvidenceBoard,.msShelf{opacity:.5;transform:scale(.72)}
  .msEvidenceBoard{transform-origin:left top}.msShelf{transform-origin:right top}
  .msDetective{left:-10px;top:325px;font-size:68px}
  .msMagnifier{right:-5px;top:340px;font-size:58px}
  .msCaseCard{top:48px;width:285px}
  .msSuspects{left:5%;right:5%;top:500px}
  .msOptions{grid-template-columns:repeat(3,1fr)}
  .msMessage{left:5%;right:5%;bottom:29px;font-size:12px}.msBankStatus{left:5%;right:5%;bottom:8px}
}
@media(max-width:620px){
  .msHeader h1{font-size:29px}.msKicker{font-size:9px}.msSound{padding:9px 10px;font-size:11px}
  .msStats{grid-template-columns:repeat(3,1fr)}
  .msAcademy{min-height:1150px}
  .msCaseCard{top:55px;width:235px}
  .msPicture{width:88px;height:88px}
  .msWordTiles{gap:5px}.msWordTile{width:45px;height:54px;border-radius:13px;font-size:29px;border-width:3px}
  .msSuspects{top:500px;padding:12px}
  .msSuspectsTitle{display:block;text-align:center}.msSuspectsTitle small{display:block;margin-top:3px}
  .msOption{min-height:68px;font-size:35px}
  .msDetective,.msMagnifier{opacity:.45}
  .msEndStats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:410px){
  .msAcademy{min-height:1240px}
  .msOptions{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.msGame *{animation:none!important;transition:none!important}}