.mltGame{
  --ink:#2d4052;
  --gold:#ffc94f;
  --gold-dark:#cb8c1e;
  --brown:#74431f;
  --ocean:#48b9de;
  --green:#45b96e;
  --purple:#8063df;
  direction:rtl;
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:22px;
  color:var(--ink);
  background:
    radial-gradient(circle at 14% 6%,rgba(255,255,255,.95),transparent 17%),
    linear-gradient(180deg,#bdeaff 0 34%,#eaf4cb 34% 100%);
  font-family:"Alexandria",Tahoma,Arial,sans-serif;
  box-shadow:0 25px 72px rgba(38,88,110,.23);
  isolation:isolate
}
.mltGame *{box-sizing:border-box}
.mltGame button{font:inherit}
.mltSky,.mltSparkles{position:absolute;inset:0;pointer-events:none}
.mltSun{position:absolute;left:6%;top:45px;font-size:67px;filter:drop-shadow(0 9px 12px rgba(255,184,33,.28));animation:mltSun 5s ease-in-out infinite}
.mltCloud{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:mltCloud 23s linear infinite}
.mltCloud:before,.mltCloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.mltCloud:before{width:58px;height:58px;right:20px;bottom:7px}
.mltCloud:after{width:43px;height:43px;left:20px;bottom:8px}
.mltCloudOne{top:72px;right:-150px}
.mltCloudTwo{top:155px;left:-140px;animation-duration:30s;animation-delay:-13s;transform:scale(.78)}
.mltSeagull{position:absolute;color:#39718c;font-size:31px;font-weight:900;animation:mltBird 13s linear infinite}
.mltSeagullOne{right:-35px;top:190px}
.mltSeagullTwo{right:-65px;top:120px;animation-delay:-6s;animation-duration:17s}
.mltSparkles i{position:absolute;color:#fff074;font-style:normal;text-shadow:0 0 12px white;animation:mltSpark 2.8s ease-in-out infinite}
.mltSparkles i:nth-child(1){right:8%;top:36%;font-size:20px}
.mltSparkles i:nth-child(2){right:25%;top:57%;animation-delay:-1s}
.mltSparkles i:nth-child(3){left:9%;top:42%;font-size:25px;animation-delay:-1.8s}
.mltSparkles i:nth-child(4){left:28%;top:61%;animation-delay:-.7s}
.mltSparkles i:nth-child(5){right:49%;top:33%;animation-delay:-2.1s}
.mltSparkles i:nth-child(6){left:44%;top:72%;animation-delay:-1.3s}

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

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

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

.mltIsland{position:relative;z-index:2;min-height:720px;overflow:hidden;border-radius:29px;background:linear-gradient(180deg,#8dd8fb 0 36%,#45b9dd 36% 58%,#f1d58e 58% 100%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.34),inset 0 -25px 45px rgba(103,77,30,.14),0 15px 35px rgba(58,80,72,.16)}
.mltIsland:before{content:"";position:absolute;left:10%;right:10%;bottom:-115px;height:315px;border-radius:50% 50% 0 0;background:linear-gradient(180deg,#efcf7b,#c89448);box-shadow:inset 0 17px 0 rgba(255,255,255,.13)}
.mltOcean{position:absolute;left:0;right:0;top:36%;height:28%;overflow:hidden;background:linear-gradient(180deg,#54c3e8,#218ebf)}
.mltOcean i{position:absolute;left:-10%;width:120%;height:25px;border-radius:50%;border-top:5px solid rgba(255,255,255,.45);animation:mltWave 3s ease-in-out infinite}
.mltOcean i:nth-child(1){top:12%;animation-delay:-1s}
.mltOcean i:nth-child(2){top:35%;animation-delay:-2s}
.mltOcean i:nth-child(3){top:58%;animation-delay:-.5s}
.mltOcean i:nth-child(4){top:80%;animation-delay:-1.7s}
.mltMountains:before,.mltMountains:after{content:"";position:absolute;top:26%;width:360px;height:180px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.mltMountains:before{right:-70px;background:linear-gradient(145deg,#68a060,#43754a)}
.mltMountains:after{left:-85px;background:linear-gradient(145deg,#6aa565,#426f48)}
.mltPalm{position:absolute;z-index:5;font-size:84px;filter:drop-shadow(0 10px 9px rgba(76,65,32,.24));animation:mltPalm 4s ease-in-out infinite}
.mltPalmOne{right:2%;bottom:116px}
.mltPalmTwo{left:3%;bottom:98px;transform:scaleX(-1);animation-delay:-2s}

.mltChestArea{position:absolute;z-index:7;right:20px;top:24px;width:145px;text-align:center}
.mltChest{position:relative;width:112px;height:95px;margin:0 auto 8px;filter:drop-shadow(0 13px 12px rgba(75,55,25,.23))}
.mltChestLid{position:absolute;z-index:4;left:7px;top:5px;width:98px;height:42px;border-radius:52px 52px 11px 11px;background:linear-gradient(180deg,#8b5429,#5a3219);border:7px solid #d19a3f;transform-origin:50% 100%;transition:.55s}
.mltChestBody{position:absolute;left:5px;bottom:0;width:102px;height:58px;border-radius:8px 8px 18px 18px;background:linear-gradient(145deg,#805027,#4e2c17);border:7px solid #d19a3f;box-shadow:inset 14px 0 rgba(255,255,255,.05)}
.mltChestLock{position:absolute;z-index:6;left:42px;top:38px;font-size:29px;transition:.35s}
.mltChestLight{position:absolute;z-index:2;left:20px;top:20px;width:73px;height:45px;border-radius:50%;background:radial-gradient(circle,#fff8a3 0,#ffcf3f 34%,transparent 72%);opacity:0;transform:scale(.3);transition:.45s}
.mltChest.is-open .mltChestLid{transform:rotateX(-115deg) translateY(-5px)}
.mltChest.is-open .mltChestLock{opacity:0;transform:scale(.3)}
.mltChest.is-open .mltChestLight{opacity:1;transform:scale(1.7)}
.mltGemMeter{height:12px;border-radius:999px;background:rgba(80,76,29,.28);overflow:hidden;box-shadow:inset 0 2px 4px rgba(50,47,13,.22)}
.mltGemMeter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7d63df,#64c9ff,#ffe46a);transition:.45s}
.mltChestArea small{display:block;margin-top:4px;color:#4f5b40;font-size:9px;font-weight:900}

.mltMissionCard{position:absolute;z-index:9;top:40px;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,#fff2c9);border:5px solid rgba(255,255,255,.88);box-shadow:0 17px 0 rgba(112,79,43,.19),0 26px 34px rgba(50,77,68,.2);transition:.28s}
.mltMissionCard.is-correct{animation:mltCardCorrect .65s}
.mltMissionCard.is-wrong{animation:mltCardWrong .5s}
.mltLevelTitle{position:absolute;top:-15px;left:50%;transform:translateX(-50%);min-width:150px;padding:6px 12px;border-radius:999px;background:#ffc94f;color:#68400d;font-size:11px;font-weight:1000;box-shadow:0 5px 0 #d89b22}
.mltMediaFrame{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}
.mltMediaFrame img{width:98px;height:98px;object-fit:contain}
.mltImageFallback{display:none;font-size:57px}
.mltWordLabel{font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:34px;line-height:1.08;font-weight:900;color:#734826;min-height:39px}
.mltCategory{margin-top:3px;color:#788481;font-size:10px;font-weight:900}
.mltReplay{padding:7px 12px;margin-top:8px;font-size:11px}

.mltMapBoard{position:absolute;z-index:11;left:15%;right:15%;top:316px;min-height:162px;padding:18px 22px 15px;border-radius:23px;background:#f5dda5;background-image:linear-gradient(rgba(126,89,42,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(126,89,42,.07) 1px,transparent 1px);background-size:23px 23px;border:5px solid #9b6936;box-shadow:0 12px 0 #6d4626,0 20px 25px rgba(64,63,38,.2);transform:rotate(-.6deg)}
.mltMapBoard:before,.mltMapBoard:after{content:"";position:absolute;top:-8px;bottom:-8px;width:20px;border-radius:50%;background:linear-gradient(90deg,#bd8648,#f0cd8a,#9c6631)}
.mltMapBoard:before{right:-11px}
.mltMapBoard:after{left:-11px}
.mltMapPin{position:absolute;right:14px;top:10px;font-size:25px;animation:mltPin 2s ease-in-out infinite}
.mltInstruction{text-align:center;color:#684526;font-size:14px;font-weight:1000}
.mltWordBridge{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;direction:rtl;margin-top:13px}
.mltLetterTile{position:relative;display:flex;align-items:center;justify-content:center;width:61px;height:61px;border-radius:16px;background:linear-gradient(145deg,#fff8dc,#e7c88e);border:3px solid #9b6936;color:#683e21;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:39px;font-weight:900;box-shadow:0 6px 0 #80552d,0 10px 13px rgba(75,55,30,.17)}
.mltLetterTile.is-hidden{background:linear-gradient(145deg,#5c4a86,#34295b);border-color:#c4b5fd;color:#fff}
.mltLetterTile.is-hidden:after{content:"؟";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ffe866;font-size:38px}
.mltLetterTile.is-hidden span{opacity:0}
.mltLetterTile.is-revealed{background:linear-gradient(145deg,#fff588,#f0bc34);animation:mltReveal .55s}
.mltLetterTile.is-revealed:after{display:none}
.mltLetterTile.is-revealed span{opacity:1}

.mltCompass{position:absolute;z-index:20;left:50%;top:495px;transform:translateX(-50%);font-size:48px;filter:drop-shadow(0 9px 8px rgba(74,57,32,.22));transition:transform .65s cubic-bezier(.2,.8,.2,1);pointer-events:none;animation:mltCompass 3s ease-in-out infinite}
.mltOptions{position:absolute;z-index:12;left:7%;right:7%;bottom:77px;display:grid;grid-template-columns:repeat(6,minmax(76px,1fr));gap:12px;align-items:end}
.mltOption{position:relative;min-height:130px;border:0;background:transparent;cursor:pointer;padding:0;transition:.2s}
.mltIslandRock{position:absolute;left:50%;bottom:0;width:100%;height:66px;border-radius:50% 50% 26% 26%;background:linear-gradient(145deg,#b47b3b,#75461f);transform:translateX(-50%);box-shadow:inset 0 10px rgba(255,255,255,.09),0 10px 11px rgba(68,50,27,.18)}
.mltOptionChest{position:absolute;z-index:4;left:50%;top:8px;width:86px;height:74px;transform:translateX(-50%);transition:.22s}
.mltOptionChest:before{content:"";position:absolute;left:5px;top:0;width:76px;height:33px;border-radius:38px 38px 8px 8px;background:linear-gradient(#955a2b,#5b3219);border:5px solid #d7a23e}
.mltOptionChest:after{content:"";position:absolute;left:4px;bottom:0;width:78px;height:43px;border-radius:5px 5px 13px 13px;background:linear-gradient(145deg,#825026,#4f2c17);border:5px solid #d7a23e}
.mltOptionValue{position:absolute;z-index:7;left:50%;top:29px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;min-width:42px;height:35px;padding:0 7px;border-radius:12px;background:#fff1a0;color:#56310f;font-family:"Baloo Bhaijaan 2","Alexandria",sans-serif;font-size:28px;font-weight:900;line-height:1;box-shadow:0 3px 5px rgba(67,42,17,.2)}
.mltOption:hover .mltOptionChest{transform:translateX(-50%) translateY(-7px) scale(1.05)}
.mltOption[disabled]{cursor:default;opacity:.68}
.mltOption.is-correct .mltOptionChest{animation:mltOptionCorrect .7s}
.mltOption.is-correct .mltOptionValue{background:#a7f3d0;box-shadow:0 0 19px #fff46f}
.mltOption.is-wrong .mltOptionChest{animation:mltOptionWrong .55s;filter:grayscale(.45)}
.mltOption:nth-child(odd) .mltIslandRock{height:58px}
.mltOption:nth-child(3n) .mltOptionChest{transform:translateX(-50%) rotate(2deg)}

.mltMessage{position:absolute;z-index:14;left:17%;right:17%;bottom:22px;min-height:45px;padding:10px 14px;text-align:center;border-radius:17px;background:rgba(255,255,255,.91);color:#4d5c5f;font-weight:900;box-shadow:0 8px 19px rgba(72,70,51,.14)}
.mltBankStatus{position:absolute;z-index:14;left:18%;right:18%;bottom:5px;text-align:center;color:#fff5cf;font-size:9px;font-weight:900;text-shadow:0 2px 4px rgba(83,58,29,.5)}
.mltCombo{position:absolute;z-index:30;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff36e;font-size:38px;font-weight:1000;text-shadow:0 4px 0 #774018}

.mltProgress{height:14px;margin:13px 4px;border-radius:999px;background:#d8c69e;overflow:hidden;box-shadow:inset 0 2px 5px rgba(82,63,30,.15)}
.mltProgress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8063df,#48b9de,#ffc94f);transition:.35s}
.mltControls,.mltShare{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.mltControls button,.mltShare button,.mltEnd button{border:0;border-radius:16px;padding:11px 18px;font-weight:900;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.mltPrimary{background:linear-gradient(145deg,#ffc94f,#e6a522);color:#59370c}
.mltSecondary{background:#fff;color:#365b68}
.mltShare{margin-top:11px}
.mltShare button{padding:8px 14px;background:rgba(255,255,255,.8);font-size:12px;color:#3f5d67}

.mltEnd{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(38,50,57,.78);backdrop-filter:blur(5px)}
.mltEnd.is-visible{display:flex}
.mltEndCard{width:min(460px,100%);padding:29px;text-align:center;border-radius:31px;background:linear-gradient(160deg,#fff,#fff0bd);box-shadow:0 28px 80px rgba(0,0,0,.35);animation:mltEndIn .38s}
.mltEndMap{font-size:26px}
.mltCup{font-size:72px}
.mltStars{font-size:37px}
.mltEndCard h2{margin:6px;font-size:30px;color:#754c20}
.mltEndStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.mltEndStats>div{padding:11px;border-radius:17px;background:#fff;box-shadow:0 7px 17px rgba(78,70,37,.08)}
.mltEndStats b,.mltEndStats small{display:block}
.mltEndStats b{font-size:21px}
.mltEndStats small{font-size:10px;color:#77766b}
.mltBest{font-weight:900;color:#9f6819}
.mltEndCard button{background:linear-gradient(145deg,#ffc94f,#dfa11f);color:#56350b}

.mltPaused .mltSky *,.mltPaused .mltSparkles i,.mltPaused .mltPalm,.mltPaused .mltCompass{animation-play-state:paused!important}
.mltPaused .mltOptions{pointer-events:none;filter:grayscale(.25)}

@keyframes mltSun{50%{transform:translateY(8px) rotate(6deg)}}
@keyframes mltCloud{from{transform:translateX(0)}to{transform:translateX(-130vw)}}
@keyframes mltBird{from{transform:translateX(0)}to{transform:translateX(-120vw)}}
@keyframes mltSpark{50%{opacity:.25;transform:scale(.55) rotate(90deg)}}
@keyframes mltMap{50%{transform:rotate(7deg) translateY(-4px)}}
@keyframes mltWave{50%{transform:translateX(32px) translateY(4px)}}
@keyframes mltPalm{50%{transform:rotate(3deg) translateY(-4px)}}
@keyframes mltPin{50%{transform:translateY(-6px)}}
@keyframes mltCompass{50%{transform:translateX(-50%) rotate(18deg) scale(1.06)}}
@keyframes mltCardCorrect{45%{transform:translateX(-50%) translateY(-12px) scale(1.055);filter:brightness(1.12)}}
@keyframes mltCardWrong{20%,60%{transform:translateX(calc(-50% - 9px))}40%,80%{transform:translateX(calc(-50% + 9px))}}
@keyframes mltReveal{45%{transform:scale(1.18) rotate(5deg)}}
@keyframes mltOptionCorrect{45%{transform:translateX(-50%) translateY(-11px) scale(1.1);filter:brightness(1.16)}}
@keyframes mltOptionWrong{20%,60%{transform:translateX(calc(-50% - 8px))}40%,80%{transform:translateX(calc(-50% + 8px))}}
@keyframes mltEndIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}

@media(max-width:920px){
  .mltGame{padding:13px;border-radius:20px}
  .mltHeader{align-items:flex-start}
  .mltHeader p{font-size:12px}
  .mltLevels{gap:6px}
  .mltLevels button{padding:8px 4px}
  .mltLevels button small{display:none}
  .mltStats{gap:4px}
  .mltStats>div{display:block;text-align:center;padding:6px 2px}
  .mltStats>div>span{font-size:18px}
  .mltStats small{display:block;font-size:8px}
  .mltStats b{font-size:15px}
  .mltIsland{min-height:800px}
  .mltChestArea{right:4px;top:25px;transform:scale(.73);transform-origin:right top}
  .mltMissionCard{top:51px;width:218px;min-height:235px}
  .mltMediaFrame{width:103px;height:103px}
  .mltMediaFrame img{width:90px;height:90px}
  .mltMapBoard{top:309px;left:5%;right:5%}
  .mltLetterTile{width:51px;height:51px;font-size:32px}
  .mltCompass{top:492px}
  .mltOptions{left:5%;right:5%;bottom:91px;grid-template-columns:repeat(3,1fr);gap:5px 11px}
  .mltOption{min-height:119px}
  .mltOptionChest{transform:translateX(-50%) scale(.82);transform-origin:center bottom}
  .mltOption:hover .mltOptionChest{transform:translateX(-50%) translateY(-5px) scale(.87)}
  .mltMessage{left:6%;right:6%;bottom:25px;font-size:12px}
  .mltBankStatus{left:6%;right:6%;bottom:8px}
}
@media(max-width:540px){
  .mltHeader h1{font-size:30px}
  .mltKicker{font-size:9px}
  .mltSound{padding:9px 10px;font-size:11px}
  .mltIsland{min-height:860px}
  .mltMissionCard{top:62px;width:198px}
  .mltChestArea{opacity:.75;transform:scale(.59)}
  .mltMapBoard{top:313px;min-height:185px;padding:18px 10px}
  .mltLetterTile{width:44px;height:48px;font-size:28px;border-radius:13px}
  .mltCompass{top:514px}
  .mltOptions{bottom:96px}
  .mltOption{min-height:128px}
  .mltEndStats{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .mltGame *{animation:none!important;transition:none!important}
}